/**
 * FFW Einsatzverwaltung – Frontend-Styles.
 *
 * Grundsätze:
 * - Alle Farben, Abstände und Größen kommen aus CSS-Variablen (--ffw-*).
 *   Feste Farbwerte stehen NUR im Variablenblock unten.
 * - Die Farben passen sich automatisch dem Theme an: Text übernimmt die
 *   Schriftfarbe des Themes (currentColor), Kästen, Rahmen und Nebentexte
 *   sind Tönungen davon (color-mix). So wirkt alles auf hellen und dunklen
 *   Themes stimmig, ohne Einstellung. Nur Feuerwehrrot und Blau sind feste
 *   Akzentfarben; das Rot lässt sich in den Einstellungen ändern.
 * - :where() hat keine Spezifität. Ein Theme überschreibt Variablen einfach:
 *       body { --ffw-farbe-primaer: #004b8d; --ffw-farbe-flaeche: #fff; }
 *   (Das FFW Theme setzt so alle Farben aus seiner Farbvariante.)
 * - Mobil zuerst: Grundlayout für schmale Flächen. Erweiterungen richten
 *   sich per Container-Abfrage (@container ffw) nach der Breite des
 *   Bausteins selbst, nicht nach der Bildschirmbreite. So passt das Layout
 *   in schmale Inhaltsspalten genauso wie in breite Seiten.
 * - Schriftart kommt vom Theme. Es werden keine Schriften, Icons oder
 *   Bibliotheken von außen geladen.
 *
 * Alle Variablen sind in der README dokumentiert.
 */

/* ==========================================================================
   Variablen
   ========================================================================== */

:where(:root) {
	/* Akzentfarben */
	--ffw-farbe-primaer: #c62828;          /* Feuerwehrrot: Schaltflächen, aktive Seite, Balken */
	--ffw-farbe-primaer-text: #fff;        /* Schrift auf Primärfarbe */
	--ffw-farbe-akzent-text: color-mix(in srgb, var(--ffw-farbe-primaer) 80%, currentColor); /* Rot als Schrift, auf hell dunkler, auf dunkel heller */
	--ffw-farbe-sekundaer: color-mix(in srgb, #1f6fd1 75%, currentColor); /* Blau: Links, Hover, Fokus */
	--ffw-farbe-sekundaer-flaeche: #1f6fd1; /* Blau als Hintergrund (Zähler am Filter), mit weißer Schrift */
	--ffw-farbe-sekundaer-text: #fff;

	/* Flächen und Text: aus der Schriftfarbe des Themes abgeleitet */
	--ffw-farbe-text: currentColor;
	--ffw-farbe-text-gedaempft: color-mix(in srgb, currentColor 68%, transparent);
	--ffw-farbe-hintergrund: transparent;  /* Fläche hinter dem ganzen Baustein */
	--ffw-farbe-flaeche: color-mix(in srgb, currentColor 4%, transparent);   /* Karten */
	--ffw-farbe-flaeche-2: color-mix(in srgb, currentColor 8%, transparent); /* Felder, Kacheln, Platzhalter */
	--ffw-farbe-rahmen: color-mix(in srgb, currentColor 16%, transparent);
	--ffw-farbe-balken-spur: color-mix(in srgb, currentColor 10%, transparent);
	--ffw-farbe-silhouette: color-mix(in srgb, currentColor 40%, transparent);
	--ffw-farbe-fokus: var(--ffw-farbe-sekundaer);

	/* Undurchsichtige Fläche für Aufklapper ("Filter auswählen"): Hintergrund
	   des Themes (Block-Themes: Farbe "base"), sonst Systemfarbe. */
	--ffw-farbe-popup: var(--wp--preset--color--base, Canvas);
	--ffw-farbe-popup-schatten: rgb(0 0 0 / 18%);

	/* Alarmstichwort (wird je Stichwort per style-Attribut überschrieben) */
	--ffw-stichwort-farbe: var(--ffw-farbe-primaer);
	--ffw-stichwort-text: var(--ffw-farbe-primaer-text);

	/* Farben der Stichwort-Gruppen (Kennzahlen) */
	--ffw-farbe-gruppe-brand: #c62828;
	--ffw-farbe-gruppe-thl: #1565c0;
	--ffw-farbe-gruppe-gefahrstoffe: #f9a825;
	--ffw-farbe-gruppe-sonstiges: #616161;

	/* Abstände und Formen */
	--ffw-abstand-klein: 0.5rem;
	--ffw-abstand: 1rem;
	--ffw-abstand-gross: 2rem;
	--ffw-innenabstand: 0;                 /* Innenabstand des ganzen Bausteins */
	--ffw-radius: 6px;                     /* Karten */
	--ffw-radius-klein: 4px;               /* Badges, Felder, Schaltflächen */
	--ffw-rahmen-breite: 1px;
	--ffw-schatten: none;                  /* z. B. 0 1px 2px rgb(0 0 0 / 8%) */
	--ffw-schatten-hover: none;

	/* Schrift */
	--ffw-schrift-klein: 0.85em;
	--ffw-schrift-zahl-gross: 3em;
	--ffw-zeilenhoehe-eng: 1.3;

	/* Komponenten */
	--ffw-icon-groesse: 2.25rem;           /* Runder Stichwort-Kreis */
	--ffw-feld-hoehe: 2.25rem;             /* Höhe von Suchfeld, Auswahl, Schaltfläche */
	--ffw-karte-hoehe: 320px;
	--ffw-raster-min: 240px;
	--ffw-balken-hoehe: 0.75rem;
	--ffw-bild-verhaeltnis: 2 / 1;

	/* Lightbox (immer dunkel) */
	--ffw-lightbox-hintergrund: rgb(8 12 20 / 94%);
	--ffw-lightbox-text: #fff;
	--ffw-lightbox-knopf: rgb(255 255 255 / 14%);
	--ffw-lightbox-knopf-hover: rgb(255 255 255 / 26%);
}

/* ==========================================================================
   Gemeinsame Bausteine
   ========================================================================== */

.ffw {
	container: ffw / inline-size;
	margin-block: var(--ffw-abstand-gross);
	padding: var(--ffw-innenabstand);
	border-radius: var(--ffw-radius);
	background: var(--ffw-farbe-hintergrund);
	color: var(--ffw-farbe-text);
}

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

.ffw :focus-visible {
	outline: 2px solid var(--ffw-farbe-fokus);
	outline-offset: 2px;
}

.ffw a {
	color: var(--ffw-farbe-sekundaer);
}

.ffw-ueberschrift {
	margin-block: 0 var(--ffw-abstand);
}

.ffw-leer {
	margin: 0;
	padding: var(--ffw-abstand-gross) var(--ffw-abstand);
	border: var(--ffw-rahmen-breite) dashed var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius);
	color: var(--ffw-farbe-text-gedaempft);
	text-align: center;
}

/* Nur für Screenreader sichtbar (falls das Theme die Klasse nicht kennt). */
.ffw .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Icons aus assets/icons/ (Linien in currentColor) */
.ffw-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
}

.ffw-icon svg {
	width: 100%;
	height: 100%;
}

.ffw-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ffw-abstand-klein);
	min-height: var(--ffw-feld-hoehe);
	padding: 0 0.9em;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-primaer);
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-primaer);
	color: var(--ffw-farbe-primaer-text);
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: var(--ffw-zeilenhoehe-eng);
	cursor: pointer;
	text-decoration: none;
}

.ffw-button:hover {
	filter: brightness(0.92);
}

.ffw-badge {
	display: inline-block;
	padding: 0.2em 0.5em;
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-stichwort-farbe);
	color: var(--ffw-stichwort-text);
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: var(--ffw-zeilenhoehe-eng);
	white-space: nowrap;
}

/* Runder Kreis mit Stichwort-Icon */
.ffw-stichwort-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--ffw-icon-groesse);
	height: var(--ffw-icon-groesse);
	border-radius: 50%;
	background: var(--ffw-stichwort-farbe);
	color: var(--ffw-stichwort-text);
}

.ffw-stichwort-icon .ffw-icon {
	width: 55%;
	height: 55%;
}

/* ==========================================================================
   Werkzeugleiste der Einsatzliste: Kennzahlen links, Filter und Suche rechts
   ========================================================================== */

.ffw-werkzeugleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem var(--ffw-abstand);
	margin-block-end: var(--ffw-abstand);
}

.ffw-werkzeugleiste .ffw-filter {
	margin-inline-start: auto;
	margin-block-end: 0;
}

/* Kennzahlen: kompakte Reihe */
.ffw-kennzahlen__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ffw-kennzahl {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	margin: 0;
	padding: 0.3rem 0.65rem;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-flaeche);
	font-size: 0.85em;
	white-space: nowrap;
}

/* Farbpunkt der Gruppe */
.ffw-kennzahl::before {
	content: "";
	align-self: center;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--ffw-kennzahl-farbe, var(--ffw-farbe-primaer));
}

.ffw-kennzahl--gesamt::before {
	display: none;
}

.ffw-kennzahl--brand { --ffw-kennzahl-farbe: var(--ffw-farbe-gruppe-brand); }
.ffw-kennzahl--thl { --ffw-kennzahl-farbe: var(--ffw-farbe-gruppe-thl); }
.ffw-kennzahl--gefahrstoffe { --ffw-kennzahl-farbe: var(--ffw-farbe-gruppe-gefahrstoffe); }
.ffw-kennzahl--sonstiges { --ffw-kennzahl-farbe: var(--ffw-farbe-gruppe-sonstiges); }

.ffw-kennzahl__zahl {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ffw-kennzahl--gesamt .ffw-kennzahl__zahl {
	color: var(--ffw-farbe-akzent-text);
}

.ffw-kennzahl__text {
	color: var(--ffw-farbe-text-gedaempft);
}

/* ==========================================================================
   Formularfelder (Filter der Einsatzliste und Jahresauswahl der Statistik)
   ========================================================================== */

.ffw-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem;
	margin-block-end: var(--ffw-abstand);
}

.ffw-filter__feld {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1 1 8rem;
	min-width: 0;
}

.ffw-filter__feld label {
	color: var(--ffw-farbe-text-gedaempft);
	font-size: 0.78em;
	font-weight: 600;
}

.ffw-filter input[type="search"],
.ffw-filter select {
	width: 100%;
	min-height: var(--ffw-feld-hoehe);
	padding: 0 0.65rem;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius-klein);
	background-color: var(--ffw-farbe-flaeche);
	color: var(--ffw-farbe-text);
	font: inherit;
	font-size: 0.9em;
}

.ffw-filter input[type="search"]:focus,
.ffw-filter select:focus {
	border-color: var(--ffw-farbe-sekundaer);
}

.ffw-filter input[type="search"]::placeholder {
	color: var(--ffw-farbe-text-gedaempft);
	opacity: 1;
}

.ffw-filter__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ffw-abstand);
}

.ffw-filter__zuruecksetzen {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--ffw-schrift-klein);
}

/* In der Werkzeugleiste: alles in einer Zeile */
.ffw-werkzeugleiste .ffw-filter {
	align-items: center;
	flex-wrap: nowrap;
}

/* Schaltfläche mit Rahmen ("Filter auswählen", Lupe) */
.ffw-knopf-umriss {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--ffw-feld-hoehe);
	padding: 0 0.75rem;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-flaeche);
	color: var(--ffw-farbe-text);
	font: inherit;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}

.ffw-knopf-umriss::-webkit-details-marker {
	display: none;
}

.ffw-knopf-umriss:hover,
.ffw-knopf-umriss--aktiv {
	border-color: var(--ffw-farbe-sekundaer);
}

.ffw-knopf-umriss--icon {
	justify-content: center;
	width: var(--ffw-feld-hoehe);
	padding: 0;
}

.ffw-zaehler {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--ffw-farbe-sekundaer-flaeche);
	color: var(--ffw-farbe-sekundaer-text);
	font-size: 0.75em;
	font-weight: 700;
}

/* Aufklapper "Filter auswählen" (<details>) */
.ffw-aufklapper {
	position: relative;
}

.ffw-aufklapper__pfeil {
	transition: transform 0.15s ease;
}

.ffw-aufklapper[open] .ffw-aufklapper__pfeil {
	transform: rotate(180deg);
}

.ffw-aufklapper__inhalt {
	position: absolute;
	inset-block-start: calc(100% + 0.35rem);
	inset-inline-end: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: min(18rem, 85vw);
	padding: var(--ffw-abstand);
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius);
	/* Erst die Seitenfarbe (undurchsichtig), darüber die Tönung der Kästen. */
	background: linear-gradient(var(--ffw-farbe-flaeche), var(--ffw-farbe-flaeche)), var(--ffw-farbe-popup);
	box-shadow: 0 8px 24px var(--ffw-farbe-popup-schatten);
}

/* Suche: Lupe, das Feld öffnet sich daneben (siehe ffw-liste.js) */
.ffw-suche {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ffw-filter input.ffw-suche__feld {
	width: 14rem;
	transition: width 0.2s ease, opacity 0.2s ease;
}

.ffw-aufklapper__inhalt .ffw-filter__feld {
	flex: none;
}

.ffw-suche--zu .ffw-suche__feld {
	width: 0 !important;
	min-width: 0;
	padding: 0 !important;
	border-width: 0 !important;
	opacity: 0;
	pointer-events: none;
}

/* Schmale Flächen: Kennzahlen oben, darunter Filter und Suche */
@container ffw (max-width: 559px) {
	.ffw-werkzeugleiste .ffw-filter {
		flex-wrap: wrap;
		margin-inline-start: 0;
		width: 100%;
	}

	.ffw-werkzeugleiste .ffw-suche {
		flex: 1 1 auto;
	}

	.ffw-filter input.ffw-suche__feld {
		flex: 1 1 auto;
		width: auto;
	}

	.ffw-aufklapper__inhalt {
		inset-inline-end: auto;
		inset-inline-start: 0;
	}
}

/* ==========================================================================
   Einsatzliste (Listenkarten)
   ========================================================================== */

.ffw-einsatzliste__anzahl {
	margin-block: 0 var(--ffw-abstand-klein);
	color: var(--ffw-farbe-text-gedaempft);
	font-size: var(--ffw-schrift-klein);
}

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

.ffw-einsatzliste__eintrag {
	margin: 0;
}

.ffw-einsatzkarte {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.5rem 0.85rem;
	align-items: start;
	padding: 0.75rem 0.9rem;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius);
	background: var(--ffw-farbe-flaeche);
	box-shadow: var(--ffw-schatten);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ffw-einsatzkarte:hover,
.ffw-einsatzkarte:focus-within {
	border-color: var(--ffw-farbe-sekundaer);
	box-shadow: var(--ffw-schatten-hover);
}

.ffw-einsatzkarte__inhalt {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.ffw-einsatzkarte__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
}

.ffw-einsatzkarte__titel {
	margin: 0;
	font-size: 1em;
	font-weight: 600;
	line-height: var(--ffw-zeilenhoehe-eng);
	overflow-wrap: anywhere;
}

.ffw .ffw-einsatzkarte__link {
	color: var(--ffw-farbe-text);
	text-decoration: none;
}

/* Die ganze Karte ist klickbar: der Link spannt sich über die Karte. */
.ffw-einsatzkarte__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ffw-radius);
}

.ffw .ffw-einsatzkarte__link:hover,
.ffw .ffw-einsatzkarte__link:focus-visible {
	color: var(--ffw-farbe-sekundaer);
	text-decoration: underline;
	outline: none;
}

.ffw-einsatzkarte__link:focus-visible::after {
	outline: 2px solid var(--ffw-farbe-fokus);
	outline-offset: 2px;
}

.ffw-einsatzkarte__nummer {
	color: var(--ffw-farbe-text-gedaempft);
	font-size: var(--ffw-schrift-klein);
	font-variant-numeric: tabular-nums;
}

.ffw-einsatzkarte__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ffw-farbe-text-gedaempft);
	font-size: var(--ffw-schrift-klein);
}

.ffw-einsatzkarte__meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	min-width: 0;
}

.ffw-einsatzkarte__pfeil {
	display: none;
	color: var(--ffw-farbe-text-gedaempft);
}

@container ffw (min-width: 560px) {
	.ffw-einsatzkarte {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		padding: 0.8rem 1rem;
	}

	.ffw-einsatzkarte__pfeil {
		display: inline-flex;
	}
}

/* ==========================================================================
   Baustein "Letzte Einsätze" (kompakte Liste, z. B. Startseite)
   ========================================================================== */

.ffw-letzte__liste {
	margin: 0;
	padding: 0;
	border-top: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	list-style: none;
}

.ffw-letzte__eintrag {
	margin: 0;
	border-bottom: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
}

.ffw .ffw-letzte__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.25rem;
	color: var(--ffw-farbe-text);
	text-decoration: none;
}

.ffw .ffw-letzte__link:hover .ffw-letzte__titel,
.ffw .ffw-letzte__link:focus-visible .ffw-letzte__titel {
	color: var(--ffw-farbe-sekundaer);
	text-decoration: underline;
}

.ffw-stichwort-icon--klein {
	--ffw-icon-groesse: 2rem;
}

.ffw-letzte__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.ffw-letzte__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

.ffw-letzte__titel {
	font-weight: 600;
	line-height: var(--ffw-zeilenhoehe-eng);
	overflow-wrap: anywhere;
}

.ffw-letzte__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75rem;
	color: var(--ffw-farbe-text-gedaempft);
	font-size: var(--ffw-schrift-klein);
}

.ffw-letzte__alle {
	margin: 0.75rem 0 0;
	font-size: var(--ffw-schrift-klein);
}

.ffw-letzte__alle a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	text-decoration: none;
}

.ffw-letzte__alle a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Seitennavigation (paginate_links mit type="list")
   ========================================================================== */

.ffw-seiten ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	list-style: none;
	margin: var(--ffw-abstand-gross) 0 0;
	padding: 0;
}

.ffw-seiten li {
	margin: 0;
}

/* Nur die Links/Zahlen, nicht die Liste selbst (die trägt dieselbe Klasse). */
.ffw-seiten a.page-numbers,
.ffw-seiten span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	font-size: 0.9em;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-flaeche);
	color: var(--ffw-farbe-text);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.ffw-seiten a.page-numbers:hover {
	border-color: var(--ffw-farbe-sekundaer);
	color: var(--ffw-farbe-sekundaer);
}

.ffw-seiten span.page-numbers.current {
	border-color: var(--ffw-farbe-primaer);
	background: var(--ffw-farbe-primaer);
	color: var(--ffw-farbe-primaer-text);
	font-weight: 700;
}

.ffw-seiten span.page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ==========================================================================
   Einzelansicht eines Einsatzes
   ========================================================================== */

.ffw-einsatz {
	display: flex;
	flex-direction: column;
	gap: var(--ffw-abstand);
}

.ffw-einsatz__zurueck {
	margin: 0;
	font-size: var(--ffw-schrift-klein);
}

.ffw-einsatz__zurueck a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	text-decoration: none;
}

.ffw-einsatz__zurueck a:hover {
	text-decoration: underline;
}

/* Kopf: Icon, Kürzel, Klartext, Nummer, Datum, Ort */
.ffw-einsatz__kopf {
	display: flex;
	align-items: flex-start;
	gap: var(--ffw-abstand);
}

.ffw-stichwort-icon--gross {
	--ffw-icon-groesse: 2.75rem;
}

.ffw-einsatz__kopftext {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.ffw-einsatz__titelzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
}

.ffw-einsatz__titel {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
	line-height: var(--ffw-zeilenhoehe-eng);
	overflow-wrap: anywhere;
}

h1.ffw-einsatz__titel {
	font-size: clamp(1.4em, 2.6vw, 1.75em);
	letter-spacing: -0.01em;
}

.ffw .ffw-einsatz__titel a {
	color: var(--ffw-farbe-text);
	text-decoration: none;
}

.ffw .ffw-einsatz__titel a:hover {
	color: var(--ffw-farbe-sekundaer);
	text-decoration: underline;
}

.ffw-einsatz__nummer {
	color: var(--ffw-farbe-text-gedaempft);
	font-variant-numeric: tabular-nums;
}

/* Steckbrief: Datum, Alarmierung, Dauer, Ort, Fahrzeuge. Jede Angabe zieht
   oben und links eine Linie (box-shadow); am äußeren Rand schneidet
   overflow: hidden sie ab. Das passt bei jeder Spaltenzahl und auch mit
   durchscheinenden Farben (fremde Themes). */
.ffw-steckbrief {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius);
	background: var(--ffw-farbe-flaeche);
	overflow: hidden;
}

.ffw-steckbrief__angabe {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	box-shadow: calc(-1 * var(--ffw-rahmen-breite)) calc(-1 * var(--ffw-rahmen-breite)) 0 var(--ffw-farbe-rahmen);
}

.ffw-steckbrief__label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	color: var(--ffw-farbe-text-gedaempft);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ffw-steckbrief__label .ffw-icon {
	color: var(--ffw-farbe-sekundaer);
}

.ffw-steckbrief__wert {
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Ungerade Anzahl auf schmalen Flächen: letzte Angabe über beide Spalten. */
.ffw-steckbrief__angabe:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@container ffw (min-width: 760px) {
	/* Breite Flächen: alle Angaben in einer Reihe, gleich breit. */
	.ffw-steckbrief {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.ffw-steckbrief__angabe:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.ffw-steckbrief__angabe {
		padding: 0.85rem 1.1rem;
	}
}

/* Abschnitte: untereinander (schmale Flächen) */
.ffw-einsatz__inhalt,
.ffw-einsatz__haupt,
.ffw-einsatz__seite {
	display: flex;
	flex-direction: column;
	gap: var(--ffw-abstand);
	min-width: 0;
}

.ffw-abschnitt {
	padding: var(--ffw-abstand);
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius);
	background: var(--ffw-farbe-flaeche);
	box-shadow: var(--ffw-schatten);
}

.ffw-abschnitt__titel {
	margin: 0 0 0.6rem;
	font-size: 1em;
	font-weight: 600;
	line-height: var(--ffw-zeilenhoehe-eng);
}

.ffw-abschnitt__anzahl {
	color: var(--ffw-farbe-text-gedaempft);
	font-weight: 400;
}

.ffw-einsatz__bericht > :first-child {
	margin-top: 0;
}

.ffw-einsatz__bericht > :last-child {
	margin-bottom: 0;
}

.ffw-einsatz__bericht img {
	max-width: 100%;
	height: auto;
}

.ffw-hinweistext {
	margin: 0.5rem 0 0;
	color: var(--ffw-farbe-text-gedaempft);
	font-size: var(--ffw-schrift-klein);
}

.ffw-abschnitt > .ffw-hinweistext:first-of-type {
	margin-top: 0;
}

.ffw-abschnitt .ffw-karte {
	--ffw-karte-hoehe: 260px;
	margin: 0;
}

/* Eingesetzte Fahrzeuge */
.ffw-fahrzeuggruppe + .ffw-fahrzeuggruppe {
	margin-top: var(--ffw-abstand);
}

.ffw-fahrzeuggruppe__titel {
	margin: 0 0 0.5rem;
	color: var(--ffw-farbe-text-gedaempft);
	font-size: var(--ffw-schrift-klein);
	font-weight: 600;
	letter-spacing: 0.02em;
}

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

.ffw-fahrzeugliste__eintrag {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.5rem;
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-flaeche-2);
}

.ffw-fahrzeugliste__bild {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 6rem;
	aspect-ratio: 3 / 2;
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-flaeche);
	overflow: hidden;
}

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

.ffw-fahrzeugliste__bild .ffw-silhouette {
	width: 85%;
}

.ffw-fahrzeugliste__bild > .ffw-icon {
	width: 40%;
	height: auto;
	color: var(--ffw-farbe-silhouette);
}

.ffw-fahrzeugliste__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ffw-fahrzeugliste__name {
	overflow-wrap: anywhere;
}

.ffw-fahrzeugliste__funk {
	color: var(--ffw-farbe-text-gedaempft);
	font-size: var(--ffw-schrift-klein);
}

.ffw-weitere-kraefte {
	margin-top: var(--ffw-abstand);
}

.ffw-schilder {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ffw-schild {
	margin: 0;
	padding: 0.2rem 0.6rem;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-flaeche-2);
	font-size: var(--ffw-schrift-klein);
}


/* Breite Flächen: alle Abschnitte untereinander über die volle Breite;
   die Fahrzeuggruppen (Abteilungen) stehen als Spalten nebeneinander,
   Überschrift und "Weitere Kräfte" über die ganze Breite; Karte etwas höher. */
@container ffw (min-width: 760px) {
	/* Abteilungen nebeneinander als umbrechende Zeile (Flexbox, bewusst kein
	   Raster: Safari hat den Inhalt im Raster nicht gezeichnet). */
	.ffw-fahrzeuggruppen {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--ffw-abstand);
	}

	.ffw-fahrzeuggruppe {
		flex: 1 1 16rem;
		max-width: 26rem;
		min-width: 0;
	}

	.ffw-fahrzeuggruppe + .ffw-fahrzeuggruppe {
		margin-top: 0;
	}

	.ffw-abschnitt .ffw-karte {
		--ffw-karte-hoehe: 340px;
	}

	.ffw-abschnitt {
		padding: 1.1rem 1.25rem;
	}
}

/* ==========================================================================
   Bildergalerie
   ========================================================================== */

.ffw-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
	gap: var(--ffw-abstand-klein);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ffw-galerie__eintrag,
.ffw-galerie__bild {
	margin: 0;
}

.ffw-galerie__link {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-flaeche-2);
	overflow: hidden;
}

.ffw-galerie__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.ffw-galerie__link:hover img {
	transform: scale(1.03);
}

.ffw-galerie__text {
	margin-top: 0.35rem;
	color: var(--ffw-farbe-text-gedaempft);
	font-size: var(--ffw-schrift-klein);
	line-height: var(--ffw-zeilenhoehe-eng);
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* ==========================================================================
   Lightbox (assets/js/ffw-lightbox.js) – immer dunkel, unabhängig vom Farbschema
   ========================================================================== */

.ffw-lightbox-offen {
	overflow: hidden;
}

.ffw-lightbox,
.ffw-lightbox * {
	box-sizing: border-box;
}

.ffw-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ffw-lightbox-hintergrund);
	color: var(--ffw-lightbox-text);
}

.ffw-lightbox::backdrop {
	background: var(--ffw-lightbox-hintergrund);
}

.ffw-lightbox__figur {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	height: 100%;
	margin: 0;
	padding: 3.5rem 1rem 4.5rem;
	touch-action: pan-y;
}

.ffw-lightbox__bild {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 9rem);
	min-height: 0;
	object-fit: contain;
	user-select: none;
}

.ffw-lightbox__text {
	max-width: 60rem;
	font-size: var(--ffw-schrift-klein);
	text-align: center;
}

.ffw-lightbox__zaehler {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	margin: 0;
	font-size: var(--ffw-schrift-klein);
	font-variant-numeric: tabular-nums;
}

.ffw-lightbox__knopf {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ffw-lightbox-knopf);
	color: var(--ffw-lightbox-text);
	cursor: pointer;
}

.ffw-lightbox__knopf:hover {
	background: var(--ffw-lightbox-knopf-hover);
}

.ffw-lightbox__knopf:focus-visible {
	outline: 2px solid var(--ffw-lightbox-text);
	outline-offset: 2px;
}

.ffw-lightbox__knopf svg {
	width: 1.4rem;
	height: 1.4rem;
}

.ffw-lightbox__knopf[hidden] {
	display: none;
}

.ffw-lightbox__schliessen {
	inset-block-start: 0.6rem;
	inset-inline-end: 0.6rem;
}

.ffw-lightbox__zurueck,
.ffw-lightbox__weiter {
	inset-block-end: 1rem;
}

.ffw-lightbox__zurueck {
	inset-inline-start: calc(50% - 3.25rem);
}

.ffw-lightbox__weiter {
	inset-inline-end: calc(50% - 3.25rem);
}

@media (min-width: 768px) {
	.ffw-lightbox__figur {
		padding: 3.5rem 5rem;
	}

	.ffw-lightbox__zurueck,
	.ffw-lightbox__weiter {
		inset-block-end: auto;
		inset-block-start: calc(50% - 1.375rem);
	}

	.ffw-lightbox__zurueck {
		inset-inline-start: 1rem;
	}

	.ffw-lightbox__weiter {
		inset-inline-end: 1rem;
	}
}

/* ==========================================================================
   Karte mit Einwilligung
   ========================================================================== */

.ffw-karte {
	position: relative;
	height: var(--ffw-karte-hoehe);
	margin-block: var(--ffw-abstand-gross);
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius);
	background: var(--ffw-farbe-flaeche-2);
	overflow: hidden;
}

.ffw-karte__karte {
	position: absolute;
	inset: 0;
}

.ffw-karte__hinweis {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ffw-abstand);
	padding: var(--ffw-abstand-gross);
	text-align: center;
	font-size: var(--ffw-schrift-klein);
}

.ffw-karte__hinweis p {
	max-width: 36em;
	margin: 0;
}

.ffw-karte--laedt .ffw-karte__laden {
	opacity: 0.6;
	pointer-events: none;
}

.ffw-karte--geladen .ffw-karte__hinweis {
	display: none;
}

/* Häkchen "Karten künftig automatisch laden" */
.ffw-karte__merken {
	display: inline-flex;
	align-items: center;
	gap: var(--ffw-abstand-klein);
	cursor: pointer;
}

.ffw-karte__merken[hidden],
.ffw-karte__vergessen[hidden] {
	display: none;
}

/* "Automatisch laden ausschalten": klein oben rechts über der Karte */
.ffw-karte__vergessen {
	position: absolute;
	top: var(--ffw-abstand-klein);
	inset-inline-end: var(--ffw-abstand-klein);
	z-index: 1000;
	padding: 0.25rem 0.5rem;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-flaeche);
	color: var(--ffw-farbe-text);
	font: inherit;
	font-size: var(--ffw-schrift-klein);
	cursor: pointer;
}

.ffw-karte__vergessen:focus-visible {
	outline: 2px solid var(--ffw-farbe-fokus);
	outline-offset: 2px;
}

/* ==========================================================================
   Statistik
   ========================================================================== */

.ffw-statistik__gesamt {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--ffw-abstand-klein);
	margin-block: 0 var(--ffw-abstand-gross);
}

.ffw-statistik__zahl {
	color: var(--ffw-farbe-akzent-text);
	font-size: var(--ffw-schrift-zahl-gross);
	font-weight: 700;
	line-height: 1;
}

.ffw-statistik__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ffw-raster-min)), 1fr));
	gap: var(--ffw-abstand);
}

.ffw-statistik__bereich {
	padding: var(--ffw-abstand);
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius);
	background: var(--ffw-farbe-flaeche);
	box-shadow: var(--ffw-schatten);
}

.ffw-statistik__bereich .ffw-ueberschrift {
	font-size: 1.05em;
}

.ffw-balken {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ffw-balken__zeile {
	display: grid;
	grid-template-columns: minmax(4em, 9em) 1fr auto;
	align-items: center;
	gap: var(--ffw-abstand-klein);
	padding-block: 0.2rem;
	font-size: var(--ffw-schrift-klein);
}

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

.ffw-balken__spur {
	display: block;
	height: var(--ffw-balken-hoehe);
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-balken-spur);
	overflow: hidden;
}

.ffw-balken__wert {
	display: block;
	height: 100%;
	border-radius: var(--ffw-radius-klein);
	background: var(--ffw-farbe-primaer);
}

.ffw-balken__zahl {
	min-width: 2em;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Fahrzeugkarten
   ========================================================================== */

.ffw-fahrzeuge__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ffw-raster-min)), 1fr));
	gap: var(--ffw-abstand);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ffw-fahrzeuge__eintrag {
	margin: 0;
}

.ffw-fahrzeugkarte {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--ffw-rahmen-breite) solid var(--ffw-farbe-rahmen);
	border-radius: var(--ffw-radius);
	background: var(--ffw-farbe-flaeche);
	box-shadow: var(--ffw-schatten);
	overflow: hidden;
}

.ffw-fahrzeugkarte__bild {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--ffw-bild-verhaeltnis);
	background: var(--ffw-farbe-flaeche-2);
	overflow: hidden;
}

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

.ffw-fahrzeugkarte__inhalt {
	padding: var(--ffw-abstand);
}

.ffw-fahrzeugkarte__titel {
	margin: 0 0 var(--ffw-abstand-klein);
	font-size: 1.1em;
	line-height: var(--ffw-zeilenhoehe-eng);
}

.ffw-fahrzeugkarte__titel a {
	color: var(--ffw-farbe-text);
	text-decoration: none;
}

.ffw-fahrzeugkarte__titel a:hover,
.ffw-fahrzeugkarte__titel a:focus-visible {
	color: var(--ffw-farbe-sekundaer);
	text-decoration: underline;
}

.ffw-fahrzeugkarte__daten {
	margin: 0;
	font-size: var(--ffw-schrift-klein);
}

.ffw-fahrzeugkarte__daten div {
	display: flex;
	gap: var(--ffw-abstand-klein);
}

.ffw-fahrzeugkarte__daten dt {
	color: var(--ffw-farbe-text-gedaempft);
}

.ffw-fahrzeugkarte__daten dt::after {
	content: ":";
}

.ffw-fahrzeugkarte__daten dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* ==========================================================================
   Silhouetten (mitgelieferte Standardbilder)
   ========================================================================== */

.ffw-silhouette {
	display: block;
	width: 70%;
	max-width: 320px;
	color: var(--ffw-farbe-silhouette);
}

.ffw-silhouette svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Weniger Bewegung, wenn im Betriebssystem eingestellt
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ffw * {
		transition: none !important;
	}
}