/* front.css – Startseite.

   Nachbau von Figma „Mockups Relaunch", Rahmen „Startseite" (Knoten 1:2).
   Alle Zahlen in diesem File sind an diesem Rahmen abgemessen, nicht
   geschaetzt; die Knotennummer steht jeweils daneben.

   DER RAHMEN WURDE AM 2026-09-03 UMBENANNT UND VERDOPPELT
   Knoten 1:2 heisst seither „Startseite Hero var2" und zeigt die Buehne
   hellgrau mit dunkler Schrift; die schwarze Fassung, nach der dieses File
   gebaut wurde, steht unveraendert im neuen Rahmen „Startseite" (Knoten
   121:4). Die Knotennummern unten beziehen sich weiterhin auf 1:2 — Geometrie
   und Text sind in beiden Rahmen identisch, nur die Farben der Buehne nicht,
   siehe `.front-hero--light`.

   DER RAHMEN IST 1920 BREIT, DIE INHALTSSPALTE 1470
   -------------------------------------------------
   Auf 1920px bleiben links und rechts 225px, also 1470px Inhalt. Diese Spalte
   ist --container-wide und gilt hier UND im Fussbereich; die uebrigen
   Templates bleiben bei --container (1200px). Die 45px Seitenabstand liegen
   innerhalb der Spalte, daher ueberall `calc(var(--container-wide) + 90px)`.

   DAS RASTER IST 461 + 43
   -----------------------
   Drei Karten von 461px mit 43px Abstand ergeben 1469 -- die Spalte geht also
   genau auf. Die untere Reihe benutzt dasselbe Raster: 965 + 43 + 461 = 1469.
   Deshalb ist 43px hier kein beliebiger Abstand, sondern DER Abstand, auch
   senkrecht zwischen den beiden Reihen.

   ZWEI ENTWURFSVARIANTEN IM RAHMEN
   --------------------------------
   Der Rahmen enthaelt die Kartenreihe zweimal, deckungsgleich uebereinander:
   Knoten 3:147 mit mittig gesetztem Text und 3:148 mit linksbuendigem. Sicht-
   bar ist 3:148 -- es liegt oben und bringt die Boot- und die Buchgrafik mit.
   Nachgebaut ist deshalb 3:148. 3:147 ist eine aeltere Fassung.

   EINE ABWEICHUNG, BEWUSST
   ------------------------
   Der Entwurf setzt „Sonderausstellung" in Raleway ExtraLight (200). Die im
   Theme mitgelieferte variable Schrift deckt die Achse 300–700 ab, 200 liegt
   darunter. Statt eine fuenfte Schriftdatei fuer eine Zeile zu laden, steht
   die Zeile in 300 -- der leichtesten vorhandenen Staerke. Sichtbar ist der
   Unterschied nur im direkten Vergleich mit dem Entwurf. */

/* --- Vollbreite ------------------------------------------------------------

   base.css begrenzt .site-main auf --container und gibt ihm Innenabstand.
   Die Startseite braucht das Gegenteil: ihre Baender (schwarze Buehne,
   Fussbereich) ziehen Farbe ueber die ganze Breite, und die Spalte begrenzt
   jeder Abschnitt selbst. */
.site-main--front {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Gemeinsame Inhaltsspalte aller Abschnitte. */
.front-section__inner {
	max-width: calc(var(--container-wide) + 90px);
	margin: 0 auto;
	padding: 0 45px;
}

/* --- Buehne (Knoten 1:35, 3:82, 3:75) -------------------------------------

   Schwarzes Band von y100 bis y795, also 695px hoch. Darin zwei Spalten:
   Text ab x365, Bild von x960 bis x1591.

   ZWEI FARBFASSUNGEN, EINE GEOMETRIE
   Der Block achilles/front-hero traegt `front-hero--dark` (Standard) oder
   `front-hero--light`. Die Grundregeln unten SIND die dunkle Fassung -- ein
   Band ohne Modifikator sieht also aus wie bisher, und der Modifikator
   `--dark` ist bewusst ohne eigene Regel. `--light` ueberschreibt am Ende
   dieses Abschnitts nur vier Farben. Alles andere, auch Masse und Schaltflaeche,
   gilt fuer beide.

   DIE EINRUECKUNGEN SIND ASYMMETRISCH, UND ZWAR ABSICHTLICH
   Der Text steht 140px weiter innen als die Inhaltsspalte (365 statt 225),
   das Bild endet 104px vor ihrem rechten Rand (1591 statt 1695). Die Buehne
   sitzt damit enger als die Karten darunter. Beide Werte stehen als eigene
   Eigenschaft, damit sie in den Media Queries an einer Stelle wegfallen. */
.front-hero {
	background: #000;
}

.front-hero__inner {
	--hero-text-inset: 140px;
	--hero-media-inset: 104px;

	display: grid;
	/* 501 + 95 + 631 = 1227, und genau so viel bleibt bei 1920 uebrig: die
	   Anteile treffen die Entwurfsbreiten exakt und wachsen darunter mit.

	   WARUM 501 UND NICHT 463
	   Der Fliesstext ist im Entwurf 463px breit (x367–830), die Ueberschrift
	   aber 501px (x364–865) -- sie darf also breiter laufen als der Absatz
	   darunter. Bei 463px Spaltenbreite bricht „Libenský & Brychtová" auf zwei
	   Zeilen, was der Entwurf nicht tut. Die Spalte richtet sich deshalb nach
	   der Ueberschrift; die max-width an .front-hero__lead haelt den Absatz
	   auf seinen 463px.
	   Der Abstand ist entsprechend 95px, nicht 130: das ist der echte Abstand
	   von der Ueberschrift (Ende 865) zum Bild (Beginn 960). */
	grid-template-columns: minmax(0, 501fr) minmax(0, 631fr);
	column-gap: 95px;
	align-items: start;
	max-width: calc(var(--container-wide) + 90px);
	margin: 0 auto;
	/* Oben 38px, unten 74px: das Bild beginnt 38px unter der Bandkante und
	   endet 74px darueber (y138 bis y721 im Band y100–795). */
	padding:
		38px
		calc(45px + var(--hero-media-inset))
		74px
		calc(45px + var(--hero-text-inset));
}

/* Der Text beginnt 100px tiefer als das Bild (y238 gegen y138). */
.front-hero__text {
	padding-top: 100px;
}

.front-hero__eyebrow {
	margin: 0 0 12px;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.72px;
	line-height: 1.2;
}

/* 46,311px im Entwurf. Gerundet auf 46px -- ein Drittel Pixel ist keine
   Gestaltungsaussage, sondern das Ergebnis einer Skalierung in Figma. */
.front-hero__title {
	margin: 0 0 30px;
	color: #fff;
	font-size: 46px;
	font-weight: 500;
	letter-spacing: 1.85px;
	line-height: 1.17;
}

.front-hero__lead {
	/* Schmaler als die Spalte, siehe die Begruendung an grid-template-columns. */
	max-width: 463px;
	margin: 0 0 24px;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.64px;
	line-height: 22px;
}

/* 631 x 583, randlos gefuellt (Knoten 3:75). Die Datei ist ein 2x-Export,
   deshalb width/height als Seitenverhaeltnis und nicht als Ausgabegroesse. */
.front-hero__media {
	margin: 0;
}

.front-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 631 / 583;
	object-fit: cover;
}

/* Hellgraue Fassung -- Rahmen „Startseite Hero var2", Knoten 1:35 (Band
   #e5e5e5) und 3:82 (Text #1c1c1c). Die Schaltflaeche bleibt in beiden Rahmen
   dieselbe goldene (Knoten 3:84 und 121:42: #996a15, weisse Beschriftung), sie
   braucht also nichts. #1c1c1c auf #e5e5e5 kontrastiert 13,5:1.

   Der Entwurf zeigt in dieser Fassung ein anderes, quadratisches Foto
   (540 x 539 ab x1010, Knoten 121:168). Das ist ein Bildwechsel, kein
   Layoutwechsel: das Bild kommt aus der Mediathek, und die Bildspalte behaelt
   ihre 631 x 583 -- ein quadratisches Foto wird durch object-fit oben und
   unten um je 4 % beschnitten. */
.front-hero--light {
	background: #e5e5e5;
}

.front-hero--light .front-hero__eyebrow,
.front-hero--light .front-hero__title,
.front-hero--light .front-hero__lead {
	color: #1c1c1c;
}

/* Bildaufteilung „halbe Breite" (`imageLayout: half`, Klasse
   `front-hero--half`). Unabhaengig von der Farbfassung.

   Das Bild fuellt die rechte Haelfte des Bandes randlos: bis an die
   Fensterkante, oben und unten ohne Abstand. Der Text bleibt, wo er in der
   Standardfassung steht -- dieselbe linke Kante (Inhaltsspalte plus
   Einrueckung) und dieselbe Hoehe (38 + 100px). Dafuer spannt __inner hier
   die volle Breite ohne Innenabstand, damit die zwei Spalten wirklich je
   50 % sind; die linke Kante traegt der Text selbst.

   Das Bild bestimmt die Hoehe nicht mit, es liegt absolut in seiner Zelle und
   wird per object-fit beschnitten. Die Hoehe kommt aus dem Text und einer
   Mindesthoehe, die bei 1920px die 695px des Entwurfsbandes trifft.

   Nur ab 1001px: darunter stapelt die Buehne, und gestapelt sind beide
   Fassungen dieselbe -- ein randloses Bild unter dem Text waere dort nur ein
   sehr grosses Bild. */
@media only screen and (min-width: 1001px) {

	/* Im Slider wird jedes Band auf die Hoehe der hoechsten Folie gedehnt
	   (front-hero-slider/style.css). __inner muss diese Hoehe mitgehen, sonst
	   endet das Bild ueber der Bandkante und darunter steht ein Streifen
	   Bandfarbe. */
	.front-hero--half {
		display: flex;
	}

	.front-hero--half .front-hero__inner {
		flex: 1 1 auto;
		min-width: 0;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 0;
		align-items: stretch;
		max-width: none;
		min-height: clamp(480px, 36.2vw, 695px);
		padding: 0;
	}

	/* Die linke Kante des Textes: Prozent im Innenabstand beziehen sich auf
	   die Gitterzelle, also die halbe Bandbreite. 100% minus die halbe
	   Inhaltsspalte ist damit der Rand links neben ihr. */
	.front-hero--half .front-hero__text {
		padding:
			138px
			95px
			74px
			calc(max(0px, 100% - (var(--container-wide) + 90px) / 2) + 45px + var(--hero-text-inset));
	}

	.front-hero--half .front-hero__media {
		position: relative;
	}

	.front-hero--half .front-hero__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}
}

@media only screen and (min-width: 1001px) and (max-width: 1250px) {

	.front-hero--half .front-hero__text {
		padding-top: 78px;
		padding-right: 60px;
	}
}

/* --- Kartenreihe (Knoten 3:148) -------------------------------------------

   Drei Karten #ebebeb, 461 x 486, ab y1139. Darueber ragt je ein Objekt in
   die weisse Flaeche: die Grafiken beginnen bei y864, also 275px oberhalb der
   Kartenkante. Diese 275px sind .front-teaser__art -- ein Kasten, der nur
   Platz haelt; die Grafiken selbst liegen darin absolut und ragen unten in
   die Karte hinein. Alle drei Karten fangen deshalb auf derselben Hoehe an,
   obwohl die drei Objekte verschieden hoch sind. */
.front-teasers__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 43px;
	/* 69px = y864 minus die Bandkante y795. */
	padding-top: 69px;
}

/* WARUM SUBGRID
   Jede Karte belegt zwei Zeilen der Reihe: oben die Bildflaeche (__art oder
   __photo), darunter das graue Feld. Mit `subgrid` teilen sich alle Karten
   einer Reihe diese zwei Spuren -- die Bildzeile ist so hoch wie das hoechste
   Bild der Reihe, und alle grauen Felder und damit alle Ueberschriften
   beginnen auf derselben Linie. Steht neben den freigestellten Objekten ein
   Foto (Bildaufteilung `square`), ragt es nach oben hinaus und ueber den anderen Karten
   bleibt Luft (Rueckmeldung Daniel, 2026-10-08). Bricht die Reihe auf zwei
   oder eine Spalte um, gilt das je Zeile.

   row-gap 0 ueberschreibt den 43px-Abstand der Reihe innerhalb der Karte;
   zwischen den Karten-Zeilen bleibt er stehen. */
.front-teaser {
	--teaser-pt: 121px;      /* Innenabstand oben im grauen Feld */
	--teaser-photo-gap: 40px; /* Foto bis Ueberschrift, Bildaufteilung square */
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
	margin: 0;
}

/* WARUM DER PLATZHALTER EIN SEITENVERHAELTNIS HAT UND KEINE FESTE HOEHE
   Im Entwurf ist er 461 x 275 -- so weit ragen die Objekte ueber die Karte.
   Stand hier `height: 275px`, dann skalierten die Grafiken mit der Spalte,
   ihr Ueberhang aber nicht: auf dem Telefon lag die Bernsteinscheibe dadurch
   ueber der Ueberschrift. Mit dem Seitenverhaeltnis wachsen Kasten, Grafik
   und Ueberhang gemeinsam, weil die Ueberhaenge unten in Prozent DIESER Hoehe
   stehen.

   max-height deckelt ihn wieder auf die Entwurfshoehe: einspaltig wird die
   Karte breiter als 461px, und ohne den Deckel wuerde der Kasten weiter
   wachsen, waehrend die Grafik an ihrer max-width haengenbleibt -- der
   Ueberhang liefe der Grafik davon und landete erneut auf der Ueberschrift. */
.front-teaser__art {
	position: relative;
	/* Unten in der Bildzeile: ist sie wegen eines Fotos nebenan hoeher, steht
	   die Luft ueber dem Objekt, nicht zwischen Objekt und Karte. */
	align-self: end;
	aspect-ratio: 461 / 275;
	max-height: 275px;
	/* Nicht overflow:hidden -- die Grafiken sollen unten heraushaengen. */
}

/* Die Objektgrafik. Breite und linker Rand in Prozent der Karte, damit sie
   mit der Spalte mitwaechst; max-width deckelt sie auf die Entwurfsgroesse,
   sonst wuerde sie in der einspaltigen Ansicht ins Absurde skalieren.
   `bottom` ist negativ: so weit reicht die Grafik in die Karte hinein. */
.front-teaser__object {
	position: absolute;
	bottom: var(--art-drop);
	left: var(--art-left);
	width: var(--art-width);
	max-width: var(--art-max);
	height: auto;
	pointer-events: none;
}

/* Der weichgezeichnete Schatten unter dem Objekt. Ein Bild, das der Entwurf
   je Karte anders verzerrt und beschneidet -- daher Rahmen mit overflow und
   ein Bild, das ueber dessen Kanten hinausragt (Figma-Einzug
   -27,28% / -2,27% / -23,49% / 2,11%). `translate(-50%, 50%)` setzt die
   MITTE des Rahmens auf --shadow-x / --shadow-y; nur so laesst sich der
   gedrehte Schatten der Buchkarte an derselben Regel ausrichten. */
.front-teaser__shadow {
	position: absolute;
	bottom: var(--shadow-y);
	left: var(--shadow-x);
	/* Breite in Prozent der Karte mit Deckel auf die Entwurfsgroesse -- wie bei
	   der Objektgrafik. Feste Pixel waeren hier ein Fehler: der Schatten der
	   Bootkarte ist mit 505px breiter als die 461er Karte (er liegt ja unter
	   einem breiteren Objekt), und sobald die Karte schmaler wird, schob er
	   die Seite waagerecht auf -- bei 885px Fenster um 5px. Die Hoehe bleibt
	   in Pixeln: der Schatten ist eine Weichzeichnung, ein leicht anderes
	   Seitenverhaeltnis ist an ihm nicht zu sehen. */
	width: var(--shadow-w);
	max-width: var(--shadow-max);
	height: var(--shadow-h);
	overflow: hidden;
	opacity: var(--shadow-opacity, 0.4);
	mix-blend-mode: multiply;
	pointer-events: none;
	transform: translate(-50%, 50%) rotate(var(--shadow-rotate, 0deg));
}

.front-teaser__shadow img {
	position: absolute;
	top: -27.28%;
	left: 2.11%;
	/* 100 - 2,11 + 2,27 bzw. 100 + 27,28 + 23,49 -- die Gegenrechnung zum
	   Einzug oben. max-width setzt base.css auf 100%, das muss hier weg. */
	width: 100.16%;
	max-width: none;
	height: 150.77%;
}

/* Die drei Objekte, jeweils am Entwurf gemessen und auf die 461er Karte
   bezogen. Die Prozentwerte sind Bruchteile dieser Breite. */
.front-teaser--glassammlung {
	--art-left: 12.58%;      /* x283 – x225 */
	--art-width: 87.42%;     /* 403 / 461 */
	--art-max: 403px;
	--art-drop: -46.5%;      /* 128 / 275 -- Unterkante y1267, Karte ab y1139 */
	--shadow-x: 49.02%;
	--shadow-y: -13.1%;     /* 36 / 275 */
	--shadow-w: 79.4%;
	--shadow-max: 366px;
	--shadow-h: 34.2%;      /* 94 / 275 */
}

.front-teaser--stiftung {
	--art-left: 6.72%;       /* x759,97 – x729 */
	--art-width: 87.1%;      /* 401,52 / 461 */
	--art-max: 402px;
	--art-drop: -22.55%;     /* 62 / 275 -- Unterkante y1201,5 */
	--shadow-x: 46.31%;
	--shadow-y: -16.35%;    /* 45 / 275 */
	--shadow-w: 109.5%;
	--shadow-max: 505px;
	--shadow-h: 20.35%;     /* 56 / 275 */
	--shadow-opacity: 0.2;   /* im Entwurf schwaecher als die anderen zwei */
}

.front-teaser--buch {
	--art-left: 16.59%;      /* x1309,48 – x1233 */
	--art-width: 63.02%;     /* 290,52 / 461 */
	--art-max: 291px;
	--art-drop: -33.45%;     /* 92 / 275 -- Unterkante y1230,6 */
	--shadow-x: 40.45%;
	--shadow-y: 17.8%;       /* 49 / 275, positiv: liegt ueber der Kante */
	--shadow-w: 69.4%;
	--shadow-max: 320px;
	--shadow-h: 56.35%;     /* 155 / 275 */
	--shadow-rotate: 58.12deg;
}

/* Die Karte selbst. 121px Innenabstand oben, weil die Grafik dort hineinragt;
   44px unten, weil die Schaltflaeche so weit ueber der Kante endet.

   KEINE MINDESTHOEHE MEHR (Rueckmeldung 2026-10-14: „zu viel Leerraum")
   Bis dahin stand hier `min-height: 486px`, die Kartenhoehe des Entwurfs.
   Bei kuerzeren Texten sammelte sich die Differenz als Luft zwischen Text und
   Schaltflaeche. Der groessere Teil der Rueckmeldung war ein Firefox-Fehler,
   siehe .front-teaser__photo. Jetzt bestimmt der laengste Text der Reihe die
   Hoehe: die Karten einer
   Reihe sind trotzdem gleich hoch (Gitterzeile, siehe „WARUM SUBGRID"), und
   die Schaltflaechen stehen weiter auf einer Linie (.front-teaser__cta). */
.front-teaser__body {
	display: flex;
	flex-direction: column;
	padding: var(--teaser-pt) 45px 44px;
	background: #ebebeb;
}

/* WARUM 45px SEITLICH UND NICHT 58px
   Der Entwurf rueckt jede der drei Karten anders ein: die Textbloecke sind
   349, 377 und 368px breit und stehen jeweils mittig -- also 56, 42 und 46px
   vom Rand. Das ist kein Raster, sondern ein Rest der aelteren, mittig
   gesetzten Variante 3:147, aus der 3:148 entstanden ist.

   Einheitlich 58px waeren die schmalste dieser Lesarten und genau 2px zu
   schmal: die drei Ueberschriften brauchen 347, 361 und 357px, haetten aber
   nur 345px. Alle drei brechen dann auf zwei Zeilen, die Karte wird 536 statt
   486px hoch, und die ganze untere Haelfte der Seite rutscht 50px nach unten.
   Im Entwurf stehen sie einzeilig.

   45px trifft mit 371px Textbreite den Durchschnitt der drei Entwurfsbloecke
   und laesst die laengste Ueberschrift auf einer Zeile. Schreibt die
   Redaktion spaeter eine laengere Ueberschrift, wachsen alle drei Karten
   gemeinsam, statt dass der Text herauslaeuft. */

.front-teaser__title {
	margin: 0 0 28px;
	color: #1c1c1c;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.88px;
	line-height: 1.2;
}

.front-teaser__text {
	margin: 0 0 32px;
	color: #000;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.72px;
	line-height: 25px;
}

/* Bildaufteilung `square` (template-parts/front/teaser-card.php): ein Foto
   statt der freigestellten Grafik, randlos ueber die ganze Kartenbreite,
   im Querformat 3:2 beschnitten. Kein __art, kein Schatten.

   Der Wert heisst `square`, weil das Bild zuerst quadratisch war; seit
   2026-10-08 ist es 3:2 (Marten: „weniger hoch"). Der gespeicherte
   Attributwert blieb, damit bereits gesetzte Karten nicht auf die
   Objektgrafik zurueckfallen.

   Das graue Feld behaelt seinen vollen Innenabstand, damit die Ueberschrift
   auf derselben Linie steht wie in den Nachbarkarten (siehe „WARUM SUBGRID").
   Das Foto haengt deshalb mit negativem Rand in das Grau hinein, bis
   --teaser-photo-gap ueber der Ueberschrift -- dieselbe Idee wie die
   ueberhaengenden Objektgrafiken. Der negative Rand zaehlt auch fuer die
   Hoehe der Bildzeile, die Zeile wird also nur so hoch wie der sichtbare
   Teil oberhalb des Graus. position + z-index: sonst malt der Hintergrund
   des spaeteren Geschwisters __body ueber den Fuss des Fotos. */
.front-teaser__photo {
	position: relative;
	z-index: 1;
	display: block;
	align-self: end;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	margin-bottom: calc(var(--teaser-photo-gap) - var(--teaser-pt));
	object-fit: cover;
	/* FIREFOX: OHNE DAS WIRD DIE GANZE REIHE ZU HOCH
	   Firefox rechnet beim Bemessen der Subgrid-Zeilen die Naturgroesse der
	   Datei ein (1024 x 683), nicht die 3:2 der Kartenbreite. Die Karte
	   spannt zwei Zeilen, und der Ueberschuss landete in beiden: rund 280px
	   Weiss ueber der Reihe und 200px zwischen Text und Schaltflaeche
	   (Rueckmeldung 2026-10-14, „zu viel Leerraum"; Chrome war nicht
	   betroffen). `contain: size` nimmt die Naturgroesse aus der Rechnung;
	   die Hoehe kommt weiter aus Breite und aspect-ratio. */
	contain: size;
}

/* Schiebt die Schaltflaeche an die Unterkante, damit die drei in einer Linie
   stehen -- im Entwurf tun sie das, obwohl die Texte verschieden lang sind. */
.front-teaser__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* --- Untere Reihe: Archiv und Newsletter (Knoten 3:227, 3:186) ------------

   965 + 43 + 461, beide Karten 338 hoch, ab y1668 -- also 43px unter der
   Kartenreihe, derselbe Abstand wie waagerecht. */
.front-highlights__inner {
	display: grid;
	/* Die Anteile sind die Entwurfsbreiten: 965 zu 461. */
	grid-template-columns: minmax(0, 965fr) minmax(0, 461fr);
	gap: 43px;
	padding-top: 43px;
	/* 196px = Fussbereich y2202 minus Reihenende y2006. */
	padding-bottom: 196px;
}

.front-archive,
.front-newsletter {
	display: flex;
	flex-direction: column;
	min-height: 338px;
	margin: 0;
	/* 51px oben, 44px unten -- gemessen an Titel y1719 und Schaltflaeche
	   y1962 gegen die Kartenkanten y1668 / y2006. */
	padding: 51px 58px 44px;
}

.front-archive {
	/* Zwei Spalten: Text und Piktogramm. Rechts nur 50px, weil das Piktogramm
	   im Entwurf 50px vor der Kartenkante endet. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 175px;
	gap: 40px;
	align-items: start;
	padding-right: 50px;
	background: #ebebeb;
}

.front-archive__text {
	display: flex;
	flex-direction: column;
	/* Die Spalte ist hoeher als der Text; ohne das saesse die Schaltflaeche
	   direkt unter dem Absatz statt an der Unterkante. */
	min-height: 100%;
}

/* 175 x 175, 79px unter der Kartenkante. 51px davon macht der Innenabstand,
   die restlichen 28px dieser Rand. */
.front-archive__icon {
	margin-top: 28px;
	color: var(--cta-gold);
	line-height: 0;
}

.front-archive__icon .achilles-icon {
	display: block;
	width: 175px;
	height: 175px;
}

.front-newsletter {
	background: var(--brand-red);
}

.front-card__title {
	margin: 0 0 22px;
	color: #1c1c1c;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.88px;
	line-height: 1.2;
}

.front-card__text {
	margin: 0 0 32px;
	color: #000;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.72px;
	line-height: 25px;
}

/* Textbreiten aus dem Entwurf: 524px im Archiv, 298px im Newsletter. */
.front-archive .front-card__text {
	max-width: 524px;
}

.front-newsletter .front-card__title,
.front-newsletter .front-card__text {
	color: #fff;
	max-width: 298px;
}

.front-card__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* --- Enger ----------------------------------------------------------------

   Breakpoints des Projekts: 1000px, 780px, 566px. Dazu einer bei 1250px, den
   nur die Buehne braucht: ihre asymmetrischen Einrueckungen von zusammen
   244px fressen unterhalb dieser Breite die Textspalte auf.

   Er lag bis 2026-10-14 bei 1400px und sitzt jetzt auf dem Umschlag der
   Hauptnavigation zum Burger (header.css), damit die Seite an EINER Breite
   umspringt und nicht an zwei kurz hintereinander (Rueckmeldung 2026-10-14).
   An derselben Breite verschwinden die Pfeile des Sliders
   (front-hero-slider/style.css), die in genau diesen Einrueckungen stehen.
   Bei 1260px bleiben der Textspalte 361px (gemessen) -- „Libenský &
   Brychtová" bricht auf zwei Zeilen, wie schon zwischen 1250 und 1400px. */

@media only screen and (max-width: 1250px) {

	.front-hero__inner {
		--hero-text-inset: 0px;
		--hero-media-inset: 0px;

		column-gap: 60px;
		/* Dieselben Anteile wie oberhalb von 1250px.

		   Bis zum 2026-09-02 stand hier `minmax(0, 1fr) minmax(0, 631fr)`, mit
		   der Absicht, dem Fliesstext „die Spalte wieder mitbestimmen" zu
		   lassen. fr-Einheiten sind aber Anteile am freien Platz, keine
		   Gewichte gegen den Inhalt: 1fr neben 631fr ist ein 632stel, bei
		   1200px Breite knapp 2px. Die Textspalte brach zwischen 1001 und
		   1400px auf einen Buchstaben je Zeile und die Ueberschrift wurde
		   abgeschnitten -- auf jedem Laptop, und in der Mustervorschau des
		   Editors (1200px), wo es zuerst auffiel. Am Bildschirm gemessen bei
		   1200 und 1366px, nicht vermutet. */
		grid-template-columns: minmax(0, 501fr) minmax(0, 631fr);
	}

	.front-hero__text {
		padding-top: 40px;
	}
}

@media only screen and (max-width: 1000px) {

	/* Die Buehne stapelt: erst Text mit der Schaltflaeche, dann das Bild.
	   Andersherum stuende die Handlungsaufforderung unter der Bildkante und
	   damit auf dem Telefon weit unterhalb des ersten Bildschirms. */
	.front-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.front-hero__text {
		padding-top: 0;
	}

	.front-hero__title {
		font-size: 38px;
		letter-spacing: 1.5px;
	}

	/* Gestapelt hat das Bild die ganze Spaltenbreite -- bei 900px Fenster
	   waere es 795 x 735 und damit groesser als im Entwurf auf 1920. Deckel
	   auf die Entwurfsgroesse, mittig: darunter steht kein Text mehr, an dem
	   es sich links ausrichten muesste. */
	.front-hero__media {
		width: 100%;
		max-width: 631px;
		margin-inline: auto;
	}

	/* Zwei Spalten statt drei. Die dritte Karte steht dann allein in der
	   zweiten Zeile -- das ist gewollt: drei Spalten unterschreiten hier die
	   Breite, ab der die 121px Innenabstand und die Objektgrafik noch
	   zusammenpassen. */
	.front-teasers__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.front-highlights__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 100px;
	}

	/* Einspaltig hat das Piktogramm keinen Platz mehr neben dem Text, und
	   unter dem Text ist es reine Dekoration. */
	.front-archive {
		grid-template-columns: minmax(0, 1fr);
		padding-right: 58px;
	}

	.front-archive__icon {
		display: none;
	}
}

@media only screen and (max-width: 780px) {

	.front-teasers__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.front-hero__title {
		font-size: 32px;
		letter-spacing: 1.28px;
	}

	.front-teaser__body,
	.front-archive,
	.front-newsletter {
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media only screen and (max-width: 566px) {

	/* Wie im Fussbereich: 25px Rand statt 45px. */
	.front-section__inner,
	.front-hero__inner {
		padding-left: 25px;
		padding-right: 25px;
	}

	.front-hero__title {
		font-size: 28px;
		letter-spacing: 1.12px;
	}

	.front-hero__lead,
	.front-teaser__text,
	.front-card__text {
		font-size: 16px;
		line-height: 23px;
	}

	/* Platzhalter und Ueberhang skalieren jetzt selbst mit (siehe
	   .front-teaser__art), hier ist nichts mehr nachzustellen. Nur der obere
	   Innenabstand der Karte folgt dem verkleinerten Ueberhang. */
	.front-teaser {
		--teaser-pt: 90px;
		--teaser-photo-gap: 30px;
	}

	.front-teaser__body {
		padding: var(--teaser-pt) 25px 35px;
	}

	.front-archive,
	.front-newsletter {
		min-height: 0;
		padding: 40px 25px 35px;
	}

	.front-teasers__inner {
		padding-top: 40px;
	}
}