/*! HOKEKI Theme – automatisch erzeugt aus assets/css/src/. Nicht direkt bearbeiten. */

/* ---- 00-tokens.css ---- */
/* =========================================================================
   00 – Gestaltungsvariablen
   Eine einzige Quelle für Farben, Abstände, Typografie und Bewegung.

   Leitgedanke der Gestaltung: helles, warmes Papier als Grundfläche, Fotos in
   voller Breite und drei Farben – Rot, Blau, Grün. Die Website soll offen und
   freundlich wirken – ein Verein, der Kindern hilft, ist kein Museum.

   Die drei Farben sind kein Dekor, sondern eine Ordnung: Rot führt (Knöpfe,
   Bühnen, alles, was zum Handeln auffordert), Blau und Grün begleiten. Sie
   wechseln sich von Abschnitt zu Abschnitt ab – deshalb steht die jeweils
   gültige Farbe als --accent an der Hülle des Abschnitts und wird von dort
   nach innen weitergereicht, statt in jeder Regel neu benannt zu werden.

   Glas kommt an genau zwei Stellen vor: in der Kopfleiste und auf Kacheln.
   Die Kopfleiste ist helles Glas – über dem Foto liegt sie wie eine
   Milchglaskapsel darüber, statt es abzudunkeln.
   ====================================================================== */

:root {
	/* --- Marke ------------------------------------------------------- */
	--clay:        #b4413c;   /* Tonrot – Hauptfarbe */
	--clay-deep:   #8d2f2b;
	--clay-dark:   #641d1a;   /* Grundton des roten Bühnenschleiers */
	--clay-soft:   #d9756f;
	--clay-wash:   #fbeeeb;   /* Sehr helle Tönung für ruhige Flächen */
	--clay-mist:   #fdf6f4;   /* Noch heller – große Flächen */

	/*
	 * Das Rot der Logodatei. Es weicht eine Spur vom Tonrot ab und ist die
	 * einzige Farbe der Website, die nicht frei gewählt ist: Die Fassung des
	 * Logos muss genau den Ton der Bilddatei treffen, sonst sieht man die
	 * Kante zwischen Fassung und Datei. Sie steht deshalb hier bei den
	 * übrigen Farben und nicht mitten im Stylesheet.
	 */
	--logo-red:    #bf4545;

	--olive:       #5e7445;   /* Grün – zweite Farbe des Vereins */
	--olive-deep:  #3f5230;
	--olive-soft:  #9db183;
	--olive-wash:  #f0f3ea;

	/*
	 * Blau – die dritte Farbe. Ein gebrochenes Denimblau, kein Signalblau:
	 * Auf warmem Papier neben Tonrot und Olivgrün wäre ein reines Blau der
	 * einzige kalte Ton und würde aus dem Bild springen.
	 */
	--ocean:       #2f5f7d;
	--ocean-deep:  #1e4359;
	--ocean-soft:  #8fb6cb;
	--ocean-wash:  #eaf1f5;

	/*
	 * Die Farbe des jeweiligen Abschnitts. Sie wird an der Hülle gesetzt
	 * (siehe hokeki_section_class()) und von Zickzacklinie, Kleinzeile und
	 * kleinen Höhepunkten gelesen. Vorgabe ist Rot.
	 */
	--accent:      var(--clay);
	--accent-deep: var(--clay-deep);
	--accent-wash: var(--clay-wash);

	/* Weiter unten, hinter den Farbwerten, stehen die drei Klassen .accent-1
	   bis .accent-3, die diesen Dreiklang umschalten. */

	/* --- Flächen ------------------------------------------------------
	 *
	 * Vier Stufen desselben warmen Tons. Die Abschnitte wechseln zwischen
	 * --paper und --paper-2 ab; der Fuß liegt eine weitere Stufe tiefer, damit
	 * das Seitenende auch ohne dunklen Riegel als eigener Bereich zu erkennen
	 * ist. Die Abstände zwischen den Stufen sind bewusst gleich groß – so
	 * entsteht eine Treppe statt dreier zufälliger Töne.
	 */
	--paper:       #fdfbf7;   /* Warmes Off-White, Grundfläche der Website */
	--paper-2:     #f4eee1;   /* Abgesetzter Abschnitt */
	--paper-3:     #e7dfcd;   /* Linien, Platzhalter */
	--paper-4:     #ece4d5;   /* Fußbereich */
	--night:       #1b2620;   /* Dunkle Zone: nur noch das Zahlenband */
	--night-2:     #24322a;

	/* Kante zwischen zwei Flächen – überall dieselbe Linie. */
	--edge:        rgba(28, 39, 35, .1);
	--edge-strong: rgba(28, 39, 35, .16);

	/* --- Schrift ------------------------------------------------------ */
	--ink:          #1c2723;
	--ink-2:        #4c5a52;
	--ink-3:        #78857c;
	--ink-invert:   #f8f5ee;
	--ink-invert-2: rgba(248, 245, 238, .86);
	--ink-invert-3: rgba(248, 245, 238, .66);

	--font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Fließende Typografie: skaliert zwischen 360 px und 1440 px Breite. */

	/*
	 * Die kleinste Stufe: Chips, Marken und alle versalen Auszeichnungszeilen,
	 * die neben etwas anderem stehen. Sie ist nachgetragen worden, weil an
	 * sechs Stellen der Website sechs leicht verschiedene Werte standen –
	 * .74, .76, .78, .8 rem –, die alle dasselbe meinten. Nebeneinander sieht
	 * man den Unterschied nicht, aber die Seite wirkt dadurch unruhig.
	 */
	--step--2: clamp(.72rem, .69rem + .13vw, .78rem);

	--step--1: clamp(.85rem, .81rem + .18vw, .95rem);
	--step-0:  clamp(1rem, .96rem + .22vw, 1.1rem);
	--step-1:  clamp(1.15rem, 1.06rem + .4vw, 1.35rem);
	--step-2:  clamp(1.35rem, 1.2rem + .68vw, 1.7rem);
	--step-3:  clamp(1.6rem, 1.32rem + 1.2vw, 2.25rem);
	--step-4:  clamp(1.9rem, 1.46rem + 1.94vw, 2.95rem);
	--step-5:  clamp(2.2rem, 1.55rem + 2.9vw, 3.8rem);
	--step-6:  clamp(2.6rem, 1.6rem + 4.4vw, 5rem);

	/* --- Raster ------------------------------------------------------- */
	--wrap:        1180px;
	--wrap-narrow: 720px;
	--wrap-wide:   1440px;
	--gutter:      clamp(1.25rem, .7rem + 2.2vw, 2.5rem);

	/*
	 * Ein einziger Abstandsrhythmus. Alle Abstände der Website sind
	 * Vielfache daraus – deshalb wirken die Seiten untereinander ruhig.
	 */
	--space-1: .375rem;
	--space-2: .75rem;
	--space-3: 1.25rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4.5rem;

	/*
	 * Höhe eines Abschnitts. Bewusst großzügig: Der Weißraum zwischen den
	 * Abschnitten trägt mehr zur luftigen Anmutung bei als jede Farbe.
	 */
	--section-y:       clamp(4rem, 2.2rem + 6.6vw, 7.5rem);
	--section-y-tight: clamp(2.75rem, 1.8rem + 3.8vw, 4.75rem);

	/* Abstand zwischen Abschnittskopf und Inhalt – überall gleich. */
	--head-gap: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);

	/* Höhe der Wellenkante unter den Bühnen. */
	--wave-h:    clamp(38px, 5vw, 78px);
	--wave-fill: var(--paper);

	/* --- Zickzack ------------------------------------------------------
	 *
	 * Das Erkennungszeichen der Website: eine feine Zickzacklinie, die unter
	 * jeder Überschrift steht – dieselbe Linie wie auf der bisherigen Seite,
	 * dort als SVG-Datei eingebunden.
	 *
	 * Hier ist sie eine Maske und keine Bilddatei. Der Unterschied ist nicht
	 * akademisch: Eine Maske nimmt ihre Farbe aus --accent und kann deshalb
	 * je Abschnitt rot, blau oder grün sein, ohne dass dafür drei Dateien
	 * hochgeladen und gepflegt werden müssen.
	 *
	 * Die Kachel ist genau eine Periode breit. Der Pfad läuft links und
	 * rechts über den Rand hinaus, damit an der Nahtstelle zweier Kacheln
	 * eine saubere Spitze entsteht und keine Kerbe.
	 */
	--zig-unit:   11px;   /* Breite einer Periode */
	--zig-h:      8px;    /* Höhe der Linie */
	--zig-mask:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M-1 5.5 0 6.5 5.5 1 11 6.5 12 5.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
	--zig-w:      132px;  /* Breite der Linie unter einer Überschrift */

	/* Dieselbe Linie stehend – als Rückgrat des Verlaufs auf der Geschichtsseite. */
	--zig-mask-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='11' viewBox='0 0 8 11'%3E%3Cpath d='M5.5 -1 6.5 0 1 5.5 6.5 11 5.5 12' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");

	--radius-sm:   12px;
	--radius:      18px;
	--radius-lg:   26px;
	--radius-xl:   34px;
	--radius-pill: 999px;

	/* --- Glas: genau zwei Rezepte ------------------------------------- */

	/*
	 * „Leiste“ – die Kopfzeile. Sie ist helles Milchglas und bleibt es auf
	 * der gesamten Website. Ein Wechsel von Hell auf Dunkel beim Scrollen
	 * würde bei jedem Seitenaufruf zweimal die Anmutung ändern; eine Leiste,
	 * die immer gleich aussieht, ist ruhiger – und hell wirkt sie freundlich
	 * statt schwer.
	 *
	 * Damit sie sich über dem hellen Papier nicht auflöst – Weiß auf Weiß –,
	 * trägt sie einen leicht wärmeren Ton als die Seite darunter, eine
	 * dunkle Haarlinie als Rand und einen weichen Schatten. Erst diese drei
	 * zusammen machen aus der Fläche einen Körper, der über der Seite liegt.
	 */
	--glass-bar-bg:     rgba(247, 242, 232, .82);
	--glass-bar-edge:   rgba(28, 39, 35, .12);
	--glass-bar-blur:   saturate(150%) blur(20px);
	--glass-bar-stuck:  rgba(248, 244, 235, .95);
	--glass-bar-panel:  rgba(253, 251, 246, .98);   /* Untermenü, Mobilmenü */

	/* Schriftfarben auf der hellen Leiste. */
	--bar-ink:   var(--ink);
	--bar-ink-2: var(--ink-2);

	/* Fläche des aktiven Menüpunkts – eine weiche, runde Mulde. */
	--bar-active-bg: rgba(180, 65, 60, .1);

	/* „Kachel“ – Karten im hellen Bereich, papierartig statt glänzend. */
	--glass-tile-bg:     rgba(255, 255, 255, .72);
	--glass-tile-edge:   rgba(28, 39, 35, .07);
	--glass-tile-blur:   saturate(115%) blur(14px);
	--glass-tile-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -28px rgba(28, 39, 35, .42);

	/* --- Schatten ------------------------------------------------------ */
	--shadow-sm: 0 2px 10px -5px rgba(28, 39, 35, .22);
	--shadow-md: 0 18px 38px -26px rgba(28, 39, 35, .38);
	--shadow-lg: 0 38px 76px -46px rgba(28, 39, 35, .46);

	/* --- Bewegung ------------------------------------------------------ */
	--ease-out:    cubic-bezier(.22, .84, .3, 1);
	--ease-in-out: cubic-bezier(.62, .05, .28, .96);
	--dur-fast:    .2s;
	--dur:         .4s;
	--dur-slow:    .8s;

	/* --- Ebenen -------------------------------------------------------- */
	--z-header:  100;
	--z-menu:    110;
	--z-overlay: 200;

	--header-height: 84px;

	/*
	 * Die Maße der Kopfleiste. Sie stehen hier und nicht an .header-inner,
	 * weil außerhalb der Leiste damit gerechnet wird: Die Kategorieleiste der
	 * Blog-Übersicht soll bündig an ihrer Unterkante ansetzen, und die ergibt
	 * sich aus dem Außenabstand plus der Höhe der Kapsel.
	 */
	--bar-pad:       7px;    /* Innenabstand der Kapsel */
	--bar-slot:      50px;   /* Höhe von Logo und Spendenknopf darin */
	--header-pad:    12px;   /* Abstand der Kapsel zum Bildschirmrand */
	/* Die beiden Pixel sind die Haarlinie oben und unten an der Kapsel. */
	--header-bottom: calc(var(--header-pad) + var(--bar-slot) + var(--bar-pad) * 2 + 2px);
}

@media (max-width: 900px) {
	:root {
		--header-height: 68px;
		--bar-pad:       6px;
		--bar-slot:      44px;
		--header-pad:    7px;
	}
}

/* --- Der Dreiklang als Klasse -------------------------------------------

   Rot, Blau, Grün. Welcher Baustein die Farbe umschaltet, ist gleichgültig –
   Abschnitt, Karte, Station des Zeitstrahls, Titelfeld eines Berichts: Alle
   tragen dieselbe Klasse aus hokeki_accent_class(). Bis Fassung 3.5 hatte
   jeder von ihnen seine eigene Familie (.section--accent-2, .post-card--
   accent-2, .timeline__step--2), und jede neue Stelle kostete drei weitere
   Regeln, die dasselbe sagten.

   Rot steht ausdrücklich dabei, obwohl es der Vorgabewert oben ist: Eine rote
   Karte in einem blauen Abschnitt erbte sonst dessen Blau.
   ---------------------------------------------------------------------- */

.accent-1 {
	--accent:      var(--clay);
	--accent-deep: var(--clay-deep);
	--accent-wash: var(--clay-wash);
}

.accent-2 {
	--accent:      var(--ocean);
	--accent-deep: var(--ocean-deep);
	--accent-wash: var(--ocean-wash);
}

.accent-3 {
	--accent:      var(--olive);
	--accent-deep: var(--olive-deep);
	--accent-wash: var(--olive-wash);
}

/* ---- 01-base.css ---- */
/* =========================================================================
   01 – Grundlagen und Typografie
   ====================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Die Seite lässt sich nicht seitlich schieben – und zwar am Wurzelelement,
 * nicht am <body>.
 *
 * Der Unterschied ist auf dem Telefon der entscheidende: „overflow-x: hidden“
 * am <body> wird zwar auf das Sichtfeld übertragen, mobile Browser lassen
 * darüber hinausragende Elemente aber trotzdem noch wegwischen. „clip“ am
 * <html> unterbindet das zuverlässig – und es erzeugt, anders als „hidden“,
 * keinen eigenen Scrollbereich. Genau daran hängt, dass die Filterleiste des
 * Blogs und die Kontaktspalte weiterhin stehen bleiben können.
 */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 1.5rem);
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.68;
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;

	/*
	 * Eine lange E-Mail-Adresse oder eine Kontonummer ohne Leerzeichen ist auf
	 * einem schmalen Bildschirm breiter als die Spalte, in der sie steht. Ohne
	 * diese Zeile zieht ein einziges solches Wort die ganze Seite in die Breite.
	 */
	overflow-wrap: break-word;
}

/* Nichts darf die Seite horizontal aufziehen – auch keine Effektebene. */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5 {
	margin: 0 0 .55em;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

/*
 * Plus Jakarta Sans ist eine variable Schrift. Die Überschriften laufen
 * kräftig und leicht negativ spationiert – das gibt den großen Graden Halt,
 * ohne dass sie streng wirken. Kleine Grade bleiben etwas offener.
 */
h1 { font-size: var(--step-5); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: -.028em; }
h3 { font-size: var(--step-2); font-weight: 650; letter-spacing: -.02em; }
h4 { font-size: var(--step-1); font-weight: 650; letter-spacing: -.015em; }

h5 {
	font-size: var(--step-0);
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: -.005em;
}

p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--clay-deep);
	text-decoration-color: color-mix(in srgb, var(--clay) 34%, transparent);
	text-underline-offset: .18em;
	text-decoration-thickness: from-font;
	transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
	color: var(--clay);
	text-decoration-color: currentColor;
}

strong, b {
	font-weight: 650;
}

hr {
	height: 1px;
	margin: var(--space-5) 0;
	border: 0;
	background: var(--paper-3);
}

::selection {
	background: color-mix(in srgb, var(--clay) 22%, transparent);
	color: var(--ink);
}

/* --- Fokus: immer sichtbar, nie abgeschaltet ------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 3px;
	border-radius: 4px;
}

.on-dark :where(a, button, summary):focus-visible,
.hero :where(a, button):focus-visible {
	outline-color: #fff;
}

/* --- Nur für Screenreader -------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: .8rem 1.4rem;
	background: var(--night);
	color: var(--ink-invert);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	text-decoration: none;
	transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
	top: 0;
	color: var(--ink-invert);
}

/* --- Reduzierte Bewegung respektieren --------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	[data-parallax] {
		transform: none !important;
	}
}

/* ---- 02-layout.css ---- */
/* =========================================================================
   02 – Raster, Abschnitte, Zonenwechsel

   Der Rhythmus der Website entsteht hier: jeder Abschnitt hat oben und unten
   denselben Abstand, jeder Abschnittskopf denselben Abstand zum Inhalt.
   Abweichungen gibt es nur über die beiden Modifikatoren – nirgends über
   Einzelwerte im Template.
   ====================================================================== */

.wrap {
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

.wrap--narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); }
.wrap--wide   { width: min(100% - var(--gutter) * 2, var(--wrap-wide)); }

.section {
	position: relative;
	padding-block: var(--section-y);
}

.section--tight { padding-block: var(--section-y-tight); }

/*
 * Rot, Blau, Grün im Wechsel: Die Hülle eines Abschnitts trägt zusätzlich eine
 * der Klassen .accent-1 bis .accent-3 aus hokeki_section_class(). Definiert
 * sind sie in 00-tokens.css bei den Farben – hier steht nur der Hinweis,
 * damit niemand sie ein zweites Mal anlegt.
 */

/* --- Zickzacklinie -----------------------------------------------------
 *
 * Das Erkennungszeichen der Website, übernommen von der bisherigen Seite:
 * eine feine Zickzacklinie unter jeder Überschrift. Sie ist eine Maske über
 * einer Farbfläche – deshalb trägt sie ohne weiteres Zutun die Farbe des
 * Abschnitts, auf dunklem Grund die helle Variante.
 */

.zigzag {
	display: block;
	width: var(--zig-w);
	max-width: 100%;
	height: var(--zig-h);
	margin-top: 1.1rem;
	background-color: var(--accent);
	-webkit-mask-image: var(--zig-mask);
	mask-image: var(--zig-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: var(--zig-unit) var(--zig-h);
	mask-size: var(--zig-unit) var(--zig-h);
}

.section-head--center .zigzag {
	margin-inline: auto;
}

.on-dark .zigzag {
	background-color: rgba(255, 255, 255, .8);
}

/* Auf einer Bühne liegt sie über dem Foto und darf kräftiger sein. */
.hero .zigzag {
	background-color: #fff;
}

/*
 * Zwei aufeinanderfolgende Abschnitte derselben Fläche brauchen eine sichtbare
 * Kante, sonst laufen sie zu einer einzigen langen Textstrecke zusammen. Der
 * Regelfall ist der Flächenwechsel (siehe hokeki_section_surfaces()); wo er
 * ausnahmsweise nicht greift, tritt an seine Stelle eine feine Linie in
 * Satzspiegelbreite. Der obere Abstand wird zugleich verkürzt, damit die Linie
 * zwischen beiden Abschnitten mittig sitzt und nicht am oberen klebt.
 *
 * Entscheidend ist, dass beide Abschnitte geprüft werden. Wird nur der
 * folgende geprüft, bekäme auch der erste helle Abschnitt unter einer dunklen
 * oder abgesetzten Fläche eine Linie – dort trennt aber schon die Farbkante.
 */
.section:not(.on-dark):not(.section--tinted) + .section:not(.on-dark):not(.section--tinted) {
	padding-top: var(--section-y-tight);
}

.section:not(.on-dark):not(.section--tinted) + .section:not(.on-dark):not(.section--tinted)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: min(100% - var(--gutter) * 2, var(--wrap));
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--edge) 8%, var(--edge) 92%, transparent);
}

/* --- Abgesetzte Fläche ------------------------------------------------
 *
 * Die abgesetzte Fläche ist das eigentliche Mittel, um Abschnitte
 * auseinanderzuhalten. Die beiden Haarlinien an ihren Kanten schärfen den
 * Übergang: Ein reiner Farbwechsel dieser Größenordnung wirkt sonst eher wie
 * ein Druckfehler als wie eine Absicht.
 */

.section--tinted {
	background: var(--paper-2);
	border-block: 1px solid var(--edge);
}

/*
 * Unter einer Bühne entfällt die obere Linie: Dort endet die Fläche in einer
 * Welle, und eine gerade Linie quer darunter würde sie durchschneiden.
 */
.hero + .section--tinted,
.pagehead + .section--tinted {
	border-top: 0;
}

/* --- Dunkle Zone ------------------------------------------------------ */

.on-dark {
	position: relative;
	color: var(--ink-invert);
	background: var(--night);
	isolation: isolate;
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5 {
	color: var(--ink-invert);
}

.on-dark p {
	color: var(--ink-invert-2);
}

.on-dark a:not(.btn):not(.chip) {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, .45);
}

.on-dark a:not(.btn):not(.chip):hover {
	color: #fff;
}

/* --- Abschnittsköpfe -------------------------------------------------- */

.section-head {
	max-width: 34rem;
	margin-bottom: var(--head-gap);
}

/* Der Einleitungstext darf etwas weiter laufen als die Überschrift. */
.section-head .prose {
	max-width: 58ch;
	margin-top: var(--space-3);
}

.section-head--center {
	max-width: 56ch;
	margin-inline: auto;
	text-align: center;
}

/*
 * Die kleine Zeile über der Überschrift trägt einen Strich statt einer
 * Hintergrundfläche: schmaler, ruhiger und auf hellem wie dunklem Grund lesbar.
 */
.eyebrow {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 .9rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent);
}

/*
 * Auch der Strich vor der Kleinzeile ist ein Stück Zickzack – dieselbe
 * Periode, nur 33 Pixel lang. Dadurch trägt jeder Abschnittskopf das Zeichen
 * zweimal: klein vor der Kleinzeile, groß unter der Überschrift.
 */
.eyebrow::before {
	content: '';
	width: 33px;
	height: var(--zig-h);
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: var(--zig-mask);
	mask-image: var(--zig-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: var(--zig-unit) var(--zig-h);
	mask-size: var(--zig-unit) var(--zig-h);
}

.section-head--center .eyebrow {
	justify-content: center;
}

.on-dark .eyebrow {
	color: rgba(255, 255, 255, .82);
}

.section-title {
	margin-bottom: 0;
}

.section-head > .section-title + *:not(.zigzag) {
	margin-top: var(--space-3);
}

/* Nach der Zickzacklinie folgt der Einleitungstext mit dem üblichen Abstand. */
.section-head > .zigzag + * {
	margin-top: var(--space-3);
}

/* --- Redaktionelles Raster -------------------------------------------- */

.grid {
	display: grid;
	gap: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/*
 * Personen stehen auch auf dem Handy immer zu zweit nebeneinander. Eine
 * einspaltige Liste aus zwanzig Porträts ist auf einem Telefon eine sehr
 * lange Strecke; zu zweit bleibt das Team auf zwei, drei Bildschirmhöhen
 * überschaubar, und die runden Bilder sind dabei noch groß genug.
 */
.grid--people {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.4rem, 1rem + 2vw, 2.25rem) clamp(.9rem, .5rem + 1.6vw, 2.25rem);
}

@media (min-width: 640px) {
	.grid--people {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	}
}

/* Zwei ungleiche Spalten, im Wechsel gedreht. */
.split {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 4rem);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.split                         { grid-template-columns: 1.05fr .95fr; }
	.split--reverse                { grid-template-columns: .95fr 1.05fr; }
	.split--reverse > :first-child { order: 2; }
	.split--balanced               { grid-template-columns: 1fr 1fr; }
	.split--top                    { align-items: start; }
}

/* --- Fließtext -------------------------------------------------------- */

.prose {
	max-width: 68ch;
	font-size: var(--step-0);
	color: var(--ink-2);
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2,
.prose h3,
.prose h4 {
	color: var(--ink);
}

.prose h2 {
	margin-top: 1.6em;
	font-size: var(--step-3);
}

.prose h3 {
	margin-top: 1.5em;
	font-size: var(--step-2);
}

.prose ul,
.prose ol {
	padding-left: 1.35em;
}

.prose li + li {
	margin-top: .45em;
}

.prose blockquote {
	margin: 1.8em 0;
	padding: .2em 0 .2em 1.4em;
	border-left: 3px solid var(--clay);
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 500;
	font-style: italic;
	color: var(--ink-2);
}

.prose--lead {
	font-size: var(--step-1);
	line-height: 1.55;
	color: var(--ink-2);
}

.on-dark .prose {
	color: var(--ink-invert-2);
}

/*
 * Der Abstand zwischen zwei Blöcken innerhalb eines Abschnitts kommt aus
 * dieser einen Regel. Sie steht hier und nicht als Inline-Angabe im Template,
 * damit sie sich an einer Stelle ändern lässt.
 */
:is(.prose, .grid, .stack, .check-list, .numbered, .logo-wall, .gallery, .accordion, .timeline, .stats-grid, .post-grid)
	+ :is(.prose, .grid, .stack, .actions, .check-list, .numbered, .logo-wall, .gallery, .accordion, .progress, .more-block) {
	margin-top: var(--space-4);
}

.more-block {
	margin-top: var(--space-6);
}

/* ---- 03-glass.css ---- */
/* =========================================================================
   03 – Glasoberflächen

   Glas kommt an genau zwei Stellen vor:
     .glass-bar   – die Kopfleiste und das Untermenü darin
     .tile        – Kacheln: Karten, Kennzahlen, Logofelder, Dokumente

   Alles andere steht direkt auf Papier. Ein Effekt, der überall liegt, wirkt
   nicht mehr wie Material, sondern wie ein Filter.
   ====================================================================== */

/* --- Leiste: dunkles Glas, über Fotos wie über Papier ----------------- */

/*
 * Der Schatten ist nicht Zierrat, sondern die halbe Miete: Über einem Foto
 * genügt der helle Ton, damit die Leiste zu sehen ist – über dem hellen
 * Papier der Unterseiten wäre sie ohne Kante und Schatten unsichtbar.
 */
.glass-bar {
	position: relative;
	background: var(--glass-bar-bg);
	border: 1px solid var(--glass-bar-edge);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .7) inset,
		0 2px 6px -3px rgba(28, 39, 35, .16),
		0 18px 40px -28px rgba(28, 39, 35, .55);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.glass-bar {
		-webkit-backdrop-filter: var(--glass-bar-blur);
		backdrop-filter: var(--glass-bar-blur);
	}
}

/* Ohne Unschärfe braucht die Leiste eine eigene Fläche, sonst verschwindet sie. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass-bar {
		background: rgba(22, 33, 28, .72);
	}
}

/* --- Kachel: im hellen Bereich, papierartig statt plastikglänzend ----- */

.tile {
	position: relative;
	border-radius: var(--radius-lg);
	background: var(--glass-tile-bg);
	border: 1px solid var(--glass-tile-edge);
	box-shadow: var(--glass-tile-shadow);
	color: var(--ink);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.tile {
		-webkit-backdrop-filter: var(--glass-tile-blur);
		backdrop-filter: var(--glass-tile-blur);
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tile {
		background: #fff;
	}
}

/* --- Kachel in dunkler Zone ------------------------------------------- */

.on-dark .tile {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .18);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 22px 44px -32px rgba(0, 0, 0, .8);
	color: var(--ink-invert);
}

/* --- Anhebung beim Zeigen --------------------------------------------- */

.tile--lift {
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.tile--lift:hover,
.tile--lift:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 26px 48px -28px rgba(22, 33, 28, .5);
}

@media (prefers-reduced-motion: reduce) {
	.tile--lift:hover,
	.tile--lift:focus-within {
		transform: none;
	}
}

/* ---- 04-nav.css ---- */
/* =========================================================================
   04 – Kopfbereich und Navigation

   Der Kopf ist eine schwebende Kapsel aus hellem Milchglas. Sie liegt über
   dem Bühnenfoto, ohne es abzudunkeln, und wechselt beim Scrollen nur ihre
   Dichte, nicht ihre Farbe.

   Drei Elemente sitzen darin, alle mit derselben vollen Rundung und
   demselben Randabstand: die rote Logofassung links, die Navigation in der
   Mitte, der Spendenknopf rechts. Weil Kapsel, Logo und Knopf dieselbe
   Formensprache teilen, wirkt die Leiste wie aus einem Stück.
   ====================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-header);
	padding-block: var(--header-pad);
	pointer-events: none;
}

/*
 * --bar-pad ist der Abstand vom Rand der Kapsel zu Logo und Knopf,
 * --bar-slot deren Höhe. Beide zusammen ergeben die Höhe der Leiste – so
 * bleibt die Rundung außen und innen im selben Verhältnis.
 */
.header-inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: clamp(.5rem, .1rem + 1.6vw, 1.5rem);
	width: min(100% - var(--gutter) * 2, var(--wrap-wide));
	min-height: calc(var(--bar-slot) + var(--bar-pad) * 2);
	margin-inline: auto;
	padding: var(--bar-pad);
	border-radius: var(--radius-pill);
	color: var(--bar-ink);
	transition: background var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out),
	            box-shadow var(--dur) var(--ease-out);
}

/*
 * Gescrollt: dieselbe Leiste, nur dichter. Sie rückt zugleich eine Spur
 * enger an die Kante – eine Bewegung von wenigen Pixeln, die man nicht
 * bewusst wahrnimmt, die dem Kopf aber Halt gibt.
 */
.site-header.is-stuck .header-inner {
	background: var(--glass-bar-stuck);
	border-color: var(--edge-strong);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 2px 8px -3px rgba(28, 39, 35, .2),
		0 22px 46px -26px rgba(28, 39, 35, .6);
}

.site-header.is-stuck {
	padding-block: 8px;
}

/* Die Maße für schmale Bildschirme stehen in 00-tokens.css bei --bar-slot. */

/* --- Marke -------------------------------------------------------------

   Die Logodatei ist eine rote Fläche mit weißem Schriftzug. Sie sitzt in
   einer Fassung derselben roten Farbe: Dadurch lässt sich die Fläche frei
   verbreitern und vollständig runden, ohne die Datei anzufassen – der
   Schriftzug bekommt Luft und bleibt in jeder Größe lesbar.
   -------------------------------------------------------------------- */

.brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
}

.brand__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--bar-slot);
	padding-inline: clamp(.9rem, .4rem + 1.1vw, 1.5rem);
	border-radius: var(--radius-pill);
	background: var(--logo-red);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .3) inset,
		0 10px 24px -16px rgba(120, 30, 26, .9);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.brand__mark {
	display: block;
	width: auto;
	/* Der Schriftzug füllt gut die Hälfte der Fassung – der Rest ist Rot. */
	height: calc(var(--bar-slot) * .46);
	object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
	.brand:hover .brand__badge {
		transform: translateY(-1px);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, .4) inset,
			0 16px 30px -16px rgba(120, 30, 26, .95);
	}
}

.brand:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 4px;
	border-radius: var(--radius-pill);
}

/* Ersatz, falls die Logodatei fehlt: derselbe rote Körper, nur als Text. */
.brand__text {
	display: inline-flex;
	align-items: center;
	height: var(--bar-slot);
	padding-inline: 1.2rem;
	border-radius: var(--radius-pill);
	background: var(--logo-red);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --- Hauptnavigation --------------------------------------------------- */

.primary-nav {
	margin-left: auto;
}

/*
 * Nur die oberste Ebene liegt nebeneinander. Würde die Regel auch für
 * verschachtelte Listen gelten, müsste jedes Untermenü sie wieder aufheben –
 * und genau dabei entstehen die Fehler.
 */
.nav-menu {
	display: flex;
	align-items: center;
	gap: clamp(.05rem, -.3rem + .8vw, .5rem);
}

.nav-menu,
.nav-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Die weiche Mulde des aktiven und des aufgeklappten Punkts liegt auf dem
 * Listenelement, nicht auf dem Link. Nur so liegt das kleine Pfeilchen mit
 * in derselben Fläche – läge sie auf dem Link, stünde der Pfeil daneben.
 */
.nav-menu > li {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: var(--radius-pill);
	transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.menu-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: .55rem .85rem;
	border-radius: var(--radius-pill);
	font-size: var(--step--1);
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-out);
}

/* Steht ein Pfeilchen daneben, rückt der Text ein Stück zusammen. */
.nav-menu > li.has-dropdown > .menu-link {
	padding-right: .25rem;
}

@media (hover: hover) and (pointer: fine) {
	.nav-menu > li:hover {
		background: rgba(28, 39, 35, .06);
	}
}

/*
 * Aktive Seite: dieselbe runde Mulde, nur kräftiger und mit weichem
 * Schatten. Ein farbiger Punkt daneben wäre ein zweites Zeichen für
 * dieselbe Aussage.
 *
 * Die rote Mulde bedeutet ausschließlich „hier stehen Sie gerade“. Ein
 * aufgeklapptes Untermenü bekommt sie ausdrücklich nicht: Sonst sähen im
 * Mobilmenü zwei Einträge gleich aus – der aktive und der eben angetippte –,
 * und die Farbe verlöre ihre einzige Aussage. Dass ein Untermenü offen ist,
 * zeigt der gedrehte Pfeil und das Untermenü selbst.
 */
.nav-menu > li.current-menu-item,
.nav-menu > li.current-menu-ancestor,
.nav-menu > li.current-menu-parent,
.nav-menu > li.current_page_item,
.nav-menu > li.current_page_ancestor,
.nav-menu > li.current_page_parent,
.nav-menu > li.is-current {
	background: var(--bar-active-bg);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .7) inset,
		0 8px 18px -12px rgba(141, 47, 43, .55);
}

.nav-menu > li.current-menu-item > .menu-link,
.nav-menu > li.current-menu-ancestor > .menu-link,
.nav-menu > li.current-menu-parent > .menu-link,
.nav-menu > li.current_page_item > .menu-link,
.nav-menu > li.current_page_ancestor > .menu-link,
.nav-menu > li.current_page_parent > .menu-link,
.nav-menu > li.is-current > .menu-link {
	color: var(--clay-deep);
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-right: .3rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	opacity: .6;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.nav-menu > li:hover > .submenu-toggle {
	opacity: 1;
}

.caret {
	width: 10px;
	height: 7px;
	transition: transform var(--dur-fast) var(--ease-out);
}

.submenu-toggle[aria-expanded='true'] .caret,
.nav-menu > li.is-open > .submenu-toggle .caret {
	transform: rotate(180deg);
}

/* --- Untermenü --------------------------------------------------------- */

.sub-menu {
	position: absolute;
	top: calc(100% + .6rem);
	left: 50%;
	z-index: var(--z-menu);
	display: block;
	min-width: 288px;
	padding: .5rem;
	border-radius: var(--radius-lg);
	background: var(--glass-bar-panel);
	border: 1px solid var(--edge);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 2px 6px -3px rgba(28, 39, 35, .18),
		0 34px 64px -30px rgba(28, 39, 35, .6);
	color: var(--bar-ink);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px) scale(.98);
	transform-origin: top center;
	transition: opacity var(--dur-fast) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            visibility 0s linear var(--dur-fast);
}

/*
 * Eine kleine Spitze zeigt zum Menüpunkt, aus dem das Untermenü kommt. Ohne
 * sie schwebt die Karte ohne erkennbare Herkunft unter der Leiste – mit ihr
 * ist auf den ersten Blick klar, wozu sie gehört.
 */
.sub-menu::after {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
	background: var(--glass-bar-panel);
	border-top: 1px solid var(--edge);
	border-left: 1px solid var(--edge);
}

/*
 * Zwischen Menüpunkt und Untermenü liegt ein sichtbarer Abstand. Ohne diese
 * unsichtbare Brücke verlöre der Zeiger auf dem Weg nach unten den Kontakt
 * zum Listenelement, und das Untermenü klappte wieder zu, bevor man es
 * erreicht hat.
 */
.sub-menu::before {
	content: '';
	position: absolute;
	inset: -.8rem 0 auto;
	height: .85rem;
}

@supports (backdrop-filter: blur(1px)) {
	.sub-menu {
		-webkit-backdrop-filter: saturate(150%) blur(20px);
		backdrop-filter: saturate(150%) blur(20px);
	}
}

.has-dropdown:focus-within > .sub-menu,
.has-dropdown.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
	transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
	.has-dropdown:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0) scale(1);
		transition-delay: 0s;
	}
}

.sub-menu li {
	display: block;
	width: 100%;
}

/*
 * Jeder Eintrag trägt links einen schmalen Streifen, der beim Überfahren
 * aufwächst. Er ersetzt den Hintergrundwechsel als alleiniges Zeichen: Bei
 * sieben Einträgen untereinander sieht man so auf einen Blick, wo man steht,
 * ohne dass die ganze Karte unruhig wird.
 */
.sub-menu .menu-link {
	position: relative;
	display: block;
	width: 100%;
	padding: .62rem .85rem .62rem 1.15rem;
	border-radius: var(--radius-sm);
	color: var(--bar-ink-2);
	font-weight: 550;
	white-space: normal;
	transition: background var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out),
	            padding-left var(--dur-fast) var(--ease-out);
}

.sub-menu .menu-link::before {
	content: '';
	position: absolute;
	top: 50%;
	left: .5rem;
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: var(--clay);
	transform: translateY(-50%);
	transition: height var(--dur-fast) var(--ease-out);
}

.sub-menu .menu-link:hover {
	background: rgba(28, 39, 35, .05);
	color: var(--ink);
	padding-left: 1.3rem;
}

.sub-menu .menu-link:hover::before {
	height: 1.05em;
}

.sub-menu .menu-link[aria-current='page'],
.sub-menu .current-menu-item > .menu-link,
.sub-menu .current_page_item > .menu-link {
	background: var(--bar-active-bg);
	color: var(--clay-deep);
}

.sub-menu .menu-link[aria-current='page']::before,
.sub-menu .current-menu-item > .menu-link::before,
.sub-menu .current_page_item > .menu-link::before {
	height: 1.05em;
}

/* --- Kopf-Aktionen ----------------------------------------------------- */

.header-actions {
	display: flex;
	align-items: center;
	gap: .55rem;
	flex-shrink: 0;
	margin-left: .1rem;
}

/*
 * Der Spendenknopf ist genau so hoch wie die Logofassung und hat dieselbe
 * volle Rundung. Dadurch sitzen beide mit demselben Abstand in der Kapsel,
 * und die Leiste liest sich als eine Form statt als drei.
 */
.header-actions .btn {
	height: var(--bar-slot);
	padding-inline: clamp(1rem, .5rem + 1.2vw, 1.6rem);
	border-radius: var(--radius-pill);
}

/* --- Umschalter für kleine Bildschirme --------------------------------- */

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--bar-slot);
	height: var(--bar-slot);
	padding: 0;
	background: rgba(28, 39, 35, .06);
	border: 1px solid var(--edge);
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.nav-toggle:hover,
body.nav-open .nav-toggle {
	background: var(--bar-active-bg);
	border-color: rgba(141, 47, 43, .22);
	color: var(--clay-deep);
}

.nav-toggle__bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--dur) var(--ease-out);
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- Navigation auf kleinen Bildschirmen --------------------------------

   Auf dem Handy ist die Navigation kein verkleinertes Desktopmenü, sondern
   eine eigene Liste: große Trefferflächen, jeder Punkt mit eigenem
   Aufklapper, das Ganze scrollbar und nie höher als der Bildschirm.

   Alle Regeln hier sind ausdrücklich auf .primary-nav bezogen. Die Klassen
   .nav-menu und .menu-link nutzt auch die Kategorienleiste des Blogs, damit
   beide Navigationen gleich aussehen – die soll aber in keiner Breite zu
   einer aufklappbaren Liste werden.
   -------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.nav-toggle {
		display: inline-flex;
	}

	/*
	 * Die Navigation liegt hier fest positioniert und schiebt deshalb nichts
	 * mehr zur Seite. Ohne diese Zeile klebte der Umschalter am Logo.
	 */
	.header-actions {
		margin-left: auto;
	}

	body.nav-open .header-inner {
		background: var(--glass-bar-panel);
		border-color: var(--edge);
	}

	.primary-nav {
		position: fixed;
		inset: calc(var(--header-height) + 6px) var(--gutter) auto;
		z-index: var(--z-menu);
		max-height: calc(100svh - var(--header-height) - var(--gutter) * 2);
		margin: 0;
		padding: .5rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		border-radius: var(--radius-lg);
		/* Deckend: Über einem Foto ist eine durchscheinende Liste nicht lesbar. */
		background: var(--glass-bar-panel);
		border: 1px solid var(--edge);
		box-shadow: 0 34px 70px -32px rgba(28, 39, 35, .6);
		color: var(--bar-ink);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity var(--dur) var(--ease-out),
		            transform var(--dur) var(--ease-out),
		            visibility 0s linear var(--dur);
	}

	.primary-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.primary-nav .nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: .15rem;
	}

	.primary-nav .nav-menu > li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		border-radius: var(--radius);
	}

	.primary-nav .nav-menu > li > .menu-link,
	.primary-nav .nav-menu > li.has-dropdown > .menu-link {
		padding: .85rem .9rem;
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 650;
		letter-spacing: -.015em;
		color: inherit;
	}

	.primary-nav .submenu-toggle {
		width: 48px;
		height: 48px;
		margin-right: 0;
		color: var(--ink-3);
		opacity: 1;
	}

	.primary-nav .sub-menu {
		position: static;
		display: none;
		grid-column: 1 / -1;
		min-width: 0;
		padding: 0 .4rem .6rem;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/*
	 * Im Mobilmenü klappt das Untermenü in der Liste auf. Weder die
	 * unsichtbare Brücke für den Mauszeiger noch die Spitze zur Kopfleiste
	 * ergeben dort einen Sinn.
	 */
	.primary-nav .sub-menu::before,
	.primary-nav .sub-menu::after {
		display: none;
	}

	.primary-nav .sub-menu .menu-link {
		padding-left: 1.15rem;
	}

	/*
	 * Die aufklappende Fassung des Untermenüs muss die Regeln der
	 * Schwebefassung ausdrücklich zurücknehmen – sonst bliebe die
	 * Verschiebung um die halbe Breite aus der Desktop-Ansicht stehen.
	 */
	.primary-nav .has-dropdown.is-open > .sub-menu,
	.primary-nav .has-dropdown:hover > .sub-menu,
	.primary-nav .has-dropdown:focus-within > .sub-menu {
		transform: none;
	}

	.primary-nav .has-dropdown.is-open > .sub-menu {
		display: block;
	}

	.primary-nav .sub-menu li + li {
		margin-top: .1rem;
	}

	.primary-nav .sub-menu .menu-link {
		padding: .7rem .8rem;
		font-size: var(--step-0);
	}

	body.nav-open {
		overflow: hidden;
	}
}

/*
 * Auf sehr schmalen Bildschirmen weicht der Spendenknopf aus dem Kopf: Er
 * steht auf jeder Seite ohnehin mehrfach im Inhalt, und zu dritt wird die
 * Kapsel dort zu eng.
 */
@media (max-width: 620px) {
	.header-actions .btn {
		display: none;
	}
}

/* ---- 05-hero.css ---- */
/* =========================================================================
   05 – Bühnen

   Drei Ebenen: Foto, roter Schleier, dunkler Verlauf. Der rote Schleier liegt
   im Multiplikationsmodus über dem Foto und färbt es ein, statt es nur
   abzudunkeln – dadurch wirken alle Aufmacher der Website wie aus einer Hand,
   egal wie verschieden die Fotos sind. Der Text steht direkt darauf; ein
   Glaskasten wäre hier nur eine zweite Fläche vor derselben Aussage.
   ====================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: var(--clay-dark);
	color: #fff;
}

.hero--lead {
	min-height: min(88svh, 880px);
	padding-block: calc(var(--header-height) + var(--space-6)) calc(var(--space-6) + var(--wave-h));
}

/*
 * Die Bühne der Startseite füllt den Bildschirm vollständig – auf jedem
 * Gerät, in jeder Ausrichtung. Beim ersten Blick ist damit nur das Foto zu
 * sehen; alles Weitere beginnt hinter der Wellenkante.
 *
 * svh statt vh, weil vh auf Mobilgeräten die eingefahrene Adressleiste
 * mitrechnet und die Bühne dort sonst unter den Bildschirmrand rutscht.
 */
.hero--full {
	min-height: 100vh;
	min-height: 100svh;
}

/*
 * Auf niedrigen Bildschirmen – Notebooks im Querformat, geteilte Fenster –
 * wird der Kopf enger gesetzt, damit Titel, Zeile und Knöpfe zusammen mit
 * der Wellenkante auf den Bildschirm passen.
 */
@media (max-height: 720px) and (min-width: 700px) {
	.hero--full {
		padding-block: calc(var(--header-height) + var(--space-4)) calc(var(--space-4) + var(--wave-h));
	}

	.hero--full .hero__title {
		font-size: var(--step-5);
	}
}

.hero--page {
	min-height: min(56svh, 560px);
	padding-block: calc(var(--header-height) + var(--space-5)) calc(var(--space-5) + var(--wave-h) * .6);
}

/* --- Ebene 1: Foto ----------------------------------------------------- */

.hero__media {
	position: absolute;
	inset: -6% 0;
	z-index: -3;
	will-change: transform;
}

/*
 * Drei Stufen, von stark nach schwach: --hero-focus setzt die Registry für
 * genau diese Seite, --focus bringt das Bild selbst aus hokeki_image_focus()
 * mit, und erst wenn beides fehlt, gilt die Vorgabe. So steht der
 * Bildmittelpunkt einmal je Datei und nicht einmal je Verwendung – und wo
 * eine Seite es anders braucht, darf sie widersprechen.
 */
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-focus, var(--focus, center 40%));
}

/*
 * Bühnen, auf denen etwas zu erkennen sein soll und nicht nur Stimmung zu
 * erzeugen ist, bekommen einen deutlich zurückgenommenen Schleier. Der
 * Verlauf am Fuß bleibt – ohne ihn stünde der Titel im Bildrauschen.
 */
.hero--tint-soft .hero__tint {
	background: linear-gradient(
		176deg,
		rgba(126, 44, 40, .34) 0%,
		rgba(158, 66, 60, .14) 46%,
		rgba(96, 28, 25, .48) 100%
	);
}

.hero--tint-soft .hero__scrim {
	background: linear-gradient(to top,
		rgba(24, 10, 8, .74) 0%,
		rgba(24, 10, 8, .3) 38%,
		rgba(24, 10, 8, .04) 68%,
		rgba(24, 10, 8, .1) 100%);
}

/* --- Bühne eines Tätigkeitsberichts -------------------------------------

   Ein Jahresrückblick hat kein Aufmacherfoto. An seiner Stelle steht genau
   derselbe Verlauf wie auf seiner Karte (siehe .report-cover in 08-blog.css)
   – in der Farbe seines Jahres –, dazu die Jahreszahl als sehr großes, nur
   angedeutetes Zeichen im Hintergrund. Der rote Schleier entfällt: Er läge
   über einer Fläche, die ihre Farbe schon mitbringt, und machte aus Blau ein
   viertes, sonst nirgends vorkommendes Violett.
   ---------------------------------------------------------------------- */

.hero--report .hero__media {
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .16) 0%, transparent 58%),
		linear-gradient(152deg, var(--accent) 0%, var(--accent-deep) 100%);
}

.hero--report .hero__tint {
	display: none;
}

.hero__report {
	font-family: var(--font-display);
	font-size: clamp(7rem, 3rem + 22vw, 22rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.05em;
	white-space: nowrap;
	color: rgba(255, 255, 255, .09);
	user-select: none;
}

/* „2017 – 2018“ liefe in der Größe einer einzelnen Jahreszahl aus dem Bild. */
.hero__report--range {
	font-size: clamp(3rem, 1rem + 9.5vw, 9.5rem);
}

/* --- Ebene 2: roter Schleier ------------------------------------------- */

.hero__tint {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(
		176deg,
		rgba(126, 44, 40, .64) 0%,
		rgba(158, 66, 60, .3) 44%,
		rgba(96, 28, 25, .74) 100%
	);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* --- Ebene 3: Verlauf, damit die Schrift immer trägt -------------------- */

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top,
			rgba(30, 12, 10, .66) 0%,
			rgba(30, 12, 10, .18) 44%,
			rgba(30, 12, 10, .04) 72%,
			rgba(30, 12, 10, .12) 100%);
	pointer-events: none;
}

/* --- Inhalt ------------------------------------------------------------ */

.hero__inner {
	position: relative;
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

.hero__body {
	max-width: 42rem;
}

.hero--lead .hero__body {
	max-width: 46rem;
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 1.1rem;
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

.hero__eyebrow::before {
	content: '';
	width: 32px;
	height: 2px;
	flex-shrink: 0;
	background: #fff;
	border-radius: 2px;
}

.hero__title {
	margin: 0;
	font-size: var(--step-6);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.028em;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 34px rgba(40, 10, 8, .45);
}

.hero--page .hero__title {
	font-size: var(--step-5);
	font-weight: 700;
}

.hero__lead {
	max-width: 46ch;
	margin: var(--space-3) 0 0;
	font-size: var(--step-1);
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}

.hero__body .actions {
	margin-top: var(--space-5);
}

/* --- Wellenkante --------------------------------------------------------

   Die Bühne endet nicht mit einem geraden Schnitt, sondern läuft in einer
   ruhigen Welle aus. Der Pfad steht im Dokument (template-parts/hero/wave.php)
   und nimmt über --wave-fill die Farbe des Abschnitts an, der unter ihm
   beginnt – deshalb passt die Kante auf jeder Seite, ohne dass irgendwo eine
   Farbe doppelt gepflegt werden müsste.
   ---------------------------------------------------------------------- */

.hero-wave {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 3;
	line-height: 0;
	pointer-events: none;
}

.hero-wave svg {
	display: block;
	width: 100%;
	height: var(--wave-h);
}

.hero-wave path {
	fill: var(--wave-fill);
}

/* Die drei Flächen, auf denen ein Abschnitt beginnen kann. */
.is-paper  { --wave-fill: var(--paper); }
.is-tinted { --wave-fill: var(--paper-2); }
.is-night  { --wave-fill: var(--night); }

/* --- Kopfbereich ohne Foto (Rechtstexte, Dokumente) -------------------- */

.pagehead {
	position: relative;
	padding-block: calc(var(--header-height) + var(--space-5)) calc(var(--space-5) + var(--wave-h) * .6);
	background:
		radial-gradient(120% 140% at 8% 0%, var(--clay-deep), var(--clay-dark) 62%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.pagehead__inner {
	position: relative;
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

.pagehead__title {
	max-width: 20ch;
	margin: 0;
	font-size: var(--step-5);
	font-weight: 700;
	color: #fff;
}

.pagehead__lead {
	max-width: 52ch;
	margin: var(--space-3) 0 0;
	font-size: var(--step-1);
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

/* ---- 06-components.css ---- */
/* =========================================================================
   06 – Bausteine

   Knöpfe gibt es in genau zwei Ausprägungen: gefüllt für die eine wichtigste
   Handlung eines Abschnitts, ruhig für alles Weitere. Größen kommen als
   Modifikator dazu, nicht als dritte Form.
   ====================================================================== */

/* --- Knöpfe ------------------------------------------------------------ */

/*
 * Knöpfe brauchen Luft – innen wie außen. Innen, damit die Schrift nicht an
 * der Rundung klebt; außen, damit zwei Knöpfe nebeneinander als zwei
 * Angebote lesbar bleiben und nicht als ein zerteilter Balken. Die
 * Zeilenlücke ist größer als die Spaltenlücke: Umbrechen die Knöpfe auf
 * schmalen Bildschirmen, stehen sie sonst aufeinander.
 */
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.1rem;
	align-items: center;
	margin-top: var(--space-4);
}

/* Steht die Knopfreihe am Anfang eines Blocks, trägt sie keinen Abstand. */
.actions:first-child {
	margin-top: 0;
}

.actions--center {
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: 1rem 1.9rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--clay);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 24px -16px rgba(180, 65, 60, .95);
	transition: background var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out);
}

.btn:hover {
	background: var(--clay-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -16px rgba(180, 65, 60, .95);
}

.btn:active {
	transform: translateY(0);
}

/* --- Ruhiger Knopf ------------------------------------------------------ */

.btn--quiet {
	background: transparent;
	color: var(--clay-deep);
	border-color: color-mix(in srgb, var(--clay) 32%, transparent);
	box-shadow: none;
}

.btn--quiet:hover {
	background: var(--clay-wash);
	color: var(--clay-deep);
	border-color: color-mix(in srgb, var(--clay) 46%, transparent);
	box-shadow: none;
}

/* Auf Fotos und in dunklen Zonen trägt der ruhige Knopf Weiß. */
.hero .btn--quiet,
.on-dark .btn--quiet,
.cta .btn--quiet,
.header-inner .btn--quiet {
	color: #fff;
	border-color: rgba(255, 255, 255, .52);
}

.hero .btn--quiet:hover,
.on-dark .btn--quiet:hover,
.cta .btn--quiet:hover,
.header-inner .btn--quiet:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .8);
	color: #fff;
}

/* --- Größe -------------------------------------------------------------- */

.btn--sm {
	padding: .65rem 1.35rem;
}

/* --- Textlink mit Pfeil --------------------------------------------------- */

.link-more {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--clay-deep);
	text-decoration: none;
}

.link-more svg {
	width: 15px;
	height: 15px;
	transition: transform var(--dur) var(--ease-out);
}

.link-more:hover svg,
a:hover .link-more svg,
.card:hover .link-more svg {
	transform: translateX(4px);
}

.on-dark .link-more {
	color: #fff;
}

/* --- Chips ---------------------------------------------------------------- */

.chip {
	display: inline-flex;
	align-items: center;
	padding: .3rem .8rem;
	border-radius: var(--radius-pill);
	background: var(--olive-wash);
	color: var(--olive-deep);
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.chip:hover {
	background: var(--olive);
	color: #fff;
}

.on-dark .chip,
.hero .chip {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.on-dark .chip:hover,
.hero .chip:hover {
	background: #fff;
	color: var(--ink);
}

/* --- Karten ---------------------------------------------------------------- */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--paper-3);
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, center);
	transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img {
	transform: scale(1.05);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	flex: 1;
	padding: clamp(1.15rem, .8rem + 1vw, 1.75rem);
}

.card__title {
	margin: 0;
	font-size: var(--step-2);
	font-weight: 600;
	line-height: 1.15;
}

.card__text {
	margin: 0;
	color: var(--ink-2);
	font-size: var(--step--1);
	line-height: 1.62;
}

.on-dark .card__text {
	color: var(--ink-invert-2);
}

.card__foot {
	margin-top: auto;
	padding-top: .4rem;
}

/* --- Akkordeon --------------------------------------------------------------

   Aufgebaut auf <details>/<summary>: Es funktioniert ohne JavaScript, ist
   tastaturbedienbar und wird von Screenreadern richtig angesagt.
   ------------------------------------------------------------------------- */

.accordion {
	display: grid;
	gap: .85rem;
}

.accordion__item {
	overflow: hidden;
	border-radius: var(--radius-lg);
	transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

/*
 * Der offene Eintrag tritt einen Schritt nach vorn. Weil immer nur einer
 * offen ist, führt das den Blick, ohne dass eine zweite Farbe nötig wäre.
 */
.accordion__item[open] {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .8) inset,
		0 26px 54px -30px rgba(22, 33, 28, .55);
}

.accordion__head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: clamp(1.1rem, .8rem + .8vw, 1.6rem) clamp(1.15rem, .8rem + 1vw, 1.75rem);
	cursor: pointer;
	list-style: none;
	transition: background var(--dur-fast) var(--ease-out);
}

/* Das Standarddreieck von Safari und Chrome entfernen. */
.accordion__head::-webkit-details-marker {
	display: none;
}

.accordion__head:hover {
	background: rgba(180, 65, 60, .05);
}

.accordion__head:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: -2px;
}

.accordion__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	background: var(--clay-wash);
	font-family: var(--font-display);
	font-size: var(--step--1);
	font-weight: 600;
	line-height: 1;
	color: var(--clay-deep);
	font-variant-numeric: tabular-nums;
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.accordion__item[open] .accordion__index {
	background: var(--clay);
	color: #fff;
}

.accordion__title {
	flex: 1;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}

.accordion__icon {
	position: relative;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--clay-wash);
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
}

.accordion__icon::before,
.accordion__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 2px;
	border-radius: 2px;
	background: var(--clay-deep);
	transform: translate(-50%, -50%);
	transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.accordion__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.accordion__item[open] .accordion__icon {
	background: var(--clay);
}

.accordion__item[open] .accordion__icon::before,
.accordion__item[open] .accordion__icon::after {
	background: #fff;
}

.accordion__item[open] .accordion__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/*
 * overflow:hidden ist die Voraussetzung dafür, dass die Höhenbewegung aus
 * 05-accordion.js den Inhalt sauber abschneidet statt ihn herausquellen zu
 * lassen.
 */
.accordion__body {
	overflow: hidden;
	padding: 0 clamp(1.15rem, .8rem + 1vw, 1.75rem) clamp(1.3rem, 1rem + 1vw, 2rem);
}

.accordion__grid {
	display: grid;
	gap: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
	align-items: center;
}

@media (min-width: 820px) {
	.accordion__grid--media {
		grid-template-columns: 1.15fr .85fr;
	}
}

/* Der Text bleibt kurz: ein Absatz plus Verweis, mehr steht auf der Seite. */
.accordion__text .prose {
	max-width: 58ch;
}

.accordion__text .actions {
	margin-top: var(--space-3);
}

.accordion__media {
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--paper-3);
	box-shadow: 0 18px 40px -28px rgba(22, 33, 28, .6);
}

.accordion__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.accordion__item[open] .accordion__media img {
	transform: scale(1.02);
}

/* --- Personen ------------------------------------------------------------- */

.person {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .85rem;
}

.person__photo {
	position: relative;
	width: clamp(118px, 10vw, 156px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--paper-3);
	box-shadow: 0 16px 32px -22px rgba(22, 33, 28, .6);
	transition: transform var(--dur) var(--ease-out);
}

/* Der Ring liegt auf einem Pseudoelement, damit er beim Zoom nicht mitwächst. */
.person__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85);
	pointer-events: none;
}

.person:hover .person__photo {
	transform: translateY(-4px);
}

.person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Vorgabe etwas oberhalb der Mitte: Auf einem hochformatigen Porträt
	 * sitzt der Kopf nie in der Bildmitte, und der quadratische Ausschnitt
	 * schnitte ihn sonst oben an.
	 */
	object-position: var(--focus, center 35%);
}

.person__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.2;
}

.person__role {
	margin: .2rem 0 0;
	font-size: var(--step--1);
	color: var(--ink-3);
}

.on-dark .person__role {
	color: var(--ink-invert-3);
}

/* --- Kennzahlen ------------------------------------------------------------ */

.stat {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
}

.stat__value {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4rem);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.035em;
	color: #fff;
	font-variant-numeric: tabular-nums lining-nums;
}

.stat__label {
	max-width: 26ch;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-invert-2);
}

/* --- Bild mit Unterschrift ---------------------------------------------------- */

.figure {
	margin: 0;
}

.figure__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--paper-3);
	box-shadow: var(--shadow-md);
}

.figure figcaption,
.figure__caption {
	margin-top: .75rem;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-3);
}

.on-dark .figure__caption {
	color: var(--ink-invert-3);
}

/* --- Dokumentenliste ----------------------------------------------------------- */

.doc {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.1rem 1.35rem;
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
}

.doc:hover {
	color: inherit;
}

.doc__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--clay-wash);
	color: var(--clay-deep);
}

.doc__icon svg {
	width: 24px;
	height: 24px;
}

/*
 * Das Kürzel liegt im unteren Teil des Blattsymbols wie ein Aufkleber. Sein
 * Schriftgrad steht bewusst außerhalb der Typo-Skala: Er gehört nicht zum
 * Text, sondern zu einem 48 Pixel großen Symbol, und „PDF“ muss dort hinein
 * passen. Es ist die einzige Ausnahme auf der Website.
 */
.doc__kind {
	position: absolute;
	right: 5px;
	bottom: 6px;
	padding: 1px 4px;
	border-radius: 4px;
	background: var(--clay);
	color: #fff;
	font-size: .52rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.35;
}

.doc__action {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	margin-left: auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--clay-wash);
	color: var(--clay-deep);
	transition: background var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out),
	            transform var(--dur) var(--ease-out);
}

.doc__action svg {
	width: 18px;
	height: 18px;
}

.doc:hover .doc__action {
	background: var(--clay);
	color: #fff;
	transform: translateY(2px);
}

.doc__title {
	display: block;
	margin: 0;
	font-size: var(--step-0);
	font-family: var(--font-body);
	font-weight: 600;
}

.doc__note {
	display: block;
	margin: .1rem 0 0;
	font-size: var(--step--1);
	color: var(--ink-3);
}

/* --- Partnerlogos als laufendes Band ----------------------------------------------

   Das Band läuft über die volle Bildschirmbreite und hält an, sobald der
   Zeiger darauf liegt. An beiden Rändern blendet es weich aus, damit die
   Logos nicht am Bildschirmrand abgeschnitten wirken.
   -------------------------------------------------------------------------------- */

.marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-block: .5rem;
	/* Weiche Kanten links und rechts. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
	display: flex;
	width: max-content;
	gap: clamp(.85rem, .5rem + 1.2vw, 1.5rem);
}

.marquee__set {
	display: flex;
	gap: clamp(.85rem, .5rem + 1.2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Die Bewegung startet erst, wenn das Band im Blick ist (is-running kommt
 * aus 06-marquee.js). Ohne JavaScript läuft es sofort – das ist der
 * freundlichere Ausfall.
 */
.no-js .marquee__track,
.marquee.is-running .marquee__track {
	animation: marquee-run var(--marquee-duration, 40s) linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

/*
 * Verschoben wird um genau die Hälfte des Bandes. Weil beide Hälften
 * identisch sind, ist der Rücksprung nicht zu sehen.
 */
@keyframes marquee-run {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none !important;
	}
}

/* --- Einzelne Logokachel ---------------------------------------------------------- */

.logo-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	gap: .9rem;
	width: clamp(200px, 19vw, 250px);
	padding: 1.35rem 1.1rem 1.15rem;
	text-align: center;
	background: #fff;
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

/*
 * Alle Logos liegen in einem gleich hohen Feld und sind darin mittig
 * ausgerichtet – dadurch stehen sie über das ganze Band hinweg auf einer
 * Linie, obwohl die Dateien ganz unterschiedliche Formate haben.
 */
.logo-tile__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 76px;
	overflow: hidden;
}

.logo-tile__frame img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	/*
	 * Die Logodateien sind Quadrate mit weißem Grund. Multiplizieren lässt
	 * diesen Grund auf der weißen Kachel verschwinden, ohne die Dateien
	 * anzufassen; --logo-scale gleicht den unterschiedlich breiten weißen
	 * Rand aus, der in den Dateien steckt.
	 */
	mix-blend-mode: multiply;
	transform: scale(var(--logo-scale, 1));
	transition: transform var(--dur) var(--ease-out);
}

.logo-tile__name {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 3.4em;
	font-size: var(--step--1);
	line-height: 1.4;
	color: var(--ink-2);
	text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
	.logo-tile:hover {
		transform: translateY(-3px);
		box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 44px -26px rgba(22, 33, 28, .5);
	}

	.logo-tile:hover .logo-tile__frame img {
		transform: scale(calc(var(--logo-scale, 1) * 1.05));
	}
}

/* --- Verlauf über die Jahre ---------------------------------------------------------

   Große Jahreszahlen links, die Stationen rechts, dazwischen die Zickzacklinie
   der Website als senkrechtes Rückgrat. Die Farbe wandert von Jahr zu Jahr
   weiter – rot, blau, grün –, sodass die Gliederung zu sehen ist, bevor man
   ein Wort gelesen hat.

   Bis Fassung 3.3 blieb dieser Abschnitt beim Scrollen stehen, während die
   Stationen an ihm vorbeizogen. Der Aufbau ist jetzt bewusst wieder eine
   gewöhnliche Liste: Sie lässt sich überfliegen, sie sieht auf jedem Gerät
   gleich aus, und sie braucht kein JavaScript.
   ---------------------------------------------------------------------------------- */

.timeline {
	/*
	 * Der Hof um jede Marke trägt die Farbe der Fläche, damit die Marke die
	 * Linie sauber unterbricht. Welche Fläche das ist, steht nur hier.
	 */
	--dot-halo: var(--paper);
	--dot:      18px;
	--mark-col: 2.4rem;

	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.section--tinted .timeline {
	--dot-halo: var(--paper-2);
}

/*
 * Der Abstand zur nächsten Station steckt im Element selbst und nicht in einer
 * Lücke des Rasters – nur so kann die Linie durch ihn hindurchlaufen.
 */
.timeline__step {
	display: grid;
	grid-template-columns: var(--mark-col) minmax(0, 1fr);
	grid-template-areas:
		'mark year'
		'mark body';
	column-gap: clamp(.6rem, .3rem + 1vw, 1.1rem);
	padding-bottom: clamp(2rem, 1.4rem + 2vw, 3.4rem);
}

.timeline__step:last-child {
	padding-bottom: 0;
}

/* Rot, Blau, Grün im Wechsel – je Jahr eine Farbe. */
/* Die Farbe je Station kommt aus .accent-1 bis .accent-3 (00-tokens.css). */

.on-dark .timeline__step {
	--accent: #fff;
}

.timeline__marker {
	position: relative;
	grid-area: mark;
	align-self: stretch;
}

.timeline__dot {
	position: absolute;
	top: .5rem;
	left: 50%;
	width: var(--dot);
	height: var(--dot);
	margin-left: calc(var(--dot) / -2);
	border-radius: 50%;
	background: var(--accent);
	box-shadow:
		0 0 0 4px var(--dot-halo),
		0 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent);
}

/*
 * Das Rückgrat: dieselbe Zickzacklinie wie unter den Überschriften, nur
 * stehend. Sie beginnt unterhalb der Marke und läuft bis in die nächste
 * Station hinein, damit zwischen zwei Jahren keine Lücke entsteht.
 */
.timeline__thread {
	position: absolute;
	top: calc(.5rem + var(--dot) + 8px);
	bottom: -6px;
	left: 50%;
	width: 8px;
	margin-left: -4px;
	background-color: color-mix(in srgb, var(--accent) 62%, transparent);
	-webkit-mask-image: var(--zig-mask-v);
	mask-image: var(--zig-mask-v);
	-webkit-mask-repeat: repeat-y;
	mask-repeat: repeat-y;
	-webkit-mask-size: 8px 11px;
	mask-size: 8px 11px;
}

.timeline__step:last-child .timeline__thread {
	display: none;
}

.timeline__year {
	grid-area: year;
	margin: 0 0 .5rem;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
	color: var(--accent);
	font-variant-numeric: tabular-nums lining-nums;
}

.timeline__body {
	grid-area: body;
	max-width: 62ch;
}

.timeline__body p {
	margin: 0;
	line-height: 1.68;
	color: var(--ink-2);
}

.timeline__body p + p {
	margin-top: .9em;
}

.on-dark .timeline__body p {
	color: var(--ink-invert-2);
}

/*
 * Ab hier bekommt die Jahreszahl eine eigene Spalte und wird groß. Sie ist
 * dann keine Beschriftung mehr, sondern die Marke, an der man sich beim
 * Überfliegen entlanghangelt.
 */
@media (min-width: 760px) {
	.timeline {
		--mark-col: 2.8rem;
	}

	.timeline__step {
		grid-template-columns: clamp(6.5rem, 9vw, 9rem) var(--mark-col) minmax(0, 1fr);
		grid-template-areas: 'year mark body';
		column-gap: 0;
	}

	/*
	 * Die Spalte ist so breit, dass vier Ziffern in einer Zeile stehen. Bräche
	 * die Jahreszahl um, stünde neben jeder Station eine zweizeilige Zahl –
	 * und aus der Marke, an der man sich orientiert, würde ein Fleck.
	 */
	.timeline__year {
		margin: 0;
		padding-right: clamp(1rem, .6rem + 1vw, 1.6rem);
		font-size: var(--step-3);
		text-align: right;
	}

	/* Die erste Zeile des Textes soll auf der Höhe der Marke beginnen. */
	.timeline__body {
		padding-top: .1rem;
	}
}

/* --- Verlauf mit Randspalte ------------------------------------------------

   Auf breiten Bildschirmen steht rechts neben dem Verlauf eine schmale Spalte
   mit den Tätigkeitsberichten. Sie läuft mit, statt am Anfang stehen zu
   bleiben: Wer sich im Verlauf durch die Jahre liest, hat den passenden
   Bericht damit die ganze Zeit im Blick.

   Unterhalb von 1000 Pixeln entfällt sie vollständig. Untereinander wäre sie
   keine Randspalte mehr, sondern ein zweiter Abschnitt mit denselben
   Beiträgen, die auch die Blog-Übersicht zeigt.
   ---------------------------------------------------------------------- */

.timeline-layout--aside > .side-list {
	display: none;
}

@media (min-width: 1000px) {
	.timeline-layout--aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(15rem, 22vw, 18.5rem);
		gap: clamp(2rem, 1rem + 3vw, 4rem);
		align-items: start;
	}

	.timeline-layout--aside > .side-list {
		display: block;
		position: sticky;
		/* Die Kopfleiste liegt fest über der Seite – darunter beginnt die Spalte. */
		top: calc(var(--header-bottom) + var(--space-3));
	}
}

.side-list {
	padding: clamp(1.2rem, .9rem + 1vw, 1.7rem);
}

.side-list__title {
	margin: 0;
	font-size: var(--step-1);
	line-height: 1.2;
}

.side-list__mark {
	--zig-w: 55px;

	/*
	 * Ohne eigene Farbe: Die Linie unter der Überschrift gehört zum Abschnitt,
	 * in dem die Spalte steht. Die Farben der Berichte sitzen eine Zeile
	 * tiefer an den Marken – dort sagen sie etwas aus (das Jahr), hier wäre
	 * eine vierte Farbe im Kopf der Spalte nur Dekor.
	 */
	margin-top: .6rem;
	margin-bottom: .9rem;
}

.side-list__note {
	margin: 0 0 1.1rem;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-3);
}

.side-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .35rem;
}

.side-list__link {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .45rem;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: inherit;
	transition: background var(--dur-fast) var(--ease-out);
}

/* Die Tönung beim Überfahren ist die des Berichtsjahres – die Zeile trägt
   dafür dieselbe Klasse .accent-* wie ihre Marke. */
.side-list__link:hover {
	background: var(--accent-wash);
	color: inherit;
}

/*
 * Die Marke ist dasselbe Feld wie das Titelfeld der Karte, nur auf
 * Daumennagelgröße – samt der Farbe des Berichtsjahres. Dadurch erkennt man
 * einen Bericht hier wieder, ohne dass die Spalte ein einziges Bild laden
 * müsste.
 */
.side-list__badge {
	flex-shrink: 0;
	display: grid;
	place-content: center;
	width: 54px;
	height: 54px;
	border-radius: var(--radius-sm);
	background:
		radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .22) 0%, transparent 60%),
		linear-gradient(152deg, var(--accent) 0%, var(--accent-deep) 100%);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

/* Zwei Jahre stehen untereinander – nebeneinander sprengten sie das Quadrat. */
.side-list__badge--range {
	font-size: var(--step--2);
	line-height: 1.25;
	text-align: center;
}

.side-list__label {
	min-width: 0;
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 650;
	line-height: 1.25;
	color: var(--ink);
	hyphens: auto;
	-webkit-hyphens: auto;
}

.side-list__foot {
	margin: 1.1rem 0 0;
}

/* ---- 07-sections.css ---- */
/* =========================================================================
   07 – Abschnittstypen
   ====================================================================== */

/* --- Text mit Bild ----------------------------------------------------- */

.feature__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper-3);
	box-shadow: var(--shadow-lg);
}

.feature__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: var(--focus, center);
}

/*
 * Video: Das Seitenverhältnis kommt aus der Datei, damit nichts beschnitten
 * wird. Der schwarze Grund verhindert helle Ränder, solange nur der erste
 * Frame geladen ist.
 */
.feature__media--video {
	background: #000;
}

.feature__media--video video {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Zahlenband -------------------------------------------------------- */

.stats-band {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.stats-band__bg {
	position: absolute;
	inset: -8% 0;
	z-index: -2;
	will-change: transform;
}

.stats-band__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, center 45%);
}

/*
 * Derselbe rote Schleier wie auf den Bühnen – dadurch gehören Bühne und
 * Zahlenband sichtbar zusammen.
 */
.stats-band__tint {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(168deg, rgba(122, 42, 38, .72), rgba(74, 20, 18, .86));
	mix-blend-mode: multiply;
}

.stats-band__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(26, 8, 7, .3);
}

.stats-grid {
	display: grid;
	gap: clamp(.85rem, .5rem + 1.2vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

/* --- Fortschrittsbalken -------------------------------------------------

   Der Balken läuft über die volle Breite des Abschnitts – also über alle
   Kacheln hinweg. Er ist die gemeinsame Klammer um die Einzelzahlen und
   nicht die Fußnote der ersten Kachel.
   ---------------------------------------------------------------------- */

.progress {
	width: 100%;
	margin-top: var(--space-4);
}

.progress__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: .8rem;
}

.progress__label {
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

.progress__ratio {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: #fff;
	font-variant-numeric: tabular-nums lining-nums;
}

.progress__track {
	position: relative;
	height: 12px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
	overflow: hidden;
}

.progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--clay-soft), #fff 70%);
	box-shadow: 0 0 18px -2px rgba(255, 255, 255, .55);
	transition: width 1.6s var(--ease-out);
}

.progress__caption {
	margin: .8rem 0 0;
	font-size: var(--step--1);
	color: var(--ink-invert-3);
}

/* Auf hellem Grund trägt derselbe Balken die Farben der Seite. */
.section:not(.on-dark) .progress__label {
	color: var(--clay-deep);
}

.section:not(.on-dark) .progress__ratio {
	color: var(--ink);
}

.section:not(.on-dark) .progress__track {
	background: color-mix(in srgb, var(--clay) 14%, transparent);
	box-shadow: none;
}

.section:not(.on-dark) .progress__fill {
	background: linear-gradient(90deg, var(--clay), var(--ocean));
	box-shadow: none;
}

.section:not(.on-dark) .progress__caption {
	color: var(--ink-3);
}

/* --- Aufruf ------------------------------------------------------------- */

.cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--radius-lg);
	padding: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem) clamp(1.5rem, 1rem + 3vw, 4rem);
	text-align: center;
	color: #fff;
	background: var(--clay-dark);
}

.cta__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, center 45%);
}

.cta__tint {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, rgba(122, 36, 32, .92), rgba(60, 15, 13, .96));
	mix-blend-mode: multiply;
}

.cta__title {
	max-width: 24ch;
	margin: 0 auto;
	font-size: var(--step-4);
	font-weight: 700;
	color: #fff;
}

.cta__text {
	max-width: 54ch;
	margin: var(--space-3) auto 0;
	color: rgba(255, 255, 255, .86);
}

.cta .actions {
	justify-content: center;
	margin-top: var(--space-5);
}

/* --- Das Versprechen -----------------------------------------------------

   Eine eigene Fläche in der hellsten Tönung der Hausfarbe, deutlich
   gerundet und mit einem roten Band an der Kante. Zitat und Erläuterung
   stehen nebeneinander und beginnen auf derselben Höhe. Das
   Anführungszeichen ist reiner Zierrat und liegt hinter der ersten Zeile,
   statt sie nach unten zu schieben – sonst stünden die Spalten versetzt.
   ---------------------------------------------------------------------- */

.promise {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	align-items: start;
	overflow: hidden;
	padding: clamp(2rem, 1.2rem + 3.4vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(90% 120% at 6% 0%, color-mix(in srgb, var(--clay) 9%, transparent), transparent 62%),
		var(--clay-mist);
	border: 1px solid color-mix(in srgb, var(--clay) 14%, transparent);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, var(--shadow-md);
}

/* Das rote Band an der Kante macht den Abschnitt schon im Augenwinkel kenntlich. */
.promise::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: linear-gradient(to bottom, var(--clay), var(--ocean) 55%, var(--olive));
}

@media (min-width: 900px) {
	.promise {
		grid-template-columns: 1.08fr .92fr;
	}
}

.promise__main .eyebrow {
	margin-bottom: 1.1rem;
}

.promise__aside {
	display: grid;
	gap: 1.25rem;
}

/*
 * Das Siegel nennt die Zahl, um die es geht. Es ist bewusst kein Bild:
 * Als Text bleibt es in jeder Größe scharf und lässt sich vorlesen.
 */
.promise__seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	margin: 0;
	padding: .55rem 1.15rem;
	border-radius: var(--radius-pill);
	background: var(--clay);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: -.01em;
	box-shadow: 0 14px 28px -18px rgba(141, 47, 43, .95);
}

.on-dark .promise {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: none;
}

.pullquote {
	position: relative;
	margin: 0;
	isolation: isolate;
}

/*
 * Eine Stufe kleiner als früher: In der halben Spaltenbreite zerfiel der
 * Satz sonst in neun kurze Zeilen und wirkte zerrissen statt ruhig.
 */
.pullquote__text {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-wrap: balance;
	color: var(--ink);
}

.pullquote__mark {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	font-family: var(--font-display);
	font-size: calc(var(--step-6) * 1.4);
	line-height: .74;
	color: color-mix(in srgb, var(--clay) 14%, transparent);
	/* Nur nach oben versetzt – seitlich würde es aus dem Satzspiegel laufen. */
	transform: translateY(-.26em);
	pointer-events: none;
	user-select: none;
}

.on-dark .pullquote__text {
	color: #fff;
}

.on-dark .pullquote__mark {
	color: rgba(255, 255, 255, .12);
}


.pullquote__source {
	display: block;
	margin-top: 1.2rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-style: normal;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.on-dark .pullquote__source {
	color: var(--ink-invert-3);
}

/* --- Bilderstrecke ------------------------------------------------------ */

.gallery {
	display: grid;
	gap: clamp(.85rem, .5rem + 1.2vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

/* Jedes dritte Bild darf ausbrechen – das nimmt dem Raster die Strenge. */
@media (min-width: 900px) {
	.gallery--editorial > :nth-child(3n + 1) {
		grid-column: span 2;
	}

	.gallery--editorial > :nth-child(3n + 1) .figure__media img {
		aspect-ratio: 16 / 9;
	}
}

/* --- Collage ------------------------------------------------------------

   Ein großes Aufmacherbild, darunter vier kleinere. Der Rhythmus wiederholt
   sich alle fünf Bilder, sodass die Anordnung auch bei zehn oder fünfzehn
   Bildern trägt, ohne dass jemand Spalten pflegen müsste.
   ---------------------------------------------------------------------- */

@media (min-width: 760px) {
	.gallery--collage {
		grid-template-columns: repeat(6, 1fr);
	}

	.gallery--collage > * {
		grid-column: span 3;
	}

	.gallery--collage > :nth-child(5n + 1) {
		grid-column: span 4;
	}

	.gallery--collage > :nth-child(5n + 2) {
		grid-column: span 2;
	}

	.gallery--collage > :nth-child(5n + 3),
	.gallery--collage > :nth-child(5n + 4),
	.gallery--collage > :nth-child(5n + 5) {
		grid-column: span 2;
	}

	.gallery--collage > :nth-child(5n + 1) .figure__media img {
		aspect-ratio: 16 / 10;
	}

	.gallery--collage > :nth-child(5n + 2) .figure__media img {
		aspect-ratio: 3 / 4;
	}

	/* Steht am Ende ein einzelnes Bild allein, füllt es die Reihe. */
	.gallery--collage > :last-child:nth-child(5n + 1) {
		grid-column: 1 / -1;
	}
}

.gallery .figure__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: var(--focus, center);
	transition: transform var(--dur-slow) var(--ease-out);
}

.gallery .figure:hover .figure__media img {
	transform: scale(1.04);
}

/* --- Aufzählung mit Haken ----------------------------------------------- */

.check-list {
	display: grid;
	gap: 1.05rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.check-list li {
	position: relative;
	padding-left: 2.3rem;
	color: var(--ink-2);
}

.check-list li::before {
	content: '';
	position: absolute;
	top: .34em;
	left: 0;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--clay-wash) no-repeat center / 11px 11px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.4 5.4 11 12 3.2' fill='none' stroke='%238d2f2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.on-dark .check-list li {
	color: var(--ink-invert-2);
}

.on-dark .check-list li::before {
	background-color: rgba(255, 255, 255, .14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.4 5.4 11 12 3.2' fill='none' stroke='%23e8bc72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Nummerierte Aufzählung (Codex, Richtlinien) ------------------------ */

.numbered {
	counter-reset: hokeki-count;
	display: grid;
	gap: clamp(1.15rem, .8rem + 1vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.numbered li {
	position: relative;
	padding-left: clamp(3rem, 2rem + 2.2vw, 4.2rem);
	color: var(--ink-2);
}

.numbered li::before {
	counter-increment: hokeki-count;
	content: counter(hokeki-count, decimal-leading-zero);
	position: absolute;
	top: -.08em;
	left: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
	color: color-mix(in srgb, var(--clay) 40%, transparent);
	font-variant-numeric: tabular-nums;
}

.on-dark .numbered li {
	color: var(--ink-invert-2);
}

/* --- Kontaktdaten -------------------------------------------------------- */

.contact-card {
	display: grid;
	gap: 1.5rem;
	padding: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
}

.contact-card dl {
	display: grid;
	gap: 1.1rem;
	margin: 0;
}

.contact-card dt {
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.contact-card dd {
	margin: .2rem 0 0;
	font-size: var(--step-1);
	font-family: var(--font-display);
	font-weight: 650;
	line-height: 1.35;
}

.contact-card dd a {
	text-decoration: none;
}

/* --- Bankverbindung -------------------------------------------------------- */

.bank {
	display: grid;
	gap: 1rem;
	padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
}

.bank dl {
	display: grid;
	gap: .75rem;
	margin: 0;
}

@media (min-width: 640px) {
	.bank dl {
		grid-template-columns: auto 1fr;
		column-gap: 2rem;
		align-items: baseline;
	}
}

.bank dt {
	margin: 0;
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.bank dd {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step-1);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--ink);
}

/* --- Patenschaftsmodelle -------------------------------------------------

   Vier Stufen nebeneinander. Eine davon ist ausgezeichnet: Sie steht eine
   Spur höher, trägt die Hausfarbe und ein Band mit der Empfehlung. Ohne
   diesen Anker vergleicht man vier gleich aussehende Zahlen – und
   entscheidet sich am Ende für keine.
   ---------------------------------------------------------------------- */

.plans {
	display: grid;
	gap: clamp(.9rem, .5rem + 1.4vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	align-items: stretch;
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.plan:hover {
	transform: translateY(-4px);
}

.plan--featured {
	background: #fff;
	border-color: color-mix(in srgb, var(--clay) 34%, transparent);
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--clay) 26%, transparent),
		0 30px 60px -34px rgba(141, 47, 43, .6);
}

@media (min-width: 1040px) {
	/* Die empfohlene Stufe steht eine Spur höher als die anderen. */
	.plan--featured {
		transform: translateY(-10px);
	}

	.plan--featured:hover {
		transform: translateY(-14px);
	}
}

.plan__badge {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	padding: .32rem .95rem;
	border-radius: var(--radius-pill);
	background: var(--clay);
	color: #fff;
	font-size: var(--step--2);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	box-shadow: 0 10px 22px -14px rgba(141, 47, 43, .95);
}

.plan__amount {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
}

.plan__value {
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--clay-deep);
	font-variant-numeric: tabular-nums lining-nums;
}

.plan__period {
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.plan__monthly {
	margin: 0;
	font-size: var(--step--1);
	color: var(--ink-3);
}

.plan__title {
	margin: .4rem 0 0;
	font-size: var(--step-1);
	font-weight: 650;
	line-height: 1.25;
	color: var(--ink);
}

.plan__list {
	display: grid;
	gap: .5rem;
	margin: .3rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-2);
}

.plan__list li {
	position: relative;
	padding-left: 1.6rem;
}

.plan__list li::before {
	content: '';
	position: absolute;
	top: .34em;
	left: 0;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--clay-wash) no-repeat center / 9px 9px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.4 5.4 11 12 3.2' fill='none' stroke='%238d2f2b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.plan__text {
	margin: .3rem 0 0;
	font-size: var(--step--1);
	line-height: 1.55;
	color: var(--ink-2);
}

.plans__note {
	max-width: 62ch;
	margin-top: var(--space-4);
	margin-inline: auto;
	text-align: center;
	font-size: var(--step--1);
	color: var(--ink-3);
}

/* --- Ablauf in Schritten ------------------------------------------------- */

.steps {
	display: grid;
	gap: clamp(.9rem, .5rem + 1.4vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.step {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
}

.step__number {
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: color-mix(in srgb, var(--clay) 45%, transparent);
	font-variant-numeric: tabular-nums;
}

.step__title {
	margin: 0;
	font-size: var(--step-1);
	font-weight: 650;
	line-height: 1.25;
}

.step__text {
	margin: 0;
	font-size: var(--step--1);
	line-height: 1.6;
	color: var(--ink-2);
}

/* ---- 08-blog.css ---- */
/* =========================================================================
   08 – Blog: Übersicht, Filter, Karten, Einzelbeitrag

   Aufmacher und Beitragsbühne verwenden denselben roten Schleier wie die
   Bühnen der übrigen Seiten – der Blog soll nicht wie ein Fremdkörper wirken.
   ====================================================================== */

/* --- Aufmacher der Übersicht ------------------------------------------- */

.section--blog {
	padding-top: var(--section-y-tight);
	padding-bottom: var(--section-y);
}

/* --- Kategorienavigation -------------------------------------------------

   Sie ist die zweite Navigation der Website und sieht deshalb aus wie die
   erste: dieselbe helle Glaskapsel wie die Kopfleiste, dieselben Menüpunkte,
   dieselbe rote Mulde für den aktiven Eintrag. Die Punkte selbst brauchen
   hier keine eigenen Regeln – sie tragen die Klassen .nav-menu und
   .menu-link aus 04-nav.css.
   ---------------------------------------------------------------------- */

.blog-nav {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	margin-bottom: var(--section-y-tight);
	padding: var(--bar-pad);
	border-radius: var(--radius-pill);
	color: var(--bar-ink);
}

/*
 * Auf schmalen Bildschirmen ist die Reihe breiter als der Bildschirm und
 * lässt sich seitlich schieben. Der am Rand angeschnittene Punkt ist die
 * Einladung dazu; eine zweite Zeile wäre es nicht, sie sähe aus wie eine
 * vollständige Liste.
 */
.blog-nav .nav-menu {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.blog-nav .nav-menu::-webkit-scrollbar {
	display: none;
}

.blog-nav .nav-menu > li {
	flex-shrink: 0;
	scroll-snap-align: center;
}

/* --- Beitragsraster ------------------------------------------------------

   Ein ruhiges Raster: alle Karten gleich groß, gleich hoch, in Leserichtung
   von links oben nach rechts unten. Bis Fassung 3.4 lief jede siebte Karte
   über zwei Spalten – das sah lebendig aus, machte aus einer chronologischen
   Reihe aber ein Puzzle, in dem man die Reihenfolge suchen musste.
   ---------------------------------------------------------------------- */

.post-grid {
	display: grid;
	gap: clamp(1.1rem, .7rem + 1.5vw, 2rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * Der Anreißer auf der Startseite zeigt immer genau eine volle Reihe: zwei
 * Karten auf dem Telefon, drei auf dem Tablet, vier am Bildschirm. Vier Karten
 * auf einem Telefon wären zwei Reihen und damit ein halber Bildschirm für
 * einen Abschnitt, der nur neugierig machen soll.
 *
 * Ausgeblendet statt weggelassen: Wie breit der Bildschirm ist, weiß erst der
 * Browser – der Server müsste raten. Die Karten sind Text und ein Bild mit
 * „lazy“; was verborgen bleibt, wird nicht geladen.
 */
.post-grid--teaser > .post-card:nth-child(n + 3) {
	display: none;
}

@media (min-width: 700px) {
	.post-grid--teaser > .post-card:nth-child(3) {
		display: flex;
	}
}

@media (min-width: 1000px) {
	.post-grid--teaser > .post-card:nth-child(4) {
		display: flex;
	}
}

/*
 * Weniger Karten als Spalten – ein dünnes Jahr, eine kleine Kategorie, der
 * Einstieg der Übersicht im jüngsten Jahr. Dann bekommt das Raster nur so
 * viele Spalten, wie es Karten gibt, und rückt in die Mitte. Sonst stünde eine
 * einzelne Karte links in einer zu drei Vierteln leeren Reihe, und das sieht
 * aus wie ein Fehler und nicht wie ein Jahr mit einem Bericht.
 *
 * Über :has(), weil die Anzahl beim Nachladen wächst: Eine im Template
 * berechnete Klasse wäre nach dem ersten Klick auf „Alle weiteren Beiträge
 * laden“ falsch.
 */
@media (min-width: 700px) {
	.post-grid:not(:has(> :nth-child(4))) {
		grid-template-columns: repeat(auto-fit, minmax(0, 300px));
		justify-content: center;
	}
}

.post-card {
	position: relative;
	display: flex;
}

/*
 * Die Farbe wandert von Karte zu Karte – rot, blau, grün. Sie kommt aus den
 * Klassen .accent-1 bis .accent-3 (00-tokens.css); ein Tätigkeitsbericht
 * bekommt dieselbe Klasse, nur nach seinem Jahr statt nach seiner Stellung
 * im Raster (siehe hokeki_report_accent()).
 */

.post-card .card {
	width: 100%;
	padding: 0;
	overflow: hidden;
}

/*
 * Alle Karten sind gleich hoch, weil der Anriss auf zwei Zeilen begrenzt ist
 * und der Fuß unten sitzt. Ohne beides bestimmte die Länge des jeweils ersten
 * Satzes die Höhe einer ganzen Rasterzeile.
 */
.post-card .card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1rem, .8rem + .6vw, 1.4rem);
}

.post-card .card__media {
	position: relative;
	margin: 0;
	border-radius: 0;
	background: var(--paper-3);
}

.post-card .card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: var(--focus, center);
}

/* --- Titelfeld der Tätigkeitsberichte -------------------------------------

   Ein Jahresrückblick hat kein Titelbild und soll auch keines bekommen: Ein
   beliebiges Foto aus dem Bericht sagt über ein ganzes Jahr nichts aus. An
   seiner Stelle steht ein Verlauf mit der Zickzacklinie und der Jahreszahl.

   Er ist gezeichnet und keine Datei: Damit stimmt die Farbe auch dann noch,
   wenn jemand später an den Gestaltungsvariablen dreht.

   Die Farbe gehört zum Jahr des Berichts – 2022 rot, 2021 blau, 2020 grün,
   2019 wieder rot, 2017/2018 blau – und ausdrücklich nicht zur Stellung im
   Raster. Nur so trägt derselbe Bericht auf der Blog-Übersicht, in seiner
   Bühne, in der Blätterleiste und in der Spalte der Geschichtsseite dieselbe
   Farbe; über die Stellung im Raster wäre er viermal anders eingefärbt und
   die Fläche verlöre ihre Aussage. Welche Farbe zu welchem Jahr gehört,
   entscheidet hokeki_report_accent(); hier wird sie nur gelesen.
   ---------------------------------------------------------------------- */

.report-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	width: 100%;
	height: 100%;
	padding: .8rem;
	text-align: center;
	background:
		radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .22) 0%, transparent 60%),
		linear-gradient(152deg, var(--accent) 0%, var(--accent-deep) 100%);
	color: #fff;
}

.post-card .card__media .report-cover {
	aspect-ratio: 4 / 3;
}

.report-cover__label {
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .78;
}

.report-cover__year {
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
}

/* „2017 – 2018“ ist mehr als doppelt so breit wie eine einzelne Jahreszahl. */
.report-cover__year--range {
	font-size: var(--step-2);
}

/*
 * Auf der farbigen Fläche muss die Linie hell sein. Sie holt ihre Farbe sonst
 * aus --accent – und das ist hier genau der Ton des Grundes, auf dem sie
 * liegt.
 */
.report-cover__mark {
	--zig-w: 62px;
	--accent: rgba(255, 255, 255, .7);

	margin: .15rem 0 0;
}

/*
 * In der Blätterleiste ist das Feld 92 Pixel groß. Dort passt neben der
 * Jahreszahl nichts mehr hinein – Kleinzeile und Linie entfallen, statt sich
 * in drei unlesbare Zeilen zu quetschen.
 */
.post-nav__media .report-cover {
	gap: 0;
	padding: .4rem;
}

.post-nav__media .report-cover__label,
.post-nav__media .report-cover__mark {
	display: none;
}

.post-nav__media .report-cover__year {
	font-size: var(--step-0);
}

/* Die Kategorie liegt auf dem Bild – im Text darunter wäre sie eine Zeile,
   die auf jeder Karte dasselbe Gewicht hätte wie die Überschrift. */
.card__chip {
	position: absolute;
	left: .7rem;
	right: .7rem;
	bottom: .7rem;
	z-index: 1;
	display: flex;
}

/*
 * Auf einer schmalen Karte ist „Tätigkeitsberichte“ breiter als das Bild.
 * Der Chip endet dann mit Auslassungspunkten, statt über den Rand zu laufen.
 */
.card__chip .chip {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 6px 16px -10px rgba(28, 39, 35, .8);
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .45rem;
	font-size: var(--step--1);
	letter-spacing: .04em;
	color: var(--ink-3);
}

.post-card .card__title {
	margin: 0;
	font-size: var(--step-1);
	line-height: 1.22;
	/*
	 * Auf dem Telefon stehen zwei Karten nebeneinander und die Spalte ist
	 * schmaler als „Weihnachtsmarkt“. Ohne Trennung schnitt das Wort einfach
	 * ab – der Beitrag hieß dann „Weihnachtsma“. Das Dokument ist als deutsch
	 * ausgezeichnet, die Trennung sitzt deshalb an der richtigen Stelle.
	 */
	hyphens: auto;
	-webkit-hyphens: auto;
	/* Höchstens drei Zeilen – sonst schiebt ein langer Titel den Anriss weg. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card .card__text {
	margin: 0;
	font-size: var(--step--1);
	line-height: 1.55;
	color: var(--ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Die Zickzacklinie sitzt zwischen Titel und Anriss und ist kürzer als im
 * Abschnittskopf: In einer Karte ist sie Trennzeichen, nicht Auszeichnung.
 */
.card__zigzag {
	--zig-w: 55px;

	margin-top: .7rem;
	margin-bottom: .7rem;
	transition: width var(--dur) var(--ease-out);
}

.post-card .card:hover .card__zigzag {
	--zig-w: 88px;
}

.post-card .card__foot {
	margin: auto 0 0;
	padding-top: .9rem;
}

/* --- Nachladen ---------------------------------------------------------- */

.blog-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9rem;
	margin-top: var(--space-6);
}

.blog-more__status {
	font-size: var(--step--1);
	color: var(--ink-3);
}

.blog-more[hidden] {
	display: none;
}

.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* --- Leerer Zustand ------------------------------------------------------ */

.empty-state {
	padding: var(--space-6) var(--space-4);
	text-align: center;
}

.empty-state__title {
	margin-bottom: .4em;
	font-size: var(--step-2);
}

.empty-state p {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--ink-2);
}

/* --- Lesefortschritt ------------------------------------------------------ */

.reading-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: calc(var(--z-header) + 1);
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.reading-progress__bar {
	height: 100%;
	width: 0;
	background: var(--clay);
	transform-origin: left;
}

/* --- Einzelbeitrag ---------------------------------------------------------

   Der Beitrag verwendet die kompakte Bühne der Unterseiten (05-hero.css).
   Eigene Bühnenregeln gibt es hier deshalb nicht mehr – bis Fassung 3.4 stand
   an dieser Stelle ein zweiter, höherer Aufmacher mit eigenem Schleier, und
   der Blog sah dadurch aus wie eine zweite Website.
   ---------------------------------------------------------------------- */

.entry-meta {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 var(--space-4);
	font-size: var(--step--1);
	letter-spacing: .04em;
	color: var(--ink-3);
}

/* --- Beitragsinhalt ---------------------------------------------------------

   Ein Bericht ist gesetzt wie jeder andere Seitentext: dieselbe Schriftart,
   derselbe Schriftgrad, derselbe Zeilen- und Absatzabstand. Alles das kommt
   aus .prose in 02-layout.css und wird hier ausdrücklich nicht wiederholt.

   Bis Fassung 3.4 stand hier eine eigene, um zwei Stufen größere Textfassung
   samt eigenem Vorspann-Absatz und eigenen Überschriftengrößen. Nebeneinander
   gelegt sahen Blog und Unterseite dadurch aus wie zwei Websites – genau der
   Eindruck, den die gemeinsame Bühne schon nicht mehr erzeugen sollte.

   Hier bleiben deshalb nur die beiden Dinge, die es auf einer normalen Seite
   nicht gibt: die aus der Spalte laufenden Fotos und die Breite der Spalte.
   ---------------------------------------------------------------------- */

.entry-content {
	max-width: 68ch;
	margin-inline: auto;
}

/*
 * Bilder laufen über die Textspalte hinaus. Ein Foto in Zeilenbreite wirkt in
 * einem Bericht wie eine Miniatur; erst wenn es die Spalte sprengt, ist es der
 * Beleg, als der es gemeint ist.
 *
 * Auf dem Telefon gilt das nicht. Dort lief das Bild bis an beide Ränder – und
 * weil es abgerundete Ecken und einen weichen Schatten hat, schnitt der
 * Bildschirmrand genau durch diese Rundung. Das sah nicht nach Absicht aus,
 * sondern nach einem Bild, das nicht auf die Seite passt. Deshalb behält es
 * dort denselben Seitenrand wie der Text; die Rundung liegt frei, und die
 * Spalte wirkt aus einem Stück. Über die Textbreite läuft es erst ab 700 Pixel
 * hinaus, wo neben dem Satzspiegel auch Platz dafür ist.
 */
.entry-content > .entry-figure {
	margin-block: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}

@media (min-width: 700px) {
	.entry-content > .entry-figure {
		width: calc(100% + var(--gutter) * 2);
		margin-inline: calc(var(--gutter) * -1);
	}
}

@media (min-width: 900px) {
	.entry-content > .entry-figure {
		width: min(calc(100% + 9rem), calc(100vw - var(--gutter) * 2));
		margin-inline: calc((min(calc(100% + 9rem), calc(100vw - var(--gutter) * 2)) - 100%) / -2);
	}
}

/* Überschriften, Listen und Zitate kommen aus .prose – hier steht nichts. */

.entry-content img {
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}

.entry-content figure {
	margin-inline: 0;
}

.entry-content figcaption {
	margin-top: .7rem;
	font-size: var(--step--1);
	color: var(--ink-3);
	text-align: center;
}

.entry-content .alignwide {
	width: min(100vw - var(--gutter) * 2, var(--wrap));
	max-width: none;
	margin-inline: calc(50% - min(100vw - var(--gutter) * 2, var(--wrap)) / 2);
}

.entry-content .wp-block-gallery {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.entry-content .wp-block-gallery figure {
	margin: 0;
}

/* --- Fuß des Beitrags -------------------------------------------------------- */

/*
 * Schlusszeichen und Weg zum Helfen. Bewusst ohne Kachel und ohne Farbfläche:
 * Der Bericht soll ausklingen und nicht in einer Werbeanzeige enden.
 */
.entry-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	text-align: center;
}

.entry-foot__mark {
	--zig-w: 176px;

	margin-top: 0;
	margin-bottom: 1.4rem;
}

.entry-foot__text {
	margin: 0;
	max-width: 40ch;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--ink);
}

.entry-foot .actions {
	justify-content: center;
}

.entry-back {
	margin-top: var(--space-5);
	text-align: center;
}

/*
 * Zwei Karten mit Bild, Richtung, Titel und Datum. Der Pfeil zeigt jeweils
 * dorthin, wohin die Karte führt; bei „nächster“ steht das Bild rechts, damit
 * die beiden Karten sich spiegeln und nicht wie eine Liste wirken.
 */
.post-nav {
	display: grid;
	gap: clamp(.8rem, .5rem + 1vw, 1.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin-top: var(--space-6);
}

.post-nav__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .75rem;
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
}

.post-nav__link:hover {
	color: inherit;
}

.post-nav__media {
	flex: 0 0 auto;
	width: 92px;
	height: 92px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--paper-3);
}

.post-nav__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, center);
}

.post-nav__text {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

.post-nav__label {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--clay);
}

.post-nav__label svg {
	width: 14px;
	height: 14px;
	transform: rotate(180deg);
	transition: transform var(--dur) var(--ease-out);
}

.post-nav__title {
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 650;
	line-height: 1.25;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-nav__date {
	font-size: var(--step--1);
	color: var(--ink-3);
}

/* Die Karte nach vorn spiegelt sich: Bild rechts, Text rechtsbündig. */
.post-nav__link--next {
	flex-direction: row-reverse;
	text-align: right;
}

.post-nav__link--next .post-nav__label {
	flex-direction: row-reverse;
}

.post-nav__link--next .post-nav__label svg {
	transform: none;
}

.post-nav__link:hover .post-nav__label svg {
	transform: rotate(180deg) translateX(3px);
}

.post-nav__link--next:hover .post-nav__label svg {
	transform: translateX(3px);
}

/* --- Lichtkasten für Bildergalerien ---------------------------------------- */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: grid;
	place-items: center;
	padding: clamp(1rem, .5rem + 3vw, 4rem);
	background: rgba(26, 8, 7, .9);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

@supports (backdrop-filter: blur(1px)) {
	.lightbox {
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.lightbox__image {
	max-width: 100%;
	max-height: 82svh;
	border-radius: var(--radius);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
	transform: scale(.97);
	transition: transform var(--dur) var(--ease-out);
}

.lightbox.is-open .lightbox__image {
	transform: scale(1);
}

.lightbox__caption {
	margin-top: 1rem;
	text-align: center;
	color: rgba(255, 255, 255, .78);
	font-size: var(--step--1);
}

.lightbox__close {
	position: absolute;
	top: clamp(.8rem, .4rem + 1.5vw, 2rem);
	right: clamp(.8rem, .4rem + 1.5vw, 2rem);
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
}

.lightbox__close:hover {
	background: rgba(255, 255, 255, .2);
}

/* ---- 09-forms.css ---- */
/* =========================================================================
   09 – Formulare

   Die Formulare stehen auf einer eigenen Kachel. Sie sind das Einzige auf der
   Website, das etwas von den Besuchern verlangt – deshalb bekommen sie viel
   Luft, große Eingabefelder und kurze, deutliche Beschriftungen.
   ====================================================================== */

.form-card {
	padding: clamp(1.4rem, 1rem + 1.8vw, 2.5rem);
}

.form-card__title {
	margin: 0 0 .4rem;
	font-size: var(--step-2);
	font-weight: 700;
}

.form-card__note {
	margin: 0 0 var(--space-4);
	font-size: var(--step--1);
	color: var(--ink-3);
}

.form {
	display: grid;
	gap: var(--space-4);
}

/*
 * Beide Feldgruppen – die äußere Sperre und die inhaltlichen Gruppen – sind
 * <fieldset>. Der Browser gibt einem <fieldset> von Haus aus einen dunklen
 * Rahmen und einen Innenabstand; beides ist hier falsch, denn die Formulare
 * stehen bereits auf einer eigenen Kachel. Die Regel steht deshalb für beide
 * gemeinsam und nicht nur für die innere Gruppe.
 *
 * min-inline-size ist kein Schönheitsfehler, sondern Pflicht: Ein <fieldset>
 * bekommt sonst eine Mindestbreite aus seinem Inhalt und sprengt auf schmalen
 * Bildschirmen das Raster – die Seite lässt sich dann seitlich schieben.
 */
.form-fields,
.form-fieldset {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.form-fields {
	gap: var(--space-4);
}

.form-fieldset__legend {
	float: left; /* Damit die Legende im Grid nicht die erste Zeile belegt. */
	width: 100%;
	padding: 0;
	margin-bottom: .9rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
}

.form-row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.field {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.field--full {
	grid-column: 1 / -1;
}

.field__label {
	margin-bottom: .4rem;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--ink-2);
}

.field__required {
	margin-left: .15rem;
	color: var(--clay);
}

.field__input,
.field__textarea,
.field__select {
	width: 100%;
	padding: .9rem 1.05rem;
	background: #fff;
	border: 1px solid var(--paper-3);
	border-radius: var(--radius-sm);
	font-size: var(--step-0);
	color: var(--ink);
	transition: border-color var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out);
}

.field__textarea {
	min-height: 160px;
	resize: vertical;
	line-height: 1.6;
}

/*
 * Auswahlfeld. Der Pfeil sitzt in einer eigenen kleinen Mulde am rechten Rand –
 * damit sieht man dem Feld an, dass es aufklappt, und unterscheidet es von den
 * Eingabefeldern daneben, die genauso hoch und genauso hell sind.
 *
 * Die Liste selbst zeichnet das Betriebssystem; sie lässt sich nicht gestalten.
 * Umso wichtiger ist, dass das geschlossene Feld sauber aussieht.
 */
.field__select {
	appearance: none;
	padding-right: 3.4rem;
	cursor: pointer;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23b4413c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
		linear-gradient(var(--clay-wash), var(--clay-wash));
	background-repeat: no-repeat, no-repeat;
	background-position: right 1.05rem center, right .35rem center;
	background-size: 12px 8px, 2.2rem calc(100% - .7rem);
	transition: border-color var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out),
	            background-position var(--dur-fast) var(--ease-out);
}

.field__select:hover {
	background-position: right 1.05rem calc(50% + 1px), right .35rem center;
}

/* Aufgeklappt zeigt der Pfeil nach oben – dieselbe Auskunft wie beim Menü. */
.field__select:focus {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.25 6 1.75 11 6.25' fill='none' stroke='%23b4413c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
		linear-gradient(var(--clay-wash), var(--clay-wash));
}

.field__select option {
	color: var(--ink);
	background: #fff;
}

.field__input:hover,
.field__textarea:hover,
.field__select:hover {
	border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
	outline: none;
	border-color: var(--clay);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 16%, transparent);
}

.field__input::placeholder,
.field__textarea::placeholder {
	color: var(--ink-3);
	opacity: .7;
}

.field__hint {
	margin: .4rem 0 0;
	font-size: var(--step--1);
	color: var(--ink-3);
}

/* --- Kontrollkästchen ---------------------------------------------------- */

.field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: .8rem;
	grid-column: 1 / -1;
}

.field--checkbox input[type='checkbox'] {
	flex-shrink: 0;
	width: 21px;
	height: 21px;
	margin: .2rem 0 0;
	accent-color: var(--clay);
	cursor: pointer;
}

.field--checkbox .field__label {
	margin: 0;
	font-weight: 400;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--ink-2);
	cursor: pointer;
}

/* --- Honigtopf: für Menschen unsichtbar, für Bots verlockend ------------- */

.field--trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Rückmeldungen -------------------------------------------------------- */

.form-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-sm);
	font-size: var(--step--1);
	line-height: 1.55;
	border-left: 4px solid;
}

.form-notice--success {
	background: var(--olive-wash);
	border-color: var(--olive);
	color: var(--olive-deep);
}

.form-notice--error {
	background: var(--clay-wash);
	border-color: var(--clay);
	color: var(--clay-deep);
}

/* Hinweis bei einem Formular, das vorübergehend nichts entgegennimmt. */
.form-notice--info {
	background: var(--ocean-wash);
	border-color: var(--ocean);
	color: var(--ocean-deep);
}

.form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem var(--space-3);
	justify-content: space-between;
}

.form__hint {
	margin: 0;
	font-size: var(--step--1);
	color: var(--ink-3);
}

/* --- Suchformular ---------------------------------------------------------- */

.search-form {
	display: flex;
	gap: .6rem;
	max-width: 34rem;
}

.search-form .field__input {
	flex: 1;
}

/* ---- 10-footer.css ---- */
/* =========================================================================
   10 – Fußbereich

   Der Fuß bleibt hell – ein dunkler Riegel am Seitenende wirkt wie ein
   Schlussstrich, eine warme Fläche wie das Ende eines Gesprächs. Er liegt
   aber eine Stufe tiefer als jeder Abschnitt darüber (--paper-4) und wird
   von einer klaren Kante eingeleitet: So ist auf den ersten Blick zu sehen,
   dass hier die Seite endet und nicht bloß ein weiterer Abschnitt beginnt.
   Getragen wird die Fläche von einem sehr weichen roten Schein oben links –
   dieselbe Farbe wie in den Bühnen, nur so leise, dass man sie eher spürt
   als sieht.
   ====================================================================== */

.site-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--section-y) var(--space-4);
	background: var(--paper-4);
	color: var(--ink-2);
	border-top: 1px solid var(--edge-strong);
}

.site-footer::before {
	content: '';
	position: absolute;
	inset: -40% 30% 30% -20%;
	z-index: -1;
	background:
		radial-gradient(50% 50% at 30% 40%, color-mix(in srgb, var(--clay) 12%, transparent), transparent 70%);
	pointer-events: none;
}

/*
 * Die obere Kante des Fußes ist die Zickzacklinie der Website – einmal über
 * die volle Breite und dabei von Rot über Blau nach Grün. Sie ist damit die
 * einzige Stelle, an der alle drei Farben gleichzeitig zu sehen sind, und
 * schließt die Seite mit demselben Zeichen, mit dem jeder Abschnitt beginnt.
 */
.site-footer::after {
	content: '';
	position: absolute;
	inset: -1px 0 auto;
	height: var(--zig-h);
	background: linear-gradient(90deg, var(--clay), var(--ocean) 50%, var(--olive));
	-webkit-mask-image: var(--zig-mask);
	mask-image: var(--zig-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: var(--zig-unit) var(--zig-h);
	mask-size: var(--zig-unit) var(--zig-h);
}

.footer-top {
	display: grid;
	gap: clamp(2.25rem, 1rem + 3.5vw, 4rem);
	grid-template-columns: 1fr;
	padding-bottom: var(--space-6);
}

@media (min-width: 860px) {
	.footer-top {
		grid-template-columns: 1.5fr 1fr 1fr;
	}
}

/* --- Marke ------------------------------------------------------------- */

/*
 * Im Fuß trägt das Logo dieselbe rote Fassung wie im Kopf, nur größer. Die
 * Höhe steht hier lokal, weil --bar-slot nur innerhalb der Kopfleiste gilt.
 */
.brand--footer {
	--bar-slot: 58px;

	margin-bottom: 1.4rem;
}

.footer-claim {
	max-width: 24ch;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -.028em;
	color: var(--ink);
}

.footer-note {
	max-width: 40ch;
	margin: 1rem 0 0;
	font-size: var(--step--1);
	line-height: 1.6;
	color: var(--ink-3);
}

/* --- Soziale Netzwerke -------------------------------------------------- */

.footer-social {
	display: flex;
	gap: .6rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

.footer-social__link {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	border: 1px solid var(--edge);
	color: var(--clay-deep);
	box-shadow: var(--shadow-sm);
	transition: background var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out);
}

.footer-social__link svg {
	width: 20px;
	height: 20px;
}

.footer-social__link:hover {
	background: var(--clay);
	border-color: var(--clay);
	color: #fff;
	transform: translateY(-2px);
}

/* --- Listen ------------------------------------------------------------- */

.footer-heading {
	margin: 0 0 1.1rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--clay-deep);
}

.footer-list,
.site-footer .menu {
	display: grid;
	gap: .7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-list a,
.site-footer .menu a {
	display: inline-flex;
	align-items: center;
	font-size: var(--step-0);
	color: var(--ink-2);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.footer-list a:hover,
.site-footer .menu a:hover {
	color: var(--clay-deep);
	transform: translateX(3px);
}

.footer-contact {
	display: grid;
	gap: .5rem;
	font-size: var(--step--1);
	font-style: normal;
	line-height: 1.5;
	color: var(--ink-2);
}

.footer-contact a {
	color: var(--clay-deep);
	text-decoration: none;
}

.footer-contact a:hover {
	text-decoration: underline;
}

/* --- Rechtezeile --------------------------------------------------------- */

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	padding-top: var(--space-4);
	border-top: 1px solid var(--edge-strong);
	font-size: var(--step--1);
	color: var(--ink-3);
}

.footer-copy {
	margin: 0;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-legal a {
	color: var(--ink-3);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.footer-legal a:hover {
	color: var(--clay-deep);
	text-decoration: underline;
}

/* --- Zurück nach oben ---------------------------------------------------- */

.to-top {
	position: fixed;
	right: clamp(1rem, .5rem + 1.5vw, 2rem);
	bottom: clamp(1rem, .5rem + 1.5vw, 2rem);
	z-index: 60;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--clay);
	color: #fff;
	box-shadow: 0 18px 34px -18px rgba(141, 47, 43, .9);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            background var(--dur-fast) var(--ease-out),
	            visibility 0s linear var(--dur);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.to-top:hover {
	background: var(--clay-deep);
}

.to-top svg {
	width: 17px;
	height: 17px;
}

/* ---- 11-motion.css ---- */
/* =========================================================================
   11 – Bewegung

   Zurückhaltend und immer in dieselbe Richtung: Inhalte blenden beim Scrollen
   einmal auf, Bühnenbilder wandern langsamer als der Rest. Nichts fliegt,
   nichts hüpft, nichts dreht sich.

   Wo der Browser scrollgesteuerte Animationen kennt, laufen sie ohne
   JavaScript. Das Skript ist der Rückfall, nicht die Grundlage.
   ====================================================================== */

/* --- Einblenden beim Scrollen -------------------------------------------

   Bewegt wird über die eigenständige Eigenschaft „translate“, nicht über
   „transform“. Nur so lässt sich die Einblendung mit einer räumlichen
   Neigung auf demselben Element kombinieren, ohne dass eine der beiden
   Angaben die andere überschreibt.
   ---------------------------------------------------------------------- */

.reveal {
	opacity: 0;
	translate: 0 20px;
	transition: opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
	opacity: 1;
	translate: none;
}

/* Ohne JavaScript darf nichts unsichtbar bleiben. */
.no-js .reveal {
	opacity: 1;
	translate: none;
}

/* Gestaffelt: Kinder folgen dem Elternteil versetzt. */
.reveal-stagger > * {
	opacity: 0;
	translate: 0 16px;
	transition: opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out);
}

.reveal-stagger.is-visible > * {
	opacity: 1;
	translate: none;
}

.reveal-stagger.is-visible > :nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > :nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.is-visible > :nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.is-visible > :nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.is-visible > :nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.is-visible > :nth-child(6) { transition-delay: 300ms; }
.reveal-stagger.is-visible > :nth-child(7) { transition-delay: 360ms; }
.reveal-stagger.is-visible > :nth-child(n + 8) { transition-delay: 420ms; }

.no-js .reveal-stagger > * {
	opacity: 1;
	translate: none;
}

/* --- Bild-Enthüllung ------------------------------------------------------ */

.reveal-image {
	overflow: hidden;
}

.reveal-image img {
	transform: scale(1.08);
	clip-path: inset(0 0 100% 0);
	transition: transform 1.2s var(--ease-out), clip-path 1.2s var(--ease-out);
}

.reveal-image.is-visible img {
	transform: scale(1);
	clip-path: inset(0 0 0 0);
}

.no-js .reveal-image img {
	transform: none;
	clip-path: none;
}

/* --- Scrollgesteuerte Fassung, wo verfügbar ------------------------------ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.reveal:not(.is-visible) {
			animation: reveal-in linear both;
			animation-timeline: view();
			animation-range: entry 12% cover 26%;
		}

		/*
		 * Die Bühnenebenen wandern beim Scrollen langsamer als die Seite.
		 * Der Browser rechnet das ohne Skript und damit ruckelfrei.
		 */
		.hero__media,
		.stats-band__bg {
			animation: layer-drift linear both;
			animation-timeline: view();
			animation-range: cover;
		}
	}
}

@keyframes reveal-in {
	from { opacity: 0; translate: 0 20px; }
	to   { opacity: 1; translate: none; }
}

@keyframes layer-drift {
	from { transform: translate3d(0, -5%, 0) scale(1.05); }
	to   { transform: translate3d(0, 5%, 0) scale(1.05); }
}

/* --- Auftritt der Bühne ---------------------------------------------------

   Beim Laden setzt sich das Bühnenbild aus einer leichten Vergrößerung
   zurecht, während Zeile für Zeile des Textes nachrückt. Das ist der einzige
   Effekt der Website, der von selbst startet – er dauert unter einer Sekunde
   und wiederholt sich nie.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.hero__media img {
		animation: hero-settle 1.6s var(--ease-out) both;
	}

	.hero__body > *,
	.pagehead__inner > * {
		animation: hero-rise .85s var(--ease-out) both;
	}

	.hero__body > :nth-child(1),
	.pagehead__inner > :nth-child(1) { animation-delay: .08s; }

	.hero__body > :nth-child(2),
	.pagehead__inner > :nth-child(2) { animation-delay: .17s; }

	.hero__body > :nth-child(3),
	.pagehead__inner > :nth-child(3) { animation-delay: .26s; }

	.hero__body > :nth-child(n + 4),
	.pagehead__inner > :nth-child(n + 4) { animation-delay: .35s; }

	/* Die Welle kommt zuletzt – sie schließt den Auftritt ab. */
	.hero-wave {
		animation: hero-rise .9s var(--ease-out) .42s both;
	}
}

@keyframes hero-settle {
	from { transform: scale(1.09); opacity: .55; }
	to   { transform: scale(1); opacity: 1; }
}

@keyframes hero-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* --- Räumliche Neigung -----------------------------------------------------

   Nur für Flächen, die wie ein Gegenstand wirken sollen. Die Neigung ist mit
   wenigen Grad bewusst klein gehalten: Sie soll Tiefe andeuten, nicht
   auffallen. --rx/--ry/--mx/--my kommen aus 02-motion.js.
   ------------------------------------------------------------------------ */

[data-tilt] {
	--rx: 0deg;
	--ry: 0deg;
	transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform var(--dur) var(--ease-out);
	will-change: transform;
}

/* Ein weicher Reflex wandert mit dem Zeiger über die Fläche. */
[data-tilt]::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	background: radial-gradient(
		38% 60% at var(--mx, 50%) var(--my, 50%),
		rgba(255, 255, 255, .16),
		transparent 70%
	);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease-out);
}

[data-tilt]:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	[data-tilt] {
		transform: none;
	}
}

/* --- Zähler ---------------------------------------------------------------- */

.counter {
	font-variant-numeric: tabular-nums lining-nums;
}

/* ---- 12-utils.css ---- */
/* =========================================================================
   12 – Hilfsklassen, Druck, Sonderfälle
   ====================================================================== */

/*
 * Nur, was auch benutzt wird: .stack setzt den einheitlichen Abstand
 * zwischen gestapelten Elementen. Die früheren Geschwister .text-center,
 * .mb-0 und .stack-4 standen in keiner einzigen Vorlage – Hilfsklassen auf
 * Vorrat sind der Anfang eines zweiten, konkurrierenden Regelwerks.
 */
.stack { display: grid; gap: var(--space-3); }

/*
 * „Stehenbleiben“ ergibt nur neben einer zweiten Spalte einen Sinn. Sobald
 * die Spalten untereinanderstehen – auf dem Handy –, hat das Element nichts
 * mehr, an dem es entlangwandern könnte: Es klebt am oberen Rand, und das
 * Formular darunter schiebt sich darüber. Genau so überlagerten sich die
 * Abschnitte der Kontaktseite auf schmalen Bildschirmen.
 */
@media (min-width: 900px) {
	.sticky-top {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}
}

/* Verhindert, dass Inhalt hinter dem festen Kopf verschwindet. */
.site-main {
	min-height: 40svh;
}

/*
 * Der erste Abschnitt einer Seite ohne Bühne muss unter der festen Kopfleiste
 * beginnen. Die Blog-Übersicht ist ausgenommen: Ihre Kategorieleiste soll
 * bündig an der Kopfleiste kleben und bringt ihren Abstand selbst mit.
 */
.site-main > .section:first-child:not(.hero):not(.pagehead):not(.section--blog) {
	padding-top: calc(var(--header-height) + var(--space-5));
}

/* --- 404 und Suche --------------------------------------------------------- */

.notfound {
	display: grid;
	place-items: center;
	min-height: 70svh;
	padding-block: calc(var(--header-height) + var(--space-6)) var(--space-6);
	text-align: center;
	color: #fff;
	background: radial-gradient(120% 140% at 12% 0%, var(--clay-deep), var(--clay-dark) 64%);
}

.notfound__code {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(4.5rem, 3rem + 11vw, 11rem);
	font-weight: 700;
	line-height: .85;
	color: rgba(255, 255, 255, .28);
}

/* --- Auslassungen ----------------------------------------------------------- */

[hidden] {
	display: none !important;
}

/* --- Druck ------------------------------------------------------------------ */

@media print {
	.site-header,
	.site-footer,
	.to-top,
	.blog-nav,
	.blog-more,
	.reading-progress,
	.nav-toggle,
	.actions {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.hero,
	.pagehead,
	.on-dark {
		min-height: 0;
		padding-block: 1.5rem;
		background: #fff !important;
		color: #000 !important;
	}

	.hero__media,
	.hero__tint,
	.hero__scrim {
		display: none !important;
	}

	.hero__title,
	.on-dark h1,
	.on-dark h2,
	.on-dark p {
		color: #000 !important;
	}

	.tile,
	.glass-bar {
		background: #fff !important;
		box-shadow: none !important;
		border-color: #ddd !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.accordion__body {
		display: block !important;
	}

	.reveal,
	.reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
	}

	a[href^='http']::after {
		content: ' (' attr(href) ')';
		font-size: 9pt;
		word-break: break-all;
	}

	.section {
		padding-block: 1rem;
		break-inside: avoid;
	}
}

/* --- Hoher Kontrast --------------------------------------------------------- */

@media (prefers-contrast: more) {
	.tile {
		background: #fff;
	}

	.on-dark .tile {
		background: rgba(0, 0, 0, .5);
	}

	.hero__lead,
	.on-dark p {
		color: #fff;
	}
}

/* ---- 13-spenden.css ---- */
/* =========================================================================
   13 – Spendenformular

   Das Formular des Plugins „HOKEKI Spenden“. Es liegt hier und nicht im
   Plugin, weil es die Farbtoken, die Zickzacklinie und die Kachelanmutung des
   Themes braucht. Ein zweites Stylesheet im Plugin müsste die Token
   verdoppeln, würde einen weiteren Request kosten und beim nächsten
   Feinschliff auseinanderlaufen.

   Aufbau: drei Reiter (einmalig, regelmäßig, Patenschaft), eine
   Schrittanzeige, dann je Schritt ein gewöhnliches Formular. Nichts davon
   braucht JavaScript – 08-donate.js macht die Bedienung nur angenehmer.
   ====================================================================== */

.section--donate .wrap--narrow {
	--wrap-narrow: 820px;
}

.donate {
	display: grid;
	gap: var(--space-4);
	padding: clamp(1.4rem, 1rem + 1.8vw, 2.5rem);
	background: var(--paper);
	border: 1px solid var(--edge);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 48px -32px rgba(28, 39, 35, .3);
	scroll-margin-top: 7rem;
}

/* --- Reiter -----------------------------------------------------------
 *
 * Sie sind Verweise, keine Schaltflächen: Ohne JavaScript führt ein Klick auf
 * die Seite mit dem gewählten Reiter, mit JavaScript wird nur umgeschaltet.
 * Ein <button>, der ohne Skript nichts tut, wäre ein Versprechen ohne Deckung.
 */
.donate__tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .5rem;
	padding: .4rem;
	background: var(--paper-2);
	border-radius: var(--radius);
}

/*
 * Auch der nicht gewählte Reiter bekommt eine eigene Fläche. Ohne sie sieht
 * er aus wie Fließtext, und niemand kommt auf die Idee, darauf zu klicken –
 * gemessen an der Aufgabe der Reiter wäre das der teuerste Schönheitsfehler
 * der ganzen Seite.
 */
.donate__tab {
	display: grid;
	gap: .15rem;
	align-content: start;
	padding: .85rem 1rem;
	background: rgba(255, 255, 255, .55);
	border: 1px solid var(--edge);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--ink-2);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.donate__tab:hover {
	background: var(--paper);
	border-color: var(--edge-strong);
	color: var(--ink);
}

.donate__tab.is-current {
	background: var(--accent);
	border-color: transparent;
	color: var(--ink-invert);
	box-shadow: 0 10px 22px -14px var(--accent-deep);
}

.donate__tab-label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--step-0);
}

.donate__tab-note {
	font-size: var(--step--2);
	opacity: .78;
	line-height: 1.35;
}

/* --- Schrittanzeige ---------------------------------------------------- */

.donate__progress {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--step--2);
	color: var(--ink-3);
}

.donate__progress-step {
	display: flex;
	align-items: center;
	gap: .45rem;
}

.donate__progress-number {
	display: grid;
	place-items: center;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 50%;
	border: 1px solid var(--edge-strong);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.donate__progress-step.is-done .donate__progress-number {
	background: var(--accent-wash);
	border-color: transparent;
	color: var(--accent-deep);
}

.donate__progress-step.is-current {
	color: var(--ink);
	font-weight: 600;
}

.donate__progress-step.is-current .donate__progress-number {
	background: var(--accent);
	border-color: transparent;
	color: var(--ink-invert);
}

/* --- Formular ---------------------------------------------------------- */

.donate__form {
	display: grid;
	gap: var(--space-4);
}

.donate__fieldset {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
	/* Ohne das sprengt ein <fieldset> auf schmalen Geräten das Raster. */
	min-inline-size: 0;
}

.donate__legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: .5rem;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
	color: var(--ink);
}

/* --- Betragsraster ------------------------------------------------------
 *
 * Die Auswahl sind echte Radioknöpfe, nur unsichtbar gemacht. Damit bleibt
 * die Tastaturbedienung erhalten: Pfeiltasten wechseln zwischen den Beträgen,
 * so wie es ein Mensch mit Screenreader erwartet.
 */
.donate__amounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .65rem;
}

.donate__amount {
	position: relative;
	display: grid;
	gap: .2rem;
	align-content: start;
	padding: 1rem;
	background: var(--paper-2);
	border: 2px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.donate__amount input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.donate__amount:hover {
	background: var(--paper-3);
}

.donate__amount:has(input:checked) {
	background: var(--accent-wash);
	border-color: var(--accent);
}

.donate__amount:has(input:focus-visible) {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.donate__amount--featured::after {
	content: '★';
	position: absolute;
	top: .55rem;
	right: .7rem;
	color: var(--accent);
	font-size: var(--step--2);
}

.donate__amount-value {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
	color: var(--ink);
}

.donate__amount-label {
	font-weight: 600;
	line-height: 1.25;
	color: var(--accent-deep);
	hyphens: auto;
}

.donate__amount-note,
.donate__amount-includes {
	font-size: var(--step--2);
	color: var(--ink-3);
	line-height: 1.4;
}

.donate__amount--free {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

.donate__free {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-left: auto;
}

.donate__free input {
	position: static;
	width: 7rem;
	opacity: 1;
	height: auto;
	padding: .6rem .8rem;
	background: var(--paper);
	border: 1px solid var(--edge-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	text-align: right;
}

/* --- Rhythmus und Zwecke ------------------------------------------------ */

.donate__intervals {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.donate__chip {
	position: relative;
	padding: .45rem .95rem;
	background: var(--paper-2);
	border-radius: var(--radius-pill);
	font-size: var(--step--1);
	cursor: pointer;
}

.donate__chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.donate__chip:has(input:checked) {
	background: var(--accent);
	color: var(--ink-invert);
}

.donate__chip:has(input:focus-visible) {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.donate__purposes,
.donate__methods {
	display: grid;
	gap: .5rem;
}

.donate__purpose,
.donate__method {
	position: relative;
	display: grid;
	gap: .15rem;
	padding: .9rem 1rem .9rem 2.9rem;
	background: var(--paper-2);
	border: 2px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
}

.donate__purpose input,
.donate__method input {
	position: absolute;
	top: 1.05rem;
	left: 1rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--accent);
}

.donate__purpose:has(input:checked),
.donate__method:has(input:checked) {
	background: var(--accent-wash);
	border-color: var(--accent);
}

.donate__purpose-label,
.donate__method-label {
	font-weight: 600;
	color: var(--ink);
}

.donate__purpose-note,
.donate__method-note {
	font-size: var(--step--2);
	color: var(--ink-3);
	line-height: 1.45;
}

/* --- Zahlwege: Zeile, Zeichen, Hinweis ---------------------------------
 *
 * Der Name steht links, die Zeichen stehen rechts und rücken auf schmalen
 * Geräten darunter. Sie sind bewusst nicht anklickbar: Wer auf ein Zeichen
 * tippt, trifft die Zeile – dafür sorgt das umschließende <label>.
 */
.donate__method-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
}

.donate__method-hint {
	font-size: var(--step--2);
	color: var(--ink-3);
	line-height: 1.45;
}

.donate__marks {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin-left: auto;
	color: var(--ink-2);
}

.donate__mark {
	display: inline-grid;
	place-items: center;
	height: 1.5rem;
	padding: 0 .3rem;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 4px;
	/* Ein Zeichen ist eine Marke, kein Bedienelement. */
	pointer-events: none;
}

.donate__mark svg {
	display: block;
	height: 1.05rem;
	width: auto;
}

.donate__mark--visa svg,
.donate__mark--paypal svg {
	height: .8rem;
}

/*
 * Der ausführliche Hinweis erscheint erst, wenn der Zahlweg gewählt ist. Fünf
 * Absätze gleichzeitig sind keine Hilfe – der eine, der gerade gilt, schon.
 */
.donate__method .donate__method-note {
	display: none;
	margin-top: .35rem;
	padding-top: .55rem;
	border-top: 1px solid var(--edge);
	max-width: 62ch;
}

.donate__method:has(input:checked) .donate__method-note {
	display: block;
}

/* --- Eingabefelder ------------------------------------------------------
 *
 * Ein Raster, zwei Spalten, ein Abstand. Vorher stand hier `auto-fit` mit einer
 * Mindestbreite – das ergab je nach Breite des Fensters mal zwei, mal drei
 * Spalten, und die Felder sprangen beim Verkleinern in eine andere Ordnung.
 * Zwei feste Spalten sind langweiliger und genau deshalb richtig: Jede Zeile
 * sitzt dort, wo man sie erwartet, und jedes Feld ist so hoch wie das daneben.
 */
.donate__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	align-items: start;
}

.donate__field {
	display: grid;
	gap: .35rem;
	margin: 0;
	/* Damit die Beschriftungen einer Zeile auf einer Linie liegen, auch wenn
	   eine davon zweizeilig umbricht. */
	align-content: start;
}

.donate__field--wide {
	grid-column: 1 / -1;
}

.donate__field label {
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--ink-2);
}

.donate__field input,
.donate__field select {
	width: 100%;
	/* Eine Zeile Text plus Innenabstand – dieselbe Höhe für Eingabe- und
	   Auswahlfelder, unabhängig davon, was der Browser von Haus aus tut. */
	min-height: 3rem;
	padding: .75rem .9rem;
	background: var(--paper);
	border: 1px solid var(--edge-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	line-height: 1.4;
	color: var(--ink);
}

.donate__field input:focus,
.donate__field select:focus {
	outline: 3px solid var(--accent);
	outline-offset: 1px;
	border-color: transparent;
}

.donate__field input[aria-invalid='true'],
.donate__field select[aria-invalid='true'] {
	border-color: var(--clay);
	background: var(--clay-mist);
}

/* --- Auswahlfelder ------------------------------------------------------
 *
 * Ein <select> sieht in jedem Browser anders aus und in keinem wie die Felder
 * daneben. Deshalb bekommt es dieselbe Fläche wie ein Eingabefeld, und das
 * Dreieck zeichnet die Hülle – als Hintergrundbild und nicht als weiteres
 * Element, damit der Klick weiterhin überall das Feld öffnet.
 */
.donate__select {
	position: relative;
	display: block;
}

.donate__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.6rem;
	cursor: pointer;
}

.donate__select::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1rem;
	width: .55rem;
	height: .55rem;
	border-right: 2px solid var(--ink-3);
	border-bottom: 2px solid var(--ink-3);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.donate__required {
	color: var(--clay);
	font-weight: 700;
}

.donate__hint {
	margin: 0;
	font-size: var(--step--2);
	color: var(--ink-3);
	line-height: 1.5;
}

.donate__error {
	margin: 0;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--clay-deep);
}

.donate__check {
	display: grid;
	gap: .3rem;
	margin: 0;
}

.donate__check label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	align-items: start;
	font-size: var(--step--1);
	line-height: 1.5;
	cursor: pointer;
}

.donate__check input {
	width: 1.2rem;
	height: 1.2rem;
	margin-top: .1rem;
	accent-color: var(--accent);
}

.donate__consents {
	display: grid;
	gap: .9rem;
	padding: 1.1rem 1.2rem;
	background: var(--paper-2);
	border-radius: var(--radius);
}

/* --- Der Umschalter „verschenken“ ---------------------------------------
 *
 * Ein Kontrollkästchen, das aussieht wie eine Schaltfläche: Es soll auffallen
 * wie ein Angebot und sich verhalten wie ein Kästchen. Ohne JavaScript
 * funktioniert es vollständig – das Aufklappen erledigt :has().
 */
.donate__toggle {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: .9rem;
	padding: .9rem 1.1rem;
	background: var(--paper-2);
	border: 2px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.donate__toggle:hover {
	background: var(--paper-3);
}

.donate__toggle input {
	width: 1.2rem;
	height: 1.2rem;
	accent-color: var(--accent);
}

.donate__toggle-mark {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--accent-wash);
	color: var(--accent-deep);
}

.donate__toggle-mark svg {
	width: 1.35rem;
	height: 1.35rem;
}

.donate__toggle-text {
	display: grid;
	gap: .1rem;
}

.donate__toggle-label {
	font-weight: 600;
	color: var(--ink);
}

.donate__toggle-note {
	font-size: var(--step--2);
	color: var(--ink-3);
	line-height: 1.45;
}

.donate__toggle:has(input:checked) {
	background: var(--accent-wash);
	border-color: var(--accent);
}

.donate__toggle:has(input:focus-visible) {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/*
 * Die Felder erscheinen erst mit dem Umschalter. Ohne :has() stehen sie immer
 * da – lästig, aber bedienbar; ausgewertet werden sie ohnehin nur, wenn das
 * Kästchen steht.
 */
.donate__gift:has(.donate__toggle input:not(:checked)) .donate__gift-panel {
	display: none;
}

/* Der Honigtopf. Für Menschen unsichtbar, für Programme verlockend. */
.donate__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Mandatstext --------------------------------------------------------- */

.donate__bank {
	padding: 1.2rem;
	background: var(--ocean-wash);
	border-radius: var(--radius);
}

.donate__mandate {
	padding: 1rem 1.15rem;
	background: var(--paper);
	border-radius: var(--radius-sm);
	font-size: var(--step--1);
	line-height: 1.6;
	color: var(--ink-2);
}

.donate__mandate-title {
	margin: 0 0 .5rem;
	font-family: var(--font-display);
	font-size: var(--step-0);
	color: var(--ink);
}

.donate__mandate p {
	margin: 0 0 .7rem;
}

.donate__mandate p:last-child {
	margin-bottom: 0;
}

/* --- Zusammenfassung ------------------------------------------------------ */

.donate__summary {
	display: grid;
	gap: 0;
	margin: 0;
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	overflow: hidden;
}

.donate__summary-row {
	display: grid;
	grid-template-columns: minmax(9rem, 12rem) 1fr;
	gap: 1rem;
	padding: .8rem 1.1rem;
	border-bottom: 1px solid var(--edge);
}

.donate__summary-row:last-child {
	border-bottom: 0;
}

.donate__summary-row dt {
	font-size: var(--step--1);
	color: var(--ink-3);
}

.donate__summary-row dd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	margin: 0;
	font-weight: 600;
}

.donate__summary-value {
	overflow-wrap: anywhere;
}

/* --- Korrigieren, ohne den Platz zu verlieren ---------------------------
 *
 * Ein <details> statt eines Verweises zurück. Der Wert bleibt sichtbar, das
 * Feld klappt darunter auf, und beim Absenden reist der geänderte Wert mit –
 * auch dann, wenn der Bereich wieder zugeklappt ist. Das ist keine Nachlässig-
 * keit, sondern der Grund für die Bauart: Ein zugeklapptes <details> versteckt
 * seinen Inhalt, nimmt ihn aber nicht aus dem Formular.
 */
.donate__fix {
	flex: 1 0 100%;
}

.donate__fix > summary {
	display: inline-block;
	margin: 0;
	padding: .1rem .55rem;
	background: var(--paper-2);
	border-radius: var(--radius-pill);
	font-size: var(--step--2);
	font-weight: 400;
	color: var(--accent-deep);
	cursor: pointer;
	list-style: none;
}

.donate__fix > summary::-webkit-details-marker {
	display: none;
}

.donate__fix > summary::after {
	content: ' ▾';
	font-size: .8em;
}

.donate__fix[open] > summary::after {
	content: ' ▴';
}

.donate__fix > summary:hover {
	background: var(--accent-wash);
}

.donate__fix > summary:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.donate__fix-panel {
	margin-top: .7rem;
	padding: .9rem 1rem;
	background: var(--paper-2);
	border-radius: var(--radius-sm);
	font-weight: 400;
}

.donate__summary-line {
	margin: 0;
	padding: .75rem 1rem;
	background: var(--paper-2);
	border-radius: var(--radius-sm);
	font-size: var(--step--1);
}

.donate__back {
	margin-left: .5rem;
	font-size: var(--step--2);
	font-weight: 400;
	color: var(--accent-deep);
}

/* --- Meldungen und Aktionen ------------------------------------------------ */

.donate__notice {
	margin: 0;
	padding: .9rem 1.1rem;
	background: var(--olive-wash);
	border-left: 4px solid var(--olive);
	border-radius: var(--radius-sm);
	font-size: var(--step--1);
	line-height: 1.55;
}

.donate__notice--error {
	background: var(--clay-wash);
	border-left-color: var(--clay);
}

/*
 * Der Hinweis im Demobetrieb. Blau, nicht rot: Es ist kein Fehler, und rot
 * ist auf dieser Seite die Farbe des Spendenknopfes. Er steht über allem
 * anderen und ist die einzige Stelle, an der ein Verweis aus dem Formular
 * herausführt – der auf die Beispieldaten.
 */
.donate__notice--demo {
	background: var(--ocean-wash);
	border-left-color: var(--ocean);
}

.donate__notice--demo .donate__back {
	margin-left: .35rem;
}

.donate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
}

.donate__actions .btn--lg {
	padding: 1rem 1.9rem;
	font-size: var(--step-0);
}

.donate__bank-list {
	display: grid;
	gap: .6rem;
	margin: 0;
}

.donate__bank-list > div {
	display: grid;
	grid-template-columns: minmax(7rem, 9rem) 1fr;
	gap: .75rem;
}

.donate__bank-list dt {
	font-size: var(--step--1);
	color: var(--ink-3);
}

.donate__bank-list dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* --- Danke-Seite und Selbstbedienung ---------------------------------------- */

.donate--thanks .donate__summary,
.donate--manage .donate__summary {
	margin-bottom: var(--space-3);
}

.donate--thanks .donate__mark {
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: var(--olive-wash);
	color: var(--olive-deep);
	font-size: var(--step-2);
}

/*
 * Auf schmalen Geräten bekommen die Reiter Platz untereinander: Drei
 * Beschriftungen nebeneinander wären bei 360 px unlesbar.
 */
@media (max-width: 560px) {
	.donate {
		padding: 1.1rem;
	}

	.donate__tabs {
		grid-template-columns: 1fr;
	}

	/* Zwei Spalten sind bei 360 px keine Ordnung mehr, sondern zwei halbe
	   Felder. Untereinander bleibt der Abstand derselbe. */
	.donate__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.donate__summary-row {
		grid-template-columns: 1fr;
		gap: .15rem;
	}

	.donate__amount--free {
		flex-direction: column;
		align-items: stretch;
	}

	.donate__free {
		margin-left: 0;
	}

	.donate__marks {
		margin-left: 0;
	}

	.donate__toggle {
		grid-template-columns: auto 1fr;
	}

	.donate__toggle-mark {
		display: none;
	}
}

/*
 * :has() versteht nicht jeder Browser. Wo es fehlt, greift der Rückfall über
 * :focus-within – die Auswahl bleibt dann weniger deutlich, aber das Formular
 * ist vollständig bedienbar. Sichtbarkeit der Auswahl ist erwünscht,
 * Bedienbarkeit ist Pflicht.
 */
@supports not selector(:has(*)) {
	.donate__amount:focus-within,
	.donate__purpose:focus-within,
	.donate__method:focus-within,
	.donate__toggle:focus-within {
		border-color: var(--accent);
		background: var(--accent-wash);
	}

	/*
	 * Ohne :has() lässt sich weder der Hinweis des gewählten Zahlwegs
	 * hervorholen noch der Geschenkbereich verbergen. Dann steht beides da.
	 * Länger, aber vollständig – und niemand sucht vergeblich nach einem Feld.
	 */
	.donate__method .donate__method-note {
		display: block;
	}
}