/*
 * Design-Tokens — Werte wörtlich aus analyse/00-GESAMTANALYSE.md Kapitel 4, dort belegt an
 * Original-CSS und eigener Vermessung. Mit Arbeitspaket 6 vervollständigt (Farben, Radien,
 * Übergänge) — was fehlt, ist bewusst weg: Wasserwacht-/JRK-/Schwesternschafts-Sonderfarben
 * (Kapitel 4.1) gehören zu Musterseiten, die laut README ("Klasse C … werden weggelassen")
 * nicht Teil dieses Nachbaus sind, und der z-index-Stapel (Kapitel 4.6) hängt vollständig an
 * Bausteinen des globalen Rahmens (Suche/Toolbar/Burger/Flyout) — kommt mit Arbeitspaket 7.
 *
 * Kein @layer, kein Präprozessor, keine Verschachtelung (Konzept §3.4/CLAUDE.md).
 */

:root {
	/* Farben (Kapitel 4.1) */
	--farbe-rot: #e60005; /* nur H1, Hero-Kartentitel */
	--farbe-dunkelrot: #a51e0f;
	--verlauf-rot: linear-gradient(to bottom right, var(--farbe-dunkelrot), var(--farbe-rot));
	--farbe-blau: #2276d0; /* Links, Fokus, aktive Navigation */
	--farbe-dunkelblau: #002d55;
	--verlauf-blau: linear-gradient(to bottom right, var(--farbe-dunkelblau), var(--farbe-blau));
	--farbe-text: #333;
	--farbe-text-abgesetzt: #666; /* Bildunterschriften, Dateigrößen, Placeholder */
	--farbe-text-blass: #999; /* Timeline-Linie, Meta-Texte (--col-black-40) */
	--farbe-haarlinie: #cbcbcb; /* alle Haarlinien/Rahmen (--col-black-20) */
	--farbe-flaeche-hell: #f2f2f2; /* Burger-Panel, Zebra-Zeilen, .bg--lightgrey (--col-black-05) */
	--farbe-schwarz: #000;
	--farbe-weiss: #fff;
	--farbe-weiss-80: hsla(0, 0%, 100%, 0.8); /* Text auf .bg--grey/.bg--red/.bg--blue */
	--farbe-weiss-20: hsla(0, 0%, 100%, 0.2); /* Topics-Teaser-Schatten auf dunklem Grund */

	/* KV-eigene Sonderfarben (nicht Template) */
	--farbe-formularband: #c00000;
	--farbe-widget: #e30613;
	--farbe-kursliste-linie: #e0ddd6;

	/* Radien (Kapitel 4.6) */
	--radius-button: 1.5rem; /* Buttons, Hero-Karten */
	--radius-eingabe: 0.75em; /* Inputs, Selects, details, Checkbox-Gruppen */
	--radius-checkbox: 0.3rem; /* Checkbox (Radio: 50%) */
	--radius-bild: 0.375rem; /* Inhaltsbilder ab 640px, Topics-Teaser-Karten */
	--radius-suchfeld: 62.4375rem; /* Pille Suchfeld — Grundlage für AP7 */
	--radius-rund: 50%; /* runde Icons, Radio, Avatare */

	/* Übergänge (Kapitel 4.6) */
	--dauer-standard: 0.4s; /* Buttons (all), Inputs (border/box-shadow) */
	--easing-standard: ease-in-out;
	--dauer-navigation: 0.2s; /* Flyout, Footer-Plus — Grundlage für AP7 */
	--dauer-akkordeon: 0.3s; /* Footer-Akkordeon (Web Animations API) — Grundlage für AP7 */
	--easing-akkordeon: cubic-bezier(0.445, 0.05, 0.55, 0.95);

	/* Typografie (Kapitel 4.2) — Schriftstapel, Formeln wörtlich aus der Vermessung */
	--schrift-stapel: 'Helvetica Neue', OpenSans, Arial, sans-serif;

	--schrift-fliesstext: clamp(1.13rem, 0.98rem + 0.61vw, 1.25rem);
	--zeilenhoehe-fliesstext: 1.5;

	--schrift-klein: clamp(0.94rem, 0.87rem + 0.31vw, 1rem);

	--schrift-lead: clamp(1.35rem, 1.09rem + 1.07vw, 1.56rem);
	--zeilenhoehe-lead: 1.2;

	--schrift-h1: clamp(2.33rem, 1.44rem + 3.67vw, 3.05rem);
	--schrift-h2: clamp(2.33rem, 1.44rem + 3.67vw, 3.05rem);
	--zeilenhoehe-h1-h2: 1.1;

	--schrift-h3: clamp(1.94rem, 1.32rem + 2.55vw, 2.44rem);
	--zeilenhoehe-h3: 1.21;

	--schrift-h4: clamp(1.62rem, 1.21rem + 1.68vw, 1.95rem);
	--zeilenhoehe-h4: 1.21;

	/* Containerbreiten (Kapitel 4.3) — als min()-Formel verwendet statt --client-vw (N4 §7.2) */
	--spur-text: 40rem; /* 640 px: H1, Fließtext, Kursliste, Formularband, Widget, Trenner */
	--spur-mittel: 60rem; /* 960 px: Breadcrumb oben, .textmedia-Hülle, Bild „above" */
	--spur-breit: 80rem; /* 1280 px: Toolbar, 50/50, 33/33/33, Flyout-Liste, Footer, Signatur */
	--rand-deckel: 2rem; /* Deckel ist immer „Breite − 4rem" = 32 px Rand */

	/* Vertikaler Rhythmus (Kapitel 4.4) — Anwendung als .frame-Klasse in 03-spuren-rhythmus.css */
	--frame-abstand-mobil: 2rem; /* ab 577 px: 4rem */
	--frame-abstand: 4rem;

	/* Kopfzeile (Kapitel 6.1/9.1/10.a §2.1) — Arbeitspaket 7 */
	--header-hoehe: 5rem; /* 80px ab 640px */
	--header-hoehe-mobil: 3.5rem; /* 56px unter 640px */

	/* z-index-Stapel (Kapitel 4.6) — Arbeitspaket 7. Die drei "störenden" Zwischenwerte des
	   Originals (Flyout-Panel 9, Reiter-Rahmen -5/10, Overlay -1) sind Verschachtelungsdetails
	   INNERHALB der Toolbar/des Flyouts und bleiben deshalb lokal in 11-flyout.css, statt hier
	   globale Namen zu bekommen — nur die vier "Ebenen" aus Kapitel 4.6 sind Tokens. */
	--ebene-suche: 720;
	--ebene-toolbar: 710;
	--ebene-burger-huelle: 700;
}

/*
 * Breakpoints (Kapitel 4.5 / Bericht 01 §3) — bewusst NICHT als Custom Properties: `var()` ist in
 * `@media`-Bedingungen kein unterstütztes CSS-Feature (auch nicht per Präprozessor, den wir laut
 * CLAUDE.md ohnehin nicht einsetzen). Stattdessen feste, dokumentierte Media-Query-Werte in `px`
 * (kein `em`, kein `screen`-Präfix) — `werkzeuge/pruefen.mjs` prüft als Whitelist, dass nur diese
 * Werte vorkommen: 479, 480, 489, 490, 540, 550, 576, 577, 600, 639, 640, 760, 768, 769, 992, 993,
 * 1079, 1080, 1201, 1401, 1440 (Konzept §3.4). In AP6 tatsächlich gebraucht: 577, 640, 479 — der
 * Rest gehört zu Bausteinen/Rahmenteilen aus AP7/9/10/11.
 */

/*
 * Basis — Reset und Grundwerte für alle Seiten. Arbeitspaket 6: vervollständigt um den
 * dokumentierten Original-Reset (Bericht 01 §4.1) und die Silbentrennungs-Pflicht (Gesamtanalyse
 * Kapitel 4.2). Überschriften/Fließtext/Links/Listen/Tabellen/Buttons/Formulare stehen in
 * eigenen Dateien (04/06/07/08/09-…css) — hier bleibt nur, was für JEDES Element gilt.
 */

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

/* Bericht 01 §4.1, wörtlich: "body,form,h1–h6,html,p,ul{margin:0;padding:0}" */
body,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
p,
ul {
	margin: 0;
	padding: 0;
}

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

html,
body {
	overflow-x: clip;
}

body {
	font-family: var(--schrift-stapel);
	font-size: var(--schrift-fliesstext);
	line-height: var(--zeilenhoehe-fliesstext);
	color: var(--farbe-text);
}

/* Silbentrennung ist Pflicht (Gesamtanalyse Kapitel 4.2): setzt html[lang="de"] voraus
   (src/layouts/Grundgeruest.astro setzt lang="de"). Feinsteuerung (Überschriften trennen,
   Fließtext/Tabellen/Formulare nicht) steht in 04-typografie.css. */
html {
	hyphens: manual;
}

img,
picture,
video {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}

iframe {
	border: none;
	display: block;
	margin-inline: auto;
}

/* Nachgetragen mit Arbeitspaket 7 (Original-Klasse "h-hide"/"visually-hidden", Bericht 01 §4.1),
   weil erst der Rahmen echte versteckte Beschriftungen braucht (Such-Label, Skip-Link-Text,
   H2 der No-JS-Seitenübersicht). Klassischer "Clip"-Trick statt display:none, damit der Inhalt
   für Screenreader erreichbar bleibt. */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

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

/*
 * Open Sans, selbst gehostet — Arbeitspaket 6 (Konzept §3.4/§8, Gesamtanalyse Kapitel 4.2).
 *
 * Herkunft: NICHT aus original-sicherung/ kopiert (fremder Lizenznehmer-Bestand, Bericht 08 §4),
 * sondern frisch aus dem offiziellen Google-Fonts-Quellrepo github.com/google/fonts (ofl/opensans,
 * OpenSans[wdth,wght].ttf, OFL-1.1, OFL.txt liegt daneben). Daraus mit fontTools erzeugt:
 * `varLib.instancer` auf wght=400/500/700 (Familie behält intern "Version 3.003", siehe
 * analyse/detailanalyse/data/13-konzept-pixeltreue/opensans-original-metriken.json), dann
 * `subset` auf latin+latin-ext mit `--layout-features='*'` (GPOS-Kerning bleibt), Ausgabe woff2.
 * werkzeuge/schrift-vergleich.py vergleicht Metriken/Vorschubbreiten/GPOS gegen genau diese
 * JSON-Referenz — bei allen drei Schnitten identisch (siehe Abschlussbericht).
 *
 * Nur 400/500/700 (Gesamtanalyse Kapitel 4.2: "tatsächlich geladen … nur 400, 700 und 500; die
 * 500 braucht nur der Burger-Knopf", AP7). Kein Kursiv-Schnitt: <em>/<i> kommt nur vereinzelt vor
 * und wird auch im Original nicht mit einer eigenen Kursiv-Datei unterlegt (Bericht 01 §5.1).
 * 300/600/800 werden auf keiner Seite angefordert (Bericht 01 §5.2).
 *
 * font-display:swap, kein <link rel="preload"> (Konzept §8: Apple-Geräte zeigen Helvetica Neue
 * und würden die Dateien sonst unnötig laden). Familienname bewusst "OpenSans" wie im Original.
 */

@font-face {
	font-family: 'OpenSans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/_astro/open-sans-latin-400.83aNWOHt.woff2') format('woff2');
}

@font-face {
	font-family: 'OpenSans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/_astro/open-sans-latin-500.Dbm0xbyG.woff2') format('woff2');
}

@font-face {
	font-family: 'OpenSans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/_astro/open-sans-latin-700.DHwefWNs.woff2') format('woff2');
}

/*
 * Vertikaler Rhythmus und Spuren-Hilfsklassen — Arbeitspaket 6.
 * Gesamtanalyse Kapitel 4.3/4.4, Bericht 04 §1.2/1.3, Bericht 01 §4.2/4.3.
 *
 * `.frame` erzeugt den 64/32-px-Rhythmus zwischen Blöcken über KOLLABIERENDE Margins (normaler
 * Blockfluss) — deshalb darf `main` nie `display:flex`/`display:grid` werden (CLAUDE.md-Tabu).
 * Trägt heute (Arbeitspaket 6): `.text`, `.zweispalten` (siehe 21-/22-…css, dort wurde das
 * bisher lokal duplizierte `margin-block` entfernt, damit hier eine einzige Quelle gilt).
 */

.frame {
	margin-block: var(--frame-abstand-mobil);
}

@media (min-width: 577px) {
	.frame {
		margin-block: var(--frame-abstand);
	}
}

.frame:last-child {
	margin-block-end: 3rem;
}

@media (min-width: 577px) {
	.frame:last-child {
		margin-block-end: var(--frame-abstand);
	}
}

/*
 * Mobile Rand-Inkonsistenz unter 480 px (Gesamtanalyse Kapitel 4.3, Liste C: "Text 32 px,
 * Breadcrumb/Kursliste/Band 16 px" — bewusst mitgebaut, nicht "korrigiert"). Die Spur „Text"
 * bleibt bei 32 px (kein `only screen and (max-width:479px)` hier); `.spur-schmal-ausnahme` ist
 * für Elemente ohne eigene Breitenregel gedacht, die im Original auf 16 px zurückfallen
 * (Formularband nutzt das bereits, siehe 30-formularband.css).
 */
@media (max-width: 479px) {
	.spur-schmal-ausnahme {
		width: min(var(--spur-text), 100% - 2rem);
	}
}

/*
 * Spuren-Hilfsklassen (Kapitel 4.3) — `width:min(Nrem, 100% - 4rem)` statt `--client-vw`
 * (Konzept §3.4/N4 §7.2: koordinatengleich mit und ohne Scrollbalken). Die drei Bausteine
 * `Seitenkopf`/`Text`/`ZweiSpalten`/`Formularband` setzen ihre Spurbreite bereits selbst über
 * eigene Klassen (`.header.frame-type-header`, `.text`, `.zweispalten`,
 * `.formband-rot__container`) — diese Hilfsklassen sind für die Bausteinseite (Vorschau/Beleg)
 * und künftige Bausteine gedacht, die noch keine eigene Breitenregel haben.
 */
.spur-text,
.spur-mittel,
.spur-breit {
	margin-inline: auto;
}

.spur-text {
	width: min(var(--spur-text), 100% - 4rem);
}

.spur-mittel {
	width: min(var(--spur-mittel), 100% - 4rem);
}

.spur-breit {
	width: min(var(--spur-breit), 100% - 4rem);
}

/*
 * Übernommen aus der ehemaligen 05-rahmen-platzhalter.css (Arbeitspaket 4), die mit
 * Arbeitspaket 7 durch die echten Rahmen-Dateien (10-19) ersetzt wurde — dieser Regelblock
 * gehört inhaltlich zum Seitenrhythmus, nicht zum Kopf-/Fußzeilen-Rahmen selbst, und zieht
 * deshalb hierher statt in eine der neuen Rahmen-Dateien. Der Bühne-Zuschnitt selbst steht
 * jetzt in 23-buehne.css (vorher hier nur ein unbeschnittener Platzhalter).
 */

/*
 * Seitenende kennt drei Fälle (Gesamtanalyse Kapitel 4.4): 64 px Standard, 0 px "bündig" (Band
 * klebt am Footer), 128 px "abstand". Exakte Messung gegen das Orakel ist Arbeitspaket 10
 * (Inhaltsbausteine) — hier nur die drei Werte selbst, unverändert seit Arbeitspaket 4.
 */
main.seitenende-standard {
	padding-bottom: var(--frame-abstand-mobil);
}

main.seitenende-buendig {
	padding-bottom: 0;
}

main.seitenende-abstand {
	padding-bottom: calc(var(--frame-abstand-mobil) * 2);
}

@media (min-width: 577px) {
	main.seitenende-standard {
		padding-bottom: var(--frame-abstand);
	}

	main.seitenende-abstand {
		padding-bottom: calc(var(--frame-abstand) * 2);
	}
}

/*
 * Typografie — Überschriften, Fließtext, .lead, small — Arbeitspaket 6.
 * Werte wörtlich aus Gesamtanalyse Kapitel 4.2 und Bericht 04 §1.4/§8.2/§8.3 (Selektor +
 * Deklaration als Grundlage übernommen, nicht die kompilierte Originaldatei — Bericht 08 §4).
 *
 * H1 UND H2 teilen dieselbe Fluid-Formel (--schrift-h2 = --schrift-h1 in 00-tokens.css), nur die
 * Farbe unterscheidet sich (H1 rot, alle anderen Überschriften #333). H5/H6 haben im Original
 * KEINE eigene Größenregel — sie bleiben beim Browser-Standard (≈0,83em/0,67em relativ zum
 * umgebenden Fließtext), bekommen aber Gewicht/Farbe/Silbentrennung wie alle Überschriften.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	color: var(--farbe-text);
	margin: 0 0 1em;
	/* Silbentrennung ist für Überschriften Pflicht (Gesamtanalyse Kapitel 4.2) */
	hyphens: auto;
	hyphenate-limit-chars: 10 3 4;
}

h1 {
	color: var(--farbe-rot);
	font-size: var(--schrift-h1);
	line-height: var(--zeilenhoehe-h1-h2);
	margin-bottom: 0.8em;
}

h2 {
	font-size: var(--schrift-h2);
	line-height: var(--zeilenhoehe-h1-h2);
}

h3 {
	font-size: var(--schrift-h3);
	line-height: var(--zeilenhoehe-h3);
}

h4 {
	font-size: var(--schrift-h4);
	line-height: var(--zeilenhoehe-h4);
}

/* h5/h6: bewusst keine font-size-Regel (Browser-Standard, siehe Kommentar oben) */

/* Folgt eine Überschrift auf einen Block, kommt zusätzlich der Blockabstand oben dazu
   (Bericht 04 §8.3: „wenn ein Block davor steht" — margin-top in Überschriftengröße = 1em) */
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 1em;
}

/* In .header/.frame-type-header ist der Abstand 0 (Elementkopf, siehe 20-seitenkopf.css) */
:where(.header.frame-type-header) :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0;
}

/* Optische Größenklassen — Bausteine wählen die semantisch richtige Ebene (h2/h3/…) und hängen
   die optische Klasse für die Fluid-Größe an (Konzept §3.3: "Überschrift … ist ein Prop"). */
.optik-h1 {
	font-size: var(--schrift-h1);
	line-height: var(--zeilenhoehe-h1-h2);
}

.optik-h2 {
	font-size: var(--schrift-h2);
	line-height: var(--zeilenhoehe-h1-h2);
}

.optik-h3 {
	font-size: var(--schrift-h3);
	line-height: var(--zeilenhoehe-h3);
}

.optik-h4 {
	font-size: var(--schrift-h4);
	line-height: var(--zeilenhoehe-h4);
}

/* Fließtext */
p {
	margin-block-end: 1em;
}

/* Silbentrennung ist im Fließtext (und in Tabellen/Formularen) verboten — nur Überschriften
   trennen (Bericht 04 §8.2, wörtlich: "p,li,th,td,dt,dd,label,legend,blockquote,caption{hyphens:none}") */
p,
li,
th,
td,
dt,
dd,
label,
legend,
blockquote,
caption {
	hyphens: none;
}

em,
i {
	font-style: italic;
}

.lead {
	font-size: var(--schrift-lead);
	font-weight: 700;
	line-height: var(--zeilenhoehe-lead);
}

small,
.small {
	font-size: var(--schrift-klein);
}

.text-center {
	text-align: center;
}

/*
 * Links — Arbeitspaket 6. Bericht 04 §8.6, Gesamtanalyse Kapitel 4.2, Bericht 01 §5.4.
 *
 * Alle Textlinks sehen im Original gleich aus, unabhängig von Ziel/Klasse (intern, extern,
 * Telefon, Datei …) — die Link-Klassen `internal-link`/`external-link-new-window`/`download`/
 * `mail` haben im Original keine einzige CSS-Regel (Bericht 04 §8.6). Deshalb genügt hier die
 * reine Element-Regel; kommen später eigene Icon-Klassen dazu, ist das eine bewusste Erweiterung,
 * keine Fehlertreue-Frage.
 */

a {
	color: var(--farbe-blau);
	text-decoration: underline;
}

/* Kein sichtbarer Hover-Unterschied — Standardlinks im Original bewusst ohne Hover-Effekt
   (Gesamtanalyse Kapitel 10, Liste C: "Standardlinks haben keinen Hover"). */
a:hover {
	text-decoration: underline;
}

a:focus-visible {
	outline: 0.2rem solid currentColor;
	outline-offset: 0.1rem;
	text-decoration: none;
}

/*
 * Listen, Tabellen, Blockzitat — Arbeitspaket 6. Bericht 04 §8.4/§8.5/§8.8 (Selektor +
 * Deklaration als Grundlage, siehe Dateikopf 04-typografie.css für den Lizenzgrund).
 */

/* Ohne die Klassen list--unordered/--ordered erscheinen im Original KEINE Aufzählungszeichen
   (Bericht 04 §8.4) — das ist gewollt (z. B. für rein layoutende <ul>-Listen in Navigation/Footer,
   die in AP7 eigene Regeln bekommen). */
ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.list.list--unordered {
	list-style: disc;
}

.list.list--unordered > li {
	list-style: disc;
	margin-left: 1em;
	padding: 0.3em 1em 0.3em 0.5em;
	position: relative;
}

.list.list--unordered > li > ul {
	list-style: circle;
	margin-left: 1em;
	padding: 0.3em 1em 0.3em 1.7em;
}

.list.list--unordered > li > ul > li {
	margin-left: -1.5em;
	padding: 0.3em 1em 0.3em 0;
}

.list.list--ordered {
	counter-reset: item;
	list-style: decimal;
}

.list.list--ordered > li {
	counter-increment: item;
	display: block;
	padding: 0.3em 1em 0.3em 1.7em;
	position: relative;
}

.list.list--ordered > li > ol > li {
	padding-left: 2.2em;
}

.list.list--ordered > li::before {
	content: counters(item, '.') '. ';
	left: 0;
	margin-left: -1.5em;
	padding: 0.3em 1em 0.3em 1.5em;
	position: absolute;
	top: 0;
}

/* Tabellen (Bericht 04 §8.5) — figure.table hat im Original KEINEN Reset (Browser-Standard
   margin:1em 40px bleibt bestehen). */
figure.table {
	margin: 1em 40px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	display: table;
	margin: 0 0 1em;
	table-layout: fixed;
	text-align: left;
	width: 100%;
}

table td,
table th {
	word-wrap: normal;
	border: 1px solid var(--farbe-haarlinie);
	hyphens: auto;
	padding: 1rem;
}

table th {
	background: var(--farbe-weiss);
	color: var(--farbe-text);
}

table tr {
	color: var(--farbe-text);
}

table tr:nth-child(2n) {
	background-color: var(--farbe-weiss);
}

table tr:nth-child(odd) {
	background-color: var(--farbe-flaeche-hell);
}

/* Blockzitat (Bericht 04 §8.8 — im bisherigen Inhaltsbestand ungenutzt, aber Teil der
   Basis-Ausstattung). An-/Abführungszeichen als eigenes, selbst geschriebenes Zeichen statt der
   Original-SVG-Data-URI (Bericht 08 §4: eigener Code auf Basis derselben Werte, nicht die
   kompilierte Originaldatei) — Farbe/Größe/Anordnung sind identisch zum dokumentierten Original,
   die Glyphe selbst kommt aus dem Zeichensatz statt aus einer kopierten Grafik. */
blockquote {
	border-block: 1px solid var(--farbe-haarlinie);
	font-size: var(--schrift-lead);
	font-weight: 700;
	line-height: var(--zeilenhoehe-lead);
	margin: 0 0 1em;
	padding: 0.75rem 0;
}

blockquote p {
	display: inline;
}

blockquote p::before {
	content: '\201C';
	color: var(--farbe-rot);
	margin-inline-end: 0.2em;
}

blockquote p::after {
	content: '\201D';
	color: var(--farbe-rot);
	margin-inline-start: 0.2em;
}

/*
 * Buttons — Arbeitspaket 6. Werte wörtlich aus Bericht 01 §7.1 und Bericht 04 §8.7 (Selektor +
 * Deklaration als Grundlage, siehe 04-typografie.css für den Lizenzgrund).
 *
 * Gemessen (Bericht 04 §8.7, ≥768 px): Höhe 44 px (Padding 10/20, Schrift 20 px, LH 24), Radius
 * 24 px; @375 px: Padding 9,04/18,08, Schrift 18,08 px → Höhe 39,75 px. Diese Maße ergeben sich
 * rechnerisch aus `padding:.5em 1em` + `line-height:1.2` bei der jeweiligen Fließtextgröße —
 * keine eigene Höhen-Regel nötig.
 */

.button,
button {
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 0;
	overflow: visible;
	text-transform: none;
	width: fit-content;
}

.button:not(:focus-visible),
button:not(:focus-visible) {
	outline: none;
}

/* Basis (Bericht 01 §7.1: ".button, .form-navigation .btn, :where(button[type=submit])") */
.button,
:where(button[type='submit']) {
	display: inline-block;
	border-radius: var(--radius-button);
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.5em 1em;
	gap: 1em;
	text-align: start;
	text-decoration: none;
	transition: all var(--dauer-standard) var(--easing-standard);
}

.button:not(:last-child) {
	margin: 0 1em 1em 0;
}

/* .button = .button--primary: Blau-Verlauf, weißer Text */
.button,
.button--primary,
:where(button[type='submit']) {
	background: var(--verlauf-blau);
	color: var(--farbe-weiss);
}

.button:hover,
.button--primary:hover,
:where(button[type='submit']):hover {
	transform: scale(1.05);
}

.button:focus,
.button--primary:focus,
:where(button[type='submit']):focus {
	box-shadow: 0 0 0 0.125rem var(--farbe-weiss), 0 0 0 0.25rem var(--farbe-blau);
}

/* Sekundär: transparent, blauer Rahmen */
.button--secondary {
	background: transparent;
	border: 0.125rem solid var(--farbe-blau);
	color: var(--farbe-blau);
}

.button--secondary:focus {
	box-shadow: 0 0 0 0.125rem var(--farbe-weiss), 0 0 0 0.25rem var(--farbe-blau);
}

/* Tertiär: nur Text + Chevron (Chevron-Icon ist Rahmen-/Icon-Technik, Grundlage für AP7/AP10) */
.button--tertiary {
	background: transparent;
	color: var(--farbe-blau);
}

/* Spenden-Button: Rot-Verlauf statt Blau */
.button--donate {
	background: var(--verlauf-rot);
	color: var(--farbe-weiss);
}

.button--donate:focus {
	box-shadow: 0 0 0 0.125rem var(--farbe-weiss), 0 0 0 0.25rem var(--farbe-rot);
}

.button--outline {
	background: transparent;
	border: 0.125rem solid currentColor;
}

.button--small {
	font-size: var(--schrift-klein);
	padding: 0.3em 0.5em;
}

.button--block {
	width: 100%;
}

/* Deaktiviert — grau ist ein Button nur in dieser Kombination (Gesamtanalyse Kapitel 10, N1 Nr. 4:
   "Grau ist ein Button nur als .button.button--primary.button--disabled"). */
.button.button--primary.button--disabled,
.button:disabled,
button:disabled {
	background: var(--farbe-haarlinie);
	color: var(--farbe-weiss);
	cursor: not-allowed;
}

.button.button--primary.button--disabled:focus,
.button:disabled:focus,
button:disabled:focus {
	box-shadow: none;
}

.button.button--primary.button--disabled:hover,
.button:disabled:hover,
button:disabled:hover {
	animation: knopf-wackeln 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes knopf-wackeln {
	10%,
	90% {
		transform: translate3d(-1px, 0, 0);
	}
	20%,
	80% {
		transform: translate3d(2px, 0, 0);
	}
	30%,
	50%,
	70% {
		transform: translate3d(-4px, 0, 0);
	}
	40%,
	60% {
		transform: translate3d(4px, 0, 0);
	}
}

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

	.button.button--primary.button--disabled:hover,
	.button:disabled:hover,
	button:disabled:hover {
		animation: none;
	}
}

/*
 * Formular-Basisstile — Arbeitspaket 6. Grundlage für `Formularband` (30-formularband.css nutzt
 * diese Element-Regeln jetzt statt eigener, unvollständiger Kopien) und künftige Formular-
 * Bausteine (AP12). Werte aus Bericht 01 §7.2. `#brk-san-widget` wird hier NICHT nachgebaut
 * (AP10/12, eigenes CSS). Eingegebener Text ist im Original blau/fett, unabhängig vom
 * Hintergrund — das Feld selbst ist immer ein weißer Kasten (auch im roten Formularband).
 */

fieldset,
input,
legend,
select,
textarea {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	text-align: left;
	font: inherit;
	color: inherit;
}

fieldset {
	margin-bottom: 2rem;
}

legend {
	font-size: 1.3em;
	font-weight: 700;
	margin-bottom: 0.5em;
}

label {
	display: block;
	color: var(--farbe-text);
	font-size: var(--schrift-klein);
	margin-bottom: 0.5rem;
}

input,
select,
textarea {
	display: block;
	width: 100%;
	background: var(--farbe-weiss);
	border: 0.1rem solid var(--farbe-haarlinie);
	border-radius: var(--radius-eingabe);
	color: var(--farbe-blau);
	font-size: var(--schrift-fliesstext);
	font-weight: 700;
	padding: 1.35em 0.5em 0.65em 0.8em;
	line-height: 1.4em;
	transition:
		border var(--dauer-standard) var(--easing-standard),
		box-shadow var(--dauer-standard) var(--easing-standard);
}

input::placeholder,
textarea::placeholder {
	color: var(--farbe-text-abgesetzt);
	opacity: 1;
	font-weight: 400;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--farbe-blau);
	box-shadow: 0 0 0 0.175rem var(--farbe-blau);
}

/* Wird per JS nach Eingabe gesetzt (Grundlage — die eigentliche Interaktion kommt mit dem
   jeweiligen Formular-Baustein, AP12) */
.filled {
	border-color: var(--farbe-blau);
}

.error,
.filled--focusout:invalid {
	border-color: var(--farbe-rot);
}

.error:hover,
.error:focus,
.error:active {
	box-shadow: 0 0 0 0.1rem var(--farbe-rot);
}

.help-block.error {
	color: var(--farbe-rot);
	font-size: 0.8em;
	padding: 0.1em 1.2em;
}

input:disabled,
select:disabled,
textarea:disabled {
	background: var(--farbe-text-abgesetzt) !important;
	opacity: 0.5;
	cursor: not-allowed !important;
}

textarea {
	min-height: 10em;
	line-height: 1.5;
	resize: vertical;
}

/* Select: eigener, selbst gezeichneter Chevron statt der Original-SVG-Datei (Lizenzgrund, siehe
   Dateikopf) — gleiche Position/Größe wie dokumentiert (Bericht 01 §7.2). */
select {
	min-height: 3.5em;
	padding: 1.25em 2.5em 0.25em 0.8em;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cbcbcb' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center right 0.5em;
	background-size: 0.75em auto;
}

@media (min-width: 577px) {
	select {
		background-position: center right 1.35em;
	}
}

select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232276d0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Checkbox/Radio */
input[type='checkbox'],
input[type='radio'] {
	display: inline-block;
	width: 1.75rem;
	height: 1.75rem;
	border: 0.1rem solid var(--farbe-haarlinie);
	border-radius: var(--radius-checkbox);
	margin-right: 0.75em;
	margin-bottom: 0;
	vertical-align: middle;
	position: relative;
	top: -0.25em;
	background: var(--farbe-weiss);
	padding: 0;
	flex-shrink: 0;
}

input[type='radio'] {
	border-radius: var(--radius-rund);
}

input[type='checkbox']:hover,
input[type='radio']:hover {
	background: var(--farbe-blau);
	box-shadow: inset 0 0 0 0.2rem var(--farbe-weiss);
}

input[type='checkbox']:focus,
input[type='radio']:focus {
	border-color: var(--farbe-blau);
	box-shadow:
		inset 0 0 0 0.2rem var(--farbe-weiss),
		0 0 0 0.2rem var(--farbe-blau);
}

input[type='checkbox']:checked,
input[type='radio']:checked {
	background: var(--farbe-blau);
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.form-check-label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	cursor: pointer;
}

.form-group-checkbox,
.form-group-radio {
	border: 0.1rem solid var(--farbe-haarlinie);
	border-radius: var(--radius-eingabe);
	padding: 0.8em 0.5em 0.2em 0.8em;
}

.form-group-checkbox:focus-within,
.form-group-radio:focus-within {
	border-color: var(--farbe-blau);
	box-shadow: 0 0 0 0.175rem var(--farbe-blau);
}

/*
 * Floating-Label-Muster (Bericht 01 §7.2) — die Basis-Klassen, damit künftige Formular-Bausteine
 * (AP12) das Original-Muster nachbilden können; `Formularband` nutzt heute noch das einfachere
 * Label-über-Feld-Layout (siehe 30-formularband.css) und wird bei Bedarf dort umgestellt.
 * Auf der Bausteinseite (_bausteine.astro) als eigenständiges Beispiel gezeigt.
 */
.eingabe-gruppe {
	position: relative;
	margin-bottom: 1rem;
}

.eingabe-gruppe__label {
	position: absolute;
	top: 0.5em;
	left: 1.3em;
	font-size: 0.7em;
	font-weight: 700;
	color: var(--farbe-text);
	margin-bottom: 0;
}

.eingabe-gruppe input,
.eingabe-gruppe select,
.eingabe-gruppe textarea {
	margin-bottom: 0;
}

/*
 * Kopfzeile (Toolbar) — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md §6.1 und
 * Bericht 10a §2.1/§2.2 (inkl. Kernwerte-CSS §12).
 *
 * Kriterium (Konzept AP7-Zeile): Header 81px ab 640px / 57px darunter, inklusive der 1px-Linie.
 * Der Platz wird HIER rein per CSS fest vergeben (kein inline opacity:0/display:none, kein JS
 * nötig) — das hält CLS < 0,05 und erfüllt das No-JS-Kriterium aus §6.8 gleichzeitig.
 */

/* .body__wrapper hält Kopf-, Haupt- und Fußbereich zusammen (Original: display:flex;
   flex-direction:column; min-height:100vh, damit die Fußzeile bei kurzen Seiten unten bleibt).
   padding-top reserviert exakt den Platz der fixen Kopfzeile — komplett ohne JavaScript und ohne
   inline Stil, das hält CLS < 0,05 (00-GESAMTANALYSE.md §6.1) UND funktioniert ohne JavaScript. */
.body__wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-top: var(--header-hoehe-mobil);
}

@media (min-width: 640px) {
	.body__wrapper {
		padding-top: var(--header-hoehe);
	}
}

main {
	flex-grow: 1;
}

#header {
	display: block;
}

/* Skip-Link (A6, 00-GESAMTANALYSE.md Kapitel 10: "Skip-Link fehlt" — im Original nicht
   vorhanden). Erstes fokussierbares Element im Dokument, unsichtbar bis zum Fokus, springt zu
   <main id="main">. */
.skip-link {
	position: absolute;
	top: -4rem;
	left: 0.5rem;
	z-index: calc(var(--ebene-suche) + 1);
	background: var(--farbe-weiss);
	color: var(--farbe-text);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 0.5rem 0.5rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
	transition: top 0.2s ease-in-out;
}

.skip-link:focus-visible {
	top: 0;
	outline: 0.2rem solid var(--farbe-blau);
	outline-offset: -0.2rem;
}

.toolbar__wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--ebene-toolbar);
	background-color: var(--farbe-weiss);
	border-bottom: 1px solid var(--farbe-haarlinie);
	overflow: visible;
	padding: 0 1rem;
}

@media (max-width: 489px) {
	.toolbar__wrap {
		padding: 0 0.5rem;
	}
}

.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--spur-breit);
	margin: 0 auto;
	height: var(--header-hoehe-mobil);
	column-gap: 0.25rem;
}

@media (min-width: 550px) {
	.toolbar {
		column-gap: 1rem;
	}
}

@media (min-width: 640px) {
	.toolbar {
		height: var(--header-hoehe);
	}
}

.toolbar__navigation {
	display: flex;
	align-items: center;
	flex-grow: 1;
	gap: 1rem;
	justify-content: right;
}

/* Lupe — nur ab 993px sichtbar (Original: .toolbar__search-button, inline display:none + CSS
   "display:block!important" ab 993px). Hier ohne inline Stil, rein per Media Query. */
.toolbar__search-button {
	display: none;
	height: 2rem;
	width: 2rem;
	padding: 0.25rem;
	color: var(--farbe-schwarz);
}

@media (min-width: 993px) {
	.toolbar__search-button {
		display: block;
	}
}

.toolbar__search-button:focus-visible {
	box-shadow: 0 0 0 0.125rem var(--farbe-weiss), 0 0 0 0.3125rem var(--farbe-text-abgesetzt);
	outline: none;
}

/* Spendenknopf (26.09.2026, wie brk.de: .toolbar__donate-btn.button.button--donate, ganz rechts
   hinter der Lupe, Abstand über den column-gap der Toolbar). Werte von
   brk.de übernommen: Schrift klein/500, ab 993px Polster .7em 1.2em .9em und feste Breite
   6,75rem. margin mit !important wie dort, weil
   ".button:not(:last-child)" sonst einen Außenabstand setzt. Farbe/Verlauf/Fokus aus
   .button--donate (08-buttons.css).
   Abweichung von brk.de: erst ab 768px sichtbar (Florian, 26.09.). Unser Logo ist mit dem
   Schriftzug "Kreisverband Freyung-Grafenau" deutlich breiter — darunter würde der Knopf den
   Schriftzug überdecken (gemessen bis 640px) und "Menü" bei 320px aus dem Bild schieben. Auf dem
   Handy führt Menü › Mitwirken › Spenden zur selben Seite. */
.toolbar__donate-btn {
	display: none;
	flex: 0 0 auto;
	font-size: var(--schrift-klein);
	font-weight: 500;
	white-space: nowrap;
	transition: transform var(--dauer-standard) var(--easing-standard);
	margin: 0 !important;
}

@media (min-width: 768px) {
	.toolbar__donate-btn {
		display: inline-block;
	}
}

@media (min-width: 993px) {
	.toolbar__donate-btn {
		flex: 0 0 6.75rem;
		padding: 0.7em 1.2em 0.9em;
		text-align: center;
	}
}

/* Burger-Knopf — nur bis 992px sichtbar (Original: #siteNaviToggle als letztes Kind der Toolbar,
   Bericht 03 Nr. 13; hier ohne JS-Verschiebung direkt an dieser Stelle gerendert). */
.site-navi-toggle {
	display: none;
}

@media (max-width: 992px) {
	.site-navi-toggle {
		display: grid;
		grid-template-columns: 1fr;
		position: relative;
		font-weight: 500;
		font-size: var(--schrift-klein);
		margin: 0 !important;
	}
}

@media (max-width: 489px) {
	.site-navi-toggle {
		font-size: 0.7rem;
		width: 5.7rem;
		/* !important nötig: die Regel bei max-width:992px setzt "margin:0!important" — nur ein
		   selbst !important deklariertes margin-left schlägt das (Original macht es ebenso). */
		margin-left: 0.25rem !important;
	}
}

/* Original reserviert den Icon-Platz über padding-right + Hintergrundbild
   (background-position:center right; background-size:1.5em 1.5em; padding-right:1.75em) statt
   über einen Flex-Gap — deshalb hier dieselbe Technik (Polster + absolut positioniertes Icon)
   statt gap+Inline-Element: nur so ergibt die reine TEXTBREITE + Polster exakt dieselbe
   Knopfbreite wie im Original, unabhängig von der (fluiden) Schriftgröße. Ein erster Versuch mit
   display:flex + gap traf die Breite nur zufällig bei einer Schriftgröße (489px), nicht bei allen
   (768px wich um 4px ab) — über den L1-Vergleich gegen das Orakel gefunden und hier korrigiert. */
.site-navi-toggle .label {
	display: block;
	position: relative;
	padding-right: 1.75em;
	grid-row-start: 1;
	grid-column-start: 1;
	transition: all 0.4s ease-in-out;
}

.site-navi-toggle .label__icon {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1.5em;
	height: 1.5em;
}

.site-navi-toggle .label-initial {
	max-width: 12rem;
	opacity: 1;
}

.site-navi-toggle .label-close {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
}

body.show-menu .site-navi-toggle .label-initial {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
}

body.show-menu .site-navi-toggle .label-close {
	max-width: 12rem;
	opacity: 1;
}

/* Seitenzustand bei geöffnetem Flyout ODER Burger (Bericht 10a §3.4/§4.1): Scrollen gesperrt,
   Inhalt und Fußzeile weichgezeichnet/entsättigt. Gilt für beide Menüarten gleich, deshalb hier
   im Kopfzeile-CSS statt doppelt in 12-flyout.css UND 13-burger.css. */
body.show-menu {
	height: 100vh;
	overflow: hidden;
}

body.show-menu #main,
body.show-menu #footer {
	filter: blur(2px) grayscale(0.25) opacity(0.75);
}

/* Aktuelle Seite im Menü (beide Menüarten): kein Link, kein Zeigerverhalten, "Sie sind hier:"
   bleibt für Screenreader per Text vorhanden, aber visuell versteckt. */
.nav-item-current-label {
	display: none;
}

.nav-item.current,
.nav-item-current {
	pointer-events: none;
}

/*
 * Logo — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md §6.1 und Bericht 10a §2.2
 * ("Logo"-Zeile der Tabelle in Abschnitt 2.2, Kernwerte-CSS in §12).
 *
 * Breakpoints 489/490, 639/640, 992/993, 1079/1080 — alle in der Whitelist aus 00-tokens.css.
 */

.toolbar__logo {
	display: block;
	padding-block-start: 0.5rem;
	flex: 0 0 11rem;
	/* Ohne dies zwingt Flexbox' automatische Mindestbreite (min-width:auto) das Element auf die
	   Eigenbreite des <svg>-Kindes (bei 375px z. B. 261px statt 176px = 11rem), weil das Logo bei
	   overflow:visible (<640px) sichtbar über seinen eigenen Kasten hinausragen SOLL, ohne dass
	   dieser Kasten selbst dadurch breiter gemessen wird. Beim ersten Bauversuch fehlte das —
	   gefunden über den L1-Vergleich gegen das Orakel (nav-box/logo-Messpunkte wichen ab), hier
	   korrigiert. Das Überragen selbst bleibt sichtbar (kein overflow:hidden hier). */
	min-width: 0;
}

@media (max-width: 639px) {
	.toolbar__logo {
		text-indent: 1rem;
	}
}

@media (min-width: 640px) and (max-width: 992px) {
	.toolbar__logo {
		flex: 0 0 16rem;
	}
}

@media (min-width: 993px) and (max-width: 1079px) {
	.toolbar__logo {
		flex: 0 0 20rem;
	}
}

@media (min-width: 1080px) {
	.toolbar__logo {
		flex: 0 0 25rem;
	}
}

/* KEIN display:block hier (Original setzt es ebenfalls nicht): das <svg> bleibt inline-level
   und lässt dadurch unter sich den für Inline-Ersatzelemente üblichen kleinen Abstand zur
   Grundlinie — genau dieser Abstand steckt in den gemessenen 47,7px Ankerhöhe bei 375px
   (32,63px SVG + 8px Polster oben wären sonst nur 40,63px, Bericht 10a §2.2). Beim ersten
   Bauversuch stand hier display:block, wodurch .toolbar__logo zu knapp UND per
   align-items:center falsch vertikal zentriert war (gefunden über den L1-Vergleich gegen das
   Orakel: logo/nav-box wichen sowohl in Höhe als auch in y ab). */
.toolbar__logo svg {
	height: 8.7vw;
}

@media (max-width: 639px) {
	.toolbar__logo svg {
		overflow: visible; /* SVG-UA-Voreinstellung ist overflow:hidden — ab 640px genügt sie */
	}
}

@media (min-width: 490px) and (max-width: 639px) {
	.toolbar__logo svg {
		height: 2.7125rem; /* 43,4px */
	}
}

@media (min-width: 640px) {
	.toolbar__logo svg {
		height: 3.0735rem; /* 49,17px */
	}
}

/* Schrift und Füllregel des Logo-SVG (vorher als style-Element im SVG, s. Logo.astro). */
.brk-logo-text {
	font-family: ArialMT, Arial, sans-serif;
	font-size: 96px;
	isolation: isolate;
}

.brk-logo-fillrule {
	fill-rule: evenodd;
}

/*
 * Flyout (Desktop-Mega-Menü, ≥ 993 px) — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md
 * §6.2, Bericht 10a §3, 12-nacharbeit-G3-rahmen-nach-kuerzung.md §3.2 (Panelhöhen, Spaltenbreiten,
 * Spaltenfix-Zeile).
 *
 * Sichtbarkeit von #main-menu-flyout ist eine reine Media-Query-Entscheidung (kein
 * body.dti-flyout nötig) — das hält die Navigation ohne JavaScript sichtbar (No-JS-Kriterium).
 *
 * WICHTIG: Flyout UND Burger verwenden dieselben BEM-Klassennamen (.flyout-navi, .level-1-item,
 * .sub-navi, .nav-item-button, …) für strukturell UNTERSCHIEDLICHE Layouts (Original-Vorgabe,
 * "Original-Klassennamen bleiben die Schnittstelle", CLAUDE.md) — jede Regel hier ist deshalb
 * IMMER mit "#main-menu-flyout" als Vorfahre geschrieben, nie bloß ".flyout-navi" o. Ä. allein.
 * Ein erster Entwurf ohne dieses Präfix führte dazu, dass z. B. ".level-1-item{display:inline-
 * block}" auch die Burger-Liste traf und deren vier Hauptpunkte übereinander statt untereinander
 * zeichnete — beim visuellen Gegenlesen im Browser gefunden und hier korrigiert.
 */

#main-menu-flyout {
	display: none;
}

@media (min-width: 993px) {
	#main-menu-flyout {
		display: block;
	}
}

#main-menu-flyout .flyout-navi {
	white-space: nowrap;
}

#main-menu-flyout .level-1-item {
	display: inline-block;
	white-space: normal;
}

#main-menu-flyout .level-1-item > .nav-item-button {
	position: relative;
	color: var(--farbe-text);
	display: block;
	font-size: var(--schrift-klein);
	font-weight: 700;
	line-height: 1.2em;
	padding: 0.25rem 0.5rem;
	text-decoration: none;
}

#main-menu-flyout .level-1-item > .nav-item-button:hover {
	text-decoration: underline var(--farbe-blau);
}

#main-menu-flyout .level-1-item > .nav-item-button:focus-visible {
	outline: 0.2rem solid currentColor;
	outline-offset: 0.1rem;
	text-decoration: none;
}

/* "Reiter"-Optik des offenen Hauptpunkts (Bericht 10a §3.3) — z-index -5/10 sind lokale
   Verschachtelungsdetails innerhalb des Buttons, deshalb nicht als globales Token geführt
   (00-tokens.css, Kommentar beim z-index-Abschnitt). */
#main-menu-flyout .level-1-item > .nav-item-button::after {
	content: '';
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1.75rem;
	height: 0;
	background: var(--farbe-weiss);
	z-index: 10;
	transition: all var(--dauer-navigation);
}

#main-menu-flyout .level-1-item > .nav-item-button::before {
	content: '';
	display: none;
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: -1.75rem;
	height: 0;
	opacity: 0;
	border: 1px solid var(--farbe-haarlinie);
	border-bottom: 0;
	z-index: -5;
	transition: all var(--dauer-navigation);
}

#main-menu-flyout .level-1-item > .nav-item-button[aria-expanded='true'] {
	text-decoration: underline var(--farbe-blau);
}

#main-menu-flyout .level-1-item > .nav-item-button[aria-expanded='true']::after {
	display: block;
	height: 5px;
	opacity: 1;
}

#main-menu-flyout .level-1-item > .nav-item-button[aria-expanded='true']::before {
	display: block;
	height: 4rem;
	opacity: 1;
}

#main-menu-flyout .sub-navi-wrapper {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--header-hoehe);
	background: var(--farbe-weiss);
	border-top: 1px solid var(--farbe-haarlinie);
	height: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0);
	transition: all var(--dauer-navigation) ease-in;
}

#main-menu-flyout .sub-navi-wrapper:not([aria-hidden='true']) {
	height: auto;
	max-height: calc(100vh - var(--header-hoehe));
	opacity: 1;
	overflow: auto;
	z-index: 9;
	box-shadow: 0 2rem 1rem 0 rgba(0, 0, 0, 0.25);
}

#main-menu-flyout .open-parent-overlay {
	display: none;
}

#main-menu-flyout .open-parent .open-parent-overlay {
	display: block;
	position: fixed;
	inset: 0;
	z-index: -1;
}

#main-menu-flyout .sub-navi.level-2 {
	background: var(--farbe-weiss);
	list-style: none;
	margin: 0 auto;
	max-width: var(--spur-breit);
	padding: 2rem 0 2rem 1.05rem;
	column-count: 5;
	column-gap: 1rem;
}

/* B9-Spaltenfix (12-nacharbeit-G3…, §3.2 "Falle"): Ohne diese Zeile hängt die Spaltenzahl im
   gekürzten "Angebote"-Panel seiten- und schriftabhängig zwischen 2 und 3 (Reserve nur 5,44px).
   Erzwingt eine Gruppe je Spalte bei gleicher Panelhöhe (variante.json: spaltenfix=true). */
#main-menu-flyout .sub-navi.level-2 > .nav-item + .nav-item {
	break-before: column;
}

/* 26.09.2026: Gruppen mit "gleicheSpalte: true" (navigation.yaml) stehen unter der vorherigen
   Gruppe statt in einer neuen Spalte (kleine Gruppen untereinander). Das Panel bekommt dann nur so
   viele Spalten, wie belegt sind (Flyout.astro setzt "sub-navi--spalten-N") — genutzt von
   "Angebote": 4 Spalten, damit "Bevölkerungsschutz und Rettung" ab ca. 1100px einzeilig bleibt
   und neben "Suchdienst" keine breite Lücke entsteht. */
#main-menu-flyout .sub-navi.level-2 > .nav-item.nav-item--gleiche-spalte {
	break-before: auto;
}

#main-menu-flyout .sub-navi.level-2.sub-navi--spalten-4 {
	column-count: 4;
}

#main-menu-flyout .sub-navi.level-2 > .nav-item {
	break-inside: avoid;
}

#main-menu-flyout .sub-navi.level-2 > .nav-item > span {
	display: block;
	line-height: 1.2;
	margin-bottom: 0.5rem;
	font-size: var(--schrift-klein);
	font-weight: 700;
	color: var(--farbe-text);
}

#main-menu-flyout .sub-navi.level-3-or-deeper {
	padding-left: 0.5rem;
	padding-bottom: 1rem;
}

#main-menu-flyout .sub-navi.level-3-or-deeper .nav-link {
	display: block;
	color: var(--farbe-text-abgesetzt);
	font-size: calc(var(--schrift-klein) * 0.85);
	line-height: 1.2em;
	padding: 0.25rem;
	text-decoration: underline transparent;
	transition: all var(--dauer-navigation);
}

#main-menu-flyout .sub-navi.level-3-or-deeper .nav-link:hover,
#main-menu-flyout .sub-navi.level-3-or-deeper .nav-link:focus {
	color: var(--farbe-text);
	text-decoration-color: var(--farbe-text);
}

#main-menu-flyout .sub-navi.level-3-or-deeper .nav-item-current-title {
	display: block;
	color: var(--farbe-text);
	font-size: calc(var(--schrift-klein) * 0.85);
	line-height: 1.2em;
	padding: 0.25rem;
}

#main-menu-flyout .sub-navi.level-3-or-deeper .nav-item-current-title::before {
	content: '❯ ';
}

/*
 * Burger (Mobil-Menü, ≤ 992 px) — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md §6.3,
 * Bericht 10a §4, 12-nacharbeit-G3-rahmen-nach-kuerzung.md §3.3 (Zeilenhöhen, Listenhöhen,
 * Einzüge).
 */

#main-menu-burger {
	display: none;
}

@media (max-width: 992px) {
	#main-menu-burger {
		display: flex;
	}
}

/* z-index fehlte bisher komplett (blieb bei "auto") — das im Original per eigenem Wrapper
   ".main-menu__wrap{z-index:700}" gelöste Problem: sobald das Menü offen ist, bekommt #main den
   Weichzeichner-Filter (10-kopfzeile.css, "body.show-menu #main{filter:...}"), und ein CSS-Filter
   erzeugt einen eigenen Stapelkontext — dadurch rutschte #main (später im DOM als dieses Element)
   über das Menü-Panel, sichtbar als "durchscheinender" Seiteninhalt hinter den Menüpunkten
   (Nutzer-Feedback 18.09., mobile Ansicht). Das dafür schon vorbereitete, bisher nie verwendete
   Token --ebene-burger-huelle (00-tokens.css, exakt der Original-Wert 700) behebt das, ganz ohne
   zusätzlichen Wrapper, weil dieses Element selbst schon position:fixed ist. */
.main-menu-burger {
	position: fixed;
	z-index: var(--ebene-burger-huelle);
	left: 0;
	right: 0;
	bottom: 0;
	top: var(--header-hoehe-mobil);
	background: var(--farbe-flaeche-hell);
	border-top: 1px solid var(--farbe-haarlinie);
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.4s ease-in-out;
}

@media (min-width: 640px) {
	.main-menu-burger {
		top: var(--header-hoehe);
	}
}

body.dti-burger.show-menu .main-menu-burger {
	max-height: calc(100vh - var(--header-hoehe-mobil));
	opacity: 1;
	overflow-y: auto;
	padding-top: 2rem;
	transition: all var(--dauer-navigation);
}

@media (min-width: 640px) {
	body.dti-burger.show-menu .main-menu-burger {
		max-height: calc(100vh - var(--header-hoehe));
	}
}

/* Suchfeld oben im Panel (eigenständiges Feld, kein JS-Klon — s. Kommentar in Burger.astro) */
.global-search__form--burger {
	width: 30rem;
	max-width: 90vw;
	margin-bottom: 1rem;
}

.global-search__form--burger .global-search__fieldset {
	position: relative;
	margin-inline: 1rem;
	margin-block-end: 0;
	border-radius: var(--radius-suchfeld);
	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
}

.global-search__form--burger .global-search__input {
	padding: 1rem 1rem 1rem 3.75rem;
	border: none;
	border-radius: var(--radius-suchfeld);
	color: var(--farbe-blau);
	caret-color: var(--farbe-blau);
	font-weight: 700;
	width: 100%;
}

.global-search__form--burger .global-search__input:focus {
	box-shadow: inset 0 0 0 0.1875rem var(--farbe-blau);
	outline: none;
}

.global-search__form--burger .global-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	color: var(--farbe-text-abgesetzt);
}

/* Liste, drei Ebenen (Akkordeon) */
.main-menu-burger .flyout-navi {
	width: 40rem;
	max-width: 90vw;
}

.main-menu-burger .nav-item-button,
.main-menu-burger .nav-item-current,
.main-menu-burger .nav-link {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
	text-align: left;
	background: transparent;
	color: var(--farbe-text);
	font-weight: 700;
	line-height: var(--zeilenhoehe-fliesstext);
	text-decoration: underline transparent;
	border-bottom: 1px solid var(--farbe-haarlinie);
	padding: 1rem 0;
	transition: all var(--dauer-navigation);
}

/* Zeilenhöhe Ebene 1 (12-nacharbeit-G3…, §3.3): 1rem Polster oben/unten + Zeilenhöhe der
   fließenden Fließtextgröße + 1px Rand = 60,11px @375 / 63px @768 — ergibt sich rechnerisch aus
   --schrift-fliesstext/--zeilenhoehe-fliesstext, keine eigene Höhen-Regel nötig. */
.main-menu-burger .level-1-item > .nav-item-button,
.main-menu-burger .level-1-item > .nav-link {
	font-size: var(--schrift-fliesstext);
}

/* Zeilenhöhe Ebene 2/3 = 57px (1rem Polster oben/unten + 16px/1,5 Zeilenhöhe = 24px + 1px Rand).
   Einzüge 24px (Ebene 2) und 48px (Ebene 3) entstehen KUMULATIV durch die Verschachtelung: jede
   .sub-navi-Liste bekommt padding-left:1.5rem, eine Ebene-3-Liste steckt innerhalb einer bereits
   eingerückten Ebene-2-Liste und addiert sich dadurch automatisch auf 48px (wie im Original). */
.main-menu-burger .sub-navi {
	padding-left: 1.5rem;
}

.main-menu-burger .sub-navi .nav-item-button,
.main-menu-burger .sub-navi .nav-link,
.main-menu-burger .sub-navi .nav-item-current {
	font-size: 1rem;
	line-height: 1.5;
}

.main-menu-burger .nav-item-button:focus,
.main-menu-burger .nav-link:focus {
	background: var(--farbe-weiss);
	outline: none;
	padding-left: 1.5rem;
}

.main-menu-burger .nav-item-button:hover,
.main-menu-burger .nav-link:hover,
.main-menu-burger .nav-item-button:focus,
.main-menu-burger .nav-link:focus {
	color: var(--farbe-blau);
	text-decoration-color: var(--farbe-blau);
}

/* "+"/"×"-Symbol der Ebene-1/2-Knöpfe (eigene CSS-Form statt Original-Textzeichen-Trick, aber
   optisch gleichwertig: zwei Balken, die sich beim Öffnen um 135° drehen). */
.main-menu-burger .nav-item-button::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 1em;
	height: 1em;
	transform: translateY(-50%);
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 0.1em, 0.1em 100%;
	transition: transform 0.2s;
}

.main-menu-burger .nav-item-button[aria-expanded='true']::after {
	transform: translateY(-50%) rotate(135deg);
}

.main-menu-burger .nav-item-current::before {
	content: '❯';
	margin-right: 0.5em;
	color: var(--farbe-blau);
}

/* Ebenen-Panels (Akkordeon) — geschlossen max-height:0, offen 400vh (wie Original: absichtlich
   überdimensioniert, damit jede Inhaltslänge ohne erneute Messung passt). */
.main-menu-burger .sub-navi {
	list-style: none;
	position: relative;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s ease-in;
}

.main-menu-burger .sub-navi:not([aria-hidden='true']) {
	max-height: 400vh;
}

/*
 * Suche (Desktop-Overlay, ≥ 993 px) — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md §6.4,
 * Bericht 10a §5 (Overlay 528 × 380,83 px, Q1 = 310,42 px mit 5 Quicklinks).
 *
 * Unter 993px existiert kein Desktop-Overlay — dort hat Burger.astro sein eigenes Suchfeld
 * (13-burger.css), deshalb hier defaultmäßig display:none.
 */

.global-search {
	display: none;
}

@media (min-width: 993px) {
	.global-search {
		display: block;
		position: fixed;
		top: 0.75rem;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: 33rem;
		background: var(--farbe-weiss);
		border-radius: 2rem;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
		padding-block-end: 1.5rem;
		z-index: var(--ebene-suche);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.17s linear;
	}

	.global-search:not([aria-hidden='true']) {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

.global-search__fieldset {
	position: relative;
	margin-inline: 1rem;
	margin-block-end: 0;
	border-radius: var(--radius-suchfeld);
	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
}

@media (min-width: 993px) {
	.global-search__fieldset {
		margin: 0 1.5rem 1rem;
		box-shadow: none;
	}
}

.global-search__input {
	width: 100%;
	border: none;
	border-radius: var(--radius-suchfeld);
	color: var(--farbe-blau);
	caret-color: var(--farbe-blau);
	padding: 1rem 1rem 1rem 3.75rem;
}

@media (min-width: 993px) {
	.global-search__input {
		box-shadow: inset 0 0 0 0.1875rem var(--farbe-blau);
		font-weight: 700;
		font-size: var(--schrift-klein);
	}

	.global-search__input:focus {
		outline: none;
	}
}

.global-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	color: var(--farbe-text-abgesetzt);
}

.global-search__submit:focus-visible {
	box-shadow: inset 0 0 0 0.1875rem var(--farbe-blau);
	outline: none;
}

.global-search__close {
	display: none;
}

@media (min-width: 993px) {
	.global-search__close {
		display: block;
		position: absolute;
		top: 50%;
		right: 0.75rem;
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		background: var(--farbe-text-abgesetzt);
		transform: translateY(-50%) rotate(45deg);
	}

	.global-search__close::before,
	.global-search__close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 40%;
		height: 2px;
		background: var(--farbe-weiss);
		border-radius: 2px;
		transform: translate(-50%, -50%);
	}

	.global-search__close::before {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.global-search__close:focus-visible {
		box-shadow: 0 0 0 0.125rem var(--farbe-weiss), 0 0 0 0.3125rem var(--farbe-blau);
		outline: none;
	}
}

.quicklinks {
	padding-inline: 1.5rem;
	font-size: var(--schrift-klein);
}

.quicklinks__title {
	margin-block-end: 1rem;
	color: var(--farbe-text-abgesetzt);
	text-transform: uppercase;
}

.quicklinks__link {
	display: block;
	color: var(--farbe-dunkelblau);
	text-decoration: underline var(--farbe-blau);
	line-height: 1.2em;
	padding: 0.5rem 0;
}

/*
 * Brotkrumen — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md §6.6, Bericht 03 Nr. 5,
 * Bericht 10a §8.1, 12-nacharbeit-G3-rahmen-nach-kuerzung.md §4.1 (Variante B1 — Geometrie
 * "auf 0,01px identisch", einziger Unterschied ist die Farbe der Zwischenebenen).
 *
 * Spurbreite als `width:min(Nrem, 100% - 4rem)` statt der Original-Formel mit `--client-vw`
 * (Konzept §3.4/N4 §7.2: koordinatengleich mit und ohne klassischen Scrollbalken) — dasselbe
 * bereits in 03-spuren-rhythmus.css etablierte Muster (Arbeitspaket 6), hier direkt auf die
 * semantischen Klassen angewendet statt über eine zusätzliche Hilfsklasse im Markup.
 */

.main__breadcrumb {
	width: min(var(--spur-mittel), 100% - 4rem);
	margin-inline: auto;
	margin-top: 2rem;
}

.main__breadcrumb .breadcrumb {
	font-size: var(--schrift-klein);
}

.footer__breadcrumb {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
}

.footer__breadcrumb::before {
	content: '';
	display: block;
	height: 0.0625rem;
	width: 100%;
	background-color: var(--farbe-haarlinie);
	margin-bottom: 2rem;
}

.breadcrumb {
	padding-bottom: 2rem;
	text-align: center;
}

.breadcrumb__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

.breadcrumb__item {
	margin: 0;
	padding: 0;
}

/* Florian, 25.09.2026 (löst Variante B1 ab): alle Stufen mit eigener Seite sind Links, sehen aber
   aus wie Text — dunkelgrau (#333 vom Fließtext geerbt), nicht blau, nicht unterstrichen. Nur beim
   Überfahren/Fokus werden sie rot, damit man merkt, dass man klicken kann. Unverlinkte Stufen
   (Menü-Überschriften ohne Seite, aktuelle Seite) sind <span> und sehen genauso aus. */
a.breadcrumb__entry {
	color: inherit;
	text-decoration: none;
}

a.breadcrumb__entry:hover,
a.breadcrumb__entry:focus-visible {
	color: var(--farbe-rot);
}

.breadcrumb__entry {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Eigene, triviale Pfeilform (Polyline statt Original-Sprite general-sprite.svg#chevron) — zeigt
   in der Grundform nach rechts, unter 577px auf "nach unten" gedreht (gestapelte Darstellung). */
.breadcrumb__arrow {
	color: var(--farbe-haarlinie);
	width: 0.75rem;
	height: 0.75rem;
	margin-top: 0.5rem;
	transform: rotate(90deg);
}

@media (min-width: 577px) {
	.breadcrumb {
		line-height: 1.8em;
	}

	.breadcrumb__list {
		display: block;
	}

	.breadcrumb__item {
		display: inline;
	}

	.breadcrumb__entry {
		display: inline;
		margin-inline-end: 0.5rem;
	}

	.breadcrumb__arrow {
		display: inline-block;
		vertical-align: middle;
		margin-top: 0;
		margin-inline-end: 0.75rem;
		transform: none;
	}
}

/*
 * Fusszeile (Menüs/Akkordeon) — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md §6.5,
 * Bericht 10a §8.3, 12-nacharbeit-G3-rahmen-nach-kuerzung.md §3.4 (Variante F3: 4×311px @1440,
 * Höhe 244px; Blockhöhe-Formel 45+40·n).
 *
 * Button/Label-Umschaltung (interaktiver Akkordeon-Knopf mobil vs. reine Überschrift ab 577px)
 * ist hier – anders als im Original – VOLLSTÄNDIG über CSS gelöst, nicht über von JS
 * hinzugefügte/entfernte Sichtbarkeits-Klassen. Das funktioniert dadurch auch ohne JavaScript
 * korrekt (die Überschriften sind ab 577px immer da, ganz ohne Skript).
 */

.footer {
	overflow: hidden;
	width: 100%;
}

.footer__menus-wrap {
	width: min(var(--spur-breit), 100% - 4rem);
	margin-inline: auto;
	padding-bottom: 2rem;
}

.footer__menus-wrap::before {
	content: '';
	display: block;
	height: 0.0625rem;
	width: 100%;
	background-color: var(--farbe-haarlinie);
	margin-bottom: 2rem;
}

.footer__menus {
	display: grid;
	align-items: stretch;
	gap: 0.75rem;
	font-size: var(--schrift-klein);
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 577px) {
	.footer__menus {
		grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
	}
}

@media (min-width: 769px) {
	.footer__menus {
		grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
	}
}

.footer-acco {
	border-bottom: 1px solid var(--farbe-flaeche-hell);
	padding-bottom: 0.75rem;
}

@media (min-width: 1401px) {
	.footer-acco {
		border-bottom: none;
	}
}

@media (max-width: 576px) {
	.footer-acco:last-of-type {
		border-bottom: none;
	}
}

.footer-acco__trigger {
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	text-align: left;
	width: 100%;
}

.footer-acco__trigger:focus {
	outline: none;
}

.footer-acco__trigger:focus .footer-acco__icon {
	border-color: transparent;
	box-shadow: 0 0 0 0.1875rem var(--farbe-blau);
}

.footer-acco__title {
	margin-top: 0.375rem;
	font-weight: 700;
}

.footer-acco__icon {
	position: relative;
	display: block;
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	border: 1px solid var(--farbe-haarlinie);
	border-radius: 50%;
	transition: transform 0.2s ease-in-out;
}

.footer-acco__icon::before,
.footer-acco__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.8125rem;
	height: 0.1875rem;
	background-color: var(--farbe-dunkelblau);
	border-radius: 0.125rem;
	transform: translate(-50%, -50%);
}

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

.footer-acco__trigger[aria-expanded='true'] .footer-acco__icon {
	transform: rotate(45deg);
}

@media (min-width: 577px) {
	.footer-acco__icon {
		display: none;
	}
}

/* KEIN margin-top hier (anders als .footer-acco__title für den MOBILEN Knopf) — die Blockhöhen-
   Formel 44+40n / 45+40n (12-nacharbeit-G3…, §3.4) geht NUR mit label(24px) + menu margin-top
   (8px) + n×40px + padding-bottom(12px) auf; ein zusätzliches margin-top hätte hier +6px ergeben
   (beim ersten Bauversuch geschehen — Höhe maß 250px statt 244px, über den F3-Test gegen das
   Orakel gefunden). */
.footer-acco__label {
	display: none;
	color: var(--farbe-text);
	font-weight: 400;
}

@media (min-width: 577px) {
	.footer-acco__trigger {
		display: none;
	}

	.footer-acco__label {
		display: block;
	}
}

.footer-acco__menu {
	margin-top: 0.5rem;
	list-style: none;
	padding: 0;
}

.footer-acco__link {
	display: block;
	padding: 0.5rem 0;
	color: var(--farbe-blau);
	text-decoration: underline var(--farbe-blau);
}

/* Panel: Akkordeon nur unter 577px (JS-gesteuert über aria-hidden, s. fusszeile.ts); ab 577px
   immer sichtbar, unabhängig vom Zustand — matcht die ORIGINAL-Absicht (Original erreicht das
   nur zufällig richtig per !important-Override, s. Fusszeile.astro-Kommentar). */
.footer-acco__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--dauer-akkordeon) var(--easing-akkordeon);
}

.footer-acco__panel:not([aria-hidden='true']) {
	max-height: 100vh;
}

@media (min-width: 577px) {
	.footer-acco__panel {
		display: block !important;
		max-height: none;
		overflow: visible;
	}
}

/*
 * Sozialleiste — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md §6.5, Bericht 10a §8.2
 * (zwei Kreise 64px, Blau-Verlauf, 12px/.75rem Abstand).
 */

.footer__social {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
}

.footer__social-list {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem 0;
	list-style: none;
}

.footer__social-media-link {
	display: block;
	border-radius: 50%;
	flex: 0 1 64px;
}

.footer__social-media-link svg {
	display: block;
	width: 4rem;
	height: 4rem;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--verlauf-blau);
}

.footer__social-media-link:focus-visible {
	outline: 0.2rem solid var(--farbe-blau);
	outline-offset: 0.1rem;
	border-radius: 50%;
}

/*
 * Signaturzeile (Variante S1) — Arbeitspaket 7. Werte wörtlich aus 00-GESAMTANALYSE.md §6.5,
 * Bericht 10a §8.4, 12-nacharbeit-G3-rahmen-nach-kuerzung.md §3.5 (S1: 759,19px @1440,
 * 3 Zeilen @375).
 */

.footer__signature {
	width: min(var(--spur-breit), 100% - 4rem);
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 993px) {
	.footer__signature {
		text-align: left;
	}
}

.footer__signature::before {
	content: '';
	display: block;
	height: 0.0625rem;
	width: 100%;
	background-color: var(--farbe-haarlinie);
	margin-bottom: 1.5rem;
}

.footer__imprint {
	margin-bottom: 2rem;
}

@media (min-width: 577px) {
	.footer__imprint {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
	}
}

.footer__copyright {
	white-space: nowrap;
}

.footer__imprint-nav {
	font-size: var(--schrift-klein);
	text-align: start;
}

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

.footer__imprint-nav li {
	display: inline;
}

.footer__imprint-nav li:not(:last-of-type)::after {
	content: ' · ';
}

.footer__imprint-nav a {
	color: var(--farbe-text);
	text-decoration: underline var(--farbe-blau);
}

.footer__imprint-nav a:hover {
	text-decoration-color: var(--farbe-text);
}

.footer__imprint-nav a:focus-visible {
	outline: 0.2rem solid currentColor;
	outline-offset: 0.1rem;
	text-decoration: none;
}

/*
 * Seitenübersicht ohne JS — Arbeitspaket 7. Erfüllt das No-JS-Kriterium aus
 * 00-GESAMTANALYSE.md §6.8. Sichtbar per Default; menue.ts blendet sie aus, sobald es läuft
 * (body.dti-flyout/body.dti-burger sind das zuverlässigste vorhandene "JavaScript läuft"-Signal,
 * s. Komponenten-Kommentar).
 */

.seitenuebersicht-ohne-js {
	width: min(var(--spur-breit), 100% - 4rem);
	margin-inline: auto;
	padding-block: 2rem;
	border-top: 1px solid var(--farbe-haarlinie);
}

body.dti-flyout .seitenuebersicht-ohne-js,
body.dti-burger .seitenuebersicht-ohne-js {
	display: none;
}

.seitenuebersicht-ohne-js ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--schrift-klein);
}

/*
 * Seitenkopf — .header.frame-type-header (Layout) + .header__body (Baustein).
 * „Der Elementkopf .header ist zentriert und 40 rem breit“ (Gesamtanalyse Kapitel 4.2).
 *
 * .header.frame-type-header trägt in unserem Markup nicht die generische Klasse `.frame`
 * (Grundgeruest.astro rendert H1/Subheader direkt, siehe Kommentar dort) — der 64/32-px-Rhythmus
 * aus 03-spuren-rhythmus.css wird deshalb hier bewusst dupliziert, mit denselben Tokens.
 */

.header.frame-type-header {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
	margin-block: var(--frame-abstand-mobil);
	text-align: center;
}

@media (min-width: 577px) {
	.header.frame-type-header {
		margin-block: var(--frame-abstand);
	}
}

/* Fehlte bisher (Nutzer-Feedback 18.09.): Original verankert H1/Subheader UND diesen Absatz im
   selben Container (".textmedia__text", 40 rem) — hier sind es zwei getrennte Bausteine
   (Grundgeruest.astro rendert H1 direkt, Seitenkopf.astro nur den Absatz), die deshalb beide
   selbst denselben Spur-Breite-Constraint tragen müssen. Ohne diese Zeile lief der Absatz über
   die volle <main>-Breite statt auf 40 rem zentriert zu stehen (am Original nachgemessen: 640 px
   bei x=184,5 auf 1024 px Viewport, exakt wie .header.frame-type-header). */
.header__body {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
	margin-top: 1em;
	text-align: left;
}

/* .lead-Größe/-Gewicht kommt aus 04-typografie.css; hier nur der Subheader-Abstand, der im
   Original NICHT am `p`-Absatzabstand (1em, fluid) hängt, sondern an einem festen rem-Wert
   (Bericht 01 §5.3: ".header__subheader{margin-block-end:1rem (≥577: 2rem)}"). */
.header.frame-type-header .lead {
	margin-block-end: 1rem;
}

/* Startseite: das H1 ist unsichtbar (Grundgeruest.astro-Prop "unsichtbareH1"), soll aber auch
   keinen Abstand mehr beanspruchen — sonst bliebe vor dem Startseitenkopf eine unbegründete Lücke
   stehen, die das Original an dieser Stelle nicht hat (dort gibt es diesen Block gar nicht). */
.header.frame-type-header.header--versteckt {
	margin-block: 0;
}

/* Original: .header__header--withsubheader{margin-block-end:1rem} — der Abstand zwischen H1 und
   Untertitel fehlte bisher auf allen Seiten (am Original nachgemessen: 16 px). Die Regel in
   04-typografie.css setzt den H1-Abstand im Elementkopf sonst überall auf 0. */
.header.frame-type-header h1.header__h1--mit-untertitel {
	margin-bottom: 1rem;
}

@media (min-width: 577px) {
	.header.frame-type-header .lead {
		margin-block-end: 2rem;
	}
}

/*
 * ZweiSpalten — Spur „Breit“ (80rem), zweispaltig ab 640 px (Gesamtanalyse Kapitel 4.5: "50/50
 * … werden zweispaltig" ab 640 px). Exakte Werte (624 + 32 + 624 bei 1440) folgen mit dem
 * Baustein-Nachbau in Arbeitspaket 10 — hier nur ein einfaches, funktionierendes Zweispalten-Grid.
 *
 * Der 64/32-px-Rhythmus (margin-block) kommt seit Arbeitspaket 6 aus der generischen `.frame`-
 * Klasse (03-spuren-rhythmus.css) — das Markup trägt bereits `class="frame zweispalten"`
 * (ZweiSpalten.astro). Hier deshalb nur noch Breite/Spalten.
 */

.zweispalten {
	width: min(var(--spur-breit), 100% - 4rem);
	margin-inline: auto;
	display: grid;
	gap: 2rem;
}

@media (min-width: 640px) {
	.zweispalten {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	/* Eigene Entscheidung (Nutzer-Feedback 18.09.: "sollten wir uns schon so einigen dass es auch
	   sauber und gut aussieht, unabhängig wie das auf der Vorlagenseite war") — nicht am Original
	   nachgemessen, sondern bewusst so festgelegt: Ist das Bild höher als der Text (wie bei
	   "Betreuter Fahrdienst"), endete der Text bisher oben mit einer großen, unruhigen Lücke
	   darunter. Vertikal zur Bildhöhe zentriert wirkt die Zeile ausgeglichen. Ist der Text
	   dagegen die höhere Spalte, ändert "center" nichts sichtbar (der Text bestimmt dann ohnehin
	   die Zeilenhöhe). */
	.zweispalten__text {
		align-self: center;
	}
}

/* Strukturierter Baustein-Titel — wie bei Text.astro (22-text.css) entspricht das dem
   Original-Feldtyp ".header", der auch innerhalb der 50/50-Spalte immer zentriert bleibt
   (Bericht 04 Z. 475: "'.header' bleibt zentriert (h4 in 624 px)"). */
.zweispalten__titel {
	text-align: center;
}

/* Fehlte bisher (Nutzer-Feedback 18.09.: uneinheitliche Absätze — "teilweise zu viel weiß
   teilweise zu wenig Abstand"): Im Original bekommt jedes Frame INNERHALB eines Grid-Containers
   (hier: beide Spalten) einen eigenen Abstand nach unten (Bericht 04 §"Frames in Grid-Containern":
   ".frame.gridelements__wrapper .frame{margin:0 0 2rem}", 32 px ab 577 px) — zusätzlich zum
   grid-gap zwischen den Spalten selbst. Ohne das endete die Bild-Spalte (die hier meist die
   höhere ist) direkt am Bildrand, wodurch der Abstand zur nächsten Überschrift kleiner ausfiel
   als im Original. Am Original nachgemessen und exakt reproduziert (624×936-Bild + diese beiden
   Regeln = 1016 px Zeilenhöhe, wie im Original). */
.zweispalten__text,
.zweispalten__bild {
	margin-bottom: 2rem;
}

.zweispalten__bild img {
	border-radius: var(--radius-bild);
	/* Original bettet Bilder in <figure> mit margin-bottom:48px (eigene, zusätzliche Regel
	   NEBEN der obigen 32-px-Spalten-Regel — Bericht 04, "figure{margin-bottom:48px}"). */
	margin-bottom: 3rem;
}

/*
 * Text — Spur „Text“ (40rem), Kapitel 4.3.
 *
 * Der 64/32-px-Rhythmus kommt aus der generischen `.frame`-Klasse (03-spuren-rhythmus.css) —
 * das Markup trägt bereits `class="frame text"` (Text.astro).
 *
 * 84-px-Muster nach Fließtext (Bericht 04 §1.3): weil `.textmedia` im Original ein
 * Flex-Container ist, kollabiert der letzte Absatzabstand (`p{margin-block-end:1em}`) NICHT mit
 * dem `.frame`-Margin darunter — sichtbarer Abstand = 1em (Absatz) + 64/32px (Frame). Reproduziert
 * über denselben Trick: `.text__inhalt` als Flex-Spalte, NICHT `main` selbst (CLAUDE.md-Tabu
 * betrifft nur `main`).
 */

.text {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
}

/* Strukturierter Baustein-Titel (Prop "titel") entspricht dem Original-Feldtyp ".header" und ist
   dort IMMER zentriert (Bericht 04 Z. 500/654: nur frei im Fließtext getippte Überschriften sind
   linksbündig, das strukturierte Titelfeld eines Bausteins ist es nie) — unabhängig vom
   "mittig"-Prop, das nur den Fließtext darunter betrifft. */
.text__titel {
	text-align: center;
}

.text__inhalt {
	display: flex;
	flex-direction: column;
}

.text__inhalt--mittig {
	text-align: center;
}

/*
 * Bühne (Hero-Bild unter der Kopfzeile) — vorher (Arbeitspaket 4/7) nur ein unbeschnittenes
 * <img width:100%;height:auto>, das die volle Höhe des Originalbilds zeigte statt eines
 * "Streifens" (Nutzer-Feedback: Bild wirkt "riesig" statt schmales Band).
 *
 * Original: ALLE Bühnenbilder sind serverseitig auf 3:1 zugeschnitten, mit individueller
 * vertikaler Lage je Bild (analyse/konzept/entwurf-langlebig.md Z. 369: "Alle Bühnen sind
 * 3:1-Ausschnitte … mit individueller vertikaler Lage"; gemessen 1280×426, Z. 264-268). Die
 * Zuschnitt-Rechtecke (x/y/b/h in % des Masterbilds) liegen dafür bereits in
 * inhalte/daten/bilder.yaml (`zuschnitte.buehne`) — nur angewendet wurde das bisher nirgends.
 *
 * Hier per CSS statt per Bildpipeline nachgebildet (die volle mehrstufige Pipeline mit
 * AVIF/Breakpoints ist ein späteres Arbeitspaket): `aspect-ratio:3/1` + `object-fit:cover`
 * erzwingt denselben "Streifen" wie im Original, `object-position` bekommt die vertikale
 * Zielposition als CSS-Custom-Property von Grundgeruest.astro (dort aus x/y/b/h berechnet, da
 * x=0/b=100 bei allen Bühnen konstant ist — nur die Y-Position variiert je Bild).
 */
.buehne {
	position: relative;
	aspect-ratio: 3 / 1;
	overflow: hidden;
}

/* Bildnachweis-Plakette (Original: span.o-media__copyright im Bild-Wrapper, nur wenn Copyright
   gepflegt ist) — Werte wörtlich aus Bericht 04 Z. 465/529/541 (Stufe "stage", nicht die
   vertikale Hero-Variante). Kürzung auf 32 Zeichen ist dort dokumentiert, aber noch nirgends
   gebraucht (kürzester bisher verwendete Nachweis "Foto: Andre Zelck / DRK", 23 Zeichen) —
   nachrüsten, sobald ein längerer Text vorkommt. */
.buehne__copyright {
	position: absolute;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	color: var(--farbe-schwarz);
	font-size: 0.6875rem;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	border-radius: 1.5rem 0 0 1.5rem;
	z-index: 2;
}

/* Original-Bruch liegt bei 1023px — kein dokumentierter Breakpoint in diesem Projekt (00-tokens.css
   Kommentar "Werte vorkommen: …"); auf den nächstgelegenen, hier bereits durchgängig für die
   Mobil/Desktop-Grenze verwendeten Wert (992px, Burger/Flyout-Wechsel) vereinheitlicht statt einen
   neuen, einmaligen Breakpoint einzuführen. */
@media (max-width: 992px) {
	.buehne__copyright {
		bottom: 0.75rem;
	}
}

/* Original: Bühne hat "unten 64/32 px" (Bericht 04 Z. 86), kollabiert dort mit dem Brotkrumen-
   Abstand oben (2rem) — am Original nachgemessen: Brotkrume beginnt ab 577 px 64 px unter der
   Bühne (mobil 32). Bei uns steht die Bühne VOR <main> in einem Flex-Container (.body__wrapper),
   die Abstände kollabieren also nicht, sondern addieren sich — deshalb hier nur die fehlenden
   2rem ab 577 px. */
@media (min-width: 577px) {
	.buehne {
		margin-block-end: 2rem;
	}
}

.buehne img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% var(--buehne-position-y, 50%);
}

/*
 * FacebookSeite — Zuschnitt des Facebook-Seiten-Plugins (Original: Inline-Style-Regel "fb-crop"
 * auf aktuelles.html). Facebooks Plugin liefert immer einen ca. 70/60-px-Kopfbereich mit, den das
 * Original per Overflow-Beschnitt + verschobenem Iframe kaschiert — Werte 1:1 übernommen.
 */

.facebook-seite {
	max-width: 500px;
	margin: 0 auto;
	overflow: hidden;
	height: 930px;
	position: relative;
}

.facebook-seite iframe {
	display: block;
	width: 100%;
	height: 1000px;
	transform: translateY(-70px);
	border: 0;
}

@media (max-width: 540px) {
	.facebook-seite {
		height: 880px;
	}

	.facebook-seite iframe {
		height: 950px;
		transform: translateY(-60px);
	}
}

/*
 * Startseitenkopf/Teaserkarte — Hero der Startseite (Original: multimedia_header, Bericht 05
 * Befund 4-6). Bildformat je Breakpoint: 2/3 bis 576px, 3/2 von 577-992px, 24/9 ab 993px.
 * Teaser-Zeile: nativ scrollende Flex-Zeile (kein Slider), negativer margin-top exakt in Höhe des
 * 3:2-Kartenbilds, damit die Karten auf dem Hero-Foto aufliegen und der Text auf Seitenweiß steht.
 */

.startseitenkopf {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.startseitenkopf__bild {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

@media (min-width: 577px) {
	.startseitenkopf__bild {
		aspect-ratio: 3 / 2;
	}
}

@media (min-width: 993px) {
	.startseitenkopf__bild {
		aspect-ratio: 24 / 9;
	}
}

.startseitenkopf__teaser {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	max-width: max-content;
	margin-inline: auto;
	padding-inline: 2rem;
	padding-block-end: 2rem;
	margin-top: -12.098125rem;
}

@media (min-width: 577px) {
	.startseitenkopf__teaser {
		gap: 2rem;
		margin-top: -14.601875rem;
	}
}

.teaser-karte {
	position: relative;
	flex: none;
	width: 290px;
	border-radius: 1.5rem;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
	overflow: hidden;
	text-align: center;
	background: #fff;
}

@media (min-width: 577px) {
	.teaser-karte {
		width: 350px;
	}
}

.teaser-karte__bild {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.teaser-karte__inhalt {
	padding: 1rem 1.5rem 1.5rem;
}

.teaser-karte__titel {
	font-size: 1.56rem;
	font-weight: 700;
	color: var(--farbe-rot);
	line-height: 1.2;
	margin-bottom: 0.75em;
}

.teaser-karte__text {
	font-size: 1rem;
	line-height: 1.1;
	color: var(--farbe-text);
}

.teaser-karte__link {
	position: absolute;
	inset: 0;
}

.bild {
	width: min(var(--spur-mittel), 100% - 4rem);
	margin-inline: auto;
}

.bild__bild {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-bild);
}

/*
 * Ansprechpartner — Raster der Kontaktpersonen (Original: .gridblock--3columns, Bericht 05
 * Befund 16; Regeln aus dem Original-CSS): Flex-Zeile, ab 640 px zwei Spalten (calc(50% - 1rem)),
 * 2rem Abstand. Seit 04.10.2026 in der Textbreite (Florian: Textfläche mittig wie auf den anderen
 * Seiten), deshalb keine dritte Spalte mehr.
 * Unter 640 px hat der Eintrag keine feste Breite und umbricht nach Inhalt.
 */

.ansprechpartner__gruppe {
	/* Textbreite wie Fließtext und Trenner — Textfläche mittig (Florian, 04.10.2026). */
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
}

.ansprechpartner__kopf {
	margin-bottom: 1.5rem;
}

/* Bereichsüberschriften im Rot-Verlauf der Buttons (Florian, 04.10.2026, Variante B). Ohne
   background-clip:text bleibt die Schrift einfach dunkelrot. */
.ansprechpartner__kopf .optik-h4 {
	color: var(--farbe-dunkelrot);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.ansprechpartner__kopf .optik-h4 {
		width: fit-content; /* Verlauf nur über die Schrift; Block bleibt Block (Abstände kollabieren wie bisher) */
		background: var(--verlauf-rot);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.ansprechpartner__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex-Spalte wie .text__inhalt (22-text.css): der letzte Absatzabstand (1em) kollabiert im
   Original NICHT mit dem Frame-Abstand darunter (1rem mobil, 2rem ab 577 px). */
.ansprechpartner__karte {
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
	/* Lange Funktionsbezeichnungen („Qualitätsmanagementbeauftragter“) in der halben Textbreite trennen
	   statt über den Spaltenrand zu laufen. */
	hyphens: auto;
	hyphenate-limit-chars: 14 6 6;
}

/* Name als Überschrift der Person (Florian, 04.10.2026, Variante C): etwas größer, Funktion und
   Telefon rücken näher heran. */
.ansprechpartner__karte strong {
	font-size: 1.2em;
}

.ansprechpartner__karte p:first-child {
	margin-bottom: 0.5em;
}

.ansprechpartner__trenner {
	width: min(var(--spur-text), 100% - 2rem);
	height: 1px;
	margin: 1.5em auto;
	border: 0;
	background-color: #cbcbcb;
}

@media (min-width: 577px) {
	/* 2rem statt 4rem (Florian, 04.10.2026): Bereichsüberschrift gehört sichtbar zu ihren Personen. */
	.ansprechpartner__kopf {
		margin-bottom: 2rem;
	}

	.ansprechpartner__karte {
		margin-bottom: 2rem;
	}
}

@media (min-width: 640px) {
	.ansprechpartner__person {
		margin-right: 2rem;
		width: calc(50% - 1rem);
	}

	.ansprechpartner__person:nth-of-type(2n) {
		margin-right: 0;
	}
}

/* Sicherer Abstand unter der festen Kopfleiste, wenn die Sprungleiste einen Bereich ansteuert. */
.ansprechpartner__gruppe {
	scroll-margin-top: calc(var(--header-hoehe-mobil) + 1rem);
}

/* Sprungleiste — nur am Handy (unter 640 px), Chips wie „Ihre Auswahl“ im Kontaktformular. */
.ansprechpartner__sprung {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
}

.ansprechpartner__sprung-titel {
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.ansprechpartner__sprung-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ansprechpartner__sprung-link {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border-radius: 62.4375rem;
	background: var(--farbe-flaeche-hell);
	color: var(--farbe-text);
	text-decoration: none;
	white-space: nowrap;
}

.ansprechpartner__sprung-link:hover,
.ansprechpartner__sprung-link:focus-visible {
	color: var(--farbe-rot);
}

@media (min-width: 640px) {
	.ansprechpartner__sprung {
		display: none;
	}

	.ansprechpartner__gruppe {
		scroll-margin-top: calc(var(--header-hoehe) + 1rem);
	}
}

/*
 * Kontakt-Assistent (KontaktAssistent.astro) — geführter Kontakt in drei Schritten. Bewusst KEIN
 * Nachbau des Originals (dort Jotform), sondern ein eigenes, modernes Bedienkonzept im Look der
 * Seite: helle Fläche, weiße Auswahlkarten (Radius/Schatten wie die Startseiten-Teaserkarten),
 * BRK-Rot für Symbole, Auswahl, Fokus und Buttons (bis 26.09.2026 Seiten-Blau; Florian: alle Formulare
 * einheitlich rot wie die Anfrageformulare der Angebotsseiten).
 *
 * Ohne JavaScript ist alles sichtbar und das Formular klassisch absendbar. Mit JavaScript blendet
 * kontakt-assistent.ts die Schritte nacheinander ein; `@media (scripting: enabled)` verhindert
 * dabei das kurze Aufblitzen des vollständigen Formulars vor dem Skriptstart.
 */

.kontakt {
	width: min(var(--spur-mittel), 100% - 4rem);
	margin-inline: auto;
}

.kontakt__huelle {
	background: var(--farbe-flaeche-hell);
	border-radius: 1.5rem;
	padding: clamp(1.25rem, 4vw, 3rem);
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.06);
}

/* --- Fortschritt -------------------------------------------------------------------------- */
.kontakt__fortschritt {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.kontakt__punkt {
	flex: 1;
	min-width: 0; /* sonst schrumpft der Schritt nicht und die Beschriftung läuft über den Rand */
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-top: 0.75rem;
	position: relative;
	font-size: var(--schrift-klein);
	font-weight: 400;
	color: var(--farbe-text-abgesetzt);
}

.kontakt__punkt::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 0.3rem;
	border-radius: 0.3rem;
	background: #d9d9d9;
	transition: background var(--dauer-standard) var(--easing-standard);
}

.kontakt__punkt-nr {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: var(--radius-rund);
	background: #d9d9d9;
	color: var(--farbe-weiss);
	font-size: 0.8rem;
	transition: background var(--dauer-standard) var(--easing-standard);
}

.kontakt__punkt-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kontakt__punkt[aria-current='step'] {
	color: var(--farbe-text);
}

.kontakt__punkt[aria-current='step']::before,
.kontakt__punkt.ist-fertig::before {
	background: var(--verlauf-rot);
}

.kontakt__punkt[aria-current='step'] .kontakt__punkt-nr,
.kontakt__punkt.ist-fertig .kontakt__punkt-nr {
	background: var(--verlauf-rot);
}

.kontakt__punkt.ist-fertig {
	color: var(--farbe-text);
}

.kontakt__punkt.ist-uebersprungen {
	opacity: 0.45;
}

/* --- Schritte ----------------------------------------------------------------------------- */
.kontakt--js .kontakt__schritt:not(.ist-aktiv),
.kontakt--js .kontakt__personen:not(.ist-aktiv) {
	display: none;
}

@media (scripting: enabled) {
	.kontakt__schritt:not(.ist-aktiv),
	.kontakt__personen:not(.ist-aktiv) {
		display: none;
	}
}

/* Ohne JavaScript stehen alle Themen-Gruppen untereinander — die Überschrift sagt dort, zu
   welchem Thema die Personen gehören. Mit JavaScript ist das überflüssig. */
.kontakt--js .kontakt__nur-ohne-js {
	display: none;
}

@media (scripting: enabled) {
	.kontakt__nur-ohne-js {
		display: none;
	}
}

.kontakt__schritt {
	margin: 0;
	padding: 0;
	border: 0;
}

.kontakt__schritt--rein {
	animation: kontakt-rein 0.35s var(--easing-standard) both;
}

@keyframes kontakt-rein {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.kontakt__frage {
	margin: 0 0 0.5rem;
	font-size: var(--schrift-h4);
	line-height: var(--zeilenhoehe-h4);
	font-weight: 700;
	color: var(--farbe-text);
	outline: none;
}

.kontakt__hilfe {
	margin: 0 0 1.75rem;
	color: var(--farbe-text-abgesetzt);
	font-size: 1rem;
	line-height: 1.45;
}

.kontakt__gruppe-titel {
	margin: 1.5rem 0 0.75rem;
	font-size: 1.2rem;
}

/* --- Auswahlkarten (Themen, Personen, Team) ----------------------------------------------- */
.kontakt__themen,
.kontakt__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	gap: 1rem;
}

.kontakt__raster {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	align-items: start;
}

.kontakt__thema,
.kontakt__person {
	position: relative;
}

.kontakt__thema--breit {
	grid-column: 1 / -1;
}

/* Das native Eingabeelement bleibt für Tastatur und Screenreader voll funktionsfähig, nur
   unsichtbar; die Karte (label) zeigt Zustand und Fokus. Erhöhte Spezifität, weil 09-formulare.css
   Radio/Checkbox global als Kästchen zeichnet. */
.kontakt input.kontakt__wahl {
	position: absolute;
	inset: 0 auto auto 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.kontakt__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	height: 100%;
	margin: 0;
	padding: 1.25rem 1.25rem 1.35rem;
	background: var(--farbe-weiss);
	border: 0.125rem solid transparent;
	border-radius: 1.25rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.07);
	color: var(--farbe-text);
	font-size: 1rem;
	cursor: pointer;
	transition:
		transform var(--dauer-standard) var(--easing-standard),
		box-shadow var(--dauer-standard) var(--easing-standard),
		border-color var(--dauer-standard) var(--easing-standard),
		background var(--dauer-standard) var(--easing-standard);
}

.kontakt__karte:hover {
	transform: translateY(-0.15rem);
	box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.13);
}

.kontakt__wahl:checked + .kontakt__karte {
	border-color: var(--farbe-rot);
	background: #fff7f7;
	box-shadow:
		0 0 0 0.1rem var(--farbe-rot),
		0 0.5rem 1.4rem rgba(230, 0, 5, 0.15);
}

.kontakt__wahl:focus-visible + .kontakt__karte {
	outline: 0.2rem solid var(--farbe-rot);
	outline-offset: 0.2rem;
}

.kontakt__symbol {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1.1rem;
	background: var(--verlauf-rot);
	color: var(--farbe-weiss);
	box-shadow: 0 0.35rem 0.8rem rgba(230, 0, 5, 0.25);
}

.kontakt__symbol--hell {
	background: var(--farbe-flaeche-hell);
	color: var(--farbe-text);
	box-shadow: none;
}

.kontakt svg {
	width: 1.75rem;
	height: 1.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kontakt__karte-text {
	display: block;
	min-width: 0;
}

.kontakt__karte-titel {
	display: block;
	overflow-wrap: anywhere; /* lange Wörter ("Fördermitgliedschaft") auf schmalen Karten */
	hyphens: auto;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.kontakt__karte-beschreibung {
	display: block;
	margin-top: 0.3rem;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--farbe-text-abgesetzt);
}

.kontakt__haken {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: var(--radius-rund);
	background: var(--farbe-rot);
	color: var(--farbe-weiss);
	transform: scale(0);
	transition: transform var(--dauer-standard) var(--easing-standard);
}

.kontakt__haken svg {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.4;
}

.kontakt__wahl:checked + .kontakt__karte .kontakt__haken {
	transform: scale(1);
}

/* Personen und "Team": Symbol/Avatar links neben dem Text statt darüber */
.kontakt__karte--person,
.kontakt__karte--team {
	flex-direction: row;
	align-items: center;
}

.kontakt__karte--person {
	padding-right: 3rem;
}

.kontakt__karte--team {
	border: 0.125rem dashed var(--farbe-haarlinie);
	box-shadow: none;
	background: transparent;
}

.kontakt__thema--breit:not(.kontakt__team) .kontakt__karte {
	flex-direction: row;
	align-items: center;
}

.kontakt__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-rund);
	background: #fdeaea;
	color: var(--farbe-rot);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.kontakt__anruf {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.6rem 0 0 0.5rem;
	font-size: 1rem;
}

.kontakt__anruf svg {
	width: 1rem;
	height: 1rem;
	flex: none;
}

/* Rufnummern ohne Linkoptik wie in den Anfrageformularen (Florian, 26.09.2026), rot beim Überfahren. */
.kontakt__anruf {
	color: var(--farbe-text-abgesetzt);
	text-decoration: none;
}

.kontakt__anruf:hover,
.kontakt__anruf:focus-visible {
	color: var(--farbe-rot);
}

.kontakt__team {
	margin-top: 1rem;
}

.kontakt__hinweis {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	background: var(--farbe-weiss);
	border-left: 0.3rem solid var(--farbe-rot);
	border-radius: 0.75rem;
	font-size: 1rem;
	line-height: 1.4;
}

.kontakt__hinweis-symbol {
	flex: none;
	color: var(--farbe-rot);
}

.kontakt__hinweis-symbol svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* --- Schritt 3: Zusammenfassung, Felder, Ablage, Einwilligung ------------------------------ */
.kontakt__zusammenfassung {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1.75rem;
	padding: 0.85rem 1rem;
	background: var(--farbe-weiss);
	border-radius: 1rem;
	font-size: var(--schrift-klein);
}

.kontakt__zusammenfassung-label {
	font-weight: 400;
	color: var(--farbe-text-abgesetzt);
}

.kontakt__chips {
	display: contents;
}

.kontakt__chip {
	display: inline-block;
	padding: 0.25rem 0.8rem;
	border-radius: 62.4375rem;
	background: var(--farbe-flaeche-hell);
	color: var(--farbe-text);
	font-weight: 400;
}

.kontakt__aendern {
	margin-left: auto;
	padding: 0.25rem 0.5rem;
	color: var(--farbe-rot);
	font-size: var(--schrift-klein);
	font-weight: 400;
	text-decoration: none;
}

.kontakt__felder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	column-gap: 1rem;
}

.kontakt__feld--voll {
	grid-column: 1 / -1;
}

.kontakt__feldhinweis {
	margin: -0.25rem 0 1.25rem;
	font-size: 1rem;
	color: var(--farbe-text-abgesetzt);
}

.kontakt input.eingabe-fehler,
.kontakt textarea.eingabe-fehler {
	border-color: var(--farbe-rot);
}

.kontakt__ablage-huelle {
	margin: 0.5rem 0 1.5rem;
}

.kontakt__ablage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 1.5rem 1rem;
	border: 0.125rem dashed rgba(0, 0, 0, 0.15);
	border-radius: 1.25rem;
	background: var(--farbe-weiss);
	text-align: center;
	transition:
		border-color var(--dauer-standard) var(--easing-standard),
		background var(--dauer-standard) var(--easing-standard);
}

.kontakt__ablage:hover,
.kontakt__ablage.ist-drueber {
	border-color: var(--farbe-rot);
	background: var(--farbe-weiss);
}

.kontakt__ablage:focus-within {
	outline: 0.2rem solid var(--farbe-rot);
	outline-offset: 0.2rem;
}

/* Das native Feld liegt unsichtbar über der ganzen Fläche: Klick UND Ziehen funktionieren
   nativ, auch ohne JavaScript. */
.kontakt input.kontakt__ablage-eingabe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.kontakt__ablage-symbol {
	color: var(--farbe-rot);
}

.kontakt__ablage-symbol svg {
	width: 2.25rem;
	height: 2.25rem;
}

.kontakt__ablage-text {
	font-size: 1rem;
	color: var(--farbe-text);
}

.kontakt__ablage-text strong {
	font-weight: 400;
}

.kontakt__ablage-optional,
.kontakt__ablage-hinweis {
	color: var(--farbe-text-abgesetzt);
	font-size: 1rem;
}

.kontakt__dateien {
	display: grid;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.kontakt__dateien:empty {
	display: none;
}

.kontakt__datei {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.9rem;
	background: var(--farbe-weiss);
	border-radius: 0.85rem;
	font-size: var(--schrift-klein);
	animation: kontakt-rein 0.25s var(--easing-standard) both;
}

.kontakt__datei-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}

.kontakt__datei-groesse {
	flex: none;
	color: var(--farbe-text-abgesetzt);
}

.kontakt__datei-entfernen {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-rund);
	color: var(--farbe-text);
	font-size: 1.2rem;
	line-height: 1;
}

.kontakt__datei-entfernen:hover {
	background: #fdeaea;
	color: var(--farbe-rot);
}

.kontakt__einwilligung {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0 0 1.5rem;
}

.kontakt input.kontakt__haekchen {
	flex: none;
	top: 0.15rem;
	margin: 0;
}

.kontakt__einwilligung label {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
}

.kontakt__meldung {
	white-space: pre-line; /* mehrere Hinweise stehen untereinander (Zeilenumbruch im Text) */
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.85rem;
	background: #fdeaea;
	color: #8f0003;
	font-weight: 700;
	font-size: var(--schrift-klein);
}

.kontakt__meldung[hidden] {
	display: none;
}

.kontakt__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
}

.kontakt__aktionen .button {
	margin: 0;
	white-space: nowrap;
}

/* Ohne JavaScript gibt es keine Schritte — Zurück/Weiter/Ändern verschwinden, nur "Nachricht senden" bleibt. */
.kontakt:not(.kontakt--js) [data-weiter],
.kontakt:not(.kontakt--js) [data-zurueck],
.kontakt:not(.kontakt--js) [data-aendern],
.kontakt:not(.kontakt--js) [data-zusammenfassung],
.kontakt:not(.kontakt--js) .kontakt__fortschritt {
	display: none;
}

@media (scripting: enabled) {
	.kontakt:not(.kontakt--js) [data-weiter],
	.kontakt:not(.kontakt--js) [data-zurueck] {
		display: inline-block;
	}

	.kontakt:not(.kontakt--js) [data-zusammenfassung],
	.kontakt:not(.kontakt--js) .kontakt__fortschritt {
		display: flex;
	}

	.kontakt:not(.kontakt--js) [data-aendern] {
		display: inline;
	}
}

/* Unsichtbares Bot-Feld (Honeypot) — wie im Formularband, aber ohne dessen Klassen. */
.kontakt__zusatzfeld {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Bestätigung -------------------------------------------------------------------------- */
.kontakt__erfolg {
	padding: 1.5rem 0.5rem;
	text-align: center;
	outline: none;
}

.kontakt__erfolg[hidden] {
	display: none;
}

.kontakt .kontakt__erfolg-symbol {
	width: 5rem;
	height: 5rem;
	margin-bottom: 1rem;
	stroke-width: 3;
}

.kontakt__erfolg-kreis {
	stroke: var(--farbe-rot);
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: kontakt-zeichnen 0.7s var(--easing-standard) 0.1s forwards;
}

.kontakt__erfolg-haken {
	stroke: var(--farbe-rot);
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: kontakt-zeichnen 0.4s var(--easing-standard) 0.7s forwards;
}

@keyframes kontakt-zeichnen {
	to {
		stroke-dashoffset: 0;
	}
}

.kontakt__erfolg-text {
	margin: 0.5rem auto 1rem;
	max-width: 32rem;
}

.kontakt__fallnummer {
	display: inline-block;
	margin: 0;
	padding: 0.6rem 1.25rem;
	border-radius: 62.4375rem;
	background: var(--farbe-weiss);
}

.kontakt__fallnummer strong {
	letter-spacing: 0.06em;
}

/* Unter 640 px: Themenkarten waagerecht (Symbol links) — sonst wären zehn hohe Karten untereinander
   eine sehr lange Seite. */
@media (max-width: 639px) {
	/* Mehr Breite für die Karten (Florian, 04.10.2026: Überschriften rissen am Handy, „Rettungs-dienst“):
	   schmalerer Seitenrand und Innenabstand; rechts nur noch bei Karten mit Haken Platz frei. */
	.kontakt {
		width: calc(100% - 2rem);
	}

	.kontakt__huelle {
		padding: 1rem;
	}

	.kontakt__karte {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding: 1rem;
	}

	.kontakt__symbol {
		width: 3rem;
		height: 3rem;
		border-radius: 0.9rem;
	}

	.kontakt__karte--person,
	.kontakt__karte--team {
		padding-right: 3rem;
	}

	/* Fortschritt: am Handy nur der aktuelle Schritt mit Beschriftung, die anderen nur als Nummer. */
	.kontakt__punkt[aria-current='step'] {
		flex: 3;
	}

	.kontakt__punkt:not([aria-current='step']) .kontakt__punkt-text {
		display: none;
	}
}

/* --- Anfrage (Angebotsseiten): ein Schritt, gleiche Optik ------------------------------------ */
.kontakt__kopfzeile {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--farbe-weiss);
	border-radius: 1rem;
	font-size: 1rem;
	line-height: 1.5;
}

.kontakt__kopfzeile p {
	margin: 0;
}

.kontakt__anfrage-zu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	color: var(--farbe-text-abgesetzt);
	font-weight: 700;
}

.kontakt__ansprech--tel {
	color: var(--farbe-text-abgesetzt);
}

.kontakt__ansprech--tel a {
	white-space: nowrap; /* Rufnummern nicht mitten in der Nummer umbrechen */
}

/* Hinweis ohne Symbol (z. B. Transportbestellung beim Fahrdienst) */
.kontakt__hinweis--text {
	display: block;
}

.kontakt__aktionen--ende {
	justify-content: flex-end;
}

/* Rückruf-Zeitfenster: Auswahl-Pillen, rot gefüllt wenn gewählt. Mit JavaScript klappt der Block
   erst auf, wenn eine Rufnummer eingetragen ist; ohne JavaScript ist er immer sichtbar. */
.kontakt__rueckruf {
	margin: 0 0 1.25rem;
}

.kontakt--js .kontakt__rueckruf:not(.ist-offen) {
	display: none;
}

.kontakt--js .kontakt__rueckruf.ist-offen {
	animation: kontakt-rein 0.3s var(--easing-standard) both;
}

.kontakt__pillen-frage {
	margin: 0 0 0.6rem;
	font-weight: 700;
}

.kontakt__pillen-frage span {
	font-weight: 400;
	color: var(--farbe-text-abgesetzt);
}

.kontakt__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.kontakt__pille {
	position: relative;
}

.kontakt__pille label {
	display: block;
	margin: 0;
	padding: 0.65rem 1.5rem;
	background: var(--farbe-weiss);
	border: 0.125rem solid transparent;
	border-radius: 62.4375rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.07);
	color: var(--farbe-text);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		background var(--dauer-standard) var(--easing-standard),
		color var(--dauer-standard) var(--easing-standard),
		box-shadow var(--dauer-standard) var(--easing-standard),
		transform var(--dauer-standard) var(--easing-standard);
}

.kontakt__pille label:hover {
	box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.13);
}

.kontakt__wahl:checked + label {
	background: var(--verlauf-rot);
	color: var(--farbe-weiss);
	box-shadow: 0 0.35rem 1rem rgba(230, 0, 5, 0.25);
	transform: scale(1.04);
}

.kontakt__wahl:focus-visible + label {
	outline: 0.2rem solid var(--farbe-rot);
	outline-offset: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
	.kontakt *,
	.kontakt *::before,
	.kontakt *::after {
		animation: none !important;
		transition: none !important;
	}

	.kontakt__karte:hover {
		transform: none;
	}

	.kontakt__erfolg-kreis,
	.kontakt__erfolg-haken {
		stroke-dashoffset: 0;
	}
}

/* Buttons der Formularschritte: "Weiter"/"Senden" im BRK-Rot, "Zurück" dunkelgrau (Florian,
   26.09.2026: alle Formulare einheitlich rot). Der sitegültige Button bleibt blau (08-buttons.css). */
.kontakt__aktionen .button--primary {
	background: var(--verlauf-rot);
}

.kontakt__aktionen .button--primary:focus {
	box-shadow: 0 0 0 0.125rem var(--farbe-weiss), 0 0 0 0.25rem var(--farbe-rot);
}

.kontakt__aktionen .button--tertiary {
	color: var(--farbe-text);
	font-weight: 400;
}

.kontakt__aktionen .button--tertiary:hover,
.kontakt__aktionen .button--tertiary:focus-visible {
	color: var(--farbe-rot);
}

/*
 * Sanitätsdienstanforderung (Sanitaetsdienstanforderung.astro) — ergänzt die Bausteine des
 * Kontakt-Assistenten (27-kontakt-assistent.css: Hülle, Fortschritt, Schritte, Pillen, Ablage,
 * Einwilligung, Erfolgsanzeige) um das, was nur dieses Formular braucht: Fragegruppen (fieldset),
 * Reihe Datum/Beginn/Ende, lange Antwortlisten und das Aufklappen der Tageszahl.
 */

/* Ein "hidden"-Attribut muss auch bei Elementen wirken, die weiter oben ein display bekommen. */
.kontakt--sani .kontakt__fortschritt[hidden],
.kontakt--sani .kontakt__kopfzeile[hidden] {
	display: none;
}

.sani__gruppe {
	min-width: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

/* Die Fragen stehen als <legend> im <fieldset> (Screenreader lesen sie so vor jeder Antwort). Die
   globale Legende (09-formulare.css) ist 1,3em groß und schrumpft auf Textbreite — hier eine
   normale, volle Zeile in Fließtextgröße. */
.sani__gruppe legend {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	font-size: 1rem;
	line-height: 1.4;
}

/* Datum, Beginn, Ende: drei Felder nebeneinander, sobald Platz ist. */
.kontakt__felder--zeit {
	grid-template-columns: 1fr;
}

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

/* Lange Antworttexte ("Volksfest, Party, Konzert, Open-Air, Zeltfest"): eine Pille je Zeile, linksbündig,
   ohne das Hochskalieren der kurzen Pillen (sonst ragt die gewählte Zeile über den Rand). */
.sani__optionen {
	display: grid;
	gap: 0.6rem;
}

.sani__optionen .kontakt__pille label {
	padding: 0.85rem 1.25rem;
	border-radius: 1rem;
	font-weight: 400;
	line-height: 1.35;
}

.sani__optionen .kontakt__wahl:checked + label {
	font-weight: 700;
	transform: none;
}

/* Organisation vor Ort: vier Fragen mit je zwei Antworten, auf breiten Bildschirmen nebeneinander. */
.sani__organisation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	column-gap: 1.5rem;
}

/* Tageszahl: mit JavaScript erst bei "mehrtägig" sichtbar, ohne JavaScript immer (mit erklärender Beschriftung). */
.kontakt--js .sani__tage:not(.ist-offen) {
	display: none;
}

.kontakt--js .sani__tage.ist-offen {
	animation: kontakt-rein 0.3s var(--easing-standard) both;
}

/* Schmale Bildschirme: fünf Fortschrittspunkte samt Beschriftung passen nicht nebeneinander —
   nur der aktuelle Schritt zeigt seinen Namen, die übrigen nur ihre Nummer. */
@media (max-width: 639px) {
	.kontakt--sani .kontakt__punkt-text {
		display: none;
	}

	.kontakt--sani .kontakt__punkt[aria-current='step'] {
		flex: 3;
	}

	.kontakt--sani .kontakt__punkt[aria-current='step'] .kontakt__punkt-text {
		display: inline;
	}
}

.sani__tage .eingabe-gruppe {
	max-width: 22rem;
}

/*
 * Kursliste (Kursliste.astro) — kommende Kurstermine aus der Lehrgangsverwaltung. Ohne Termine (oder ohne
 * JavaScript) sieht der Baustein aus wie der bisherige Abschlussbaustein der Kursseiten: zentrierte
 * Überschrift und zentrierter Hinweis auf der Textspur. Mit Terminen wird die Spur breiter und jeder Termin
 * eine Karte: Datum/Ort links, Preis und freie Plätze in der Mitte, "Anmelden" rechts.
 *
 * Jede Karte ist über einen "gestreckten Link" komplett klickbar (unsichtbare Fläche .kursliste__link
 * über der ganzen Karte, wie .teaser-karte__link auf der Startseite) und kippt beim Hover leicht
 * (kursliste.ts, VanillaTilt — Details dort). Der rote Knopf ist rein optisch, kein eigener Link:
 * Rot statt der Standard-Formularfarbe Blau, weil der Klick auf die rote Seite der Lehrgangsverwaltung
 * führt (Florian 22.09.2026).
 */

.kursliste {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
}

.kursliste--mit-terminen {
	width: min(var(--spur-mittel), 100% - 4rem);
}

.kursliste__titel {
	text-align: center;
}

.kursliste__hinweis {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.kursliste__hinweis[hidden],
.kursliste__ergebnis[hidden] {
	display: none;
}

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

.kursliste__termin {
	position: relative;
	display: grid;
	gap: 0.75rem 1.5rem;
	margin: 0;
	padding: 1.25rem 1.5rem;
	background: var(--farbe-weiss);
	border: 0.0625rem solid #e2e2e2;
	border-radius: 1rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.07);
	transition: box-shadow var(--dauer-standard) var(--easing-standard);
}

.kursliste__termin:hover {
	box-shadow:
		0 0.85rem 2rem rgba(165, 30, 15, 0.16),
		0 0.25rem 0.6rem rgba(0, 0, 0, 0.08);
}

/* Die eigentliche Klickfläche: deckt die ganze Karte ab (Text bleibt normal fließend lesbar,
   VanillaTilt kippt ".kursliste__termin" — der Link bewegt sich als Kind mit). */
.kursliste__link {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.kursliste__link:focus-visible {
	outline: 0.2rem solid var(--farbe-rot);
	outline-offset: 0.2rem;
}

.kursliste__termin p {
	margin: 0;
}

/* Kursbezeichnung steht als erste Zeile (Florian 22.09.2026) — wichtig vor allem bei einer nach
   Kursgruppe gefilterten Liste, die mehrere Kursarten mischt; bei einer einzelnen Kursart ist sie
   redundant zur Seitenüberschrift, aber nicht falsch. Trägt jetzt das Gewicht, Datum/Uhrzeit
   treten eine Stufe zurück. */
.kursliste__kursname {
	font-weight: 700;
	color: var(--farbe-text);
}

.kursliste__datum {
	margin-top: 0.15rem !important;
	color: var(--farbe-text);
}

/* Rückt enger an das Datum heran und übernimmt dessen (dunkle) Farbe (Florian 22.09.2026) — beide
   bilden zusammen die "wann"-Angabe und sollen nicht unterschiedlich wirken. Nicht umgekehrt: die
   Uhrzeit passt sich dem Datum an, nicht das Datum der (grauen) Uhrzeit. */
.kursliste__uhrzeit {
	margin-top: 0 !important;
	color: var(--farbe-text);
}

/* Deutlicherer Abstand vor dem Ort (Florian 22.09.2026): Kursname/Datum/Uhrzeit gehören als
   "wann"-Gruppe eng zusammen, Ort/Anschrift als "wo"-Gruppe klar sichtbar getrennt — vorher waren
   alle Zeilen gleich eng (0,15rem) und lasen sich wie eine einzige, ungegliederte Liste. */
.kursliste__ort {
	margin-top: 0.65rem;
	color: var(--farbe-text-abgesetzt);
}

.kursliste__rechts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.kursliste__preis {
	font-size: 1.25rem;
	font-weight: 700;
	white-space: nowrap;
}

.kursliste__plaetze {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.3rem 0.85rem 0.3rem 0.65rem;
	border-radius: 62.4375rem;
	font-size: var(--schrift-klein);
	font-weight: 700;
	white-space: nowrap;
	background: #eef0f2;
	color: #3d4348;
}

/* Ampelpunkt statt reiner Flächenfarbe — nimmt die Textfarbe der jeweiligen Stufe an. */
.kursliste__plaetze::before {
	content: '';
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

.kursliste__plaetze--ok {
	background: #e3f3e7;
	color: #175c2c;
}

.kursliste__plaetze--knapp {
	background: #fff1d6;
	color: #7a4200;
}

.kursliste__plaetze--voll {
	background: #fde6e6;
	color: #9b0000;
}

.kursliste__adresse {
	margin-top: 0 !important;
	color: var(--farbe-text-abgesetzt);
}

/* Kleiner als --schrift-klein (Florian 22.09.2026: "unwichtig, nur dezent") — reine Rückfrage-Notiz
   für den Telefonkontakt, kein Feld, das ein Besucher selbst braucht. */
.kursliste__nummer {
	margin-top: 0.5rem !important;
	color: var(--farbe-text-abgesetzt);
	font-size: 0.8125rem;
}

.kursliste__tage {
	margin: 0.35rem 0 0.5rem;
	padding: 0;
	list-style: none;
	font-size: var(--schrift-klein);
}

.kursliste__tag {
	margin: 0;
	padding: 0.1rem 0;
	color: var(--farbe-text);
}

/* Anzeigetext der Lehrgangsverwaltung, wörtlich ("Dieser Kurs ist ausgebucht …", "Die Anmeldung startet am …"). */
.kursliste__grund {
	padding: 0.65rem 1rem;
	border-radius: 0.75rem;
	background: #f4f5f6;
	color: var(--farbe-text);
	font-size: var(--schrift-klein);
}

/* Padding wie der Standard-Button der Seite (08-buttons.css) — bewusst NICHT eigenes Maß: der
   Knopf war dadurch größer/wuchtiger als jeder andere Button der Website (Florian 22.09.2026).
   Radius bleibt --radius-button (24px), das ist die Form der ganzen Seite, nicht nur dieses Knopfs. */
.kursliste__knopf {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: var(--radius-button);
	background: var(--verlauf-rot);
	color: var(--farbe-weiss);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	transition: transform var(--dauer-standard) var(--easing-standard);
}

.kursliste__termin:hover .kursliste__knopf {
	transform: scale(1.05);
}

/* "Zur Anmeldeseite" (nicht buchbar): zurückhaltender als "Anmelden". */
.kursliste__knopf--sekundaer {
	background: transparent;
	border: 0.125rem solid var(--farbe-rot);
	color: var(--farbe-rot);
}

.kursliste__fragen {
	margin: 1.5rem 0 0;
	text-align: center;
	color: var(--farbe-text-abgesetzt);
}

@media (min-width: 640px) {
	.kursliste__termin {
		grid-template-columns: 1fr auto auto;
		align-items: center;
	}

	.kursliste__termin .kursliste__grund {
		grid-column: 1 / -1;
	}

	.kursliste__rechts {
		justify-content: flex-end;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kursliste__termin,
	.kursliste__knopf {
		transition: none;
	}
}

.kursliste__fragen a {
	white-space: nowrap;
}

/*
 * Formularband — rotes Vollbreit-Band, Markup/Maße nach
 * analyse/detailanalyse/08-drittanbieter-datenschutz-recht.md §1.3.2 (Variante A):
 * Rot #c00000 nur im Hintergrund (::before, 100vw), Inhalt bleibt auf Spur „Text“ (640 px)
 * zentriert, Polster 80 px / ab 600 px 48 px.
 *
 * Arbeitspaket 6: Buttons und Eingabefelder nutzen jetzt die gemeinsame Basis aus
 * 08-buttons.css/09-formulare.css (Radius, Rahmen, Fokus-Ring, hover/disabled …) statt eigener,
 * unvollständiger Kopien — hier bleibt nur, was für das rote Band selbst gilt (Layout, Farbe auf
 * dem roten Grund).
 */

.formband-rot {
	position: relative;
	z-index: 0; /* ::before mit z-index:-1 muss dahinter liegen */
}

.formband-rot::before {
	content: '';
	position: absolute;
	left: 50%;
	margin-left: -50vw;
	width: 100vw;
	top: 0;
	bottom: 0;
	background: var(--farbe-formularband);
	z-index: -1;
	pointer-events: none;
}

.formband-rot__container {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Mobile Rand-Inkonsistenz unter 480 px (Gesamtanalyse Kapitel 4.3, Liste C): das Band gehört zu
   den Elementen OHNE eigene Breitenregel im Original und fällt deshalb unter 480 px auf 16 px
   Rand zurück, während die Spur „Text“ selbst (Fließtext) bei 32 px bleibt. */
@media (max-width: 479px) {
	.formband-rot__container {
		width: min(var(--spur-text), 100% - 2rem);
	}
}

@media (max-width: 600px) {
	.formband-rot__container {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.formband-rot__inner {
	color: var(--farbe-weiss);
}

.formband-rot__formular {
	display: grid;
	gap: 1rem;
}

/* Nach erfolgreichem Absenden setzt formular.ts das native `hidden`-Attribut. Ohne diese Regel
   bliebe das Formular trotzdem sichtbar: die eigene "display:grid"-Regel oben ist eine
   Autoren-Regel und schlägt die UA-Standardregel "[hidden]{display:none}" auch ohne höhere
   Selektor-Spezifität, weil Autoren-Stylesheets grundsätzlich vor User-Agent-Stylesheets
   greifen. Deshalb hier explizit überschreiben. */
.formband-rot__formular[hidden] {
	display: none;
}

.formband-rot__feld {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Label erbt auf dem roten Grund sonst die Standard-Textfarbe #333 (09-formulare.css setzt sie
   explizit) — hier wieder auf Weiß gestellt, wie der übrige Text im Band. Gilt NICHT für
   .eingabe-gruppe__label (siehe unten): die sitzt im WEISSEN Eingabefeld, nicht auf dem roten
   Band, und bleibt deshalb dunkel. */
.formband-rot__feld label {
	color: var(--farbe-weiss);
}

.formband-rot .eingabe-gruppe__label {
	color: var(--farbe-text);
}

/* .eingabe-gruppe bringt ein eigenes margin-bottom mit (09-formulare.css) — der Abstand zwischen
   Feldern kommt hier aber schon vom grid-gap des Formulars (.formband-rot__formular); ohne diese
   Zeile würde sich beides addieren und die Zeilen wieder unnötig auseinanderziehen. */
.formband-rot .eingabe-gruppe {
	margin-bottom: 0;
}

/* Der Original-Rot-Verlauf (--verlauf-rot) hat auf dem roten Band (--farbe-formularband) zu
   wenig Kontrast, um noch als eigenständiges, klickbares Element wahrgenommen zu werden
   (Nutzer-Feedback 18.09.: Button "schwierig" [zu erkennen]) — auf farbigem Grund wird der
   Button deshalb umgekehrt: weißer Grund, klassischer CTA-Knopf auf farbigem Band. Textfarbe
   dieselbe wie der übrige Text auf Weiß im Formular (--farbe-text, wie die Feld-Beschriftungen)
   statt Rot — auf Nutzer-Wunsch, damit keine dritte Akzentfarbe im Formular auftaucht. Zentriert
   (justify-self, das Formular ist eine einspaltige Grid-Liste) statt linksbündig unter den
   vollbreiten Feldern zu hängen. Radius wie die übrigen, bereits verkanteten Formularband-Felder
   (0.3rem statt der sitegültigen --radius-button/1.5rem-Pille), damit Button und Felder
   zusammenpassen. */
.formband-rot .button--primary {
	background: var(--farbe-weiss);
	color: var(--farbe-text);
	border-radius: 0.3rem;
	justify-self: center;
}

.formband-rot .button--primary:hover {
	background: var(--farbe-flaeche-hell);
}

.formband-rot .button--primary:focus {
	box-shadow: 0 0 0 0.125rem var(--farbe-formularband), 0 0 0 0.25rem var(--farbe-weiss);
}

/* Modernisierung auf Nutzer-Wunsch (18.09., nach Vergleich mit dem Original-Jotform): weniger
   Rundung als die sitegültige --radius-eingabe (0.75em, aus den Original-Messungen in Bericht 01
   §7.2 — bewusst NICHT global geändert, das betrifft nur die Formularband-Felder selbst). */
.formband-rot input,
.formband-rot select,
.formband-rot textarea {
	border-radius: 0.3rem;
}

/*
 * Upload-Fläche — ersetzt den nackten Browser-Button ("Steinzeitoptik", Nutzer-Feedback 18.09.)
 * durch eine großzügige Dropzone mit Icon. Das <input type="file"> selbst liegt unsichtbar
 * (opacity:0) über der GESAMTEN Fläche (Formularband.astro-Kommentar) — Klick UND Datei-Drop
 * funktionieren dadurch nativ, ganz ohne JavaScript.
 */
.formband-rot__upload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 9rem;
	padding: 1.5rem 1rem;
	background: var(--farbe-weiss);
	border: 0.125rem dashed var(--farbe-haarlinie);
	border-radius: 0.5rem;
	text-align: center;
	transition: border-color var(--dauer-standard) var(--easing-standard);
}

.formband-rot__upload:hover,
.formband-rot__upload:focus-within {
	border-color: var(--farbe-blau);
}

.formband-rot__upload-eingabe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.formband-rot__upload-icon {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--farbe-blau);
}

.formband-rot__upload-text {
	color: var(--farbe-text);
	font-size: var(--schrift-klein);
}

.formband-rot__upload-dateiname {
	color: var(--farbe-blau);
	font-weight: 700;
	font-size: var(--schrift-klein);
	overflow-wrap: anywhere;
}

.formband-rot__upload-dateiname:empty {
	display: none;
}

/*
 * Honeypot (Arbeitspaket 12, s. Formularband.astro-Kommentar) — bewusst NICHT die vorhandene
 * `.visually-hidden` (01-basis.css, Clip-Trick): der Honeypot soll ein eigenes, unauffälliges
 * Muster verwenden (`position:absolute;left:-9999px`), kein display:none/hidden-Attribut (manche
 * Bots überspringen sichtbar "versteckte" Felder gezielt) und keine gemeinsame, sitebekannte
 * Utility-Klasse, an der ein Bot-Scanner das Muster wiedererkennen könnte.
 */
.formband-rot__zusatzfeld {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status-Meldung nach dem Absenden (formular.ts) — ersetzt das Formular an derselben Stelle. */
.formband-rot__status {
	color: var(--farbe-weiss);
	font-weight: 700;
	margin-top: 1rem;
}

.formband-rot__status--fehler {
	background: var(--farbe-weiss);
	color: var(--farbe-rot);
	padding: 0.75em 1em;
	border-radius: var(--radius-eingabe);
}

/*
 * Seitenspezifische Anpassungen — kleine, bewusst eng begrenzte Ausnahmen für einzelne Seiten
 * oder Bausteine, die keine eigene Datei rechtfertigen. Jeder Abschnitt trägt seinen eigenen
 * Anlass/Datum-Kommentar. Letzter @import in main.css (siehe dortiger Kommentar zum Grund).
 */

/* --- Anfrage-Formulare (Angebotsseiten, Anfrage.astro): randlos + BRK-Rot statt Blau. -------- */
/* Florian, 22.09.2026: die bisherige Rahmen-Optik der Eingabefelder wirkte "wie Windows 98";
 * randlos mit weichem Schatten stattdessen. Blau (der sitegültige Standard für Buttons/Fokus,
 * siehe 27-kontakt-assistent.css) wurde hier bewusst durch BRK-Rot ersetzt — gleiche Richtung
 * wie schon beim Kursliste-Anmeldebutton (29-kursliste.css). Nur .kontakt--anfrage
 * (alle Angebotsseiten mit diesem Formular, Bestellformular Essen auf Räder und seit 26.09.2026
 * auch die Sanitätsdienstanforderung); der Kontakt-Assistent bleibt unverändert blau.
 */
/* Florian, 22.09.2026: Karte schmaler (rund 780-800px statt der sitegültigen 60rem/960px) und
   Feldhöhe um 15-20% kleiner ("wirkt zu groß") — beides nur für die Anfrage-Formulare. */
.kontakt--anfrage {
	width: min(49rem, 100% - 4rem);
	margin-block-start: -2rem;
}

.kontakt--anfrage .eingabe-gruppe input,
.kontakt--anfrage .eingabe-gruppe select,
.kontakt--anfrage .eingabe-gruppe textarea {
	border-color: transparent;
	box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.08);
	padding: 0.65em 0.5em 0.65em 0.8em;
	/* Florian, 22.09.2026: eingegebener Text dezent statt blau/fett (sitegültige Original-Optik,
	   09-formulare.css) — passt besser zum randlosen, roten Formular-Look dieser Karte.
	   23.09.2026: Schrift zusätzlich kleiner (--schrift-klein statt --schrift-fliesstext), wirkte
	   bei der reduzierten Feldhöhe zu groß. */
	color: var(--farbe-text);
	font-weight: 400;
	font-size: var(--schrift-klein);
}

/* Bei 49rem Kartenbreite reicht die sitegültige Mindestspaltenbreite (22rem) nicht mehr für zwei
   Spalten (gemessen: nur noch 688px verfügbar) — Rufnummer/E-Mail fielen sonst ungewollt
   untereinander. 20rem behält die Zweispaltigkeit bei dieser Breite. */
.kontakt--anfrage .kontakt__felder {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.kontakt--anfrage .eingabe-gruppe input:focus,
.kontakt--anfrage .eingabe-gruppe select:focus,
.kontakt--anfrage .eingabe-gruppe textarea:focus {
	border-color: var(--farbe-rot);
	box-shadow:
		0 0.15rem 0.6rem rgba(0, 0, 0, 0.08),
		0 0 0 0.175rem var(--farbe-rot);
}

/* Florian, 23.09.2026: Text-Block direkt vor dem Anfrage-Formular enger zusammenrücken:
   Überschrift näher an den Untertitel, und der ganze Block näher ans Formular. */
.text:has(+ .kontakt--anfrage) .text__titel {
	margin-block-end: 0.25em;
}

/* Florian, 23.09.2026: "Anfrage zu {Angebot}"-Zeile ganz weg — der Seitenkontext
   (Überschrift + "Jetzt unverbindlich anfragen!") reicht als Orientierung. */
.kontakt--anfrage .kontakt__anfrage-zu {
	display: none;
}

.kontakt--anfrage input[type='checkbox']:not(:checked):hover,
.konfigurator input[type='checkbox']:not(:checked):hover {
	background-color: var(--farbe-rot);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5 7-8' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65% 65%;
}

.kontakt--anfrage input[type='checkbox']:focus,
.konfigurator input[type='checkbox']:focus {
	border-color: var(--farbe-rot);
	box-shadow:
		inset 0 0 0 0.2rem var(--farbe-weiss),
		0 0 0 0.2rem var(--farbe-rot);
}

/* Florian, 22.09.2026: "wäre schöner" mit einem roten Haken statt einer schlichten roten Fläche
   (die sitegültige Checkbox — 09-formulare.css — hat gar kein Häkchen-Symbol, nur Farbfüllung).
   Selbst gezeichnetes Häkchen als Daten-URI (gleiche Technik wie der Select-Pfeil in
   09-formulare.css), keine externe Bilddatei/Lizenzfrage. */
.kontakt--anfrage input[type='checkbox']:checked,
.konfigurator input[type='checkbox']:checked {
	background-color: var(--farbe-weiss);
	border-color: var(--farbe-rot);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5 7-8' stroke='%23e60005' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65% 65%;
}

.kontakt--anfrage .kontakt__aktionen .button--primary {
	background: var(--verlauf-rot);
}

.kontakt--anfrage .kontakt__aktionen .button--primary:focus {
	box-shadow: 0 0 0 0.125rem var(--farbe-weiss), 0 0 0 0.25rem var(--farbe-rot);
}

/* Florian, 23.09.2026: Statt des schwebenden Mini-Labels zeigt jetzt ein Placeholder in
   normaler Schriftgröße direkt im Feld, was reingehört. Beim Tippen verschwindet er
   von selbst (Browser-Standard). Das eigentliche <label> bleibt im DOM (Screenreader),
   wird aber visuell versteckt. Das Extra-Top-Padding (Platz fürs schwebende Label)
   entfällt, das Feld bekommt gleichmäßiges Padding. */
.kontakt--anfrage .eingabe-gruppe__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.kontakt--anfrage .eingabe-gruppe input::placeholder,
.kontakt--anfrage .eingabe-gruppe textarea::placeholder {
	color: var(--farbe-text);
	opacity: 0.55;
	font-weight: 400;
	font-size: var(--schrift-klein);
}

/* Auswahlfeld (Bestellformular Essen auf Räder, Liefertag): ohne Wahl wie ein Platzhalter
   (erste, gesperrte Option "Gewünschter Liefertag *"), mit Wahl in normaler Textfarbe. */
.kontakt--anfrage .eingabe-gruppe select:invalid {
	color: rgba(51, 51, 51, 0.55);
}
/* Gleiche Höhe wie die Textfelder (die Grundstile geben Auswahlfeldern 3,5em Mindesthöhe), Platz
   rechts für den Pfeil, Pfeil beim Fokus rot statt blau (Anfrage-Optik). */
.kontakt--anfrage .eingabe-gruppe select {
	min-height: 0;
	line-height: 1.4em;
	padding-right: 2.5em;
}
.kontakt--anfrage .eingabe-gruppe select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e60005' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Florian, 23.09.2026: Rückruf-Pillen dezent, klein, nicht fett, BRK-Rot. */
.kontakt--anfrage .kontakt__pillen-frage {
	font-size: var(--schrift-klein);
	font-weight: 400;
	margin: 0 0 0.4rem;
}

.kontakt--anfrage .kontakt__pillen-frage span {
	font-weight: 400;
}

.kontakt--anfrage .kontakt__pille label {
	padding: 0.3rem 0.8rem;
	font-size: var(--schrift-klein);
	font-weight: 400;
}

.kontakt--anfrage .kontakt__wahl:checked + label {
	background: var(--verlauf-rot);
	font-weight: 400;
	box-shadow: 0 0.25rem 0.6rem rgba(230, 0, 5, 0.25);
	transform: none;
}

.kontakt--anfrage .kontakt__wahl:focus-visible + label {
	outline-color: var(--farbe-rot);
}

.kontakt--anfrage .kontakt__rueckruf {
	margin: 0 0 1.25rem;
	padding-left: 0.8em;
}

/* Rufnummern und der Datenschutz-Link im Einwilligungstext: Florian wollte keine Linkoptik
   (weder Farbe noch Unterstreichung) — Farbe wie der Fließtext drumherum. Bewusste Abweichung
   von 06-links.css (Konzept: "alle Textlinks sehen im Original gleich aus"), nur hier. */
.kontakt--anfrage .kontakt__ansprech--tel a,
.kontakt--anfrage .kontakt__einwilligung a {
	color: inherit;
	text-decoration: none;
}

/* --- Sanitätsdienstanforderung in der Anfrage-Optik (Florian, 26.09.2026) ---------------------- */
/* "Bitte passe die Optik des Formulars an die anderen (bestehenden) Formulare an": das Formular trägt
   jetzt zusätzlich .kontakt--anfrage (randlose Felder mit Platzhalter, Rot statt Blau). Hier nur, was
   das mehrschrittige Formular darüber hinaus braucht. */

/* Steht direkt unter dem Seitenkopf (nicht unter einem Einleitungstext) — normaler Abstand. */
.frame.kontakt--anfrage.kontakt--sani {
	margin-block-start: var(--frame-abstand-mobil);
}
@media (min-width: 577px) {
	.frame.kontakt--anfrage.kontakt--sani {
		margin-block-start: var(--frame-abstand);
	}
}

/* Datum, Beginn, Ende: Datums-/Uhrzeitfelder können keinen Platzhalter zeigen ("tt.mm.jjjj",
   "--:--") — die Beschriftung steht deshalb klein über dem Feld, wie die Fragen über den Pillen. */
.kontakt--sani .kontakt__felder--zeit .eingabe-gruppe__label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	display: block;
	margin: 0 0 0.4rem;
	font-size: var(--schrift-klein);
	font-weight: 400;
}
.kontakt--sani .kontakt__felder--zeit input {
	min-height: 0;
}
/* Die Spaltenregel der Anfrage-Optik (auto-fit, 20rem) würde die drei Felder bei 49rem Breite auf
   2 + 1 umbrechen — hier wieder fest drei nebeneinander, sobald Platz ist (wie 28-sanitaetsdienst.css). */
.kontakt--sani .kontakt__felder--zeit {
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.kontakt--sani .kontakt__felder--zeit {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Fragen über den Antworten: Fließtextgröße, nicht fett; Antworten etwas größer als die kleinen
   Rückruf-Pillen der Anfrageformulare, weil sie hier die eigentliche Eingabe sind. */
.kontakt--sani .kontakt__pillen-frage {
	font-size: 1rem;
	margin: 0 0 0.6rem;
}
.kontakt--sani .kontakt__pille label {
	padding: 0.5rem 1.1rem;
}
.kontakt--sani .sani__optionen .kontakt__pille label {
	padding: 0.7rem 1.1rem;
	border-radius: 1rem;
}
.kontakt--sani .sani__optionen .kontakt__wahl:checked + label {
	font-weight: 400;
}

/* --- Kontakt-Assistent in der Anfrage-Optik (Florian, 26.09.2026) ------------------------------ */
/* Trägt ebenfalls .kontakt--anfrage (randlose Felder mit Platzhalter, rote Häkchen), behält aber
   seine volle Breite (drei Themenkarten nebeneinander) und den normalen Abstand nach oben. */
.frame.kontakt--anfrage.kontakt--assistent {
	width: min(var(--spur-mittel), 100% - 4rem);
	margin-block-start: var(--frame-abstand-mobil);
}
@media (min-width: 577px) {
	.frame.kontakt--anfrage.kontakt--assistent {
		margin-block-start: var(--frame-abstand);
	}
}

/* Gewählte Themen-/Personenkarte: hell mit rotem Rand (27-kontakt-assistent.css) — nicht die
   vollflächig rote Pille der Anfrage-Optik, die sonst über ".kontakt__wahl:checked + label" greift. */
.kontakt--assistent .kontakt__wahl:checked + .kontakt__karte {
	background: #fff7f7;
	color: var(--farbe-text);
	font-weight: inherit;
	box-shadow:
		0 0 0 0.1rem var(--farbe-rot),
		0 0.5rem 1.4rem rgba(230, 0, 5, 0.15);
	transform: none;
}

/* --- Ambulante Pflege (ambulante-pflege.mdx): Zwischenüberschriften im Detail-Block ----------- */
/* Florian, 22.09.2026: Zwischenüberschriften (Markdown ###) innerhalb eines Textblocks sind ohne
   eigene Regel genauso groß wie h3-Baustein-Titel (--schrift-h3) — bei kurzen Absätzen darunter
   (wie hier: 1-2 Sätze statt ganzer Paketbeschreibungen wie in hausnotruf.mdx) wirkt das zu
   schwer. Nur für diesen einen Block (Text id="ambulante-pflege-detail"): Größe wie Fließtext,
   bleibt aber ein echtes <h3> (Gliederung für Screenreader bleibt erhalten). */
#ambulante-pflege-detail h3,
#entlastende-hilfen-detail h3,
#essen-auf-raeder-detail h3,
#hauswirtschaftliche-hilfen-detail h3,
#hausnotruf-detail h3,
#betreuter-fahrdienst-detail h3,
#pflegeberatung-detail h3,
#bereitschaften-detail h3,
#bergwacht-detail h3,
#blutspende-detail h3,
#helfer-vor-ort-detail h3,
#psnv-detail h3,
#rettungsdienst-detail h3,
#wasserwacht-detail h3,
#defibrillatoren-detail h3,
#bundesfreiwilligendienst-detail h3,
#ehrenamt-detail h3,
#jugendrotkreuz-detail h3,
#spenden-detail h3,
#kleideroasen-detail h3,
#kleidercontainer-detail h3,
#suchdienst-detail h3,
#datenschutz-detail h3 {
	font-size: var(--schrift-fliesstext);
	line-height: var(--zeilenhoehe-fliesstext);
}

/* --- Ambulante Pflege (ambulante-pflege.mdx): Bild in der Zweispalten-Zeile flacher ----------- */
/* Florian, 22.09.2026: Das Foto (1920×1280, 3:2) war bei kurzem Begleittext deutlich höher als
   die Textspalte (gemessen: 464px Bild zu 291px Text bei 1440px Breite) — wirkte zu dominant.
   Zuschnitt auf 2:1 bringt beide Spalten fast auf gleiche Höhe (312px), ohne dass im Bildausschnitt
   etwas Wichtiges (Gesichter) verloren geht. Nur dieses eine Bild — andere ZweiSpalten-Seiten mit
   ähnlichem Bildformat folgen bei Bedarf separat, diese Seite ist vorerst die Vorlage dafür. */
.zweispalten__bild img[src='/bilder/ambulante-pflege-pflegekraft.jpg'],
.zweispalten__bild img[src='/bilder/fahrdienst-rollstuhl.jpg'],
.zweispalten__bild img[src='/bilder/essen-auf-raeder-menue.jpg'] {
	aspect-ratio: 2 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* --- Hausnotruf-Konfigurator (HausnotrufKonfigurator.astro) ---------------------------------- */
/* Florian, 24.09.2026: Interaktive Bedarfsermittlung für die Hausnotruf-Seite. Führt Besucher
   schrittweise zur persönlichen Paketempfehlung. Design: gleiche Sprache wie das Anfrage-Formular
   (graue Hülle, weiße Karten mit weichem Schatten, BRK-Rot, gleiche Häkchen). Nach der Prüfrunde vom
   24.09.2026 (Optik/Barrierefreiheit, Code-Review): Umbrüche fürs Handy, Schriftgrößen für ältere
   Leser, roter Fokus statt Browser-Blau, Ohne-JS-Zustand, Bewegung nur ohne prefers-reduced-motion. */
.konfigurator {
	width: min(49rem, 100% - 4rem);
	margin-inline: auto;
}

/* Ohne JavaScript ist der Konfigurator wirkungslos: Block ausblenden. Die Klasse setzt das Skript;
   @media (scripting: enabled) verhindert das Aufblitzen vor dem Skriptstart (Muster wie
   27-kontakt-assistent.css). Paketübersicht und Anfrage-Formular stehen ohnehin auf der Seite. */
.konfigurator:not(.konfigurator--js) {
	display: none;
}

@media (scripting: enabled) {
	.konfigurator:not(.konfigurator--js) {
		display: block;
	}
}

.konfigurator__huelle {
	position: relative;
	padding: clamp(1.25rem, 4vw, 3rem);
	background: var(--farbe-flaeche-hell);
	border-radius: 1.5rem;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.06);
}

.konfigurator__titel {
	text-align: center;
	font-size: var(--schrift-h4);
	margin: 0 0 0.25rem;
	color: var(--farbe-text);
}

.konfigurator__untertitel {
	text-align: center;
	color: var(--farbe-text-abgesetzt);
	font-size: var(--schrift-klein);
	margin: 0 0 1.5rem;
}

/* Keine einzelnen Wörter allein in der letzten Zeile. */
.konfigurator__titel,
.konfigurator__frage,
.konfigurator__option-titel,
.konfigurator__ergebnis-titel,
.konfigurator__paket-name {
	text-wrap: balance;
}

.konfigurator__untertitel,
.konfigurator__erklaerung,
.konfigurator__option-info,
.konfigurator__hinweis,
.konfigurator__paket-grund,
.konfigurator__paket-kasse,
.konfigurator__vergleich,
.konfigurator__zubehoer-kasse,
.konfigurator__gesamt-hinweis {
	text-wrap: pretty;
}

.konfigurator__fortschritt {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.konfigurator__balken {
	flex: 1;
	height: 0.4rem;
	background: var(--farbe-haarlinie);
	border-radius: 1rem;
	overflow: hidden;
}

.konfigurator__balken-fuellung {
	height: 100%;
	width: 0;
	background: var(--verlauf-rot);
	border-radius: 1rem;
	transition: width 0.4s var(--easing-standard);
}

.konfigurator__schritt-anzeige {
	font-size: var(--schrift-klein);
	color: var(--farbe-text-abgesetzt);
	white-space: nowrap;
}

.konfigurator__schritt {
	display: none;
}

.konfigurator__schritt.ist-aktiv {
	display: block;
	animation: konfigurator-rein 0.3s var(--easing-standard) both;
}

@keyframes konfigurator-rein {
	from { opacity: 0; transform: translateY(0.5rem); }
	to   { opacity: 1; transform: translateY(0); }
}

.konfigurator__frage,
.konfigurator__ergebnis-titel {
	font-size: var(--schrift-lead);
	line-height: var(--zeilenhoehe-lead);
	font-weight: 700;
	margin: 0 0 1.25rem;
	color: var(--farbe-text);
}

/* Die Überschriften bekommen beim Schrittwechsel den Fokus (Skript) — ohne sichtbaren Ring. */
.konfigurator__frage:focus,
.konfigurator__ergebnis-titel:focus {
	outline: none;
}

.konfigurator__frage:has(+ .konfigurator__erklaerung) {
	margin-bottom: 0.5rem;
}

/* Florian, 24.09.2026: fester Umbruch nach dem Gedankenstrich in Frage 3 — auf dem Handy bricht
   die Zeile ohnehin, dort würde er nur ein einzelnes Wort erzeugen. */
@media (max-width: 639px) {
	.konfigurator__umbruch {
		display: none;
	}
}

.konfigurator__erklaerung {
	color: var(--farbe-text-abgesetzt);
	font-size: var(--schrift-fliesstext);
	line-height: var(--zeilenhoehe-fliesstext);
	max-width: 38rem;
	margin: 0 0 1.25rem;
}

.konfigurator__optionen {
	display: grid;
	gap: 1rem;
}

.konfigurator__option {
	display: block;
	position: relative;
	width: 100%;
	text-align: left;
	padding: 1.25rem 3.25rem 1.25rem 1.5rem;
	background: var(--farbe-weiss);
	border: none;
	border-left: 0.25rem solid transparent;
	border-radius: 1rem;
	box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition:
		border-color var(--dauer-standard) var(--easing-standard),
		box-shadow var(--dauer-standard) var(--easing-standard),
		transform var(--dauer-standard) var(--easing-standard);
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: var(--farbe-text);
}

.konfigurator__option[hidden],
.konfigurator__textknopf[hidden] {
	display: none;
}

.konfigurator__option::after {
	content: '›';
	content: '›' / '';
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.75rem;
	line-height: 1;
	color: var(--farbe-text-abgesetzt);
	transition:
		color var(--dauer-standard) var(--easing-standard),
		right var(--dauer-standard) var(--easing-standard);
}

.konfigurator__option:hover {
	border-left-color: var(--farbe-rot);
	box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.12);
	transform: translateY(-0.1rem);
}

.konfigurator__option:focus-visible {
	outline: 0.2rem solid var(--farbe-rot);
	outline-offset: 0.2rem;
}

/* Nur die tatsächlich gewählte Antwort trägt den roten Streifen — eine Empfehlung erkennt man am
   Etikett, sonst wirkt sie „schon angekreuzt“. */
.konfigurator__option.ist-gewaehlt {
	border-left-color: var(--farbe-rot);
	background: #fdeaea;
	box-shadow: 0 0.15rem 0.6rem rgba(230, 0, 5, 0.12);
}

.konfigurator__option:hover::after,
.konfigurator__option.ist-gewaehlt::after {
	color: var(--farbe-rot);
	right: 1rem;
}

.konfigurator__option-badge,
.konfigurator__paket-badge {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	background: var(--verlauf-rot);
	color: var(--farbe-weiss);
	font-size: var(--schrift-klein);
	font-weight: 700;
	border-radius: 0.6rem;
	margin-bottom: 0.5rem;
}

.konfigurator__option-titel {
	display: block;
	font-weight: 700;
	font-size: var(--schrift-fliesstext);
	color: var(--farbe-text);
}

.konfigurator__option-info {
	display: block;
	font-size: var(--schrift-klein);
	line-height: var(--zeilenhoehe-fliesstext);
	color: var(--farbe-text-abgesetzt);
	margin-top: 0.35rem;
	font-weight: 400;
}

/* Hinweiskasten wie .kontakt__hinweis (27-kontakt-assistent.css): weiße Karte, roter Streifen. */
.konfigurator__hinweis {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	background: var(--farbe-weiss);
	border-left: 0.3rem solid var(--farbe-rot);
	border-radius: 1rem;
	font-size: var(--schrift-klein);
	color: var(--farbe-text);
	line-height: var(--zeilenhoehe-fliesstext);
}

/* Zurück und Neustart: gemeinsame Textknopf-Optik, Tippfläche mindestens 2,75rem hoch. */
.konfigurator__textknopf {
	display: inline-block;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	background: none;
	border: none;
	color: var(--farbe-text-abgesetzt);
	font-size: var(--schrift-klein);
	font-family: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.konfigurator__textknopf:hover {
	color: var(--farbe-text);
}

.konfigurator__textknopf:focus-visible {
	outline: 0.2rem solid var(--farbe-rot);
	outline-offset: 0.1rem;
	border-radius: 0.5rem;
}

.konfigurator__zurueck {
	margin: 1.25rem 0 0 -0.75rem;
}

/* Im Ergebnis steht Zurück zentriert unter dem Neustart, nicht verloren am linken Rand. */
.konfigurator--ergebnis .konfigurator__zurueck {
	display: block;
	margin: 0.25rem auto 0;
}

.konfigurator--ergebnis .konfigurator__zurueck[hidden] {
	display: none;
}

/* Ergebnis */
.konfigurator__ergebnis-titel {
	text-align: center;
}

.konfigurator__paket,
.konfigurator__vergleich,
.konfigurator__zubehoer,
.konfigurator__gesamt {
	padding: 1.25rem 1.5rem;
	background: var(--farbe-weiss);
	border-radius: 1rem;
	box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.08);
}

.konfigurator__paket {
	padding: 1.5rem;
	border-left: 0.25rem solid var(--farbe-rot);
}

.konfigurator__vergleich,
.konfigurator__zubehoer,
.konfigurator__gesamt {
	margin-top: 1.25rem;
}

.konfigurator__paket-name {
	font-size: var(--schrift-lead);
	line-height: var(--zeilenhoehe-lead);
	font-weight: 700;
	margin: 0.25rem 0 0.75rem;
	color: var(--farbe-text);
}

.konfigurator__paket-grund {
	font-size: var(--schrift-fliesstext);
	line-height: var(--zeilenhoehe-fliesstext);
	color: var(--farbe-text);
	margin: 0 0 1rem;
}

.konfigurator__paket-leistungen {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.konfigurator__paket-leistungen li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.4rem;
	font-size: var(--schrift-fliesstext);
	line-height: var(--zeilenhoehe-fliesstext);
	color: var(--farbe-text);
}

.konfigurator__paket-leistungen li::before {
	content: '✓';
	content: '✓' / '';
	position: absolute;
	left: 0;
	color: var(--farbe-rot);
	font-weight: 700;
}

.konfigurator__paket-preis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	margin-bottom: 0.25rem;
}

.konfigurator__paket-betrag {
	font-size: var(--schrift-lead);
	font-weight: 700;
	color: var(--farbe-text);
}

.konfigurator__paket-zeitraum {
	font-size: var(--schrift-klein);
	color: var(--farbe-text-abgesetzt);
	white-space: nowrap;
}

.konfigurator__paket-orga {
	font-size: var(--schrift-klein);
	color: var(--farbe-text-abgesetzt);
	margin: 0;
}

/* Vorbehalt der Pflegekasse: sichtbarer Kasten statt Kleingedrucktem (Prüfung Pflegekasse). */
/* Kein eigener roter Streifen: die Paketkarte trägt ihn schon, ein zweiter darin wirkt unruhig. */
.konfigurator__paket-kasse {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	background: var(--farbe-flaeche-hell);
	border-radius: 0.75rem;
	font-size: var(--schrift-klein);
	line-height: var(--zeilenhoehe-fliesstext);
	color: var(--farbe-text-abgesetzt);
}

.konfigurator__fussnote {
	margin: 1rem 0 0;
	font-size: var(--schrift-klein);
	line-height: 1.4;
	color: var(--farbe-text-abgesetzt);
	text-align: center;
}

.konfigurator__gesamt[hidden] {
	display: none;
}

/* Vergleich mit dem Kassenpaket */
.konfigurator__vergleich {
	font-size: var(--schrift-fliesstext);
	line-height: var(--zeilenhoehe-fliesstext);
	color: var(--farbe-text);
}

.konfigurator__vergleich-titel,
.konfigurator__zubehoer-titel {
	margin: 0 0 0.75rem;
	font-size: var(--schrift-fliesstext);
	font-weight: 700;
	color: var(--farbe-text);
}

.konfigurator__vergleich p {
	margin: 0 0 0.6rem;
}

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

/* Zubehör */
.konfigurator__zubehoer-kasse {
	margin: 0;
	font-size: var(--schrift-fliesstext);
	line-height: var(--zeilenhoehe-fliesstext);
	color: var(--farbe-text);
}

.konfigurator__zubehoer-liste {
	display: grid;
	gap: 0.25rem;
}

.konfigurator__zubehoer-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 0.75rem;
	row-gap: 0.15rem;
	align-items: start;
	margin: 0; /* label { margin-bottom } aus 09-formulare.css */
	padding: 0.4rem 0;
	font-size: var(--schrift-fliesstext);
	line-height: var(--zeilenhoehe-fliesstext);
	color: var(--farbe-text);
	cursor: pointer;
}

/* Alles, was das Skript per hidden schaltet und eine eigene display-Regel hat, braucht diese Zeile. */
.konfigurator__zubehoer-item[hidden],
.konfigurator__zubehoer-liste[hidden],
.konfigurator__zubehoer-vorschlag[hidden],
.konfigurator__zubehoer-hinweis[hidden] {
	display: none;
}

.konfigurator__zubehoer-item input[type='checkbox'] {
	position: relative;
	top: 0.15rem; /* 09-formulare.css: top: -0.25em, margin-right: 0.75em */
	margin: 0;
}

.konfigurator__zubehoer-item input[type='checkbox']:disabled {
	cursor: default;
	opacity: 0.85;
}

.konfigurator__zubehoer-text {
	display: block;
}

.konfigurator__zubehoer-vorschlag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0 0.45rem;
	border: 1px solid var(--farbe-rot);
	border-radius: 0.5rem;
	color: var(--farbe-rot);
	font-size: 0.8em;
	font-weight: 700;
	vertical-align: 0.1em;
	white-space: nowrap;
}

.konfigurator__zubehoer-hinweis {
	display: block;
	font-size: var(--schrift-klein);
	line-height: 1.4;
	color: var(--farbe-text-abgesetzt);
}

.konfigurator__zubehoer-preis {
	color: var(--farbe-text-abgesetzt);
	white-space: nowrap;
}

/* Handy: Preis in eigener Zeile unter dem Namen statt neben einer schmalen Textspalte. */
@media (max-width: 639px) {
	.konfigurator__zubehoer-preis {
		grid-column: 2;
	}
}

/* Kosten */
.konfigurator__gesamt-zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.25rem 1rem;
}

.konfigurator__gesamt-zeile + .konfigurator__gesamt-zeile {
	margin-top: 0.5rem;
}

.konfigurator__gesamt-label {
	font-size: var(--schrift-fliesstext);
	font-weight: 700;
	color: var(--farbe-text);
}

.konfigurator__gesamt-betrag {
	font-size: var(--schrift-lead);
	font-weight: 700;
	color: var(--farbe-text);
	text-align: right;
}

.konfigurator__gesamt-betrag--klein {
	font-size: var(--schrift-fliesstext);
	font-weight: 400;
	color: var(--farbe-text-abgesetzt);
}

.konfigurator__gesamt-hinweis {
	margin: 0.6rem 0 0;
	font-size: var(--schrift-klein);
	line-height: 1.4;
	color: var(--farbe-text-abgesetzt);
}

/* Aktionen */
.konfigurator__aktionen {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.konfigurator__anfragen {
	margin: 0; /* .button:not(:last-child) aus 08-buttons.css */
	width: auto;
	max-width: 100%;
	text-align: center;
	background: var(--verlauf-rot);
}

.konfigurator__anfragen:focus {
	box-shadow: 0 0 0 0.125rem var(--farbe-weiss), 0 0 0 0.25rem var(--farbe-rot);
}

@media (max-width: 479px) {
	.konfigurator__anfragen {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.konfigurator__schritt.ist-aktiv {
		animation: none;
	}

	.konfigurator__balken-fuellung,
	.konfigurator__option,
	.konfigurator__option::after,
	.konfigurator__anfragen {
		transition: none;
	}

	.konfigurator__option:hover,
	.konfigurator__anfragen:hover {
		transform: none;
	}
}

/* --- Gesamtübersicht (aufklappbare Vergleichstabelle) ---------------------------------------- */
/* Florian, 24.09.2026: <details> statt JavaScript — funktioniert nativ, auch ohne Skript, und ist
   barrierefrei. Steht außerhalb der .konfigurator-Hülle, bleibt also immer sichtbar. */
/* Breite an 100vw statt 100 % binden: die min-width der Tabelle würde sonst den Seitencontainer
   aufblähen, dessen „100 %“ sich dann auf die aufgeblähte Breite bezöge (Teufelskreis, Seite
   scrollt waagrecht). 100vw ist stabil, der innere Scroll-Container fängt die breite Tabelle ab. */
.konfigurator-tabelle {
	width: min(49rem, 100vw - 4rem);
	margin-inline: auto;
	background: var(--farbe-weiss);
	border-radius: 1rem;
	box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.konfigurator-tabelle__knopf {
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 1.5rem;
	padding-right: 3rem;
	position: relative;
	font-weight: 700;
	font-size: var(--schrift-fliesstext);
	color: var(--farbe-text);
}

.konfigurator-tabelle__knopf::-webkit-details-marker {
	display: none;
}

.konfigurator-tabelle__knopf::after {
	content: '';
	position: absolute;
	right: 1.5rem;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 0.15rem solid var(--farbe-rot);
	border-bottom: 0.15rem solid var(--farbe-rot);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--dauer-standard) var(--easing-standard);
}

.konfigurator-tabelle[open] .konfigurator-tabelle__knopf::after {
	transform: translateY(-30%) rotate(-135deg);
}

.konfigurator-tabelle__knopf:focus-visible {
	outline: 0.2rem solid var(--farbe-rot);
	outline-offset: -0.2rem;
}

.konfigurator-tabelle__inhalt {
	padding: 0 1.5rem 1.5rem;
}

.konfigurator-tabelle__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.konfigurator-tabelle__tabelle {
	border-collapse: collapse;
	width: 100%;
	min-width: 46rem;
	font-size: var(--schrift-klein);
}

/* border/hyphens direkt auf die Zellen, spezifischer als „table th“ aus 07-listen-tabellen-zitat.css
   (setzt sonst allseitige Ränder und hyphens: auto → „Notfall-daten“). */
.konfigurator-tabelle__tabelle th,
.konfigurator-tabelle__tabelle td {
	padding: 0.6rem 0.75rem;
	border: none;
	border-bottom: 1px solid var(--farbe-haarlinie);
	text-align: center;
	vertical-align: top;
	hyphens: none;
}

/* Erste Spalte (Leistung) breiter, damit die Bezeichnungen sauber umbrechen. */
.konfigurator-tabelle__tabelle th[scope='row'],
.konfigurator-tabelle__tabelle thead th:first-child {
	width: 13rem;
}

.konfigurator-tabelle__tabelle thead th {
	background: var(--farbe-flaeche-hell);
	font-weight: 700;
	color: var(--farbe-text);
}

/* Erste Spalte bleibt beim seitlichen Scrollen stehen. */
.konfigurator-tabelle__tabelle th[scope='row'] {
	position: sticky;
	left: 0;
	background: var(--farbe-weiss);
	text-align: left;
	font-weight: 400;
	color: var(--farbe-text);
}

.konfigurator-tabelle__tabelle thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	text-align: left;
}

.konfigurator-tabelle__preise th[scope='row'],
.konfigurator-tabelle__preise td {
	font-weight: 700;
	color: var(--farbe-text);
}

/* Zubehör-Abschnitt: Gruppenüberschrift über alle Spalten, Preis linksbündig neben dem Namen. */
.konfigurator-tabelle__gruppe th {
	text-align: left;
	background: var(--farbe-flaeche-hell);
	font-weight: 700;
	color: var(--farbe-text);
}

.konfigurator-tabelle__zubehoer-preis {
	text-align: left;
	color: var(--farbe-text);
}

.konfigurator-tabelle__ja {
	color: var(--farbe-rot);
	font-weight: 700;
}

.konfigurator-tabelle__nein {
	color: var(--farbe-text-blass);
}

.konfigurator-tabelle__nur-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.konfigurator-tabelle__fussnote {
	margin: 1rem 0 0;
	font-size: var(--schrift-klein);
	line-height: 1.4;
	color: var(--farbe-text-abgesetzt);
}

@media (prefers-reduced-motion: reduce) {
	.konfigurator-tabelle__knopf::after {
		transition: none;
	}
}

/* --- Einbettung fremder Portale (Einbettung.astro) ------------------------------------------- */
/* Florian, 24.09.2026: Seniorenwohnen-Portal unter unserem Menü einbetten statt extern verlinken.
   Cross-Origin: die feste Höhe bekommt einen eigenen Scrollbalken im Rahmen. */
.einbettung {
	width: min(80rem, 100% - 4rem);
	margin-inline: auto;
}

.einbettung__hinweis {
	font-size: var(--schrift-klein);
	line-height: 1.4;
	color: var(--farbe-text-abgesetzt);
	margin: 1rem 0 0;
	text-align: center;
}

.einbettung__rahmen {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 600px;
	border: 1px solid var(--farbe-haarlinie);
	border-radius: 1rem;
}

/* ============================================================================
   Essen auf Räder – Bestellkorb (EssenBestellung.astro / essen-bestellung.ts)
   Ohne JavaScript: reine Preisliste (Steller, Warenkorb und Bestellformular aus,
   Hinweis auf telefonische Bestellung). @media (scripting: enabled) schaltet vor
   dem Skriptstart um, damit nichts aufblitzt (Muster wie .konfigurator).
   ============================================================================ */

/* Speisekarte in der Konfigurator-Spur; das Bestellformular (.kontakt) behält die Spur und Hülle
   des Anfrageformulars, damit beide Formulare gleich aussehen. */
.essen-shop {
	width: min(49rem, 100% - 4rem);
	margin-inline: auto;
}

.essen-shop__intro,
.essen-werkzeuge,
.essen-filter,
.speise__steller,
.essen-warenkorb,
.essen-bestellung {
	display: none;
}

@media (scripting: enabled) {
	.essen-shop__ohne-js {
		display: none;
	}
	.essen-shop__intro,
	.essen-warenkorb,
	.essen-bestellung {
		display: block;
	}
	.essen-werkzeuge,
	.essen-filter {
		display: flex;
	}
	.speise__steller {
		display: inline-flex;
	}
}

.essen-shop__ohne-js {
	background: var(--farbe-flaeche-hell);
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	font-size: var(--schrift-klein);
	line-height: var(--zeilenhoehe-fliesstext);
}

.essen-shop__intro {
	margin: 0 0 1.5rem;
}

/* --- Werkzeugleiste über der Karte: Sortenschalter + Suche in einer ruhigen Zeile --- */
.essen-werkzeuge {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

/* Sortenschalter "Alle Menüs | Backofen | Mikrowelle" als zusammenhängende Pille. */
.essen-sorte {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.essen-sorte__wahl {
	display: inline-flex;
	align-items: stretch;
	box-sizing: border-box;
	height: var(--essen-feldhoehe);
	padding: 0.2rem;
	border: 0.1rem solid var(--farbe-haarlinie); /* gleiche Rahmenstärke wie das Suchfeld */
	border-radius: 2rem;
	background: var(--farbe-weiss);
}
.essen-sorte__knopf {
	position: relative;
	display: flex;
	margin: 0;
}
.essen-sorte__knopf input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.essen-sorte__knopf span {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	border-radius: 2rem;
	cursor: pointer;
	font-size: var(--schrift-klein);
	font-weight: 400; /* nicht fett — ruhig wie das Suchfeld; die Wahl zeigt die rote Füllung */
	text-align: center;
	white-space: nowrap;
	color: var(--farbe-text);
}
.essen-sorte__knopf input:checked + span {
	background: var(--farbe-rot);
	color: var(--farbe-weiss);
}
.essen-sorte__knopf input:focus-visible + span {
	outline: 3px solid var(--farbe-blau);
	outline-offset: 1px;
}
/* Mengenhinweis in Warenkorb-Leiste, Übersicht und Bestellformular. */
.essen-mengen {
	white-space: pre-line; /* je Sorte eine Zeile */
	margin: 0.25rem 0 0;
	flex-basis: 100%;
	font-size: var(--schrift-klein);
	line-height: 1.4;
	color: var(--farbe-text-abgesetzt);
}
.essen-mengen:empty {
	display: none;
}
.essen-mengen__teil {
	white-space: nowrap;
}

/* Einheitlicher Knopf des Bestellkorbs: rot wie der Sortenschalter, Pillenform, normale Schrift.
   Gesperrt (aria-disabled, Menge passt noch nicht): hellgrau mit grauer Schrift. */
.essen-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 2.75rem;
	margin: 0;
	padding: 0 1.4rem;
	border: none;
	border-radius: 2rem;
	background: var(--farbe-rot);
	color: var(--farbe-weiss);
	font: inherit;
	font-size: var(--schrift-klein);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.essen-knopf:hover,
.essen-knopf:focus-visible {
	background: var(--farbe-dunkelrot);
	color: var(--farbe-weiss);
}
.essen-knopf:focus-visible {
	outline: 3px solid var(--farbe-blau);
	outline-offset: 2px;
}
.essen-knopf[aria-disabled="true"] {
	background: var(--farbe-flaeche-hell);
	color: var(--farbe-text-abgesetzt);
	cursor: not-allowed;
}
/* Leise Variante ("Weiter auswählen"): nur Text, keine Fläche. */
.essen-knopf--leise,
.essen-knopf--leise:hover,
.essen-knopf--leise:focus-visible {
	background: transparent;
	color: var(--farbe-text);
	padding: 0 0.6rem;
}
.essen-knopf--leise:hover {
	text-decoration: underline;
}

/* Zwischenüberschrift je Sorte (Backofen/Mikrowelle) in Übersicht und Bestellformular. */
.essen-uebersicht__gruppe,
.essen-bestellung__gruppe {
	padding: 0.9rem 0 0.2rem;
	font-weight: 700;
	border-bottom: 2px solid var(--farbe-rot);
}
.essen-uebersicht__gruppe:first-child,
.essen-bestellung__gruppe:first-child {
	padding-top: 0.2rem;
}

/* --- Suche (blendet nicht passende Gerichte und leere Kategorien aus). Beschriftung nur für
   Vorleseprogramme; sichtbar ist der Platzhalter im Feld, der beim Tippen verschwindet. --- */
.essen-suche {
	position: relative;
	flex: 1 1 16rem;
	margin: 0;
}
.essen-suche__lupe {
	position: absolute;
	left: 0.9rem;
	top: 50%;
	width: 1.1rem;
	height: 1.1rem;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--farbe-text-abgesetzt);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}
/* Kompakt: ohne den oberen Platz für die Feld-Beschriftung der Formulare (09-formulare.css). */
.essen-suche input {
	box-sizing: border-box;
	width: 100%;
	height: var(--essen-feldhoehe);
	margin: 0;
	padding: 0 0.9em 0 2.5rem;
	border-radius: 2rem;
	/* Gleiche Schriftgröße wie der Sortenschalter — sonst wirkt das Feld trotz gleicher Höhe größer. */
	font-size: var(--schrift-klein);
}
.essen-suche__ergebnis {
	margin: 0 0 0.75rem;
	font-size: var(--schrift-klein);
	color: var(--farbe-text-abgesetzt);
}
.essen-suche__ergebnis:empty {
	display: none;
}
.speise[hidden],
.essen-kategorie[hidden],
.essen-shop__sprung[hidden],
.essen-shop__sprung li[hidden] {
	display: none;
}

/* --- Mitlaufende Kategorie-Leiste: bleibt beim Scrollen unter der festen Kopfzeile stehen (nur
   innerhalb der Speisekarte), die aktuelle Kategorie ist rot unterstrichen (essen-bestellung.ts).
   Seitlich wischbar; die Ränder blenden nur aus, wo es weitergeht (Klassen kann-links/-rechts). --- */
.essen-shop {
	--essen-leiste: 3rem; /* Höhe der Kategorie-Leiste, für den Sprungabstand der Kategorien */
	--essen-feldhoehe: 3rem; /* Sortenschalter und Suchfeld exakt gleich hoch */
}
.essen-shop__sprung {
	position: sticky;
	top: var(--header-hoehe-mobil);
	z-index: 4;
	margin: 0 0 1.5rem;
	background: var(--farbe-weiss);
	border-bottom: 1px solid var(--farbe-haarlinie);
}
@media (min-width: 640px) {
	.essen-shop__sprung {
		top: var(--header-hoehe);
	}
}
.essen-shop__sprung ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.essen-shop__sprung ul::-webkit-scrollbar {
	display: none;
}
.essen-shop__sprung ul.kann-rechts {
	-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
	mask-image: linear-gradient(to right, #000 85%, transparent);
}
.essen-shop__sprung ul.kann-links {
	-webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
	mask-image: linear-gradient(to left, #000 85%, transparent);
}
.essen-shop__sprung ul.kann-links.kann-rechts {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.essen-shop__sprung li {
	flex: 0 0 auto;
}
.essen-shop__sprung a {
	display: block;
	padding: 0.75rem 0.85rem 0.6rem;
	border-bottom: 3px solid transparent;
	font-size: var(--schrift-klein);
	font-weight: 400; /* nicht fett; aktiv = dunkler + rot unterstrichen (kein Springen der Breite) */
	white-space: nowrap;
	color: var(--farbe-text-abgesetzt);
	text-decoration: none;
}
.essen-shop__sprung li:first-child a {
	padding-left: 0;
}
.essen-shop__sprung a:hover,
.essen-shop__sprung a:focus-visible {
	color: var(--farbe-text);
}
.essen-shop__sprung a[aria-current="true"] {
	color: var(--farbe-text);
	border-bottom-color: var(--farbe-rot);
}

/* --- Speisekarte nach Kategorien --- */
.essen-kategorie {
	margin: 0 0 2.5rem;
	scroll-margin-top: calc(var(--header-hoehe-mobil) + var(--essen-leiste) + 1rem);
}
@media (min-width: 640px) {
	.essen-kategorie {
		scroll-margin-top: calc(var(--header-hoehe) + var(--essen-leiste) + 1rem);
	}
}
.essen-kategorie__titel {
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--farbe-rot);
	margin: 0 0 0.25rem;
}
.essen-kategorie__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Gericht-Zeile: Foto | Text | Preis + Mengen-Steller. Auf schmalen Schirmen rutscht der Kaufbereich
   unter den Text. Das Foto bleibt klein — der Katalog liefert es nur in 219 × 175 px. */
.speise {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr) auto;
	grid-template-areas: "foto text kauf";
	align-items: start;
	gap: 0.75rem 1.25rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--farbe-haarlinie);
}
.speise__foto {
	grid-area: foto;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 219 / 175;
}
.speise__text {
	grid-area: text;
	min-width: 0;
}
.speise__text p {
	margin: 0;
}
.speise__name {
	font-weight: 700;
	line-height: 1.35;
}
.speise__marke {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0 0.5rem;
	border-radius: 1rem;
	background: var(--farbe-flaeche-hell);
	font-size: var(--schrift-klein);
	font-weight: 400;
	color: var(--farbe-text-abgesetzt);
	vertical-align: 0.1em;
}
.speise__beschreibung {
	line-height: 1.4;
	margin-top: 0.15rem;
}
.speise__meta {
	font-size: var(--schrift-klein);
	color: var(--farbe-text-abgesetzt);
	margin-top: 0.25rem;
}
.speise__meta-fest {
	white-space: nowrap;
}
.speise__details {
	margin-top: 0.4rem;
	font-size: var(--schrift-klein);
}
.speise__details summary {
	cursor: pointer;
	color: var(--farbe-text-abgesetzt);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.speise__details dl {
	margin: 0.5rem 0 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	line-height: 1.4;
}
.speise__details dt {
	font-weight: 700;
}
.speise__details dd {
	margin: 0;
}
.speise__kauf {
	grid-area: kauf;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.speise--gewaehlt {
	background: var(--farbe-flaeche-hell);
	margin-inline: -0.75rem;
	padding-inline: 0.75rem;
	border-radius: 0.5rem;
}
.speise__preis {
	white-space: nowrap;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Bildnachweis-Teile ("Bilder der Gerichte:", "© Hofmann Menü-Manufaktur") nie in sich umbrechen. */
.essen-am-stueck {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.speise {
		grid-template-columns: 5.5rem minmax(0, 1fr);
		grid-template-areas:
			"foto text"
			"kauf kauf";
	}
	.speise__kauf {
		justify-content: flex-end;
	}
}

@media (max-width: 576px) {
	.speise__details dl,
	.speise__details dd {
		margin-bottom: 0.4rem;
	}
}

/* --- Mengen-Steller (−  0  +) --- */
.speise__steller {
	flex: 0 0 auto;
	align-items: center;
	gap: 0.25rem;
}
/* Plus/Minus als zwei gezeichnete Striche statt Schriftzeichen: Schriftzeichen sitzen je nach
   Schriftart nicht auf der optischen Mitte. Das Zeichen bleibt im Markup (font-size 0), die
   Knöpfe tragen ohnehin ein aria-label. */
.speise__knopf {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 0;
	line-height: 1;
	border: 1px solid var(--farbe-rot);
	border-radius: 50%;
	background: #fff;
	color: var(--farbe-rot);
	cursor: pointer;
	padding: 0;
}
.speise__knopf::before,
.speise__knopf--plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40%;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.speise__knopf--plus::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.speise__knopf:hover,
.speise__knopf:focus-visible {
	background: var(--farbe-rot);
	color: #fff;
}
.speise__menge {
	min-width: 1.75rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- Warenkorb-Leiste (unten angeheftet) --- */
.essen-warenkorb {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin: 1.5rem 0 0;
	padding: 0.85rem 1.1rem;
	background: #fff;
	border: 1px solid var(--farbe-haarlinie);
	border-radius: 0.9rem;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.essen-warenkorb__leer {
	color: var(--farbe-text-abgesetzt);
	text-align: center;
}
/* Zeile 1: Anzahl · Summe | Knopf. Zeile 2 (nur wenn nötig): Mengenhinweis über die volle Breite. */
.essen-warenkorb__voll:not([hidden]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
}
.essen-warenkorb__hinweis {
	grid-column: 1 / -1;
}
.essen-warenkorb__zeile {
	margin: 0;
}
.essen-warenkorb__zeile strong {
	font-variant-numeric: tabular-nums;
}
.essen-warenkorb .essen-mengen {
	margin-top: 0.4rem;
}

/* --- Übersicht (aufklappbares Fenster) --- */
.essen-uebersicht:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	padding: 0;
}
.essen-uebersicht__flaeche {
	width: 100%;
	max-width: 40rem;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 1rem 1rem 0 0;
	padding: 1.25rem 1.25rem 1.5rem;
}
.essen-uebersicht__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.essen-uebersicht__kopf h3 {
	margin: 0;
}
.essen-uebersicht__zu {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	background: var(--farbe-flaeche-hell);
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: var(--farbe-text);
}
.essen-uebersicht__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.essen-uebersicht__posten {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--farbe-haarlinie);
}
/* Postennamen in Übersicht und Bestellformular einzeilig, zu lange enden mit "…" (voller Name im
   Tooltip; in der Bestell-E-Mail steht er immer vollständig). */
.essen-uebersicht__posten-name,
.essen-bestellung__posten-name {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.essen-uebersicht__steller {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
}
.essen-uebersicht__steller .speise__knopf {
	width: 2.1rem;
	height: 2.1rem;
}
.essen-uebersicht__menge {
	min-width: 1.6rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.essen-uebersicht__posten-preis {
	flex: 0 0 auto;
	min-width: 4.5rem;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.essen-uebersicht__summe {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 1rem 0 0.5rem;
	font-size: var(--schrift-lead);
}
.essen-uebersicht__summe strong {
	font-variant-numeric: tabular-nums;
}
.essen-uebersicht__hinweis {
	font-size: var(--schrift-klein);
	color: var(--farbe-text-abgesetzt);
	line-height: var(--zeilenhoehe-fliesstext);
	margin: 0 0 1rem;
}
.essen-uebersicht__aktionen {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;
	flex-wrap: wrap;
}

@media (min-width: 640px) {
	.essen-uebersicht:not([hidden]) {
		align-items: center;
		padding: 1.5rem;
	}
	.essen-uebersicht__flaeche {
		border-radius: 1rem;
	}
}

/* --- Bestellformular (Hülle, Felder, Einwilligung, Bestätigung: Klassen des Anfrageformulars) --- */
#bestellen {
	scroll-margin-top: calc(var(--header-hoehe) + 1rem);
}
/* Das Bestellformular nutzt die Anfrage-Optik (.kontakt--anfrage), folgt aber auf den Warenkorb
   statt auf einen Einleitungstext — daher der normale Abschnittsabstand statt des Heranrückens. */
.frame.kontakt--anfrage.essen-bestellung {
	margin-block-start: var(--frame-abstand-mobil);
}
@media (min-width: 577px) {
	.frame.kontakt--anfrage.essen-bestellung {
		margin-block-start: var(--frame-abstand);
	}
}
.essen-bestellung__leer {
	margin: 0;
}
.essen-bestellung__leer[hidden] {
	display: none;
}
.essen-bestellung__auswahl {
	background: var(--farbe-weiss);
	border-radius: 1rem;
	padding: 1rem 1.25rem;
	margin: 1rem 0 2rem;
}
.essen-bestellung__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.essen-bestellung__posten {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--farbe-haarlinie);
}
.essen-bestellung__posten-preis {
	flex: 0 0 auto;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.essen-bestellung__summe {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0.75rem 0 0;
	font-size: var(--schrift-lead);
}
.essen-bestellung__summe strong {
	font-variant-numeric: tabular-nums;
}
.essen-bestellung__aendern {
	margin: 0.5rem 0 0;
	font-size: var(--schrift-klein);
}
.essen-bestellung__zwischentitel {
	font-size: var(--schrift-h4);
	margin: 0 0 1rem;
}
.essen-bestellung__abschluss {
	margin: 1rem 0 0;
	text-wrap: balance;
}

@media (max-width: 576px) {
	/* Warenkorb-Leiste am Handy flach halten. */
	.essen-warenkorb {
		padding: 0.6rem 0.8rem;
	}
	.essen-warenkorb__voll:not([hidden]) {
		column-gap: 0.6rem;
	}
	.essen-warenkorb .essen-knopf {
		padding: 0 1.1rem;
	}
	/* Postennamen am Handy bis zu zwei Zeilen, erst dann "…" — sonst sind gleichnamige Gerichte
	   verschiedener Menülinien nicht mehr zu unterscheiden. */
	.essen-uebersicht__posten-name,
	.essen-bestellung__posten-name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		white-space: normal;
	}
	/* Am Handy nur "Warenkorb" statt "Warenkorb ansehen". */
	.essen-knopf__zusatz {
		display: none;
	}
}

@media (max-width: 576px) {
	/* Sortenschalter am Handy über die volle Breite, drei gleich breite Teile. */
	.essen-sorte,
	.essen-sorte__wahl {
		width: 100%;
	}
	.essen-sorte__knopf {
		flex: 1 1 0;
	}
	.essen-sorte__knopf span {
		padding-inline: 0.5rem;
	}
}

@media (min-width: 768px) {
	/* Am Rechner bleibt auch die Zeile mit Sortenschalter und Suche unter der Kopfzeile stehen
	   (einzeilig und flach); die Kategorie-Leiste klebt direkt darunter. Am Handy nur die Leiste —
	   dort stehen Schalter und Suche untereinander und würden zu viel Platz belegen. */
	.essen-werkzeuge {
		position: sticky;
		top: var(--header-hoehe);
		z-index: 4;
		margin: 0;
		padding: 0.75rem 0;
		background: var(--farbe-weiss);
	}
	.essen-shop__sprung {
		top: calc(var(--header-hoehe) + var(--essen-feldhoehe) + 1.5rem);
	}
	/* Symmetrisch: Schalter und Suche je 45 % der Breite, 10 % Abstand dazwischen; die drei
	   Schalter-Teile teilen sich ihre Hälfte gleichmäßig. */
	.essen-werkzeuge {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0;
	}
	.essen-sorte,
	.essen-suche {
		flex: 0 0 45%;
	}
	.essen-sorte__wahl {
		width: 100%;
	}
	.essen-sorte__knopf {
		flex: 1 1 0;
	}
	.essen-sorte__knopf span {
		padding-inline: 0.5rem;
	}
	.essen-kategorie {
		scroll-margin-top: calc(var(--header-hoehe) + var(--essen-feldhoehe) + 1.5rem + var(--essen-leiste) + 1rem);
	}
}

/* --- Bestellaufruf (Bestellaufruf.astro): ganz anklickbare Karte mit Bild, Text und rotem Knopf. --- */
.bestellaufruf {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	width: min(49rem, 100% - 4rem);
	margin-inline: auto;
	box-sizing: border-box;
	padding: 2rem;
	border-radius: 1.5rem;
	background: var(--farbe-flaeche-hell);
	/* derselbe weiche Schatten wie die Formular-Hülle (.kontakt__huelle), damit beide Flächen gleich wirken */
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.06);
	color: var(--farbe-text);
	text-decoration: none;
	transition: box-shadow var(--dauer-standard) var(--easing-standard);
}
/* Beim Überfahren nur der etwas kräftigere Schatten — kein Unterstreichen (globale a:hover-Regel),
   kein Farbwechsel von Text oder Knopf. */
.bestellaufruf:hover,
.bestellaufruf:focus-visible {
	color: var(--farbe-text);
	text-decoration: none;
	box-shadow: 0 0.6rem 2.2rem rgba(0, 0, 0, 0.12);
}
.bestellaufruf:focus-visible {
	outline: 3px solid var(--farbe-blau);
	outline-offset: 3px;
}
.bestellaufruf__bild {
	flex: 0 0 auto;
	display: block;
	width: 17rem;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
}
.bestellaufruf__inhalt {
	min-width: 0;
}
.bestellaufruf__titel {
	margin: 0 0 0.75rem;
}
.bestellaufruf__text p {
	margin: 0 0 1.5rem;
	line-height: 1.6;
}
.bestellaufruf:hover .bestellaufruf__knopf,
.bestellaufruf:focus-visible .bestellaufruf__knopf {
	background: var(--farbe-rot);
}

@media (max-width: 576px) {
	/* Am Handy untereinander: Bild über die volle Kartenbreite, darunter Text und Knopf. */
	.bestellaufruf {
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
		padding: 1.25rem;
	}
	.bestellaufruf__bild {
		width: 100%;
	}
}

/* --- Impressum: Angaben als strukturierter Text (Angaben.astro, Angabenkarte.astro, Bildnachweise.astro) */
/* Florian, 26.09.2026: zuerst Karten auf heller Fläche, dann Variante A — „Kacheln" bleiben dem
   vorbehalten, wo man etwas tut (Formulare, Bestellen, Kurse); das Impressum ist reine Lektüre und
   steht jetzt wie Datenschutz/Barrierefreiheit in der Textspalte: kleine rote Abschnittstitel, darunter
   die Zeilen, Abschnitte mit Abstand untereinander, Bildnachweise am Ende zum Aufklappen. */
.angaben {
	width: min(var(--spur-text), 100% - 4rem);
	margin-inline: auto;
}
.angaben__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
/* Florian, 26.09.2026: „das BRK links und den KV rechts … eine Art unsichtbare Tabelle, darunter
   verantwortlich usw." — ab 993px zwei Spalten ohne Rahmen (darunter wären die Spalten zu schmal,
   Namen/Funktionen brächen um); Bildnachweise über beide Spalten. */
@media (min-width: 993px) {
	/* Zwei Spalten brauchen mehr als die Textspalte (40rem → je 296px, die Namen brachen um):
	   mittlere Spur wie die Zwei-Spalten-Blöcke der Angebotsseiten. */
	.angaben {
		width: min(var(--spur-mittel), 100% - 4rem);
	}
	/* Florian, 26.09.2026: „mittig hätte es schon aufgeteilt werden können" / „wirkt immer noch zu
	   weit links" — die Spalten sind so breit wie ihr Text (höchstens 26rem) und stehen als Paar
	   zentriert; so steht die sichtbare Textfläche mittig unter der Überschrift (feste, gleich
	   breite Spalten ließen rechts eine halbleere Spalte stehen). */
	.angaben__raster {
		grid-template-columns: repeat(2, fit-content(26rem));
		justify-content: center;
		column-gap: 6rem;
		row-gap: 2.5rem;
	}
	/* Über beide Spalten, aber ohne die Spaltenbreite mitzubestimmen (die lange Nummernliste würde
	   sonst beide Spalten auf die Höchstbreite ziehen): Breite 0, gestreckt auf 100 %. */
	.angaben__bildnachweise {
		grid-column: 1 / -1;
		width: 0;
		min-width: 100%;
	}
}
.angaben__titel {
	margin: 0 0 0.5rem;
	font-size: var(--schrift-klein);
	font-weight: 400;
	line-height: 1.4;
	color: var(--farbe-rot);
}
.angaben__inhalt p {
	margin: 0 0 0.75rem;
	line-height: 1.55;
	/* Lange Wörter („Streitbeilegungsverfahren") trennen statt die Zeile davor halb leer zu lassen. */
	hyphens: auto;
}
.angaben__inhalt p:last-child {
	margin-bottom: 0;
}
/* Rufnummern und E-Mail ohne Linkoptik (wie in den Formularen), rot beim Überfahren. */
.angaben__inhalt a {
	color: inherit;
	text-decoration: none;
}
.angaben__inhalt a:hover,
.angaben__inhalt a:focus-visible {
	color: var(--farbe-rot);
}

.angaben__bildnachweise {
	border-top: 0.0625rem solid #d9d9d9;
	border-bottom: 0.0625rem solid #d9d9d9;
}
.angaben__bildnachweise summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	cursor: pointer;
	list-style: none;
}
.angaben__bildnachweise summary::-webkit-details-marker {
	display: none;
}
.angaben__bildnachweise summary::after {
	content: '';
	width: 0.55rem;
	height: 0.55rem;
	border-right: 0.125rem solid currentColor;
	border-bottom: 0.125rem solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--dauer-standard) var(--easing-standard);
}
.angaben__bildnachweise[open] summary::after {
	transform: translateY(25%) rotate(-135deg);
}
.angaben__bildnachweise summary:hover,
.angaben__bildnachweise summary:focus-visible {
	color: var(--farbe-rot);
}
.angaben__bildnachweise dl {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0 0 1.25rem;
	font-size: var(--schrift-klein);
	line-height: 1.5;
}
.angaben__bildnachweise dl > div {
	display: grid;
	gap: 0 1.5rem;
}
@media (min-width: 640px) {
	.angaben__bildnachweise dl > div {
		grid-template-columns: 14rem minmax(0, 1fr);
	}
}
.angaben__bildnachweise dt {
	font-weight: 400;
}
.angaben__bildnachweise dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--farbe-text-abgesetzt);
}

/* --- Datenschutzerklärung (datenschutz.mdx) und Eckdaten.astro ------------------------------------- */
/* Florian, 27.09.2026: „optisch grauenhaft … blaue Unterbrechungen" — Verweise, Rufnummern und
   E-Mail-Adressen wie Text (rot beim Überfahren, wie im Impressum), Eckdaten als unsichtbare Tabelle. */
#datenschutz-detail a {
	color: inherit;
	text-decoration: none;
}
#datenschutz-detail a:hover,
#datenschutz-detail a:focus-visible {
	color: var(--farbe-rot);
}
.eckdaten {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 1em;
}
.eckdaten__zeile {
	display: grid;
	gap: 0 1.5rem;
}
@media (min-width: 640px) {
	.eckdaten__zeile {
		grid-template-columns: 11rem minmax(0, 1fr);
	}
}
.eckdaten dt {
	font-weight: 400;
	color: var(--farbe-text-abgesetzt);
}
.eckdaten dd {
	margin: 0;
}
.eckdaten__am-stueck {
	white-space: nowrap;
}
/* Speicherdauer-Übersicht: ebenfalls unsichtbare Tabelle statt Rahmen und grauer Streifen. */
#datenschutz-detail table {
	table-layout: auto;
	margin: 0 0 1em;
}
#datenschutz-detail table tr,
#datenschutz-detail table tr:nth-child(odd),
#datenschutz-detail table tr:nth-child(2n) {
	background: none;
}
#datenschutz-detail table th,
#datenschutz-detail table td {
	border: 0;
	padding: 0.2rem 1.5rem 0.2rem 0;
	vertical-align: top;
	hyphens: manual;
}
/* Aussehen wie die Eckdaten: Beschriftung grau links, Wert rechts; Kopfzeile entfällt (die
   Abschnittsüberschrift sagt es schon); am Handy Wert unter der Beschriftung. */
#datenschutz-detail table thead {
	display: none;
}
#datenschutz-detail table td:first-child {
	color: var(--farbe-text-abgesetzt);
}
/* Gleiche Kante wie die Eckdaten: 11rem Beschriftung + 1.5rem Abstand. */
@media (min-width: 640px) {
	#datenschutz-detail table td:first-child {
		width: 11rem;
		box-sizing: content-box;
		white-space: nowrap;
	}
}
@media (max-width: 639px) {
	#datenschutz-detail table,
	#datenschutz-detail table tbody,
	#datenschutz-detail table tr,
	#datenschutz-detail table td {
		display: block;
	}
	#datenschutz-detail table tr {
		margin: 0 0 0.35rem;
	}
	#datenschutz-detail table td {
		padding: 0;
	}
}

/* --- Textbaustein: Abstand nach Aufzählungen (alle Seiten) ------------------------------------ */
/* Florian, 27.09.2026 (Einheitlichkeit): Aufzählungen haben im Original unten keinen Abstand,
   Absätze 1em. In der Flex-Spalte (.text__inhalt) kollabiert nichts, deshalb stand eine
   Zwischenüberschrift nach einer Liste nur halb so weit weg (20px statt 40px). */
.text__inhalt > .list {
	margin-block-end: 1em;
}

/* --- Umbrüche (alle Seiten) ------------------------------------------------------------------ */
/* Florian, 27.09.2026 („Zeilenumbrüche"): Überschriften ausgewogen umbrechen statt ein einzelnes
   Wort in die zweite Zeile zu schieben („Pflegeberatung im / Detail"); Absätze und Listenpunkte
   ohne einzelnes Wort in der letzten Zeile. Browser ohne Unterstützung umbrechen wie bisher. */
main h1,
main h2,
main h3,
main h4 {
	text-wrap: balance;
}
main p,
main li,
main dd {
	text-wrap: pretty;
}
/* Florian, 02.10.2026 („absolut perfekt"): Abschnittsüberschriften nur bei sehr langen Wörtern trennen
   (ab 14 Buchstaben, z. B. „Hauswirtschaftliche"), sonst zwischen den Wörtern umbrechen statt
   „Jetzt unverbind-lich anfragen!". Ganz abschalten geht nicht: einzelne lange Wörter passen bei 320 px
   sonst nicht in die Zeile. */
.text__titel,
.zweispalten__titel,
.kursliste__titel {
	hyphenate-limit-chars: 14 6 6;
}

/* --- Kennzahlen-Band (Kennzahlen.astro) ------------------------------------------------------- */
/* Florian, 27.09.2026: drei große rote Zahlen mit kurzer Zeile darunter, ohne Kästen. */
.kennzahlen {
	width: min(var(--spur-mittel), 100% - 4rem);
	margin-inline: auto;
}
.kennzahlen__liste {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
@media (min-width: 640px) {
	.kennzahlen__liste {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: 2rem;
	}
}
.kennzahlen__eintrag {
	display: grid;
	gap: 0.25rem;
}
.kennzahlen__zahl {
	font-size: var(--schrift-h2);
	font-weight: 700;
	line-height: 1.1;
	color: var(--farbe-rot);
	white-space: nowrap;
}
.kennzahlen__text {
	color: var(--farbe-text-abgesetzt);
}

/* Essen auf Räder, Warenkorb-Fenster: der Hinweis „Es fehlen noch …" klebte am Kleingedruckten
   darunter (gleiche Farbe, kein Abstand) — etwas Luft und Textfarbe, damit er als Hinweis erkennbar
   ist (Florian, 28.09.2026). */
.essen-uebersicht .essen-mengen:not(:empty) {
	margin-block-end: 0.75rem;
	color: var(--farbe-text);
}

/* --- Essen auf Räder: Filter- und Sortierzeile unter der Werkzeugleiste (David/Florian, 28.09.2026) --
   Links „Nur vegetarisch“ / „Nur vegan“, rechts „Sortieren“; ab 768px an denselben Kanten wie
   Umschalter (links) und Suche (rechts). Häkchen rot wie in den Formularen, keine blauen Elemente. */
.essen-filter {
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.25rem;
	/* Florian, 28.09.2026: näher an die Leiste darüber, insgesamt etwas kleiner, links eingerückt. */
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
}
.essen-filter__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	padding-inline-start: 1rem;
}
.essen-filter__wahl {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	cursor: pointer;
}
.essen-filter__wahl input[type='checkbox'] {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	top: 0;
}
.essen-filter__wahl input[type='checkbox']:hover,
.essen-filter__wahl input[type='checkbox']:focus {
	background-color: var(--farbe-weiss);
	border-color: var(--farbe-rot);
	box-shadow: none;
}
.essen-filter__wahl input[type='checkbox']:focus-visible {
	box-shadow: 0 0 0 0.15rem var(--farbe-rot);
}
.essen-filter__wahl input[type='checkbox']:checked {
	background-color: var(--farbe-weiss);
	border-color: var(--farbe-rot);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5 7-8' stroke='%23e60005' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70% 70%;
}
.essen-filter__sortierung {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	/* Handy: steht unter den Häkchen — gleich weit eingerückt (ab 768px rechtsbündig, s. u.). */
	padding-inline-start: 1rem;
}
.essen-filter__sortierung label {
	margin: 0;
	font-size: inherit;
}
.essen-filter__sortierung select {
	width: auto;
	min-height: 0;
	height: 1.9rem;
	padding: 0 2.2em 0 0.9em;
	border-radius: 2rem;
	font-size: inherit;
	font-weight: 400;
	line-height: 1.65rem;
	color: var(--farbe-text);
	background-position: center right 0.8em;
}
.essen-filter__sortierung select:focus {
	border-color: var(--farbe-rot);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e60005' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
	.essen-filter {
		flex-wrap: nowrap;
	}
	.essen-filter__marken,
	.essen-filter__sortierung {
		flex: 0 0 45%;
	}
	.essen-filter__sortierung {
		justify-content: flex-end;
		padding-inline-start: 0;
	}
}

/* --- Aufklapper Essen auf Räder ("Erklärung der Menülinien und Hinweise", "Bestell- und
   Lieferbedingungen"), Florian 01.10.2026: ruhig und strukturiert wie die Bildnachweise im Impressum —
   Haarlinien oben/unten, Pfeil rechts, Inhalt als unsichtbare Tabelle (Begriff links, Text rechts; am
   Handy untereinander), nichts fett außer Zwischentiteln, Rufnummer ohne Linkoptik. */
.essen-aufklapper {
	margin: 0 0 1.5rem;
	border-top: 0.0625rem solid var(--farbe-haarlinie);
	border-bottom: 0.0625rem solid var(--farbe-haarlinie);
	font-size: var(--schrift-klein);
	line-height: var(--zeilenhoehe-fliesstext);
}
.essen-aufklapper.essen-bedingungen {
	margin: 1.5rem 0 0;
}
.essen-aufklapper summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
}
.essen-aufklapper summary::-webkit-details-marker {
	display: none;
}
.essen-aufklapper summary::after {
	content: '';
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin-inline-end: 0.25rem;
	border-right: 0.125rem solid currentColor;
	border-bottom: 0.125rem solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--dauer-standard) var(--easing-standard);
}
.essen-aufklapper[open] summary::after {
	transform: translateY(25%) rotate(-135deg);
}
.essen-aufklapper summary:hover,
.essen-aufklapper summary:focus-visible {
	color: var(--farbe-rot);
}
.essen-aufklapper__titel {
	margin: 0.5rem 0 0.6rem;
	font-weight: 700;
}
.essen-aufklapper__titel ~ .essen-aufklapper__titel {
	margin-top: 1.5rem;
}
.essen-aufklapper__liste {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0 0 1.25rem;
}
.essen-aufklapper__liste:not(:last-child) {
	padding-bottom: 0;
}
.essen-aufklapper summary + .essen-aufklapper__liste {
	padding-top: 0.25rem;
}
.essen-aufklapper__liste > div {
	display: grid;
	gap: 0 1.5rem;
}
@media (min-width: 640px) {
	.essen-aufklapper__liste > div {
		grid-template-columns: 9.5rem minmax(0, 1fr);
	}
}
.essen-aufklapper__liste dt {
	font-weight: 400;
	color: var(--farbe-text-abgesetzt);
}
.essen-aufklapper__liste dd {
	margin: 0;
	text-wrap: pretty;
}
.essen-aufklapper__liste a {
	color: inherit;
	text-decoration: none;
}
.essen-aufklapper__liste a:hover,
.essen-aufklapper__liste a:focus-visible {
	color: var(--farbe-rot);
}

/* --- Links im Inhalt (Florian, 01.10.2026, Variante A) -----------------------------------------------
   Seitenweit wie im Impressum: Verweise, Rufnummern und E-Mail-Adressen in Textfarbe, ohne
   Unterstreichung, rot beim Überfahren/Fokus. Nur klassenlose Links — Knöpfe, Karten und andere
   Bausteine mit eigener Link-Klasse behalten ihre Optik. Der Fokusrahmen kommt aus 06-links.css. */
main a:not([class]) {
	color: inherit;
	text-decoration: none;
}
main a:not([class]):hover,
main a:not([class]):focus-visible {
	color: var(--farbe-rot);
}

/* Anfrageformular: jede Rufnummer mit Namen am Stück (Anfrage.astro, 02.10.2026). */
.kontakt__tel-zeile {
	white-space: nowrap;
}

/* Textlinks erkennbar machen (Florian, 02.10.2026, Abschlussprüfung Barrierefreiheit): kein Blau, keine
   Unterstreichung, aber ein kleiner roter Pfeil hinter Verweisen. Rufnummern und E-Mail-Adressen
   bleiben ohne Pfeil (wie im Impressum). Das geschützte Leerzeichen hält den Pfeil am letzten Wort. */
.text__inhalt a:not([class]):not([href^='tel:']):not([href^='mailto:'])::after,
.zweispalten__inhalt a:not([class]):not([href^='tel:']):not([href^='mailto:'])::after,
.header__body a:not([class]):not([href^='tel:']):not([href^='mailto:'])::after {
	content: ' ›';
	color: var(--farbe-rot);
	font-weight: 700;
}

/* Abstand unter dem Bild bei „… – kurz erklärt.“ an die übrigen Abschnittsabstände angleichen
   (Florian, 02.10.2026): vorher 3rem Bildabstand zusätzlich zum Spaltenabstand. */
.zweispalten__bild img {
	margin-bottom: 0;
}
@media (max-width: 639px) {
	.zweispalten__bild {
		margin-bottom: 1.5rem;
	}
}