/*
 * Feuerwehr 112 – Einsatzmanager
 *
 * Gestaltung der Blöcke des Plugins „Einsatzmanager“ (Klassen „em-…“, beschrieben in der
 * README des Plugins). Wird nur geladen, wenn das Plugin passt (inc/einsatzmanager.php);
 * das Plugin lässt sein eigenes CSS dann weg. Seite und Editor laden dieselbe Datei.
 *
 * Gemeinsame Grundformen stehen bei den Bausteinen, damit sie gleich bleiben:
 * Farbkontext und Schriften „Kennung“, „Überzeile“, „Einleitung“ und „Akzent“ in base.css,
 * Karte „Meldung“, „Kennzahl“ und die Fahrzeug-Bausteine (Etikett, Zeichen, Datenzeile,
 * Datenblatt) in bausteine.css (Abschnitte 7, 2 und 9).
 *
 * Inhalt
 * 1. Kennzeichen: Stichwort und Übung
 * 2. Letzter Einsatz und Einsatzdaten
 * 3. Einsatzzahl
 * 4. Einsatzliste
 * 5. Einsatzstatistik
 * 6. Fahrzeuge (Karten)
 * 7. Fahrzeug-Steckbrief
 * 8. Technische Daten
 */

/* ==========================================================================
   1. Kennzeichen
   Stichwort eckig mit Rahmen in der Farbe der Grundschadensart (Design A). Die
   acht Farben des Plugins werden auf die Palette abgebildet: Rot → Feuerrot;
   Orange, Gelb → Bernstein; Blau, Türkis, Lila → Blau; Grün, Grau → Grau.
   Die Farben kommen aus dem Farbkontext (base.css) – auf dunklen Flächen die
   hellen Fassungen. Übungen sind keine Einsätze und tragen ein gefülltes
   Kennzeichen „Übung“ (bleibt überall Bernstein mit weißer Schrift, 6,33 : 1).
   ========================================================================== */

/* Kurze Stichwörter bleiben einzeilig; ein langes (freier Zusatz) bricht im Rahmen um,
   statt über die Karte zu ragen. */
.em-stichwort,
.em-uebung {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	padding: 0.125rem 0.5rem;
	border: 1.5px solid var(--em-farbe, var(--f112-muted));
	color: var(--em-farbe, var(--f112-muted));
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	overflow-wrap: anywhere;
	hyphens: manual;
}

.em-stichwort--red {
	--em-farbe: var(--f112-accent-text);
}

.em-stichwort--orange,
.em-stichwort--yellow {
	--em-farbe: var(--f112-amber-text);
}

.em-stichwort--blue,
.em-stichwort--teal,
.em-stichwort--purple {
	--em-farbe: var(--f112-blue-text);
}

.em-uebung {
	--em-farbe: var(--wp--preset--color--amber);
	background-color: var(--em-farbe);
	color: var(--wp--preset--color--surface);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ==========================================================================
   2. Letzter Einsatz und Einsatzdaten
   Karte wie die Meldung (bausteine.css, Abschnitt 7): Kopfzeile „Letzter Alarm“
   mit Nummer, Datum und Uhrzeit groß, Stichwort und Ort, Fußzeile „Alle Einsätze“
   mit Pfeil. Die ganze Karte ist anklickbar (der Link deckt sie ab) – ist ein
   Beitrag verknüpft, führt sie zum Beitrag und nur „Alle Einsätze“ zur Übersicht.
   Dieselbe Karte zeigt der Block „Einsatzdaten“ unter Beiträgen.
   ========================================================================== */

.em-letzter-einsatz {
	position: relative;
}

/* Farbe ausdrücklich: Im Cover (Einstieg) erbt sonst jeder Absatz die Textfarbe (WordPress). */
.em-letzter-einsatz > .em-letzter-einsatz__kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	color: var(--f112-muted);
}

.em-letzter-einsatz > .em-letzter-einsatz__daten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-block-start: 0.875rem;
}

.em-letzter-einsatz__ort {
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--f112-text-2);
}

/* Fußzeile wie der Pfeil-Link (bausteine.css, Abschnitt 10); ebenso „Zum Fahrzeug“ im Steckbrief. */
.em-letzter-einsatz__mehr > a,
.em-steckbrief__mehr > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	min-height: 2.75rem;
	color: var(--f112-link);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

.em-letzter-einsatz__mehr > a::after,
.em-steckbrief__mehr > a::after {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	-webkit-mask: var(--f112-pfeil) center / contain no-repeat;
	mask: var(--f112-pfeil) center / contain no-repeat;
	transition: transform 0.15s ease;
}

/* Klickfläche über die ganze Karte: ohne verknüpften Beitrag der Link „Alle Einsätze“ … */
.em-letzter-einsatz:not(.em-letzter-einsatz--beitrag) .em-letzter-einsatz__mehr > a::before,
.em-letzter-einsatz__link::before {
	content: "";
	position: absolute;
	inset: 0;
}

.em-letzter-einsatz:not(.em-letzter-einsatz--beitrag):hover .em-letzter-einsatz__mehr > a,
.em-letzter-einsatz__mehr > a:hover {
	color: var(--f112-link-hover);
	text-decoration: none;
}

.em-letzter-einsatz:not(.em-letzter-einsatz--beitrag):hover .em-letzter-einsatz__mehr > a::after,
.em-letzter-einsatz__mehr > a:hover::after {
	transform: translateX(0.1875rem);
}

/* … mit Beitrag der Link auf Datum und Uhrzeit (führt zum Beitrag); „Alle Einsätze“ liegt darüber
   und führt weiter zur Übersicht. */
:root .em-letzter-einsatz__link {
	color: inherit;
	text-decoration: none;
}

.em-letzter-einsatz--beitrag .em-letzter-einsatz__mehr > a {
	position: relative;
	z-index: 1;
}

.em-letzter-einsatz--beitrag:hover:not(:has(.em-letzter-einsatz__mehr:hover)) .em-letzter-einsatz__link {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

/* Block „Einsatzdaten“ (unter Beiträgen): Karte in der Breite der Meldung, bündig links;
   Abstand zum Text wie vor dem Fuß des Beitrags. */
:root .wp-block-einsatzmanager-einsatzdaten {
	margin-block-start: var(--wp--preset--spacing--60);
}

.em-einsatzdaten > .em-letzter-einsatz {
	max-width: 22.5rem;
}

/* ==========================================================================
   3. Einsatzzahl
   Als große Zahl wie die Kennzahl (bausteine.css, Abschnitt 2) – in den
   Kennzahlen ersetzt sie den Absatz „Kennzahl“. Als Satz gewöhnlicher Text mit
   fett gesetzter Zahl.
   ========================================================================== */

.em-einsatzzahl__zahl {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. Einsatzliste
   Depesche wie in Design A: 2-px-Linie oben, Spaltenköpfe in Daten-Schrift,
   Haarlinien zwischen den Einträgen, Nummer und Zeitpunkt in Daten-Schrift.
   Die Liste richtet sich nach ihrer eigenen Breite (Container-Abfrage), nicht nach
   dem Bildschirm: ab 36 rem eine Tabelle, schmaler eine Karte je Eintrag (oben
   Nummer · Zeitpunkt, darunter Stichwort und Ort). Jahre und Einträge klappen auf
   wie Details/Akkordeon (inhalte.css, Abschnitt 3): „+“ rechts, offen „−“.
   Elemente, die das Filter-Skript mit „hidden“ ausblendet (Filter, Eintrag,
   Tabelle, Hinweis), bekommen hier kein „display“.
   ========================================================================== */

.em-einsatzliste {
	container: em-liste / inline-size;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* Nach einer Überschrift etwas mehr Luft (sonst wirkt die 2-px-Linie wie deren Unterstreichung).
   Die Block-Klasse trägt auf der Seite das Element selbst, im Editor der äußere Rahmen. Der Block
   „Fahrzeug“ hat die Linie nur in der Ansicht „Technische Daten“. */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6) + :is(.wp-block-einsatzmanager-einsatzliste, .wp-block-einsatzmanager-einsatzstatistik, .em-fahrzeugdaten, .wp-block-einsatzmanager-fahrzeug:has(.em-fahrzeugdaten)) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Filter „Alle / Einsätze / Übungen“ wie Kontur-Buttons; gewählt gefüllt. */
.em-einsatzliste__filter:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: var(--wp--preset--spacing--40);
}

.em-einsatzliste__filterknopf {
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1.5px solid var(--f112-btn-outline);
	border-radius: var(--wp--custom--radius--s);
	background-color: transparent;
	color: var(--f112-btn-outline);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.em-einsatzliste__filterknopf:hover,
.em-einsatzliste__filterknopf[aria-pressed="true"] {
	background-color: var(--f112-btn-outline);
	color: var(--f112-btn-outline-hover-text);
}

/* Kontrastmodus: Die Füllung des gewählten Filters überschreibt Windows – dort in Markierungsfarbe. */
@media (forced-colors: active) {
	.em-einsatzliste__filterknopf[aria-pressed="true"] {
		forced-color-adjust: none;
		border-color: Highlight;
		background-color: Highlight;
		color: HighlightText;
	}
}

/* Jahr: Jahreszahl groß, daneben die Summe; zugeklappt mit Haarlinie darunter. */
.em-einsatzliste__jahr:not([open]) {
	border-block-end: 1px solid var(--f112-line);
}

.em-einsatzliste__jahr[open] {
	padding-block-end: var(--wp--preset--spacing--50);
}

.em-einsatzliste__jahrkopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	min-height: 3rem;
	padding-block: 1rem;
	cursor: pointer;
	list-style: none;
}

.em-einsatzliste__jahrkopf::-webkit-details-marker,
.em-eintrag__zeile::-webkit-details-marker {
	display: none;
}

.em-einsatzliste__jahreszahl {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1;
	color: var(--f112-text);
}

.em-einsatzliste__summe {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--f112-muted);
}

.em-einsatzliste__jahrkopf::after,
.em-eintrag__mehr::after {
	content: "+";
	flex: none;
	margin-inline-start: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--f112-accent-text);
}

.em-einsatzliste__jahr[open] > .em-einsatzliste__jahrkopf::after,
.em-eintrag__details[open] > .em-eintrag__zeile .em-eintrag__mehr::after {
	content: "−";
}

/* Nur mit Maus – auf dem Handy bliebe die Linie nach dem Antippen stehen (wie bei Details, inhalte.css). */
@media (hover: hover) {
	.em-einsatzliste__jahrkopf:hover .em-einsatzliste__jahreszahl {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.18em;
	}
}

/* Tabelle */
.em-einsatzliste__tabelle {
	--em-mehr: 0px;
	border-block-start: 2px solid var(--f112-rule);
}

.em-einsatzliste__tabelle:has(.em-eintrag__mehr) {
	--em-mehr: 1.5rem;
}

.em-einsatzliste__kopfzeile {
	display: none;
}

:root .em-einsatzliste__eintraege {
	margin: 0;
	padding: 0;
	list-style: none;
}

.em-eintrag {
	margin: 0;
	border-block-end: 1px solid var(--f112-line);
}

/* Karte (schmal): Kopf in Daten-Schrift, darunter Stichwort und Ort; „+“ rechts. */
.em-eintrag__zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.375rem 1rem;
	padding-block: 0.875rem;
}

.em-eintrag__kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--f112-muted);
}

.em-eintrag__nr::after {
	content: "·";
	margin-inline-start: 0.5em;
}

.em-eintrag--uebung .em-eintrag__nr,
.em-eintrag__daten .em-eintrag__ohne {
	display: none;
}

.em-eintrag__daten {
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.75rem;
	min-width: 0;
}

.em-eintrag__stichwort {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	min-width: 0;
}

.em-eintrag__ort {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--f112-text);
}

.em-eintrag__mehr {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--f112-muted);
}

/* Bezeichnung („Bericht · Bild“) erst ab 44 rem sichtbar, sonst nur für Screenreader. */
.em-eintrag__mehr-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.em-eintrag__details > .em-eintrag__zeile {
	cursor: pointer;
	list-style: none;
}

@media (hover: hover) {
	.em-eintrag__details > .em-eintrag__zeile:hover .em-eintrag__mehr {
		color: var(--f112-text);
	}

	.em-eintrag__details > .em-eintrag__zeile:hover .em-eintrag__mehr-text {
		text-decoration: underline;
		text-underline-offset: 0.18em;
	}
}

/* Aufgeklappt: Bild, Bericht, Fahrzeuge */
.em-eintrag__inhalt {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--40);
}

.em-eintrag__bild {
	max-width: 24rem;
	margin: 0;
}

.em-eintrag__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--s);
}

.em-eintrag__bericht {
	max-width: 42rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--f112-text-2);
}

.em-eintrag__bericht > * {
	margin-block: 0;
}

.em-eintrag__bericht > * + * {
	margin-block-start: 0.75em;
}

.em-eintrag__fahrzeuge,
.em-eintrag__beitrag {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--f112-text-2);
}

.em-eintrag__label {
	margin-inline-end: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--f112-muted);
}

.em-eintrag__trenner {
	color: var(--f112-muted);
}

/* Nicht aufklappbare Liste: Ein Eintrag mit Beitrag führt als ganze Zeile zum Beitrag –
   Pfeil statt „+“. */
:root .em-eintrag__zeile--link,
:root .em-eintrag__zeile--link:hover {
	color: inherit;
	text-decoration: none;
}

.em-eintrag__zeile--link:hover .em-eintrag__ort {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.em-eintrag__zeile--link:hover .em-eintrag__mehr {
	color: var(--f112-text);
}

.em-eintrag__mehr--link::after {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--f112-accent-text);
	-webkit-mask: var(--f112-pfeil) center / contain no-repeat;
	mask: var(--f112-pfeil) center / contain no-repeat;
	transition: transform 0.15s ease;
}

.em-eintrag__zeile--link:hover .em-eintrag__mehr--link::after {
	transform: translateX(0.1875rem);
}

.em-einsatzliste__keine {
	margin: 0;
	padding-block: 1rem;
	color: var(--f112-muted);
}

/* Tabelle (ab 36 rem): feste Spalten, damit Zeilen und Kopfzeile bündig sind. */
@container em-liste (min-width: 36rem) {
	.em-einsatzliste__kopfzeile,
	.em-eintrag__zeile {
		display: grid;
		grid-template-columns: 2.5rem 11.25rem minmax(0, 1fr) minmax(0, 1.2fr) var(--em-mehr);
		align-items: baseline;
		column-gap: 1rem;
	}

	.em-einsatzliste__kopfzeile {
		padding-block: 0.75rem;
		border-block-end: 1px solid var(--f112-line);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 500;
		letter-spacing: 0.12em;
		line-height: 1.4;
		text-transform: uppercase;
		color: var(--f112-muted);
	}

	.em-eintrag__zeile {
		padding-block: 1rem;
	}

	.em-eintrag__kopf,
	.em-eintrag__daten {
		display: contents;
	}

	.em-eintrag__nr::after {
		content: none;
	}

	.em-eintrag--uebung .em-eintrag__nr,
	.em-eintrag__daten .em-eintrag__ohne {
		display: inline;
	}

	.em-eintrag__nr,
	.em-eintrag__zeit {
		font-size: var(--wp--preset--font-size--small);
	}

	.em-eintrag__zeit {
		white-space: nowrap;
		color: var(--f112-text);
	}

	.em-eintrag__ohne {
		color: var(--f112-muted);
	}

	.em-eintrag__mehr {
		grid-column: auto;
		grid-row: auto;
		justify-content: flex-end;
		align-self: center;
	}

	.em-eintrag__inhalt {
		padding-inline-start: 3.5rem;
	}
}

@container em-liste (min-width: 44rem) {
	.em-einsatzliste__tabelle:has(.em-eintrag__mehr) {
		--em-mehr: 8.5rem;
	}

	.em-eintrag__mehr-text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		text-align: end;
	}

	/* Mit Bild: Bild links (höchstens 16 rem), Bericht daneben, Fahrzeuge darunter. */
	.em-eintrag__details--bild .em-eintrag__inhalt {
		grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
		align-items: start;
	}
}

/* ==========================================================================
   5. Einsatzstatistik
   Balken mit Zahlen: links die Bezeichnung (Stichwort-Kennzeichen bzw. Jahr),
   Mitte der Balken, rechts die Zahl in der Titelschrift. Eine Farbe für alle
   Balken (Rot des Farbkontexts, mindestens 3 : 1 zur Fläche) – die Farbe der
   Grundschadensart trägt nur das Kennzeichen. Linien wie in der Einsatzliste.
   ========================================================================== */

:root .em-statistik__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 2px solid var(--f112-rule);
}

.em-statistik__zeile {
	display: grid;
	grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) 3rem;
	align-items: center;
	column-gap: 1rem;
	min-height: 3.25rem;
	margin: 0;
	padding-block: 0.5rem;
	border-block-end: 1px solid var(--f112-line);
}

.em-statistik__name {
	min-width: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--f112-text);
}

.em-statistik__hinweis {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--f112-muted);
}

.em-statistik__ohne {
	font-family: var(--wp--preset--font-family--body);
	color: var(--f112-muted);
}

.em-statistik__balken {
	display: block;
	height: 0.75rem;
}

.em-statistik__fuellung {
	display: block;
	width: var(--em-anteil, 0%);
	height: 100%;
	border-radius: 0 var(--wp--custom--radius--s) var(--wp--custom--radius--s) 0;
	background-color: var(--f112-accent-text);
}

.em-statistik__wert {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1;
	text-align: end;
	font-variant-numeric: tabular-nums;
	color: var(--f112-text);
}

.em-statistik__summe,
.em-statistik__keine {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--f112-muted);
}

.em-statistik__keine {
	margin: 0;
}

/* ==========================================================================
   6. Fahrzeuge (Karten)
   Wie die Beitragskarten (vorlagen.css, Abschnitt 7): Foto 3 : 2 mit der
   Dienstzeit als Etikett, 2-px-Linie, Funkrufname in Daten-Schrift, Name,
   Beschreibung, unten die Zahl der Einsätze. Die Karten teilen sich die Breite
   (ab 18 rem je Karte, höchstens 36 rem) – zwei Fahrzeuge stehen also nebeneinander
   ohne leere dritte Spalte. Hat das Fahrzeug eine Infoseite, führt die ganze Karte
   dorthin. Etikett außer Dienst dunkel statt rot (auch im Steckbrief).
   ========================================================================== */

:root .em-fahrzeuge__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.em-fahrzeug-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 36rem;
	margin: 0;
}

:root .em-fahrzeug-karte--ausser-dienst .em-fahrzeug-karte__etikett,
:root .em-steckbrief--ausser-dienst .em-steckbrief__etikett {
	background-color: var(--wp--preset--color--contrast);
}

.em-fahrzeug-karte__bild {
	margin: 0;
}

.em-fahrzeug-karte__img,
.em-steckbrief__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--s);
}

.em-fahrzeug-karte__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--f112-rule);
}

.em-fahrzeug-karte__text > * {
	margin: 0;
}

.em-fahrzeug-karte__kopf {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.25rem;
}

:root .em-fahrzeug-karte__text > .em-fahrzeug-karte__name {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--f112-text);
}

.em-fahrzeug-karte__name a {
	color: inherit;
	text-decoration: none;
}

/* Klickfläche über die ganze Karte */
.em-fahrzeug-karte__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.em-fahrzeug-karte--link:hover .em-fahrzeug-karte__name a {
	color: var(--f112-link);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.em-fahrzeug-karte__beschreibung {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--f112-text-2);
}

/* Zahl der Einsätze unten in der Karte, auch wenn die Nachbarkarte mehr Text hat. */
:root .em-fahrzeug-karte__text > .em-fahrzeug-karte__einsaetze {
	margin-block-start: auto;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--f112-line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--f112-muted);
}

.em-fahrzeug-karte__einsaetze strong {
	font-weight: 600;
	color: var(--f112-text);
}

.em-fahrzeuge__keine {
	margin: 0;
	color: var(--f112-muted);
}

/* ==========================================================================
   7. Fahrzeug-Steckbrief
   Wie der Fahrzeug-Abschnitt (Muster „Fahrzeug“): Foto mit Dienstzeit als
   Etikett, Überzeile und taktisches Zeichen, Name in Plakat-Größe, Einleitung,
   Funkrufname als Datenzeile, Kennzahlen als Datenblatt, Pfeil-Link. Die Teile
   teilen ihre Gestaltung mit den Bausteinen (bausteine.css, Abschnitt 9).
   Foto (55 %) und Text (45 %) stehen nebeneinander, solange beide ihre
   Mindestbreite haben, sonst untereinander – ohne Medienabfrage, passt so
   auch in schmale Spalten.
   ========================================================================== */

.em-steckbrief {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.em-steckbrief__bild {
	flex: 11 1 28rem;
	min-width: 0;
	margin: 0;
}

.em-steckbrief__text {
	flex: 9 1 22rem;
	min-width: 0;
}

.em-steckbrief--ohne-bild .em-steckbrief__text {
	max-width: 42rem;
}

.em-steckbrief__text > *,
.em-steckbrief__kopf > p {
	margin-block: 0;
}

.em-steckbrief__text > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Überzeile links, taktisches Zeichen rechts (im Muster eine Gruppe „Zeile“). */
.em-steckbrief__kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

:root .em-steckbrief__text > .em-steckbrief__name {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--plakat);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-wrap: balance;
	hyphens: manual;
	overflow-wrap: anywhere;
	color: var(--f112-text);
}

.em-steckbrief__dienst {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--f112-accent-text);
}

/* Kennzahlen: Wert über der Bezeichnung (im Quelltext umgekehrt, damit Screenreader
   „Wassertank: 1.600 l“ lesen). */
.em-steckbrief__kennzahl {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.em-steckbrief__kennzahl > dt,
.em-steckbrief__kennzahl > dd {
	margin: 0;
}

.em-steckbrief__kennzahl > dd {
	order: -1;
}

.em-steckbrief__mehr > a {
	display: inline-flex;
}

.em-steckbrief__mehr > a:hover {
	color: var(--f112-link-hover);
	text-decoration: none;
}

.em-steckbrief__mehr > a:hover::after {
	transform: translateX(0.1875rem);
}

/* ==========================================================================
   8. Technische Daten
   Bezeichnung (Daten-Schrift) und Wert je Zeile, Linien wie in der
   Einsatzliste. Ab 32 rem Breite der Liste zwei Spalten, schmaler die
   Bezeichnung über dem Wert.
   ========================================================================== */

.em-fahrzeugdaten {
	container: em-daten / inline-size;
	margin-block-end: 0;
	border-block-start: 2px solid var(--f112-rule);
}

.em-fahrzeugdaten__zeile {
	display: grid;
	gap: 0.25rem 1.5rem;
	padding-block: 0.875rem;
	border-block-end: 1px solid var(--f112-line);
}

.em-fahrzeugdaten dt,
.em-fahrzeugdaten dd {
	margin: 0;
}

.em-fahrzeugdaten dd {
	line-height: 1.45;
	color: var(--f112-text);
}

@container em-daten (min-width: 32rem) {
	.em-fahrzeugdaten__zeile {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		align-items: baseline;
	}
}