/*
 * Feuerwehr 112 – Seitenaufbau
 *
 * Kopf, Menü, Fuß, Seitenkopf, Beitragslisten, Beitrag, Blättern.
 * Das Suchfeld (Suche, 404) gestaltet inhalte.css wie jeden Such-Block (Abschnitt 15).
 * Wird identisch auf der Seite und im Editor geladen.
 * Farben kommen aus dem Farbkontext (--f112-*, siehe base.css).
 *
 * Breakpoint Handy-Menü ↔ Desktop-Menü: 64em (1024 px).
 *
 * Inhalt
 * 1. Gerüst
 * 2. Kopf und Logo
 * 3. Menü
 * 4. Notruf
 * 5. Fuß, Kontakt, Social Media
 * 6. Seitenkopf, Brotkrumen, Archivtitel
 * 7. Beitragsliste und Blättern
 * 8. Beitrag
 * 9. Editor
 */

/* ==========================================================================
   1. Gerüst
   ========================================================================== */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Editor mit Vorlage: Kopf, Inhalt und Fuß stoßen ebenso aneinander. Ohne Vorlage enthält
   der Behälter die Blöcke des Inhalts – deren Abstände bleiben. */
.is-root-container:has(> .wp-block-template-part) > * {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Kopf bleibt beim Scrollen stehen – der Notruf ist immer erreichbar.
   Liegt über allen Inhalten (auch Knöpfen und Einbettungen von WordPress und Plugins),
   aber unter Admin-Leiste (99999) und Lightbox (100000). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Sprungmarken (Fußnoten, Links auf Abschnitte, Musterseite) landen unter dem stehenden Kopf
   (77 px Desktop, 65 px Tablet und Handy) mit etwas Luft, nicht dahinter. */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
}

@media (max-width: 600px) {
	html {
		scroll-padding-top: 5.5rem;
	}
}

/* Sprunglink „Zum Inhalt springen“ (nur beim Fokus sichtbar, Aussehen in base.css): fest im Fenster
   direkt unter dem Kopf, bündig mit dem Logo – auch auf einer gescrollten Seite, die dabei nicht nach
   oben springt. Die Unterkante des Kopfes misst das Menü-Skript beim Fokus (große Schrift macht den
   Kopf höher); ohne Skript gelten 65 px (Handy, Tablet) bzw. 77 px (Desktop). Bei großer Schrift
   bricht er innerhalb der Ränder um. WordPress setzt margin: -1px – sonst stünde der Link 1 px links
   vom Logo. */
:root .skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: calc(var(--f112-kopf-unten, var(--wp-admin--admin-bar--height, 0px) + 4rem + 1px) + 0.75rem);
	left: max(var(--wp--custom--gutter), (100% - var(--wp--style--global--wide-size)) / 2);
	box-sizing: border-box;
	max-width: calc(100% - 2 * var(--wp--custom--gutter));
	margin: 0;
	white-space: normal;
}

@media (min-width: 64em) {
	:root .skip-link.screen-reader-text:focus {
		top: calc(var(--f112-kopf-unten, var(--wp-admin--admin-bar--height, 0px) + 4.75rem + 1px) + 0.75rem);
	}
}

/* Endet eine Seite mit einem farbigen Abschnitt, Cover oder einer Warnmarkierung in voller Breite,
   schließt er direkt an den Fuß an. */
.f112-haupt:has(> .wp-block-post-content > :is(.alignfull.has-background, .wp-block-cover.alignfull, .wp-block-separator.is-style-warnung.alignfull):last-child) {
	padding-bottom: 0 !important;
}

/* ==========================================================================
   2. Kopf und Logo
   ========================================================================== */

.f112-kopf {
	border-block-end: 1px solid var(--f112-line);
}

.f112-kopf__zeile {
	min-height: 4rem;
	align-items: center;
}

.f112-kopf__zeile > :first-child {
	margin-inline-end: auto;
}

@media (max-width: 63.99em) {
	/* Handy: Logo, 112, Menü-Knopf – enger gesetzt, damit der Name in eine Zeile passt */
	:root .f112-kopf__zeile {
		gap: 0.75rem;
	}

	.f112-kopf__zeile > :nth-child(2) {
		order: 3;
	}
}

/* Große Schrift (Textgröße im Browser oder System, ab etwa 125 % auf dem Handy; em-Abfragen wachsen
   mit der Schrift): Logo in eine eigene Zeile, damit Notruf und Menü-Knopf im Bild bleiben. Bei
   normaler Schrift greift das erst unter 320 px Breite. */
@media (max-width: 20em) {
	:root .f112-kopf__zeile {
		flex-wrap: wrap;
		row-gap: 0;
		padding-block: 0.375rem;
	}

	:root .f112-kopf__zeile > :first-child {
		flex: 1 1 100%;
	}

	:root .f112-kopf__zeile > .f112-notruf {
		margin-inline-start: auto;
	}
}

@media (min-width: 64em) {
	.f112-kopf__zeile {
		min-height: 4.75rem;
	}
}

a.f112-logo {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem; /* Klickfläche ≥ 44 px */
	gap: 0.625rem;
	color: var(--f112-text);
	text-decoration: none;
}

a.f112-logo:hover {
	color: var(--f112-text);
}

.f112-logo__marke {
	box-sizing: border-box;
	flex: none;
	width: 26px;
	height: 26px;
	border: 2px solid var(--wp--preset--color--accent);
	background: repeating-linear-gradient(-45deg, var(--wp--preset--color--accent) 0 4px, transparent 4px 8px);
}

.f112-logo__bild {
	display: block;
	width: auto;
	height: 2.5rem;
	max-width: 10rem;
	object-fit: contain;
}

/* Auf dunklem Grund (Farbkontext in base.css): helle Fassung statt Logo, sonst Filter aus den Feuerwehr-Angaben. */
.f112-logo__bild--original {
	display: var(--f112-nur-hell);
}

.f112-logo__bild--hell {
	display: var(--f112-nur-dunkel);
}

.f112-logo__bild--weiss {
	filter: brightness(calc(1 - var(--f112-dunkel))) invert(var(--f112-dunkel));
}

.f112-logo__bild--umkehren {
	filter: invert(var(--f112-dunkel));
}

.f112-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

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

.f112-logo__zeile2 {
	margin-top: 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

@media (min-width: 64em) {
	a.f112-logo {
		gap: 0.875rem;
	}

	.f112-logo__marke {
		width: 34px;
		height: 34px;
		background: repeating-linear-gradient(-45deg, var(--wp--preset--color--accent) 0 5px, transparent 5px 10px);
	}

	.f112-logo__zeile1 {
		letter-spacing: 0.12em;
	}

	.f112-logo__zeile2 {
		margin-top: 0.3rem;
		font-size: 1.6875rem;
	}
}

/* ==========================================================================
   3. Menü
   ========================================================================== */

.f112-menue__liste,
.f112-menue__unterliste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.f112-menue__link,
.f112-menue__oeffner {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--f112-text-2);
}

button.f112-menue__oeffner,
button.f112-menue__schalter {
	margin: 0;
	padding: 0;
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

button.f112-menue__oeffner {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--f112-text-2);
}

.f112-menue__pfeil {
	flex: none;
	transition: transform 0.15s ease;
}

[aria-expanded="true"] > .f112-menue__pfeil {
	transform: rotate(180deg);
}

/* Untermenü öffnet über seinen Knopf (aria-expanded) */
.f112-menue--haupt .f112-menue__unterliste {
	display: none;
}

.f112-menue--haupt .f112-menue__oeffner[aria-expanded="true"] + .f112-menue__unterliste {
	display: block;
}

/* --- Handy und Tablet --------------------------------------------------- */
@media (max-width: 63.99em) {
	button.f112-menue__schalter {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1.5px solid var(--f112-rule);
		border-radius: var(--wp--custom--radius--s);
		color: var(--f112-text);
	}

	.f112-menue__strich-offen,
	.f112-menue__schalter[aria-expanded="true"] .f112-menue__strich-zu {
		display: none;
	}

	.f112-menue__schalter[aria-expanded="true"] .f112-menue__strich-offen {
		display: inline;
	}

	.f112-js .f112-menue--haupt > .f112-menue__liste {
		display: none;
	}

	.f112-js .f112-menue--haupt.is-offen > .f112-menue__liste {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100dvh - 4rem);
		overflow-y: auto;
		padding: 0.5rem var(--wp--custom--gutter) 1.5rem;
		background-color: var(--wp--preset--color--surface);
		border-block-end: 1px solid var(--f112-line);
	}

	.f112-menue--haupt .f112-menue__punkt {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-block-end: 1px solid var(--f112-line);
	}

	.f112-menue--haupt .f112-menue__punkt > .f112-menue__link {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 3.25rem;
		font-size: 1.125rem;
		color: var(--f112-text);
		text-align: start;
	}

	.f112-menue--haupt .f112-menue__oeffner--pfeil {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--f112-text);
	}

	.f112-menue--haupt .f112-menue__unterliste {
		width: 100%;
		padding: 0 0 0.75rem 1rem;
	}

	.f112-menue--haupt .f112-menue__unterliste .f112-menue__punkt {
		border: 0;
	}

	.f112-menue--haupt .f112-menue__unterliste .f112-menue__link {
		min-height: 2.75rem;
		font-size: 1rem;
		color: var(--f112-text-2);
	}

	/* Aktuelle Seite rot und unterstrichen – nicht nur an der Farbe erkennbar (WCAG 1.4.1) */
	.f112-menue--haupt .is-aktiv > .f112-menue__link {
		color: var(--wp--preset--color--accent);
		text-decoration: underline 3px;
		text-underline-offset: 0.4em;
	}
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 64em) {
	.f112-menue__schalter {
		display: none;
	}

	.f112-menue--haupt > .f112-menue__liste {
		display: flex;
		align-items: stretch;
	}

	.f112-menue--haupt .f112-menue__liste > .f112-menue__punkt {
		position: relative;
		display: flex;
		align-items: center;
	}

	.f112-menue--haupt .f112-menue__liste > .f112-menue__punkt > .f112-menue__link {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		min-height: 4.75rem;
		padding: 0 0.875rem;
		font-size: 1rem;
	}

	.f112-menue--haupt .f112-menue__liste > .f112-menue__punkt > .f112-menue__link:hover,
	.f112-menue--haupt .f112-menue__liste > .f112-menue__punkt.is-aktiv > .f112-menue__link {
		color: var(--f112-text);
	}

	.f112-menue--haupt .f112-menue__liste > .f112-menue__punkt.is-aktiv > .f112-menue__link {
		box-shadow: inset 0 -3px 0 var(--wp--preset--color--accent);
	}

	.f112-menue--haupt .f112-menue__oeffner--pfeil {
		display: inline-flex;
		align-items: center;
		min-height: 4.75rem;
		margin-inline-start: -0.5rem;
		padding-inline-end: 0.5rem;
	}

	.f112-menue--haupt .f112-menue__unterliste {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		min-width: 15rem;
		padding: 0.5rem 0;
		background-color: var(--wp--preset--color--surface);
		border: 1px solid var(--f112-line);
		border-block-start: 2px solid var(--wp--preset--color--accent);
	}

	.f112-menue--haupt .f112-menue__unterliste .f112-menue__link {
		display: block;
		padding: 0.625rem 1.25rem;
		font-size: 0.9375rem;
	}

	.f112-menue--haupt .f112-menue__unterliste .f112-menue__link:hover {
		color: var(--f112-text);
		background-color: var(--wp--preset--color--surface-2);
	}

	/* Aktuelle Seite im Untermenü wie im Handy-Menü; der Hauptpunkt trägt den Balken */
	.f112-menue--haupt .f112-menue__unterliste .is-aktiv > .f112-menue__link {
		color: var(--wp--preset--color--accent);
		text-decoration: underline 3px;
		text-underline-offset: 0.4em;
	}
}

/* Kontrastmodus: Farbe und Balken (box-shadow) der aktuellen Seite überschreibt Windows – auch den
   Hauptpunkt am Desktop unterstreichen. */
@media (forced-colors: active) {
	.f112-menue--haupt .is-aktiv > .f112-menue__link {
		box-shadow: none;
		text-decoration: underline 3px;
		text-underline-offset: 0.4em;
	}
}

/* Maus: Untermenü auch beim Darüberfahren */
@media (min-width: 64em) and (hover: hover) {
	.f112-menue--haupt .f112-menue__punkt:hover > .f112-menue__unterliste {
		display: block;
	}
}

/* --- Liste und Zeile (Fuß) ---------------------------------------------- */
/* Der Innenabstand der Links (Klickfläche) soll die erste und letzte Zeile nicht verschieben:
   erste Zeile steht auf der Linie der Nachbarspalten (z. B. Kontakt) */
.f112-menue--liste .f112-menue__liste {
	display: grid;
	margin-block: -0.625rem;
}

/* Klickfläche ≥ 44 px (Design-Regel für Menüs) */
.f112-menue--liste .f112-menue__link,
.f112-menue--zeile .f112-menue__link {
	display: inline-block;
	padding: 0.625rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--f112-muted);
}

.f112-menue--liste .f112-menue__link:hover,
.f112-menue--zeile .f112-menue__link:hover {
	color: var(--f112-text);
	text-decoration: underline;
}

.f112-menue--zeile .f112-menue__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
	margin-block: -0.375rem; /* Zeile bleibt so hoch wie vor der 44-px-Klickfläche */
}

.f112-menue--zeile .f112-menue__link {
	padding-block: 0.75rem; /* kleinere Schrift: mehr Innenabstand für 44 px */
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   4. Notruf
   ========================================================================== */

a.f112-notruf--button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 0.75rem;
	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--display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

a.f112-notruf--button:hover {
	background-color: var(--wp--custom--color--accent-hover);
	color: var(--wp--preset--color--surface);
}

.f112-notruf__wort {
	display: none;
}

@media (min-width: 64em) {
	a.f112-notruf--button {
		padding: 0 1rem;
	}

	.f112-notruf__wort {
		display: inline;
	}
}

a.f112-notruf--gross {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--f112-accent-text);
	text-decoration: none;
}

a.f112-notruf--gross:hover {
	color: var(--f112-text);
}

/* ==========================================================================
   5. Fuß, Kontakt, Social Media
   ========================================================================== */

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

.f112-fuss .is-style-kennung {
	font-weight: 600;
	color: var(--f112-text);
}

.f112-fuss .f112-logo__zeile2 {
	font-size: 1.875rem;
}

:root .f112-fuss .f112-social {
	margin-block-start: var(--wp--preset--spacing--40);
}

:root .f112-fuss__leiste {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	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);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Kurze Angaben nicht trennen („5. Be-reich“) */
:root .f112-fuss__leiste :is(p, a) {
	hyphens: manual;
}

.f112-angabe {
	margin: 0;
}

address.f112-kontakt {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	line-height: 1.6;
}

a.f112-kontakt__link {
	/* Klickfläche ≥ 44 px, ohne die Zeilenabstände der Adresse zu verändern */
	margin-block: -0.625rem;
	padding-block: 0.625rem;
	color: var(--f112-text);
}

ul.f112-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

a.f112-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--f112-line);
	border-radius: var(--wp--custom--radius--s);
	color: var(--f112-text);
}

a.f112-social__link:hover {
	border-color: var(--f112-text);
	color: var(--f112-text);
}

/* ==========================================================================
   6. Seitenkopf, Brotkrumen, Archivtitel
   ========================================================================== */

/* Im Seitenkopf eng – auch vor Überzeilen. Doppelte Klasse, damit die Regel den Abstand
   vor Zwischenüberschriften (base.css, Spezifität 0,3,1) sicher übertrifft. */
:root .f112-seitenkopf.f112-seitenkopf > :not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--30);
}

:root .f112-seitenkopf + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.f112-pfad__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--f112-muted);
}

.f112-pfad__liste li + li::before {
	content: "/";
	margin-inline-end: 0.5rem;
}

/* Kleine Textlinks: Innenabstand vergrößert bei Inline-Elementen nur die Klickfläche (≥ 24 px, WCAG 2.5.8), nicht die Zeile */
.f112-pfad__liste a {
	padding-block: 0.375rem;
	color: inherit;
	text-decoration: none;
}

.f112-pfad__liste a:hover {
	color: var(--f112-text);
	text-decoration: underline;
}

.f112-pfad__liste [aria-current] {
	color: var(--f112-text);
}

/* Der Archivtitel ist kein Layout-Container: Browser-Abstände der H1 zurücksetzen,
   damit Brotkrumen → Titel und Überzeile → Titel wie auf Seiten und Beiträgen 16 px sind. */
:root .f112-archivtitel > * {
	margin-block: 0;
}

:root .f112-archivtitel > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Links in Überzeile und Kennung (z. B. Kategorien) ohne Unterstreichung */
:root :is(.is-style-ueberzeile, .is-style-kennung) a {
	padding-block: 0.375rem; /* Klickfläche ≥ 24 px, siehe Brotkrumen */
	color: inherit;
	text-decoration: none;
}

:root :is(.is-style-ueberzeile, .is-style-kennung) a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   7. Beitragsliste und Blättern
   ========================================================================== */

:root .f112-beitragsliste .wp-block-post-template {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.f112-beitrag .wp-block-post-featured-image {
	margin: 0;
}

.f112-beitrag .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--s);
}

/* Ersatzbild (inc/angaben.php) für Beiträge ohne Bild: Nacht-Fläche, Logo der Wehr oder Marke, Kategorie. */
.f112-ersatzbild {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--s);
	container-type: inline-size;
}

.f112-ersatzbild > a {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.f112-ersatzbild__marke {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-start: var(--wp--preset--spacing--40);
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	border: 2px solid var(--f112-accent-text);
	background: repeating-linear-gradient(-45deg, var(--f112-accent-text) 0 5px, transparent 5px 10px);
}

/* Mit Logo in den Feuerwehr-Angaben steht es statt der Marke da – helle Fassung bzw. Filter wie im Fuß. */
.f112-ersatzbild__logo {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-start: var(--wp--preset--spacing--40);
}

.f112-ersatzbild__logo .f112-logo__bild {
	height: 3rem;
	max-width: 12rem;
}

.f112-ersatzbild__wort {
	position: absolute;
	inset-inline: var(--wp--preset--spacing--40);
	inset-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	/* Nach der Breite der Kachel, damit „Versammlung“ auch in schmalen Spalten in eine Zeile passt. */
	font-size: clamp(1.5rem, 13cqi, 3rem);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--f112-text);
	overflow-wrap: anywhere;
	hyphens: manual;
}

:root .f112-beitrag > .f112-beitrag__text {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--f112-rule);
}

.f112-beitrag__meta {
	row-gap: 0;
}

/* Titel sitzt direkt unter der Datumszeile (nicht der große Abstand vor Zwischenüberschriften).
   H2 in Archiven, H3 im Abschnitt „Aus der Wache“. */
:root .f112-beitrag__text > :is(h2, h3).f112-beitrag__titel {
	margin-block-start: var(--wp--preset--spacing--20);
}

:root .f112-beitrag__titel {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.15;
	text-transform: none;
}

.f112-beitrag__titel a {
	color: var(--f112-text);
	text-decoration: none;
}

.f112-beitrag__titel a:hover {
	color: var(--f112-link);
	text-decoration: underline;
}

.wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Abschnitt „Aus der Wache“: Auf dem Tablet stünde der dritte Beitrag allein in der Reihe –
   dort als Liste mit Bild links und Text rechts. */
@media (min-width: 37.5625em) and (max-width: 63.9375em) {
	:root .f112-beitragsliste--abschnitt .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--50);
	}

	:root .f112-beitragsliste--abschnitt .f112-beitrag {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	:root .f112-beitragsliste--abschnitt .f112-beitrag > .f112-beitrag__text {
		margin-block-start: 0;
	}
}

:root .f112-blaettern {
	margin-block-start: var(--wp--preset--spacing--60);
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.f112-blaettern a,
.f112-blaettern .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--f112-line);
	border-radius: var(--wp--custom--radius--s);
	color: var(--f112-text);
	text-decoration: none;
}

.f112-blaettern .page-numbers.current {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

.f112-blaettern .page-numbers.dots {
	border-color: transparent;
}

/* ==========================================================================
   8. Beitrag
   ========================================================================== */

:root .f112-titel-beitrag {
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: 0;
	line-height: 1.05;
	text-transform: none;
}

.f112-beitragsbild img {
	border-radius: var(--wp--custom--radius--s);
}

:root .f112-beitragsbild + .wp-block-post-content {
	margin-block-start: var(--wp--preset--spacing--60);
}

:root .f112-beitrag-fuss {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 2px solid var(--f112-rule);
}

.f112-nachbarn {
	align-items: flex-start;
}

.f112-nachbarn .wp-block-post-navigation-link {
	max-width: calc(50% - 1rem);
}

@media (max-width: 37.5em) {
	.f112-nachbarn .wp-block-post-navigation-link {
		max-width: none;
	}
}

.f112-nachbarn .post-navigation-link-next {
	margin-inline-start: auto;
	text-align: end;
}

.f112-nachbarn a {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
	color: var(--f112-text);
	text-decoration: none;
	hyphens: auto;
	overflow-wrap: break-word;
}

.f112-nachbarn .post-navigation-link__label {
	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-muted);
}

.f112-nachbarn a:hover .post-navigation-link__title {
	color: var(--f112-link);
	text-decoration: underline;
}

/* Im Beitragstext eine Stufe kleiner, damit der Beitragstitel (H1) führt.
   .single-post = Seite, .post-type-post = Editor. */
:is(.single-post, .post-type-post) .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

:is(.single-post, .post-type-post) .wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--large);
}

/* ==========================================================================
   9. Editor
   ========================================================================== */

.f112-platzhalter {
	padding: 0.75rem 1rem;
	border: 1px dashed currentColor;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}

/* In der Editor-Vorschau führen Links nirgendwohin. */
.editor-styles-wrapper .f112-ssr a,
.editor-styles-wrapper .f112-ssr button {
	pointer-events: none;
}