/* =============================================================================
 * 00-design-tokens.css  -  Fundament
 * -----------------------------------------------------------------------------
 * Freiwillige Feuerwehr Unterensingen
 *
 * Hier stehen Farbe, Schrift, Raster, Form, Licht und Bewegung EINMAL.
 * Jede andere Datei greift nur noch ueber var(--name) darauf zu.
 *
 * Reihenfolge im Seitenlayout:
 *     1. 00-design-tokens.css   <- diese Datei, immer zuerst
 *     2. 01-grundlagen.css
 *     3. global.css, news.css, ... alles Weitere
 *
 * -----------------------------------------------------------------------------
 * DIE VIER ENTSCHEIDUNGEN
 *
 * 1. Warmer Grundton statt kaltem Blaugrau. Ein Papierton mit einem
 *    Hauch Waerme traegt Rot besser als ein blaustichiges Grau, in dem
 *    Rot immer leicht violett kippt. Im Dunkelmodus dieselbe Familie:
 *    ein warmes Fast-Schwarz, kein Marineblau.
 *
 * 2. Eine Leiter aus sechs Flaechentoenen statt zwei. Tiefe entsteht
 *    dadurch, dass Flaechen uebereinander liegen und von oben Licht
 *    bekommen - nicht dadurch, dass ueberall ein Rahmen ist. Deshalb
 *    gibt es hier Verlaeufe und eine helle Oberkante als eigene Tokens.
 *
 * 3. Rot bleibt die einzige Signalfarbe. Dazu kommt EIN zweiter Ton,
 *    und zwar kein erfundener: das Gelbgruen der Leuchtstreifen auf
 *    euren Fahrzeugen. Es markiert Jugend, Spielmannszug und Termine -
 *    also alles, was nicht Einsatz ist. Nie als Knopf, nie als Flaeche,
 *    nur als Strich oder Beschriftung.
 *
 * 4. Weichere Kanten als bisher: Flaechen 16px, Bedienelemente 10px,
 *    Kleinteile 8px. Vollrund bleibt den Chips vorbehalten, die man
 *    an- und abwaehlt.
 *
 * Hell und dunkel sind beide eigens gesetzt und folgen der
 * Geraeteeinstellung.
 * =========================================================================== */


/* =============================================================================
 * Schrift
 * -----------------------------------------------------------------------------
 * Geist fuer Text, Geist Mono fuer Zahlen. Die Mono-Schrift ist keine
 * Dekoration: Einsatznummern, Datum, Uhrzeit und technische Daten
 * stehen damit in gleicher Breite untereinander.
 *
 * Selbst ausgeliefert, nicht ueber Google Fonts: dabei ginge die
 * IP-Adresse jedes Besuchers an Google. Lizenz: SIL Open Font License.
 * Pfade sind relativ zu files/styles/.
 * =========================================================================== */
@font-face {
	font-family: "Geist";
	src: url("../../files/fonts/Geist-Variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("../../files/fonts/GeistMono-Variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


:root {
	color-scheme: light dark;

	/* ========================================================== SCHRIFT */
	--font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--text-2xs:  .72rem;
	--text-xs:   .8125rem;
	--text-sm:   .9375rem;
	--text-base: 1.0625rem;
	--text-lg:   clamp(1.15rem, 1.08rem + .3vw,  1.3rem);
	--text-xl:   clamp(1.4rem,  1.22rem + .75vw, 1.8rem);
	--text-2xl:  clamp(1.8rem,  1.5rem  + 1.3vw, 2.5rem);
	--text-3xl:  clamp(2.3rem,  1.7rem  + 2.6vw, 3.6rem);
	--text-4xl:  clamp(2.9rem,  1.9rem  + 4vw,   5rem);

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-strong: 600;

	--track-display: -.035em;
	--track-tight:   -.018em;
	--track-normal:  0;
	--track-label:   .1em;

	--leading-display: 1.02;
	--leading-tight:   1.18;
	--leading-snug:    1.42;
	--leading-base:    1.65;

	--measure: 64ch;

	/* ======================================================== ABSTAENDE */
	--s-1: .25rem;
	--s-2: .5rem;
	--s-3: .75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 5rem;
	--s-9: 8rem;

	/* Mehr Luft zwischen den Abschnitten als zuvor. "Cleaner" ist zu
	   neun Zehnteln eine Frage des Abstands, nicht der Farbe. */
	--abschnitt: clamp(4rem, 2rem + 7vw, 8.5rem);

	/* ========================================================== RASTER */
	/* Breit. Die Seite nutzt das Fenster aus, statt eine Spalte in die
	   Mitte zu stellen. Lesbar bleibt der Fliesstext trotzdem: dafuer
	   sorgt --measure, das die Zeilenlaenge begrenzt, nicht der
	   Container. --breite-eng ist fuer Seiten gedacht, die wirklich nur
	   Text zeigen. */
	--breite:      2160px;
	--breite-eng:  760px;
	--rand:        clamp(1.25rem, .75rem + 2.5vw, 4rem);

	/* =========================================================== FORM */
	--r-flaeche: 16px;
	--r-element: 10px;
	--r-klein:    8px;
	--r-chip:    999px;

	/* ========================================================== FARBE */
	/* HELL. Ein Papierton mit einem Hauch Waerme, sechs Stufen.
	   Die Stufen lagen zuvor zu eng beieinander (Karte zu Grund 1,06:1),
	   dadurch sah alles gleich weiss aus und man erkannte keine Flaeche.
	   Jetzt ist der Seitengrund deutlich gedunkelt, die Karte liegt
	   sichtbar darueber (1,18:1) - genug, um Flaechen zu unterscheiden,
	   wenig genug, um nicht grau zu wirken. */
	--ton-0:  #ffffff;      /* hoechste Flaeche, Karte auf Karte */
	--ton-1:  #fcfbf9;      /* Karte */
	--ton-2:  #ebe8e2;      /* Seitengrund */
	--ton-3:  #e1ddd5;      /* abgesetzte Flaeche, Bildgrund */
	--ton-4:  #d4cfc5;      /* Linie, sichtbar */
	--ton-5:  #bfb9ac;      /* Linie, kraeftig */

	--bg:         var(--ton-2);
	--surface:    var(--ton-1);
	--surface-2:  var(--ton-3);
	--surface-hoch: var(--ton-0);
	--media-bg:   var(--ton-3);

	--text:        #3b3833;
	--text-strong: #15130f;
	--text-muted:  #6b665e;   /* 5.5:1 auf der Karte, 4.7:1 auf dem Grund */

	--line:      var(--ton-4);
	--line-soft: #dedad2;

	/* Die Marke. Drei Rollen, damit der Kontrast in beiden Modi stimmt. */
	--brand:        #d2232a;
	--brand-ink:    #ffffff;
	--brand-text:   #a8131a;
	--brand-strong: #a3131a;
	--brand-soft:   rgba(210, 35, 42, .08);
	--brand-line:   rgba(210, 35, 42, .26);

	/* Der zweite Ton: das Gelbgruen der Leuchtstreifen. Sparsam, nie
	   als Flaeche. Auf Weiss gedunkelt, damit Schrift darin lesbar ist. */
	--signal:      #6f7d10;
	--signal-text: #5a6609;
	--signal-soft: rgba(111, 125, 16, .10);
	--signal-line: rgba(111, 125, 16, .3);

	--link:       var(--brand-text);
	--link-hover: var(--brand-strong);

	--overlay: rgba(20, 17, 13, .6);

	/* ============================================================ LICHT */
	/* Hier entsteht der Glanz. Drei Mittel, immer zusammen benutzt:
	     --glanz       ein feiner Verlauf ueber der Flaeche
	     --kante-hell  eine helle Linie an der Oberkante
	     --shadow-*    ein weicher, in der Grundfarbe getoenter Schatten
	   Eine Lichtquelle, von oben. Alles andere waere ein Durcheinander
	   aus Reflexen, und genau daran erkennt man schlecht gemachte
	   "Glas"-Flaechen. */
	--glanz: linear-gradient(180deg,
	         rgba(255, 255, 255, .95) 0%,
	         rgba(255, 255, 255, 0) 55%);
	--kante-hell: inset 0 1px 0 rgba(255, 255, 255, .9);

	--shadow-1: 0 1px 2px rgba(42, 36, 28, .05);
	--shadow-2: 0 1px 2px rgba(42, 36, 28, .05),
	            0 10px 28px rgba(42, 36, 28, .07);
	--shadow-3: 0 2px 6px rgba(42, 36, 28, .06),
	            0 28px 60px rgba(42, 36, 28, .12);

	/* Hauch von Rot hinter grossen Bildflaechen */
	--ambient: radial-gradient(60% 80% at 50% 0%,
	           rgba(210, 35, 42, .07) 0%,
	           transparent 70%);

	/* ======================================================== BEWEGUNG */
	--ease:     cubic-bezier(.22, .61, .36, 1);
	--ease-aus: cubic-bezier(.4, 0, .2, 1);
	--t-schnell: 120ms;
	--t-normal:  220ms;
	--t-ruhig:   460ms;

	/* ========================================================= EBENEN */
	--z-grund:   1;
	--z-erhoben: 10;
	--z-kopf:    100;
	--z-menue:   200;
	--z-dialog:  300;
}


/* =============================================================================
 * DUNKEL
 * -----------------------------------------------------------------------------
 * Dieselbe Familie, nur umgedreht: ein warmes Fast-Schwarz statt eines
 * blaustichigen. Flaechen werden nach oben hin heller; auf dunklem Grund
 * traegt Helligkeit die Rangfolge, nicht der Schatten. Der Glanz sitzt
 * hier als feine helle Oberkante auf jeder Flaeche.
 * =========================================================================== */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ton-0:  #22201c;
		--ton-1:  #1a1816;
		--ton-2:  #0e0d0c;
		--ton-3:  #141311;
		--ton-4:  #2e2b27;
		--ton-5:  #3b3733;

		--bg:          var(--ton-2);
		--surface:     var(--ton-1);
		--surface-2:   var(--ton-3);
		--surface-hoch: var(--ton-0);
		--media-bg:    #1c1a17;

		--text:        #cfc9c0;
		--text-strong: #faf8f5;
		--text-muted:  #8d867c;

		--line:      var(--ton-4);
		--line-soft: #201e1b;

		--brand:        #e02a31;
		--brand-ink:    #ffffff;
		--brand-text:   #ff7a7e;
		--brand-strong: #f0454b;
		--brand-soft:   rgba(224, 42, 49, .14);
		--brand-line:   rgba(255, 122, 126, .28);

		--signal:      #b9cc3c;
		--signal-text: #c6d95a;
		--signal-soft: rgba(185, 204, 60, .12);
		--signal-line: rgba(185, 204, 60, .3);

		--overlay: rgba(6, 5, 4, .72);

		--glanz: linear-gradient(180deg,
		         rgba(255, 255, 255, .055) 0%,
		         rgba(255, 255, 255, 0) 55%);
		--kante-hell: inset 0 1px 0 rgba(255, 255, 255, .07);

		--shadow-1: 0 1px 2px rgba(0, 0, 0, .55);
		--shadow-2: 0 1px 2px rgba(0, 0, 0, .55),
		            0 12px 32px rgba(0, 0, 0, .5);
		--shadow-3: 0 2px 6px rgba(0, 0, 0, .55),
		            0 32px 70px rgba(0, 0, 0, .6);

		--ambient: radial-gradient(60% 80% at 50% 0%,
		           rgba(224, 42, 49, .12) 0%,
		           transparent 70%);
	}
}

/* Dasselbe fuer den Umschalter von Hand */
[data-theme="dark"] {
	--ton-0:  #22201c;
	--ton-1:  #1a1816;
	--ton-2:  #0e0d0c;
	--ton-3:  #141311;
	--ton-4:  #2e2b27;
	--ton-5:  #3b3733;

	--bg:          var(--ton-2);
	--surface:     var(--ton-1);
	--surface-2:   var(--ton-3);
	--surface-hoch: var(--ton-0);
	--media-bg:    #1c1a17;

	--text:        #cfc9c0;
	--text-strong: #faf8f5;
	--text-muted:  #8d867c;

	--line:      var(--ton-4);
	--line-soft: #201e1b;

	--brand:        #e02a31;
	--brand-ink:    #ffffff;
	--brand-text:   #ff7a7e;
	--brand-strong: #f0454b;
	--brand-soft:   rgba(224, 42, 49, .14);
	--brand-line:   rgba(255, 122, 126, .28);

	--signal:      #b9cc3c;
	--signal-text: #c6d95a;
	--signal-soft: rgba(185, 204, 60, .12);
	--signal-line: rgba(185, 204, 60, .3);

	--overlay: rgba(6, 5, 4, .72);

	--glanz: linear-gradient(180deg,
	         rgba(255, 255, 255, .055) 0%,
	         rgba(255, 255, 255, 0) 55%);
	--kante-hell: inset 0 1px 0 rgba(255, 255, 255, .07);

	--shadow-1: 0 1px 2px rgba(0, 0, 0, .55);
	--shadow-2: 0 1px 2px rgba(0, 0, 0, .55),
	            0 12px 32px rgba(0, 0, 0, .5);
	--shadow-3: 0 2px 6px rgba(0, 0, 0, .55),
	            0 32px 70px rgba(0, 0, 0, .6);

	--ambient: radial-gradient(60% 80% at 50% 0%,
	           rgba(224, 42, 49, .12) 0%,
	           transparent 70%);
}


/* =============================================================================
 * Namen aus den bisherigen Dateien
 * -----------------------------------------------------------------------------
 * Sie stehen noch in Dateien und Vorlagen, die hier nicht angefasst
 * werden, und zeigen auf die neuen Werte. Neue Regeln benutzen sie nicht.
 * =========================================================================== */
:root {
	--radius-sm:   var(--r-klein);
	--radius:      var(--r-flaeche);
	--radius-lg:   var(--r-flaeche);
	--radius-xs:   var(--r-klein);
	--radius-pill: var(--r-chip);

	--shadow-sm: var(--shadow-1);
	--shadow-md: var(--shadow-2);
	--shadow-lg: var(--shadow-3);
	--shadow-color: rgba(42, 36, 28, .18);

	--accent:       var(--brand);
	--accent-ink:   var(--brand-ink);
	--accent-line:  var(--brand-line);
	--brand-dark:   var(--brand-strong);
	--text-on-dark: #faf8f5;
	--bg-elevated-soft: var(--surface-2);
	--bg-gradient:  var(--bg);
	--overlay-strong: var(--overlay);
	--ok:           var(--signal-text);

	--header-bg:   color-mix(in srgb, var(--bg) 78%, transparent);
	--header-ink:  var(--text-strong);
	--header-line: var(--line);
	--nav-pill-bg:   transparent;
	--nav-pill-ink:  var(--text);
	--nav-pill-line: transparent;
	--menu-bg:        var(--bg);
	--menu-item-bg:   var(--surface);
	--menu-item-ink:  var(--text-strong);
	--menu-item-line: var(--line);

	--space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3);
	--space-4: var(--s-4); --space-5: var(--s-5); --space-6: var(--s-6);
	--space-7: var(--s-7); --space-8: var(--s-8); --space-9: var(--s-9);
	--container: var(--breite);
	--track-wide:  .04em;
	--dur-fast: var(--t-schnell);
	--dur-base: var(--t-normal);
}

/* =============================================================================
 * 01-grundlagen.css  -  Grundformen der Seite
 * -----------------------------------------------------------------------------
 * Was auf jeder Seite gleich ist: Typografie, Raster, Linien, Knoepfe,
 * Beschriftungen, Bilder, Fokus, Bewegung.
 *
 * Laedt NACH 00-design-tokens.css und VOR allen Seitendateien.
 *
 * Hier stehen keine festen Farben und keine festen Groessen. Alles
 * kommt aus den Tokens. Wer eine Entscheidung aendern will, aendert sie
 * dort, nicht hier.
 * =========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	background-image: var(--ambient);
	background-repeat: no-repeat;
	background-size: 100% clamp(400px, 60vh, 900px);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	line-height: var(--leading-base);

	/* Ohne Randglaettung wirkt Geist auf dunklem Grund zu fett */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* =============================================================================
 * Typografie
 * -----------------------------------------------------------------------------
 * Rangfolge entsteht aus Groesse UND Farbe, nicht aus Fettdruck allein.
 * Ueberschriften stehen in der kraeftigen Textfarbe, Nebensaechliches
 * in der gedaempften. Deshalb genuegt ueberall Halbfett statt Fett.
 * =========================================================================== */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--s-4);
	color: var(--text-strong);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	text-wrap: balance;        /* kein einzelnes Wort in der letzten Zeile */
}

h1 {
	font-size: var(--text-3xl);
	line-height: var(--leading-display);
	letter-spacing: var(--track-display);
}
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-base); }

p {
	margin: 0 0 var(--s-4);
	text-wrap: pretty;
}

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

/* Fliesstext bleibt lesbar breit, auch wenn der Container breiter ist */
.fliesstext,
.fliesstext p {
	max-width: var(--measure);
}

strong, b { font-weight: var(--weight-strong); color: var(--text-strong); }

small { font-size: var(--text-xs); }

hr {
	height: 1px;
	margin: var(--s-6) 0;
	border: 0;
	background: var(--line);
}

/* ---------------------------------------------------------------- Zahlen */
/* Datum, Uhrzeit, Einsatznummer, technische Werte: gleiche Breite, damit
   sie in Listen untereinander stehen, und Mono, damit man sie als
   Messwerte liest statt als Fliesstext. */
time,
.zahl,
.einsatz-nr,
.mono {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
}

/* ----------------------------------------------------------- Beschriftung */
/* Die EINE Beschriftungsform der Seite. Vorher gab es sechs Varianten
   zwischen .65rem/.08em und 1.2rem/.18em. Versalien sind hier erlaubt,
   weil es wirklich Wegweiser sind und keine Ueberschriften. */
.label,
.beschriftung {
	display: block;
	margin: 0 0 var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}


/* =============================================================================
 * Links
 * -----------------------------------------------------------------------------
 * Im Fliesstext unterstrichen, weil Farbe allein kein verlaessliches
 * Merkmal ist - etwa fuer Menschen mit Rotsehschwaeche. In Listen,
 * Karten und Navigation traegt die Umgebung die Bedeutung, dort ohne
 * Unterstrich.
 * =========================================================================== */
a {
	color: var(--link);
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: color var(--t-schnell) var(--ease);
}

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


/* =============================================================================
 * Raster
 * =========================================================================== */
.inhalt,
.container {
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding-inline: var(--rand);
}

.inhalt--eng { max-width: var(--breite-eng); }

.abschnitt { padding-block: var(--abschnitt); }

/* Abschnitte werden durch Luft getrennt, nicht durch Kaesten. Wo eine
   Trennung noetig ist, genuegt eine Haarlinie. */
.abschnitt + .abschnitt { border-top: 1px solid var(--line-soft); }


/* =============================================================================
 * Abschnittskopf
 * -----------------------------------------------------------------------------
 * Ueberschrift und, wenn noetig, ein Satz darunter. Untereinander, nicht
 * nebeneinander: ein kleiner Absatz, der rechts oben in der Ecke
 * schwebt, ist das sicherste Zeichen fuer eine Seite, die aus Bausteinen
 * zusammengesetzt und nicht gestaltet wurde.
 * =========================================================================== */
.kopf {
	margin-bottom: var(--s-7);
}

.kopf__titel {
	margin: 0;
	font-size: var(--text-2xl);
}

.kopf__text {
	max-width: var(--measure);
	margin: var(--s-3) 0 0;
	color: var(--text-muted);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}


/* =============================================================================
 * Knoepfe
 * -----------------------------------------------------------------------------
 * Zwei Formen, mehr nicht: gefuellt fuer die eine Hauptsache, Umriss
 * fuer alles andere. Beide in derselben Hoehe, damit sie nebeneinander
 * eine Linie bilden.
 *
 * Jeder Knopf hat vier Zustaende: Ruhe, Zeiger darueber, gedrueckt,
 * Tastaturfokus. Der gedrueckte Zustand fehlt auf den meisten Seiten -
 * dann fuehlt sich ein Klick an, als waere nichts passiert.
 * =========================================================================== */
.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);

	min-height: 2.75rem;
	padding: 0 var(--s-5);

	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: 1;
	white-space: nowrap;         /* Knopfbeschriftung bricht nie um */
	text-decoration: none;

	border: 1px solid transparent;
	border-radius: var(--r-element);
	cursor: pointer;

	transition: background-color var(--t-schnell) var(--ease),
	            border-color var(--t-schnell) var(--ease),
	            color var(--t-schnell) var(--ease),
	            transform var(--t-schnell) var(--ease);
}

.knopf--haupt {
	background-color: var(--brand);
	background-image: linear-gradient(180deg,
	                  rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
	border-color: var(--brand);
	color: var(--brand-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
	            0 1px 2px rgba(42, 36, 28, .18);
}

.knopf--haupt:hover {
	background: var(--brand-strong);
	border-color: var(--brand-strong);
	color: var(--brand-ink);
}

.knopf--rand {
	background-color: var(--surface);
	background-image: var(--glanz);
	border-color: var(--line);
	color: var(--text-strong);
	box-shadow: var(--kante-hell), var(--shadow-1);
}

.knopf--rand:hover {
	border-color: var(--text-muted);
	color: var(--text-strong);
}

/* Gedrueckt: der Knopf gibt unter dem Finger nach */
.knopf:active {
	transform: translateY(1px);
	transition-duration: 60ms;
}


/* =============================================================================
 * Chips
 * -----------------------------------------------------------------------------
 * Das einzige Vollrund der Seite. Ein Chip ist etwas, das man an- und
 * abwaehlt - die runde Form sagt genau das.
 * =========================================================================== */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);

	padding: .4rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--r-chip);
	background: transparent;

	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--text);
	cursor: pointer;
	white-space: nowrap;

	transition: background-color var(--t-schnell) var(--ease),
	            border-color var(--t-schnell) var(--ease),
	            color var(--t-schnell) var(--ease);
}

.chip:hover { border-color: var(--text-muted); }

.chip[aria-pressed="true"],
.chip.is-aktiv {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.chip__zahl {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	opacity: .65;
}


/* =============================================================================
 * Flaechen
 * -----------------------------------------------------------------------------
 * Eine Karte bekommt nur, was durch Erhebung wirklich eine Stufe hoeher
 * steht. Alles andere wird durch Abstand und Haarlinien gruppiert. Das
 * ist der Unterschied zwischen einer gestalteten Seite und einer Seite
 * voller Kaesten.
 * =========================================================================== */
/* Eine Flaeche ist nicht einfach ein Kasten mit Rahmen. Sie bekommt
   Licht von oben: ein feiner Verlauf ueber der Flaeche, eine helle
   Linie an der Oberkante, darunter ein weicher Schatten in der
   Grundfarbe. Drei Mittel, immer zusammen - davon lebt der Eindruck
   von Tiefe, nicht vom Rahmen. */
.flaeche {
	background-color: var(--surface);
	background-image: var(--glanz);
	border: 1px solid var(--line);
	border-radius: var(--r-flaeche);
	box-shadow: var(--kante-hell), var(--shadow-1);
}

.flaeche--hoch {
	background-color: var(--surface-hoch);
	box-shadow: var(--kante-hell), var(--shadow-2);
}

.flaeche--ruhig {
	background-color: var(--surface-2);
	background-image: none;
	border-color: transparent;
	box-shadow: none;
}


/* =============================================================================
 * Bilder
 * =========================================================================== */
img, picture, video, svg {
	max-width: 100%;
	height: auto;
}

figure { margin: 0; }

/* Ein Bild sitzt in einer Flaeche mit fester Form, damit die Seite beim
   Laden nicht springt. Der Grund ist sichtbar, solange das Bild fehlt. */
.bildflaeche {
	position: relative;
	overflow: hidden;
	background: var(--media-bg);
	border-radius: var(--r-flaeche);
	box-shadow: var(--kante-hell);
}

.bildflaeche > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* =============================================================================
 * Fokus
 * -----------------------------------------------------------------------------
 * Sichtbar fuer alle, die mit der Tastatur navigieren. Das ist eine
 * Pflicht, keine Geschmacksfrage. :focus-visible statt :focus, damit
 * der Rahmen nicht bei jedem Mausklick aufblitzt.
 * =========================================================================== */
:focus-visible {
	outline: 2px solid var(--brand-text);
	outline-offset: 2px;
	border-radius: var(--r-klein);
}

/* Sprungmarke fuer Tastaturnutzer: unsichtbar, bis sie den Fokus hat */
.sprungmarke {
	position: absolute;
	left: var(--s-4);
	top: var(--s-4);
	z-index: var(--z-dialog);
	padding: var(--s-3) var(--s-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-element);
	color: var(--text-strong);
	text-decoration: none;
	transform: translateY(-200%);
}

.sprungmarke:focus { transform: none; }


/* =============================================================================
 * Bewegung
 * -----------------------------------------------------------------------------
 * Ein einziges Muster: Inhalt faehrt beim ersten Erscheinen leise ein.
 * Das zeigt Rangfolge beim Lesen und sonst nichts. Es laeuft ueber
 * scroll-driven animations, also ohne JavaScript; Browser, die das nicht
 * koennen, zeigen den Inhalt einfach sofort.
 * =========================================================================== */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.einfahrt {
			animation: einfahrt linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}
}

@keyframes einfahrt {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@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;
	}
}


/* =============================================================================
 * Der zweite Ton
 * -----------------------------------------------------------------------------
 * Das Gelbgruen der Leuchtstreifen eurer Fahrzeuge. Es markiert, was
 * nicht Einsatz ist: Jugendfeuerwehr, Spielmannszug, Termine. Nie als
 * Flaeche, nie als Knopf - nur als Strich oder Beschriftung. Wer es
 * grossflaechig einsetzt, nimmt dem Rot seine Bedeutung.
 * =========================================================================== */
.ton-signal { color: var(--signal-text); }

.strich-signal { border-left: 2px solid var(--signal); }

.marke-signal {
	display: inline-flex;
	align-items: center;
	padding: .1rem .5rem;
	border: 1px solid var(--signal-line);
	border-radius: var(--r-klein);
	background: var(--signal-soft);

	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: .03em;
	color: var(--signal-text);
}

/* =============================================================================
 * global.css  -  Startseite und Seitengeruest
 * -----------------------------------------------------------------------------
 * Kopfzeile und Fusszeile stehen nicht mehr hier, sondern in
 * kopf-fuss.css. Reset und Grundformen stehen in 01-grundlagen.css.
 * Diese Datei enthaelt noch: Seitengeruest von Contao, das Logo, die
 * Diashow, die letzten Einsaetze, die Wetterwarnungen und das mobile
 * Menue.
 *
 * Keine festen Farben, keine festen Groessen. Alles aus den Tokens.
 * =========================================================================== */

/* =============================================================================
 * Geruest von Contao
 * -----------------------------------------------------------------------------
 * Contao legt mehrere Container ineinander. Sie bekommen hier keine
 * eigene Flaeche und keinen eigenen Verlauf: der Hintergrund gehoert
 * dem body, sonst sieht man im Hellmodus dunkle Reste.
 * =========================================================================== */
#wrapper,
#container,
#main,
#main > .inside,
#footer,
#footer > .inside,
.page-wrapper,
.mod_article {
	background: none;
	border: 0;
	box-shadow: none;
}

/* SEITENBREITE KOMMT AUS DIESEN DATEIEN, NICHT AUS DEM SEITENLAYOUT
   -----------------------------------------------------------------
   Contao hat im Seitenlayout ein Feld "Breite". Ist es gesetzt,
   schreibt Contao dafuer eine eigene Regel direkt in den Seitenkopf -
   etwa #wrapper { width: 960px; margin: 0 auto }. Eine Regel im
   Seitenkopf steht spaeter als jede externe Datei und gewinnt deshalb.
   Beim Nachrichtenleser hat das die ganze Spalte schmal und mittig
   gestellt, mit einer grossen leeren Flaeche links daneben.

   Das !important ist hier die einzige Moeglichkeit, dagegen
   anzukommen, ohne im Backend an jedem Layout einzeln die Breite zu
   loeschen. Wer sie dort ohnehin leert, kann diesen Block entfernen -
   er tut dann nichts mehr. */
#wrapper,
#container,
#main,
#main > .inside,
#footer,
#footer > .inside {
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}

#main > .inside > .mod_article + .mod_article {
	margin-top: var(--abschnitt);
}

/* Contao gibt Inhaltselemente in einem Block ohne eigene Breite aus.
   Damit sie auf derselben Kante stehen wie Kopf- und Fusszeile,
   bekommen sie hier eine gemeinsame Breite. Elemente, die ueber die
   volle Breite laufen sollen (Diashow, Banner), setzen sie zurueck. */
.mod_article > .ce_text,
.mod_article > .ce_headline,
.mod_article > .ce_hyperlink,
.mod_article > .ce_list,
.mod_article > .ce_table,
.mod_article > .ce_accordion {
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding-inline: var(--rand);
}

#footer-custom,
#footer-custom .ce_text {
	background: none !important;
	border: 0 !important;
	padding: 0;
	margin: 0;
}


/* =============================================================================
 * Logo
 * -----------------------------------------------------------------------------
 * Zwei Dateien, eine fuer hell, eine fuer dunkel. Welche sichtbar ist,
 * entscheidet der Modus. Ohne diese Regeln stuenden beide untereinander.
 * =========================================================================== */
.logo img { display: block; }
.logo img.logo__img--on-dark  { display: none; }
.logo img.logo__img--on-light { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .logo img.logo__img--on-dark  { display: block; }
	:root:not([data-theme="light"]) .logo img.logo__img--on-light { display: none; }
}

[data-theme="dark"]  .logo img.logo__img--on-dark  { display: block; }
[data-theme="dark"]  .logo img.logo__img--on-light { display: none; }
[data-theme="light"] .logo img.logo__img--on-dark  { display: none; }
[data-theme="light"] .logo img.logo__img--on-light { display: block; }


/* =============================================================================
 * Diashow auf der Startseite
 * -----------------------------------------------------------------------------
 * Die Bilder kommen aus einem Contao-Galerieelement mit der CSS-Klasse
 * "hero-source". Ein Script uebernimmt sie in den Hero und blendet die
 * Galerie aus. An dieser Mechanik aendert sich nichts.
 *
 * WAS SICH GEAENDERT HAT
 * Der Hero war 70vh hoch und zog den folgenden Inhalt mit einem
 * negativen Rand um 9vh in die ausblendende Bildkante hinein. Das
 * ergab auf jedem Geraet eine andere Ueberlappung, und auf dem Handy
 * sprang die Hoehe beim Scrollen, weil vh die Browserleiste
 * mitrechnet. Jetzt eine feste Spanne in dvh mit Ober- und Untergrenze
 * und eine saubere Kante statt einer Ueberlappung.
 * =========================================================================== */
/* HOEHE DER DIASHOW
   Je flacher das Band, desto mehr schneidet "cover" oben und unten vom
   Foto weg. 58dvh ergaben auf einem breiten Schirm ein Verhaeltnis von
   rund 2,4:1 - eure Fotos sind aber 3:2 oder 4:3, da blieb von jedem
   Bild nur ein Streifen aus der Mitte.
   Jetzt waechst die Hoehe mit der Breite mit (48vw), begrenzt auf 80 %
   der Fensterhoehe. Damit liegt das Band bei etwa 2:1 statt 2,4:1, und
   der Bildausschnitt sitzt etwas hoeher, weil auf euren Fotos die
   Personen oben stehen.
   Soll gar nichts mehr abgeschnitten werden: unten bei .hero-bg__slide
   img object-fit auf "contain" stellen. Dann sieht man jedes Bild
   vollstaendig, dafuer bleiben links und rechts Flaechen frei. */
.hero-bg {
	position: relative;
	/* Flacher als zuvor, damit vom Nachrichtenlauf darunter schon beim
	   Aufruf gut zwei Drittel einer Kachel im Bild stehen. */
	height: min(60dvh, 38vw);
	min-height: 280px;
	margin: 0;
	overflow: hidden;
	background: var(--media-bg);
	pointer-events: none;
	z-index: var(--z-grund);
}

.hero-bg__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s var(--ease-aus);
}

.hero-bg__slide.is-active { opacity: 1; }

/* Das Script setzt je Bild ein <picture> ein, nicht ein <img>. Ohne
   diese Regel haette das innere img seine natuerliche Groesse und
   stuende klein in der linken oberen Ecke des Heros. */
.hero-bg__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;          /* "contain" zeigt jedes Bild vollstaendig */
	object-position: center 38%;
}

/* Ein Verlauf am unteren Rand. Er traegt keine Schrift, er sorgt nur
   dafuer, dass das Bild nicht mit einer harten Kante in die Seite
   stoesst. */
.hero-bg::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 40%;
	background: linear-gradient(to bottom,
	            transparent,
	            color-mix(in srgb, var(--bg) 70%, transparent) 55%,
	            var(--bg));
	pointer-events: none;
	z-index: 2;
}

/* Die Galerie, aus der die Bilder stammen, verschwindet, sobald das
   Script sie ausgelesen hat. */
.hero-source--verarbeitet { display: none; }

/* ------------------------------------------------------------- Punkte */
/* Striche statt Punkte: sie zeigen zugleich, wie viele Bilder es gibt
   und wo man gerade steht. Sie sitzen auf derselben Kante wie der
   uebrige Inhalt, nicht mittig im Nichts. */
.hero-bg__dots {
	position: absolute;
	left: 50%;
	bottom: var(--s-6);
	transform: translateX(-50%);

	display: flex !important;
	gap: var(--s-2);

	width: 100%;
	max-width: var(--breite);
	padding-inline: var(--rand);
	justify-content: flex-end;

	z-index: 3;
	pointer-events: auto;
}

.hero-bg__dot {
	width: 26px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	transition: background-color var(--t-normal) var(--ease),
	            width var(--t-normal) var(--ease);
}

.hero-bg__dot:hover { background: rgba(255, 255, 255, .7); }

.hero-bg__dot.is-active {
	width: 44px;
	background: #ffffff;
}

/* Der negative Rand von frueher entfaellt ersatzlos. */
.page-content {
	position: relative;
	z-index: var(--z-grund);
	margin-top: 0;
}

.home-content { padding: 0; }

@media (prefers-reduced-motion: reduce) {
	.hero-bg__slide { transition: none; }
}


/* =============================================================================
 * Letzte Einsaetze auf der Startseite
 * -----------------------------------------------------------------------------
 * Vorher vier gleich grosse Kacheln mit Rahmen und Schatten. Ein Einsatz
 * ist ein Eintrag in einem Protokoll, keine Werbeflaeche. Jetzt eine
 * Liste: Nummer, Stichwort, Datum. Die Zahlen stehen in der
 * Mono-Schrift und damit sauber untereinander.
 *
 * Wie viele Eintraege erscheinen, steuert weiterhin das Script im
 * Inhaltselement (ANZAHL), nicht dieses CSS.
 * =========================================================================== */
#einsatz-teaser {
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding: var(--abschnitt) var(--rand) 0;
}

#einsatz-teaser h2 {
	margin: 0 0 var(--s-5);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Nebeneinander statt untereinander. auto-fit heisst: so viele Spalten
   wie Platz ist, mindestens 230px breit. Die Anzahl der Eintraege
   steuert weiterhin das Script im Inhaltselement. */
.einsatz-teaser-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
}

.einsatz-teaser-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);

	padding: var(--s-5) var(--s-5) var(--s-5) 0;
	border-bottom: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
}

/* Eine senkrechte Haarlinie zwischen den Spalten, keine um jede Kachel */
.einsatz-teaser-card + .einsatz-teaser-card {
	padding-left: var(--s-5);
	border-left: 1px solid var(--line-soft);
}

.einsatz-teaser-index {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.einsatz-teaser-maininfo { min-width: 0; }

.einsatz-teaser-stichwort {
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: var(--text-strong);
	overflow-wrap: anywhere;
}

.einsatz-teaser-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-muted);
	white-space: nowrap;
}

.einsatz-teaser-meta strong {
	font-weight: var(--weight-normal);
	color: var(--text-muted);
}

/* Kein Trennzeichen zwischen den Angaben: der Abstand genuegt. */
.einsatz-teaser-meta span + span::before { content: none; }

.einsatz-meta-message {
	padding: var(--s-5) 0;
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.einsatz-meta-message--error { color: var(--brand-text); }


/* =============================================================================
 * Wetterwarnungen
 * -----------------------------------------------------------------------------
 * Zwei Spalten: links die Karte des Deutschen Wetterdienstes, rechts die
 * Meldungen aus NINA. Der farbige Strich links an einer Meldung sagt,
 * wie ernst sie ist - das ist eine echte Zustandsangabe und deshalb die
 * einzige Stelle der Seite, an der eine andere Farbe als Rot vorkommt.
 * =========================================================================== */
#wetterapp {
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding: var(--abschnitt) var(--rand) 0;
}

.wetter-layout { display: block; }
.wetter-main { max-width: none; }

/* Die Wetterwarnungen sind Beiwerk, kein Hauptinhalt: Sie stehen links
   am Rand und bleiben schmal, statt ueber die ganze Breite zu laufen.
   Eine Ueberschrift in Hauptgroesse haette ihnen mehr Gewicht gegeben
   als den Einsaetzen darueber. */
.wetter-header { margin-bottom: var(--s-5); }

.wetter-header h1 {
	margin: 0 0 var(--s-2);
	font-size: var(--text-xl);
}

.wetter-subline {
	max-width: 52ch;
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-muted);
}

/* Drei Blöcke nebeneinander, links beginnend: Karte, DWD-Meldungen,
   NINA-Meldungen. Die Karte und die DWD-Meldungen stehen im Markup im
   selben Abschnitt, deshalb wird dieser weiter unten noch einmal
   geteilt. */
.wetter-content {
	display: grid;
	grid-template-columns: minmax(0, 620px) minmax(0, 360px);
	justify-content: start;
	gap: var(--s-6) var(--s-7);
	margin-top: var(--s-5);
	padding-top: var(--s-5);
	border-top: 1px solid var(--line);
}

.wetter-col__title {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0 0 var(--s-4);
	font-size: var(--text-base);
	font-weight: var(--weight-strong);
	letter-spacing: var(--track-tight);
	text-transform: none;
	color: var(--text-strong);
}

.wetter-col__icon {
	flex: 0 0 auto;
	height: 22px;
	width: auto;
	display: block;
}

.wetter-col__body { min-width: 0; }

/* Im DWD-Abschnitt stehen Karte und Meldungen untereinander im Markup.
   Hier nebeneinander: links die Warnkarte, rechts die Meldungen dazu. */
.wetter-col--dwd .wetter-col__body {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: var(--s-5);
	align-items: start;
}

.wetter-col--dwd .home-weather__warnings { margin-top: 0; }

/* Die Warnkarte des DWD kommt mit weissem Grund. Ohne abgerundete Ecken
   stand im Hellmodus ein hartes weisses Rechteck auf dem Papierton.
   Kein Rahmen, keine eigene Flaeche - nur die Ecken gerundet und der
   Ueberstand abgeschnitten. */
.home-weather__map-link {
	display: block;
	overflow: hidden;
	border: 0;
	border-radius: var(--r-flaeche);
	background: none;
	box-shadow: var(--kante-hell);
}

.home-weather__image {
	display: block;
	width: 100%;
	height: auto;
}

.home-weather__warnings {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	margin-top: var(--s-4);
}

.home-weather__warn {
	padding: var(--s-3) 0 var(--s-3) var(--s-4);
	border-left: 3px solid var(--line);
	background: none;
}

.home-weather__warn-title {
	margin: 0 0 var(--s-1);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.home-weather__warn-headline {
	margin: 0 0 var(--s-1);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--text-strong);
}

.home-weather__warn-time {
	margin: 0 0 var(--s-2);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.home-weather__warn-text {
	margin: 0;
	max-width: var(--measure);
	font-size: var(--text-sm);
	line-height: var(--leading-base);
	color: var(--text-muted);
}

.home-weather__none,
.home-weather__loading {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.home-weather__source {
	margin: var(--s-4) 0 0;
	font-size: var(--text-2xs);
	color: var(--text-muted);
}

/* Warnstufen. Die einzigen Farben neben Rot auf der ganzen Seite, weil
   sie einen Zustand bezeichnen und nicht schmuecken. */
.home-nina__warn--minor    { border-left-color: #c89028; }
.home-nina__warn--moderate { border-left-color: #c2651c; }
.home-nina__warn--severe   { border-left-color: var(--brand); }


/* =============================================================================
 * Mobiles Menue
 * -----------------------------------------------------------------------------
 * Die Flaeche und die Eintraege stehen in mobilnav.css. Hier nur, was
 * das Geruest betrifft.
 * =========================================================================== */
body.nav-offen { overflow: hidden; }


/* =============================================================================
 * Schmale Fenster
 * =========================================================================== */
@media (max-width: 900px) {
	.wetter-content {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-6);
	}

	/* Innerhalb der DWD-Spalte standen Karte und Meldung nebeneinander.
	   Auf dem Handy passte das nicht mehr: Die Meldung wurde rechts
	   aus dem Fenster geschoben, und die ganze Seite liess sich
	   seitlich verschieben. */
	.wetter-col--dwd .wetter-col__body {
		display: block;
	}

	.wetter-col--dwd .home-weather__warnings {
		margin-top: var(--s-4);
	}

	.wetter-col__title { flex-wrap: wrap; }
}

@media (max-width: 700px) {
	.hero-bg { height: min(46dvh, 62vw); min-height: 240px; }

	.hero-bg__dots { bottom: var(--s-5); }

	.einsatz-teaser-card {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		row-gap: var(--s-1);
	}

	.einsatz-teaser-meta { grid-column: 2; }
}


/* =============================================================================
 * Kein waagrechtes Verschieben
 * -----------------------------------------------------------------------------
 * Einzelne Elemente mit fester Breite haben die Seite auf dem Handy
 * breiter gemacht als das Fenster. Dadurch wirkte alles nach links
 * verrutscht, weil der Browser auf die groessere Breite zentriert.
 * =========================================================================== */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}


/* =============================================================================
 * Naechste Termine auf der Startseite
 * -----------------------------------------------------------------------------
 * Gehoert zum Inhaltselement inhaltselemente/startseite-termine.html und
 * steht direkt unter "Letzte Einsaetze". Dieselbe Form wie dort: eine
 * Haarlinie oben, die Eintraege nebeneinander, senkrechte Linien
 * dazwischen. Zwei verschieden aussehende Listen untereinander waeren
 * zwei Formensprachen fuer dieselbe Sache.
 *
 * Gefuellt wird von files/js/termine.js. Ohne Termine bleibt der Block
 * leer UND ohne Hoehe - deshalb die Regel ganz unten.
 * =========================================================================== */
#termin-teaser {
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding: var(--s-8) var(--rand) 0;
}

#termin-teaser h2 {
	margin: 0 0 var(--s-5);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.termin-teaser-list .fw-termine {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.termin-teaser-list .fw-termin {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-5) var(--s-5) var(--s-5) 0;
	min-width: 0;
}

/* Eine senkrechte Haarlinie zwischen den Spalten, keine um jeden Eintrag */
.termin-teaser-list .fw-termin + .fw-termin {
	padding-left: var(--s-5);
	border-left: 1px solid var(--line-soft);
}

.termin-teaser-list .fw-termin__wann {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.termin-teaser-list .fw-termin__titel {
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: var(--text-strong);
	overflow-wrap: anywhere;
}

.termin-teaser-list .fw-termin__wo {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-muted);
	overflow-wrap: anywhere;
}

/* Solange nichts gefuellt ist, nimmt der Block keinen Platz ein. */
#termin-teaser:not(:has([data-gefuellt="ja"])) {
	display: none;
}

@media (max-width: 700px) {
	.termin-teaser-list .fw-termine {
		grid-template-columns: minmax(0, 1fr);
	}

	.termin-teaser-list .fw-termin {
		padding-right: 0;
	}

	.termin-teaser-list .fw-termin + .fw-termin {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--line-soft);
	}
}

/* Hinweis zur Auswahl ":has(.fw-news-year)":
   Diese Regeln gelten nur fuer die Nachrichten-UEBERSICHT. Die erkennt
   man sicher an den Jahrestrennern. Die Startseitenvorschau hat keine
   und bekommt ihr Aussehen aus news_preview.css - auch dann, wenn die
   Vorschau-Vorlagen noch nicht eingespielt sind und beide Bereiche
   dieselben Klassen ausgeben. */
/* =============================================================================
 * news.css  -  Neuigkeiten: Liste, Beitrag, Bildergalerie
 * -----------------------------------------------------------------------------
 * WAS SICH GEAENDERT HAT UND WARUM
 *
 * Die Liste bestand aus drei gleich grossen Kacheln nebeneinander, jede
 * mit Rahmen, Schatten, runder Datumsmarke in Orange und einem Knopf
 * "Mehr erfahren". Drei gleich grosse Kacheln sind die haeufigste
 * Anordnung ueberhaupt: alle Beitraege wirken gleich wichtig, und das
 * Auge findet keinen Anfang.
 *
 * Jetzt eine redaktionelle Liste: der juengste Beitrag gross und ueber
 * die ganze Breite, darunter Zeilen mit Bild links und Text rechts,
 * getrennt durch Haarlinien statt durch Kaesten. Das Datum steht als
 * Zahl in der Mono-Schrift ueber der Ueberschrift, nicht als farbige
 * Marke im Bild. Der Knopf auf jeder Karte faellt weg: die ganze Zeile
 * ist schon ein Link, ein Knopf darin ist ein Link im Link.
 *
 * Auf dem Handy war der Text bisher komplett ausgeblendet, man sah nur
 * das Bild mit dem Hinweis "Tippen fuer mehr Infos". Jetzt stehen dort
 * Ueberschrift, Datum und Anrisstext wie auf dem grossen Schirm.
 * =========================================================================== */

/* =============================================================================
 * Liste
 * =========================================================================== */
/* Die Uebersicht nutzt die volle Fensterbreite, die Beitraege stehen
   nebeneinander. auto-fill statt auto-fit: bleibt in der letzten Zeile
   ein Platz frei, zieht sich die letzte Kachel nicht ueber die ganze
   Breite auseinander. */
.fw-news-grid {
	width: 100%;
	max-width: none;
	margin: var(--s-7) auto 0;
	padding-inline: var(--rand);

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	max-width: 1760px;
	gap: var(--s-8) var(--s-7);
	align-items: start;
}

.fw-news-box {
	margin: 0;
}

/* Eine Haarlinie zwischen zwei Zeilen, nicht um jede Zeile herum */
/* Kein Trennstrich mehr: die Kacheln stehen nebeneinander, dort trennt
   der Abstand. */
.fw-news-grid:not(.fw-news-grid--vorschau):has(.fw-news-year) .fw-news-box + .fw-news-box {
	border-top: 0;
}

.fw-news-box__link {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	align-items: stretch;

	padding-block: 0;

	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
}

/* --------------------------------------------------------------- Bild */
.fw-news-box__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--media-bg);
	border-radius: var(--r-flaeche);
	box-shadow: var(--kante-hell), var(--shadow-1);
}

.fw-news-box__image figure,
.fw-news-box__image .image_container {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.fw-news-box__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	transition: transform var(--t-ruhig) var(--ease);
}

/* Das Bild tritt beim Zeigen leicht hervor. Mehr Bewegung braucht eine
   Liste nicht: sie sagt "anklickbar" und sonst nichts. */
.fw-news-box__link:hover .fw-news-box__image img {
	transform: scale(1.03);
}

/* --------------------------------------------------------------- Text */
.fw-news-box__content {
	position: static;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: 0;
	height: auto;
	color: var(--text);
}

/* Das Datum steht ueber der Ueberschrift, in Mono und zurueckgenommen.
   Vorher war es eine orange Marke im Bild - eine zweite Signalfarbe
   neben dem Rot, die mit der Ueberschrift um Aufmerksamkeit stritt. */
.fw-news-box__date {
	position: static;
	order: -1;
	z-index: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;

	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-normal);
	letter-spacing: .02em;
	color: var(--text-muted);
}

.fw-news-box__date-text { letter-spacing: inherit; }

.fw-news-box__text {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	flex: 0 1 auto;
}

.fw-news-box__title {
	margin: 0;
	padding: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
	text-wrap: balance;
	transition: color var(--t-schnell) var(--ease);
}

.fw-news-box__link:hover .fw-news-box__title { color: var(--brand-text); }

.fw-news-box__teaser {
	margin: 0;
	max-width: var(--measure);
	font-size: var(--text-sm);
	line-height: var(--leading-base);
	color: var(--text-muted);

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "Mehr Infos" ist kein Knopf mehr, sondern ein stiller Hinweis. Die
   ganze Zeile ist der Link. */
.fw-news-box__more {
	margin: var(--s-2) 0 0 !important;
	padding: 0;
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--brand-text);
}

.fw-news-box__more span::after {
	content: " \2192";
	display: inline-block;
	transition: transform var(--t-normal) var(--ease);
}

.fw-news-box__link:hover .fw-news-box__more span::after {
	transform: translateX(3px);
}

/* ------------------------------------------------- Der juengste Beitrag */
/* Er bekommt die ganze Breite und ein breiteres Bild. Damit hat die
   Liste einen Anfang, und die Seite besteht nicht aus lauter gleich
   lauten Zeilen. */
/* Der juengste Beitrag ist zwei Spalten breit, damit die Uebersicht
   einen Anfang hat und nicht aus lauter gleich lauten Kacheln besteht.
   Der Vorsatz .fw-news-grid:not(--vorschau) ist noetig, weil die
   Startseite dieselben Klassen benutzt. */
.fw-news-grid:not(.fw-news-grid--vorschau):has(.fw-news-year) .fw-news-box:first-of-type {
	grid-column: span 2;
}

.fw-news-grid:not(.fw-news-grid--vorschau):has(.fw-news-year) .fw-news-box:first-of-type .fw-news-box__image {
	aspect-ratio: 2 / 1;
}

.fw-news-grid:not(.fw-news-grid--vorschau):has(.fw-news-year) .fw-news-box:first-of-type .fw-news-box__title {
	font-size: var(--text-2xl);
	max-width: 22ch;
}

.fw-news-grid:not(.fw-news-grid--vorschau):has(.fw-news-year) .fw-news-box:first-of-type .fw-news-box__teaser {
	font-size: var(--text-base);
	-webkit-line-clamp: 2;
}

.fw-news-grid__pagination {
	max-width: var(--breite);
	margin: 0 auto;
}


/* =============================================================================
 * Jahrestrenner
 * -----------------------------------------------------------------------------
 * Kommt aus news_listcard.html5 als direktes Kind von .fw-news-grid.
 * Vorher: die Jahreszahl mittig in Rot zwischen zwei Linien. Rot ist
 * aber die Farbe fuer Bedienbares. Ein Jahr ist eine Ordnungsangabe,
 * also steht es links, in Mono, in der gedaempften Textfarbe.
 * =========================================================================== */
.fw-news-year {
	/* Der Jahrestrenner ist ein Kind desselben Rasters wie die Kacheln.
	   Ohne diese Zeile stuende er als schmale Zelle mitten zwischen
	   zwei Beitraegen. */
	grid-column: 1 / -1;
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin: var(--s-7) 0 var(--s-5);
	padding-top: var(--s-6);
	border-top: 1px solid var(--line);
}

.fw-news-year:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.fw-news-year::before,
.fw-news-year::after { content: none; }

.fw-news-year__title {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	color: var(--text-muted);
	white-space: nowrap;
}


/* =============================================================================
 * Einzelner Beitrag
 * =========================================================================== */
/* Nicht zentriert: "margin: 0 auto" haette den Beitrag als schmale
   Saeule in die Fenstermitte geschoben - genau das, was von aussen wie
   "das Bild steht in der Mitte" aussah. Der Beitrag beginnt jetzt am
   linken Seitenrand, und damit auch das Bild. */
.fw-article-page {
	width: 100%;
	max-width: var(--breite);
	margin: 0 !important;
	padding: var(--s-8) var(--rand);
	min-height: 0;
	background: none;
	color: var(--text);
	line-height: var(--leading-base);
}

/* ZWEI SPALTEN, BILDER GETRENNT VOM TEXT
   -----------------------------------------------------------------
   Vorher schwamm die Bildspalte (float) und der Text legte sich
   darum. Das las sich schlecht: Ueberschriften aus dem Beitragstext
   brachen um die untere Bildkante herum, und einzelne Zeilen standen
   als schmaler Streifen neben dem Bild.
   Jetzt zwei feste Spalten: links alle Bilder (Hauptbild und die
   Vorschaureihe darunter), rechts der komplette Text. Nichts laeuft
   mehr um ein Bild herum, die Spalten beruehren sich nicht. */
.fw-article-grid {
	display: grid;
	grid-template-columns: minmax(300px, 44%) minmax(0, 1fr);
	gap: var(--s-7) var(--s-8);
	align-items: start;

	width: 100%;
	max-width: none;
	margin: 0;
}

/* Der Clearfix von frueher ist mit dem float ueberfluessig geworden. */
.fw-article-grid::after { content: none; display: none; }

.fw-article-media,
.fw-article-grid > .fw-article-image-section {
	float: none;
	width: auto;
	margin: 0;
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.fw-article-content-section {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.fw-article-image-section {
	width: 100%;
	background: var(--media-bg);
	border-radius: var(--r-flaeche);
	overflow: hidden;
	box-shadow: var(--kante-hell), var(--shadow-2);
	border: 1px solid var(--line-soft);
	display: block;
}

.fw-article-image-section figure,
.fw-article-image-section .image_container,
.fw-article-image-section .ce_image {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: auto !important;
	display: block !important;
	float: none !important;
	border-radius: 0;
}

.fw-article-image-section img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	border-radius: 0;
}

/* Block, nicht Flex: Nur ein normaler Block laesst seine Zeilen um das
   schwimmende Bild herumlaufen. Ein Flex-Container weicht dem Bild als
   Ganzes aus und bliebe eine schmale Saeule. */
.fw-article-content-section {
	display: block;
	min-height: 0;
	padding: 0 !important;
}

/* Im Markup steht die Ueberschrift zweimal: einmal als Seitentitel
   darueber, einmal im Beitragskopf. Beide bekommen dieselbe Groesse,
   damit nicht eine davon wie ein Fehler aussieht. */
.fw-article-page > h1,
.fw-article-page > .ce_headline {
	max-width: var(--measure);
	margin: 0 0 var(--s-6);
	font-size: var(--text-2xl);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* Mit dem Raster liegt der Kopf in seiner eigenen Spalte. Das
   "overflow: hidden" von frueher war nur noetig, solange das Bild
   schwamm und die Trennlinie sonst dahinter durchlief. */
.fw-article-header {
	overflow: visible;
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--line-soft);
}

/* Lange Woerter wie "Hauptversammlung" passten in der schmalen
   Textspalte nicht in eine Zeile und liefen ueber den Rand hinaus.
   Eine Stufe kleiner, und lange Woerter duerfen umbrechen. */
/* Lange Woerter wie "Hauptversammlung" sind breiter als die Spalte.
   Ohne Trennung ragten sie rechts aus der Ueberschrift heraus und
   wurden abgeschnitten. */
.fw-article-title {
	overflow-wrap: break-word;
	hyphens: auto;
	margin: 0 0 var(--s-3);
	font-size: var(--text-2xl);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.fw-article-subtitle {
	margin: 0 0 var(--s-4);
	max-width: var(--measure);
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	line-height: var(--leading-snug);
	color: var(--text-muted);
}

.fw-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-2) var(--s-4);
	margin: 0;
	font-size: var(--text-xs);
	color: var(--text-muted);
}

/* Das Datum war eine orange Pille. Jetzt eine Zahl in Mono - das ist,
   was es ist. */
.fw-article-date {
	padding: 0;
	background: none;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-normal);
	color: var(--text-muted);
}

.fw-article-author {
	color: var(--text);
	font-weight: var(--weight-medium);
}

/* Jetzt, wo der Text eine eigene Spalte hat, darf die Lesebreite
   wieder begrenzt werden: auf einem breiten Schirm waeren sonst 140
   Zeichen in einer Zeile, und das Auge findet den Zeilenanfang nicht
   mehr wieder. 72 Zeichen sind die bequeme Obergrenze. */
.fw-article-body,
.fw-article-content-section .ce_text {
	max-width: min(72ch, 100%);
	color: var(--text) !important;
	font-size: var(--text-base);
	line-height: var(--leading-base);
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.fw-article-body p { margin-bottom: var(--s-5); }

/* Contao legt laengere Beitraege in mehreren Textelementen ab. Ohne
   Abstand dazwischen stiess der letzte Absatz des einen direkt an den
   ersten des naechsten und las sich wie ein Zeilenumbruch. */
.fw-article-content-section .ce_text + .ce_text { margin-top: var(--s-5) !important; }

.fw-article-body h2,
.fw-article-body h3 {
	color: var(--text-strong);
	margin: var(--s-7) 0 var(--s-4);
	letter-spacing: var(--track-tight);
}

/* Kein farbiger Strich unter Zwischenueberschriften: Abstand und
   Groesse zeigen die Rangfolge deutlicher als eine Linie. */
.fw-article-body h2 {
	font-size: var(--text-xl);
	border-bottom: 0;
	padding-bottom: 0;
}

.fw-article-body h3 { font-size: var(--text-lg); }

.fw-article-attachments {
	margin-top: var(--s-8);
	padding-top: var(--s-6);
	border-top: 1px solid var(--line);
}

.fw-article-attachments h3 {
	margin: 0 0 var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.fw-article-attachments ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fw-article-attachments li { margin: 0; }

.fw-article-attachments a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line-soft);
	color: var(--text-strong);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.fw-article-attachments a:hover { color: var(--brand-text); }


/* =============================================================================
 * Bildergalerie am Beitrag
 * =========================================================================== */
.fw-article-media {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	min-width: 0;
}

.fw-article-image-section.ist-anklickbar { cursor: zoom-in; }

/* Der Streifen sitzt unter dem Hauptbild. Groessere Vorschauen als
   bisher: 84px waren Briefmarken, auf denen man nichts erkannte. */
.fw-article-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--s-3);
	margin-top: var(--s-2);
}

.fw-article-gallery[hidden] { display: none; }

.fw-article-gallery__item {
	padding: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--media-bg);
	border: 1px solid var(--line);
	border-radius: var(--r-klein);
	cursor: pointer;
	transition: border-color var(--t-schnell) var(--ease),
	            opacity var(--t-schnell) var(--ease);
}

.fw-article-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fw-article-gallery__item:hover,
.fw-article-gallery__item:focus-visible {
	border-color: var(--text-muted);
	outline: none;
}

/* Das gerade gezeigte Bild steht voll da, die uebrigen treten zurueck */
.fw-article-gallery__item { opacity: .7; }
.fw-article-gallery__item:hover { opacity: 1; }

.fw-article-gallery__item.is-aktiv {
	opacity: 1;
	border-color: var(--brand);
}


/* =============================================================================
 * Grossansicht
 * =========================================================================== */
.fw-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-dialog);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-7) var(--s-4) var(--s-8);
	background: rgba(6, 8, 12, .92);
	backdrop-filter: blur(8px);
}

.fw-lightbox[hidden] { display: none; }

body.fw-lightbox-offen { overflow: hidden; }

.fw-lightbox__rahmen {
	margin: 0;
	max-width: min(1200px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
}

.fw-lightbox__rahmen img {
	display: block;
	max-width: 100%;
	max-height: 78dvh;
	width: auto;
	height: auto;
	border-radius: var(--r-flaeche);
}

.fw-lightbox__rahmen figcaption {
	max-width: 60ch;
	color: #d7dbe2;
	font-size: var(--text-sm);
	text-align: center;
}

.fw-lightbox__rahmen figcaption[hidden] { display: none; }

/* Die Schaltflaechen der Grossansicht waren eckige Kaesten mit einem
   Zeichen darin, das nicht mittig sass. Jetzt runde Flaechen mit
   Milchglas, wie man es von einer Bildansicht erwartet, und das Zeichen
   optisch ausgerichtet. */
.fw-lightbox__pfeil,
.fw-lightbox__schliessen {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;

	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #f6f7f9;
	cursor: pointer;
	border-radius: var(--r-chip);

	font-family: var(--font-sans);
	font-weight: var(--weight-normal);
	line-height: 1;

	transition: background-color var(--t-schnell) var(--ease),
	            border-color var(--t-schnell) var(--ease),
	            transform var(--t-schnell) var(--ease);
}

.fw-lightbox__pfeil {
	width: 3.25rem;
	height: 3.25rem;
	font-size: 1.45rem;
}

.fw-lightbox__schliessen {
	position: absolute;
	top: var(--s-5);
	right: var(--s-5);
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.25rem;
}

.fw-lightbox__pfeil:hover,
.fw-lightbox__schliessen:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.fw-lightbox__pfeil:active,
.fw-lightbox__schliessen:active { transform: translateY(1px); }

.fw-lightbox__zaehler {
	position: absolute;
	bottom: var(--s-5);
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: .08em;
	color: rgba(243, 245, 248, .7);
}


/* =============================================================================
 * Schmale Fenster
 * =========================================================================== */
/* Auf schmalen Schirmen kein Umfliessen: Bild oben, Text darunter. */
@media (max-width: 1100px) {
	/* Unter 1100px bleibt fuer zwei Spalten zu wenig uebrig: Bilder
	   oben, Text darunter. */
	.fw-article-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-6);
	}

	.fw-article-media,
	.fw-article-grid > .fw-article-image-section,
	.fw-article-content-section {
		grid-column: 1;
		grid-row: auto;
		width: auto;
		margin: 0;
	}

	.fw-article-body,
	.fw-article-content-section .ce_text { max-width: none; }
}

@media (max-width: 700px) {
	/* Bild oben, Text darunter. Der Text bleibt sichtbar - das ist der
	   eigentliche Unterschied zur bisherigen Fassung. */
	.fw-news-grid { grid-template-columns: minmax(0, 1fr); }

	.fw-news-grid:not(.fw-news-grid--vorschau):has(.fw-news-year) .fw-news-box:first-of-type {
		grid-column: auto;
	}

	.fw-news-box__link { gap: var(--s-3); }

	.fw-news-box__content,
	.fw-news-box__date { display: flex !important; }
	.fw-news-box__date { display: block !important; }

	.fw-news-box__image {
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		aspect-ratio: 16 / 10;
		border-radius: var(--r-flaeche) !important;
	}

	.fw-news-box__image img {
		object-fit: cover !important;
		position: static !important;
	}

	.fw-news-box__image::after { content: none; }

	.fw-news-grid:not(.fw-news-grid--vorschau):has(.fw-news-year) .fw-news-box:first-of-type .fw-news-box__image { aspect-ratio: 16 / 10; }
	.fw-news-grid:not(.fw-news-grid--vorschau):has(.fw-news-year) .fw-news-box:first-of-type .fw-news-box__title { font-size: var(--text-xl); }

	.fw-article-page { padding: var(--s-6) var(--rand); }
	.fw-article-title { font-size: var(--text-2xl); }

	.fw-article-gallery {
		grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	}

	.fw-lightbox { padding: var(--s-4) var(--s-2) var(--s-7); }
	.fw-lightbox__pfeil { display: none; }   /* auf dem Handy wird gewischt */
	.fw-lightbox__rahmen img { max-height: 70dvh; }
}

/* =============================================================================
 * news_preview.css  -  Nachrichtenvorschau auf der Startseite
 * -----------------------------------------------------------------------------
 * WICHTIG: Diese Datei gilt ausschliesslich fuer die Vorschau auf der
 * Startseite. Alles haengt an :is(.fw-news-grid--vorschau, .fw-news-grid:not(:has(.fw-news-year))) bzw.
 * :is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box).
 *
 * Vorher gaben beide Vorlagen - Liste und Vorschau - dieselben Klassen
 * aus. news.css und news_preview.css haben sich deshalb gegenseitig
 * ueberschrieben, und welche Fassung man sah, entschied allein die
 * Ladereihenfolge im Seitenlayout. Die Vorlagen
 * mod_newslist_fw_preview.html5 und news_listcard_preview.html5 setzen
 * jetzt eine eigene Klasse; beide Dateien koennen sich nicht mehr in
 * die Quere kommen.
 *
 * Form: Bild, Datum, Ueberschrift. Kein Rahmen, kein Schatten, kein
 * Knopf. Eine Kachel mit Rahmen UND Schatten UND Knopf darin ist drei
 * Mal dasselbe gesagt - die Kachel ist bereits ein Link.
 * =========================================================================== */

/* -----------------------------------------------------------------------------
 * Warum die Auswahl so umstaendlich aussieht
 * -----------------------------------------------------------------------------
 * Die Regeln greifen auf zwei Wegen:
 *
 *   1. .fw-news-box--vorschau / .fw-news-grid--vorschau
 *      Das setzen die Vorlagen mod_newslist_fw_preview.html5 und
 *      news_listcard_preview.html5.
 *
 *   2. .fw-news-grid:not(:has(.fw-news-year))
 *      Der Notnagel, falls die Vorlagen (noch) nicht eingespielt sind.
 *      Die Uebersichtsseite gruppiert nach Jahren und enthaelt deshalb
 *      immer .fw-news-year. Die Startseitenvorschau tut das nie. Ein
 *      Nachrichtenraster OHNE Jahrestrenner ist also die Vorschau - und
 *      wird zum waagrechten Lauf, ganz gleich welche Vorlage sie
 *      ausgibt.
 *
 * Dadurch stehen die Kacheln auf der Startseite auch dann nebeneinander,
 * wenn im Seitenlayout nur die Stilvorlagen, nicht aber die Vorlagen
 * getauscht wurden.
 * --------------------------------------------------------------------------- */

/* Ein waagrechter Lauf statt eines starren Rasters: so viele Beitraege
   nebeneinander wie Platz ist, der Rest wird seitlich gescrollt. Das
   Einrasten (scroll-snap) sorgt dafuer, dass immer eine ganze Kachel
   steht und nicht eine halbe am Rand haengt.
   Der negative Rand plus dasselbe Mass als Innenabstand laesst den Lauf
   optisch am Fensterrand beginnen, waehrend die erste Kachel trotzdem
   auf der Kante des uebrigen Inhalts steht. */
:is(.fw-news-grid--vorschau, .fw-news-grid:not(:has(.fw-news-year))) {
	display: grid;
	grid-auto-flow: column;
	/* Feste Spaltenbreite statt 1fr: So viele Kacheln wie Platz ist,
	   der Rest laeuft nach rechts aus dem Bild. Mit 1fr haetten sich
	   alle Kacheln die Breite geteilt und waeren immer schmaler
	   geworden, statt zu verschwinden. Die 3,25 lassen die vierte
	   Kachel angeschnitten stehen - das sagt, dass es weitergeht. */
	grid-auto-columns: clamp(230px, calc((100% - 4 * var(--s-5)) / 4.3), 380px);
	grid-template-columns: none;
	gap: var(--s-5);

	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--rand);

	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--rand);
	/* Kein Rollbalken: gescrollt wird mit den beiden Pfeilen, mit dem
	   Finger oder mit dem Mausrad. Ein grauer Balken unter den Kacheln
	   sah aus wie ein Bauteil, das versehentlich sichtbar geblieben
	   ist. Die Tastaturbedienung bleibt erhalten, weil der Bereich
	   weiterhin scrollbar ist. */
	scrollbar-width: none;
	-ms-overflow-style: none;

	/* Am rechten Rand blendet die letzte Kachel aus. Das sagt ohne Worte:
	   hier geht es weiter. Ist nichts mehr zu scrollen, faellt es nicht
	   auf, weil dort ohnehin der Seitenrand liegt. */
	mask-image: linear-gradient(to right,
	            #000 0, #000 calc(100% - 3rem), transparent 100%);
	-webkit-mask-image: linear-gradient(to right,
	            #000 0, #000 calc(100% - 3rem), transparent 100%);
}

:is(.fw-news-grid--vorschau, .fw-news-grid:not(:has(.fw-news-year)))::-webkit-scrollbar { width: 0; height: 0; display: none; }

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) { scroll-snap-align: start; }

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) { margin: 0; border: 0; min-width: 0; }

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__link {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);

	padding: 0;
	min-height: 0;
	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* --------------------------------------------------------------- Bild */
:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__image {
	position: relative;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--media-bg);
	border-radius: var(--r-flaeche);
	box-shadow: var(--kante-hell), var(--shadow-1);
}

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__image figure,
:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__image .image_container {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
	position: static !important;
}

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	position: static !important;
	transition: transform var(--t-ruhig) var(--ease);
}

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__link:hover .fw-news-box__image img {
	transform: scale(1.03);
}

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__image::after { content: none !important; }

/* --------------------------------------------------------------- Text */
:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__content {
	position: static;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	height: auto;
	padding: 0;
}

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__date {
	position: static;
	order: -1;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-normal);
	color: var(--text-muted);
}

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__title {
	margin: 0;
	padding: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
	text-wrap: balance;
	transition: color var(--t-schnell) var(--ease);
}

:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__link:hover .fw-news-box__title {
	color: var(--brand-text);
}

/* Der Anriss steht im Quelltext als <p class="fw-news-box__teaser"> mit
   weiteren <p> DARIN. Verschachtelte <p> sind nicht erlaubt; der Browser
   schliesst das aeussere beim ersten inneren und haengt die inneren
   Absaetze als Geschwister daneben. "display:none" auf __teaser traf
   deshalb eine leere Huelle, der Text blieb stehen und machte eine
   Kachel doppelt so hoch wie die anderen.
   Darum hier umgekehrt: Im Textblock bleibt nur die Ueberschrift
   sichtbar, alles andere geht weg - unabhaengig davon, wie der Anriss
   ausgezeichnet ist. */
:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__text > *:not(.fw-news-box__title) { display: none; }

/* Anrisstext und "Mehr Infos" bleiben der Nachrichtenseite vorbehalten.
   Auf der Startseite genuegen Bild, Datum und Ueberschrift. */
:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__teaser,
:is(.fw-news-box--vorschau, .fw-news-grid:not(:has(.fw-news-year)) .fw-news-box) .fw-news-box__more { display: none; }

:is(.fw-news-grid--vorschau, .fw-news-grid:not(:has(.fw-news-year))) + .fw-news-grid__pagination { display: none; }


/* =============================================================================
 * Schmale Fenster
 * =========================================================================== */
/* Auch auf dem Handy nebeneinander, nie untereinander: Der Lauf bleibt
   waagrecht, die Kacheln werden nur schmaler. Untereinander waere aus
   drei Kacheln eine lange Liste geworden, durch die man erst scrollen
   muss, bevor der naechste Abschnitt kommt. */
@media (max-width: 760px) {
	:is(.fw-news-grid--vorschau, .fw-news-grid:not(:has(.fw-news-year))) { grid-auto-columns: clamp(200px, 66vw, 300px); }
}


/* =============================================================================
 * Pfeile statt Rollbalken
 * -----------------------------------------------------------------------------
 * Die beiden Schaltflaechen setzt nachrichten-slider.js ein. Es haengt
 * sie als Geschwister NEBEN den Lauf und gibt dem umgebenden Block die
 * Klasse .fw-news-lauf. So bleibt das Markup der Nachrichtenvorlage
 * unangetastet, und der Verlauf am rechten Rand (mask-image) blendet
 * den Pfeil nicht mit aus - er liegt ausserhalb des Laufs.
 *
 * Ohne das Skript passiert nichts Schlimmes: dann gibt es keine Pfeile,
 * und gescrollt wird mit Finger oder Mausrad wie bisher.
 * =========================================================================== */
.fw-news-lauf {
	position: relative;
}

.fw-news-pfeil {
	position: absolute;
	/* --pfeil-oben setzt das Skript auf die halbe Bildhoehe der ersten
	   Kachel. Die Pfeile stehen damit mittig auf den Bildern und nicht
	   auf halber Hoehe der ganzen Kachel, wo sie in den Ueberschriften
	   haengen wuerden. */
	top: var(--pfeil-oben, 35%);
	transform: translateY(-50%);
	z-index: 2;

	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;

	color: var(--text-strong);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: saturate(1.6) blur(10px);
	border: 1px solid var(--line);
	border-radius: var(--r-chip);
	box-shadow: var(--kante-hell), var(--shadow-2);
	cursor: pointer;

	transition: opacity var(--t-schnell) var(--ease),
	            transform var(--t-schnell) var(--ease),
	            border-color var(--t-schnell) var(--ease);
}

.fw-news-pfeil svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fw-news-pfeil:hover {
	border-color: var(--text-muted);
	transform: translateY(-50%) scale(1.06);
}

.fw-news-pfeil:active { transform: translateY(-50%) scale(.96); }

/* Am Anfang gibt es nichts nach links, am Ende nichts nach rechts.
   Der Pfeil verschwindet dann, statt grau und tot dazustehen. */
.fw-news-pfeil[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Passt alles ins Fenster, braucht es gar keine Pfeile. */
.fw-news-lauf[data-rollbar="nein"] .fw-news-pfeil { display: none; }

.fw-news-pfeil--zurueck { left: calc(var(--rand) - 1.375rem); }
.fw-news-pfeil--vor     { right: calc(var(--rand) - 1.375rem); }

@media (max-width: 760px) {
	/* Auf dem Telefon wird gewischt. Die Pfeile wuerden dort nur die
	   Bilder verdecken. */
	.fw-news-pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fw-news-pfeil:hover,
	.fw-news-pfeil:active { transform: translateY(-50%); }
}

/* =============================================================================
 * technik.css  -  Fahrzeuge
 * -----------------------------------------------------------------------------
 * Vorher: jedes Fahrzeug in einer Kachel mit Rahmen, Schatten, farbigem
 * Balken und dem Namen in gesperrten Grossbuchstaben; die technischen
 * Daten als Liste mit einer Haarlinie unter jeder einzelnen Zeile.
 *
 * Ein Datenblatt mit einer Linie unter jeder Zeile ist die muehsamste
 * Form, so etwas zu lesen - das Auge stolpert bei jeder Zeile. Jetzt
 * stehen Bezeichnung und Wert als zweispaltiges Raster ohne Linien,
 * der Wert in der Mono-Schrift, damit Zahlen untereinander stehen.
 *
 * Die Fahrzeuge selbst sind durch eine Haarlinie und viel Luft getrennt,
 * nicht durch Kaesten. Das Bild steht links und bleibt beim Scrollen
 * stehen, solange die Daten daneben laufen.
 * =========================================================================== */

/* =============================================================================
 * Kopf der Seite
 * =========================================================================== */
.tech-intro {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: var(--s-8) var(--rand) var(--s-7);
}

/* Die Marke ueber der Ueberschrift sagte nur, was die Ueberschrift
   darunter ohnehin sagt. */
.tech-intro__kicker { display: none; }

.tech-intro__title {
	margin: 0 0 var(--s-3);
	max-width: 18ch;
	font-size: var(--text-3xl);
	line-height: var(--leading-display);
	letter-spacing: var(--track-display);
	color: var(--text-strong);
}

.tech-intro__subtitle {
	margin: 0 0 var(--s-4);
	font-size: var(--text-lg);
	font-weight: var(--weight-normal);
	color: var(--text-muted);
	opacity: 1;
}

.tech-intro__text {
	max-width: var(--measure);
	margin: 0;
	font-size: var(--text-base);
	line-height: var(--leading-base);
	color: var(--text-muted);
	opacity: 1;
}


/* =============================================================================
 * Trenner zwischen Fahrzeuggruppen
 * =========================================================================== */
.tech-divider {
	width: 100%;
	max-width: none;
	margin: var(--abschnitt) auto var(--s-6);
	padding: var(--s-6) var(--rand) 0;
	border-top: 1px solid var(--line);
	display: block;
	text-align: left;
}

.tech-divider__line { display: none; }

.tech-divider__title {
	margin: 0 0 var(--s-2);
	font-size: var(--text-xl);
	font-weight: var(--weight-strong);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
	white-space: normal;
}

.tech-divider__title span { color: var(--text-strong); }

.tech-divider__text {
	max-width: var(--measure);
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-base);
	color: var(--text-muted);
	opacity: 1;
}


/* =============================================================================
 * Fahrzeug
 * =========================================================================== */
#tech-list,
.tech-page #tech-list {
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
	padding-inline: 0;
}

/* Volle Fensterbreite, und das Bild bekommt mehr davon als der Text:
   bei einem Fahrzeug ist das Bild die eigentliche Information. */
.vehicle-card,
.tech-page .vehicle-card {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--s-8);
	align-items: start;

	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: var(--s-8) var(--rand);

	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.vehicle-card + .vehicle-card,
.tech-page .vehicle-card + .vehicle-card {
	border-top: 1px solid var(--line-soft);
}

.vehicle-card::before,
.tech-page .vehicle-card::before { content: none; }

/* ---------------------------------------------------------------- Bild */
.vehicle-card__media,
.tech-page .vehicle-card__media {
	position: sticky;
	top: calc(72px + var(--s-5));
	margin: 0;
}

.vehicle-card__image,
.tech-page .vehicle-card .vehicle-card__image {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--media-bg);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-flaeche);
	box-shadow: var(--kante-hell), var(--shadow-2);
}

.vehicle-card__image img,
.tech-page .vehicle-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--t-ruhig) var(--ease);
}

/* ---------------------------------------------------------------- Text */
.vehicle-card__body,
.tech-page .vehicle-card__body { min-width: 0; }

.vehicle-card__header { margin: 0 0 var(--s-4); }

.vehicle-card__title,
.tech-page .vehicle-card__title,
.tech-page .vehicle-card h2 {
	margin: 0 0 var(--s-3);
	font-size: var(--text-2xl);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	text-transform: none;
	color: var(--text-strong);
	text-wrap: balance;
}

.vehicle-card__intro,
.tech-page .vehicle-card__intro,
.tech-page .vehicle-card p.vehicle-intro {
	margin: 0 0 var(--s-5);
	max-width: var(--measure);
	font-size: var(--text-base);
	line-height: var(--leading-base);
	color: var(--text-muted);
}

/* --------------------------------------------------------- Zwei Spalten */
.vehicle-card__columns,
.tech-page .vehicle-card__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--line-soft);
}

.vehicle-card__section-title,
.tech-page .vehicle-card__section-title,
.tech-page .vehicle-card h3 {
	margin: 0 0 var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ------------------------------------------------------ Technische Daten */
/* Bezeichnung links, Wert rechts, ohne Linie dazwischen. Der Wert steht
   in Mono: so stehen 96 kW, 2006 und 1/8 sauber untereinander. */
.vehicle-card__specs,
.tech-page .vehicle-card__specs,
.tech-page .vehicle-card dl {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: var(--s-2) var(--s-4);
	margin: 0;
}

.vehicle-card__specs dt,
.tech-page .vehicle-card dt {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-normal);
	color: var(--text-muted);
	border: 0;
}

.vehicle-card__specs dd,
.tech-page .vehicle-card dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	color: var(--text-strong);
	text-align: right;
	border: 0;
}

/* ------------------------------------------------------------- Beladung */
.vehicle-card__equipment,
.tech-page .vehicle-card__equipment,
.tech-page .vehicle-card ul.vehicle-equipment {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vehicle-card__equipment li,
.tech-page .vehicle-card__equipment li,
.tech-page .vehicle-card ul.vehicle-equipment li {
	position: relative;
	margin: 0;
	padding-left: var(--s-5);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--text);
	border: 0;
}

/* Haken, wie bisher. Er steht im Gelbgruen der Leuchtstreifen und
   nicht in Rot: Rot heisst auf dieser Seite Einsatz, eine Beladung ist
   eine Ausstattungsliste. */
.vehicle-card__equipment li::before,
.tech-page .vehicle-card__equipment li::before,
.tech-page .vehicle-card ul.vehicle-equipment li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	background: none;
	font-size: .9em;
	line-height: inherit;
	color: var(--signal-text);
}


/* =============================================================================
 * Schmale Fenster
 * =========================================================================== */
@media (max-width: 1000px) {
	.vehicle-card,
	.tech-page .vehicle-card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-5);
		padding-block: var(--s-7);
	}

	.vehicle-card__media,
	.tech-page .vehicle-card__media { position: static; }
}

@media (max-width: 680px) {
	.vehicle-card__columns,
	.tech-page .vehicle-card__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-5);
	}

	.vehicle-card__specs dd,
	.tech-page .vehicle-card dd { text-align: left; }
}

/* =============================================================================
 * crew.css  -  Abteilungsseiten
 * -----------------------------------------------------------------------------
 * Fuehrung, aktive Wehr, Jugendfeuerwehr, Spielmannszug, Historie.
 *
 * WAS SICH GEAENDERT HAT
 * Die Personenkacheln hatten Rahmen, Flaeche, Schatten und hoben sich
 * beim Zeigen an. Das ist die Gestaltung eines Knopfes, aber eine
 * Person ist nichts zum Anklicken. Jetzt: das Bild in einem Rahmen,
 * Name und Funktion schlicht darunter, kein Kasten darum.
 *
 * Die Funktion stand in Rot. Rot bedeutet auf dieser Seite ueberall
 * "bedienbar" oder "Marke" - fuer eine Funktionsbezeichnung ist es die
 * falsche Farbe. Sie steht jetzt in derselben Form wie alle anderen
 * Beschriftungen.
 *
 * Das Banner lief randlos ueber die volle Fensterbreite und stand
 * dadurch auf einer anderen Kante als alles darunter.
 * =========================================================================== */

/* ---------------------------------------------- gemeinsam */

.fw-crew-banner--bleed {
	width: 100%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/* Luft nach oben: Auf Seiten ohne Banner - etwa "Unsere Fuehrung" -
   klebte die Ueberschrift sonst direkt unter der Kopfzeile. */
.fw-crew {
	width: 100%;
	max-width: 1760px;
	margin: 0 auto;
	padding: var(--s-7) var(--rand) var(--abschnitt);
	color: var(--text);
}

.fw-crew__kicker { display: none; }

.fw-crew__title {
	margin: 0 0 var(--s-5);
	font-size: var(--text-3xl);
	line-height: var(--leading-display);
	letter-spacing: var(--track-display);
	color: var(--text-strong);
}

.fw-crew__lead {
	max-width: var(--measure);
	margin: 0 0 var(--s-8);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--text-muted);
}

/* Mehr Abstand zwischen Ueberschrift einer Gruppe und den Kacheln
   darunter, und mehr Luft zwischen zwei Gruppen. */
.fw-crew-group {
	margin: 0 0 var(--s-8);
	padding-top: var(--s-7);
	border-top: 1px solid var(--line);
}

.fw-crew-group:first-of-type {
	margin-top: var(--s-7);
	padding-top: 0;
	border-top: 0;
}

.fw-crew-group__head {
	margin-bottom: var(--s-5);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .3rem 1rem;
	margin-bottom: 1.25rem;
}

.fw-crew-group__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--text-strong);
}

.fw-crew-group__count {
	margin: 0;
	font-size: .85rem;
	color: var(--text-muted);
}

.fw-crew-subtitle {
	margin: var(--s-6) 0 var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.fw-crew-subtitle:first-of-type {
	margin-top: 0;
}

/* Kleinere Kacheln, dafuer mehr nebeneinander. Vier feste Spalten
   ergaben auf einem breiten Schirm Portraets in Plakatgroesse. */
.fw-crew-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--s-5) var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Die Mannschaft stand in sechs festen Spalten und war damit auf einem
   breiten Schirm groesser als die Fuehrung darueber. Jetzt richtet sich
   auch sie nach der Breite, nur in kleinerem Mass. */
.fw-crew-grid--small {
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: var(--s-5) var(--s-4);
}

.fw-crew-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
	transition: none;
}

.fw-crew-card:hover {
	transform: none;
	box-shadow: none;
}

.fw-crew-card__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--media-bg);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-flaeche);
	box-shadow: var(--kante-hell), var(--shadow-1);
	overflow: hidden;
}

/* Fehlt ein Portraet, stehen die Initialen in der Mono-Schrift -
   erkennbar als Platzhalter und nicht als schlecht gesetzter Name. */
.fw-crew-card__initials {
	font-family: var(--font-mono);
	font-size: var(--text-xl);
	font-weight: var(--weight-medium);
	letter-spacing: .04em;
	color: var(--text-muted);
}

.fw-crew-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.fw-crew-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: 0;
}

.fw-crew-card__role {
	order: 2;
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-normal);
	letter-spacing: .04em;
	text-transform: none;
	color: var(--text-muted);
}

.fw-crew-card__name {
	order: 1;
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
}

.fw-crew-card--small .fw-crew-card__body { padding: 0; }

.fw-crew-card--small .fw-crew-card__name { font-size: var(--text-sm); }

.fw-crew-card--small .fw-crew-card__initials { font-size: var(--text-lg); }

.fw-crew__contact {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	font-size: .92rem;
	color: var(--text-muted);
}

.fw-crew__contact a {
	color: var(--text-strong);
	text-decoration: none;
}

.fw-crew__contact a:hover {
	color: var(--brand);
	text-decoration: underline;
}

/* Die festen Spaltenzahlen fuer mittlere Breiten entfallen: auto-fill
   oben regelt das schon und haelt die Bildgroesse ueberall gleich.
   Vorher sprang die Groesse an jedem Umbruchpunkt. */

@media (max-width: 700px) {
	.fw-crew {
		padding: 0 var(--rand) var(--s-7);
	}

	.fw-crew-banner {
		min-height: 150px;
	}

	.fw-crew__lead {
		margin-bottom: 1.75rem;
		font-size: 1rem;
	}

	.fw-crew-grid--small {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}

	.fw-crew-group__title {
		font-size: 1.3rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	.fw-crew-card {
		transition: none;
	}

	.fw-crew-card:hover {
		transform: none;
	}

}

.fw-crew__text {
	max-width: 68ch;
	margin: 0 0 1.5rem;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text);
}

.fw-crew__text p + p {
	margin-top: 1rem;
}

.fw-crew__note {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem 2rem;
	max-width: 68ch;
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--brand);
	border-radius: var(--radius);
	background: var(--surface-2);
}

.fw-crew__note > div {
	min-width: 0;
}

.fw-crew__note dt {
	margin-bottom: .2rem;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--brand);
}

.fw-crew__note dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--text);
	overflow-wrap: anywhere;
}

.fw-crew__note a {
	color: var(--text-strong);
	text-decoration: none;
}

.fw-crew__note a:hover {
	color: var(--brand);
	text-decoration: underline;
}

.fw-crew-card__mail {
	margin: .3rem 0 0;
	font-size: .78rem;
	line-height: 1.4;
	word-break: break-word;
}

.fw-crew-card__mail a {
	color: var(--text-muted);
	text-decoration: none;
}

.fw-crew-card__mail a:hover {
	color: var(--brand);
	text-decoration: underline;
}

.fw-crew-banner img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: var(--banner-fit);
	object-position: center var(--banner-focus);
}

@media (max-width: 700px) {
	.fw-crew-banner {
		--banner-h: 26vh;
	}

}

/* ------------------------------- nur Seite: fuehrung */
/* Setzt voraus: Seite fuehrung -> CSS-Klasse "p-fuehrung" */

body.p-fuehrung .fw-team-banner {
	--banner-h: 20vh;
	--banner-gap: clamp(.75rem, 2vw, 1.5rem);
	--banner-top: clamp(1rem, 3vh, 2rem);
	height: var(--banner-h);
	min-height: 120px;
	margin: var(--banner-top) var(--banner-gap) clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--media-bg, var(--surface-2));
	box-shadow: var(--shadow-sm);
}

body.p-fuehrung .fw-team-banner--bleed {
	width: calc(100vw - 2 * var(--banner-gap));
	max-width: calc(100vw - 2 * var(--banner-gap));
	margin-left: calc(50% - 50vw + var(--banner-gap));
	margin-right: calc(50% - 50vw + var(--banner-gap));
}

body.p-fuehrung .fw-team-banner img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	object-position: center top;
}

body.p-fuehrung .fw-team {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
	color: var(--text);
}

body.p-fuehrung .fw-team__kicker {
	margin: 0 0 .4rem;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--brand);
}

body.p-fuehrung .fw-team__title {
	margin: 0 0 .6rem;
	font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem);
	line-height: 1.15;
	color: var(--text-strong);
}

body.p-fuehrung .fw-team__lead {
	max-width: 60ch;
	margin: 0 0 2.5rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--text-muted);
}

body.p-fuehrung .fw-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

body.p-fuehrung .fw-team-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.p-fuehrung .fw-team-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg, var(--shadow-sm));
	border-color: var(--brand);
}

body.p-fuehrung .fw-team-card__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

body.p-fuehrung .fw-team-card__initials {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--text-muted);
}

body.p-fuehrung .fw-team-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

body.p-fuehrung .fw-team-card__body {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1rem 1.05rem 1.1rem;
}

body.p-fuehrung .fw-team-card__role {
	order: -1;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--brand);
}

body.p-fuehrung .fw-team-card__name {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-strong);
}

body.p-fuehrung .fw-team-card__mail {
	margin-top: .45rem;
	font-size: .84rem;
	color: var(--text-muted);
	text-decoration: none;
	overflow-wrap: anywhere;
}

body.p-fuehrung .fw-team-card__mail:hover, body.p-fuehrung .fw-team-card__mail:focus-visible {
	color: var(--brand);
	text-decoration: underline;
}

body.p-fuehrung .fw-team__contact {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	font-size: .92rem;
	color: var(--text-muted);
}

body.p-fuehrung .fw-team__contact a {
	color: var(--text-strong);
	text-decoration: none;
}

body.p-fuehrung .fw-team__contact a:hover {
	color: var(--brand);
	text-decoration: underline;
}

@media (max-width: 1100px) {
	body.p-fuehrung .fw-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

@media (max-width: 820px) {
	body.p-fuehrung .fw-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.1rem;
	}

}

@media (max-width: 700px) {
	body.p-fuehrung .fw-team {
		padding: 0 1rem 3rem;
	}

	body.p-fuehrung .fw-team-banner {
		min-height: 150px;
	}

	body.p-fuehrung .fw-team__lead {
		margin-bottom: 1.75rem;
		font-size: 1rem;
	}

	body.p-fuehrung .fw-team-card__body {
		padding: .85rem .9rem 1rem;
	}

	body.p-fuehrung .fw-team-card__name {
		font-size: 1rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	body.p-fuehrung .fw-team-card {
		transition: none;
	}

	body.p-fuehrung .fw-team-card:hover {
		transform: none;
	}

}

/* ------------------------------- nur Seite: aktive-wehr */
/* Setzt voraus: Seite aktive-wehr -> CSS-Klasse "p-aktive-wehr" */

body.p-aktive-wehr .fw-crew-banner {
	--banner-h: 30vh;
	--banner-gap: clamp(.75rem, 2vw, 1.5rem);
	--banner-top: clamp(1rem, 3vh, 2rem);
	height: var(--banner-h);
	min-height: 120px;
	margin: var(--banner-top) var(--banner-gap) clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--media-bg, var(--surface-2));
	box-shadow: var(--shadow-sm);
}

body.p-aktive-wehr .fw-crew-banner img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	object-position: center 50%;
}


/* ------------------------------- nur Seite: jugendfeuerwehr */
/* Setzt voraus: Seite jugendfeuerwehr -> CSS-Klasse "p-jugendfeuerwehr" */

body.p-jugendfeuerwehr -Block hier entfallen.
====================================================================
-->

<style>
	
	.fw-crew-banner {
	--banner-h: 30vh;
	--banner-gap: clamp(.75rem, 2vw, 1.5rem);
	--banner-top: clamp(1rem, 3vh, 2rem);
	height: var(--banner-h);
	min-height: 120px;
	margin: var(--banner-top) var(--banner-gap) clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--media-bg, var(--surface-2));
	box-shadow: var(--shadow-sm);
}

body.p-jugendfeuerwehr .fw-crew-banner img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	object-position: center 30%;
}


/* ------------------------------- nur Seite: spielmannszug */
/* Setzt voraus: Seite spielmannszug -> CSS-Klasse "p-spielmannszug" */

body.p-spielmannszug .fw-crew-banner {
	--banner-h: 34vh;
	--banner-focus: 15%;
	--banner-fit: cover;
	--banner-gap: clamp(.75rem, 2vw, 1.5rem);
	--banner-top: clamp(1rem, 3vh, 2rem);
	height: var(--banner-h);
	min-height: 120px;
	margin: var(--banner-top) var(--banner-gap) clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--media-bg, var(--surface-2));
	box-shadow: var(--shadow-sm);
}


/* ------------------------------- nur Seite: historie */
/* Setzt voraus: Seite historie -> CSS-Klasse "p-historie" */

body.p-historie .fw-crew-banner {
	--banner-h: 34vh;
	--banner-focus: 40%;
	--banner-fit: cover;
	--banner-gap: clamp(.75rem, 2vw, 1.5rem);
	--banner-top: clamp(1rem, 3vh, 2rem);
	height: var(--banner-h);
	min-height: 120px;
	margin: var(--banner-top) var(--banner-gap) clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--media-bg, var(--surface-2));
	box-shadow: var(--shadow-sm);
}

body.p-historie .fw-crew__lead {
	max-width: 60ch;
	margin: 0 0 2rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--text-muted);
}

body.p-historie .fw-tl-nav {
	position: sticky;
	top: 70px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 2.5rem;
	padding: .7rem 0;
	background: var(--bg, var(--surface));
	border-bottom: 1px solid var(--line);
}

body.p-historie .fw-tl-nav[hidden] {
	display: none;
}

body.p-historie .fw-tl-nav__btn {
	font: inherit;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .06em;
	padding: .22rem .7rem;
	border-radius: var(--r-chip);
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--text-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

body.p-historie .fw-tl-nav__btn:hover, body.p-historie .fw-tl-nav__btn:focus-visible {
	border-color: var(--brand);
	color: var(--text-strong);
	outline: none;
}

body.p-historie .fw-tl-nav__btn.is-aktiv {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

body.p-historie .fw-tl {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.p-historie .fw-tl::before {
	content: "";
	position: absolute;
	top: .6rem;
	bottom: .6rem;
	left: 6.75rem;
	width: 2px;
	background: linear-gradient(to bottom,
			transparent, var(--line) 2rem, var(--line) calc(100% - 2rem), transparent);
}

body.p-historie .fw-tl__item {
	position: relative;
	display: grid;
	grid-template-columns: 6.75rem minmax(0, 1fr);
	gap: 0 2rem;
	padding: 0 0 2.5rem;
	scroll-margin-top: 8rem;
}

body.p-historie .fw-tl__year {
	position: sticky;
	top: 8.5rem;
	align-self: start;
	margin: 0;
	padding-right: 1.25rem;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--brand);
	text-align: right;
}

body.p-historie .fw-tl__item::before {
	content: "";
	position: absolute;
	top: .55rem;
	left: 6.75rem;
	width: 11px;
	height: 11px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 4px var(--bg, var(--surface));
}

body.p-historie .fw-tl__body {
	min-width: 0;
	max-width: 70ch;
	font-size: 1rem;
	line-height: 1.75;
}

body.p-historie .fw-tl__body p {
	margin: 0 0 1rem;
}

body.p-historie .fw-tl__body p:last-child {
	margin-bottom: 0;
}

body.p-historie .fw-tl__bilder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: .8rem;
	margin: 1.1rem 0 0;
}

body.p-historie .fw-tl__bilder:empty {
	display: none;
}

body.p-historie .fw-tl__bild {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--media-bg, var(--surface-2));
}

body.p-historie .fw-tl__bild img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

body.p-historie .fw-crew__contact {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-top: 1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-2);
	font-size: .92rem;
	color: var(--text-muted);
}

@media (max-width: 700px) {
	body.p-historie .fw-tl::before {
		left: 6px;
	}

	body.p-historie .fw-tl__item {
		grid-template-columns: minmax(0, 1fr);
		gap: .3rem;
		padding-left: 1.75rem;
		padding-bottom: 2rem;
	}

	body.p-historie .fw-tl__item::before {
		left: 6px;
		top: .45rem;
	}

	body.p-historie .fw-tl__year {
		position: static;
		padding-right: 0;
		text-align: left;
		font-size: 1rem;
	}

	body.p-historie .fw-tl-nav {
		top: 0;
	}

}

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

}


/* =============================================================================
 * Banner der Abteilungsseiten
 * -----------------------------------------------------------------------------
 * Jede Seite hatte eine eigene Fassung mit eigener Hoehe in vh und
 * randlosem Ausbruch ueber die volle Fensterbreite. Dadurch stand das
 * Banner auf einer anderen Kante als Kopfzeile, Text und Fusszeile, und
 * die Hoehe sprang auf dem Handy beim Scrollen mit der Browserleiste.
 *
 * Eine Form fuer alle fuenf Seiten. Steht bewusst am Dateiende, damit es
 * die seitenweisen Ausnahmen darueber uebersteuert.
 * =========================================================================== */
.fw-crew-banner,
.fw-team-banner,
body.p-fuehrung .fw-team-banner,
body.p-aktive-wehr .fw-crew-banner,
body.p-jugendfeuerwehr .fw-crew-banner,
body.p-spielmannszug .fw-crew-banner,
body.p-historie .fw-crew-banner {
	/* Flacher und schmaler als zuvor, wie auf "Ueber uns": ueber die
	   volle Fensterbreite und 30vw hoch wirkte das Banner wie ein
	   Plakat und nahm der Ueberschrift darunter die Aufmerksamkeit. */
	height: clamp(180px, 20vw, 380px);
	min-height: 0;

	width: 100%;
	max-width: 1760px;
	margin: var(--s-6) auto var(--s-7);

	overflow: hidden;
	border-radius: var(--r-flaeche);
	background: var(--media-bg);
	box-shadow: var(--kante-hell), var(--shadow-2);
}

.fw-crew-banner img,
.fw-team-banner img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

@media (max-width: 700px) {
	.fw-crew-banner,
	.fw-team-banner {
		height: clamp(150px, 26vh, 240px);
		margin-block: var(--s-5) var(--s-6);
	}
}

/* =============================================================================
 * Der zweite Ton auf den Abteilungsseiten
 * -----------------------------------------------------------------------------
 * Jugendfeuerwehr und Spielmannszug sind nicht Einsatzdienst. Sie
 * bekommen deshalb das Gelbgruen der Leuchtstreifen eurer Fahrzeuge als
 * Markierung, nicht das Einsatzrot. Es steht nur in der Linie unter der
 * Ueberschrift und in den Zwischenbeschriftungen, nie auf einer Flaeche
 * und nie an einem Knopf: eine zweite grosse Farbe wuerde dem Rot seine
 * Bedeutung nehmen.
 * =========================================================================== */
body.p-jugendfeuerwehr .fw-crew-subtitle,
body.p-spielmannszug   .fw-crew-subtitle {
	color: var(--signal-text);
}

body.p-jugendfeuerwehr .fw-crew-group,
body.p-spielmannszug   .fw-crew-group {
	border-top-color: var(--signal-line);
}

body.p-jugendfeuerwehr .fw-crew__title::after,
body.p-spielmannszug   .fw-crew__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-top: var(--s-4);
	border-radius: 2px;
	background: var(--signal);
}


/* =============================================================================
 * Abstand der Banner zum Fensterrand
 * -----------------------------------------------------------------------------
 * Die Banner sassen bis an die Fensterkante, waehrend Ueberschrift und
 * Text darunter den ueblichen Randabstand haben. Dadurch stand das Bild
 * auf einer anderen Kante als alles andere.
 * =========================================================================== */
.fw-crew-banner,
.fw-team-banner {
	width: calc(100% - 2 * var(--rand));
	margin-inline: auto;
}

/* liveblog.css - aus den Inhaltselementen von: liveblog
   Erzeugt beim Aufraeumen. Gemeinsame Regeln stehen einmal,
   Abweichungen einzelner Seiten darunter als Ausnahme. */


/* ------------------------------- nur Seite: liveblog */

/* Der Live-Blog hatte eine eigene Farbwelt mit eigenen Werten fuer hell
   und dunkel: ein zweites Rot (#e32024 statt #d81f26), eigene Graus,
   eigene Schatten. Zwei Farbsysteme auf einer Seite heben sich auf.
   Die Namen bleiben, damit die Regeln darunter unveraendert gelten -
   sie zeigen jetzt auf die Tokens der Seite und wechseln damit den
   Modus von selbst mit. */
:root {
	--ffwlb-acc:        var(--brand);
	--ffwlb-acc-dark:   var(--brand-strong);
	--ffwlb-acc-soft:   var(--brand-soft);
	--ffwlb-acc-ring:   var(--brand-line);
	--ffwlb-ink:        var(--text);
	--ffwlb-head:       var(--text-strong);
	--ffwlb-muted:      var(--text-muted);
	--ffwlb-line:       var(--line);
	--ffwlb-card:       var(--surface);
	--ffwlb-chip:       var(--surface-2);
	--ffwlb-media:      var(--media-bg);
	--ffwlb-radius:     var(--r-flaeche);
	--ffwlb-shadow:     var(--shadow-1);
	--ffwlb-shadow-lift: var(--shadow-2);
}


[data-theme="light"] {
	--ffwlb-ink:#555;
	--ffwlb-head:#2b2b2b;
	--ffwlb-muted:#8a8a8a;
	--ffwlb-line:#e9e7e4;
	--ffwlb-card:#fff;
	--ffwlb-chip:#fafafa;
	--ffwlb-media:#f2f0ee;
}

.ffwlb-head, .ffwlb-filter, .ffwlb-timeline, .ffwlb-section, .ffwlb-section-note, .ffwlb-cta, .ffwlb-foot {
	font-family:var(--font-sans);
	color:var(--ffwlb-ink);
	line-height:1.7;
	max-width:920px;
	margin-left:auto;
	margin-right:auto;
}

.ffwlb-head, .ffwlb-head *, .ffwlb-head *::before, .ffwlb-head *::after, .ffwlb-filter, .ffwlb-filter *, .ffwlb-timeline, .ffwlb-timeline *, .ffwlb-timeline *::before, .ffwlb-timeline *::after, .ffwlb-cta, .ffwlb-cta * {
	box-sizing:border-box;
}

.ffwlb-head {
	text-align:center;
	padding:8px 0 40px;
}

.ffwlb-eyebrow {
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:var(--ffwlb-acc-soft);
	color:var(--ffwlb-acc);
	font-size:.72rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	padding:7px 16px;
	border-radius:var(--r-chip);
	margin-bottom:20px;
}

.ffwlb-pulse {
	width:7px;
	height:7px;
	border-radius:50%;
	flex:none;
	background:var(--ffwlb-acc);
	animation:ffwlb-ping 1.8s ease-out infinite;
}

@keyframes ffwlb-ping {
	0%{ box-shadow:0 0 0 0 rgba(227,32,36,.55);
	}
	70%{ box-shadow:0 0 0 9px rgba(227,32,36,0);
	}
	100%{ box-shadow:0 0 0 0 rgba(227,32,36,0);
	};
}

.ffwlb-head h2 {
	font-family:var(--font-sans);
	font-weight:600;
	font-size:2rem;
	line-height:1.25;
	color:var(--ffwlb-head);
	margin:0 0 16px;
	letter-spacing:-.01em;
}

.ffwlb-underline {
	background:none;
}

.ffwlb-lead {
	max-width:640px;
	margin:0 auto 28px;
}

.ffwlb-stats {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
	margin-bottom:8px;
}

/* Drei Zahlen brauchen keine drei Kaesten. Sie stehen in einer Reihe,
   getrennt durch Luft. */
.ffwlb-stat {
	background:none;
	border:0;
	border-radius:0;
	padding:0 var(--s-5);
	min-width:0;
	box-shadow:none;
	text-align:left;
}

.ffwlb-stat + .ffwlb-stat { border-left:1px solid var(--line); }

.ffwlb-stat b {
	display:block;
	font-family:var(--font-mono);
	font-size:var(--text-2xl);
	font-weight:var(--weight-medium);
	font-variant-numeric:tabular-nums;
	color:var(--text-strong);
	line-height:1.1;
}

.ffwlb-stat span {
	font-family:var(--font-mono);
	font-size:var(--text-2xs);
	text-transform:uppercase;
	letter-spacing:var(--track-label);
	color:var(--text-muted);
}

.ffwlb-filter {
	position:sticky;
	top:0;
	z-index:5;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:center;
	padding:14px 0 18px;
	background:none;
	border:0;
}

.ffwlb-filter button {
	font-family:inherit;
	font-size:.85rem;
	font-weight:600;
	color:var(--ffwlb-ink);
	background:var(--ffwlb-card);
	border:1px solid var(--ffwlb-line);
	border-radius:var(--r-chip);
	padding:8px 18px;
	cursor:pointer;
	transition:all .18s ease;
}

.ffwlb-filter button:hover {
	border-color:var(--ffwlb-acc);
	color:var(--ffwlb-acc);
}

.ffwlb-filter button[aria-pressed="true"] {
	background:var(--ffwlb-acc);
	border-color:var(--ffwlb-acc);
	color:#fff;
	box-shadow:0 4px 14px rgba(227,32,36,.28);
}

.ffwlb-timeline {
	--pad:42px;
	--rail:8px;
	position:relative;
	padding:32px 0 8px var(--pad);
}

.ffwlb-timeline::before {
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:var(--rail);
	transform:translateX(-50%);
	width:2px;
	border-radius:2px;
	background:linear-gradient(180deg,
		var(--ffwlb-acc) 0%, rgba(227,32,36,.35) 35%, var(--ffwlb-line) 100%);
}

.ffwlb-timeline > .empty {
	margin-left:0;
}

.ffwlb-item {
	position:relative;
	margin-bottom:26px;
	float:none;
	width:auto;
}

.ffwlb-item::before {
	content:"";
	position:absolute;
	top:22px;
	left:calc(var(--rail) - var(--pad));
	transform:translateX(-50%);
	width:16px;
	height:16px;
	border-radius:50%;
	background:var(--ffwlb-acc);
	border:3px solid var(--ffwlb-card);
	box-shadow:0 0 0 2px var(--ffwlb-acc-ring);
	transition:box-shadow .2s ease;
	z-index:1;
}

.ffwlb-item.ffwlb-planned::before {
	background:var(--ffwlb-muted);
	box-shadow:0 0 0 2px var(--ffwlb-line);
}

.ffwlb-item.first::before, .ffwlb-timeline .ffwlb-item:first-of-type::before {
	animation:ffwlb-ring 2s ease-out infinite;
}

@keyframes ffwlb-ring {
	0%{ box-shadow:0 0 0 2px rgba(227,32,36,.35);
	}
	70%{ box-shadow:0 0 0 12px rgba(227,32,36,0);
	}
	100%{ box-shadow:0 0 0 2px rgba(227,32,36,0);
	};
}

.ffwlb-card {
	background:var(--ffwlb-card);
	border:1px solid var(--ffwlb-line);
	border-radius:var(--ffwlb-radius);
	padding:26px 28px;
	box-shadow:var(--ffwlb-shadow);
	transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ffwlb-item:hover .ffwlb-card {
	transform:translateY(-3px);
	box-shadow:var(--ffwlb-shadow-lift);
	border-color:rgba(227,32,36,.25);
}

.ffwlb-item.first .ffwlb-card, .ffwlb-timeline .ffwlb-item:first-of-type .ffwlb-card {
	border-color:rgba(227,32,36,.35);
}

.ffwlb-meta {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
	margin-bottom:12px;
}

/* Das Datum war eine rote Pille neben einer Kategorie-Pille. Zwei
   Marken nebeneinander, beide laut. Jetzt eine Zahl in Mono. */
.ffwlb-date {
	background:none;
	color:var(--text-muted);
	font-family:var(--font-mono);
	font-size:var(--text-xs);
	font-weight:var(--weight-normal);
	letter-spacing:.02em;
	padding:0;
	border-radius:0;
	white-space:nowrap;
}

.ffwlb-date time {
	color:inherit;
}

.ffwlb-planned .ffwlb-date {
	background:none;
	opacity:.7;
}

.ffwlb-chip {
	font-size:.68rem;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	padding:4px 11px;
	border-radius:var(--r-chip);
	border:1px solid var(--ffwlb-line);
	color:var(--ffwlb-muted);
	background:var(--ffwlb-chip);
}

.ffwlb-item.first .ffwlb-chip, .ffwlb-timeline .ffwlb-item:first-of-type .ffwlb-chip {
	background:var(--ffwlb-acc-soft);
	color:var(--ffwlb-acc);
	border-color:rgba(227,32,36,.3);
}

.ffwlb-card .ffwlb-title {
	font-family:var(--font-sans);
	font-weight:600;
	font-size:1.22rem;
	line-height:1.4;
	color:var(--ffwlb-head);
	margin:0 0 10px;
}

.ffwlb-card .ffwlb-title a {
	color:inherit;
	text-decoration:none;
}

.ffwlb-card .ffwlb-title a:hover {
	color:var(--ffwlb-acc);
}

.ffwlb-card p {
	color:var(--ffwlb-ink);
}

.ffwlb-card p {
	margin:0 0 14px;
}

.ffwlb-card > *:last-child {
	margin-bottom:0;
}

.ffwlb-card .content-text, .ffwlb-card .content-gallery, .ffwlb-card .content-html, .ffwlb-card .ce_text.block, .ffwlb-card .ce_gallery.block {
	margin:0 0 14px;
}

.ffwlb-card .content-text .rte > *:last-child {
	margin-bottom:0;
}

.ffwlb-slider {
	position:relative;
	margin:18px 0 4px;
	border-radius:10px;
	overflow:hidden;
	background:var(--ffwlb-media);
}

.ffwlb-viewport {
	overflow:hidden;
}

.ffwlb-track {
	display:flex;
	transition:transform .4s cubic-bezier(.4,0,.2,1);
	will-change:transform;
}

.ffwlb-slide {
	flex:0 0 100%;
	margin:0;
	min-width:0;
	position:relative;
}

.ffwlb-slide img {
	display:block;
	width:100%;
	aspect-ratio:16/10;
	object-fit:cover;
	background:var(--ffwlb-media);
	border:0;
	padding:0;
	border-radius:0;
}

.ffwlb-slide figcaption {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:36px 16px 14px;
	color:#fff;
	font-size:.85rem;
	line-height:1.5;
	background:linear-gradient(transparent, rgba(0,0,0,.78));
}

.ffwlb-nav {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:42px;
	height:42px;
	border:0;
	border-radius:50%;
	background:var(--ffwlb-card);
	color:var(--ffwlb-acc);
	font-size:1.3rem;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 4px 14px rgba(0,0,0,.18);
	opacity:0;
	transition:opacity .2s ease, background .2s ease;
}

.ffwlb-slider:hover .ffwlb-nav, .ffwlb-slider:focus-within .ffwlb-nav {
	opacity:1;
}

.ffwlb-nav:hover {
	background:var(--ffwlb-acc);
	color:#fff;
}

.ffwlb-prev {
	left:12px;
}

.ffwlb-next {
	right:12px;
}

.ffwlb-nav[hidden] {
	display:none;
}

@media (hover:none) {
	.ffwlb-nav {
		opacity:1;
	}

}

.ffwlb-bars {
	position:absolute;
	left:14px;
	right:14px;
	top:14px;
	display:flex;
	gap:5px;
}

.ffwlb-bars button {
	flex:1;
	height:3px;
	padding:0;
	cursor:pointer;
	border:0;
	border-radius:2px;
	background:rgba(255,255,255,.45);
	transition:background .2s ease;
}

.ffwlb-bars button[aria-current="true"] {
	background:#fff;
}

.ffwlb-bars[hidden] {
	display:none;
}

.ffwlb-section {
	display:flex;
	align-items:center;
	gap:14px;
	margin:48px auto 4px;
}

.ffwlb-section h3 {
	font-family:var(--font-sans);
	font-weight:600;
	font-size:1.35rem;
	color:var(--ffwlb-head);
	margin:0;
	white-space:nowrap;
}

.ffwlb-section::after {
	content:"";
	flex:1;
	height:1px;
	background:var(--ffwlb-line);
}

.ffwlb-section-note {
	font-size:.87rem;
	color:var(--ffwlb-muted);
	margin:0 auto 4px;
}

.ffwlb-cta {
	margin-top:48px;
	padding:38px 32px;
	text-align:center;
	border-radius:var(--ffwlb-radius);
	background:linear-gradient(135deg, var(--ffwlb-acc) 0%, var(--ffwlb-acc-dark) 100%);
	color:#fff;
	box-shadow:0 16px 40px rgba(227,32,36,.22);
}

.ffwlb-cta h3 {
	font-family:var(--font-sans);
	font-weight:600;
	font-size:1.4rem;
	margin:0 0 10px;
	color:#fff;
}

.ffwlb-cta p {
	margin:0 auto 22px;
	max-width:520px;
	color:rgba(255,255,255,.92);
	font-size:.95rem;
}

.ffwlb-btn-light {
	display:inline-block;
	background:#fff;
	color:var(--ffwlb-acc);
	font-weight:700;
	font-size:.9rem;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none;
	padding:14px 34px;
	border-radius:var(--r-element);
	transition:transform .18s ease, box-shadow .18s ease;
}

.ffwlb-btn-light:hover {
	transform:translateY(-2px);
	box-shadow:0 10px 26px rgba(0,0,0,.22);
	color:var(--ffwlb-acc);
}

.ffwlb-foot {
	text-align:center;
	font-size:.88rem;
	color:var(--ffwlb-muted);
	margin-top:28px;
}

.ffwlb-foot a {
	color:var(--ffwlb-acc);
}

@media only screen and (max-width:767px) {
	.ffwlb-head h2 {
		font-size:1.55rem;
	}

	.ffwlb-timeline {
		--pad:30px;
		--rail:7px;
	}

	.ffwlb-item::before {
		width:14px;
		height:14px;
		top:20px;
	}

	.ffwlb-card {
		padding:20px 18px;
	}

	.ffwlb-stat {
		flex:1 1 40%;
		min-width:0;
		padding:12px 14px;
	}

	.ffwlb-stat b {
		font-size:1.25rem;
	}

	.ffwlb-cta {
		padding:30px 20px;
	}

	.ffwlb-nav {
		width:32px;
		font-size:1.1rem;
	}

}

@media (prefers-reduced-motion:reduce) {
	.ffwlb-head *, .ffwlb-timeline *, .ffwlb-cta * {
		animation:none !important;
		transition:none !important;
	}

}

.ffwlb-timeline > h1, .ffwlb-timeline > h2, .ffwlb-timeline > h3 {
	display:none;
}

.ffwlb-card .info, .ffwlb-card .more {
	display:none;
}

.ffwlb-card .content-gallery li img, .ffwlb-card .content-image img, .ffwlb-card .ce_gallery li img, .ffwlb-card .ce_gallery .gallery-margin img, .ffwlb-card .image_container img {
	border:0;
	padding:0;
	border-radius:0;
}

.ffwlb-card .content-headline, .ffwlb-card .ce_headline {
	font-size:1.05rem;
	font-weight:600;
	color:var(--ffwlb-head);
	margin:0 0 8px;
}

.ffwlb-zoomable {
	cursor:zoom-in;
}

.ffwlb-lb {
	position:fixed;
	inset:0;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(18,18,18,.94);
	padding:64px 24px;
	animation:ffwlb-lb-in .18s ease-out;
}

.ffwlb-lb[hidden] {
	display:none;
}

@keyframes ffwlb-lb-in {
	from{ opacity:0;
	} to{ opacity:1;
	};
}

.ffwlb-lb-figure {
	margin:0;
	max-width:100%;
	max-height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
}

.ffwlb-lb-figure img {
	max-width:100%;
	max-height:78vh;
	width:auto;
	height:auto;
	display:block;
	border-radius:6px;
	box-shadow:0 24px 60px rgba(0,0,0,.5);
	background:#222;
}

.ffwlb-lb-figure figcaption {
	color:rgba(255,255,255,.85);
	font-size:.9rem;
	line-height:1.5;
	text-align:center;
	max-width:700px;
	font-family:var(--font-sans);
}

.ffwlb-lb-figure figcaption[hidden] {
	display:none;
}

.ffwlb-lb-close {
	position:absolute;
	top:18px;
	right:22px;
	width:44px;
	height:44px;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.12);
	color:#fff;
	font-size:1.9rem;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .18s ease;
}

.ffwlb-lb-close:hover {
	background:var(--ffwlb-acc);
}

.ffwlb-lb-nav {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:52px;
	height:52px;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.12);
	color:#fff;
	font-size:1.9rem;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .18s ease;
}

.ffwlb-lb-nav:hover {
	background:var(--ffwlb-acc);
}

.ffwlb-lb-nav[hidden] {
	display:none;
}

.ffwlb-lb-prev {
	left:20px;
}

.ffwlb-lb-next {
	right:20px;
}

.ffwlb-lb-counter {
	position:absolute;
	bottom:22px;
	left:50%;
	transform:translateX(-50%);
	color:rgba(255,255,255,.7);
	font-size:.82rem;
	letter-spacing:.08em;
	font-family:var(--font-sans);
}

.ffwlb-lb-counter[hidden] {
	display:none;
}

@media only screen and (max-width:767px) {
	.ffwlb-lb {
		padding:56px 12px;
	}

	.ffwlb-lb-nav {
		width:42px;
		height:42px;
		font-size:1.5rem;
	}

	.ffwlb-lb-prev {
		left:8px;
	}

	.ffwlb-lb-next {
		right:8px;
	}

	.ffwlb-lb-figure img {
		max-height:70vh;
	}

}

@media (prefers-reduced-motion:reduce) {
	.ffwlb-lb {
		animation:none;
	}

}

.ffwlb-timeline.ffwlb-timeline {
	max-width:920px;
	width:auto;
	margin-left:auto;
	margin-right:auto;
	float:none;
	padding-right:0;
}

.ffwlb-head.ffwlb-head, .ffwlb-filter.ffwlb-filter, .ffwlb-cta.ffwlb-cta, .ffwlb-foot.ffwlb-foot {
	max-width:920px;
	margin-left:auto;
	margin-right:auto;
}

.ffwlb-slide img {
	max-height:520px;
}

.ffwlb-item, .ffwlb-card {
	max-width:100%;
	min-width:0;
}

.ffwlb-card img, .ffwlb-card figure {
	max-width:100%;
	height:auto;
}

.ffwlb-card .ffwlb-slide img {
	height:auto;
}

.ffwlb-date {
	white-space:normal;
}

.ffwlb-head.ffwlb-head, .ffwlb-filter.ffwlb-filter, .ffwlb-timeline.ffwlb-timeline, .ffwlb-cta.ffwlb-cta, .ffwlb-foot.ffwlb-foot {
	max-width:920px !important;
	width:auto !important;
	margin-left:auto !important;
	margin-right:auto !important;
	box-sizing:border-box !important;
}

.ffwlb-timeline.ffwlb-timeline {
	padding-top:32px !important;
	padding-right:0 !important;
	padding-bottom:8px !important;
	padding-left:42px !important;
}

.ffwlb-card.ffwlb-card {
	background:var(--ffwlb-card) !important;
	border:1px solid var(--ffwlb-line) !important;
	border-radius:var(--ffwlb-radius) !important;
	padding:26px 28px !important;
	box-shadow:var(--ffwlb-shadow) !important;
}

.ffwlb-slider.ffwlb-slider {
	border-radius:10px !important;
	overflow:hidden !important;
	margin:18px 0 4px !important;
}

.ffwlb-card.ffwlb-card > * {
	max-width:100%;
}

@media only screen and (max-width:767px) {
	.ffwlb-timeline.ffwlb-timeline {
		padding-left:30px !important;
	}

	.ffwlb-card.ffwlb-card {
		padding:20px 18px !important;
	}

}

.ffwlb-timeline.ffwlb-timeline {
	position:relative !important;
	overflow:visible !important;
}

.ffwlb-timeline.ffwlb-timeline::before {
	content:"" !important;
	display:block !important;
	position:absolute !important;
	top:0 !important;
	bottom:0 !important;
	left:var(--rail, 8px) !important;
	transform:translateX(-50%) !important;
	width:3px !important;
	border-radius:3px !important;
	background:linear-gradient(0deg,
		var(--ffwlb-acc) 0%,
		rgba(227,32,36,.75) 40%,
		rgba(227,32,36,.35) 75%,
		rgba(227,32,36,.15) 100%) !important;
	opacity:1 !important;
	z-index:0 !important;
}

.ffwlb-item {
	--pad:42px;
	--rail:8px;
}

:not(.ffwlb-timeline) > .ffwlb-item {
	max-width:920px;
	margin-left:auto;
	margin-right:auto;
	padding-left:42px;
	box-sizing:border-box;
}

@media only screen and (max-width:767px) {
	:not(.ffwlb-timeline) > .ffwlb-item {
		padding-left:30px;
	}

}

.ffwlb-rail {
	position:absolute !important;
	left:var(--rail, 8px) !important;
	transform:translateX(-50%) !important;
	width:3px !important;
	border-radius:3px !important;
	pointer-events:none !important;
	z-index:0 !important;
	background:linear-gradient(0deg,
		var(--ffwlb-acc, #e32024) 0%,
		rgba(227,32,36,.75) 40%,
		rgba(227,32,36,.35) 75%,
		rgba(227,32,36,.15) 100%) !important;
}

.ffwlb-has-rail {
	position:relative !important;
	overflow:visible !important;
}

.ffwlb-item {
	position:relative;
	z-index:1;
}

.ffwlb-timeline.ffwlb-timeline::before {
	display:none !important;
}



/* =============================================================================
 * Grossansicht wie bei den Neuigkeiten
 * -----------------------------------------------------------------------------
 * Der Live-Blog hatte eine eigene Grossansicht: runde Knoepfe, eigener
 * Dunkelwert, eigene Schattenwerte, eigene Schriftgroessen. Daneben gibt
 * es die Galerie der Nachrichtenseite mit einer anderen Gestaltung. Zwei
 * Bildbetrachter auf einer Seite, die verschieden aussehen, wirken wie
 * zwei verschiedene Webseiten.
 *
 * Diese Regeln ziehen den Live-Blog auf dieselbe Form wie
 * .fw-lightbox in news.css. Die Vorlage bleibt news.css - wer dort etwas
 * aendert, aendert es hier mit.
 *
 * Steht am Dateiende, damit es die Regeln darueber uebersteuert.
 * =========================================================================== */
.ffwlb-lb {
	z-index: var(--z-dialog);
	gap: var(--s-2);
	padding: var(--s-7) var(--s-4) var(--s-8);
	background: rgba(6, 8, 12, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ffwlb-lb-figure {
	gap: var(--s-3);
}

.ffwlb-lb-figure img {
	max-height: 78dvh;
	border-radius: var(--r-flaeche);
	box-shadow: none;
	background: transparent;
}

.ffwlb-lb-figure figcaption {
	max-width: 60ch;
	color: #d7dbe2;
	font-size: var(--text-sm);
}

/* Knoepfe: dieselbe Form wie in der Nachrichtengalerie - eckig
   gerundet, Milchglas, heller Rand. */
.ffwlb-lb-close,
.ffwlb-lb-nav {
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--r-element);
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #f6f7f9;
	font-family: var(--font-sans);
	font-size: 1.4rem;
	font-weight: var(--weight-normal);
	transition: background-color var(--t-schnell) var(--ease),
	            border-color var(--t-schnell) var(--ease),
	            transform var(--t-schnell) var(--ease);
}

.ffwlb-lb-close {
	top: var(--s-4);
	right: var(--s-4);
	width: 2.75rem;
	height: 2.75rem;
}

.ffwlb-lb-nav {
	width: 3rem;
	height: 3rem;
	font-size: 1.6rem;
}

.ffwlb-lb-prev { left: var(--s-4); }
.ffwlb-lb-next { right: var(--s-4); }

.ffwlb-lb-close:hover,
.ffwlb-lb-nav:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.ffwlb-lb-close:active,
.ffwlb-lb-nav:active { transform: translateY(1px); }

.ffwlb-lb-counter {
	bottom: var(--s-5);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: .08em;
	color: rgba(243, 245, 248, .7);
}

/* Der Bilderstreifen im Beitrag bekommt dieselbe Form wie
   .fw-article-gallery__item */
.ffwlb-slider {
	border-radius: var(--r-flaeche);
	background: var(--media-bg);
}

.ffwlb-slide img {
	border-radius: 0;
}

@media (max-width: 767px) {
	.ffwlb-lb { padding: var(--s-4) var(--s-2) var(--s-7); }
	.ffwlb-lb-nav { display: none; }   /* auf dem Handy wird gewischt */
	.ffwlb-lb-figure img { max-height: 70dvh; }
}


/* =============================================================================
 * Schmale Fenster: nichts darf seitlich herausragen
 * -----------------------------------------------------------------------------
 * Der Live-Blog hatte feste Innenabstaende und eine Zeitleiste, die mit
 * einem festen Wert nach links versetzt ist. Auf dem Handy schob das die
 * ganze Seite um einige Pixel nach rechts, und es entstand ein
 * waagrechter Scrollbalken.
 * =========================================================================== */
@media (max-width: 760px) {
	.ffwlb-head,
	.ffwlb-section,
	.ffwlb-timeline,
	.ffwlb-item,
	.ffwlb-card,
	.ffwlb-stats,
	.ffwlb-filter {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Die Zeitleiste hatte links 30px Innenabstand und rechts keinen.
	   Der Beitrag stand dadurch eingerueckt und lief rechts bis an die
	   Fensterkante. Jetzt beidseitig derselbe Randabstand, der Strich
	   sitzt innerhalb davon. */
	/* Das !important ist noetig, weil weiter oben in dieser Datei
	   bereits "padding-left:30px !important" steht. Ein !important
	   schlaegt nur ein anderes !important. */
	.ffwlb-timeline.ffwlb-timeline,
	.ffwlb-has-rail {
		padding-left: calc(var(--rand) + .5rem) !important;
		padding-right: var(--rand) !important;
	}

	/* Strich und Punkte der Zeitleiste sitzen innerhalb des Randes.
	   Vorher ragte der Punkt des ersten Beitrags links aus dem Fenster. */
	.ffwlb-timeline { --rail: 10px; --pad: 10px; }

	.ffwlb-rail { left: calc(var(--rand) - .3rem) !important; }

	/* WARUM HIER NICHT MIT --rail UND --pad GERECHNET WIRD
	   -------------------------------------------------------------
	   Weiter oben in dieser Datei setzt .ffwlb-item die beiden Werte
	   NOCHMAL auf sich selbst (--rail:8px, --pad:42px). Innerhalb
	   eines Beitrags gelten also die Schreibtisch-Werte, nicht die
	   10px/10px der Zeitleiste. Die bisherige Rechnung ergab deshalb
	   left:-38.8px: der Punkt sass gut 16px links AUSSERHALB des
	   Fensters und nicht auf dem Strich.
	   Darum hier direkt aus den beiden Zahlen gerechnet, die auch der
	   Strich und der Innenabstand der Zeitleiste benutzen:
	     Strichmitte   = var(--rand) - .3rem   (vom linken Rand aus)
	     Beitragskante = var(--rand) + .5rem   (padding-left)
	   Die Differenz ist der Abstand vom Beitrag zum Strich. Zusammen
	   mit translateX(-50%) sitzt der Punkt mittig auf der Linie. */
	.ffwlb-timeline .ffwlb-item::before,
	.ffwlb-has-rail .ffwlb-item::before {
		left: calc((var(--rand) - .3rem) - (var(--rand) + .5rem)) !important;
	}

	/* Kopf, Kennzahlen und Fuss hatten keinen eigenen Randabstand. Sie
	   liefen deshalb bis an die Fensterkante, und die Beschriftungen
	   unter den Zahlen waren links angeschnitten. */
	.ffwlb-head,
	.ffwlb-filter,
	.ffwlb-section,
	.ffwlb-section-note,
	.ffwlb-cta,
	.ffwlb-foot {
		padding-left: var(--rand);
		padding-right: var(--rand);
		box-sizing: border-box;
	}

	.ffwlb-stats {
		flex-wrap: wrap;
		gap: var(--s-5) var(--s-4);
		margin-top: var(--s-6);
	}

	.ffwlb-stat {
		padding-inline: 0;
		flex: 1 1 40%;
		min-width: 0;
	}

	.ffwlb-stat + .ffwlb-stat { border-left: 0; }

	.ffwlb-stat span { overflow-wrap: anywhere; }
}


/* =============================================================================
 * Der Nachrichtenleser ist KEIN Liveblog
 * -----------------------------------------------------------------------------
 * Im Markup traegt der Nachrichtenleser dieselben Klassen wie der
 * Liveblog:
 *
 *   <div class="mod_newsreader block ffwlb-timeline ffwlb-has-rail">
 *     <span class="ffwlb-rail"></span>
 *     <div class="fw-article-page"> ... </div>
 *
 * Damit griff weiter oben "max-width:920px; margin-left:auto;
 * margin-right:auto" auch auf den Beitrag. Der stand dadurch als 758px
 * schmale Saeule in der Fenstermitte - und das Bild darin sah aus, als
 * waere es mittig, obwohl es in seiner Spalte ganz links sitzt. Dazu
 * kam der Innenabstand von 42px fuer die Zeitleiste und ein unsichtbarer
 * Zeitstrahl-Strich.
 *
 * Enthaelt ein solcher Block eine .fw-article-page, ist er der
 * Nachrichtenleser und bekommt nichts davon.
 * =========================================================================== */
.ffwlb-timeline:has(.fw-article-page),
.ffwlb-has-rail:has(.fw-article-page),
.mod_newsreader:has(.fw-article-page) {
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	line-height: inherit;
}

/* Strich und Ersatzstrich der Zeitleiste gehoeren nicht in einen Beitrag. */
.ffwlb-timeline:has(.fw-article-page)::before,
.ffwlb-has-rail:has(.fw-article-page) > .ffwlb-rail,
.mod_newsreader:has(.fw-article-page) > .ffwlb-rail {
	display: none !important;
}

/* =============================================================================
 * informationen.css  -  Terminkachel auf der Seite "Informationen"
 * -----------------------------------------------------------------------------
 * WAS SICH GEAENDERT HAT UND WARUM
 *
 * Die Kachel hatte eine eigene Gestaltung mit festen Farben: dunkler
 * Verlauf, helle Schrift, Orange fuer Knoepfe, dazu Blau, Gruen und
 * Violett fuer die fuenf Abteilungen. Im Hellmodus stand damit ein
 * dunkler Block mitten auf einer hellen Seite, und neben dem Rot der
 * Wehr liefen vier weitere Signalfarben.
 *
 * Jetzt: dieselbe Flaeche wie jede andere Karte der Seite, Farben aus
 * den Tokens, hell und dunkel von selbst. Die Abteilungen werden nicht
 * mehr ueber fuenf Farben unterschieden, sondern ueber die Beschriftung
 * selbst - fuenf Farben, die niemand auswendig lernt, sind keine
 * Information.
 *
 * Die Kachel steht ganz rechts am Fensterrand, klebend, laeuft bis zur
 * Fusszeile und
 * scrollt innen. Statt 100vh steht dort jetzt 100dvh: vh rechnet die
 * Browserleiste des Handys mit, dadurch sprang die Hoehe beim Scrollen.
 * =========================================================================== */

/* =============================================================================
 * Die Kachel
 * =========================================================================== */
.kalender-kachel {
	box-sizing: border-box;
	float: right;
	width: min(440px, 100%);

	/* Ganz rechts an den Fensterrand, nur der uebliche Randabstand
	   bleibt stehen. */
	margin: var(--s-6) var(--rand) var(--s-6) var(--s-7);

	position: sticky;
	top: calc(72px + var(--s-4));

	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 72px - var(--s-6));
	min-height: 22rem;
	overflow: hidden;

	padding: var(--s-5);
	color: var(--text);
	background-color: var(--surface);
	background-image: var(--glanz);
	border: 1px solid var(--line);
	border-radius: var(--r-flaeche);
	box-shadow: var(--kante-hell), var(--shadow-2);
}

.kalender-kachel__kopf {
	flex: 0 0 auto;
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--line-soft);
}

.kalender-kachel__titelzeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-2);
}

.kalender-kachel__titelzeile h2,
.kalender-kachel__titelzeile > :first-child {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-strong);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
}

.kalender-kachel__subline {
	margin: 0;
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
	color: var(--text-muted);
}


/* =============================================================================
 * Filter
 * -----------------------------------------------------------------------------
 * Chips sind das einzige Vollrund der Seite. Sie werden an- und
 * abgewaehlt, und genau das sagt die Form.
 * =========================================================================== */
.kalender-filter {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-4) 0 var(--s-3);
}

.kalender-filter__reihe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.kalender-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);

	padding: .3rem .7rem;
	border: 1px solid var(--line);
	border-radius: var(--r-chip);
	background: none;

	font-family: var(--font-sans);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	line-height: 1.3;
	color: var(--text);
	white-space: nowrap;
	cursor: pointer;

	transition: background-color var(--t-schnell) var(--ease),
	            border-color var(--t-schnell) var(--ease),
	            color var(--t-schnell) var(--ease);
}

.kalender-chip:hover { border-color: var(--text-muted); }

.kalender-chip[aria-pressed="true"],
.kalender-chip.is-aktiv {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.kalender-chip:active { transform: translateY(1px); }

/* Die fuenf Abteilungen hatten je eine eigene Farbe. Eine Farbe, die
   man erst lernen muss, ist keine Information - der Name steht ohnehin
   im Chip. Alle gleich. */
.kalender-chip--k1,
.kalender-chip--k2,
.kalender-chip--k3,
.kalender-chip--k4,
.kalender-chip--k5 { background: none; }

.kalender-filter__zaehler {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	color: var(--text-muted);
}


/* =============================================================================
 * Ausfuhr als Kalenderdatei
 * =========================================================================== */
.kalender-export {
	flex: 0 0 auto;
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--line-soft);
}

.kalender-export__knopf {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);

	min-height: 2.25rem;
	padding: 0 var(--s-4);

	border: 1px solid var(--line);
	border-radius: var(--r-element);
	background: none;

	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	color: var(--text-strong);
	cursor: pointer;
	list-style: none;

	transition: border-color var(--t-schnell) var(--ease),
	            color var(--t-schnell) var(--ease);
}

.kalender-export__knopf::-webkit-details-marker { display: none; }

.kalender-export__knopf:hover {
	border-color: var(--text-muted);
}

.kalender-export[open] .kalender-export__knopf {
	border-color: var(--brand-line);
	color: var(--brand-text);
}

.kalender-export__liste {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin-top: var(--s-3);
	padding: var(--s-4);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-element);
	background: var(--surface-2);
	font-size: var(--text-xs);
}

.kalender-export__liste label {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	cursor: pointer;
}


/* =============================================================================
 * Liste der Termine
 * =========================================================================== */
.kalender-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: var(--s-2);
	margin-right: calc(var(--s-2) * -1);
}

.mod_eventlist,
.kalender-scroll .mod_eventlist {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.kalender-item {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--s-4);
	align-items: start;

	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--line-soft);
	background: none;
	border-radius: 0;
}

.kalender-item:last-child { border-bottom: 0; }

/* -------------------------------------------------------- Kalenderblatt */
.kalender-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;

	padding: var(--s-2) 0;
	border: 1px solid var(--line);
	border-radius: var(--r-klein);
	background: none;
	text-align: center;

	/* Termine sind kein Einsatz. Der schmale Strich links traegt deshalb
	   das Gelbgruen der Leuchtstreifen, nicht das Einsatzrot. */
	border-left: 2px solid var(--signal-line);
}

.kalender-date__day {
	font-family: var(--font-mono);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	line-height: 1.1;
	color: var(--text-strong);
}

.kalender-date__month {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.kalender-date__weekday {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	color: var(--text-muted);
}

/* --------------------------------------------------------------- Inhalt */
.kalender-maininfo {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.kalender-title {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: var(--text-strong);
	overflow-wrap: anywhere;
}

.kalender-time-location {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	color: var(--text-muted);
}

.kalender-teaser {
	margin: 0;
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
	color: var(--text-muted);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Die Abteilung steht als Wort da, nicht als Farbe. */
.kalender-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;

	padding: .1rem .45rem;
	border: 1px solid var(--line);
	border-radius: var(--r-klein);
	background: none;

	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-normal);
	letter-spacing: .03em;
	color: var(--text-muted);
	white-space: nowrap;
}

.kalender-badge--k1,
.kalender-badge--k2,
.kalender-badge--k3,
.kalender-badge--k4,
.kalender-badge--k5 {
	background: none;
	color: var(--text-muted);
	border-color: var(--line);
}


/* =============================================================================
 * Schmale Fenster
 * -----------------------------------------------------------------------------
 * Unter 900px steht die Kachel nicht mehr neben dem Text, sondern
 * darueber, in voller Breite und ohne eigene Hoehenbegrenzung.
 * =========================================================================== */
@media (max-width: 900px) {
	.kalender-kachel {
		float: none;
		position: static;
		width: 100%;
		max-height: none;
		min-height: 0;
		margin: 0 0 var(--s-6);
	}

	.kalender-scroll {
		max-height: 60dvh;
		overflow-y: auto;
	}
}

/* =============================================================================
 * ueber-uns.css  -  Seite "Ueber uns"
 * -----------------------------------------------------------------------------
 * Vorher: sechs gleich grosse Kacheln in zwei Reihen, jede mit Rahmen,
 * Schatten, rundem Symbol und einem Link am Fuss. Sechs identische
 * Kaesten sagen dem Auge: hier ist alles gleich wichtig. Dabei ist das
 * hier ein Wegweiser in sechs Bereiche, kein Schaufenster.
 *
 * Jetzt eine zweispaltige Liste mit Haarlinien. Kein Rahmen, kein
 * Schatten, kein Knopf - die ganze Zeile ist der Link. Das Symbol steht
 * neben der Ueberschrift statt darueber, dadurch beginnt jede Zeile auf
 * derselben Hoehe.
 *
 * Die Kopfzeile hatte ausserdem eine kleine Marke "UEBER UNS" direkt
 * ueber der Ueberschrift "Ueber uns". Zweimal dasselbe Wort; die Marke
 * faellt weg.
 * =========================================================================== */

/* =============================================================================
 * Banner
 * =========================================================================== */
/* Das Mannschaftsbild nutzt die volle Fensterbreite. Bei einem Foto mit
   siebzig Personen nebeneinander ist jede verschenkte Breite ein
   Gesicht weniger, das man erkennt. */
/* Schmaler und flacher als zuvor. Ueber die volle Fensterbreite und
   32vw hoch wirkte das Mannschaftsbild wie ein Plakat und nahm der
   Ueberschrift darunter die Aufmerksamkeit. */
.fw-about-banner {
	--banner-h: clamp(180px, 20vw, 380px);
	height: var(--banner-h);
	min-height: 0;
	width: 100%;
	max-width: 1760px;
	margin: var(--s-6) auto var(--s-7);

	overflow: hidden;
	border-radius: var(--r-flaeche);
	background: var(--media-bg);
	box-shadow: var(--kante-hell), var(--shadow-2);
}

/* Das Banner laeuft nicht mehr randlos ueber den Bildschirm, sondern
   steht auf derselben Kante wie Kopfzeile, Text und Fusszeile. */
.fw-about-banner--bleed {
	width: calc(100% - 2 * var(--rand));
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.fw-about-banner img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	object-position: center 42%;
}


/* =============================================================================
 * Kopf
 * =========================================================================== */
/* Der Abstand nach unten war ein ganzer Abschnitt, dazu kam der
   Abstand ueber der Fusszeile - zusammen ein leeres Feld von mehreren
   hundert Pixeln. */
.fw-about {
	width: 100%;
	max-width: 1760px;
	margin: 0 auto;
	padding: 0 var(--rand) var(--s-6);
	color: var(--text);
}

/* Die Marke ueber der Ueberschrift wiederholte nur die Ueberschrift */
.fw-about__kicker { display: none; }

.fw-about__title {
	margin: 0 0 var(--s-5);
	font-size: var(--text-3xl);
	line-height: var(--leading-display);
	letter-spacing: var(--track-display);
	color: var(--text-strong);
}

.fw-about__lead {
	max-width: var(--measure);
	margin: 0 0 var(--s-8);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--text-muted);
}


/* =============================================================================
 * Wegweiser
 * =========================================================================== */
.fw-about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--s-9);
	align-items: stretch;
	padding-top: var(--s-4);
	border-top: 1px solid var(--line);
}

.fw-about-card { display: block; }

.fw-about-card__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: var(--s-5);
	row-gap: var(--s-3);
	align-items: start;

	/* Ohne align-content ziehen sich die Zeilen auseinander, sobald die
	   Nachbarkachel hoeher ist - der Text rutschte dann weit unter die
	   Ueberschrift. Jetzt steht alles oben, der Rest bleibt Luft. */
	align-content: start;

	width: 100%;
	height: 100%;
	padding: var(--s-6) 0;

	border: 0;
	border-bottom: 1px solid var(--line-soft);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
	transition: none;
}

.fw-about-card__link:hover,
.fw-about-card__link:focus-visible {
	transform: none;
	box-shadow: none;
	border-color: var(--line-soft);
}

/* Symbol neben der Ueberschrift, in einem Quadrat wie alle anderen
   Bedienflaechen der Seite. Kein Kreis: Vollrund ist auf dieser Seite
   den Filterchips vorbehalten. */
.fw-about-card__icon {
	grid-row: 1 / 3;
	align-self: start;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;

	border: 1px solid var(--line);
	border-radius: var(--r-element);
	background-color: var(--surface);
	background-image: var(--glanz);
	box-shadow: var(--kante-hell);
	color: var(--text-muted);
	transition: color var(--t-schnell) var(--ease),
	            border-color var(--t-schnell) var(--ease),
	            box-shadow var(--t-schnell) var(--ease);
}

.fw-about-card__link:hover .fw-about-card__icon {
	color: var(--brand-text);
	border-color: var(--brand-line);
	box-shadow: var(--kante-hell), var(--shadow-1);
}

.fw-about-card__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.fw-about-card__title {
	grid-column: 2;
	margin: 0;

	font-size: var(--text-lg);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
	transition: color var(--t-schnell) var(--ease);
}

.fw-about-card__link:hover .fw-about-card__title { color: var(--brand-text); }

.fw-about-card__text {
	grid-column: 2;
	margin: 0;
	max-width: 44ch;
	font-size: var(--text-sm);
	line-height: var(--leading-base);
	color: var(--text-muted);
}

/* Der Link am Fuss jeder Kachel entfaellt: die ganze Zeile ist der Link,
   ein zweiter Link darin waere ein Link im Link. Es bleibt ein Pfeil am
   rechten Rand der Ueberschriftszeile, der beim Zeigen nach rechts
   wandert. Allein auf einer eigenen Zeile sah er aus, als haette jemand
   das Wort davor vergessen. */
.fw-about-card__more {
	grid-column: 3;
	grid-row: 1;
	align-self: center;
	margin: 0;
	padding: 0;
	font-size: 0;
	color: var(--text-muted);
	transition: color var(--t-schnell) var(--ease);
}

.fw-about-card__link:hover .fw-about-card__more { color: var(--brand-text); }

.fw-about-card__more span {
	font-size: var(--text-base);
	line-height: 1;
	font-weight: var(--weight-normal);
	transition: transform var(--t-normal) var(--ease);
}

.fw-about-card__link:hover .fw-about-card__more span,
.fw-about-card__link:focus-visible .fw-about-card__more span {
	transform: translateX(3px);
}


/* =============================================================================
 * Schmale Fenster
 * =========================================================================== */
@media (max-width: 760px) {
	.fw-about__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.fw-about { padding-inline: var(--rand); }

	.fw-about__lead {
		margin-bottom: var(--s-6);
		font-size: var(--text-base);
	}

	.fw-about-card__link { padding: var(--s-4) 0; }
}

@media (prefers-reduced-motion: reduce) {
	.fw-about-card__more span { transition: none; }
}


/* Derselbe Randabstand wie bei den Abteilungsseiten */
.fw-about-banner {
	width: calc(100% - 2 * var(--rand));
	margin-inline: auto;
}


/* =============================================================================
 * Naechster Termin in den Abteilungskacheln
 * -----------------------------------------------------------------------------
 * Die Zeile haengt files/js/termine.js selbst in die Kacheln - das
 * Inhaltselement mit den Kacheln bleibt unangetastet. Welche Kachel
 * welche Abteilung bekommt, steht in der Tabelle KARTEN oben in
 * termine.js.
 *
 * Ohne Termin bleibt die Zeile unsichtbar UND ohne Hoehe, sonst stuenden
 * die Kacheln ungleich hoch nebeneinander.
 * =========================================================================== */
.fw-karte-termin {
	display: none;

	/* Die Kachel ist ein Raster "Symbol | Text | Pfeil". Ohne diese
	   Zuweisung landete die Zeile in der Pfeilspalte und wurde rechts
	   abgeschnitten. Spalte 2, also unter dem Text. */
	grid-column: 2;
	grid-row: 3;

	margin: var(--s-2) 0 0;
	padding: var(--s-3) 0 var(--s-3) var(--s-4);
	border-left: 2px solid var(--signal-line, var(--line));
}

.fw-karte-termin[data-gefuellt="ja"] { display: block; }

.fw-karte-termin .fw-termine {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-karte-termin .fw-termin {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.fw-karte-termin .fw-termin__wann {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.fw-karte-termin .fw-termin__titel {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	color: var(--text-strong);
	overflow-wrap: anywhere;
}

.fw-karte-termin .fw-termin__wo {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	color: var(--text-muted);
}

/* =============================================================================
 * mitglied-werden.css  -  Seite "Mitglied werden"
 * -----------------------------------------------------------------------------
 * Gehoert zum Inhaltselement inhaltselemente/mitglied-werden.html.
 *
 * Form: dieselbe Sprache wie der Rest der Seite. Keine bunten Kacheln,
 * keine Symbole, keine Schatten auf allem. Die vier Abteilungen stehen
 * als Verzeichnis nebeneinander, getrennt durch Haarlinien, wie auf
 * "Ueber uns". Die Marke taucht genau einmal auf: im Hauptknopf.
 * =========================================================================== */

.fw-mitwerden {
	width: 100%;
	max-width: var(--breite);
	margin: 0;
	/* Unten nur wenig Luft: direkt darunter steht das Formular als
	   zweites Inhaltselement. Der ganze Abschnittsabstand haette ein
	   Loch zwischen Einleitung und erstem Feld gerissen. */
	padding: var(--s-7) var(--rand) var(--s-7);
	color: var(--text);
}


/* =============================================================================
 * Kopf
 * =========================================================================== */
.fw-mitwerden__kopf {
	max-width: 54ch;
	margin: 0 0 var(--s-8);
}

.fw-mitwerden__titel {
	margin: 0 0 var(--s-5);
	font-size: var(--text-3xl);
	font-weight: var(--weight-strong);
	line-height: var(--leading-display);
	letter-spacing: var(--track-display);
	color: var(--text-strong);
	text-wrap: balance;
}

.fw-mitwerden__lead {
	margin: 0 0 var(--s-6);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--text-muted);
	text-wrap: pretty;
}

.fw-mitwerden__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}


/* =============================================================================
 * Die vier Abteilungen
 * -----------------------------------------------------------------------------
 * Vier Spalten auf breiten Schirmen, zwei in der Mitte, eine auf dem
 * Telefon. Getrennt wird mit einer Haarlinie oben, nicht mit einem
 * Rahmen rundherum: ein Kasten um jeden Eintrag haette vier Kaesten
 * nebeneinander ergeben, und das liest sich als Formular, nicht als
 * Verzeichnis.
 * =========================================================================== */
.fw-mitwerden__wege {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-6) var(--s-7);
	margin: 0 0 var(--s-8);
}

.fw-weg {
	padding-top: var(--s-5);
	border-top: 1px solid var(--line);
	min-width: 0;
}

.fw-weg__alter {
	margin: 0 0 var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-normal);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.fw-weg__titel {
	margin: 0 0 var(--s-3);
	font-size: var(--text-xl);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
}

.fw-weg__text {
	margin: 0 0 var(--s-4);
	font-size: var(--text-sm);
	line-height: var(--leading-base);
	color: var(--text);
	text-wrap: pretty;
}

/* Die Striche sind das Aufzaehlungszeichen. Punkte oder Haken waeren
   eine zweite Formensprache neben den Haarlinien darueber. */
.fw-weg__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-weg__liste li {
	position: relative;
	margin: 0 0 var(--s-2);
	padding-left: var(--s-4);
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
	color: var(--text-muted);
}

.fw-weg__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .5rem;
	height: 1px;
	background: var(--line);
}


/* Der Titel ist jetzt ein Link auf die Abteilungsseite. Keine blaue
   Schrift, kein Unterstrich im Ruhezustand: die Ueberschrift soll eine
   Ueberschrift bleiben. Dass es weitergeht, zeigt der Pfeil. */
.fw-weg__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--t-schnell) var(--ease);
}

.fw-weg__link::after {
	content: " \2192";
	display: inline-block;
	margin-left: .35em;
	color: var(--text-muted);
	transition: transform var(--t-schnell) var(--ease),
	            color var(--t-schnell) var(--ease);
}

.fw-weg__link:hover { color: var(--brand-text); }
.fw-weg__link:hover::after {
	color: var(--brand-text);
	transform: translateX(.2em);
}

.fw-weg__link:focus-visible {
	outline: 2px solid var(--brand-text);
	outline-offset: 3px;
	border-radius: var(--r-klein);
}


/* -----------------------------------------------------------------------------
 * Naechster Termin
 * -----------------------------------------------------------------------------
 * Gefuellt wird die Zeile vom Skript im Inhaltselement. Leer bleibt sie
 * unsichtbar UND ohne Hoehe - sonst risse ein leerer Kasten die drei
 * Spalten ungleich weit auseinander.
 * --------------------------------------------------------------------------- */
.fw-weg__termin {
	display: none;
	margin: 0 0 var(--s-4);
	padding: var(--s-3) 0 var(--s-3) var(--s-4);
	border-left: 2px solid var(--signal-line, var(--line));
}

.fw-weg__termin[data-gefuellt="ja"] { display: block; }

.fw-weg__termin-was {
	display: block;
	margin-bottom: var(--s-1);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.fw-weg__termin-wann {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-strong);
}

.fw-weg__termin-titel {
	display: block;
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
	color: var(--text-muted);
}


/* =============================================================================
 * So geht es los
 * =========================================================================== */
.fw-mitwerden__ablauf {
	margin: 0 0 var(--s-8);
	padding-top: var(--s-6);
	border-top: 1px solid var(--line-soft);
}

.fw-mitwerden__ablauf .label {
	display: block;
	margin: 0 0 var(--s-6);
}

.fw-schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--s-6) var(--s-7);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fw-schritt { min-width: 0; }

.fw-schritt__nr {
	margin: 0 0 var(--s-3);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.fw-schritt__titel {
	margin: 0 0 var(--s-2);
	font-size: var(--text-lg);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
}

.fw-schritt__text {
	margin: 0;
	max-width: 42ch;
	font-size: var(--text-sm);
	line-height: var(--leading-base);
	color: var(--text-muted);
	text-wrap: pretty;
}


/* =============================================================================
 * Kontakt
 * -----------------------------------------------------------------------------
 * Nur noch Ueberschrift und Einleitung. Anschrift, Rufnummer und
 * Mailadresse sind hier weg - sie stehen ohnehin in der Fusszeile, und
 * wer schreiben will, nimmt das Formular direkt darunter.
 *
 * Gestapelt statt zweispaltig: Das Formular ist ein eigenes
 * Inhaltselement und damit ein Geschwister dieses Abschnitts. Zwei
 * Inhaltselemente lassen sich nicht in ein gemeinsames Raster legen.
 * =========================================================================== */
.fw-mitwerden__kontakt {
	padding-top: var(--s-6);
	border-top: 1px solid var(--line-soft);
}

.fw-mitwerden__kontakt .label {
	display: block;
	margin: 0 0 var(--s-4);
}

/* Reine Huelle, siehe Kommentar im Inhaltselement. */
.fw-kontakt__text { max-width: 60ch; }

.fw-kontakt__titel {
	margin: 0 0 var(--s-3);
	font-size: var(--text-2xl);
	font-weight: var(--weight-strong);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
	text-wrap: balance;
}

.fw-kontakt__lead {
	margin: 0;
	max-width: 48ch;
	font-size: var(--text-base);
	line-height: var(--leading-base);
	color: var(--text-muted);
	text-wrap: pretty;
}


/* =============================================================================
 * Das Formular
 * -----------------------------------------------------------------------------
 * Das ist ein echtes Contao-Formular aus dem Formulargenerator. Von Hand
 * geschrieben koennte es nicht abschicken: Contao verlangt ein
 * Sicherheitsmerkmal, das nur der Generator mitgibt.
 *
 * Die Klassen hier unten (.widget, .formbody, .submit ...) gibt Contao
 * selbst aus - deshalb sehen sie anders aus als der Rest dieser Datei.
 *
 * ZWEI WEGE, DAMIT DIESE REGELN GREIFEN
 *   1. .fw-formular
 *      Die CSS-Klasse am Inhaltselement (Reiter "Experte"). Der saubere
 *      Weg - damit laesst sich das Formular auch auf anderen Seiten so
 *      gestalten.
 *   2. body:has(.fw-mitwerden) .ce_form
 *      Der Notnagel: Steht auf der Seite der Abschnitt "Mitglied
 *      werden", ist das Formular darunter gemeint - auch ohne Klasse.
 *      Beim ersten Einbauen wird die Klasse leicht vergessen, und ein
 *      Formular ohne jede Gestaltung sieht aus wie ein Fehler.
 *
 * Auf allen anderen Seiten bleibt jedes Formular unberuehrt.
 * =========================================================================== */
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) {
	width: 100%;
	max-width: var(--breite);
	margin: 0;
	padding: 0 var(--rand) var(--abschnitt);
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .formbody {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s-5) var(--s-6);
	max-width: 760px;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Langes Feld, Einwilligung und Knopf brauchen die ganze Breite. */
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-textarea,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-checkbox,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-explanation,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-submit,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-captcha { grid-column: 1 / -1; }

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget { min-width: 0; }

/* Contao setzt die Einwilligung in ein <fieldset>. Der Browser malt
   darum von Haus aus einen Rahmen - der sah aus wie ein zweiter
   Kasten im Formular. */
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) label {
	display: block;
	margin: 0 0 var(--s-2);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Das Sternchen fuer Pflichtfelder ist schon Information genug - es
   muss nicht auch noch rot leuchten. */
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) label .mandatory { color: var(--text-muted); }
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) label .invisible {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input[type="text"],
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input[type="email"],
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input[type="tel"],
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) select,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--s-3) var(--s-4);

	font-family: inherit;
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--text-strong);

	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-element);
	box-shadow: var(--kante-hell);

	transition: border-color var(--t-schnell) var(--ease),
	            box-shadow var(--t-schnell) var(--ease);
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) textarea {
	min-height: 9rem;
	resize: vertical;
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input:hover,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) select:hover,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) textarea:hover { border-color: var(--text-muted); }

/* Derselbe Fokusrahmen wie ueberall sonst (01-grundlagen.css). Ein
   eigener Ring nur fuer Formularfelder waere eine zweite Sprache. */
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input:focus-visible,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) select:focus-visible,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) textarea:focus-visible {
	border-color: var(--brand-text);
}

/* Die Einwilligung ist eine Zeile, kein Formularfeld mit Ueberschrift. */
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-checkbox label,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .checkbox_container label {
	display: inline;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	letter-spacing: normal;
	text-transform: none;
	color: var(--text-muted);
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-checkbox > legend,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) fieldset legend {
	display: none;
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin: .15rem var(--s-3) 0 0;
	accent-color: var(--brand);
	vertical-align: top;
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-checkbox span,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .checkbox_container > span {
	display: flex;
	align-items: flex-start;
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .widget-submit { margin-top: var(--s-2); }

/* Derselbe Knopf wie ueberall sonst auf der Seite. */
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) button.submit,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input.submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: var(--s-3) var(--s-6);

	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-tight);

	color: var(--brand-ink);
	background: var(--brand);
	border: 1px solid transparent;
	border-radius: var(--r-chip);
	box-shadow: var(--shadow-1);
	cursor: pointer;

	transition: transform var(--t-schnell) var(--ease),
	            filter var(--t-schnell) var(--ease);
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) button.submit:hover,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input.submit:hover { filter: brightness(1.06); }
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) button.submit:active,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input.submit:active { transform: scale(.98); }

/* Fehlermeldung und Bestaetigung */
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) p.error,
:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .error {
	margin: var(--s-2) 0 0;
	font-size: var(--text-xs);
	color: var(--brand-text);
}

:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) .confirmation {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--s-5) var(--s-6);
	font-size: var(--text-base);
	color: var(--text-strong);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r-flaeche);
}

@media (prefers-reduced-motion: reduce) {
	:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) button.submit:active,
	:is(.fw-formular, body:has(.fw-mitwerden) .ce_form) input.submit:active { transform: none; }
}

/* =============================================================================
 * kopf-fuss.css  -  Kopfzeile, Navigation, Fusszeile
 * -----------------------------------------------------------------------------
 * Diese Datei besitzt den Rahmen der Seite allein. Sie laedt nach
 * global.css und gewinnt deshalb, wo sich beide ueberschneiden.
 *
 * WAS SICH GEAENDERT HAT
 *
 * Die Navigation war eine Reihe gefuellter Pillen mit Schatten, die
 * aktuelle Seite eine rote Pille. Sieben rote und graue Kapseln
 * nebeneinander lenken vom Logo ab und sehen aus wie eine App-Leiste.
 * Jetzt: schlichte Schrift, die aktuelle Seite in Rot mit einem feinen
 * Strich darunter. Das Rot bedeutet damit ueberall dasselbe - "hier
 * bist du" oder "hier klickst du" - und nicht einmal dies und einmal das.
 *
 * Die Fusszeile hatte drei Ueberschriften in Grossbuchstaben
 * nebeneinander. Jetzt eine Ueberschrift und zwei Wegweiser, klar
 * unterschieden.
 * =========================================================================== */

/* =============================================================================
 * Kopfzeile
 * =========================================================================== */
/* Die Hoehe der Kopfzeile steht EINMAL hier. Das Vollbildmenue fuer
   Handys haelt mit demselben Wert Abstand nach oben. Vorher standen
   beide Werte getrennt in zwei Dateien: Die Kopfzeile war auf dem Handy
   68px hoch, das Menue rechnete mit 80px - der erste Menuepunkt lag
   dadurch ueber dem Logo. */
:root { --kopf-hoehe: 80px; }

@media (max-width: 560px) {
	:root { --kopf-hoehe: 68px; }
}

.header-wrapper {
	position: sticky;
	top: 0;
	z-index: var(--z-kopf);

	background: transparent;
	border-bottom: 1px solid var(--line-soft);
}

/* MILCHGLAS ALS EIGENE EBENE
   Der Weichzeichner sitzt auf einem ::before und nicht auf der
   Kopfzeile selbst. Grund: Ein Element mit backdrop-filter wird zum
   Bezugsrahmen fuer alles, was darin "position: fixed" ist. Das
   Vollbildmenue fuer Handys haengt im selben Container - es wurde
   dadurch auf die Hoehe der Kopfzeile eingesperrt und liess sich
   nicht mehr oeffnen. Auf einem Pseudoelement hat der Weichzeichner
   diese Nebenwirkung nicht. */
.header-wrapper::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;

	background: color-mix(in srgb, var(--bg) 72%, transparent);
	backdrop-filter: saturate(1.8) blur(20px);
	-webkit-backdrop-filter: saturate(1.8) blur(20px);
}

/* Der Inhalt der Leiste liegt ueber dem Milchglas */
.site-header { position: relative; z-index: 1; }

/* Das geoeffnete Menue liegt ueber der Seite, aber unter der Leiste,
   damit derselbe Knopf es wieder schliesst. */
.mobile-nav { z-index: 0; }

/* Wo der Hintergrund nicht durchscheinen darf, bleibt die Flaeche voll */
@supports not (backdrop-filter: blur(1px)) {
	.header-wrapper::before { background: var(--bg); }
}

.site-header {
	display: flex;
	align-items: center;
	gap: var(--s-5);

	width: 100%;
	max-width: var(--breite);
	min-height: var(--kopf-hoehe);
	margin-inline: auto;
	padding-inline: var(--rand);
}

.site-header .logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.site-header .logo a {
	display: block;
	line-height: 0;
	text-decoration: none;
}

/* Kein display hier! Welches der beiden Logos sichtbar ist, entscheiden
   die Regeln ganz unten - diese Regel wuerde sie sonst ueberstimmen und
   beide Fassungen untereinander zeigen. */
.site-header .logo img {
	height: 50px;
	width: auto;
}

/* ------------------------------------------------------------ Navigation */
.site-header .main-nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

.site-header .main-nav ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(.9rem, 1.6vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header .main-nav li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.site-header .main-nav li::before,
.site-header .main-nav li::after,
.site-header .main-nav a::before {
	content: none;
}

.site-header .main-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;

	padding: var(--s-2) 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-tight);
	line-height: 1.2;
	white-space: nowrap;

	color: var(--text);
	background: none;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	transition: color var(--t-schnell) var(--ease);
}

/* Der Strich unter dem Eintrag waechst von der Mitte nach aussen. Er
   zeigt an, wo der Zeiger steht, und sonst nichts. */
.site-header .main-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--t-normal) var(--ease);
}

.site-header .main-nav a:hover { color: var(--text-strong); }
.site-header .main-nav a:hover::after { transform: scaleX(1); }

/* Aktuelle Seite: Farbe und ein stehender Strich, keine gefuellte Pille */
.site-header .main-nav a.active,
.site-header .main-nav a[aria-current="page"],
.site-header .main-nav li.active > a,
.site-header .main-nav li.trail > a {
	color: var(--brand-text);
	background: none;
	font-weight: var(--weight-strong);
}

.site-header .main-nav a.active::after,
.site-header .main-nav a[aria-current="page"]::after,
.site-header .main-nav li.active > a::after,
.site-header .main-nav li.trail > a::after {
	transform: scaleX(1);
}

.site-header .main-nav a:active { transform: translateY(1px); }

/* ----------------------------------------------------------- Umschalter */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;

	background: none;
	border: 1px solid var(--line);
	border-radius: var(--r-element);
	color: var(--text-strong);
	cursor: pointer;
	transition: border-color var(--t-schnell) var(--ease);
}

.nav-toggle:hover { border-color: var(--text-muted); }

.nav-toggle-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 18px;
}

.nav-toggle-line {
	display: block;
	height: 1.5px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--t-normal) var(--ease),
	            opacity var(--t-schnell) var(--ease);
}

/* Offen: aus drei Strichen wird ein Kreuz */
.nav-toggle--open .nav-toggle-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle--open .nav-toggle-line:nth-child(2) { opacity: 0; }
.nav-toggle--open .nav-toggle-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Das Skript der Kopfzeile misst, ob die Navigation in eine Zeile passt,
   und setzt sonst is-compact. Der Umbruchpunkt haengt damit am Inhalt
   und nicht an einer geratenen Pixelzahl. */
.header-wrapper.is-compact .main-nav { display: none; }
.header-wrapper.is-compact .nav-toggle { display: inline-flex; }
.header-wrapper.is-compact .mobile-nav.mobile-nav--open { display: flex; }


/* =============================================================================
 * Fusszeile
 * =========================================================================== */
/* Frueher ein ganzer Abschnitt Abstand. Zusammen mit dem Abstand, den
   die Seiten selbst nach unten haben, ergab das ein leeres Feld vor der
   Fusszeile. */
.site-footer {
	margin-top: var(--s-7);
	border-top: 1px solid var(--line);
	background: var(--bg);
}

/* Die Fusszeile nutzt die volle Fensterbreite. Die Karte bekommt dabei
   die breiteste Spalte: sie ist das einzige Element darin, das von
   Flaeche wirklich profitiert. */
.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1.4fr);
	gap: var(--s-7) var(--s-8);

	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding: var(--s-8) var(--rand) var(--s-7);
}

/* Der Name des Vereins ist eine Ueberschrift, kein Wegweiser */
.site-footer__title {
	margin: 0 0 var(--s-4);
	font-size: var(--text-lg);
	font-weight: var(--weight-strong);
	letter-spacing: var(--track-tight);
	text-transform: none;
	color: var(--text-strong);
}

/* "Social Media" und "So finden Sie uns" sind Wegweiser ueber einer
   Spalte. Dieselbe Form wie alle Beschriftungen der Seite. */
.site-footer__subtitle {
	margin: 0 0 var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.site-footer__text {
	margin: 0 0 var(--s-3);
	font-size: var(--text-sm);
	line-height: var(--leading-base);
	color: var(--text-muted);
}

.site-footer__text:last-child { margin-bottom: 0; }

.site-footer a {
	color: var(--text);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--brand-text);
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* Telefon und Mailadresse in Mono: man liest sie Zeichen fuer Zeichen,
   nicht als Wort. */
.site-footer__text a[href^="tel:"],
.site-footer__text a[href^="mailto:"] {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-strong);
}

/* ------------------------------------------------------- Soziale Symbole */
.site-footer__social {
	display: flex;
	gap: var(--s-3);
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;

	border: 1px solid var(--line);
	border-radius: var(--r-element);
	background-color: var(--surface);
	background-image: var(--glanz);
	box-shadow: var(--kante-hell);
	color: var(--text);

	transition: border-color var(--t-schnell) var(--ease),
	            color var(--t-schnell) var(--ease),
	            transform var(--t-schnell) var(--ease);
}

.social-icon:hover {
	border-color: var(--brand-line);
	color: var(--brand-text);
}

.social-icon:active { transform: translateY(1px); }

/* --------------------------------------------------------------- Karte */
.site-footer__col--map { margin-right: 0; }

.site-footer__map-box {
	margin-top: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-flaeche);
	background: var(--media-bg);
	box-shadow: var(--kante-hell), var(--shadow-1);
	overflow: hidden;
}

.site-footer__map-frame {
	position: relative;
	aspect-ratio: 16 / 7;
	width: 100%;
}

/* Der iframe bekommt die Rundung selbst. "overflow: hidden" am
   Elternelement greift bei einem iframe nicht zuverlaessig, deshalb
   sass die Karte im Hellmodus eckig in einer runden Flaeche. */
.site-footer__map-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--r-flaeche);
}

/* Die Karte laedt von selbst, sobald die Fusszeile in die Naehe des
   Sichtfensters kommt. Dieser Knopf ist nur noch die Rueckfallebene,
   falls das Skript nicht laeuft. */
.site-footer__map-load {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	padding: var(--s-4);

	border: 0;
	background: none;
	color: var(--text-muted);
	font: inherit;
	font-size: var(--text-xs);
	text-align: center;
	cursor: pointer;
}

.site-footer__map-load strong {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s-5);
	border-radius: var(--r-element);
	background: var(--brand);
	color: var(--brand-ink);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.site-footer__map-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	margin: var(--s-3) 0 0;
	font-size: var(--text-xs);
}

/* ----------------------------------------------------------- Untere Leiste */
/* Im Markup steht hier ein einzelnes <p class="site-footer__copy"> mit
   Jahr, Impressum und Datenschutz darin. Die vorige Regel suchte ein
   div und traf deshalb nichts - die Zeile klebte ohne Abstand am linken
   Fensterrand. */
.site-footer__bottom {
	border-top: 1px solid var(--line-soft);
	background: var(--surface-2);
}

.site-footer__copy,
.site-footer__bottom-inner,
.site-footer__bottom > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-5);

	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: var(--s-4) var(--rand);

	font-size: var(--text-xs);
	color: var(--text-muted);
}

/* Die Rechtslinks stehen rechts, der Hinweis links */
.site-footer__copy a { margin-left: 0; }

.site-footer__copy a:first-of-type { margin-left: auto; }

.site-footer__copy a {
	color: var(--text);
	text-decoration: none;
}

.site-footer__copy a:hover {
	color: var(--brand-text);
	text-decoration: underline;
	text-underline-offset: .18em;
}


/* =============================================================================
 * Schmale Fenster
 * =========================================================================== */
@media (max-width: 900px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-6);
		padding-top: var(--s-7);
	}

	.site-footer__map-frame { aspect-ratio: 3 / 2; }

	/* Im Markup ist die Fusszeile EIN <p class="site-footer__copy"> mit
	   Rechtshinweis und den beiden Links darin. Auf dem Schreibtisch
	   steht der Hinweis links und die Links rechts (margin-left:auto).
	   Auf dem Telefon ergab das zwei gegenlaeufig ausgerichtete Zeilen -
	   es sah aus, als waere etwas verrutscht. Hier also: alles mittig,
	   margin-left:auto zurueckgenommen, Schrift auf .72rem.
	   Damit steht der Rechtshinweis in EINER Zeile (342px Text bei
	   366px Platz) und die Links in der zweiten. Alles zusammen in eine
	   einzige Zeile passt bei 390px nicht, ohne die Schrift unleserlich
	   klein zu machen. Wer wirklich eine Zeile will, kuerzt den Satz im
	   Fusszeilen-Element auf "(c) 2026 Feuerwehr Unterensingen" - dann
	   passt alles nebeneinander, ohne dass hier etwas geaendert wird. */
	.site-footer__bottom {
		padding-block: var(--s-4);
		text-align: center;
	}

	.site-footer__copy,
	.site-footer__bottom-inner,
	.site-footer__bottom > div {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--s-1) var(--s-3);
		padding: var(--s-3) var(--s-3);
		margin: 0;
		font-size: var(--text-2xs);
		line-height: 1.5;
		text-align: center;
	}

	/* Sonst schiebt margin-left:auto die Links aus der Mitte. */
	.site-footer__copy a,
	.site-footer__copy a:first-of-type {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 560px) {
	/* min-height kommt aus --kopf-hoehe, siehe ganz oben */
	.site-header .logo img { height: 40px; }
}


/* =============================================================================
 * Logo
 * -----------------------------------------------------------------------------
 * Zwei Dateien, eine fuer hell, eine fuer dunkel. Welche sichtbar ist,
 * entscheidet der Modus. Die Regeln stehen hier und nicht in global.css,
 * weil kopf-fuss.css spaeter laedt: dort wurden sie von der Groessenregel
 * fuer .site-header .logo img ueberstimmt, und man sah beide Logos
 * untereinander.
 * =========================================================================== */
.site-header .logo img.logo__img--on-dark  { display: none; }
.site-header .logo img.logo__img--on-light { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-header .logo img.logo__img--on-dark  { display: block; }
	:root:not([data-theme="light"]) .site-header .logo img.logo__img--on-light { display: none; }
}

[data-theme="dark"]  .site-header .logo img.logo__img--on-dark  { display: block; }
[data-theme="dark"]  .site-header .logo img.logo__img--on-light { display: none; }
[data-theme="light"] .site-header .logo img.logo__img--on-dark  { display: none; }
[data-theme="light"] .site-header .logo img.logo__img--on-light { display: block; }

/* =============================================================================
 * mobilnav.css  -  Vollbild-Navigation fuer Handy und schmale Fenster
 * -----------------------------------------------------------------------------
 * Ersetzt in global.css den Abschnitt "Mobiles Menue, direkt unter der
 * Kopfzeile" (die Regeln .mobile-nav, .mobile-nav--open, .mobile-nav ul,
 * .mobile-nav a). Alles andere dort bleibt.
 *
 * Das Navigationsmodul in Contao bleibt unveraendert: Es gibt weiterhin
 * .mobile-nav mit einer ul aus, und der vorhandene Umschalter setzt
 * weiterhin .mobile-nav--open. Hier wird nur anders gestaltet.
 *
 * Den Unterbau - Schnellzugriffe und letzte Einsaetze - ergaenzt das
 * Script aus mobilnav.html. Laeuft das nicht, bleibt die Navigation
 * trotzdem vollstaendig bedienbar.
 *
 * Farben kommen aus 00-design-tokens.css, also hell und dunkel.
 * =========================================================================== */

/* ---------------------------------------------------------------- Flaeche */
/* Vollbild unterhalb der Kopfzeile. Die Kopfzeile liegt mit z-index 20
   darueber und bleibt sichtbar - so schliesst derselbe Knopf das Menue
   wieder, mit dem es geoeffnet wurde. */
.mobile-nav {
	display: none;
	position: fixed;
	/* Ueber die ganze Hoehe, nicht erst unterhalb der Kopfzeile. Mit
	   einem festen Versatz blieb bei abweichender Kopfzeilenhoehe ein
	   Spalt, durch den man die Seite darunter erwischt hat. Der Platz
	   fuer die Kopfzeile kommt jetzt als Innenabstand, die Leiste
	   selbst liegt mit eigenem z-index darueber und bleibt bedienbar. */
	inset: 0;
	padding-top: var(--kopf-hoehe, 80px);
	z-index: 0;

	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;

	background: var(--menu-bg);
	border-bottom: none;
	backdrop-filter: saturate(1.4) blur(16px);
	-webkit-backdrop-filter: saturate(1.4) blur(16px);
}

.mobile-nav--open {
	display: flex;
	animation: mobilnav-auf .18s ease-out;
}

@keyframes mobilnav-auf {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mobile-nav--open { animation: none; }
}

/* Seite dahinter nicht mitscrollen lassen - setzt das Script */
body.nav-offen {
	overflow: hidden;
}

/* ------------------------------------------------------------- Hauptmenue */
/* Feine Zeilen statt gefuellter Kacheln: nur eine Haarlinie zwischen den
   Eintraegen, leichte Schrift, viel Luft. Der Akzent sitzt in der
   Farbe, nicht im Gewicht. */
.mobile-nav ul {
	list-style: none;
	padding: 1.75rem 1.5rem .5rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1 1 auto;             /* schiebt den Unterbau nach unten */
}

.mobile-nav ul a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;

	color: var(--menu-item-ink);
	text-decoration: none;
	font-size: var(--text-lg);
	font-weight: 400;
	letter-spacing: .01em;
	line-height: 1.3;

	padding: .95rem .25rem;
	border: 0;
	border-bottom: 1px solid var(--line-soft, var(--line));
	background: none;
	border-radius: 0;
	transition: color .15s ease, padding-left .15s ease;
}

.mobile-nav ul li:last-child a {
	border-bottom: 0;
}

/* Pfeil rechts an jedem Eintrag - nur im Hauptmenue, nicht an den
   Kacheln im Unterbau */
.mobile-nav ul a::after {
	content: "";
	flex: 0 0 auto;
	width: .45rem;
	height: .45rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	opacity: .3;
	transition: opacity .15s ease, transform .15s ease;
}

.mobile-nav ul a:hover,
.mobile-nav ul a:focus {
	color: var(--brand);
	padding-left: .5rem;
	background: none;
	outline: none;
}

.mobile-nav ul a:hover::after,
.mobile-nav ul a:focus::after {
	opacity: .8;
}

/* aktuelle Seite - Contao setzt active bzw. trail.
   Markiert wird mit Farbe und einem schmalen Strich links, nicht mit
   einer gefuellten Flaeche. */
.mobile-nav ul a.active,
.mobile-nav ul a.trail {
	color: var(--brand);
	font-weight: 500;
	padding-left: .75rem;
	box-shadow: inset 2px 0 0 var(--brand);
}

.mobile-nav ul a.active::after,
.mobile-nav ul a.trail::after {
	opacity: .7;
}

/* =============================================================================
 * Unterbau: Schnellzugriffe und letzte Einsaetze
 * -----------------------------------------------------------------------------
 * Wird vom Script erzeugt und ans Ende von .mobile-nav gehaengt.
 * =========================================================================== */
.mobilnav-fuss {
	flex: 0 0 auto;
	padding: .25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
	margin-top: 1.75rem;
}

.mobilnav-fuss__titel {
	font-family: var(--font-mono);
	margin: 1.5rem 0 .5rem;
	font-size: var(--text-2xs);
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text-muted);
	opacity: .8;
}

.mobilnav-fuss__titel:first-child {
	margin-top: 0;
}

/* ------------------------------------------------------- Schnellzugriffe */
.mobilnav-aktionen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5rem;
}

.mobilnav-aktion {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: .6rem 0;
	border: 0;
	border-bottom: 1px solid var(--line-soft, var(--line));
	border-radius: 0;
	background: none;
	color: var(--text-strong);
	text-decoration: none;
	transition: color .15s ease;
}

.mobilnav-aktion:hover,
.mobilnav-aktion:focus {
	color: var(--brand);
	background: none;
	outline: none;
}

.mobilnav-aktion__label {
	font-size: var(--text-base);
	font-weight: 500;
	line-height: 1.25;
}

.mobilnav-aktion__hint {
	font-size: var(--text-xs);
	font-weight: 400;
	color: var(--text-muted);
}

/* Der Notruf steht fuer sich, mit duennem Rahmen statt Farbflaeche */
.mobilnav-aktion--notruf {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .75rem;
	padding: .7rem .9rem;
	border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
	border-radius: var(--r-element);
	background: none;
}

.mobilnav-aktion--notruf .mobilnav-aktion__label {
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.mobilnav-aktion--notruf .mobilnav-aktion__nummer {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--brand);
	letter-spacing: .06em;
}

.mobilnav-aktion--notruf:hover,
.mobilnav-aktion--notruf:focus {
	border-color: var(--brand);
}

/* ---------------------------------------------------------- Letzte Einsaetze */
/* Letzte Einsaetze und naechste Termine haben dieselbe Form: eine
   Zeile je Eintrag, Stichwort links, Zeitpunkt rechts in Mono. */
.mobilnav-einsaetze,
.mobilnav-termine {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mobilnav-termine .mobilnav-einsatz:last-child {
	border-bottom: none;
}

.mobilnav-einsatz {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--line-soft, var(--line));
}

.mobilnav-einsatz:last-child {
	border-bottom: none;
}

.mobilnav-einsatz__stichwort {
	min-width: 0;
	font-size: var(--text-sm);
	font-weight: 400;
	line-height: 1.35;
	color: var(--text);
	overflow-wrap: anywhere;
}

.mobilnav-einsatz__zeit {
	font-family: var(--font-mono);
	flex: 0 0 auto;
	font-size: var(--text-xs);
	font-weight: 400;
	color: var(--text-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mobilnav-hinweis {
	margin: .25rem 0 0;
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.mobilnav-mehr {
	display: inline-block;
	margin-top: .9rem;
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--text-muted);
	text-decoration: none;
	transition: color .15s ease;
}

.mobilnav-mehr:hover,
.mobilnav-mehr:focus {
	color: var(--brand);
}

.mobilnav-mehr::after {
	content: " \2192";
}

/* ------------------------------------------------------------------ Breite */
/* Ab 560px zwei Spalten fuer die Menuepunkte - nutzt Tablets besser aus */
@media (min-width: 560px) and (max-width: 800px) {
	.mobile-nav ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
	}

	.mobilnav-aktionen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mobilnav-aktion--notruf {
		grid-column: 1 / -1;
	}
}

/* Sehr niedrige Fenster: Zeilen etwas enger */
@media (max-height: 640px) {
	.mobile-nav ul {
		padding-top: 1.25rem;
	}

	.mobile-nav ul a {
		padding: .75rem .25rem;
		font-size: 1.05rem;
	}
}
/* =============================================================================
 * blaetterung.css  -  Seitenzahlen unter Neuigkeiten und Einsaetzen
 * -----------------------------------------------------------------------------
 * Beide Listen bekamen beim Aufraeumen eine Blaetterung ("Elemente pro
 * Seite"), vorher stand alles auf einer Seite. Fuer die Seitenzahlen gab es
 * deshalb noch gar keine Gestaltung - sie standen als nackte Linkliste
 * untereinander am linken Rand.
 *
 * Hier stehen sie mittig, waagrecht, als Reihe runder Schaltflaechen.
 *
 * Contao gibt die Blaetterung je nach Version leicht anders aus: die
 * aktuelle Seite mal als <li class="active">, mal als <strong class="active">,
 * die Pfeile mal am <li>, mal am <a>. Die Regeln decken alle Faelle ab,
 * damit es nicht beim naechsten Contao-Update wieder zerfaellt.
 *
 * Farben kommen aus 00-design-tokens.css, hell und dunkel also beides.
 *
 * Einbinden: Layout -> Seitenlayout -> Externe CSS-Dateien, ganz unten.
 * =========================================================================== */

.pagination,
.ce_pagination,
.mod_newslist .pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;

	width: 100%;
	max-width: var(--breite);
	margin: var(--abschnitt) auto var(--s-7);
	padding-inline: var(--rand);
}

/* "Seite 1 von 5" steht unter den Zahlen, nicht darueber - die Zahlen
   sind das, wonach man greift, die Zeile daneben nur Auskunft. */
.pagination > p {
	order: 2;
	margin: 0;
	font-size: var(--text-2xs);
	font-weight: 400;
	letter-spacing: var(--track-label);
	color: var(--text-muted);
}

.pagination ul {
	order: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .4rem;

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

.pagination li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------ Schaltflaeche
   Gilt fuer jede Zelle, egal ob Link, aktuelle Seite oder Auslassung. */
.pagination li > a,
.pagination li > strong,
.pagination li > span,
.pagination li.active,
.pagination li.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 .85rem;

	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;

	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-element);

	transition:
		background-color var(--t-schnell) var(--ease),
		border-color var(--t-schnell) var(--ease),
		color var(--t-schnell) var(--ease),
		transform var(--t-schnell) var(--ease);
}

.pagination li > a:hover,
.pagination li > a:focus-visible {
	color: var(--brand);
	border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
	background: var(--surface-2, var(--surface));
	transform: translateY(-1px);
	outline: none;
}

.pagination li > a:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.pagination li > a:active {
	transform: translateY(0);
}

/* ------------------------------------------------------- aktuelle Seite */
/* Gefuellt, aber ohne Schlagschatten - sie ist Zustand, nicht Angebot. */
.pagination li.active,
.pagination li.current,
.pagination li > strong,
.pagination li > strong.active,
.pagination li > span.current {
	color: var(--brand-ink);
	background: var(--brand);
	border-color: var(--brand);
	font-weight: var(--weight-strong);
	cursor: default;
}

/* ------------------------------------------------- Vorwaerts und Zurueck */
/* Wortmarken statt Zahlen: etwas breiter, mit Pfeil. Contao haengt die
   Klasse je nach Vorlage ans li oder ans a - beides wird erfasst. */
.pagination li.previous > a,
.pagination li.next > a,
.pagination li > a.previous,
.pagination li > a.next,
.pagination li.first > a,
.pagination li.last > a,
.pagination li > a.first,
.pagination li > a.last {
	gap: .45rem;
	padding: 0 1.1rem;
	color: var(--text-muted);
}

.pagination li.previous > a:hover,
.pagination li.next > a:hover,
.pagination li > a.previous:hover,
.pagination li > a.next:hover,
.pagination li.first > a:hover,
.pagination li.last > a:hover,
.pagination li > a.first:hover,
.pagination li > a.last:hover {
	color: var(--brand);
}

.pagination li.previous > a::before,
.pagination li > a.previous::before {
	content: "\2190";          /* Pfeil nach links */
	font-size: 1em;
	line-height: 1;
}

.pagination li.next > a::after,
.pagination li > a.next::after {
	content: "\2192";          /* Pfeil nach rechts */
	font-size: 1em;
	line-height: 1;
}

/* Anfang und Ende springen ueber alles hinweg - dafuer die doppelten
   Winkel statt des einfachen Pfeils. */
.pagination li.first > a::before,
.pagination li > a.first::before {
	content: "\00AB";
	font-size: 1.05em;
	line-height: 1;
}

.pagination li.last > a::after,
.pagination li > a.last::after {
	content: "\00BB";
	font-size: 1.05em;
	line-height: 1;
}

/* ------------------------------------------------------------------ Handy */
/* Auf schmalen Schirmen fallen "Anfang" und "Ende" weg - Vorwaerts und
   Zurueck genuegen, und die Reihe bleibt in einer Zeile. */
@media (max-width: 560px) {
	.pagination li.first,
	.pagination li.last,
	.pagination li > a.first,
	.pagination li > a.last {
		display: none;
	}

	.pagination li > a,
	.pagination li > strong,
	.pagination li > span,
	.pagination li.active,
	.pagination li.current {
		min-width: 2.3rem;
		height: 2.3rem;
		padding: 0 .6rem;
		font-size: .85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pagination li > a {
		transition: none;
	}

	.pagination li > a:hover,
	.pagination li > a:focus-visible {
		transform: none;
	}
}