/*
 * Feuerwehr 112 – Inhaltselemente
 *
 * Gestaltung der WordPress-Blöcke im Inhalt. Liest nur die Variablen des Farbkontexts
 * (base.css, Abschnitt 1), damit alles auf hellen und dunklen Flächen lesbar bleibt.
 * Wird identisch auf der Seite und im Editor geladen (Editor = Seite).
 *
 * Inhalt
 * 1. Zitat und Pullquote
 * 2. Code, vorformatierter Text und Gedicht
 * 3. Details und Akkordeon
 * 4. Trenner
 * 5. Datei-Download
 * 6. Tabellen: Streifen, auf dem Handy als Karten
 * 7. Bilder: Bildunterschrift, umflossen, breit und voll
 * 8. Galerie
 * 9. Cover (Bild mit Text darüber)
 * 10. Bild und Text
 * 11. Lightbox („Beim Klicken vergrößern“)
 * 12. Video und Einbettungen (2-Klick-Lösung)
 * 13. Spalten
 * 14. Audio
 * 15. Suche
 * 16. Fußnoten
 */

/* ==========================================================================
   1. Zitat und Pullquote
   ========================================================================== */

/* Zitat: rote Linie links, Quelle in Daten-Schrift. */
:root :where(.wp-block-quote) {
	border-inline-start: 3px solid var(--f112-accent-text);
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--40);
	color: var(--f112-text-2);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

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

:root :where(.wp-block-quote, .wp-block-pullquote) cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--f112-muted);
}

/* Pullquote: hervorgehobener Satz zwischen zwei Linien, in der Titelschrift.
   Ohne :where(), damit die WordPress-Grundstile (zentriert, 4em Innenabstand) nicht greifen;
   die Ausrichtung aus dem Editor (has-text-align-*) wirkt weiterhin auf das Zitat. */
:root .wp-block-pullquote {
	margin-block-end: 0;
	border-block: 2px solid var(--f112-rule);
	padding: var(--wp--preset--spacing--50) 0;
	color: var(--f112-text);
	font-size: var(--wp--preset--font-size--medium);
	text-align: start;
}

:root .wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

/* ==========================================================================
   2. Code, vorformatierter Text und Gedicht
   ========================================================================== */

:root :where(.wp-block-code, .wp-block-preformatted) {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--f112-line);
	border-radius: var(--wp--custom--radius--s);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--f112-text);
}

/* Code im Block nicht zusätzlich hinterlegen (das gilt nur für Code im Fließtext). */
:root :where(.wp-block-code) code {
	padding: 0;
	background: none;
	font-size: inherit;
}

/* Gedicht: behält die Zeilenumbrüche, steht aber in der Textschrift (nicht wie Code im Kasten).
   Kursiv und eingerückt, damit es sich vom Fließtext abhebt. */
:root :where(.wp-block-verse) {
	padding-inline-start: var(--wp--preset--spacing--40);
	font-family: inherit;
	font-size: inherit;
	font-style: italic;
	line-height: 1.6;
	color: var(--f112-text);
}

/* ==========================================================================
   3. Details und Akkordeon
   Ein „Details“-Block ist ein einzelner Aufklapp-Bereich; mehrere hintereinander
   oder der Block „Akkordeon“ bilden eine Liste mit Haarlinien.
   ========================================================================== */

:root :where(.wp-block-details, .wp-block-accordion-item) {
	border-block-end: 1px solid var(--f112-line);
}

:root :where(.wp-block-details:not(.wp-block-details + .wp-block-details), .wp-block-accordion) {
	border-block-start: 1px solid var(--f112-line);
}

/* Direkt aufeinanderfolgende Details-Blöcke schließen bündig an. */
:root :where(.is-layout-flow, .is-layout-constrained) > .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

/* Rechts Platz für das Zeichen: Abstand S + Zeichenbreite (Mono 0,6 em bei 1,5 rem). */
:root :where(.wp-block-details) > summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding-block: var(--wp--preset--spacing--30);
	padding-inline-end: calc(var(--wp--preset--spacing--30) + 0.9rem);
	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);
	cursor: pointer;
	list-style: none;
}

:root :where(.wp-block-details) > summary::-webkit-details-marker {
	display: none;
}

/* Plus-Zeichen rechts, wird beim Öffnen zum Minus. Außerhalb des Textflusses, damit es beim
   Unterstreichen der Beschriftung nicht mit unterstrichen wird. */
:root :where(.wp-block-details) > summary::after {
	content: "+";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--f112-accent-text);
}

:root :where(.wp-block-details[open]) > summary::after {
	content: "−";
}

/* Unterstreichen nur mit Maus: Auf dem Handy bliebe der Hover-Zustand nach dem Antippen stehen,
   bis man woanders hintippt (Gerätetest 8d). Details und Akkordeon gleich: nur die Beschriftung. */
@media (hover: hover) {
	:root :where(.wp-block-details) > summary:hover,
	:root .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.18em;
	}
}

@media (hover: none) {
	:root .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
		text-decoration: none;
	}
}

:root :where(.wp-block-details) > summary:focus-visible,
:root :where(.wp-block-accordion-heading__toggle):focus-visible {
	outline: 2px solid var(--f112-focus);
	outline-offset: 2px;
}

:root :where(.wp-block-details) > :not(summary) {
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* Details hat Fluss-Layout; dessen Regel „> :last-child“ (0,2,0) nähme dem letzten Absatz den Abstand zur Linie. */
:root :where(.wp-block-details) > :last-child:not(summary) {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Akkordeon: Überschrift behält ihre Ebene (h2–h6), wird aber kompakt gesetzt.
   Ohne :where(), damit die Stile der Überschriften-Ebene nicht greifen. */
:root .wp-block-accordion-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}

:root :where(.wp-block-accordion-heading__toggle) {
	gap: var(--wp--preset--spacing--30);
	min-height: 3rem;
	padding-block: var(--wp--preset--spacing--30);
}

/* Zeichen wie bei Details: + wird beim Öffnen zum − (WordPress dreht das + sonst zum ×). Das + im
   Inhalt des Blocks blendet das Theme aus und setzt das Zeichen selbst – Fläche wie bei WordPress
   (1,2 em der Zeichengröße 1,5 rem). */
:root .wp-block-accordion-heading__toggle-icon {
	width: 1.8rem;
	height: 1.8rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0;
	font-weight: 400;
	color: var(--f112-accent-text);
}

:root .wp-block-accordion-heading__toggle-icon::before {
	content: "+";
	font-size: 1.5rem;
	line-height: 1.2;
}

:root .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: none;
}

:root .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before {
	content: "−";
}

:root :where(.wp-block-accordion-panel) {
	padding-block-end: var(--wp--preset--spacing--40);
}

:root :where(.is-layout-flow, .is-layout-constrained) > .wp-block-accordion-item + .wp-block-accordion-item,
:root .wp-block-accordion > .wp-block-accordion-item + .wp-block-accordion-item {
	margin-block-start: 0;
}

/* ==========================================================================
   4. Trenner
   Standard: kurzer roter Balken links (bündig mit dem Text). „Breit“: Haarlinie
   über die ganze Breite. „Punkte“: drei Punkte. Farben kommen aus dem Farbkontext;
   die Farbauswahl ist für Trenner abgeschaltet (theme.json).
   Der Balken ist ein Hintergrund, weil das Layout Trenner immer auf volle
   Inhaltsbreite zentriert.
   ========================================================================== */

:root .wp-block-separator {
	height: 3px;
	border: 0;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 0 / 4rem 100%;
	color: var(--f112-accent-text);
	opacity: 1;
}

/* Zentriert ausgerichtete Abschnitte: Balken mittig. */
:root :where(.has-text-align-center, .is-content-justification-center) > .wp-block-separator {
	background-position: 50% 0;
}

:root .wp-block-separator.is-style-wide {
	height: 1px;
	background-size: 100% 100%;
	color: var(--f112-line);
}

:root .wp-block-separator.is-style-dots {
	height: auto;
}

:root .wp-block-separator.is-style-dots::before {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 2.25rem;
	letter-spacing: 1em;
	padding-inline-start: 1em;
}

/* ==========================================================================
   5. Datei-Download
   Zeile mit Dateiname und Kontur-Button – der gefüllte rote Button bleibt
   der wichtigsten Handlungsaufforderung einer Seite vorbehalten.
   ========================================================================== */

/* :not() wie in den WordPress-Grundstilen, damit deren Schriftgröße (0.8em) nicht greift. */
:root .wp-block-file:not(.wp-element-button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--f112-line);
	border-radius: var(--wp--custom--radius--s);
	font-size: var(--wp--preset--font-size--medium);
}

/* Im Editor stecken Link und Button in eigenen Hüllen – sie ordnen sich wie auf der Seite in die Zeile ein. */
:root :where(.wp-block-file__content-wrapper, .wp-block-file__button-richtext-wrapper) {
	display: contents;
}

/* Vorschau (eingebettetes PDF) steht über der Zeile in voller Breite. */
:root :where(.wp-block-file) > .wp-block-file__embed {
	flex-basis: 100%;
	margin-block-end: 0;
	border: 1px solid var(--f112-line);
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button) {
	flex: 1 1 12rem;
	font-weight: 500;
	overflow-wrap: anywhere;
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button)::before {
	content: "Datei";
	display: inline-block; /* nicht „block“: sonst erbt die Beschriftung die Unterstreichung des Links */
	width: 100%;
	margin-block-end: 0.25rem;
	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);
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button)[href$=".pdf" i]::before {
	content: "PDF";
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button):is([href$=".doc" i], [href$=".docx" i], [href$=".odt" i])::before {
	content: "Text";
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button):is([href$=".xls" i], [href$=".xlsx" i], [href$=".ods" i])::before {
	content: "Tabelle";
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button)[href$=".zip" i]::before {
	content: "ZIP";
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button):is([href$=".mp3" i], [href$=".wav" i], [href$=".ogg" i], [href$=".m4a" i])::before {
	content: "Audio";
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button):is([href$=".mp4" i], [href$=".webm" i], [href$=".mov" i])::before {
	content: "Video";
}

:root :where(.wp-block-file, .wp-block-file__content-wrapper) > a:not(.wp-block-file__button):is([href$=".jpg" i], [href$=".jpeg" i], [href$=".png" i], [href$=".webp" i])::before {
	content: "Bild";
}

/* Auf der Seite mit Größe aus der Mediathek, z. B. „PDF · 180 KB“ (inc/inhalte.php). */
:root :where(.wp-block-file) > a:not(.wp-block-file__button)[data-datei]::before {
	content: attr(data-datei);
}

:root .wp-block-file .wp-block-file__button {
	margin-inline-start: 0;
	padding: 0.625rem 1.25rem;
	border-color: var(--f112-btn-outline);
	background-color: transparent;
	color: var(--f112-btn-outline);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
}

:root .wp-block-file .wp-block-file__button:hover {
	background-color: var(--f112-btn-outline);
	color: var(--f112-btn-outline-hover-text);
	opacity: 1;
}

/* ==========================================================================
   6. Tabellen
   ========================================================================== */

/* Stil „Streifen“: jede zweite Zeile leicht hinterlegt – auch auf dunklen Flächen. */
:root .wp-block-table.is-style-stripes {
	border-block-end: 0;
}

:root .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: color-mix(in srgb, var(--f112-line) 55%, transparent);
}

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

/* Tabellen mit Kopfzeile und mindestens drei Spalten werden auf dem Handy zu Karten:
   jede Zeile ein Block, jede Zelle mit ihrer Spaltenüberschrift davor.
   Die Beschriftungen setzt inc/inhalte.php (data-label). */
@media (max-width: 37.5em) {
	:root .wp-block-table.is-stapel thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	:root .wp-block-table.is-stapel :is(table, tbody, tr, td) {
		display: block;
	}

	:root .wp-block-table.is-stapel tr {
		padding-block: 0.5rem;
		border-block-end: 1px solid var(--f112-line);
	}

	:root .wp-block-table.is-stapel tbody tr:first-child {
		border-block-start: 2px solid var(--f112-rule);
	}

	:root .wp-block-table.is-stapel td {
		display: grid;
		grid-template-columns: minmax(6rem, 38%) 1fr;
		gap: 0.75rem;
		padding: 0.375rem 0;
		border: 0;
	}

	:root .wp-block-table.is-stapel td::before {
		content: attr(data-label);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: 1.6;
		text-transform: uppercase;
		color: var(--f112-muted);
	}

	/* Leere Zellen weglassen, statt nur die Beschriftung zu zeigen. */
	:root .wp-block-table.is-stapel td:empty {
		display: none;
	}

	:root .wp-block-table.is-stapel.is-style-stripes tbody tr:nth-child(odd) td {
		background: none;
	}

	:root .wp-block-table.is-stapel.is-style-stripes tbody tr {
		padding-inline: 0.75rem;
	}
}

/* ==========================================================================
   7. Bilder
   Ecken 2 px wie Buttons, in voller Breite ohne Rundung. Bildunterschrift
   links und dicht am Bild (Farbe und Größe: theme.json, Element „caption“).
   ========================================================================== */

:root :where(.wp-block-image) img {
	border-radius: var(--wp--custom--radius--s);
}

:root :where(.wp-block-image.alignfull) img {
	border-radius: 0;
}

/* Gilt für alle Blöcke mit Bildunterschrift (Bild, Galerie, Tabelle, Video). */
:root .wp-element-caption {
	margin-block: 0.5rem 0;
	text-align: start;
}

/* Bild und Video in voller Breite: Unterschrift steht in der Textspalte, nicht am Bildschirmrand. */
:root :is(.wp-block-image, .wp-block-video, .wp-block-embed).alignfull > figcaption {
	padding-inline: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--content-size)) / 2));
}

/* Im Text umflossen (links/rechts): höchstens halbe Textbreite und bündig an der
   Textspalte – WordPress setzt solche Bilder sonst an den Rand der ganzen Seite. */
:root :where(.is-layout-flow, .is-layout-constrained) > .wp-block-image:is(.alignleft, .alignright) {
	display: block;
	width: min(50%, calc(var(--wp--style--global--content-size) / 2));
	/* So groß wie der Abstand vor Zwischenüberschriften: Deren eigener Abstand entfällt,
	   wenn sie unter dem Bild beginnen (clear). */
	margin-block-end: var(--wp--preset--spacing--50);
}

:root :where(.is-layout-constrained) > .wp-block-image.alignleft {
	margin-inline: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) var(--wp--preset--spacing--40);
}

:root :where(.is-layout-constrained) > .wp-block-image.alignright {
	margin-inline: var(--wp--preset--spacing--40) max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

:root :where(.wp-block-image:is(.alignleft, .alignright)) img {
	width: 100%;
}

/* WordPress setzt die Unterschrift umflossener Bilder als Tabellen-Beschriftung. */
:root .wp-block-image:is(.alignleft, .alignright) > figcaption {
	display: block;
}

/* Auf dem Handy wäre der Text neben dem Bild zu schmal: Bild steht frei darüber. */
@media (max-width: 37.5em) {
	:root :where(.is-layout-flow, .is-layout-constrained) > .wp-block-image:is(.alignleft, .alignright) {
		float: none;
		width: auto;
		margin-inline: 0;
		margin-block-end: 0;
	}
}

/* Zwischenüberschriften (H2, H3), breite Elemente und Trenner beginnen unter umflossenen
   Bildern; Abschnitte umschließen ihre umflossenen Bilder. */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(h2, h3, .alignwide, .alignfull, .wp-block-separator) {
	clear: both;
}

:root :where(.wp-block-post-content, .wp-block-group, .wp-block-column):where(.is-layout-flow, .is-layout-constrained)::after {
	content: "";
	display: table;
	clear: both;
}

/* Breite Bilder, Galerien, Cover, Bild+Text und Videos bekommen mehr Luft zum Text davor und danach.
   Folgt eine Überschrift, gilt deren (größerer) Abstand. */
:root :where(.is-layout-flow, .is-layout-constrained) > :where(.wp-block-image, .wp-block-gallery, .wp-block-cover, .wp-block-media-text, .wp-block-video, .wp-block-embed):where(.alignwide, .alignfull):not(:first-child),
:root :where(.is-layout-flow, .is-layout-constrained) > :where(.wp-block-image, .wp-block-gallery, .wp-block-cover, .wp-block-media-text, .wp-block-video, .wp-block-embed):where(.alignwide, .alignfull) + :not(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   8. Galerie
   Bildunterschriften als dunkles Band am unteren Bildrand – auf jedem Foto lesbar.
   Abstand zwischen den Bildern: theme.json (8 px).
   ========================================================================== */

/* Unterschrift der ganzen Galerie wie alle Bildunterschriften links (WordPress: mittig). */
:root .wp-block-gallery.has-nested-images > figcaption {
	text-align: start;
}

/* Weichzeichner-Verlauf von WordPress hinter der Unterschrift entfällt. */
:root .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
}

:root .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	max-height: 60%;
	padding: 0.375rem 0.625rem;
	border-radius: 0 0 var(--wp--custom--radius--s) var(--wp--custom--radius--s);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 85%, transparent);
	color: var(--wp--custom--color--ink-text);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	text-align: start;
	text-shadow: none;
	scrollbar-gutter: auto;
}

/* ==========================================================================
   9. Cover (Bild mit Text darüber)
   Die Abdunklung ist immer Nacht und mindestens 65 % stark – so erreicht heller
   Text auf jedem Foto WCAG AA (auch auf weißen Bildstellen mindestens 4,5 : 1;
   60 % ergäben dort nur 4,1 : 1). Den Mischton, den WordPress beim Einfügen aus dem
   Foto errechnet, ersetzt das Theme durch Nacht (!important gegen die Inline-Farbe).
   Text im Cover ist immer hell (Farbkontext in base.css).
   ========================================================================== */

:root .wp-block-cover {
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--custom--gutter);
	color: var(--f112-text);
}

:root .wp-block-cover:not(.alignfull) {
	border-radius: var(--wp--custom--radius--s);
}

:root .wp-block-cover > span.wp-block-cover__background:not([class*="-background-color"]) {
	background-color: var(--wp--preset--color--ink) !important;
}

/* Stufen 0–60 % auf 65 % anheben. 50 % (Vorgabe von WordPress) hat keine eigene Klasse. */
:root .wp-block-cover > span.wp-block-cover__background:is(:not([class*="has-background-dim-"]), .has-background-dim-0, .has-background-dim-10, .has-background-dim-20, .has-background-dim-30, .has-background-dim-40, .has-background-dim-50, .has-background-dim-60) {
	opacity: 0.65;
}

/* ==========================================================================
   10. Bild und Text
   Ohne Hintergrund: Text bündig neben dem Bild. Mit Hintergrund: Fläche mit
   Innenabstand (Farbkontext wie bei Gruppen). Auf dem Handy untereinander.
   ========================================================================== */

:root .wp-block-media-text > .wp-block-media-text__content {
	padding: 0 0 0 var(--wp--preset--spacing--60);
}

/* Der Block hat kein eigenes Layout: Abstände wie im Fließtext (Überschriften-Rhythmus
   aus base.css, Abschnitt 3). */
:root :where(.wp-block-media-text__content) > * {
	margin-block: var(--wp--style--block-gap) 0;
}

:root :where(.wp-block-media-text__content) > :first-child {
	margin-block-start: 0;
}

:root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding: 0 var(--wp--preset--spacing--60) 0 0;
}

:root .wp-block-media-text.has-background > .wp-block-media-text__content {
	padding: var(--wp--preset--spacing--60);
}

:root .wp-block-media-text:not(.has-background) > .wp-block-media-text__media img {
	border-radius: var(--wp--custom--radius--s);
}

:root .wp-block-media-text.has-background:not(.alignfull) {
	border-radius: var(--wp--custom--radius--s);
	overflow: hidden;
}

@media (max-width: 600px) {
	:root .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40) 0 0;
	}

	:root .wp-block-media-text.is-stacked-on-mobile.has-background > .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40) var(--wp--custom--gutter) var(--wp--preset--spacing--50);
	}
}

/* ==========================================================================
   11. Lightbox („Beim Klicken vergrößern“)
   WordPress-eigene Lightbox, standardmäßig an (theme.json), je Bild abschaltbar.
   Fläche Nacht statt Seitenhintergrund, Bedienknöpfe mindestens 44 px.
   !important überschreibt die Inline-Farben, die WordPress dafür setzt.
   ========================================================================== */

/* Eigene Ebene je Bild: Der Knopf (z-index 100 von WordPress) liegt sonst beim Scrollen
   über dem stehenden Kopf. */
:root .wp-lightbox-container {
	isolation: isolate;
}

/* Vergrößern-Knopf auf dem Bild (erscheint bei Maus-Hover und Tastaturfokus). */
:root .wp-lightbox-container .lightbox-trigger,
:root .wp-lightbox-container .lightbox-trigger:is(:hover, :focus, :not(:hover):not(:active):not(.has-background)) {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--s);
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent);
	backdrop-filter: none;
}

:root .wp-lightbox-container .lightbox-trigger svg {
	width: 1rem;
	height: 1rem;
}

/* Beschnittene Vorschau, Lightbox mit ganzem Bild (inc/inhalte.php): Knopf in der Ecke der Vorschau,
   Abstand wie bei WordPress. !important überschreibt die Lage, die WordPress inline setzt. */
:root .f112-lightbox-ganz > .lightbox-trigger {
	top: 16px !important;
	right: 16px !important;
}

/* Fokusrahmen innen, damit er auf hellen Fotos sichtbar bleibt. */
:root .wp-lightbox-container .lightbox-trigger:focus-visible {
	outline: 3px solid var(--wp--custom--color--ink-text);
	outline-offset: -6px;
}

.wp-lightbox-overlay {
	--f112-focus: var(--wp--custom--color--ink-text);
	color: var(--wp--custom--color--ink-text);
}

/* Höhe des sichtbaren Bereichs statt 100vh: In Safari (iPhone) endet die Fläche bei eingeblendeter
   Adressleiste sonst hinter der Leiste – Pfeile abgeschnitten, Seite darunter sichtbar (Gerätetest 8d). */
:root .wp-lightbox-overlay {
	height: 100dvh;
}

:root .wp-lightbox-overlay .scrim {
	background-color: var(--wp--preset--color--ink) !important;
	opacity: 0.96;
}

:root .wp-lightbox-overlay :is(.wp-lightbox-close-button, .wp-lightbox-navigation-button) {
	min-width: 3rem;
	min-height: 3rem;
	fill: var(--wp--custom--color--ink-text) !important;
	color: var(--wp--custom--color--ink-text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

:root .wp-lightbox-overlay .wp-lightbox-close-icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

:root .wp-lightbox-overlay :is(.wp-lightbox-close-button, .wp-lightbox-navigation-button):focus-visible {
	outline: 3px solid var(--wp--custom--color--ink-text);
	outline-offset: 2px;
}

/* ==========================================================================
   12. Video und Einbettungen
   Video aus der Mediathek wie ein Bild: Ecken 2 px, Unterschrift links.
   Einbettungen (YouTube, Vimeo …) zeigen bis zum Klick eine Vorschau mit Hinweis
   (2-Klick-Lösung, inc/video.php). Die Vorschau ist eine Fläche in Nacht.
   ========================================================================== */

:root :where(.wp-block-video) video {
	display: block;
	border-radius: var(--wp--custom--radius--s);
	background-color: var(--wp--preset--color--ink);
}

:root :where(.wp-block-embed) :is(iframe, .f112-einbettung) {
	border-radius: var(--wp--custom--radius--s);
}

:root :where(.wp-block-video.alignfull) video,
:root :where(.wp-block-embed.alignfull) :is(iframe, .f112-einbettung) {
	border-radius: 0;
}

/* Die Vorschau bringt ihr Seitenverhältnis selbst mit (aus dem Player). */
:root .wp-block-embed__wrapper:has(> .f112-einbettung)::before {
	display: none;
}

.f112-einbettung {
	overflow: hidden;
}

/* Fläche mit Vorschaubild und Knopf in der Mitte. Ein Klick irgendwo auf die Fläche
   startet das Video (Knopf deckt sie unsichtbar ab, Fokusrahmen bleibt am Knopf). */
.f112-einbettung__flaeche {
	position: relative;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--30);
	isolation: isolate;
}

/* Mindesthöhe nur ohne festes Format – mit Seitenverhältnis würde sie zur Mindestbreite. */
.f112-einbettung:not(.has-format) .f112-einbettung__flaeche {
	min-height: 12rem;
}

/* Auf dem Bild steht kein Text, nur der Knopf (eigene Fläche): 40 % Nacht genügen. */
.f112-einbettung__bild {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
}

.f112-einbettung__laden {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	cursor: pointer;
}

.f112-einbettung__laden::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Band unter der Fläche: Anbieter, Titel, Hinweis zum Datenschutz. */
.f112-einbettung__info {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--f112-line);
}

.f112-einbettung__info > p {
	margin: 0;
	hyphens: manual;
}

.f112-einbettung__anbieter {
	color: var(--f112-muted);
	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;
}

/* Titel aus dem Player, höchstens zwei Zeilen. */
:root .f112-einbettung__info > .f112-einbettung__titel {
	display: -webkit-box;
	margin-block-start: 0.25rem;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.15;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

:root .f112-einbettung__info > .f112-einbettung__hinweis {
	margin-block-start: 0.5rem;
	color: var(--f112-muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}

@media (max-width: 37.5em) {
	.f112-einbettung__info {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/* Nach dem Klick: Player füllt die Fläche. Ohne festes Format (z. B. Beiträge sozialer
   Netzwerke) bestimmt der eingebettete Inhalt die Höhe. */
.f112-einbettung.has-format .f112-einbettung__flaeche > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.f112-einbettung.is-geladen:not(.has-format) .f112-einbettung__flaeche {
	display: block;
	min-height: 0;
	padding: 0;
}

/* Hintergrundvideo im Cover: Knopf zum Anhalten unten rechts (wie der Vergrößern-Knopf
   der Lightbox). Ohne JavaScript ausgeblendet. */
.f112-video-pause {
	position: absolute;
	z-index: 2;
	inset-block-end: var(--wp--preset--spacing--20);
	inset-inline-end: var(--wp--preset--spacing--20);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--s);
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent);
	color: var(--wp--custom--color--ink-text);
	cursor: pointer;
}

.f112-video-pause[hidden],
.f112-video-pause__abspielen,
.f112-video-pause.is-angehalten .f112-video-pause__anhalten {
	display: none;
}

.f112-video-pause.is-angehalten .f112-video-pause__abspielen {
	display: block;
}

/* ==========================================================================
   13. Spalten
   Nebeneinander ab 782 px (Vorgabe von WordPress), darunter untereinander.
   Abstand zwischen den Spalten in theme.json.
   ========================================================================== */

/* Mit Hintergrundfarbe: Innenabstand aus dem Raster statt der festen Werte von WordPress. */
:root :where(.wp-block-columns.has-background) {
	padding: var(--wp--preset--spacing--50);
}

:root :where(.wp-block-column.has-background) {
	padding: var(--wp--preset--spacing--40);
}

/* ==========================================================================
   14. Audio
   Bedienleiste des Browsers in voller Breite; Unterschrift wie bei Bildern (Abschnitt 7).
   ========================================================================== */

/* WordPress setzt mindestens 300 px – in schmalen Spalten ragte die Leiste sonst heraus. */
:root :where(.wp-block-audio) audio {
	display: block;
	width: 100%;
	min-width: 0;
}

/* ==========================================================================
   15. Suche
   Im Inhalt wie auf der Suchseite: Eingabefeld mit Kontur, daneben der Button.
   ========================================================================== */

/* Breite am inneren Rahmen begrenzen – am Block selbst würde das Layout ihn zentrieren. */
:root :where(.wp-block-search) .wp-block-search__inside-wrapper {
	max-width: 36rem;
	gap: 0.5rem;
}

:root :where(.wp-block-search) .wp-block-search__input {
	min-height: 3rem;
	padding: 0 1rem;
	border: 1.5px solid var(--f112-rule);
	border-radius: var(--wp--custom--radius--s);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

:root :where(.wp-block-search) .wp-block-search__button {
	margin-inline-start: 0;
}

/* Einstellung „Button im Feld“: Kontur am gemeinsamen Rahmen. WordPress nimmt dem Feld dabei
   den Fokusrahmen – er sitzt deshalb am Rahmen. */
:root :where(.wp-block-search__button-inside) .wp-block-search__inside-wrapper {
	padding: 0.25rem;
	border: 1.5px solid var(--f112-rule);
	border-radius: var(--wp--custom--radius--s);
	background-color: var(--wp--preset--color--surface);
}

:root :where(.wp-block-search__button-inside) .wp-block-search__input {
	min-height: 0;
	padding: 0 0.75rem;
	border: 0;
}

:root :where(.wp-block-search__button-inside) .wp-block-search__inside-wrapper:focus-within {
	outline: 2px solid var(--f112-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   16. Fußnoten
   Liste am Ende des Inhalts: klein, mit Haarlinie vom Text abgesetzt.
   ========================================================================== */

:root :where(.wp-block-footnotes) {
	padding-block-start: var(--wp--preset--spacing--30);
	padding-inline-start: 1.5em;
	border-block-start: 1px solid var(--f112-line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--f112-text-2);
}

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

/* Zurück-Pfeil mit etwas größerer Klickfläche. */
:root :where(.wp-block-footnotes) > li > a:last-child {
	display: inline-block;
	padding-inline: 0.25em;
	text-decoration: none;
}