/* CLAUDE: Kopfbereich und Bildnachweis der Standort-Landingpages (EINZELSEITE) */
/* CLAUDE: Inhalt, FAQ, Nachbarorte und CTA liegen in standort-inhalt.css */
/* CLAUDE: Die Übersichtsseite hat ein eigenes Blatt: standort-archiv.css */
/* CLAUDE: Geladen von inc/assets.php – nur auf standort_lp, nicht global */

/* CLAUDE: GRUNDSATZ FÜR DIESE SEITEN, aus gemessenen Werten (03.08.2026):
   CLAUDE: Heritage-Gold (#C19A6B) trägt als FLÄCHE und LINIE, NICHT als Text auf hellem
   CLAUDE: Grund. Gold auf Marmor ergibt 2,36:1, Gold auf Weiss 2,59:1 – beides unter dem
   CLAUDE: WCAG-AA-Minimum von 4,5:1. Schrift steht deshalb in Kastanie (6,68:1) oder
   CLAUDE: Dunkelumbra (12,47:1). Wer hier Gold als Textfarbe einsetzt, bricht das wieder. */

/* ============================================================
   CLAUDE: HERO – zweispaltig, Bild im ersten Bildschirm
   ============================================================ */

/* CLAUDE: Abstand und Grundfarbe; oben knapp gehalten, damit der Inhalt nicht absackt */
.standort-hero {
	padding-block: var(--spacing-lg) var(--spacing-xl);
	background: var(--color-marble-white);
}

/* CLAUDE: Das Raster. Textspalte minimal breiter als die Bildspalte – eine exakte
   CLAUDE: 50/50-Teilung wirkt statisch, 1.05/0.95 gibt der Seite eine Leserichtung. */
.standort-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

/* CLAUDE: Unter 900px einspaltig – und das BILD ZUERST, weil es der Blickfang ist */
/* CLAUDE: Ändern: Breakpoint hier UND im sizes-Attribut in hero.php gleich halten */
@media (max-width: 900px) {
	.standort-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}
	.standort-hero__bild {
		order: -1;
	}
}

/* CLAUDE: Brotkrümel – klein und zurückhaltend, damit die H1 führt */
.standort-breadcrumb {
	font-size: 0.875rem;
	color: var(--color-umber);
	margin-bottom: var(--spacing-sm);
	display: flex;
	flex-wrap: wrap;          /* CLAUDE: Bricht auf schmalen Bildschirmen um statt zu überlaufen */
	gap: 0.4em;
}

/* CLAUDE: Aktueller Ort ohne Link – visuell als Endpunkt erkennbar */
.standort-breadcrumb [aria-current="page"] {
	color: var(--color-dark-umber);
	font-weight: 600;
}

/* CLAUDE: H1 – fluide Größe, skaliert ohne Media Query zwischen Handy und Desktop */
.standort-hero__titel {
	font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.8rem);
	line-height: 1.15;
	margin: 0 0 var(--spacing-xs);
	color: var(--color-dark-umber);
	text-wrap: balance;       /* CLAUDE: Verhindert eine einsame Restzeile in der Überschrift */
}

/* CLAUDE: Kreis-/Landzeile. Schrift in Kastanie (6,68:1) – NICHT in Gold, siehe Grundsatz oben */
.standort-hero__region {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-chestnut);
	margin: 0 0 var(--spacing-sm);
}

/* CLAUDE: Der Goldstrich – hier trägt Gold, weil es eine Fläche ist und keine Schrift */
.standort-hero__marke {
	display: inline-block;
	inline-size: 1.75rem;
	block-size: 2px;
	background: var(--brand-accent);
	flex: none;
}

/* CLAUDE: Vorspanntext – begrenzte Zeilenlänge für Lesbarkeit */
.standort-hero__vorspann {
	font-size: 1.05rem;
	line-height: 1.65;
	max-width: 46ch;
	color: var(--color-brown);
	margin: 0 0 var(--spacing-md);
}

/* CLAUDE: Sprungmarke zum Formular; hält das Ziel ohne Scrollen erreichbar */
.standort-hero__aktion {
	margin: 0;
}

/* CLAUDE: Primärknopf in Burgunder – Weiss auf Burgunder ergibt 8,57:1 */
.standort-hero__cta {
	display: inline-block;
	padding: 0.85em 1.6em;
	background: var(--brand-primary);
	color: var(--brand-primary-text);
	border-radius: var(--btn-radius);
	text-decoration: none;
	font-weight: 600;
	transition: var(--transition-fast);
}

/* CLAUDE: Hover UND Focus gleich behandeln – Tastaturbedienung darf nicht schlechter aussehen */
.standort-hero__cta:hover,
.standort-hero__cta:focus-visible {
	background: var(--brand-primary-hover);
}

/* CLAUDE: Leichtes Eindrücken beim Klick – einzige Bewegung auf der Seite, bewusst sparsam */
.standort-hero__cta:active {
	transform: translateY(1px);
}

/* CLAUDE: Bildspalte */
.standort-hero__bild {
	margin: 0;
}

/* CLAUDE: 4:3 statt fester Höhe. Die Quellbilder sind 1600x1200; die frühere feste
   CLAUDE: Höhe ergab auf 1440px etwa 3:1 und schnitt oben und unten weg. */
.standort-hero__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* ============================================================
   CLAUDE: BILDNACHWEIS – rechtlich erforderliche Lizenzangabe
   ============================================================ */

/* CLAUDE: Klein, aber kontraststark (12,47:1) – nicht ausblenden, die Nennung ist
   CLAUDE: Lizenzbedingung bei CC-BY und CC-BY-SA */
.standort-bildnachweis {
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--color-dark-umber);
	padding: 0.5em 0.2em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: baseline;
	opacity: 0.85;
}

/* CLAUDE: Links im Nachweis unauffällig, aber als Link erkennbar (Unterstrich bleibt) */
.standort-bildnachweis a {
	color: inherit;
	text-decoration: underline;
}

/* CLAUDE: Hinweis auf KI-Erzeugung – hervorgehoben, weil Transparenzangabe */
.standort-bildnachweis__ki {
	font-weight: 600;
	color: var(--color-dark-umber);
	opacity: 1;
}