/*
Theme Name: bauproduktenverordnung.io
Theme URI: https://bauproduktenverordnung.io/
Author: Zurynski, Oezdogan & Co GmbH
Author URI: https://bauproduktenverordnung.io/impressum/
Description: Klassisches WordPress-Theme für eine kommentierte Fassung der Verordnung (EU) 2024/3110. Einspaltiger Kommentarsatz mit hängenden Randnummern, amtlicher Wortlaut und Bearbeitung, Synopse zur Verordnung (EU) Nr. 305/2011, Zitierwerkzeug mit benanntem Bearbeiter. Selbst gehostete Schriften, keine externen Requests, kein Build-Schritt.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bpv-io
Tags: klassisches-theme, kommentar, recht, barrierefrei, zweispaltige-synopse
*/

/* ============================================================
   1  TOKEN
   ------------------------------------------------------------
   Die vier Grundtoken je Modus (Grund, Lesetext, Sekundaer, Akzent)
   sind netzweit zentral vergeben und duerfen NICHT geaendert werden.
   Alles Weitere ist daraus abgeleitet und gegen sie gerechnet; die
   Kontrastwerte stehen als Kommentar bei dem Token, fuer das sie
   gelten, damit eine Aenderung sofort zeigt, was sie kostet.

   Warum ueberhaupt eigene Token fuer Fokus, Anzeige und Synopse:
   Ein Zustand, der sich eine Farbe mit einem anderen Zustand teilt,
   ist kein Zustand. Der Fokusring lag in der Entwurfsfassung auf dem
   Akzent — und damit auf der Fuellung der aktiven Zeile im
   Sprungdialog: 1,00:1, der Fokus verschwand genau dort, wo er
   gebraucht wird.
   ============================================================ */

:root {
	color-scheme: light;

	/* --- Vergebene Token, hell --- */
	--bpv-grund: #FBF7EF;
	--bpv-wortlaut: #562D48;      /* 7,21:1 auf Grund */
	--bpv-meta: #4D4D4D;          /* 5,42:1 auf Grund */
	--bpv-akzent: #8A1C5C;        /* 5,63:1 auf Grund */

	/* --- Abgeleitet, hell --- */
	--bpv-flaeche: #F5EFE2;       /* Synopsekopf, Aufklapper, Dialog: 1,13:1 gegen Grund, rein dekorativ */
	--bpv-haarlinie: #C0B291;     /* dekorativ, traegt keine Information */
	--bpv-rand: #6B5C46;          /* Rand von Bedienelementen: 4,14:1 auf Grund (SC 1.4.11) */
	--bpv-auf-akzent: #FFFFFF;    /* 8,78:1 auf Akzentflaeche */
	--bpv-markierung: #EADFB5;    /* angesteuerter Anker: 1,18:1 gegen Grund, dekorativ */

	/* Synopse: die beiden Toene stehen zueinander bei 1,07:1 und sind in
	   Graustufen identisch. Sie tragen deshalb NIE allein — Tilgung ist
	   zusaetzlich durchgestrichen, Ergaenzung unterstrichen, und die
	   Aenderungsart steht als Wort in der Kopfzeile. */
	--bpv-syn-alt: #7A3B00;       /* 5,54:1 auf Grund, 5,66:1 auf eigener Flaeche */
	--bpv-syn-alt-flaeche: #F8F3E8;
	--bpv-syn-neu: #1F5B3A;       /* 5,15:1 auf Grund, 5,29:1 auf eigener Flaeche */
	--bpv-syn-neu-flaeche: #CBD6B4;

	/* Anzeige: der einzige kuehle Ton der Seite. 1,03:1 gegen den Grund —
	   er traegt messbar nichts und wird nicht als Trennsignal behauptet.
	   Tragend sind der 2-px-Rahmen (5,74:1 gegen Grund) und der Text. */
	--bpv-anz-flaeche: #C8CDD2;
	--bpv-anz-rahmen: #444B51;    /* 5,74:1 gegen Grund, 5,60:1 gegen Anzeigenflaeche */
	--bpv-anz-text: #22272B;      /* 9,42:1 auf Anzeigenflaeche */

	/* Fokus: eigener Token, in keinem anderen Zusammenhang verwendet und
	   ausdruecklich NICHT der Akzent. Doppelring, in beiden Modi gleich.
	   Die beiden Baender stehen zueinander bei 19,12:1; das Produkt ihrer
	   Kontraste gegen eine beliebige Flaeche ist konstant 19,12, also liegt
	   auf JEDER Flaeche mindestens ein Band bei mindestens 4,37:1. Ein
	   einfarbiger Ring kann das nicht leisten. */
	--bpv-fokus-innen: #FFFFFF;
	--bpv-fokus-aussen: #1C0A0D;

	/* --- Schrift --- */
	--bpv-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
	--bpv-sans: "Source Sans 3", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;

	/* --- Mass --- */
	--bpv-kopfhoehe: 56px;
	--bpv-ankerluft: 72px;        /* Kopfhoehe plus 16 px, siehe scroll-margin-top */
	--bpv-kanal: 112px;
	--bpv-spalte: 620px;
	--bpv-spiegel: 732px;
	--bpv-einzug: 24px;           /* Tiefe der Bearbeitung gegen den Wortlaut */
	--bpv-ziel: 44px;             /* Mindestgroesse jedes Bedienelements */
}

/* Dunkle Fassung. Sie greift, wenn der Leser sie ausdruecklich waehlt
   (data-modus) ODER wenn das System sie meldet und der Leser nicht
   ausdruecklich hell gewaehlt hat. Die Reihenfolge ist wichtig: die
   ausdrueckliche Wahl muss die Systemeinstellung schlagen. */
:root[data-modus="dunkel"],
:root[data-modus="dunkel"] * {
	color-scheme: dark;
}

:root[data-modus="dunkel"] {
	--bpv-grund: #281D14;
	--bpv-wortlaut: #B4A5AE;      /* 6,97:1 auf Grund */
	--bpv-meta: #9B8D95;          /* 5,17:1 auf Grund */
	--bpv-akzent: #BC79A0;        /* 5,00:1 auf Grund */

	--bpv-flaeche: #2F231A;       /* Akzent darauf 4,64:1, Lesetext 6,46:1 */
	--bpv-haarlinie: #4A3A2C;
	--bpv-rand: #9B8D95;          /* 5,17:1 auf Grund */
	--bpv-auf-akzent: #131211;    /* 5,69:1 auf Akzentflaeche; Weiss haette dort nur 2,7:1 */
	--bpv-markierung: #3A2A12;    /* 1,19:1 gegen Grund, dekorativ; Lesetext darauf 5,88:1 */

	--bpv-syn-alt: #E0A566;       /* 7,64:1 auf Grund, 7,25:1 auf eigener Flaeche */
	--bpv-syn-alt-flaeche: #2E2113;
	--bpv-syn-neu: #77C79B;       /* 8,17:1 auf Grund, 8,01:1 auf eigener Flaeche */
	--bpv-syn-neu-flaeche: #16241B;

	--bpv-anz-flaeche: #1B1F22;   /* 1,01:1 gegen Grund — ausdruecklich nicht tragend */
	--bpv-anz-rahmen: #8A959D;    /* 5,34:1 gegen Grund, 5,39:1 gegen Anzeigenflaeche */
	--bpv-anz-text: #C9D1D6;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-modus="hell"]) {
		color-scheme: dark;

		--bpv-grund: #281D14;
		--bpv-wortlaut: #B4A5AE;
		--bpv-meta: #9B8D95;
		--bpv-akzent: #BC79A0;

		--bpv-flaeche: #2F231A;
		--bpv-haarlinie: #4A3A2C;
		--bpv-rand: #9B8D95;
		--bpv-auf-akzent: #131211;
		--bpv-markierung: #3A2A12;

		--bpv-syn-alt: #E0A566;
		--bpv-syn-alt-flaeche: #2E2113;
		--bpv-syn-neu: #77C79B;
		--bpv-syn-neu-flaeche: #16241B;

		--bpv-anz-flaeche: #1B1F22;
		--bpv-anz-rahmen: #8A959D;
		--bpv-anz-text: #C9D1D6;
	}
}

/* ============================================================
   2  GRUNDLAGE
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--bpv-grund);
	color: var(--bpv-wortlaut);
	font-family: var(--bpv-serif);
	font-size: 1rem;
	line-height: 1.65;
	font-optical-sizing: auto;

	/* Deutscher Fachsatz. hyphenate-limit-chars haelt die Trennung von
	   kurzen Woertern fern: erst ab sechs Zeichen, mindestens drei davor
	   und drei danach. Ohne das zerlegt der Browser in der 480 px schmalen
	   Synopsespalte auch "oder". */
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
}

/* Jedes Sprungziel muss unter der 56 px hohen Kopfleiste hervorkommen.
   Die Regel steht auf [id] und nicht auf einzelnen Klassen: ein neuer
   Anker soll das nicht neu lernen muessen. */
[id] {
	scroll-margin-top: var(--bpv-ankerluft);
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--bpv-akzent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

a:hover {
	text-decoration-thickness: 2px;
}

p {
	margin: 0 0 0.75rem;
}

h1, h2, h3, h4, h5, h6 {
	/* Auch die Ueberschriften stehen in der Serifenschrift. Diese Seite ist
	   die einzige des Netzes mit durchgehend seriger Ueberschriftenzeile —
	   und die einzige ganz ohne Monoschrift. */
	font-family: var(--bpv-serif);
	font-weight: 600;
	color: var(--bpv-wortlaut);
	margin: 0;
	line-height: 1.3;
}

/* Nur fuer Vorlesesoftware. Nicht display:none — das waere fuer sie
   ebenfalls weg. */
.bpv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   3  FOKUS
   ------------------------------------------------------------
   Ein Doppelring: 2 px Weiss unmittelbar an der Elementkante, dahinter
   2 px #1C0A0D mit 2 px Versatz. Die Regel steht auf :focus-visible und
   nicht auf :focus, damit ein Mausklick keinen Ring hinterlaesst — aber
   sie steht AUCH als :focus-Regel fuer Browser ohne :focus-visible.
   ============================================================ */

:focus {
	outline: 2px solid var(--bpv-fokus-aussen);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--bpv-fokus-innen);
}

:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

:focus-visible {
	outline: 2px solid var(--bpv-fokus-aussen);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--bpv-fokus-innen);
}

/* ============================================================
   4  SPRUNGMARKE
   ============================================================ */

.bpv-sprungmarke {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 100;
	display: inline-block;
	min-height: var(--bpv-ziel);
	padding: 0.75rem 1rem;
	background: var(--bpv-akzent);
	color: var(--bpv-auf-akzent);
	font-family: var(--bpv-sans);
	font-size: 1rem;
	text-decoration: none;
	transition: top 120ms linear;
}

.bpv-sprungmarke:focus {
	top: 8px;
}

/* ============================================================
   5  KOPFLEISTE
   ------------------------------------------------------------
   56 px hoch, nicht klebend. Sie traegt die Ortsangabe (Marke,
   Artikelnummer, Kapitel) und zwei Bedienelemente. Mehr nicht: die
   Gliederung liegt im Dialog, nicht in der Leiste.
   ============================================================ */

.bpv-kopf {
	border-bottom: 1px solid var(--bpv-haarlinie);
	background: var(--bpv-grund);
}

.bpv-kopf__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--bpv-kopfhoehe);
	max-width: var(--bpv-spiegel);
	margin: 0 auto;
	padding: 0.25rem 20px;
}

.bpv-kopf__ort {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--bpv-meta);
}

.bpv-kopf__marke {
	font-weight: 600;
	text-decoration: none;
	color: var(--bpv-akzent);
}

.bpv-kopf__marke:hover {
	text-decoration: underline;
}

.bpv-kopf__artikel {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--bpv-wortlaut);
	font-weight: 600;
}

.bpv-kopf__bedienung {
	display: flex;
	align-items: center;
	gap: 12px; /* 12 px Abstand zwischen Zielen, siehe SC 2.5.8 */
	flex: none;
}

/* Ein Umschalter, der ohne JavaScript nichts tut, ist schlechter als
   kein Umschalter. Ohne Skript bleibt die Klasse bpv-ohne-js stehen. */
.bpv-ohne-js .bpv-knopf--modus {
	display: none;
}

/* ============================================================
   6  BEDIENELEMENTE
   ============================================================ */

.bpv-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bpv-ziel);
	min-width: var(--bpv-ziel);
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--bpv-rand);
	border-radius: 2px;
	background: transparent;
	color: var(--bpv-wortlaut);
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.bpv-knopf:hover {
	background: var(--bpv-markierung);
}

.bpv-knopf--primaer {
	background: var(--bpv-akzent);
	border-color: var(--bpv-akzent);
	color: var(--bpv-auf-akzent);
}

.bpv-knopf--primaer:hover {
	background: var(--bpv-akzent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.bpv-knopf[aria-pressed="true"] {
	background: var(--bpv-akzent);
	border-color: var(--bpv-akzent);
	color: var(--bpv-auf-akzent);
}

.bpv-feldeingabe {
	min-height: var(--bpv-ziel);
	width: 100%;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--bpv-rand);
	border-radius: 2px;
	background: var(--bpv-grund);
	color: var(--bpv-wortlaut);
	font-family: var(--bpv-sans);
	font-size: 1rem;
	line-height: 1.5;
}

/* ============================================================
   7  SPRUNGDIALOG
   ============================================================ */

.bpv-dialog {
	width: min(46rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 1px solid var(--bpv-rand);
	border-radius: 2px;
	background: var(--bpv-flaeche);
	color: var(--bpv-wortlaut);
}

.bpv-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.bpv-dialog__innen {
	padding: 1.25rem 1.5rem 1.5rem;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
}

.bpv-dialog__kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.bpv-dialog__titel {
	font-size: 1.5rem;
	line-height: 1.3;
}

.bpv-dialog__lead,
.bpv-dialog__stand,
.bpv-dialog__leer {
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--bpv-meta);
	margin: 0.5rem 0 0;
}

.bpv-dialog__filter {
	margin: 1rem 0 0;
}

.bpv-dialog__filter label {
	display: block;
	margin: 0 0 0.35rem;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	color: var(--bpv-meta);
}

.bpv-dialog__gruppe {
	margin: 1.5rem 0 0;
}

.bpv-dialog__gruppentitel {
	font-size: 1.1875rem;
	line-height: 1.35;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--bpv-haarlinie);
}

.bpv-dialog__eltern {
	display: block;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--bpv-meta);
}

.bpv-dialog__artikel {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.bpv-dialog__zeile a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.7rem;
	min-height: var(--bpv-ziel);
	padding: 0.5rem 0.6rem;
	text-decoration: none;
	color: var(--bpv-wortlaut);
}

.bpv-dialog__zeile a:hover {
	background: var(--bpv-markierung);
	text-decoration: underline;
}

/* Die aktuelle Zeile ist die einzige flaechige der Seite. Weil Farbe
   allein kein Merkmal sein darf, traegt sie zusaetzlich das Wort
   "aktuell" (siehe template-parts/sprungdialog.php). */
.bpv-dialog__zeile--aktuell a {
	background: var(--bpv-akzent);
	color: var(--bpv-auf-akzent);
}

.bpv-dialog__zeile--aktuell a:hover {
	background: var(--bpv-akzent);
}

.bpv-dialog__aktuell {
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.bpv-dialog__nummer {
	font-family: var(--bpv-sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bpv-dialog__stichwort {
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	color: var(--bpv-meta);
}

.bpv-dialog__zeile--aktuell .bpv-dialog__stichwort {
	color: var(--bpv-auf-akzent);
}

/* ============================================================
   8  SATZSPIEGEL
   ------------------------------------------------------------
   732 px: 112 px haengender Randkanal, 620 px Textspalte. Der Kanal
   bleibt ueber weite Strecken LEER — genau diese Leere links vom Text
   ist die Silhouette dieser Publikation. In ihm stehen ausschliesslich
   die Absatzziffern des Wortlauts und die Randnummern der Bearbeitung.
   Keine Navigation, keine Marginalien, keine Illustration.
   ============================================================ */

.bpv-blatt {
	max-width: var(--bpv-spiegel);
	margin: 0 auto;
	padding: 2.5rem 20px 4rem;
}

.bpv-seitenkopf {
	padding-left: var(--bpv-kanal);
	margin: 0 0 2rem;
}

.bpv-seitenkopf__titel {
	font-size: 2.125rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.bpv-seitenkopf__lead,
.bpv-hinweis {
	max-width: 34rem;
	margin: 0.75rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.62;
	color: var(--bpv-wortlaut);
}

.bpv-hinweis {
	padding-left: var(--bpv-kanal);
}

.bpv-seitenkopf__begriff {
	font-family: var(--bpv-sans);
	font-weight: 600;
}

/* Laufender Text ausserhalb des Apparats (Impressum, Startseite,
   Fehlerseite). Der Deckel von 34rem gilt hier in JEDEM Umbruchband. */
.bpv-prosa {
	padding-left: var(--bpv-kanal);
}

.bpv-prosa > *,
.bpv-prosa p,
.bpv-prosa ul,
.bpv-prosa ol {
	max-width: 34rem;
}

.bpv-prosa p,
.bpv-prosa li {
	font-size: 1.0625rem;
	line-height: 1.62;
}

.bpv-prosa h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: 1.5rem;
}

.bpv-prosa h3 {
	margin: 2rem 0 0.5rem;
	font-size: 1.1875rem;
}

.bpv-prosa__titel {
	font-size: 2.125rem;
	line-height: 1.2;
	margin: 0 0 1.5rem;
}

/* ============================================================
   9  NORMKOPF
   ============================================================ */

.bpv-normkopf {
	padding-left: var(--bpv-kanal);
	margin: 0 0 2.5rem;
}

.bpv-normkopf__titel {
	font-size: 2.125rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.bpv-normkopf__nummer {
	display: block;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bpv-normkopf__ueberschrift {
	display: block;
}

.bpv-normkopf__kennungen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin: 1rem 0 0;
}

.bpv-normkopf__paar {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.bpv-normkopf__paar dt {
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--bpv-meta);
}

.bpv-normkopf__paar dd {
	margin: 0;
}

/* Kennungen: Source Sans 3, tabellarische Ziffern, leichte Sperrung,
   kein Umbruch. Bewusst KEINE Monoschrift — eine CELEX-Kennung ist
   keine Programmzeile, und diese Seite hat als einzige des Netzes gar
   keine Monoschrift. */
.bpv-kennung {
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* Eine ELI oder DoP-Nummer kann laenger sein als die Spalte. Dann darf
   sie brechen — aber erst, wenn es sonst nicht geht. */
a.bpv-kennung {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.bpv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 1rem 0 0;
}

.bpv-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	min-height: 2rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--bpv-rand);
	border-radius: 2px;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	line-height: 1.4;
	white-space: nowrap;
}

.bpv-chip__label {
	color: var(--bpv-meta);
}

.bpv-chip__leer {
	white-space: normal;
}

.bpv-normkopf__bearbeitung {
	margin: 1rem 0 0;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--bpv-meta);
}

.bpv-normkopf__bearbeiter {
	color: var(--bpv-wortlaut);
	font-weight: 600;
}

/* ============================================================
   10  WORTLAUT UND BEARBEITUNG
   ------------------------------------------------------------
   Der Unterschied zwischen amtlichem Text und Auslegung laeuft NICHT
   ueber zwei Schriftwelten und nicht ueber Farbe, sondern ueber drei
   Dinge, die auch in Graustufen, im Ausdruck und beim Kopieren
   erhalten bleiben:
     1  Einzugstiefe — der Wortlaut steht buendig, die Bearbeitung 24 px tiefer
     2  Gliederungsmarke — (1) im Kanal gegen 1 im Kanal
     3  das ausgeschriebene Wort "Bearbeitung" am Blockanfang
   ============================================================ */

.bpv-marke {
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bpv-meta);
	padding-left: var(--bpv-kanal);
	margin: 0 0 0.75rem;
}

.bpv-wortlaut {
	margin: 0 0 2.5rem;
}

.bpv-bearbeitung {
	margin: 0 0 2.5rem;
}

.bpv-satz {
	position: relative;
	padding-left: var(--bpv-kanal);
	margin: 0 0 0.75rem;
}

.bpv-satz--rn {
	margin: 0 0 1.25rem;
}

.bpv-satz:target,
.bpv-satz:focus {
	outline: none;
}

/* Der angesteuerte Anker: die Flaeche ist mit 1,18:1 rein dekorativ und
   traegt deshalb nie allein. Zusaetzlich wird die Ziffer im Kanal 2 px
   unterstrichen und das Permalinkziel dauerhaft sichtbar. */
.bpv-satz:target {
	background: var(--bpv-markierung);
}

.bpv-satz:target > .bpv-kanal {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.bpv-satz:target > .bpv-permalink {
	opacity: 1;
}

/* Der Randkanal. Rechtsbuendig zum Text, vertikal auf die erste
   Grundlinie gesetzt. */
.bpv-kanal {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--bpv-kanal) - 20px);
	text-align: right;
	color: var(--bpv-meta);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Absatzziffer des Wortlauts: Serif SemiBold 19 px, auf der Grundlinie
   des ersten Absatzes. */
.bpv-kanal--absatz {
	font-family: var(--bpv-serif);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.65;
}

/* Randnummer der Bearbeitung: Sans SemiBold 14 px. Die andere Schrift
   ist hier kein Bedeutungstraeger, sondern nur ein zweites, schwaches
   Merkmal — Traeger sind Einzug und Marke. */
/* line-height statt eines Versatzes von oben: die 14-px-Randnummer soll auf
   der GRUNDLINIE der ersten Zeile ihres 17-px-Absatzes sitzen, nicht an
   dessen Oberkante. 2,2 bringt die beiden Grundlinien auf etwa 1 px zusammen;
   ein margin-top waere bei jeder Schriftgroessenaenderung wieder falsch. */
.bpv-kanal--rn {
	font-family: var(--bpv-sans);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 2.2;
}

.bpv-satz__text {
	max-width: var(--bpv-spalte);
}

.bpv-wortlaut .bpv-satz__text p {
	font-size: 1.1875rem;
	line-height: 1.65;
	margin: 0 0 0.75rem;
}

/* Die 24 px Einzug der Bearbeitung: sie stehen auf dem TEXT, nicht auf
   dem Block. Die Randnummer haengt weiterhin im selben Kanal wie die
   Absatzziffer — sonst waeren es zwei Kanaele und der Blick haette zwei
   Fluchtlinien. */
.bpv-bearbeitung .bpv-satz__text {
	padding-left: var(--bpv-einzug);
}

.bpv-bearbeitung .bpv-satz__text p {
	font-size: 1.0625rem;
	line-height: 1.62;
	margin: 0 0 0.6rem;
}

.bpv-satz__text ol,
.bpv-satz__text ul {
	margin: 0.5rem 0 0.75rem;
	padding-left: 1.5rem;
}

.bpv-satz__text li {
	font-size: 1.0625rem;
	line-height: 1.62;
	margin: 0 0 0.35rem;
}

/* Unterabsaetze des Wortlauts laufen mit Buchstaben. */
.bpv-wortlaut .bpv-satz__text ol {
	list-style-type: lower-alpha;
}

.bpv-wortlaut .bpv-satz__text li {
	font-size: 1.1875rem;
	line-height: 1.65;
}

/* Gliederung der Bearbeitung: I. / 1. / a) */
.bpv-teil {
	padding-left: calc(var(--bpv-kanal) + var(--bpv-einzug));
	margin: 2.5rem 0 0.75rem;
	font-size: 1.1875rem;
	line-height: 1.35;
}

.bpv-teil__marke {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Permalinkziel: 44 x 44 px, dauerhaft in der Tabulatorreihenfolge,
   sichtbar beim Ueberfahren und beim Fokussieren. opacity statt
   display:none — ein ausgeblendetes Element waere nicht fokussierbar. */
/* Es steht am AEUSSEREN Rand des Kanals, nicht neben der Ziffer: die Ziffern
   sind rechtsbuendig an der Kanalkante, dort blieben zwischen Ziffer und Text
   nur 20 px — zu wenig fuer ein 44-px-Ziel, das nichts verdecken darf. */
.bpv-permalink {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	width: var(--bpv-ziel);
	height: var(--bpv-ziel);
	padding-top: 0.35rem;
	opacity: 0;
	color: var(--bpv-akzent);
	text-decoration: none;
	font-family: var(--bpv-sans);
	font-size: 1rem;
}

.bpv-satz:hover > .bpv-permalink,
.bpv-permalink:focus,
.bpv-permalink:focus-visible {
	opacity: 1;
}

/* Woertliches Zitat innerhalb der Bearbeitung: kursiv UND in
   Anfuehrung. Die Kursive geht beim Kopieren in ein Textfeld verloren,
   die Anfuehrung nicht. */
.bpv-zitat {
	font-style: italic;
	quotes: "\201E" "\201C" "\201A" "\2018";
}

q.bpv-zitat::before {
	content: open-quote;
}

q.bpv-zitat::after {
	content: close-quote;
}

p.bpv-zitat {
	font-style: italic;
}

p.bpv-zitat::before {
	content: "\201E";
}

p.bpv-zitat::after {
	content: "\201C";
}

/* Die drei Wendungen der Bearbeitung. */
.bpv-wendung {
	font-family: var(--bpv-sans);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
}

.bpv-wendung__beleg {
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	color: var(--bpv-meta);
}

/* Fussnotenzeichen. Mindestens 24 x 24 px Ziel; die Ausnahme fuer
   Ziele im Fliesstext (SC 2.5.8) gilt hier ohnehin. */
.bpv-fnref {
	font-family: var(--bpv-sans);
	font-size: 0.75rem;
	line-height: 0;
	font-variant-numeric: tabular-nums;
}

.bpv-fnref a {
	display: inline-block;
	min-width: 24px;
	min-height: 24px;
	padding: 0 0.25rem;
	text-align: center;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ============================================================
   11  VERWEISZEILE
   ============================================================ */

.bpv-verweise {
	margin: 0.6rem 0 0;
	padding-left: 0;
	border-top: 1px solid var(--bpv-haarlinie);
	padding-top: 0.5rem;
}

.bpv-verweise__titel {
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bpv-meta);
	margin: 0 0 0.35rem;
}

.bpv-verweise__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpv-verweis {
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0 0 0.35rem;
}

/* Die Verweisart steht als WORT und ist nicht farbcodiert. */
.bpv-verweis__art {
	font-weight: 600;
	color: var(--bpv-meta);
}

.bpv-verweis__art::after {
	content: ":";
}

.bpv-verweis__ziel {
	white-space: nowrap;
}

.bpv-verweis__titel {
	color: var(--bpv-meta);
	white-space: normal;
}

/* ============================================================
   12  AUFKLAPPER
   ============================================================ */

.bpv-aufklapper {
	margin: 0.35rem 0;
}

.bpv-aufklapper > summary {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-height: var(--bpv-ziel);
	padding: 0.4rem 0;
	cursor: pointer;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	color: var(--bpv-akzent);
}

.bpv-aufklapper__inhalt {
	padding: 0.5rem 0 0.75rem 1rem;
	border-left: 1px solid var(--bpv-haarlinie);
	background: var(--bpv-flaeche);
	padding-left: 1rem;
}

.bpv-aufklapper__inhalt p {
	font-size: 1rem;
	line-height: 1.6;
	max-width: 34rem;
}

.bpv-aufklapper__quelle {
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	color: var(--bpv-meta);
	margin: 0.35rem 0 0;
}

/* ============================================================
   13  SYNOPSE
   ------------------------------------------------------------
   Der einzige Block, der aus dem Satzspiegel ausbricht: 1000 px,
   zentriert, zwei gleiche Spalten mit 40 px Rinne. Die Silbentrennung
   ist hier zwingend aktiv — die Spalten sind der schmalste Satz der
   ganzen Seite.
   ============================================================ */

.bpv-synopse {
	width: 100%;
	margin: 4rem 0 2.5rem;
	overflow-x: auto;
}

/* Ausbruch aus dem Satzspiegel auf 1000 px — aber erst, wenn daneben
   noch Platz bleibt. Gerechnet wird gegen den Elterncontainer und NICHT
   gegen 100vw: 100vw enthaelt die Bildlaufleiste, und genau daran
   scrollt der Seitenkoerper dann doch waagerecht. */
@media (min-width: 1100px) {
	.bpv-synopse {
		width: 1000px;
		margin-left: calc(50% - 500px);
	}
}

.bpv-synopse > .bpv-marke {
	padding-left: 0;
}

/* Der Filter ist reines CSS: die Auswahl steht als Geschwister VOR der
   Liste, der Geschwisterselektor blendet die unveraenderten Zeilen aus.
   Damit funktioniert er auch ohne JavaScript — ein Bedienelement, das
   ohne Skript nichts tut, ist schlechter als keines. Bewusst ohne
   :has(), damit auch aeltere Browser den Filter bekommen. */
.bpv-synopse__schalter {
	width: 20px;
	height: 20px;
	margin: 0 0.5rem 0 0;
	vertical-align: middle;
	accent-color: var(--bpv-akzent);
}

.bpv-synopse__marke {
	display: inline-block;
	min-height: var(--bpv-ziel);
	padding: 0.6rem 0;
	margin: 0 0 1rem;
	cursor: pointer;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	vertical-align: middle;
}

.bpv-synopse__schalter:checked ~ .bpv-synopse__liste .bpv-synopse__zeile--ohne-aenderung {
	display: none;
}

.bpv-synopse__zeile {
	border-top: 1px solid var(--bpv-haarlinie);
	padding: 1rem 0;
}

.bpv-synopse__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1rem;
	margin: 0 0 0.6rem;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
}

/* Die Aenderungsart steht als WORT. Sie ist der tragende Traeger der
   Information — Farbe und Strichform wiederholen sie nur. */
.bpv-synopse__art {
	font-weight: 600;
	color: var(--bpv-wortlaut);
	letter-spacing: 0.01em;
}

.bpv-synopse__bezug {
	color: var(--bpv-meta);
}

.bpv-synopse__paar {
	display: grid;
	grid-template-columns: 480px 480px;
	gap: 40px;
	justify-content: center;
}

.bpv-synopse__spalte {
	min-height: 3rem;
	padding: 0.75rem 1rem;
}

.bpv-synopse__spalte--alt {
	background: var(--bpv-syn-alt-flaeche);
}

.bpv-synopse__spalte--neu {
	background: var(--bpv-syn-neu-flaeche);
}

.bpv-synopse__quelle {
	margin: 0 0 0.35rem;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--bpv-meta);
}

.bpv-synopse__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.bpv-synopse__text--leer {
	color: var(--bpv-meta);
}

/* Tilgung: Farbe UND Durchstreichung. Ergaenzung: Farbe UND
   Unterstreichung. Beide Toene stehen zueinander bei 1,07:1 und sind in
   Graustufen identisch — ohne die Strichform waere die Zeile
   farbenblind unlesbar. */
.bpv-synopse__spalte--alt del {
	color: var(--bpv-syn-alt);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.bpv-synopse__spalte--neu ins {
	color: var(--bpv-syn-neu);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}

/* ============================================================
   14  ZITIERWERKZEUG
   ============================================================ */

.bpv-zitat-werkzeug {
	padding-left: var(--bpv-kanal);
	margin: 3rem 0 0;
}

.bpv-zitat-werkzeug__lead {
	max-width: 34rem;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--bpv-meta);
}

.bpv-zitat-werkzeug__formen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 0.75rem;
}

.bpv-zitat-werkzeug__ausgabe {
	display: block;
	max-width: 34rem;
	min-height: 5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--bpv-rand);
	border-radius: 2px;
	background: var(--bpv-flaeche);
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.bpv-zitat-werkzeug__aktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0.75rem 0 0;
}

.bpv-zitat-werkzeug__stand {
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	color: var(--bpv-meta);
}

/* ============================================================
   15  FUSSNOTEN
   ============================================================ */

.bpv-fussnoten {
	padding-left: var(--bpv-kanal);
	margin: 3rem 0 0;
}

.bpv-fussnoten__liste {
	max-width: 34rem;
	margin: 0;
	padding-left: 1.75rem;
	font-family: var(--bpv-sans);
	font-variant-numeric: tabular-nums;
}

.bpv-fussnote {
	position: relative;
	margin: 0 0 0.6rem;
	font-size: 0.875rem;
	line-height: 1.55;
	padding-right: var(--bpv-ziel);
}

.bpv-fussnote__zurueck {
	position: absolute;
	right: 0;
	top: -0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bpv-ziel);
	height: var(--bpv-ziel);
	text-decoration: none;
	font-size: 1.125rem;
}

/* ============================================================
   16  FASSUNGSFUSS
   ============================================================ */

.bpv-fassung {
	padding-left: var(--bpv-kanal);
	margin: 3rem 0 0;
	border-top: 1px solid var(--bpv-haarlinie);
	padding-top: 1.5rem;
}

.bpv-fassung__daten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin: 0 0 1rem;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	line-height: 1.55;
}

.bpv-fassung__paar {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.bpv-fassung__paar dt {
	color: var(--bpv-meta);
}

.bpv-fassung__paar dd {
	margin: 0;
}

.bpv-abk {
	margin: 0;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	line-height: 1.55;
}

.bpv-abk__paar {
	display: flex;
	gap: 0.6rem;
	margin: 0 0 0.35rem;
}

.bpv-abk__paar dt {
	flex: 0 0 5.5rem;
}

.bpv-abk__paar dd {
	margin: 0;
	color: var(--bpv-meta);
}

.bpv-fassung__hinweis,
.bpv-fassung__haftung,
.bpv-fassung__betreiber {
	max-width: 34rem;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--bpv-meta);
	margin: 0.75rem 0 0;
}

/* Der Haftungshinweis ist der eine Satz, den ein Leser gesehen haben
   muss. Er steht deshalb in der Lesefarbe, nicht in der Metafarbe. */
.bpv-fassung__haftung {
	color: var(--bpv-wortlaut);
	font-weight: 600;
}

/* ============================================================
   17  ANZEIGE
   ------------------------------------------------------------
   Die Flaeche ist der einzige kuehle Ton der Seite und liegt mit
   1,03:1 praktisch auf dem Grund. Sie ist ein Wiedererkennungsmerkmal
   und wird NICHT als Trennsignal behauptet. Tragend sind der 2 px
   starke umlaufende Rahmen und die Kennzeichnung als Text.
   ============================================================ */

.bpv-anzeige {
	width: 100%;
	min-height: 200px; /* reserviert gegen Layoutsprung beim Nachladen */
	margin: 3rem 0 0;
	border: 2px solid var(--bpv-anz-rahmen);
	border-radius: 0;
	background: var(--bpv-anz-flaeche);
	color: var(--bpv-anz-text);
	padding: 1rem 1.25rem 1.25rem;

	/* Innerhalb der Insel gilt ein eigener, reduzierter Stilsatz:
	   kein Akzent, keine haengenden Ziffern, keine Haarlinien im
	   Seitenstil, keine Kursive im Zitatstil. */
	font-family: var(--bpv-sans);
}

/* Das Label ist das ERSTE Element innerhalb des Rahmens. 14 px, weil
   die Kennzeichnung nicht kleiner sein darf als die kleinste
   redaktionelle Groesse der Seite. */
.bpv-anzeige__label {
	margin: 0 0 0.75rem;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--bpv-anz-rahmen);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--bpv-anz-rahmen);
}

.bpv-anzeige__titel {
	margin: 0 0 0.5rem;
	font-family: var(--bpv-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--bpv-anz-text);
}

.bpv-anzeige__bild {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 0.75rem;
}

.bpv-anzeige__text {
	max-width: 34rem;
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.bpv-anzeige__link {
	color: var(--bpv-anz-text);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
	overflow-wrap: break-word;
}

.bpv-anzeige__pflicht,
.bpv-anzeige__werber {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--bpv-anz-rahmen);
}

/* ============================================================
   18  BLAETTERLEISTE
   ============================================================ */

.bpv-blaettern {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 3rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bpv-haarlinie);
}

.bpv-blaettern__ziel {
	display: block;
	flex: 1 1 0;
	min-height: var(--bpv-ziel);
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--bpv-rand);
	border-radius: 2px;
	text-decoration: none;
	color: var(--bpv-wortlaut);
}

.bpv-blaettern__ziel:hover {
	background: var(--bpv-markierung);
}

.bpv-blaettern__ziel--weiter {
	text-align: right;
}

.bpv-blaettern__richtung {
	display: block;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	color: var(--bpv-meta);
}

.bpv-blaettern__nummer {
	display: block;
	font-family: var(--bpv-sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bpv-blaettern__titel {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.bpv-blaettern__leer {
	flex: 1 1 0;
}

/* ============================================================
   19  LISTEN UND GLIEDERUNG
   ============================================================ */

.bpv-gruppe {
	margin: 2.5rem 0 0;
}

.bpv-gruppe__titel {
	padding-left: var(--bpv-kanal);
	font-size: 1.5rem;
	line-height: 1.3;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--bpv-haarlinie);
}

.bpv-gruppe__eltern {
	display: block;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--bpv-meta);
}

.bpv-liste {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.bpv-zeile {
	margin: 0;
}

.bpv-zeile__link {
	position: relative;
	display: block;
	min-height: var(--bpv-ziel);
	padding: 0.6rem 0 0.6rem var(--bpv-kanal);
	text-decoration: none;
	color: var(--bpv-wortlaut);
}

.bpv-zeile__link:hover {
	background: var(--bpv-markierung);
}

.bpv-zeile__link:hover .bpv-zeile__titel {
	text-decoration: underline;
}

.bpv-kanal--zeile {
	font-family: var(--bpv-sans);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.85;
	top: 0.6rem;
}

/* Blaettern durch Trefferlisten. WordPress erzeugt hier .nav-links; das
   Theme bringt keine eigene Auszeichnung dafuer mit, also wird die
   erzeugte gestaltet statt sie nachzubauen. */
.pagination,
.navigation.pagination {
	margin: 2.5rem 0 0;
	padding-left: var(--bpv-kanal);
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--bpv-ziel);
	min-height: var(--bpv-ziel);
	padding: 0 0.6rem;
	border: 1px solid var(--bpv-rand);
	border-radius: 2px;
	text-decoration: none;
	color: var(--bpv-wortlaut);
}

.pagination .page-numbers.current {
	background: var(--bpv-akzent);
	border-color: var(--bpv-akzent);
	color: var(--bpv-auf-akzent);
	font-weight: 600;
}

.bpv-zeile__titel {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.bpv-zeile__stichwort {
	display: block;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--bpv-meta);
}

/* ============================================================
   20  SUCHE UND FUSS
   ============================================================ */

.bpv-suche {
	max-width: 34rem;
	margin: 1.5rem 0 0;
}

.bpv-suche__label {
	display: block;
	margin: 0 0 0.35rem;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	color: var(--bpv-meta);
}

.bpv-suche__zeile {
	display: flex;
	gap: 12px;
}

.bpv-fuss {
	border-top: 1px solid var(--bpv-haarlinie);
	margin-top: 4rem;
}

.bpv-fuss__innen {
	max-width: var(--bpv-spiegel);
	margin: 0 auto;
	padding: 2rem 20px 3rem;
}

.bpv-fuss__marke {
	font-family: var(--bpv-sans);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
}

.bpv-fuss__wege ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 1.5rem;
	margin: 0;
	padding: 0;
}

.bpv-fuss__wege a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bpv-ziel);
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
}

.bpv-fuss__wege a[aria-current="page"] {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Die Impressumszeile: 14 px wie jeder andere Kleintext der Seite,
   nicht kleiner, nicht ausgegraut, kein Aufklapper. */
.bpv-impressum {
	max-width: 44rem;
	margin: 2rem 0 0;
	font-family: var(--bpv-sans);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--bpv-meta);
}

.bpv-seitenteile {
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	margin: 1.5rem 0 0;
}

.bpv-verweisgraph {
	padding-left: var(--bpv-kanal);
	margin: 3rem 0 0;
}

.bpv-verweisgraph > .bpv-marke,
.bpv-fussnoten > .bpv-marke,
.bpv-fassung > .bpv-marke,
.bpv-zitat-werkzeug > .bpv-marke {
	padding-left: 0;
}

/* ============================================================
   21  UMBRUCHBAENDER
   ------------------------------------------------------------
   768–1023 px: der Kanal schrumpft auf 72 px, die Textspalte bleibt.
   Unter 768 px: der Kanal wird aufgeloest, Ziffern und Randnummern
   stehen als vorangestellte Marke in eigener Zeile, die Synopse
   schaltet von nebeneinander auf untereinander.
   ============================================================ */

@media (max-width: 1023px) {
	:root {
		--bpv-kanal: 72px;
	}
}

@media (max-width: 767px) {
	:root {
		--bpv-kanal: 0px;
		--bpv-einzug: 16px;
	}

	.bpv-blatt {
		padding: 1.5rem 16px 3rem;
	}

	/* Der Kanal ist aufgeloest: die Ziffer steht als Marke ueber ihrem
	   Absatz. Sie bleibt damit sichtbar an derselben Stelle der
	   Leserichtung — vor dem Text, nicht daneben. */
	.bpv-kanal {
		position: static;
		display: block;
		width: auto;
		text-align: left;
		margin: 0 0 0.15rem;
		line-height: 1.4;
	}

	.bpv-satz {
		padding-left: 0;
	}

	.bpv-permalink {
		position: absolute;
		right: 0;
		left: auto;
		top: 0;
	}

	.bpv-teil {
		padding-left: var(--bpv-einzug);
	}

	/* Der Deckel von 34rem gilt AUCH hier und auch bei 320 px. */
	.bpv-satz__text,
	.bpv-seitenkopf__lead,
	.bpv-prosa > * {
		max-width: 34rem;
	}

	.bpv-wortlaut .bpv-satz__text p,
	.bpv-wortlaut .bpv-satz__text li {
		font-size: 1.125rem;   /* 18 px — nie groesser als der Desktopsatz */
		line-height: 1.62;
	}

	.bpv-bearbeitung .bpv-satz__text p,
	.bpv-satz__text li {
		font-size: 1rem;       /* 16 px */
		line-height: 1.6;
	}

	.bpv-seitenkopf__titel,
	.bpv-normkopf__titel,
	.bpv-prosa__titel {
		font-size: 1.75rem;    /* 28 px */
	}

	.bpv-gruppe__titel,
	.bpv-dialog__titel {
		font-size: 1.375rem;   /* 22 px */
	}

	/* Die Synopse geht von nebeneinander auf untereinander: erst die
	   getilgte Fassung, dann die neue. Die Reihenfolge ist die der
	   Zeitachse und wird durch die Kopfzeile jeder Spalte benannt. */
	.bpv-synopse__paar {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.bpv-blaettern {
		flex-direction: column;
	}

	.bpv-blaettern__ziel--weiter {
		text-align: left;
	}

	.bpv-anzeige {
		min-height: 240px;
	}

	.bpv-zeile__link {
		padding-left: 0;
	}

	.bpv-kanal--zeile {
		top: auto;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	/* Die Synopse darf den Seitenkoerper nie horizontal scrollen lassen.
	   Zwei Spalten zu 44 % der Breite statt zweier fester 480-px-Spalten. */
	.bpv-synopse__paar {
		grid-template-columns: 44% 44%;
		gap: 4%;
	}
}

/* ============================================================
   22  BEWEGUNG
   ============================================================ */

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

/* ============================================================
   23  KONTRASTMODUS DES SYSTEMS
   ------------------------------------------------------------
   Im erzwungenen Kontrastmodus ersetzt das System alle Farben. Was
   dann bleiben MUSS, sind die Traeger, die ohnehin nicht farbig sind:
   der Anzeigenrahmen, die Durchstreichung und die Unterstreichung der
   Synopse und der Fokusring.
   ============================================================ */

@media (forced-colors: active) {
	.bpv-anzeige {
		border: 2px solid CanvasText;
	}

	.bpv-dialog__zeile--aktuell a {
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	:focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}

	.bpv-grafik svg .bpv-svg-linie,
	.bpv-grafik svg .bpv-svg-rahmen {
		stroke: CanvasText;
	}
}

/* ============================================================
   24  DRUCK
   ------------------------------------------------------------
   Ein ausgedruckter Kommentarauszug geht in die Handakte. Deshalb:
   keine Kopfleiste, keine Bedienelemente, keine Suche — und KEINE
   ANZEIGE. Was bleibt, ist der Text mit seinen Randnummern und der
   Fassungsfuss samt Impressumszeile.
   ============================================================ */

@media print {
	:root {
		--bpv-grund: #ffffff;
		--bpv-wortlaut: #000000;
		--bpv-meta: #333333;
		--bpv-akzent: #000000;
		--bpv-haarlinie: #999999;
		--bpv-flaeche: #ffffff;
		--bpv-markierung: transparent;
	}

	body {
		background: #ffffff;
		color: #000000;
		font-size: 11pt;
		line-height: 1.5;
	}

	.bpv-kopf,
	.bpv-dialog,
	.bpv-sprungmarke,
	.bpv-suche,
	.bpv-fuss__wege,
	.bpv-blaettern,
	.bpv-zitat-werkzeug__formen,
	.bpv-zitat-werkzeug__aktion,
	.bpv-synopse__marke,
	.bpv-synopse__schalter,
	.bpv-permalink,
	.bpv-anzeige {
		display: none !important;
	}

	.bpv-blatt {
		max-width: none;
		padding: 0;
	}

	/* Die Randnummern bleiben im Druck haengen — sie sind der Grund, aus
	   dem der Auszug ueberhaupt zitierfaehig ist. */
	.bpv-satz {
		padding-left: 90px;
		page-break-inside: avoid;
	}

	.bpv-kanal {
		position: absolute;
		left: 0;
		width: 70px;
	}

	.bpv-synopse {
		width: auto;
		margin-left: 0;
		overflow-x: visible;
	}

	.bpv-synopse__paar {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}

	.bpv-synopse__spalte {
		border: 1px solid #999999;
		background: transparent;
	}

	/* Der Filter ist im Druck ausgeblendet. Waere er noch aktiv, fehlten
	   im Ausdruck genau die Zeilen, von denen niemand mehr weiss, dass es
	   sie gibt. Deshalb wird die Ausblendung hier zurueckgenommen. */
	.bpv-synopse__schalter:checked ~ .bpv-synopse__liste .bpv-synopse__zeile--ohne-aenderung {
		display: block;
	}

	.bpv-aufklapper__inhalt {
		background: transparent;
	}

	details {
		display: block;
	}

	details > summary {
		list-style: none;
	}

	details .bpv-aufklapper__inhalt {
		display: block !important;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}

/* ============================================================
   Tabellen im Fliesstext eines Beitrags

   Die Zeichnungen bringen ihre Tabellenfassung mit eigenem Stilsatz mit
   (inc/grafiken.php). Eine Tabelle, die im Editor eines gewoehnlichen
   Beitrags steht, hatte bisher keine einzige Regel: keine Haarlinie, keine
   Zellenpolster, und ueber `.bpv-prosa > *` den 34-rem-Deckel, unter dem
   drei Spalten aneinanderkleben. Sie sah damit nach einem Ladefehler aus.

   Diese Regeln uebernehmen die Werte von `.bpv-grafik__tabelle`, damit eine
   Tabelle im Beitrag und eine Tabelle unter einer Zeichnung dieselbe Sprache
   sprechen. Der Deckel bleibt bei 34 rem: die schmale Spalte ist die
   Silhouette dieser Publikation, und eine Tabelle ist kein Grund, sie
   aufzugeben. Breite Tabellen rollen deshalb in ihrem eigenen Fenster
   (`overflow-x`) statt die Seite waagerecht zu schieben.
   ============================================================ */

.bpv-prosa table {
	display: block;
	overflow-x: auto;
	width: 100%;
	max-width: 34rem;
	margin: 1.75rem 0;
	border-collapse: collapse;
	font-family: var(--bpv-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

/* display:block am table wuerde thead und tbody voneinander loesen und die
   Spalten auseinanderlaufen lassen. Das innere Element traegt deshalb die
   Tabellendarstellung wieder. */
.bpv-prosa table > tbody,
.bpv-prosa table > thead {
	display: table-row-group;
}

.bpv-prosa table > thead {
	display: table-header-group;
}

.bpv-prosa th,
.bpv-prosa td {
	padding: 0.55rem 0.9rem 0.55rem 0;
	border-bottom: 1px solid var(--bpv-haarlinie);
	text-align: left;
	vertical-align: top;
}

.bpv-prosa thead th {
	color: var(--bpv-wortlaut);
	font-weight: 600;
}

.bpv-prosa tbody th {
	font-weight: 600;
}

.bpv-prosa caption {
	padding: 0 0 0.5rem;
	color: var(--bpv-meta);
	text-align: left;
}


/* ============================================================
   KORREKTUREN AUS DER VISUELLEN ABNAHME VOM 05.08.2026
   ============================================================ */

/* B4. Der Kopf war ein Flex ohne wrap: 251 px Ueberlauf, und der
   Dunkelmodus-Schalter stand ausserhalb des Sichtfelds. */
.bpvio-kopf__innen { flex-wrap: wrap; }
@media (max-width: 640px) {
  .bpvio-kopf__werkzeuge { flex: 1 1 100%; }
}


/* ============================================================
   BESCHRIFTUNGEN BRECHEN NICHT MEHR MITTEN IM WORT
   ============================================================
   Gesperrte Versalbeschriftungen in schmalen Zellen brachen zeichenweise
   um — aus "ORDNUNGSZAHLBEREICH" wurde "ORDNUNGSZAHLBEREIC / H". Ursache
   ist die Kombination aus letter-spacing und fehlender Silbentrennung:
   Der Browser bricht dann am letzten passenden Zeichen statt an einer
   Silbengrenze. Deutsche Fachkomposita treffen das zwangslaeufig. */

[class*="eyebrow"], [class*="ueberzeile"], [class*="__label"],
[class*="-label"], [class*="__marke"], [class*="kicker"],
[class*="__rubrik"], [class*="__feldname"], [class*="schriftfeld"] dt,
[class*="schriftfeld"] .bpo-feld__name {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
  hyphenate-limit-chars: 8 4 4;
}