/*
 * WM Florianspost – Frontend (Einsatzübersicht, Einsatz-Detailseite,
 * Einsatzmittel-Seiten).
 *
 * Prinzip: STRUKTUR und LAYOUT sind unsere Aufgabe – Raster, Spaltenbreiten,
 * Abstände, Umbruch/Kürzung, Bildseitenverhältnisse, Schwellen. FARBEN, SCHRIFTEN
 * und RAHMENFORMEN gehören dem Theme. Deshalb:
 *   - keine Schriftfamilie, keine Grund-Schriftgröße, keine Text-/Hintergrundfarbe;
 *   - alle Linien/Dämpfungen über currentColor bzw. halbtransparente Ableitungen
 *     davon (funktioniert damit auch auf dunklen Themes);
 *   - einzige fachliche Farbausnahme: der Einsatzart-Punkt (Farbe als Inline-Style
 *     aus dem Term-Meta) – die Bezeichnung steht immer daneben, nie Farbe allein.
 * Jeder Selektor ist über eine unserer wmfp-Klassen gebunden und wirkt nie außerhalb.
 */

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

/* Nur für Screenreader: visuell entfernt, aber im Zugänglichkeitsbaum vorhanden.
   Trägt in der Tabelle den vollen Einsatzart-Namen (der sichtbar nur als Kürzel
   und Farbe erscheint) sowie die versteckte Tabellen-Beschriftung (Jahr). */
.wmfp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Fachlicher Farbpunkt der Einsatzart. */
.wmfp-art-dot {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.4em;
	border-radius: 2px;
	vertical-align: baseline;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* Datenblock: Bezeichnung und Wert nebeneinander, Bezeichnung inhaltsbreit, mit
   FESTEM Abstand dazwischen (waechst nicht mit der Spaltenbreite – behebt „Wert
   steht weit weg" bei nur einem Eintrag). Ein Grid ueber die ganze Liste (Zeilen
   via display:contents) richtet die Bezeichnungen aneinander aus. Kommt ganz ohne
   @container aus und funktioniert bei jeder Breite; die Wert-Spalte darf umbrechen
   (min-width:0), daher kein Ueberlauf. */
.wmfp-fakten {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 1.5rem;
	margin: 1.25rem 0;
}
.wmfp-fakt {
	display: contents;
}
.wmfp-fakt > dt,
.wmfp-fakt > dd {
	padding: 0.4rem 0;
	border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.wmfp-fakt:first-child > dt,
.wmfp-fakt:first-child > dd {
	border-top: 0;
}
.wmfp-fakt dt {
	margin: 0;
	opacity: 0.7;
}
.wmfp-fakt dd {
	margin: 0;
	min-width: 0;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* Themes, die JEDEN Link im Inhalt unterstreichen                        */
/* --------------------------------------------------------------------- */
/* Storefront (und andere) setzen `.hentry .entry-content a {              */
/* text-decoration: underline }`. Für einen Textlink im Fließtext ist das  */
/* richtig und bleibt unangetastet. Eine KACHEL ist aber als Ganzes ein    */
/* Link – dort bekämen Titel, Typ und Kennzahlen jeder einen Strich, und   */
/* die Karte wird unlesbar. Diese Regeln überstimmen das gezielt für       */
/* unsere Kachel- und Listenlinks; erreicht wird das über Element+Klasse   */
/* (höhere Spezifität), nicht über !important.                            */
/* Gemessen: Astra setzt `.ast-single-post .entry-content a` (zwei Klassen),
   Storefront `.hentry .entry-content a`. Unsere Regeln brauchen deshalb
   MINDESTENS zwei Klassen plus Elemente, sonst verlieren sie – ein Gleichstand
   wäre von der Ladereihenfolge abhängig und damit Zufall. */
ul.wmfp-mittel-grid li.wmfp-mittel > a,
nav.wmfp-blaettern-liste a.page-numbers,
.wmfp-seite ul.wmfp-statistik-liste li > a,
.wmfp-seite p.wmfp-zurueck-oben > a,
.wmfp-seite p.wmfp-kopf-art a,
.wmfp-seite nav.wmfp-zur-uebersicht > a,
.wmfp-seite figure.wmfp-kopf-bild a.wmfp-bild-gross {
	text-decoration: none;
}
/* Der Verweis auf die Einsatzart bleibt als Link erkennbar – beim Überfahren. */
.wmfp-seite p.wmfp-kopf-art a:hover,
.wmfp-seite p.wmfp-kopf-art a:focus-visible,
.wmfp-seite nav.wmfp-zur-uebersicht > a:hover,
.wmfp-seite nav.wmfp-zur-uebersicht > a:focus-visible {
	text-decoration: underline;
}

/* ===================================================================== */
/* Einsatzmittel-Kacheln (Detailseite + Übersicht, identisch)            */
/* ===================================================================== */

.wmfp-mittel-grid {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	/* Mindestbreite so, dass auch in schmalen Theme-Inhaltsbereichen (~315 px) noch
	   zwei Kacheln je Reihe passen. */
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
}
.wmfp-mittel {
	margin: 0;
}
.wmfp-mittel a {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.wmfp-mittel-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.4rem;
}
.wmfp-mittel-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Fehlt ein Bild: ruhige Fläche mit dem Kurzzeichen, gleiche Maße. */
.wmfp-mittel-thumb--leer {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	background: color-mix(in srgb, currentColor 6%, transparent);
}
.wmfp-mittel-thumb-kurz {
	font-weight: 700;
	font-size: 1.1em;
	opacity: 0.55;
}
/* Fester Textbereich, damit alle Kacheln im Raster gleich hoch sind. */
.wmfp-mittel-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 3.4em;
	margin-top: 0.4rem;
	line-height: 1.25;
}
.wmfp-mittel-kurz {
	min-width: 0;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wmfp-mittel-typ {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Lange Komposita (z. B. „Verkehrssicherungsanhänger") mit deutscher
	   Silbentrennung umbrechen; break-word als Rückfall ohne Trennmöglichkeit. */
	hyphens: auto;
	overflow-wrap: break-word;
	font-size: 0.85em;
	opacity: 0.7;
}
.wmfp-mittel-ausser {
	display: inline-block;
	margin-top: 0.3rem;
	padding: 0.05rem 0.5rem;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 999px;
	font-size: 0.75em;
	opacity: 0.75;
}

/* --------------------------------------------------------------------- */
/* Karten-Variante des Rasters – NUR in der Einsatzmittel-Übersicht.      */
/* Auf der Einsatz-Detailseite bleiben es kleine Kacheln: dort sind die   */
/* Einsatzmittel eine Fußnote, hier sind sie der Inhalt der Seite.        */
/* --------------------------------------------------------------------- */
.wmfp-mittel-grid--karten {
	/* Drei Karten in einem 953-px-Inhaltsbereich, zwei in einem 640er,
	   darunter eine über die volle Breite. */
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.9rem 1.4rem;
	margin-top: 0;
}
.wmfp-mittel-grid--karten .wmfp-mittel > a {
	display: grid;
	grid-template-rows: auto auto;
	gap: 0.7rem;
	border-radius: 0.45rem;
}
.wmfp-mittel-grid--karten .wmfp-mittel > a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.wmfp-mittel-grid--karten .wmfp-mittel-thumb {
	border-radius: 0.35rem;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}
.wmfp-mittel-grid--karten .wmfp-mittel-thumb-kurz {
	font-size: 1.5em;
	opacity: 1;
	color: color-mix(in srgb, currentColor 60%, transparent);
}
.wmfp-mittel-grid--karten .wmfp-mittel-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-height: 0;
	margin-top: 0;
	line-height: 1.3;
}
.wmfp-mittel-grid--karten .wmfp-mittel-kurz {
	font-size: 1.12em;
	letter-spacing: -0.01em;
	white-space: normal;
	overflow: visible;
	overflow-wrap: break-word;
}
.wmfp-mittel-grid--karten .wmfp-mittel > a:hover .wmfp-mittel-kurz,
.wmfp-mittel-grid--karten .wmfp-mittel > a:focus-visible .wmfp-mittel-kurz {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.wmfp-mittel-grid--karten .wmfp-mittel-typ {
	display: block;
	font-size: 0.94em;
	opacity: 1;
	color: color-mix(in srgb, currentColor 78%, transparent);
}
/* Kennzahlen: nur Angaben, die sich ohne Beschriftung erklären. */
.wmfp-mittel-kenn {
	margin-top: 0.2rem;
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, currentColor 62%, transparent);
}
.wmfp-mittel-kenn span + span::before {
	content: " · ";
}
.wmfp-mittel-grid--karten .wmfp-mittel-ausser {
	align-self: flex-start;
	margin-top: 0.25rem;
	border-radius: 2px;
	opacity: 1;
	color: color-mix(in srgb, currentColor 70%, transparent);
	border-color: color-mix(in srgb, currentColor 30%, transparent);
}
/* Außer Dienst: ohne Lesen erkennbar. */
.wmfp-mittel--ausser .wmfp-mittel-thumb img {
	filter: grayscale(1);
}

/* ===================================================================== */
/* Einsatzübersicht (Archiv/Block/Shortcode)                             */
/* ===================================================================== */

/* Filter: umbruchfähige Flex-Zeile. Bei viel Platz nebeneinander, bei wenig Platz
   brechen die Felder um und nehmen dank flex-grow die volle Breite ein – ganz
   ohne @container/@media.
   Bewusst zurückgenommen (kleinere Beschriftung, niedrigere Felder): Auf dem
   Telefon füllten drei große Auswahlfelder den halben ersten Bildschirm, bevor
   ein einziger Einsatz zu sehen war. Der Filter ist Werkzeug, nicht Hauptdarsteller.
   Die Bedienhöhe bleibt mit 2.3rem im komfortablen Bereich. */
.wmfp-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1.1rem;
}
.wmfp-filter-feld {
	display: flex;
	flex: 1 1 8.5em;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.78em;
}
.wmfp-filter-feld > span {
	color: color-mix(in srgb, currentColor 70%, transparent);
	letter-spacing: 0.02em;
}
.wmfp-filter-feld select {
	width: 100%;
	min-height: 2.3rem;
}
.wmfp-filter-btn {
	flex: 0 0 auto;
	min-height: 2.3rem;
}

/* Zurücksetzen: erscheint nur, wenn wirklich gefiltert ist. Bewusst leiser als
   „Filtern" – es ist der Rückweg, nicht die Hauptaktion. Das × ist Beiwerk, die
   Beschriftung traegt die Bedeutung (ein blosses × waere weder vorlesbar noch
   auf dem Telefon sicher zu treffen). */
.wmfp-filter-reset {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	min-height: 2.3rem;
	padding: 0 0.2rem;
	font-size: 0.82em;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	align-self: flex-end;
}
.wmfp-filter-reset:hover,
.wmfp-filter-reset:focus-visible {
	border-bottom-color: currentColor;
}
.wmfp-filter-reset-x {
	font-size: 1.35em;
	line-height: 1;
}

/* Benennt den Einsatzmittel-Filter, der als Verweis von einer Einsatzmittel-Seite
   kommt und kein eigenes Auswahlfeld hat. */
.wmfp-filter-hinweis {
	margin: -0.4rem 0 1rem;
	font-size: 0.85em;
	color: color-mix(in srgb, currentColor 78%, transparent);
}

/* Kennzahl + Legende: Anzahl fett, dahinter je vorkommender Einsatzart ein
   Farbblock, der VOLLE NAME, das Kuerzel in Klammern und die Zahl.
   Der volle Name muss sichtbar sein - die Legende ist die einzige Stelle, an der
   das Kuerzel der Angabenzeile aufgeloest wird. Auf Telefonen gibt es kein
   Ueberfahren mit der Maus, ein title-Attribut allein waere unerreichbar.
   Gedaempft wird immer nur auf EINER Ebene je Element (sonst multipliziert es
   sich) und nie unter 60 % - darunter reisst der Kontrast auf hellen Themes. */
.wmfp-kennzahlen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1.1rem;
	margin: 0 0 0.6rem;
}
.wmfp-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.05rem;
	font-size: 0.85em;
}
.wmfp-legende-art {
	white-space: nowrap;
}
.wmfp-legende-name {
	color: color-mix(in srgb, currentColor 78%, transparent);
}
.wmfp-legende-kuerzel {
	color: color-mix(in srgb, currentColor 62%, transparent);
}
.wmfp-legende-zahl {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Anteilsband: zeigt auf einen Blick, wovon der Zeitraum gepraegt war. Nutzt
   ausschliesslich die ohnehin erlaubten Einsatzart-Farben. */
.wmfp-anteile {
	display: flex;
	height: 3px;
	margin: 0 0 1.15rem;
	overflow: hidden;
	border-radius: 2px;
}
.wmfp-anteile > span {
	display: block;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* ---------------------------------------------------------------------------
 * Einsatzliste als ECHTE Tabelle, ZWEIZEILIG.
 *
 * AUFBAU: links die schmale Schiene aus Nummer und Datum, rechts der Einsatz -
 * Titel auf einer eigenen Zeile, darunter Einsatzart, Ort und Wehr.
 *
 * WARUM SO: Die Angaben unter dem Titel brechen von selbst um, sobald es eng
 * wird. Damit traegt die BASIS bei JEDER Breite allein - es braucht keine
 * Container-Abfrage, die auf schmalen Schirmen Spalten ausblendet (und deren
 * Ausfall Angaben verschwinden liesse). Zugleich bekommt der Titel die volle
 * Restbreite und die Zeilen werden gleich hoch: gemessen 0 von 29 ungleichen
 * Zeilen gegenueber 13 von 29 bei einer sechsspaltigen Fassung.
 *
 * EINE Tabelle ueber ALLE Jahre, je Jahr eine Zeilengruppe: getrennte Tabellen
 * berechnen ihre Spaltenbreiten unabhaengig - die Schiene wuerde am
 * Jahreswechsel springen. Der Scroll-Wrapper bleibt als Rueckfall.
 * --------------------------------------------------------------------------- */
.wmfp-tabelle-wrap {
	max-width: 100%;
	overflow-x: auto;
	/* Verhindert, dass ein waagrechtes Wischen in der Tabelle die Zurueck-Geste
	   des Browsers ausloest. */
	overscroll-behavior-x: contain;
	/* Bezugsrahmen fuer die Abstands-Aufwertung weiter unten. Sie misst die
	   INHALTSBREITE, nicht die Fensterbreite - ein schmaler Inhaltsbereich in
	   einem breiten Fenster (Theme mit Seitenleiste) wird so richtig behandelt. */
	container-type: inline-size;
	container-name: wmfp-liste;
}
.wmfp-e-tabelle {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 0.97em;
	/* EIGENE Zeilenhoehe. Themes bringen sehr unterschiedliche mit (etwa 1.4 bis
	   1.9); Storefront zum Beispiel 1.62. In einer einzeiligen Liste faellt das
	   kaum auf - im Zweizeiler zahlt man sie DOPPELT, und sie entscheidet damit
	   ueber die halbe Listenhoehe. Zeilenabstand ist Abstand und damit unsere
	   Zustaendigkeit; Schriftart und Schriftgroesse bleiben Sache des Themes. */
	line-height: 1.3;
}
.wmfp-e-tabelle th,
.wmfp-e-tabelle td {
	padding: 0.4rem 1.1rem 0.4rem 0;
	text-align: left;
	vertical-align: baseline;
}
.wmfp-e-tabelle th:last-child,
.wmfp-e-tabelle td:last-child {
	padding-right: 0;
}

/* Gedaempft wird ueber die FARBE, nicht ueber opacity: opacity wuerde in der
   Angabenzeile auch den Einsatzart-Farbblock und den Fokusring mitdaempfen -
   also genau die beiden Dinge, die ihre Deckkraft behalten muessen. */
.wmfp-e-tabelle thead th {
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 62%, transparent);
	white-space: nowrap;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 26%, transparent);
}

/* Jahres-Marke im Tabellenfluss statt als eigene Ueberschrift ueber einer
   eigenen Tabelle - so bleiben die Spaltenbreiten ueber alle Jahre dieselben. */
.wmfp-jahr-zeile th {
	padding: 1.35rem 0 0.4rem;
	font-size: 0.84em;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: color-mix(in srgb, currentColor 72%, transparent);
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.wmfp-e-tabelle tbody:first-of-type .wmfp-jahr-zeile th {
	padding-top: 1rem;
}

/* Feine Trennlinien statt Zebrastreifen: beides uebereinander macht die Liste
   unruhig, und Zebrabaender unterschiedlicher Hoehe wirken unaufgeraeumt. */
.wmfp-e-tabelle tbody td {
	border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
/* Zeilenband nur, wo es wirklich ein Zeigegeraet gibt - auf dem Telefon bliebe
   es nach dem Antippen haengen. Tastaturnutzer bekommen dasselbe Band. */
@media (hover: hover) {
	.wmfp-e-tabelle tbody tr:not(.wmfp-jahr-zeile):hover td {
		background: color-mix(in srgb, currentColor 5%, transparent);
	}
}
.wmfp-e-tabelle tbody tr:focus-within td {
	background: color-mix(in srgb, currentColor 5%, transparent);
}

/* Die Schiene: Nummer und Datum. Die Nummer ist Archivangabe und tritt zurueck.
   Sie darf an der im Markup vorbereiteten Stelle umbrechen, damit ein einzelnes
   "52/2025" die Spalte nicht in allen Zeilen aufblaeht. */
.wmfp-e-tabelle .wmfp-e-nr {
	font-size: 0.82em;
	color: color-mix(in srgb, currentColor 62%, transparent);
	font-variant-numeric: tabular-nums;
}
.wmfp-e-tabelle .wmfp-e-datum {
	font-size: 0.92em;
	color: color-mix(in srgb, currentColor 80%, transparent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Der Einsatz: Titel, darunter die Angabenzeile. */
.wmfp-e-tabelle .wmfp-e-inhalt {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}
.wmfp-e-tabelle .wmfp-e-titel {
	font-weight: 600;
	color: inherit;
	/* Titel wird NICHT gekuerzt: bei wenig Platz umbricht er auf weitere Zeilen.
	   Lange Komposita brechen mit deutscher Silbentrennung. */
	overflow-wrap: break-word;
	hyphens: auto;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}
.wmfp-e-tabelle .wmfp-e-titel:hover,
.wmfp-e-tabelle .wmfp-e-titel:focus-visible {
	text-decoration-color: currentColor;
}
/* Die Angabenzeile bewusst nur wenig kleiner als der Titel und nicht zu blass:
   sie traegt Einsatzart, Ort und Wehr und muss ohne Anstrengung lesbar bleiben. */
.wmfp-e-tabelle .wmfp-e-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 1rem;
	font-size: 0.92em;
}
.wmfp-e-tabelle .wmfp-e-art {
	white-space: nowrap;
}
.wmfp-e-tabelle .wmfp-art-kuerzel {
	font-weight: 600;
	font-size: 0.96em;
	letter-spacing: 0.03em;
}
.wmfp-e-tabelle .wmfp-e-art-leer {
	color: color-mix(in srgb, currentColor 45%, transparent);
}
.wmfp-e-tabelle .wmfp-e-ort {
	color: color-mix(in srgb, currentColor 82%, transparent);
	overflow-wrap: break-word;
	hyphens: auto;
}
.wmfp-e-tabelle .wmfp-e-wehr {
	font-size: 0.94em;
	color: color-mix(in srgb, currentColor 74%, transparent);
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* Auf dem Telefon ist jeder Millimeter Titelbreite wertvoller als der
   grosszuegige Spaltenabstand. Reine Aufwertung: faellt sie aus, bleibt der
   Aufbau vollstaendig - es verschwindet keine Angabe. */
@container wmfp-liste (max-width: 600px) {
	.wmfp-e-tabelle th,
	.wmfp-e-tabelle td {
		padding-right: 0.55rem;
	}
	.wmfp-e-tabelle .wmfp-e-datum {
		font-size: 0.86em;
	}
}

/* Blätter-Navigation (paginate_links). */
.wmfp-blaettern-liste {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.wmfp-blaettern-liste .page-numbers {
	padding: 0.3rem 0.6rem;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 0.3rem;
	text-decoration: none;
	color: inherit;
}
.wmfp-blaettern-liste .current {
	border-color: currentColor;
	font-weight: 700;
}
.wmfp-leer {
	opacity: 0.8;
}

/* ===================================================================== */
/* Einsatz-Detailseite (Anhänge zum the_content)                         */
/* ===================================================================== */

.wmfp-mittel-block,
.wmfp-einheiten-block,
.wmfp-galerie-block,
.wmfp-presse-block,
.wmfp-technik-block,
.wmfp-beladung-block,
.wmfp-statistik-block {
	margin-top: 2.6rem;
}

/* Abschnittsüberschriften unserer Datenblöcke: kleine Versalzeile mit
   auslaufender Linie – wie die Kategorie-Überschriften der Übersicht.
   Begründung für den Eingriff in die Schriftgröße: Das sind keine Kapitel des
   Textes, sondern Beschriftungen von Datenblöcken. In Theme-Größe konkurrieren
   sie mit dem Titel der Seite. Schriftart und Farbe bleiben unangetastet – die
   Größe ist em-relativ, die Farbe kommt aus currentColor. */
.wmfp-mittel-block > h2,
.wmfp-einheiten-block > h2,
.wmfp-galerie-block > h2,
.wmfp-presse-block > h2,
.wmfp-technik-block > h2,
.wmfp-beladung-block > h2,
.wmfp-statistik-block > h2 {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 0.85rem;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
	color: color-mix(in srgb, currentColor 68%, transparent);
}
.wmfp-mittel-block > h2::after,
.wmfp-einheiten-block > h2::after,
.wmfp-galerie-block > h2::after,
.wmfp-presse-block > h2::after,
.wmfp-technik-block > h2::after,
.wmfp-beladung-block > h2::after,
.wmfp-statistik-block > h2::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: color-mix(in srgb, currentColor 18%, transparent);
}

/* Weitere Einheiten als ruhige Etiketten (kein Link, nur feiner Rahmen). */
.wmfp-einheiten {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
}
.wmfp-einheiten li {
	padding: 0.15rem 0.7rem;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 999px;
	font-size: 0.9em;
}

/* Presse: Liste, Domain kleiner und gedämpft. */
.wmfp-presse {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}
.wmfp-presse li {
	padding: 0.25rem 0;
}
.wmfp-presse-domain {
	font-size: 0.85em;
	opacity: 0.65;
}

.wmfp-galerie-nachweis {
	margin: 0.5rem 0 0;
	font-size: 0.85em;
	opacity: 0.7;
}

/* Verweis zurück zur Übersicht (statt konkurrierender Prev/Next-Navigation). */
.wmfp-zur-uebersicht {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

/* ===================================================================== */
/* Einsatzmittel-Detailseite                                             */
/* ===================================================================== */

/* Bezugsrahmen für die Breitenabfragen der Einzelseite. Absichtlich der
   INHALTSBEREICH und nicht das Fenster: Twenty Twenty-Five gibt bei 1280 px
   Fensterbreite nur 645 px Inhalt – eine Fensterabfrage stellte Foto und
   Angaben dort nebeneinander, wo dafür kein Platz ist. Fällt die Abfrage aus
   (alte Browser), bleibt alles untereinander; die Basis trägt allein. */
.wmfp-seite {
	container-type: inline-size;
	container-name: wmfp-seite;
}

/* Zurück zur Übersicht, ganz oben. */
.wmfp-zurueck-oben {
	margin: 0 0 1.1rem;
	font-size: 0.86em;
}
.wmfp-zurueck-oben a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25rem 0.6rem 0.25rem 0.45rem;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
}
.wmfp-zurueck-oben a:hover,
.wmfp-zurueck-oben a:focus-visible {
	border-color: currentColor;
}
.wmfp-zurueck-pfeil {
	font-size: 1.1em;
	line-height: 1;
}

/* Kopfbereich: Farbregel in der Farbe der Wehr, darunter der Kicker. */
.wmfp-kopf {
	margin: 0 0 2rem;
	padding-top: 0.85rem;
	border-top: 4px solid currentColor;
}
.wmfp-kopf-art {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.2rem 0.9rem;
	margin: 0 0 1.25rem;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.wmfp-kopf-art a {
	color: inherit;
	text-decoration: none;
}
.wmfp-kopf-art a:hover,
.wmfp-kopf-art a:focus-visible {
	text-decoration: underline;
}
.wmfp-kopf-nr {
	margin-left: auto;
	font-weight: 400;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: color-mix(in srgb, currentColor 62%, transparent);
}

/* Foto links, Angaben rechts – erst wenn wirklich Platz ist. Die Basis (alles
   untereinander) trägt allein; das Grid ist eine Aufwertung. */
.wmfp-kopf-bild {
	margin: 0 0 1.25rem;
}
.wmfp-kopf-bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.4rem;
}
.wmfp-kopf-bild a {
	display: block;
}
.wmfp-kopf-angaben {
	min-width: 0;
}
@container wmfp-seite (min-width: 38rem) {
	.wmfp-kopf--mitbild {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 2rem;
		align-items: start;
	}
	.wmfp-kopf--mitbild .wmfp-kopf-art {
		grid-column: 1 / -1;
	}
	.wmfp-kopf--mitbild .wmfp-kopf-bild {
		margin: 0;
	}
}

/* Bildunterschrift (Bildnachweis) unter dem Kopfbild. */
.wmfp-kopf-bild figcaption {
	margin-top: 0.4rem;
	font-size: 0.82em;
	color: color-mix(in srgb, currentColor 65%, transparent);
}

/* --------------------------------------------------------------------- */
/* Einsatzbericht: Zeitstreifen                                           */
/* --------------------------------------------------------------------- */
/* Datum, Alarmzeit und Dauer sind die drei Angaben, nach denen zuerst gesucht
   wird. Sie stehen deshalb mit Größensprung oben – Wert groß, Beschriftung
   klein darunter – und in einem feinen Rahmen. Die übrigen Fakten folgen
   ruhiger darunter. */
.wmfp-zeiten {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem 2.2rem;
	margin: 0 0 1.1rem;
	padding: 0;
}
.wmfp-zeiten--rahmen {
	gap: 0.9rem 2rem;
	padding: 0.8rem 1.1rem 0.85rem;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 4px;
}
.wmfp-zeit {
	display: flex;
	flex-direction: column-reverse; /* Wert oben, Beschriftung darunter. */
	gap: 0.1rem;
}
.wmfp-zeit dt {
	margin: 0;
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 62%, transparent);
}
.wmfp-zeit dd {
	margin: 0;
	font-size: 1.42em;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* Im Meldungskopf laufen die übrigen Fakten ohne Trennlinien mit – der
   Zeitstreifen darüber setzt bereits eine Kante. */
.wmfp-kopf--meldung .wmfp-fakten {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.wmfp-kopf--meldung .wmfp-fakt > dt,
.wmfp-kopf--meldung .wmfp-fakt > dd {
	padding: 0.22rem 0;
	border-top: 0;
}

/* Der Typ ist die größte Angabe neben dem Foto: „40/1" sagt nicht, was das ist. */
.wmfp-typ {
	margin: 0 0 0.9rem;
	font-size: 1.42em;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* Kenndaten: Werte groß, Beschriftungen klein und versal. */
.wmfp-kenn {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 2rem;
	margin: 0 0 1.1rem;
	padding: 0.8rem 1.1rem 0.85rem;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 4px;
}
.wmfp-kenn-wert {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.1rem;
}
.wmfp-kenn-wert dt {
	margin: 0;
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 62%, transparent);
}
.wmfp-kenn-wert dd {
	margin: 0;
	font-size: 1.42em;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* Technische Daten: bei Platz zwei Angaben je Zeile. Bewusst nicht drei –
   Beschriftungen wie „Zul. Gesamtgewicht" brauchen Raum. Dieselbe Schwelle wie
   der Kopfbereich: Wo Foto und Angaben noch untereinander stehen, ist auch für
   zwei Spalten Fakten kein Platz (gemessen: 556 px reichen nicht). */
@container wmfp-seite (min-width: 38rem) {
	.wmfp-fakten--spalten {
		grid-template-columns: repeat(2, auto minmax(0, 1fr));
		column-gap: 2.2rem;
	}
}
/* Lange Beschriftungen dürfen umbrechen: Die auto-Spalte nimmt sonst nur so viel
   Platz, wie das Theme übrig lässt – bei großer Grundschrift wäre das ein
   Überlauf statt eines Umbruchs. */
.wmfp-fakten--spalten > .wmfp-fakt > dt {
	white-space: normal;
}

/* Außer-Dienst-Hinweis als ruhige Box, keine Warnfarbe. */
.wmfp-ausser-dienst {
	margin: 0 0 1.25rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 0.4rem;
	background: color-mix(in srgb, currentColor 5%, transparent);
}

/* Beladung: kurze Begriffe – einspaltig über die volle Breite verschenkt viel
   Platz. Spalten richten sich nach der Breite, ohne @container. */
.wmfp-beladung {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.25rem 1.5rem;
}
.wmfp-beladung li {
	position: relative;
	padding: 0.22rem 0 0.22rem 1.1em;
	border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
}
.wmfp-beladung li::before {
	content: "·";
	position: absolute;
	left: 0.25em;
	color: color-mix(in srgb, currentColor 60%, transparent);
}

/* Einsatzstatistik: große Zahl hervorgehoben, darunter die letzten Einsätze im
   selben Zeilenmuster wie die Übersicht. */
.wmfp-statistik-kopf {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15rem 0.7rem;
	margin: 0.5rem 0 1rem;
}
.wmfp-statistik-zahl {
	font-size: 2.4em;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.wmfp-statistik-label {
	opacity: 0.8;
}
.wmfp-statistik-liste {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}
.wmfp-statistik-liste li + li {
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.wmfp-statistik-liste a {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr);
	gap: 0.3rem 1rem;
	align-items: baseline;
	padding: 0.4rem 0.1rem;
	text-decoration: none;
	color: inherit;
}
.wmfp-statistik-liste .wmfp-e-datum {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}
.wmfp-statistik-liste .wmfp-e-titel {
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.wmfp-statistik-alle {
	margin-top: 0.75rem;
}

/* ===================================================================== */
/* Einsatzmittel-Übersicht                                               */
/* ===================================================================== */

/* Zeile ganz oben: was diese Übersicht umfasst. */
.wmfp-mittel-zaehler {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.8rem;
	margin: 0 0 1.9rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	font-size: 0.86em;
	color: color-mix(in srgb, currentColor 72%, transparent);
}
.wmfp-mittel-zaehler b {
	font-weight: 600;
	color: currentColor;
	font-variant-numeric: tabular-nums;
}

/* Wehr-Überschrift mit dem Farbblock der Wehr – dieselbe Sprache wie auf der
   Einzelseite, wo die Farbregel über dem Kopf steht. */
.wmfp-mittel-wehr {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin: 2.9rem 0 0.2rem;
	font-size: 1.34em;
	font-weight: 700;
	line-height: 1.25;
}
.wmfp-mittel-uebersicht > .wmfp-mittel-wehr:first-of-type {
	margin-top: 0;
}

/* Kategorie: kleine Versalzeile mit Anzahl und auslaufender Linie – wie die
   Abschnittsüberschriften der Einzelseite. */
.wmfp-mittel-kat {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 2rem 0 0.85rem;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
	color: color-mix(in srgb, currentColor 68%, transparent);
}
.wmfp-mittel-kat-zahl {
	font-weight: 400;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
.wmfp-mittel-kat::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: color-mix(in srgb, currentColor 18%, transparent);
}

.wmfp-ausser-toggle {
	margin: 2.4rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	font-size: 0.88em;
}

/* ===================================================================== */
/* Barrierefreiheit: sichtbarer Fokus über die Theme-Textfarbe           */
/* ===================================================================== */

.wmfp-uebersicht a:focus-visible,
.wmfp-mittel a:focus-visible,
.wmfp-statistik-liste a:focus-visible,
.wmfp-presse a:focus-visible,
.wmfp-zur-uebersicht a:focus-visible,
.wmfp-blaettern-liste a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ===================================================================== */
/* Druckansicht der Detailseiten: Bedien-/Navigationselemente weg,       */
/* Blöcke nicht umbrechen, fachliche Farben erhalten.                    */
/* ===================================================================== */

@media print {
	.wmfp-filter,
	.wmfp-blaettern-liste,
	.wmfp-zur-uebersicht,
	.wmfp-ausser-toggle,
	.wmfp-statistik-alle {
		display: none !important;
	}
	.wmfp-mittel-block,
	.wmfp-mittel,
	.wmfp-fakten,
	.wmfp-fakt,
	.wmfp-statistik-block,
	.wmfp-galerie-block {
		break-inside: avoid;
	}
	.wmfp-kopf-bild {
		max-width: 100%;
	}
	/* Im Druck nicht scrollen, sondern die volle Tabelle zeigen. */
	.wmfp-tabelle-wrap {
		overflow-x: visible;
	}
	.wmfp-e-tabelle tbody tr {
		break-inside: avoid;
	}
	.wmfp-art-dot,
	.wmfp-mittel-thumb img {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}