/*
 * Feuerwehr 112 – Bausteine aus Design A („Leitstelle“)
 *
 * Block-Stile, aus denen die Muster der Kategorien „Feuerwehr – Abschnitte“ und
 * „Feuerwehr – Elemente“ bestehen. Wird identisch auf der Seite und im Editor geladen.
 * Farben kommen aus dem Farbkontext (--f112-*, siehe base.css).
 *
 * Inhalt
 * 1. Warnmarkierung (Trenner)
 * 2. Kennzahlen
 * 3. Dienstplan-Kacheln (Gruppe „Termin“)
 * 4. Schild (Gruppe „Schild“, Baustein „Adress-Schild“)
 * 5. Hinweisbox (Gruppe „Hinweis“, „Wichtig“)
 * 6. Einstieg (Cover „Einstieg“)
 * 7. Meldung (Gruppe „Meldung“)
 * 8. Reihe (Text und schmaler Teil nebeneinander)
 * 9. Fahrzeug: Etikett, taktisches Zeichen, Datenzeile, Datenblatt
 * 10. Pfeil-Link (Button)
 * 11. Checkliste (Liste)
 * 12. Zeitleiste (Gruppe „Zeitleiste“)
 * 13. Ansprechpartner (Gruppe „Person“)
 * 14. Downloads (Gruppe „Downloads“)
 * 15. Ortsschilder (Liste „Ortsschilder“)
 */

/* ==========================================================================
   1. Warnmarkierung
   Rot-weiße Schraffur wie am Fahrzeugheck. In voller Breite trennt sie zwei
   Abschnitte und schließt bündig an (base.css, Abschnitt 3). Auf dunklen und
   farbigen Flächen wechseln die Streifenfarben (Farbkontext).
   ========================================================================== */

:root .wp-block-separator.is-style-warnung {
	--f112-streifen-breite: 1rem;
	height: 0.75rem;
	background: repeating-linear-gradient(
		-45deg,
		var(--f112-streifen) 0 var(--f112-streifen-breite),
		var(--f112-streifen-2) var(--f112-streifen-breite) calc(2 * var(--f112-streifen-breite))
	);
}

@media (max-width: 37.5em) {
	:root .wp-block-separator.is-style-warnung {
		--f112-streifen-breite: 0.8125rem;
		height: 0.625rem;
	}
}

/* Kontrastmodus: Windows entfernt die Farben des Verlaufs – Streifen in den Systemfarben. */
@media (forced-colors: active) {
	:root .wp-block-separator.is-style-warnung {
		forced-color-adjust: none;
		background: repeating-linear-gradient(-45deg, CanvasText 0 var(--f112-streifen-breite), Canvas var(--f112-streifen-breite) calc(2 * var(--f112-streifen-breite)));
	}
}

/* ==========================================================================
   2. Kennzahlen
   Gruppe „Kennzahlen“: jede Untergruppe wird eine Kachel (Nummer, große Zahl,
   kurzer Text) wie auf einer Instrumententafel. Die Nummer „01 —“ setzt das
   Theme vor die erste Zeile (Absatz-Stil „Kennung“). Handy und Tablet: zwei
   Kacheln nebeneinander, ab 1024 px alle in einer Reihe.
   ========================================================================== */

/* Absatz „Kennzahl“: große Zahl in der Titelschrift (44–64 px). Ebenso die Einsatzzahl
   des Einsatzmanagers als große Zahl (einsaetze.css). Werte im Fahrzeug-Steckbrief siehe Abschnitt 9. */
:where(.is-style-kennzahl, .em-einsatzzahl:not(.em-einsatzzahl--satz), .em-steckbrief__kennzahl > dd) {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 2.3333rem + 1.8519vw, 4rem);
	font-weight: 700;
	line-height: 0.95;
	font-variant-numeric: tabular-nums;
	color: var(--f112-text);
}

.wp-block-group.is-style-kennzahlen {
	--f112-kz-x: clamp(1.25rem, 1.0833rem + 0.7407vw, 1.75rem);
	--f112-kz-y: clamp(1.25rem, 0.8333rem + 1.8519vw, 2.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	counter-reset: f112-kennzahl;
}

.wp-block-group.is-style-kennzahlen > * {
	box-sizing: border-box;
	flex: 1 1 50%;
	min-width: 0;
	margin: 0;
	padding: var(--f112-kz-y) var(--f112-kz-x) calc(var(--f112-kz-y) + 0.25rem);
	counter-increment: f112-kennzahl;
}

/* Kacheln bündig mit der Textkante links und rechts; Haarlinien zwischen den Kacheln. */
.wp-block-group.is-style-kennzahlen > :nth-child(odd) {
	padding-inline-start: 0;
}

.wp-block-group.is-style-kennzahlen > :nth-child(even) {
	padding-inline-end: 0;
	border-inline-start: 1px solid var(--f112-line);
}

.wp-block-group.is-style-kennzahlen > :nth-child(n+3) {
	border-block-start: 1px solid var(--f112-line);
}

@media (min-width: 64em) {
	.wp-block-group.is-style-kennzahlen > :nth-child(n) {
		flex-basis: 0;
		padding-inline: var(--f112-kz-x);
		border-block-start: 0;
		border-inline-start: 1px solid var(--f112-line);
	}

	.wp-block-group.is-style-kennzahlen > :first-child {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.wp-block-group.is-style-kennzahlen > :last-child {
		padding-inline-end: 0;
	}
}

/* Einfügen-Knopf des Editors nicht als Kachel zeigen. */
.wp-block-group.is-style-kennzahlen > .block-list-appender {
	flex-basis: 100%;
	padding: 0;
	border: 0;
}

.wp-block-group.is-style-kennzahlen > * > * {
	margin-block: 0;
}

.wp-block-group.is-style-kennzahlen > * > * + * {
	margin-block-start: 0.625rem;
}

.wp-block-group.is-style-kennzahlen > * > :is(.is-style-kennzahl, .wp-block-einsatzmanager-einsatzzahl) {
	margin-block-start: clamp(0.625rem, 0.4583rem + 0.7407vw, 1.125rem);
}

.wp-block-group.is-style-kennzahlen > * > .is-style-kennung:first-child::before {
	content: counter(f112-kennzahl, decimal-leading-zero) " — ";
	content: counter(f112-kennzahl, decimal-leading-zero) " — " / "";
}

.wp-block-group.is-style-kennzahlen > * > .is-style-klein {
	max-width: 30ch;
}

/* Schmale Kacheln: etwas engere Bezeichnung, damit „02 — Bereitschaft“ in eine Zeile passt. */
@media (max-width: 37.5em) {
	.wp-block-group.is-style-kennzahlen > * > .is-style-kennung {
		letter-spacing: 0.08em;
	}
}

/* ==========================================================================
   3. Dienstplan-Kacheln (Gruppe „Termin“)
   Aufbau wie im Muster „Dienstabende“: erste Zeile = rotes Band (z. B. „Jeden Monat“),
   danach Text mit fett gesetzter Zahl vor dem Wochentag („**1.** Dienstag“), dann die Uhrzeit
   (Absatz-Stil „Kennung“).
   ========================================================================== */

.wp-block-group.is-style-termin {
	--f112-termin-x: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
	background-color: var(--wp--preset--color--surface);
	border: 1.5px solid var(--f112-rule);
	padding: 0 var(--f112-termin-x) calc(var(--f112-termin-x) + 0.125rem);
}

.wp-block-group.is-style-termin > * {
	margin-block: 0;
}

.wp-block-group.is-style-termin > * + * {
	margin-block-start: 0.625rem;
}

.wp-block-group.is-style-termin > :first-child + * {
	margin-block-start: var(--f112-termin-x);
}

/* Erste Zeile: rotes Band über die ganze Kachel. */
.wp-block-group.is-style-termin > :first-child {
	margin-inline: calc(-1 * var(--f112-termin-x));
	padding: 0.4375rem var(--f112-termin-x);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Text klein in Grau, die fett gesetzte Zahl groß in der Titelschrift (52–68 px). */
.wp-block-group.is-style-termin > p:not(:first-child, .is-style-kennung) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	color: var(--f112-muted);
}

.wp-block-group.is-style-termin > p:not(:first-child) strong {
	margin-inline-end: 0.375rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.25rem, 2.9167rem + 1.4815vw, 4.25rem);
	font-weight: 800;
	line-height: 0.9;
	color: var(--f112-text);
}

/* Uhrzeit */
.wp-block-group.is-style-termin > .is-style-kennung:not(:first-child) {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	color: var(--f112-text);
}

/* ==========================================================================
   4. Schild
   Weißes Schild mit rotem Rand und Ortsmarke – immer hell, auch auf dunklen
   Flächen. Gruppe „Schild“ (freier Inhalt: erste Zeile Bezeichnung, zweite groß,
   Rest klein) und Baustein „Adress-Schild“ (Adresse aus den Feuerwehr-Angaben).
   ========================================================================== */

:root :is(.wp-block-group.is-style-schild, .f112-kontakt--schild) {
	position: relative;
	display: block;
	padding: 1rem 1.125rem 1rem 3.875rem;
	background-color: var(--wp--preset--color--surface);
	border: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--m);
	font-style: normal;
	line-height: 1.15;
}

:root :is(.wp-block-group.is-style-schild, .f112-kontakt--schild)::before {
	content: "";
	position: absolute;
	inset-inline-start: 1.125rem;
	top: 50%;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: -0.875rem;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root :is(.wp-block-group.is-style-schild, .f112-kontakt--schild) > * {
	display: block;
	margin-block: 0;
}

/* Bezeichnung, z. B. „Gerätehaus“ */
:root :is(.wp-block-group.is-style-schild > :first-child, .f112-schild__bezeichnung) {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Straße groß (23–26 px) */
:root :is(.wp-block-group.is-style-schild > :nth-child(2), .f112-schild__strasse) {
	margin-block-start: 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4375rem, 1.375rem + 0.2778vw, 1.625rem);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--f112-text);
	/* Bei großer Schrift passt ein langer Straßenname nicht in die Tafel – dann bricht er um. */
	overflow-wrap: anywhere;
}

/* Ort und weitere Zeilen klein */
:root :is(.wp-block-group.is-style-schild > :nth-child(n+3), .f112-schild__ort) {
	margin-block-start: 0.125rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--f112-text-2);
}

:root .f112-kontakt--schild > .f112-kontakt__link {
	margin-block-start: calc(0.5rem - 0.625rem); /* 0,5 rem Abstand, abzüglich Innenabstand der Klickfläche (vorlagen.css) */
	font-size: var(--wp--preset--font-size--small);
	color: var(--f112-link);
}

/* ==========================================================================
   5. Hinweisbox
   Weiße Fläche mit farbiger Kante: „Hinweis“ blau, „Wichtig“ bernstein.
   Überzeilen, Listenpunkte und Trenner darin übernehmen die Farbe.
   ========================================================================== */

.wp-block-group:is(.is-style-hinweis, .is-style-wichtig) {
	--f112-hinweis: var(--wp--preset--color--blue);
	--f112-accent-text: var(--f112-hinweis);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--f112-line);
	border-inline-start: 4px solid var(--f112-hinweis);
	border-radius: var(--wp--custom--radius--s);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-wichtig {
	--f112-hinweis: var(--wp--preset--color--amber);
}

.wp-block-group:is(.is-style-hinweis, .is-style-wichtig) > .is-style-ueberzeile + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   6. Einstieg (Cover „Einstieg“)
   Kopf der Startseite: Foto oder Video in voller Breite, Text unten links auf
   einem Verlauf aus Nacht, rechts daneben Platz für eine Meldung (ab Einsatz-
   manager 2.0 der letzte Alarm). Der Verlauf ersetzt die gleichmäßige Abdunklung
   der übrigen Cover: Unter dem Text ist er dunkler als deren 65 %, rechts bleibt
   das Foto fast unverändert. Der Regler „Deckkraft“ hat hier keine Wirkung.
   Unter 1024 px steht die Meldung unter dem Text, der Verlauf läuft von oben
   nach unten und das Foto bekommt oben mehr Platz.
   ========================================================================== */

:root .wp-block-cover.is-style-einstieg {
	--f112-accent-text: var(--wp--custom--color--accent-on-dark);
	/* Rechte Kante der Textspalte (Rand der breiten Spalte + größte Textbreite). */
	--f112-einstieg-text: calc(max(var(--wp--custom--gutter), (100% - var(--wp--style--global--wide-size)) / 2) + 41rem);
	min-height: clamp(35rem, 32.5rem + 11.1111vw, 42.5rem);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	align-items: flex-end;
	/* Ohne Foto: Fläche Nacht statt durchscheinendem Seitenhintergrund. */
	background-color: var(--wp--preset--color--ink);
}

:root .wp-block-cover.is-style-einstieg > span.wp-block-cover__background {
	opacity: 1 !important;
	background-color: transparent !important;
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent) 0,
		color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent) var(--f112-einstieg-text),
		color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent) calc(var(--f112-einstieg-text) + 20rem),
		color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent) 100%
	);
}

/* Text steht immer unten über der ganzen Breite; „Inhaltsposition“ aus der Werkzeugleiste
   würde den Innenbereich sonst auf Inhaltsbreite schrumpfen und an den Rand schieben. */
:root .wp-block-cover.is-style-einstieg > .wp-block-cover__inner-container {
	width: 100% !important;
	margin: 0 !important;
}

:root .wp-block-cover.is-style-einstieg .f112-reihe {
	align-items: flex-end;
}

/* Funkzeile (Absatz „Kennung“ als erste Zeile) mit rotem Quadrat davor. */
:root .wp-block-cover.is-style-einstieg .is-style-kennung:first-child {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

:root .wp-block-cover.is-style-einstieg .is-style-kennung:first-child::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--f112-accent-text);
}

:root .wp-block-cover.is-style-einstieg .is-style-kennung + :is(h1, h2) {
	margin-block-start: var(--wp--preset--spacing--40);
}

:root .wp-block-cover.is-style-einstieg :is(h1, h2) + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

:root .wp-block-cover.is-style-einstieg .is-style-einleitung {
	max-width: 34rem;
}

:root .wp-block-cover.is-style-einstieg p + .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (max-width: 63.9375em) {
	:root .wp-block-cover.is-style-einstieg {
		--f112-einstieg-oben: clamp(12rem, 40vw, 18rem);
		padding-block-start: var(--f112-einstieg-oben);
	}

	:root .wp-block-cover.is-style-einstieg > span.wp-block-cover__background {
		background-image: linear-gradient(
			180deg,
			color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) 0,
			color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) calc(var(--f112-einstieg-oben) - 3rem),
			color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent) calc(var(--f112-einstieg-oben) + 6rem),
			color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent) 100%
		);
	}

	/* Text über die ganze Breite, die Meldung darunter. */
	:root .wp-block-cover.is-style-einstieg .f112-reihe > :first-child {
		flex-basis: 100%;
	}
}

/* Handy: Buttons untereinander in voller Breite. */
@media (max-width: 37.5em) {
	:root .wp-block-cover.is-style-einstieg .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	:root .wp-block-cover.is-style-einstieg .wp-block-buttons > .wp-block-button,
	:root .wp-block-cover.is-style-einstieg .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}

/* ==========================================================================
   7. Meldung (Gruppe „Meldung“)
   Weiße Karte mit roter Oberkante wie eine Alarmdepesche: erste Zeile Bezeichnung
   (Stil „Kennung“), zweite Zeile groß (Datum und Uhrzeit oder ein Schlagwort),
   danach kurzer Text; ein Pfeil-Link am Ende wird zur Fußzeile. Bleibt auch auf
   dunklen Flächen und im Einstieg hell. Die Karte „Letzter Einsatz“ des Einsatz-
   managers teilt diese Grundform (Einzelheiten in einsaetze.css).
   ========================================================================== */

/* Breite einschließlich Innenabstand (wie in Design A): Im Editor steckt die Karte des
   Einsatzmanagers in einem Rahmen, auf der Seite nicht – so ist sie überall gleich breit. */
.wp-block-group.is-style-meldung,
.em-letzter-einsatz {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--surface);
	border-block-start: 4px solid var(--wp--preset--color--accent);
	padding: 1.25rem 1.5rem 0.75rem;
}

.wp-block-group.is-style-meldung > *,
.em-letzter-einsatz > * {
	margin-block: 0;
}

.wp-block-group.is-style-meldung > * + *,
.em-letzter-einsatz > * + * {
	margin-block-start: 0.75rem;
}

/* Zweite Zeile groß (32–36 px) */
.wp-block-group.is-style-meldung > p:nth-child(2),
.em-letzter-einsatz > .em-letzter-einsatz__zeit {
	margin-block-start: 0.875rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.9167rem + 0.3704vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--f112-text);
}

.wp-block-group.is-style-meldung > p:nth-child(n+3) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--f112-text-2);
}

/* Pfeil-Link als Fußzeile über die ganze Breite */
.wp-block-group.is-style-meldung > .wp-block-buttons:last-child,
.em-letzter-einsatz > .em-letzter-einsatz__mehr {
	margin-block-start: 1.25rem;
	padding-block-start: 0.25rem;
	border-block-start: 1px solid var(--f112-line);
}

.wp-block-group.is-style-meldung > .wp-block-buttons:last-child > .wp-block-button,
.wp-block-group.is-style-meldung > .wp-block-buttons:last-child .wp-block-button__link {
	width: 100%;
	justify-content: space-between;
}

/* ==========================================================================
   8. Reihe
   Hilfsklasse „f112-reihe“ an einer Gruppe „Zeile“ (Muster „Einstieg“ und
   „Mitmach-Aufruf“): links der Text (flexibel, höchstens 41 rem), rechts ein
   schmaler Teil (Meldung, Checkliste). Reicht der Platz nicht, rutscht er darunter.
   ========================================================================== */

:root .f112-reihe {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

:root .f112-reihe > * {
	min-width: 0;
}

:root .f112-reihe > :first-child {
	flex: 1 1 34rem;
	max-width: 41rem;
}

:root .f112-reihe > :last-child:not(:first-child) {
	flex: 0 1 22.5rem;
}

/* ==========================================================================
   9. Fahrzeug
   Bausteine für den dunklen Fahrzeug-Abschnitt (Muster „Fahrzeug“) und
   Fahrzeugseiten. Farben aus dem Farbkontext, auf hellen Flächen ebenso nutzbar.
   ========================================================================== */

/* Bild „Etikett“: Bildunterschrift als rotes Etikett unten links auf dem Bild. Ebenso die Dienstzeit
   eines Fahrzeugs (Einsatzmanager) – außer Dienst dunkel statt rot (einsaetze.css). */
:root .wp-block-image.is-style-etikett,
.em-steckbrief__bild,
.em-fahrzeug-karte__bild {
	position: relative;
}

:root .wp-block-image.is-style-etikett > figcaption,
:root .em-steckbrief__etikett,
:root .em-fahrzeug-karte__etikett {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	max-width: calc(100% - 3rem);
	margin: 0;
	padding: 0.5rem 0.875rem;
	border-end-start-radius: var(--wp--custom--radius--s);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Absatz „Taktisches Zeichen“: Kürzel im Rahmen mit zwei Rädern,
   angelehnt an die taktischen Zeichen für Fahrzeuge (z. B. „LF“). */
:root .is-style-zeichen,
:root .em-steckbrief__zeichen {
	position: relative;
	box-sizing: border-box;
	width: fit-content;
	min-width: 4rem;
	margin-block-end: 0.875rem;
	padding: 0.125rem 0.75rem;
	border: 3px solid var(--f112-accent-text);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
	color: var(--f112-accent-text);
	hyphens: manual;
}

:root .is-style-zeichen::before,
:root .is-style-zeichen::after,
:root .em-steckbrief__zeichen::before,
:root .em-steckbrief__zeichen::after {
	content: "";
	position: absolute;
	top: calc(100% + 3px);
	box-sizing: border-box;
	width: 0.625rem;
	height: 0.625rem;
	border: 2.5px solid var(--f112-accent-text);
	border-radius: 50%;
}

:root .is-style-zeichen::before,
:root .em-steckbrief__zeichen::before {
	inset-inline-start: 18%;
}

:root .is-style-zeichen::after,
:root .em-steckbrief__zeichen::after {
	inset-inline-end: 18%;
}

/* Absatz „Datenzeile“: Bezeichnung links, fett gesetzter Wert rechts, in feinem Rahmen
   (z. B. „Funkrufname **Florian …**“). Ist der Platz knapp, steht der Wert darunter. */
:root .is-style-datenzeile,
:root .em-steckbrief__funk {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 0.75rem 1rem;
	border: 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.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--f112-muted);
	hyphens: manual;
}

:root .is-style-datenzeile strong,
:root .em-steckbrief__funk strong {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--f112-text);
}

/* Gruppe „Datenblatt“: technische Daten in zwei Spalten mit Haarlinien. Jede Untergruppe
   ist ein Wert (Absatz „Kennzahl“, Einheit mit „Akzent“) mit Bezeichnung darunter („Kennung“). */
:root .wp-block-group.is-style-datenblatt,
:root .em-steckbrief__kennzahlen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-block: 1px solid var(--f112-line);
}

.wp-block-group.is-style-datenblatt > *,
.em-steckbrief__kennzahlen > * {
	min-width: 0;
	margin: 0;
	padding: 1.125rem 1rem;
}

.wp-block-group.is-style-datenblatt > :nth-child(odd),
.em-steckbrief__kennzahlen > :nth-child(odd) {
	padding-inline-start: 0;
}

.wp-block-group.is-style-datenblatt > :nth-child(even),
.em-steckbrief__kennzahlen > :nth-child(even) {
	border-inline-start: 1px solid var(--f112-line);
}

.wp-block-group.is-style-datenblatt > :nth-child(n+3),
.em-steckbrief__kennzahlen > :nth-child(n+3) {
	border-block-start: 1px solid var(--f112-line);
}

/* Große Schrift (Textgröße im Browser oder System; em-Abfrage, siehe Kopf in vorlagen.css):
   eine Spalte, sonst passen Werte und Bezeichnungen nicht mehr nebeneinander. */
@media (max-width: 20em) {
	:root .wp-block-group.is-style-datenblatt,
	:root .em-steckbrief__kennzahlen {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-group.is-style-datenblatt > :nth-child(even),
	.em-steckbrief__kennzahlen > :nth-child(even) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.wp-block-group.is-style-datenblatt > :nth-child(n+2),
	.em-steckbrief__kennzahlen > :nth-child(n+2) {
		border-block-start: 1px solid var(--f112-line);
	}
}

/* Einfügen-Knopf des Editors nicht als Feld zeigen. */
.wp-block-group.is-style-datenblatt > .block-list-appender {
	grid-column: 1 / -1;
	padding: 0;
	border: 0;
}

.wp-block-group.is-style-datenblatt > * > * {
	margin-block: 0;
}

.wp-block-group.is-style-datenblatt > * > * + * {
	margin-block-start: 0.375rem;
}

/* Wert 28–38 px */
.wp-block-group.is-style-datenblatt > * > .is-style-kennzahl,
.em-steckbrief__kennzahl > dd {
	font-size: clamp(1.75rem, 1.5417rem + 0.9259vw, 2.375rem);
	line-height: 1;
}

/* ==========================================================================
   10. Pfeil-Link (Button „Pfeil-Link“)
   Weiterführender Link ohne Fläche: „Alle Beiträge →“. Farbe aus dem Farbkontext.
   Der Pfeil steht als Variable bereit (auch für einsaetze.css).
   ========================================================================== */

:root {
	--f112-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

:root .wp-block-button.is-style-pfeil > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--f112-link);
	font-size: 1rem;
	letter-spacing: 0.09em;
}

:root .wp-block-button.is-style-pfeil > .wp-block-button__link:hover {
	background: none;
	color: var(--f112-link-hover);
}

:root .wp-block-button.is-style-pfeil > .wp-block-button__link::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;
}

:root .wp-block-button.is-style-pfeil > .wp-block-button__link:hover::after {
	transform: translateX(0.1875rem);
}

/* ==========================================================================
   11. Checkliste (Liste „Checkliste“)
   Punkte mit Häkchen im Kästchen, in Daten-Schrift (z. B. Voraussetzungen
   zum Mitmachen). Kästchen in der Akzentfarbe: auf Rot weiß.
   ========================================================================== */

:root .wp-block-list.is-style-checkliste {
	padding-inline-start: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
}

:root .wp-block-list.is-style-checkliste > li {
	position: relative;
	padding-inline-start: 2rem;
}

:root .wp-block-list.is-style-checkliste > li + li {
	margin-block-start: 0.75rem;
}

:root .wp-block-list.is-style-checkliste > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.125rem;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--f112-accent-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Cpath d='m7.5 12 3 3 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Cpath d='m7.5 12 3 3 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kontrastmodus: Das Häkchen ist eine Maske über der Hintergrundfarbe, die Windows überschreibt. */
@media (forced-colors: active) {
	:root .wp-block-list.is-style-checkliste > li::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* ==========================================================================
   12. Zeitleiste (Gruppe „Zeitleiste“)
   Chronik an einer senkrechten Linie. Jede Untergruppe ist ein Eintrag: erste
   Zeile das Jahr (oder ein Zeitraum), danach Überschrift, Text, ggf. Bilder.
   Ein Akzent im Jahr hebt den Eintrag hervor (Jahr und Punkt rot). Ab 768 px
   stehen die Jahre in einer eigenen Spalte links der Linie. Die Linie läuft
   von Punkt zu Punkt und lässt die Ringe frei – so passt sie auf jede Fläche.
   ========================================================================== */

:root .wp-block-group.is-style-zeitleiste {
	--f112-zl-jahr: clamp(1.75rem, 1.5833rem + 0.7407vw, 2.25rem);
	--f112-zl-punkt: 1rem;
	--f112-zl-mitte: calc(var(--f112-zl-jahr) * 0.52); /* Höhe der Punktmitte = Mitte der Jahreszahl */
	--f112-zl-linie: 0.5rem; /* Mitte der Linie */
	--f112-zl-einzug: 2.25rem;
}

:root .wp-block-group.is-style-zeitleiste > * {
	position: relative;
	display: flow-root;
	margin-block: 0;
	padding-inline-start: var(--f112-zl-einzug);
	padding-block-end: var(--wp--preset--spacing--50);
}

:root .wp-block-group.is-style-zeitleiste > :last-child {
	padding-block-end: 0;
}

/* Linie vom eigenen Punkt bis zum Punkt des nächsten Eintrags */
:root .wp-block-group.is-style-zeitleiste > *::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--f112-zl-linie) - 1px);
	top: calc(var(--f112-zl-mitte) + var(--f112-zl-punkt) / 2);
	bottom: calc(var(--f112-zl-punkt) / 2 - var(--f112-zl-mitte));
	width: 2px;
	background-color: var(--f112-rule);
}

:root .wp-block-group.is-style-zeitleiste > :last-child::before,
:root .wp-block-group.is-style-zeitleiste > :has(+ .block-list-appender)::before {
	content: none;
}

/* Punkt: Ring, hervorgehoben gefüllt */
:root .wp-block-group.is-style-zeitleiste > *::after {
	content: "";
	display: block;
	clear: none;
	position: absolute;
	inset-inline-start: calc(var(--f112-zl-linie) - var(--f112-zl-punkt) / 2);
	top: calc(var(--f112-zl-mitte) - var(--f112-zl-punkt) / 2);
	box-sizing: border-box;
	width: var(--f112-zl-punkt);
	height: var(--f112-zl-punkt);
	border: 3px solid var(--f112-rule);
	border-radius: 50%;
}

:root .wp-block-group.is-style-zeitleiste > :has(> :first-child .f112-akzent)::after {
	border-color: var(--f112-accent-text);
	background-color: var(--f112-accent-text);
}

/* Einfügen-Knopf des Editors nicht als Eintrag zeigen. */
:root .wp-block-group.is-style-zeitleiste > .block-list-appender {
	padding: 0;
}

:root .wp-block-group.is-style-zeitleiste > .block-list-appender::before,
:root .wp-block-group.is-style-zeitleiste > .block-list-appender::after {
	content: none;
}

/* Jahr */
:root .wp-block-group.is-style-zeitleiste > * > :first-child {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--f112-zl-jahr);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--f112-text);
	hyphens: manual;
}

:root .wp-block-group.is-style-zeitleiste > * > :first-child + *,
:root .wp-block-group.is-style-zeitleiste > * > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

@media (min-width: 48em) {
	:root .wp-block-group.is-style-zeitleiste {
		--f112-zl-spalte: 7.5rem;
		--f112-zl-linie: calc(var(--f112-zl-spalte) + 1.5rem);
		--f112-zl-einzug: calc(var(--f112-zl-spalte) + 3rem);
	}

	/* Jahr links der Linie, rechtsbündig; der Text beginnt auf gleicher Höhe. */
	:root .wp-block-group.is-style-zeitleiste > * > :first-child {
		float: left;
		width: var(--f112-zl-spalte);
		margin-inline-start: calc(-1 * var(--f112-zl-einzug));
		text-align: end;
	}

	:root .wp-block-group.is-style-zeitleiste > * > :first-child + * {
		margin-block-start: 0;
	}

	/* Überschriften beginnen sonst unter dem schwebenden Jahr (inhalte.css, Abschnitt 7). */
	:root .wp-block-group.is-style-zeitleiste > * > * {
		clear: none;
	}
}

/* ==========================================================================
   13. Ansprechpartner (Gruppe „Person“)
   Ohne Kasten, wie die Beiträge: 2-px-Linie, Funktion (erste Zeile), Name als
   Überschrift, danach Kontaktzeilen. Telefon- und E-Mail-Links bekommen ein
   Symbol. Ein Bild am Anfang wird zum quadratischen Foto links neben dem Text.
   ========================================================================== */

:root .wp-block-group.is-style-person {
	--f112-person-foto: 6rem;
	position: relative;
	box-sizing: border-box;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--f112-rule);
}

:root .wp-block-group.is-style-person > * {
	margin-block: 0;
}

:root .wp-block-group.is-style-person > * + * {
	margin-block-start: 0.25rem;
}

:root .wp-block-group.is-style-person > .wp-block-image:first-child + * {
	margin-block-start: 0;
}

/* Funktion */
:root .wp-block-group.is-style-person > p:first-child,
:root .wp-block-group.is-style-person > .wp-block-image:first-child + p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--f112-accent-text);
	hyphens: manual;
}

/* Name (24–28 px) */
:root .wp-block-group.is-style-person > :is(h2, h3, h4, h5, h6) {
	margin-block-start: 0.375rem;
	font-size: clamp(1.5rem, 1.4167rem + 0.3704vw, 1.75rem);
	line-height: 1.1;
}

/* Kontaktzeilen */
:root .wp-block-group.is-style-person > :is(h2, h3, h4, h5, h6) ~ :is(p, .wp-block-list) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--f112-text-2);
}

:root .wp-block-group.is-style-person > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 0.5rem;
}

/* Telefon und E-Mail: Symbol davor, Klickfläche 44 px hoch; mehrere Zeilen schließen bündig an. */
:root .wp-block-group.is-style-person a:is([href^="tel:"], [href^="mailto:"]) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	overflow-wrap: anywhere;
}

:root .wp-block-group.is-style-person > p:has(> a:is([href^="tel:"], [href^="mailto:"])) + p:has(> a:is([href^="tel:"], [href^="mailto:"])) {
	margin-block-start: 0;
}

:root .wp-block-group.is-style-person a:is([href^="tel:"], [href^="mailto:"])::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--f112-accent-text);
	-webkit-mask: var(--f112-person-symbol) center / contain no-repeat;
	mask: var(--f112-person-symbol) center / contain no-repeat;
}

:root .wp-block-group.is-style-person a[href^="tel:"] {
	--f112-person-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E");
}

:root .wp-block-group.is-style-person a[href^="mailto:"] {
	--f112-person-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='1'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

/* Foto links, quadratisch zugeschnitten */
:root .wp-block-group.is-style-person:has(> .wp-block-image:first-child) {
	min-height: calc(var(--f112-person-foto) + var(--wp--preset--spacing--30));
	padding-inline-start: calc(var(--f112-person-foto) + 1.25rem);
}

:root .wp-block-group.is-style-person > .wp-block-image:first-child {
	position: absolute;
	inset-inline-start: 0;
	top: var(--wp--preset--spacing--30);
	width: var(--f112-person-foto);
	margin: 0;
}

:root .wp-block-group.is-style-person > .wp-block-image:first-child img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* ==========================================================================
   14. Downloads (Gruppe „Downloads“)
   Mehrere Datei-Blöcke als Liste: 2-px-Linie oben, Haarlinien dazwischen,
   ohne eigene Rahmen. Dateityp und Größe ergänzt das Theme (inhalte.css, 5).
   ========================================================================== */

:root .wp-block-group.is-style-downloads {
	border-block-start: 2px solid var(--f112-rule);
}

:root .wp-block-group.is-style-downloads > * {
	margin-block: 0;
}

:root .wp-block-group.is-style-downloads > .wp-block-file {
	padding-inline: 0;
	border: 0;
	border-block-end: 1px solid var(--f112-line);
	border-radius: 0;
}

/* ==========================================================================
   15. Ortsschilder (Liste „Ortsschilder“)
   Jeder Punkt wird eine gelbe Ortstafel, drei nebeneinander (z. B. die
   Feuerwehren einer gemeinsamen Jugendfeuerwehr). Gelb und Schwarz wie
   echte Schilder, Schrift wie die Überschriften. Das Theme setzt Doppelnamen
   („Glasau/Sarau“) in zwei Zeilen und markiert die eigene Wehr mit „Wir“
   (inc/block-styles.php) – beides nur auf der Seite, nicht im Editor.
   ========================================================================== */

:root .wp-block-list.is-style-ortsschilder {
	--f112-schild-gelb: #f2c200;
	--f112-schild-schwarz: #16140f;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(0.5rem, 0.35rem + 0.5vw, 0.875rem);
	padding-inline-start: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 0.75rem + 1vw, 1.75rem);
	font-weight: 600;
	line-height: 1.02;
	text-align: center;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Tafel mit schwarzem Rand, innen abgesetzt wie bei Verkehrsschildern. */
:root .wp-block-list.is-style-ortsschilder > li {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0.6em 0.6em 0.55em;
	border-radius: 0.5em;
	background-color: var(--f112-schild-gelb);
	box-shadow:
		inset 0 0 0 0.16em var(--f112-schild-gelb),
		inset 0 0 0 0.27em var(--f112-schild-schwarz),
		0 1px 2px rgb(0 0 0 / 0.18);
	color: var(--f112-schild-schwarz);
	overflow-wrap: normal;
}

:root .wp-block-list.is-style-ortsschilder > li a {
	color: inherit;
}

:root .wp-block-list.is-style-ortsschilder .f112-ortsschild__zeile {
	display: block;
}

/* Eigene Wehr: Etikett oben rechts, wie das Etikett an Fotos. */
:root .wp-block-list.is-style-ortsschilder .f112-ortsschild__wir {
	position: absolute;
	top: -0.4375rem;
	inset-inline-end: -0.375rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--wp--custom--radius--s);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Kontrastmodus: Tafel und Etikett verlieren Fläche und Schatten – Rahmen in Textfarbe. */
@media (forced-colors: active) {
	:root .wp-block-list.is-style-ortsschilder > li,
	:root .wp-block-list.is-style-ortsschilder .f112-ortsschild__wir {
		border: 0.15em solid CanvasText;
	}
}