/*
 * AVS – Bildkopf
 *
 * Der Einstieg mit Foto statt weisser Flaeche. Das ist der groesste
 * einzelne Unterschied zwischen einer gebauten und einer gestalteten
 * Seite: Ein Bild traegt Stimmung und Groesse, bevor der erste Satz
 * gelesen ist.
 *
 * Aufbau in drei Ebenen:
 *   1. Foto als Hintergrund, leicht entsaettigt
 *   2. Verlauf von unten links – sorgt fuer Textkontrast
 *   3. Text darueber, hell
 *
 * Ohne Bild greift die Flaechenvariante: dunkler Grund mit warmem
 * Verlauf. Die Seite bleibt dadurch vollstaendig, auch solange fuer
 * einen Ort noch kein Foto vorliegt.
 */

.avs-bildkopf {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(300px, 42vw, 460px);
	padding-block: clamp(2rem, 5vw, 4rem);
	background-color: var(--avs-espresso);
	background-size: cover;
	background-position: center 40%;
	overflow: hidden;
	isolation: isolate;
}

/* Verlauf: unten links dicht, oben rechts offen. Dadurch bleibt vom
   Foto so viel wie moeglich sichtbar, waehrend der Text sicher lesbar
   ist – ein flaechiger Schleier ueber allem waere einfacher, wuerde
   das Bild aber entwerten. */
.avs-bildkopf::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			78deg,
			rgba(28, 20, 14, 0.94) 0%,
			rgba(28, 20, 14, 0.82) 34%,
			rgba(28, 20, 14, 0.42) 68%,
			rgba(28, 20, 14, 0.24) 100%
		);
}

/* Feiner Akzentstreifen am oberen Rand – bindet den Bildkopf an die
   Kontaktzeile darueber an. */
.avs-bildkopf::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--avs-akzent);
}

.avs-bildkopf--ohne-bild {
	background-image:
		radial-gradient(90% 120% at 84% 8%, rgba(180, 101, 15, 0.4) 0%, transparent 62%);
}

/* Gleiche Breite und gleicher Aussenabstand wie der Kopfbereich –
   dadurch beginnt der Text exakt auf der Senkrechten des Logos. */
.avs-bildkopf__inhalt {
	position: relative;
	width: 100%;
	max-width: var(--avs-breite-kopf);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 3vw, 3rem);
}

/* Eine Stufe kleiner als die Grundgroesse: auf einem Foto wirkt
   dieselbe Schriftgroesse deutlich groesser als auf weissem Grund. */
.avs-bildkopf h1 {
	margin: 0 0 var(--avs-abstand-4);
	max-width: 17ch;
	font-size: clamp(1.5rem, 2.1vw, 2rem);
	color: var(--avs-papier);
}

.avs-bildkopf__lead {
	max-width: 52ch;
	margin: 0 0 var(--avs-abstand-6);
	font-size: var(--avs-groesse-m);
	line-height: var(--avs-zeile-weit);
	color: rgba(255, 255, 255, 0.86);
}

.avs-bildkopf__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--avs-abstand-3);
}

/* Heller Umrissknopf auf dem Bild. */
.avs-knopf--hell {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--avs-papier);
	backdrop-filter: blur(2px);
}

.avs-knopf--hell:hover,
.avs-knopf--hell:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--avs-papier);
	color: var(--avs-papier);
}

/* --- Bildnachweis ------------------------------------------------------- */

/*
 * Fotograf und Lizenz. Bei fremden Bildern ist die Nennung
 * Voraussetzung fuer die Nutzung, deshalb steht sie immer dort,
 * wo das Bild steht – klein, aber vorhanden.
 */
.avs-bildnachweis {
	position: absolute;
	right: var(--avs-rand);
	bottom: 0.5rem;
	z-index: 1;
	font-size: 0.62rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.5);
}

.avs-bildnachweis a {
	color: inherit;
	text-decoration: none;
}

/* --- Brotkrumen --------------------------------------------------------- */

.avs-krumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--avs-abstand-2);
	margin: 0 0 var(--avs-abstand-4);
	padding: 0;
	list-style: none;
	font-family: var(--avs-schrift-daten);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.avs-krumen li {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-2);
	margin: 0;
}

.avs-krumen li + li::before {
	content: "/";
	color: rgba(255, 255, 255, 0.32);
}

.avs-krumen a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}

.avs-krumen a:hover {
	color: var(--avs-akzent-hell);
}

.avs-krumen [aria-current] {
	color: var(--avs-akzent);
}

/* --- Datenband auf dem Bildkopf ----------------------------------------- */

.avs-bildkopf .avs-leiste {
	margin-top: var(--avs-abstand-6);
	border-top-color: rgba(255, 255, 255, 0.42);
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.avs-bildkopf .avs-leiste li {
	border-right-color: rgba(255, 255, 255, 0.16);
}

.avs-bildkopf .avs-leiste__wert {
	color: var(--avs-papier);
}

.avs-bildkopf .avs-leiste__einheit,
.avs-bildkopf .avs-leiste__label {
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 639px) {
	.avs-bildkopf {
		min-height: 0;
	}

	.avs-bildkopf .avs-leiste li {
		flex-basis: 50%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}
}

/* --- Zentrierter Abschnittskopf ----------------------------------------- */

/*
 * Alternative zur linksbuendigen Titelzeile. Zentriert wirkt ruhiger
 * und gibt Abschnitten mit gleichrangigen Elementen darunter – etwa
 * drei Bereichen nebeneinander – mehr Gewicht.
 */
.avs-kopfmitte {
	max-width: 56ch;
	margin: 0 auto var(--avs-abstand-7);
	text-align: center;
}

.avs-kopfmitte h2 {
	margin: 0;
}

.avs-kopfmitte .avs-schild {
	margin-bottom: var(--avs-abstand-4);
}

.avs-kopfmitte__strich {
	display: block;
	width: 3rem;
	height: 3px;
	margin: var(--avs-abstand-4) auto 0;
	background-color: var(--avs-akzent);
}

.avs-kopfmitte p {
	margin: var(--avs-abstand-4) 0 0;
	font-size: var(--avs-groesse-l);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

.avs-kopfmitte--hell h2 {
	color: var(--avs-papier);
}

.avs-kopfmitte--hell p {
	color: rgba(255, 255, 255, 0.68);
}

/* --- Bild neben Text ---------------------------------------------------- */

.avs-bildtext {
	display: grid;
	gap: var(--avs-abstand-7);
	align-items: center;
}

@media (min-width: 960px) {
	.avs-bildtext {
		grid-template-columns: 1fr 1fr;
		gap: var(--avs-abstand-8);
	}

	.avs-bildtext--umgekehrt .avs-bildtext__bild {
		order: -1;
	}
}

.avs-bildtext__bild {
	position: relative;
}

.avs-bildtext__bild img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--avs-radius);
}

/* Versetzter Akzentrahmen hinter dem Bild – gibt Tiefe, ohne dass
   ein Schlagschatten noetig waere. */
.avs-bildtext__bild::before {
	content: "";
	position: absolute;
	inset: auto -14px -14px auto;
	width: 62%;
	height: 62%;
	border-right: 3px solid var(--avs-akzent);
	border-bottom: 3px solid var(--avs-akzent);
	z-index: -1;
}

/* --- Bildband ----------------------------------------------------------- */

.avs-bildband {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 720px) {
	.avs-bildband {
		grid-template-columns: repeat(4, 1fr);
	}
}

.avs-bildband img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: saturate(0.9);
	transition: filter var(--avs-dauer) var(--avs-verlauf);
}

.avs-bildband img:hover {
	filter: saturate(1.05);
}