/* single-viertelpunkt.php — Einzelartikel als eigenständige Seite
   (Direktaufruf / SEO). Im Blog erscheint der Artikel sonst als Panel.
   Die Topbar (.vf-single-topbar) selbst ist global in style.css, weil
   header.php sie auf jeder Nicht-Kartenseite ausgibt. */

.vf-single {
	max-width: 720px;
	margin: 0 auto;
	padding-bottom: var(--sp-8);
}
.vf-single__hero {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	display: block;
	border-bottom: var(--border-w) solid var(--ink);
}
.vf-single__content { padding: var(--sp-6) var(--sp-6) 0; }
.vf-single__kicker { margin-bottom: var(--sp-2); }
.vf-single__content h1 {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-hero);
	letter-spacing: var(--ls-title);
	line-height: var(--lh-tight);
}
.vf-single__meta { font-size: var(--fs-kicker); opacity: 0.6; margin-bottom: var(--sp-6); }
.vf-single__text p { font-size: var(--fs-lead); line-height: var(--lh-body); margin: 0 0 var(--sp-4); }

.vf-single__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
	margin: var(--sp-6) 0;
}
.vf-single__gallery img { width: 100%; height: 220px; object-fit: cover; border: var(--border-w) solid var(--ink); }

.vf-single__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	border-top: var(--divider-dashed);
	margin-top: var(--sp-6);
	padding: var(--sp-6);
}
.vf-single__nav a.vf-btn { text-decoration: none; }