/*
 * Feuerwehr 112 – Grundstile
 *
 * Ergänzt theme.json um alles, was sich dort nicht ausdrücken lässt.
 * Wird identisch auf der Seite und im Editor geladen (Editor = Seite).
 *
 * Inhalt
 * 1. Farbkontext       – Text-, Link-, Button- und Fokusfarben passen sich dem Hintergrund an
 * 2. Grundlagen        – Darstellung, Auswahl, Fokus, Bewegung
 * 3. Text              – Rhythmus, Silbentrennung, Links, Listen, Code, Tabellen
 * 4. Buttons           – Kontur-Stil, Mindestgröße
 * 5. Block-Stile       – Einleitung, Überzeile, Kennung, Klein, Karte
 */

/* ==========================================================================
   1. Farbkontext
   Jeder Hintergrund setzt dieselben Variablen; alles darin liest nur diese.
   Damit bleibt jede Kombination aus der Palette lesbar (WCAG 2.2 AA).
   Für Bilder, die je nach Grund wechseln (Logo): --f112-dunkel (0/1) für Filter,
   --f112-nur-hell / --f112-nur-dunkel als display-Wert.
   ========================================================================== */

:root,
:where(.has-base-background-color, .has-surface-background-color, .has-surface-2-background-color, .is-style-karte, .is-style-meldung, .em-letzter-einsatz, .is-style-termin, .is-style-schild, .f112-kontakt--schild, .is-style-hinweis, .is-style-wichtig) {
	--f112-text: var(--wp--preset--color--contrast);
	--f112-text-2: var(--wp--preset--color--contrast-2);
	--f112-muted: var(--wp--preset--color--muted);
	--f112-accent-text: var(--wp--preset--color--accent);
	--f112-amber-text: var(--wp--preset--color--amber);
	--f112-blue-text: var(--wp--preset--color--blue);
	--f112-link: var(--wp--preset--color--accent);
	--f112-link-hover: var(--wp--preset--color--contrast);
	--f112-line: var(--wp--custom--color--line);
	--f112-rule: var(--wp--preset--color--contrast);
	--f112-focus: var(--wp--preset--color--contrast);
	--f112-btn-bg: var(--wp--preset--color--accent);
	--f112-btn-text: var(--wp--preset--color--surface);
	--f112-btn-hover-bg: var(--wp--custom--color--accent-hover);
	--f112-btn-outline: var(--wp--preset--color--contrast);
	--f112-btn-outline-hover-text: var(--wp--preset--color--surface);
	--f112-streifen: var(--wp--preset--color--accent);
	--f112-streifen-2: var(--wp--preset--color--surface);
	--f112-dunkel: 0;
	--f112-nur-hell: block;
	--f112-nur-dunkel: none;
}

/* Helle Flächen in dunklen Abschnitten bekommen wieder dunklen Text. */
:where(.has-base-background-color, .has-surface-background-color, .has-surface-2-background-color, .is-style-karte, .is-style-meldung, .em-letzter-einsatz, .is-style-termin, .is-style-schild, .f112-kontakt--schild, .is-style-hinweis, .is-style-wichtig):not(.wp-element-button) {
	color: var(--f112-text);
}

/* Nacht: Nacht, Text */
:where(.has-ink-background-color, .has-contrast-background-color):not(.wp-element-button) {
	--f112-text: var(--wp--custom--color--ink-text);
	--f112-text-2: var(--wp--custom--color--ink-text);
	--f112-muted: var(--wp--custom--color--ink-muted);
	--f112-accent-text: var(--wp--custom--color--accent-on-dark);
	--f112-amber-text: var(--wp--custom--color--amber-on-dark);
	--f112-blue-text: var(--wp--custom--color--blue-on-dark);
	--f112-link: var(--wp--custom--color--accent-on-dark);
	--f112-link-hover: var(--wp--custom--color--ink-text);
	--f112-line: var(--wp--custom--color--line-on-dark);
	--f112-rule: var(--wp--custom--color--ink-text);
	--f112-focus: var(--wp--custom--color--ink-text);
	--f112-btn-bg: var(--wp--preset--color--accent);
	--f112-btn-text: var(--wp--preset--color--surface);
	--f112-btn-hover-bg: var(--wp--custom--color--accent-hover);
	--f112-btn-outline: var(--wp--custom--color--ink-text);
	--f112-btn-outline-hover-text: var(--wp--preset--color--ink);
	--f112-streifen: var(--wp--preset--color--accent);
	--f112-streifen-2: var(--wp--custom--color--ink-text);
	--f112-dunkel: 1;
	--f112-nur-hell: none;
	--f112-nur-dunkel: block;
	color: var(--f112-text);
}

/* Farbig: Feuerrot, Blau, Bernstein, Text 2, Grau */
:where(.has-accent-background-color, .has-blue-background-color, .has-amber-background-color, .has-contrast-2-background-color, .has-muted-background-color):not(.wp-element-button) {
	--f112-text: var(--wp--preset--color--surface);
	--f112-text-2: var(--wp--preset--color--surface);
	--f112-muted: var(--wp--custom--color--ink-text);
	--f112-accent-text: var(--wp--preset--color--surface);
	--f112-amber-text: var(--wp--preset--color--surface);
	--f112-blue-text: var(--wp--preset--color--surface);
	--f112-link: var(--wp--preset--color--surface);
	--f112-link-hover: var(--wp--custom--color--ink-text);
	--f112-line: var(--wp--custom--color--line-on-color);
	--f112-rule: var(--wp--preset--color--surface);
	--f112-focus: var(--wp--preset--color--surface);
	--f112-btn-bg: var(--wp--preset--color--surface);
	--f112-btn-text: var(--wp--preset--color--contrast);
	--f112-btn-hover-bg: var(--wp--custom--color--ink-text);
	--f112-btn-outline: var(--wp--preset--color--surface);
	--f112-btn-outline-hover-text: var(--wp--preset--color--contrast);
	--f112-streifen: var(--wp--preset--color--surface);
	--f112-streifen-2: transparent;
	--f112-dunkel: 1;
	--f112-nur-hell: none;
	--f112-nur-dunkel: block;
	color: var(--f112-text);
}

:where(.has-accent-background-color):not(.wp-element-button) {
	--f112-btn-text: var(--wp--preset--color--accent);
	--f112-btn-outline-hover-text: var(--wp--preset--color--accent);
}

/* Cover verhält sich wie Nacht: Die Abdunklung ist immer dunkel (inhalte.css, Abschnitt 9). */
:where(.wp-block-cover) {
	--f112-text: var(--wp--custom--color--ink-text);
	--f112-text-2: var(--wp--custom--color--ink-text);
	--f112-muted: var(--wp--custom--color--ink-text);
	--f112-accent-text: var(--wp--custom--color--ink-text);
	--f112-amber-text: var(--wp--custom--color--ink-text);
	--f112-blue-text: var(--wp--custom--color--ink-text);
	--f112-link: var(--wp--preset--color--surface);
	--f112-link-hover: var(--wp--custom--color--ink-text);
	--f112-line: var(--wp--custom--color--line-on-color);
	--f112-focus: var(--wp--preset--color--surface);
	--f112-btn-outline: var(--wp--preset--color--surface);
	--f112-btn-outline-hover-text: var(--wp--preset--color--contrast);
	--f112-streifen: var(--wp--preset--color--accent);
	--f112-streifen-2: var(--wp--custom--color--ink-text);
	--f112-dunkel: 1;
	--f112-nur-hell: none;
	--f112-nur-dunkel: block;
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

:root {
	color-scheme: only light;
	--f112-measure: 70ch;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* Silbentrennung (wo hyphens: auto gilt) nur bei Wörtern ab 10 Zeichen mit mindestens 4 Zeichen
	   vor und nach dem Strich: „Feuer-wehr“ statt „Feu-erwehr“, kein „wur-de“, keine kurzen Namen.
	   Safari kennt nur die Grenzen vorn und hinten. */
	hyphenate-limit-chars: 10 4 4;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
}

/* Nur für Screenreader sichtbar */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* Sprunglink „Zum Inhalt springen“ beim Fokus zeigen (Ebene über dem Kopf kommt von WordPress, das
   aber nur clip-path aufhebt, nicht clip; Lage unter dem Kopf in vorlagen.css). Farben wie das Theme,
   Fokusrahmen wie überall. */
.screen-reader-text:focus {
	clip: auto !important;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
:where(.wp-element-button):focus-visible {
	outline: 3px solid var(--f112-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. Text
   ========================================================================== */

/* Überschriften: ausgewogene Zeilen, lange deutsche Wörter dürfen umbrechen. */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}

:where(p, li, dd, figcaption, blockquote, summary) {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* Auf schmalen Bildschirmen trennt auch der Fließtext. */
@media (max-width: 37.5em) {
	:where(p, li, dd, figcaption, blockquote, td, th, summary) {
		hyphens: auto;
	}

	:root .wp-block-table :is(th, td) {
		padding-inline-end: 0.75rem;
	}
}

/* Rhythmus: mehr Luft vor Zwischenüberschriften, wenig zwischen Überschrift und Text.
   Eine Überzeile zählt zur Überschrift darunter und bekommt dann deren Abstand.
   Gilt auch im Textteil von „Bild und Text“ (Block ohne eigenes Layout). */
:root :where(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > :is(h2, .is-style-ueberzeile:has(+ :is(h1, h2, h3, h4, h5, h6))):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Ebenso ein Abschnitt als Gruppe, die mit der Zwischenüberschrift (ggf. mit Überzeile) beginnt –
   z. B. die Muster „Dienstabende“ und „Häufige Fragen“ auf einer Unterseite nach Text. Farbige und
   breite Gruppen regeln ihren Abstand selbst; eine Abstandseinstellung am Block geht vor. */
:root :where(.is-layout-flow, .is-layout-constrained) > .wp-block-group:not(.has-background, .alignwide, .alignfull):has(> :first-child:is(h2, .is-style-ueberzeile:has(+ h2))):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}

:root :where(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > :is(h3, h4, h5, h6):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--50);
}

:root :where(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

:root :where(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > :is(.is-style-ueberzeile, .is-style-kennung) + :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Ebenso eine Zeile mit Überzeile, z. B. Überzeile und taktisches Zeichen nebeneinander. */
:root :where(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .is-layout-flex:has(> .is-style-ueberzeile) + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Aufeinanderfolgende farbige Abschnitte, Cover und Warnmarkierungen in voller Breite stoßen bündig aneinander. */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(.alignfull.has-background, .wp-block-cover.alignfull, .wp-block-separator.is-style-warnung.alignfull) + :is(.alignfull.has-background, .wp-block-cover.alignfull, .wp-block-separator.is-style-warnung.alignfull) {
	margin-block-start: 0;
}

/* Ein farbiger Abschnitt in voller Breite nach Inhalt in Lesebreite (Text, Liste, Karten) bekommt den
   Abstand zwischen Abschnitten – z. B. der Mitmach-Aufruf am Seitenende, der als synchronisierte
   Vorlage keine eigene Abstandseinstellung hat. Nach breiten Elementen nicht: Die bringen ihren
   Innenabstand mit (Startseite). Eine Abstandseinstellung am Block geht vor. Im Editor steckt eine
   synchronisierte Vorlage in einer Hülle (.is-reusable). */
:root :where(.is-layout-flow, .is-layout-constrained) > :not(.alignwide, .alignfull) + :is(.alignfull.has-background, .is-reusable:has(> .alignfull.has-background:first-child)) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Links im Text: immer unterstrichen (nicht nur über die Farbe erkennbar). */
:where(a:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:where(a:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

strong,
b {
	font-weight: 700;
}

/* Format „Akzent“ (Werkzeugleiste): hebt ein Wort, eine Zahl oder ein Satzzeichen rot hervor.
   Die Farbe kommt aus dem Farbkontext – auf dunklen Flächen helleres Rot, auf farbigen Weiß.
   Ersetzt die freie Textfarbe von WordPress („Hervorheben“). */
mark.f112-akzent,
.em-steckbrief__einheit {
	background: none;
	color: var(--f112-accent-text);
}

/* Kontrastmodus (Windows): <mark> bekäme die Systemfarbe „MarkText“ auf durchsichtigem Grund und
   verschwände auf dunklem Grund (z. B. die 112 in den Kennzahlen) – Akzent übernimmt die Textfarbe. */
@media (forced-colors: active) {
	mark.f112-akzent {
		forced-color-adjust: none;
		background-color: transparent;
		color: inherit;
	}
}

/* Listen (nur Inhaltslisten, nicht Menüs) */
:where(.wp-block-list) {
	padding-inline-start: 1.25em;
}

:where(.wp-block-list) > li + li,
:where(.wp-block-list) > li > .wp-block-list {
	margin-block-start: 0.35em;
}

:where(.wp-block-list) > li::marker {
	color: var(--f112-accent-text);
}

/* Zahlen in Daten-Schrift gleich breit (Tabellen, Uhrzeiten). */
:where(.has-mono-font-family, .is-style-ueberzeile, .is-style-kennung, .em-letzter-einsatz__kopf, .em-fahrzeug-karte__kopf, code, kbd, samp, td, th) {
	font-variant-numeric: tabular-nums;
}

:where(code, kbd, samp) {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	padding: 0.1em 0.35em;
	border-radius: var(--wp--custom--radius--s);
	background-color: var(--f112-line);
}

/* Große Schrift braucht engere Zeilen als Fließtext. */
:where(.has-x-large-font-size, .has-xx-large-font-size, .has-xxx-large-font-size, .has-plakat-font-size) {
	line-height: 1.1;
}

:where(.has-display-font-family) {
	line-height: 1.05;
}

/* Überschriften in Plakat-Größe (Einstieg, Fahrzeugname) stehen dicht wie auf einem Plakat –
   aber nicht enger als 1: Umlaut-Punkte über Versalien reichen bis 0,92 em über die Grundlinie
   und berührten sonst die Zeile darüber („FREIWILLIG / FÜR …“). */
:root :where(h1, h2, h3).has-plakat-font-size {
	line-height: 1;
}

/* Schlagzeilen in 3XL und Plakat nicht automatisch trennen: Mit ausgewogenen Zeilen würde
   sonst auch ein Wort getrennt, das allein in die Zeile passt („Einsatzbe-reit“).
   Zu lange Wörter brechen trotzdem um (overflow-wrap), statt überzustehen. */
:root :where(h1, h2, h3, p):is(.has-xxx-large-font-size, .has-plakat-font-size) {
	hyphens: manual;
}

/* Tabellen: Haarlinien statt Gitter, Kopfzeile in Daten-Schrift.
   :root hebt die Spezifität über die WordPress-Grundstile (volles Gitter). */
:root .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

:root .wp-block-table :is(th, td) {
	border: 0;
	border-block-end: 1px solid var(--f112-line);
	padding: 0.75rem 1.25rem 0.75rem 0;
	text-align: start;
	vertical-align: top;
}

:root .wp-block-table thead {
	border-block-end: 2px solid var(--f112-rule);
}

:root .wp-block-table th {
	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);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

:where(.wp-element-button) {
	min-height: 3rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:root :where(.wp-block-button.is-style-outline) > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--f112-btn-outline);
	color: var(--f112-btn-outline);
	padding: 0.75rem 1.5rem;
}

:root :where(.wp-block-button.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--f112-btn-outline);
	border-color: var(--f112-btn-outline);
	color: var(--f112-btn-outline-hover-text);
}

/* ==========================================================================
   5. Block-Stile
   ========================================================================== */

/* Absatz: Einleitung */
:where(.is-style-einleitung, .em-steckbrief__beschreibung) {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--f112-text-2);
}

/* Absatz: Überzeile – kleines Label über Überschriften */
:where(.is-style-ueberzeile, .is-style-kennung, .em-letzter-einsatz__kopf, .em-steckbrief__ueberzeile, .em-steckbrief__kennzahl > dt, .em-fahrzeug-karte__kopf, .em-fahrzeugdaten dt) {
	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;
	hyphens: manual;
	/* Passt ein Wort bei großer Schrift nicht in die Spalte (z. B. „LÖSCHGRUPPENFAHRZEUG“), bricht es um. */
	overflow-wrap: anywhere;
}

:where(.is-style-ueberzeile, .em-steckbrief__ueberzeile) {
	color: var(--f112-accent-text);
}

/* Absatz: Kennung – Daten, Nummern, Hinweise in Daten-Schrift */
:where(.is-style-kennung, .em-letzter-einsatz__kopf, .em-steckbrief__kennzahl > dt, .em-fahrzeug-karte__kopf, .em-fahrzeugdaten dt) {
	color: var(--f112-muted);
}

/* Absatz: Klein */
:where(.is-style-klein) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--f112-muted);
}

/* Gruppe: Karte – weiße Fläche mit Haarlinie.
   Höhere Spezifität, damit der Innenabstand auch bei „Inhaltsbreite“-Layouts greift;
   im Editor gesetzte Abstände (Inline-Stil) gewinnen weiterhin. */
.wp-block-group.is-style-karte {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--f112-line);
	border-radius: var(--wp--custom--radius--s);
	padding: var(--wp--preset--spacing--40);
}