/*
 * AVS – Komposition
 *
 * Die Bausteine waren in Ordnung, der Rhythmus war es nicht: jeder
 * Abschnitt gleich breit, gleich hoch, gleich zentriert. Das liest
 * sich als Baukasten, egal wie sauber die Einzelteile sind.
 *
 * Diese Datei bringt die Mittel, die den Unterschied ausmachen:
 *
 *   .avs-anhebung   Element ragt in den Abschnitt darueber hinein
 *   .avs-halbbild   Bild laeuft bis zum Bildschirmrand, Text daneben
 *   .avs-zitatband  randloses Bild mit grossem Zitat darauf
 *   .avs-liste-gross  nummerierte Liste mit grossen Ziffern
 *   .avs-enger      schmale Textstrecke fuer ruhige Passagen
 *
 * Leitgedanke: Wechsel zwischen Enge und Weite. Eine Seite, die
 * durchgehend gleich breit laeuft, wirkt tot – auch mit guten Bildern.
 */

/* --- Ueberlappende Karte ------------------------------------------------ */

/*
 * Zieht ein Element in den Abschnitt darueber. Erzeugt Tiefe und
 * verbindet Bildkopf und Inhalt, statt sie hart aneinanderzusetzen.
 */
.avs-anhebung {
	position: relative;
	z-index: 2;
	margin-top: clamp(-5rem, -6vw, -2.5rem);
	padding: var(--avs-abstand-6) var(--avs-abstand-6) var(--avs-abstand-5);
	background-color: var(--avs-papier);
	border-top: 3px solid var(--avs-akzent);
	box-shadow: 0 -2px 28px rgba(28, 20, 14, 0.16);
}

.avs-anhebung .avs-leiste {
	border-top: 0;
	border-bottom: 0;
}

.avs-anhebung .avs-leiste li {
	padding-top: 0;
	padding-bottom: 0;
}

/* --- Bild bis zum Rand, Text daneben ------------------------------------ */

/*
 * Der Abschnitt selbst hat keinen Container. Die Bildhaelfte laeuft
 * bis zum Bildschirmrand, die Texthaelfte richtet sich am Raster der
 * uebrigen Seite aus. Das bricht die immer gleiche Container-Kante auf.
 */
.avs-halbbild {
	display: grid;
	align-items: stretch;
}

@media (min-width: 900px) {
	.avs-halbbild {
		grid-template-columns: 1fr 1fr;
	}

	.avs-halbbild--links .avs-halbbild__bild {
		order: -1;
	}
}

.avs-halbbild__bild {
	position: relative;
	min-height: 340px;
	background-size: cover;
	background-position: center;
}

.avs-halbbild__bild img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
}

.avs-halbbild__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 5vw, 5rem) var(--avs-rand);
}

/* Textblock am Seitenraster ausrichten statt an der Bildkante. */
@media (min-width: 900px) {
	.avs-halbbild--links .avs-halbbild__text {
		padding-right: max(var(--avs-rand), calc((100vw - var(--avs-breite-inhalt)) / 2));
	}

	.avs-halbbild:not(.avs-halbbild--links) .avs-halbbild__text {
		padding-left: max(var(--avs-rand), calc((100vw - var(--avs-breite-inhalt)) / 2));
	}
}

.avs-halbbild__text > * {
	max-width: 46ch;
}

/* --- Zitatband ---------------------------------------------------------- */

/*
 * Randloses Bild mit einem einzigen Satz darauf. Setzt einen Punkt
 * zwischen zwei Textstrecken und gibt der Seite Luft.
 */
.avs-zitatband {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(260px, 30vw, 400px);
	padding: clamp(2.5rem, 5vw, 4rem) var(--avs-rand);
	background-color: var(--avs-espresso);
	background-size: cover;
	background-position: center 45%;
	text-align: center;
	isolation: isolate;
}

.avs-zitatband::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(28, 20, 14, 0.76);
}

.avs-zitatband blockquote {
	max-width: 34ch;
	margin: 0;
	font-family: var(--avs-schrift-titel);
	font-size: clamp(1.4rem, 2.6vw, 2.2rem);
	font-weight: var(--avs-fett-mittel);
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--avs-papier);
}

.avs-zitatband__quelle {
	display: block;
	margin-top: var(--avs-abstand-5);
	font-family: var(--avs-schrift-daten);
	font-size: 0.68rem;
	font-weight: var(--avs-fett-normal);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--avs-akzent);
}

/* --- Nummerierte Liste mit grossen Ziffern ------------------------------ */

/*
 * Ersetzt das Raster aus sechs gleich grossen Kaesten. Zwei Spalten,
 * grosse Ziffer links, Haarlinie darunter – liest sich als Aufzaehlung
 * und nicht als Tabelle.
 */
.avs-liste-gross {
	display: grid;
	gap: 0 var(--avs-abstand-8);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: avs-punkt;
}

@media (min-width: 860px) {
	.avs-liste-gross { grid-template-columns: repeat(2, 1fr); }
}

.avs-liste-gross li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--avs-abstand-5);
	align-items: start;
	margin: 0;
	padding: var(--avs-abstand-5) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	counter-increment: avs-punkt;
}

.avs-liste-gross li::before {
	content: counter( avs-punkt, decimal-leading-zero );
	font-family: var(--avs-schrift-daten);
	font-size: 1.5rem;
	font-weight: var(--avs-fett-halb);
	line-height: 1;
	color: var(--avs-akzent);
	font-variant-numeric: tabular-nums;
}

.avs-liste-gross h3 {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	margin: 0 0 var(--avs-abstand-2);
	color: var(--avs-papier);
	font-size: var(--avs-groesse-l);
}

.avs-liste-gross h3 .avs-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--avs-akzent);
}

.avs-liste-gross p {
	margin: 0;
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: rgba(255, 255, 255, 0.62);
}

/* Helle Variante fuer den Papiergrund. */
.avs-liste-gross--dunkel li {
	border-bottom-color: var(--avs-linie);
}

.avs-liste-gross--dunkel h3 {
	color: var(--avs-espresso);
}

.avs-liste-gross--dunkel p {
	color: var(--avs-text-leise);
}

/* --- Schmale Textstrecke ------------------------------------------------ */

/*
 * Bewusst enger als der Container. Nach einem breiten Bildband gibt
 * eine schmale Spalte dem Auge Ruhe – dieser Wechsel ist der halbe
 * Rhythmus einer Seite.
 */
.avs-enger {
	max-width: 66ch;
}

.avs-enger--mitte {
	margin-inline: auto;
}

/* --- Bildkarten --------------------------------------------------------- */

/*
 * Gleich grosse Karten aus Bild, Titel und kurzem Text. Ersetzt das
 * versetzte Bildpaar: das war unterschiedlich gross, liess darunter
 * eine Luecke und sah nach Zufall aus. Gleiche Groesse wirkt hier
 * nicht schematisch, sondern geordnet - weil die Karten dieselbe
 * Rolle haben.
 */
.avs-bildkarten {
	display: grid;
	gap: var(--avs-abstand-5);
}

@media (min-width: 640px) {
	.avs-bildkarten--3 { grid-template-columns: repeat(3, 1fr); }
	.avs-bildkarten--2 { grid-template-columns: repeat(2, 1fr); }
}

.avs-bildkarte {
	display: flex;
	flex-direction: column;
	background-color: var(--avs-papier);
	border: 1px solid var(--avs-linie);
	overflow: hidden;
	transition: border-color var(--avs-dauer) var(--avs-verlauf);
}

.avs-bildkarte:hover {
	border-color: var(--avs-akzent);
}

.avs-bildkarte img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.avs-bildkarte__text {
	padding: var(--avs-abstand-5);
}

.avs-bildkarte h3 {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	margin: 0 0 var(--avs-abstand-3);
	font-size: var(--avs-groesse-m);
}

.avs-bildkarte h3 .avs-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--avs-akzent);
}

.avs-bildkarte p {
	margin: 0;
	font-size: var(--avs-groesse-s);
	line-height: var(--avs-zeile-weit);
	color: var(--avs-text-leise);
}

/* Einzelbild in voller Spaltenhoehe. */
.avs-hochbild {
	position: sticky;
	top: var(--avs-abstand-6);
	margin: 0;
}

.avs-hochbild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--avs-radius);
}

.avs-hochbild figcaption {
	display: flex;
	align-items: center;
	gap: var(--avs-abstand-3);
	margin-top: var(--avs-abstand-4);
	padding-left: var(--avs-abstand-4);
	border-left: 3px solid var(--avs-akzent);
	font-size: var(--avs-groesse-s);
	color: var(--avs-graphit);
}

.avs-hochbild figcaption .avs-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	color: var(--avs-akzent);
}

/* --- Abschnittsdichte --------------------------------------------------- */

/* Nicht jeder Abschnitt braucht denselben Innenabstand. */
.avs-abschnitt--eng  { padding-block: clamp(2rem, 3.5vw, 3.5rem); }
.avs-abschnitt--weit { padding-block: clamp(4rem, 8vw, 8rem); }