/*
Theme Name: BauPVO-Lexikon
Theme URI: https://bauproduktenverordnung.info/
Author: Zurynski, Oezdogan & Co GmbH
Author URI: https://bauproduktenverordnung.info/impressum/
Description: Klassisches Theme fuer das Nachschlagewerk bauproduktenverordnung.info. Registerlayout aus vier Kolumnen und drei durchgehenden 1-px-Linien, A-Z-Register, Sofortsuche ohne Netzrequest, selbst gehostete Schriften, gekennzeichneter Anzeigenplatz. Kein Block-Theme, kein Build-Schritt, keine externen Ressourcen.
Version: 1.0.0
Requires at least: 6.4
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-info
Tags: custom-menu, translation-ready, accessibility-ready, full-width-template
*/

/* ============================================================
   1 — SCHRIFTEN, SELBST GEHOSTET

   Kein Google-Fonts-CDN, kein externer Request, keine Vorverbindung zu
   einem fremden Host. In Deutschland ist die Einbindung von Google Fonts
   ueber deren CDN datenschutzrechtlich beanstandet worden (LG Muenchen I,
   Urteil vom 20.01.2022, 3 O 17493/20), weil dabei die IP-Adresse des
   Besuchers an einen Dritten uebermittelt wird. Eine Lexikonseite, die bei
   jedem Aufruf eine IP-Adresse meldet, ist als Rechtsquelle unbrauchbar.

   Die WOFF2-Dateien liegen unter assets/fonts/ und werden mit dem Theme
   ausgeliefert; welche Dateien noch zu beschaffen sind, steht in der
   README.md. Fehlt eine Datei, greift der Fallback-Stack — die Seite bleibt
   lesbar, nur die Zeichenunterscheidung ist schlechter.

   font-display: swap statt block: bei fehlender Datei erscheint der Text
   sofort in der Systemschrift, statt drei Sekunden unsichtbar zu bleiben.

   unicode-range ist ausdruecklich festgeschrieben. Sie deckt Latein
   einschliesslich der Erweiterung ab und zusaetzlich genau die Sonder-
   zeichen, die diese Seite als BEDEUTUNGSTRAEGER benutzt: U+2011 (nicht
   umbrechender Bindestrich in Normbezeichnungen), U+202F (schmales
   geschuetztes Leerzeichen vor Einheiten und hinter "Art."), U+25A0 / U+25B6
   / U+2298 (die drei geometrischen Marken der Fristentabelle). Fehlte eine
   dieser Marken im Subset, faellt genau das Zeichen aus, das den Status
   traegt.
   ============================================================ */

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+2011, U+2013, U+2019, U+202F, U+25A0, U+25B6, U+2298;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('assets/fonts/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+2011, U+2013, U+2019, U+202F, U+25A0, U+25B6, U+2298;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('assets/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+2011, U+2013, U+2019, U+202F, U+25A0, U+25B6, U+2298;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('assets/fonts/AtkinsonHyperlegibleMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+2011, U+2013, U+2019, U+202F, U+25A0, U+25B6, U+2298;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('assets/fonts/AtkinsonHyperlegibleMono-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+2011, U+2013, U+2019, U+202F, U+25A0, U+25B6, U+2298;
}

/* ============================================================
   2 — TOKEN

   EINE SCHRIFTSIPPE, DREI TEXTFARBEN, KEINE STATUSFARBE.
   Die Seite kennt kein Rot, kein Gruen und kein Orange — weder als Schmuck
   noch als Bedeutung. Was einen Zustand hat, sagt ihn mit einem Wort, einer
   geometrischen Marke und einem Schriftgewicht (SC 1.4.1).

   GRUNDSATZ GEGEN VERSCHWINDENDE ZUSTAENDE: Eine Zustandsflaeche ist
   entweder VOLL mit dem Akzent gefuellt (aktiver Registerbuchstabe,
   ausgewaehlte Trefferzeile) oder sie existiert nicht. Schwach getoente
   Auswahlflaechen sind verboten; sie landen in der gedimmten Darstellung bei
   1,4:1 und sind dann weg.
   ============================================================ */

:root {
	--schrift: 'Atkinson Hyperlegible Next', 'Segoe UI', Roboto, sans-serif;
	--mono: 'Atkinson Hyperlegible Mono', ui-monospace, Consolas, monospace;

	/* Masse des Satzspiegels. Die 1115 px sind nicht gerundet, sie ergeben
	   sich aus den Spalten: 56 + 49 + (128 + 49 + 544) + 49 + 240. */
	--rand: 24px;
	--kopfhoehe: 152px; /* gebaute Hoehe der klebenden Kopfzone, siehe [id] */
	--daumen: 56px;
	--kennung: 128px;
	--prosa: 544px;
	--neben: 240px;
	--spalt: 49px; /* 24 px Weissraum + 1 px Linie + 24 px Weissraum */

	/* Hell — Standard. */
	--grund: #FFFFFF;
	--panel: #F2F4F6;
	--tinte: #15191F;
	--sekundaer: #6D6E6F;
	--platzhalter: #5F6062;
	--kolumne: #B9C0C8;
	--haarlinie: #D8DCE1;
	--bedienlinie: #6E7783;
	--akzent: #0A4EA6;
	--auf-akzent: #FFFFFF;
	--besucht: #6A2C91;
	--treffer-flaeche: #FFE08A;
	--treffer-tinte: #15191F;
	--fokus-innen: #FFFFFF;
	--fokus-aussen: #08306B;
	--anz-flaeche: #EFE3C8;
	--anz-rahmen: #8A6A1E;
	--anz-label: #5E4A14;
	--anz-tinte: #15191F;

	/* Native Bedienelemente bleiben hell. Die gedimmte Darstellung ist KEIN
	   Schwarzmodus, sondern gedaempftes Papier mit dunkler Tinte: ein
	   color-scheme: dark wuerde Auswahllisten und Bildlaufleisten schwarz
	   faerben und damit die einzige Flaeche der Seite erzeugen, die es nicht
	   geben soll. */
	color-scheme: light;
}

/*
 * GEDIMMTES PAPIER.
 * Der Grund ist kein Schwarz, sondern ein gedaempfter Papierton; die Tinte
 * bleibt dunkel. Das ist die netzweit vergebene Festlegung und kein
 * Geschmack: dieselbe Seite soll bei gedimmtem Licht wie abgeblendetes
 * Papier wirken und nicht wie ein Terminal.
 *
 * Der Block steht zweimal — einmal fuer die Systemeinstellung, einmal fuer
 * die Wahl von Hand. Das ist Absicht und keine Nachlaessigkeit: nur so
 * gewinnt data-theme in BEIDE Richtungen, also auch dann, wenn jemand auf
 * einem dunkel eingestellten Geraet die helle Darstellung will.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='hell']) {
		--grund: #969AA0;
		--panel: #8A8E94;
		--tinte: #090A0D;
		--sekundaer: #27282A;
		--platzhalter: #292E34;
		--kolumne: #6E7278;
		--haarlinie: #7E828A;
		--bedienlinie: #2E3339;
		--akzent: #1A2C43;
		--auf-akzent: #FFFFFF;
		--besucht: #3B1A52;
		--treffer-flaeche: #E8C86A;
		--treffer-tinte: #090A0D;
		--fokus-innen: #FFFFFF;
		--fokus-aussen: #090A0D;
		--anz-flaeche: #9C9789;
		--anz-rahmen: #4A3A0E;
		--anz-label: #3A2E08;
		--anz-tinte: #090A0D;
	}
}

:root[data-theme='dunkel'] {
	--grund: #969AA0;
	--panel: #8A8E94;
	--tinte: #090A0D;
	--sekundaer: #27282A;
	--platzhalter: #292E34;
	--kolumne: #6E7278;
	--haarlinie: #7E828A;
	--bedienlinie: #2E3339;
	--akzent: #1A2C43;
	--auf-akzent: #FFFFFF;
	--besucht: #3B1A52;
	--treffer-flaeche: #E8C86A;
	--treffer-tinte: #090A0D;
	--fokus-innen: #FFFFFF;
	--fokus-aussen: #090A0D;
	--anz-flaeche: #9C9789;
	--anz-rahmen: #4A3A0E;
	--anz-label: #3A2E08;
	--anz-tinte: #090A0D;
}

/* ============================================================
   3 — GRUNDLAGEN
   ============================================================ */

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

html {
	font-size: 16px;
	/* Kein scroll-behavior: smooth. Ein Registersprung soll sofort dort sein;
	   eine gerollte Strecke ueber 200 Eintraege ist keine Orientierungshilfe,
	   sondern Wartezeit. */
}

body {
	margin: 0;
	background: var(--grund);
	color: var(--tinte);
	font-family: var(--schrift);
	font-size: 16px;
	line-height: 24px; /* 1,50 — Puffer fuer SC 1.4.8 und SC 1.4.12 */
	font-weight: 400;

	/* Deutscher Fachsatz. Ohne Silbentrennung reissen Komposita wie
	   "Bauproduktenverordnung" oder "Uebergangsbestimmungen" in einer
	   544-px-Spalte Loecher von einem Drittel der Zeilenbreite. */
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	hyphenate-limit-chars: 6 3 3;
	text-rendering: optimizeLegibility;
}

/*
 * Alle Sprungziele bleiben unter der klebenden Kopfzone sichtbar. Ohne diese
 * Zeile verschwindet jedes Anker-Ziel hinter dem Kopf — der haeufigste und am
 * schwersten zu bemerkende Fehler an klebenden Leisten.
 *
 * Der Wert ist AUS DER GEBAUTEN KOPFHOEHE abgeleitet und nicht aus der
 * Entwurfsangabe von 96 px: der Kopf traegt hier Wortmarke, Suchfeld,
 * Kuerzelzeile und die 36-px-Registerleiste und ist damit rund 150 px hoch.
 * Mit 96 px laege jedes Sprungziel weiterhin unter der Leiste — die Regel
 * saehe richtig aus und wirkte nicht. --kopfhoehe steht als Token da, damit
 * eine Aenderung am Kopf hier nachgezogen werden kann.
 */
[id] {
	scroll-margin-top: calc(var(--kopfhoehe) + 8px);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: var(--akzent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:visited {
	color: var(--besucht);
}

/* Hover aendert NIE eine Flaeche, nur Unterstreichung und Gewicht. Eine
   Flaeche beim Zeigen erzeugt genau die schwach getoenten Zustaende, die in
   der gedimmten Darstellung verschwinden. */
a:hover {
	text-decoration-thickness: 2px;
}

/*
 * DER FOKUSRING.
 *
 * Er ist ein EIGENER Token und ausdruecklich NICHT der Akzent. Vorher war der
 * Ring #0A4EA6 und der aktive Registerbuchstabe ebenfalls #0A4EA6 — der Ring
 * verschwand also mit 1,00:1 genau auf dem Element, das ihn am dringendsten
 * braucht.
 *
 * Zweifarbig, 2 px innen, 2 px aussen, kein Versatz, Radius 0. Der innere
 * Ring entsteht aus outline, der aeussere aus einem box-shadow mit 4 px
 * Spreizung, den die outline zur Haelfte ueberdeckt.
 *
 * HELL: aussen #08306B traegt gegen Grund (12,76:1), Panel (11,58:1),
 * Trefferflaeche (9,89:1) und Anzeigenflaeche (10,02:1). Auf der gefuellten
 * Akzentflaeche traegt statt dessen der innere weisse Ring mit 7,91:1.
 * GEDIMMT: aussen #090A0D traegt gegen den Papierton mit 7,00:1, auf der
 * gefuellten Akzentflaeche traegt innen #FFFFFF mit 14,1:1. In beiden
 * Faellen liegt der schwaechste tragende Wert weit ueber der 3:1-Forderung.
 */
:focus-visible {
	outline: 2px solid var(--fokus-innen);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--fokus-aussen);
	border-radius: 0;
}

/* Der Fokus ist NIE unsichtbar. Diese Zeile faengt Browser ab, die auf
   veralteten Regeln noch outline:none erben wuerden. */
:focus:not(:focus-visible) {
	outline: none;
}

mark {
	background: var(--treffer-flaeche);
	color: var(--treffer-tinte);
	/* Die Flaeche allein traegt NICHTS: 1,29:1 gegen das Papier. Das Gewicht
	   ist deshalb Bestandteil der Auszeichnung und kein Schmuck (SC 1.4.1). */
	font-weight: 700;
	padding: 0 1px;
}

.bpvi-nur-vorlesen {
	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;
}

/* Ziffern, die untereinander stehen muessen: Datum, Bestand, Tabellenwerte. */
.bpvi-ziffern,
.bpvi-fristen,
.bpvi-uebersicht__zahl {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* Hilfsklasse fuer die Redaktion: Normbezeichnungen im Fliesstext, die nicht
   umbrechen duerfen ("DIN EN 1090-1"). Der Fundstellen-Chip bringt seine
   eigene Regel mit und braucht sie nicht. */
.bpvi-nowrap {
	white-space: nowrap;
}

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

.bpvi-sprungmarke {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--grund);
	color: var(--tinte);
	font-family: var(--mono);
	font-size: 15px;
	padding: 12px 16px;
	min-height: 44px;
	text-decoration: underline;
}

.bpvi-sprungmarke:focus {
	left: 0;
}

/* ============================================================
   5 — KOPF (die einzige klebende Zone der Seite)
   ============================================================ */

.bpvi-kopf {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--panel);
	/* Genau eine waagerechte Haarlinie schliesst den Kopf ab. Die zweite und
	   letzte der ganzen Seite leitet den Fuss ein. */
	border-bottom: 1px solid var(--haarlinie);
}

.bpvi-kopf__innen {
	width: 100%;
	max-width: calc(1115px + 2 * var(--rand));
	margin-inline: auto;
	padding: 12px var(--rand);
	min-height: 88px; /* min-height, nie height: Komposita und 200 % Zoom */
}

.bpvi-kopf__zeile {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.bpvi-wortmarke {
	flex: 0 0 auto;
	display: block;
	padding-block: 6px;
	color: var(--tinte);
	text-decoration: none;
	min-width: var(--daumen);
}

.bpvi-wortmarke__name {
	display: block;
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.bpvi-wortmarke__zusatz {
	display: block;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
}

.bpvi-wortmarke:hover .bpvi-wortmarke__name {
	text-decoration: underline;
}

/* --- Suchfeld: kein Kasten, nur eine Formularlinie --- */

.bpvi-suche {
	position: relative;
	flex: 1 1 var(--prosa);
	max-width: var(--prosa);
}

/* Bezugsrahmen der Trefferliste ist das FORMULAR und nicht der Behaelter:
   der Behaelter traegt darunter noch die Kuerzelzeile, die auf schmalen
   Geraeten entfaellt. An ihm gemessen laege die Liste je nach Umbruchband an
   zwei verschiedenen Stellen. */
.bpvi-suchform {
	position: relative;
}

.bpvi-suchform__zeile {
	display: flex;
	align-items: stretch;
	gap: 12px;
	border-bottom: 2px solid var(--bedienlinie);
}

.bpvi-suchform__feld {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 56px;
	border: 0;
	background: transparent;
	color: var(--tinte);
	font-family: var(--schrift);
	font-size: 18px;
	line-height: 24px;
	padding: 0;
	appearance: none;
}

.bpvi-suchform__feld::placeholder {
	color: var(--platzhalter);
	opacity: 1; /* Firefox dimmt sonst zusaetzlich und reisst den Kontrast ein */
}

.bpvi-suchform__knopf {
	flex: 0 0 auto;
	min-height: 44px;
	align-self: center;
	border: 0;
	background: transparent;
	color: var(--akzent);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	cursor: pointer;
	padding: 12px 4px;
}

.bpvi-suche__kuerzel {
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
}

/* --- Trefferliste der Sofortsuche --- */

.bpvi-treffer {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 30;
	/* Opake Flaeche, aber KEIN umlaufender Rahmen: die Anzeige bleibt das
	   einzige gerahmte Rechteck der Seite. Abgeschlossen wird die Liste unten
	   durch dieselbe 2-px-Bedienlinie wie das Feld darueber. */
	background: var(--grund);
	border-bottom: 2px solid var(--bedienlinie);
	max-height: 60vh;
	overflow-y: auto;
}

.bpvi-treffer__zeile {
	min-height: 44px;
}

.bpvi-treffer__ziel {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 8px 12px;
	color: var(--tinte);
	text-decoration: none;
}

.bpvi-treffer__kennung {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
	overflow-wrap: break-word;
}

.bpvi-treffer__satz {
	/* Getrennt wird senkrecht — hier wie im ganzen Satzspiegel. */
	border-left: 1px solid var(--kolumne);
	padding-left: 12px;
	font-size: 15px;
	line-height: 21px;
}

.bpvi-treffer__begriff {
	display: block;
	font-weight: 700;
}

.bpvi-treffer__anriss {
	display: block;
	color: var(--sekundaer);
}

/* Die ausgewaehlte Zeile ist VOLL gefuellt. Keine schwach getoente
   Auswahlflaeche, die in der gedimmten Darstellung bei 1,4:1 verschwindet. */
.bpvi-treffer__zeile--gewaehlt .bpvi-treffer__ziel {
	background: var(--akzent);
	color: var(--auf-akzent);
}

.bpvi-treffer__zeile--gewaehlt .bpvi-treffer__kennung,
.bpvi-treffer__zeile--gewaehlt .bpvi-treffer__anriss {
	color: var(--auf-akzent);
}

.bpvi-treffer__zeile--gewaehlt .bpvi-treffer__satz {
	border-left-color: var(--auf-akzent);
}

.bpvi-treffer__zeile--gewaehlt mark {
	/* Auf gefuelltem Grund traegt die Trefferflaeche nichts mehr; das Gewicht
	   traegt weiter. Die Flaeche wird deshalb nicht heller gerechnet, sondern
	   weggelassen. */
	background: transparent;
	color: var(--auf-akzent);
	text-decoration: underline;
}

/* --- Umschalter der Darstellung --- */

.bpvi-thema {
	flex: 0 0 auto;
	margin-left: auto;
}

.bpvi-thema__knopf {
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--akzent);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	cursor: pointer;
	padding: 12px 4px;
}

/* --- A–Z-Registerleiste --- */

.bpvi-az {
	margin-top: 12px;
}

.bpvi-az__liste {
	display: flex;
	gap: 3px;
	flex-wrap: nowrap;
	/* Die Leiste ist 1089 px breit und passt in den vollen Satzspiegel. Im
	   mittleren Band (851 px) passt sie nicht mehr — dann rollt SIE, nicht der
	   Seitenkoerper. Umbrechen darf sie nicht: eine zweizeilige Leiste aendert
	   ihre Ordnung und damit den Grund, warum man aus dem Gedaechtnis zielen
	   kann. */
	overflow-x: auto;
}

.bpvi-az__punkt {
	flex: 0 0 auto;
}

/*
 * ZIELGROESSE 36 x 36 px, TATSAECHLICH.
 * Die Groesse ist die Flaeche des Ziels selbst und nicht der Abstand
 * daneben — Abstand vergroessert kein Ziel. 28 x 36 + 27 x 3 = 1089 px und
 * passen damit in den 1115-px-Satzspiegel (SC 2.5.8 ohne Ausnahmeregel).
 */
.bpvi-az__ziel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-family: var(--mono);
	font-size: 15px;
	line-height: 21px;
	color: var(--akzent);
	text-decoration: none;
}

.bpvi-az__ziel:hover {
	text-decoration: underline;
}

.bpvi-az__ziel--aktiv,
.bpvi-az__ziel--aktiv:visited {
	background: var(--akzent);
	color: var(--auf-akzent);
	font-weight: 700;
}

/* Leere Buchstaben bleiben sichtbar und behalten ihren Platz — die Leiste
   aendert ihre Ordnung nie. Sie sind kein Bedienelement und tragen deshalb
   kein a-Element, sondern aria-disabled. */
.bpvi-az__ziel--leer {
	color: var(--sekundaer);
	cursor: default;
}

/* ============================================================
   6 — DAS BLATT: vier Kolumnen, drei durchgehende Linien

   Das Trennmittel der Seite ist die senkrechte 1-px-Linie. Es gibt keine
   Karten, keine Rundungen, keine Schatten, keine Balken und kein Zebra;
   waagerechte Linien gibt es genau zwei auf der ganzen Seite (unter dem Kopf,
   ueber dem Fuss).

   Die Linien liegen ABSOLUT im Blatt und nicht als Rasterspalten. Grund: sie
   muessen ohne Unterbrechung von der Kopfkante bis zur Fusskante laufen,
   unabhaengig davon, wie viele Bloecke gerade Rasterzeilen erzeugen. Ihre
   Abstaende sind exakt bestimmt, weil alle Spalten feste Breiten haben:
   56 + 24 = 80, +1 +24 +128 +24 = 257, +1 +24 +544 +24 = 850.
   ============================================================ */

.bpvi-blatt {
	position: relative;
	width: 100%;
	max-width: calc(1115px + 2 * var(--rand));
	margin-inline: auto;
	padding: 40px var(--rand) 56px;

	display: grid;
	grid-template-columns: var(--daumen) calc(var(--kennung) + var(--spalt) + var(--prosa)) var(--neben);
	column-gap: var(--spalt);
	row-gap: 0;
	align-items: start;
}

.bpvi-blatt > * {
	grid-column: 2;
	min-width: 0;
}

.bpvi-linie {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--kolumne);
	/* Rein dekorativ: 1,84:1 hell, 1,71:1 gedimmt. An der Linie haengt keine
	   Information — die Spaltenzuordnung traegt sich ueber Weissraum,
	   Schriftwechsel (Mono gegen Sans) und Position. */
}

.bpvi-linie--eins {
	left: calc(var(--rand) + 80px);
}

.bpvi-linie--zwei {
	left: calc(var(--rand) + 257px);
}

.bpvi-linie--drei {
	left: calc(var(--rand) + 850px);
}

/* --- Daumenregisterkante --- */

/*
 * Oben ausgerichtet und NICHT klebend. Ein mitlaufender Buchstabe waere ein
 * zweites klebendes Element neben dem Kopf; die Seite haelt bewusst genau
 * eine klebende Zone. Der Daumenindex eines gedruckten Woerterbuchs wandert
 * schliesslich auch nicht mit dem Blick.
 */
.bpvi-daumen {
	grid-column: 1;
}

.bpvi-daumen__zeichen {
	display: block;
	font-family: var(--mono);
	font-size: 44px;
	line-height: 48px;
	font-weight: 700;
	color: var(--sekundaer);
	letter-spacing: -0.01em;
}

/* --- Bloecke: Kennungsspalte plus Prosa --- */

.bpvi-block {
	display: grid;
	grid-template-columns: var(--kennung) minmax(0, var(--prosa));
	column-gap: var(--spalt);
	margin-block-start: 40px;
}

/* Der erste Block sitzt ohne Zwischenraum unter dem Kopf: kein Hero, kein
   Titelbild, keine Begruessung. */
.bpvi-satz > .bpvi-block:first-child,
.bpvi-blatt > .bpvi-block:first-of-type {
	margin-block-start: 0;
}

.bpvi-block__satz {
	max-width: var(--prosa);
}

/*
 * DIE KENNUNGSSPALTE.
 * Sie ist der Ersatz fuer alle frueheren Balken und Flaechen: Kategorie,
 * Fundstelle, Stand und Blocklabels haengen hier in Mono-Versalien. Die
 * Auszeichnung geschieht durch Position und Schriftwechsel — nicht durch
 * Farbe, nicht durch Rahmen, nicht durch eine Flaeche.
 */
.bpvi-kennung__zeile {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
	overflow-wrap: break-word;
}

.bpvi-kennung__zeile--stark {
	color: var(--tinte);
	font-weight: 700;
	text-transform: uppercase;
}

.bpvi-kennung__zeile--leise {
	text-transform: uppercase;
}

.bpvi-kennung__zeile + .bpvi-kennung__zeile {
	margin-top: 8px;
}

/* --- Typografische Stufen --- */

.bpvi-begriff {
	font-size: 30px;
	line-height: 36px;
	font-weight: 700;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.bpvi-kurzantwort {
	margin-top: 12px;
	font-size: 19px;
	line-height: 28px;
	max-width: var(--prosa);
}

.bpvi-h2,
.bpvi-prosa h2 {
	margin-top: 28px;
	font-size: 17px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.bpvi-prosa h3 {
	margin-top: 28px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
}

.bpvi-prosa p,
.bpvi-prosa ul,
.bpvi-prosa ol {
	margin-top: 12px;
	max-width: var(--prosa);
	/* DoP-, CELEX- und Kennnummern sind laenger als jede Spalte und duerfen
	   deshalb notfalls im Wort brechen. */
	overflow-wrap: break-word;
}

.bpvi-prosa ul,
.bpvi-prosa ol {
	padding-left: 20px;
	list-style: disc;
}

.bpvi-prosa ol {
	list-style: decimal;
}

.bpvi-prosa li + li {
	margin-top: 4px;
}

/* Der Beispielblock: KEINE Flaeche, KEINE Linie links. Beides kollidierte mit
   dem Anzeigenblock — und ein redaktioneller Block, der wie Werbung aussieht,
   nimmt der Werbekennzeichnung ihre Wirkung. Ausgewiesen wird er allein durch
   das haengende Mono-Label und diesen 12-px-Einzug. */
.bpvi-prosa blockquote,
.bpvi-beispiel,
.bpvi-rechtsfolge {
	margin-top: 12px;
	padding-left: 12px;
	font-size: 15px;
	line-height: 21px;
}

.bpvi-beispiel__label,
.bpvi-rechtsfolge__label {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--sekundaer);
}

.bpvi-rechtsfolge__wert {
	margin-left: 0;
}

.bpvi-beispiel p {
	margin-top: 4px;
	font-size: 15px;
	line-height: 21px;
}

.bpvi-meta,
.bpvi-leer {
	margin-top: 12px;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
}

/* --- Fundstellen-Chip --- */

.bpvi-fundstelle {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: var(--akzent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bpvi-fundstelle:visited {
	color: var(--besucht);
}

/* --- Abkuerzungszeile --- */

.bpvi-abk {
	font-size: 15px;
	line-height: 21px;
}

.bpvi-abk__kuerzel {
	font-family: var(--mono);
	font-size: 15px;
	line-height: 21px;
	font-weight: 700;
	letter-spacing: 0.04em;
	overflow-wrap: break-word;
}

.bpvi-abk__wert {
	margin-left: 0;
	color: var(--tinte);
}

.bpvi-abk__wert--de {
	color: var(--sekundaer);
}

/* --- Fristentabelle --- */

.bpvi-tabellenrahmen {
	/* Breite Tabellen rollen im EIGENEN Container. Der Seitenkoerper rollt
	   nie waagerecht; sonst muesste man bei jedem Absatz zurueckscrollen. */
	overflow-x: auto;
	max-width: var(--prosa);
}

.bpvi-fristen {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 21px;
	text-align: left;
}

.bpvi-fristen__caption {
	caption-side: bottom;
	margin-top: 12px;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
	text-align: left;
}

.bpvi-fristen th,
.bpvi-fristen td {
	/*
	 * Die Zeilenhoehe entsteht aus Innenabstand und Zeilenhoehe, nicht aus
	 * height: 21 + 2 x 12 = 45 px und damit ueber der 44-px-Marke, aber ohne
	 * Deckel. Eine feste Hoehe wuerde bei 200 % Zoom oder einem langen
	 * Kompositum abgeschnitten (SC 1.4.12).
	 */
	padding: 12px;
	vertical-align: top;
	font-weight: 400;
	text-align: left;
}

/* Getrennt wird ausschliesslich senkrecht — kein Zebra, keine Zeilenlinien. */
.bpvi-fristen th + th,
.bpvi-fristen td + td,
.bpvi-fristen th + td,
.bpvi-fristen td + th {
	border-left: 1px solid var(--kolumne);
}

.bpvi-fristen thead th {
	background: var(--panel);
	border-bottom: 2px solid var(--bedienlinie);
	font-weight: 700;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bpvi-fristen__datum {
	width: 140px;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
}

.bpvi-fristen__marke {
	display: block;
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	font-weight: 700;
}

/* Abgelaufene Zeilen ZUSAETZLICH in Sekundaerfarbe — zusaetzlich zum
   Wortlabel und zur geometrischen Marke, nicht statt dessen. */
.bpvi-fristen__zeile--abgelaufen {
	color: var(--sekundaer);
}

.bpvi-fristen__zeile--abgelaufen .bpvi-fristen__marke {
	font-weight: 400;
}

.bpvi-fristen__fundstelle {
	display: block;
	margin-top: 4px;
}

.bpvi-belege {
	margin-top: 12px;
	max-width: var(--prosa);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
}

.bpvi-belege__zeile + .bpvi-belege__zeile {
	margin-top: 8px;
}

/* --- Abgrenzung, Nachbarn, Stand --- */

.bpvi-abgrenzung {
	margin-top: 12px;
	font-size: 15px;
	line-height: 21px;
}

.bpvi-abgrenzung__zeile {
	min-height: 44px;
	padding-block: 8px;
}

.bpvi-abgrenzung__begriff {
	font-weight: 700;
}

.bpvi-abgrenzung__merkmal {
	color: var(--sekundaer);
}

.bpvi-nachbarn {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	font-size: 15px;
	line-height: 21px;
}

.bpvi-nachbarn__ziel {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.bpvi-nachbarn__hier {
	font-weight: 700;
	color: var(--sekundaer);
}

.bpvi-siehe-auch {
	margin-top: 12px;
	font-size: 15px;
	line-height: 21px;
}

.bpvi-siehe-auch__label {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sekundaer);
	margin-right: 8px;
}

.bpvi-stand {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
	max-width: var(--prosa);
}

.bpvi-stand > span {
	display: block;
}

.bpvi-stand > span + span {
	margin-top: 4px;
}

/* --- Listen im Register und in der Suche --- */

.bpvi-liste {
	margin-top: 12px;
}

.bpvi-zeile__ziel {
	display: grid;
	grid-template-columns: var(--kennung) minmax(0, 1fr);
	column-gap: 24px;
	min-height: 44px;
	padding-block: 10px;
	color: var(--tinte);
	text-decoration: none;
}

.bpvi-zeile__kennung {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--sekundaer);
	overflow-wrap: break-word;
}

.bpvi-zeile__satz {
	border-left: 1px solid var(--kolumne);
	padding-left: 24px;
	font-size: 15px;
	line-height: 21px;
}

.bpvi-zeile__begriff {
	display: block;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--akzent);
}

.bpvi-zeile__anriss {
	display: block;
	color: var(--sekundaer);
}

.bpvi-zeile__ziel:hover .bpvi-zeile__begriff {
	text-decoration-thickness: 2px;
}

/* --- Registeruebersicht der Startseite --- */

.bpvi-uebersicht {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-top: 12px;
	max-width: var(--prosa);
}

.bpvi-uebersicht__ziel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 60px;
	min-height: 60px;
	padding: 6px 4px;
	font-family: var(--mono);
	text-decoration: none;
	color: var(--akzent);
}

.bpvi-uebersicht__zeichen {
	font-size: 15px;
	line-height: 21px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bpvi-uebersicht__zahl {
	font-size: 13px;
	line-height: 18px;
	color: var(--sekundaer);
}

.bpvi-uebersicht__ziel--leer {
	color: var(--sekundaer);
	cursor: default;
}

.bpvi-uebersicht__ziel--leer .bpvi-uebersicht__zeichen {
	text-decoration: none;
	font-weight: 400;
}

/* --- Abkuerzungsverzeichnis --- */

.bpvi-abkliste {
	margin-top: 12px;
	columns: 2;
	column-gap: 49px;
	/* Die Spalte fuehrt eine senkrechte Linie — dasselbe Trennmittel wie
	   ueberall sonst auf der Seite. */
	column-rule: 1px solid var(--kolumne);
	max-width: var(--prosa);
}

.bpvi-abkliste__zeile {
	break-inside: avoid;
	min-height: 40px;
	padding-block: 6px;
}

.bpvi-abkliste__kuerzel {
	font-family: var(--mono);
	font-size: 15px;
	line-height: 21px;
	font-weight: 700;
	letter-spacing: 0.04em;
	overflow-wrap: break-word;
}

.bpvi-abkliste__wert {
	margin-left: 0;
	font-size: 15px;
	line-height: 21px;
}

.bpvi-abkliste__de {
	display: block;
	color: var(--sekundaer);
}

/* --- Blaetterung --- */

.pagination,
.nav-links {
	margin-top: 28px;
	font-family: var(--mono);
	font-size: 15px;
	line-height: 21px;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	text-decoration: underline;
}

.nav-links .page-numbers.current {
	background: var(--akzent);
	color: var(--auf-akzent);
	text-decoration: none;
	font-weight: 700;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ============================================================
   7 — ZEICHNUNGEN

   Die uebrigen Regeln der Zeichnungen stehen bei ihrem Markup in
   inc/graphics/zeichnung.php und werden nur in der Ansicht 'eintrag'
   eingebunden. Hier steht nur, was auch ohne Zeichnung gilt.
   ============================================================ */

figure img,
.bpvi-prosa img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   8 — ANZEIGE

   Drei tragende Trennsignale, alle nachgerechnet:
   (1) 2-px-Vollrahmen #8A6A1E — 5,05:1 gegen Papierweiss, 3,96:1 gegen die
       Anzeigenflaeche. Der redaktionelle Teil der Seite kennt ueberhaupt
       keinen umlaufenden Rahmen; dies ist das einzige gerahmte Rechteck.
   (2) Das Wort ANZEIGE in Mono 13 px, 700, Versalien, auf eigener Leiste.
   (3) Die Pflicht-Schlusszeile, netzweit im selben Wortlaut.

   AUSDRUECKLICH NICHT TRAGEND: die Flaeche. #EFE3C8 hebt sich mit 1,27:1 vom
   Papierweiss ab, in der gedimmten Darstellung #9C9789 mit 1,03:1. Das ist zu
   wenig, um irgendetwas zu behaupten. Der Ton wird als zusaetzliches, messbar
   unwirksames Merkmal gefuehrt und NICHT als Trennsignal. In Graustufen und
   bei Farbfehlsichtigkeit tragen allein Rahmen und Wortlabel; im Ausdruck
   entfaellt der Block ganz.
   ============================================================ */

.bpvi-anzeige {
	grid-column: 3;
	border: 2px solid var(--anz-rahmen);
	background: var(--anz-flaeche);
	color: var(--anz-tinte);
	/* Feste Platzreserve gegen Layoutspruenge (CLS). min-height, nicht height:
	   eine feste Hoehe schnitte den Text bei 200 % Zoom ab. */
	min-height: 250px;
	/* Kein Kleben, kein Mitscrollen. Der Block stand frueher mit 96 px Versatz
	   neben dem redaktionellen Text und war die einzige mitlaufende Anzeige im
	   ganzen Netz. */
	position: static;
	/* Abstand zum Kopfbereich, damit der Block neben der Kurzantwort beginnt
	   und nicht neben der Ueberschrift. */
	margin-top: 96px;
}

.bpvi-anzeige__label {
	min-height: 24px;
	padding: 3px 12px;
	border-bottom: 1px solid var(--anz-rahmen);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--anz-label);
}

.bpvi-anzeige__inhalt {
	/* Mindestabstand 24 px zum Rahmen: die Anzeige soll erkennbar ein
	   eingesetzter Block sein und nicht die Randbedingungen des Satzspiegels
	   uebernehmen. */
	padding: 24px;
}

/*
 * Die Anzeige darf die Lexikon-Typografie NICHT imitieren: kein
 * Fundstellen-Chip, keine Kennungsspalte, keine Kolumnenlinie, keine
 * Kategorie-Versalien, keine Definitionsformatierung. Deshalb steht hier
 * gewoehnlicher Fliesstext in Fliesstextgroesse und ein Knopf, der wie ein
 * Knopf aussieht — das einzige gefuellte Rechteck im redaktionellen Umfeld
 * gehoert damit sichtbar zur Werbung.
 */
.bpvi-anzeige__titel {
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}

.bpvi-anzeige__text {
	margin-top: 12px;
	font-size: 16px;
	line-height: 24px;
}

.bpvi-anzeige__knopfzeile {
	margin-top: 16px;
}

.bpvi-anzeige__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	background: var(--anz-rahmen);
	color: var(--grund);
	text-decoration: underline;
	font-weight: 700;
}

.bpvi-anzeige__knopf:visited {
	color: var(--grund);
}

.bpvi-anzeige__schluss {
	padding: 0 12px 12px;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.06em;
	color: var(--anz-label);
}

/* ============================================================
   9 — FUSS
   ============================================================ */

.bpvi-fuss {
	/* Die zweite und letzte waagerechte Haarlinie der Seite. */
	border-top: 1px solid var(--haarlinie);
	margin-top: 56px;
}

.bpvi-fuss__innen {
	width: 100%;
	max-width: calc(1115px + 2 * var(--rand));
	margin-inline: auto;
	padding: 28px var(--rand) 56px;
}

.bpvi-impressum {
	max-width: 60rem;
	font-size: 14px;
	line-height: 20px;
	color: var(--sekundaer);
}

.bpvi-impressum__zeile {
	color: var(--tinte);
}

.bpvi-impressum__schrift {
	margin-top: 12px;
}

.bpvi-fuss__nav {
	margin-top: 12px;
}

.bpvi-fuss__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	font-size: 14px;
	line-height: 20px;
}

.bpvi-fuss__liste a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ============================================================
   10 — UMBRUCHBAND 1162 bis 940 px

   Die Nebenspalte entfaellt, Daumenkante und Kennungsspalte bleiben. Der
   Satzspiegel ist dann 851 px breit (850 + die abschliessende Linie) — die
   drei Linien behalten ihre Abstaende, weil sich vor der Nebenspalte nichts
   aendert.
   ============================================================ */

@media (max-width: 1162px) {
	.bpvi-kopf__innen,
	.bpvi-blatt,
	.bpvi-fuss__innen {
		max-width: calc(851px + 2 * var(--rand));
	}

	.bpvi-blatt {
		grid-template-columns: var(--daumen) calc(var(--kennung) + var(--spalt) + var(--prosa));
	}

	.bpvi-anzeige {
		/* Ohne Nebenspalte steht die Anzeige im Fluss an ihrer Markup-Stelle:
		   nach der Erlaeuterung, vor der Fristentabelle. Sie richtet sich an
		   der Prosaspalte aus, nicht an der Kennungsspalte — sonst laege sie
		   unter den Mono-Labels und saehe aus wie eines. */
		grid-column: 2;
		margin-left: calc(var(--kennung) + var(--spalt));
		margin-top: 40px;
		max-width: var(--prosa);
	}
}

/* ============================================================
   11 — UMBRUCHBAND UNTER 940 px

   Einspaltig. Die Daumenkante schrumpft zu einem Mono-Zeichen ueber der H1,
   die Kennungsspalte klappt als Mono-Zeile ueber ihren Block, die A-Z-Leiste
   wird zur waagerecht rollbaren Reihe mit 44 x 44 px grossen Zielen.

   Der Fliesstext bleibt 16px/24px — kein Element ist auf dem Desktop kleiner
   gesetzt als hier — und die Prosaspalte bleibt in JEDEM Band auf 34rem
   gedeckelt. Ohne diesen Deckel liefen auf einem breiten Telefon im
   Querformat 99 Zeichen pro Zeile.
   ============================================================ */

@media (max-width: 939px) {
	:root {
		--rand: 16px;
		--kopfhoehe: 148px;
	}

	.bpvi-kopf__innen {
		padding-block: 8px;
		min-height: 0;
	}

	/*
	 * Die Kuerzelzeile und der Marken-Zusatz entfallen. Beides kostet auf
	 * einem 360-px-Geraet zusammen 40 px KLEBENDE Hoehe — und die Ansage
	 * "Taste / oder Strg + K" richtet sich an eine Tastatur, die hier nicht
	 * da ist. Der Platz gehoert dem Suchfeld und der Registerleiste.
	 */
	.bpvi-suche__kuerzel,
	.bpvi-wortmarke__zusatz {
		display: none;
	}

	.bpvi-kopf__zeile {
		gap: 12px;
	}

	/*
	 * Auf schmalen Geraeten steht das Suchfeld in einer eigenen Zeile unter
	 * Wortmarke und Umschalter. Das ist der einzige Ort im Theme, an dem
	 * order die Bildschirmreihenfolge gegen die Markup-Reihenfolge dreht —
	 * zulaessig, weil zwischen Wortmarke, Umschalter und Suchfeld keine
	 * inhaltliche Reihenfolge besteht (SC 1.3.2 betrifft bedeutungstragende
	 * Abfolgen). Die Tabulatorfolge bleibt Wortmarke, Suchfeld, Umschalter und
	 * damit die sinnvolle. In den INHALTSBLOECKEN gibt es kein order.
	 */
	.bpvi-suche {
		flex: 1 1 100%;
		max-width: 100%;
		order: 3;
	}

	.bpvi-suchform__feld {
		min-height: 52px;
		font-size: 18px;
	}

	.bpvi-thema {
		order: 2;
	}

	.bpvi-az__liste {
		overflow-x: auto;
		padding-bottom: 4px;
		/* Waagerecht rollbar — aber nur diese Leiste, nie der Seitenkoerper. */
		scrollbar-width: thin;
	}

	.bpvi-az__ziel {
		width: 44px;
		height: 44px;
	}

	.bpvi-blatt {
		display: block;
		padding-top: 28px;
	}

	/* Die Kolumnenlinien entfallen: bei einer Spalte gibt es nichts
	   nebeneinander zu trennen, und eine Linie ohne Trennaufgabe waere
	   Dekoration. */
	.bpvi-linie {
		display: none;
	}

	.bpvi-daumen {
		position: static;
		margin-bottom: 8px;
	}

	.bpvi-daumen__zeichen {
		font-size: 30px;
		line-height: 36px;
	}

	.bpvi-block {
		display: block;
		margin-block-start: 40px;
	}

	.bpvi-block__kennung {
		margin-bottom: 8px;
	}

	.bpvi-block__kennung .bpvi-kennung__zeile {
		display: inline;
	}

	.bpvi-block__kennung .bpvi-kennung__zeile + .bpvi-kennung__zeile {
		margin-top: 0;
		margin-left: 12px;
	}

	.bpvi-block__satz,
	.bpvi-kurzantwort,
	.bpvi-prosa p,
	.bpvi-prosa ul,
	.bpvi-prosa ol,
	.bpvi-tabellenrahmen,
	.bpvi-belege,
	.bpvi-stand {
		max-width: 34rem;
	}

	.bpvi-anzeige {
		margin-left: 0;
		margin-top: 40px;
		max-width: 100%;
		min-height: 200px;
	}

	.bpvi-zeile__ziel {
		display: block;
		padding-block: 12px;
	}

	.bpvi-zeile__satz {
		border-left: 0;
		padding-left: 0;
	}

	.bpvi-zeile__kennung {
		display: block;
		margin-bottom: 2px;
	}

	.bpvi-abkliste {
		columns: 1;
		column-rule: 0;
	}

	.bpvi-treffer__ziel {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.bpvi-treffer__satz {
		border-left: 0;
		padding-left: 0;
	}

	/*
	 * DIE FRISTENTABELLE KIPPT IN DEFINITIONSLISTEN.
	 * Drei Spalten mit deutschen Komposita passen auf 360 px nicht nebeneinander;
	 * waagerechtes Rollen einer Tabelle mit Datum in der ersten Spalte heisst,
	 * das Datum beim Lesen der dritten Spalte zu verlieren. Jede Zelle traegt
	 * ihre Beschriftung deshalb ueber data-label bei sich.
	 */
	.bpvi-fristen,
	.bpvi-fristen tbody,
	.bpvi-fristen tr,
	.bpvi-fristen td,
	.bpvi-fristen th {
		display: block;
		width: auto;
	}

	.bpvi-fristen thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}

	.bpvi-fristen tbody tr {
		padding-block: 12px;
	}

	.bpvi-fristen tbody tr + tr {
		/* Ausnahmsweise eine waagerechte Linie: bei einer Spalte gibt es keine
		   senkrechte Kante mehr, die zwei Datensaetze trennen koennte. Sie ist
		   die Uebersetzung derselben Idee in eine Spalte, nicht ein zweites
		   Trennmittel. */
		border-top: 1px solid var(--kolumne);
	}

	.bpvi-fristen td,
	.bpvi-fristen th {
		border-left: 0;
		padding: 4px 0;
	}

	.bpvi-fristen td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--mono);
		font-size: 13px;
		line-height: 18px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--sekundaer);
	}

	.bpvi-fristen__datum {
		width: auto;
		font-weight: 700;
	}
}

/* ============================================================
   12 — BEWEGUNG, DRUCK, ZWANGSFARBEN
   ============================================================ */

/*
 * Die Seite fuehrt von sich aus keine Animation, keinen Uebergang und keinen
 * Parallaxeffekt. Diese Regel ist trotzdem kein Leerlauf: sie faengt ab, was
 * Inhalte aus dem Editor, eingebettete Medien oder ein spaeter ergaenztes
 * Plugin mitbringen. Ein Nachschlagewerk, das sich bewegt, waehrend jemand
 * eine Fundstelle abschreibt, ist ein Fehler.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	/*
	 * Der Ausdruck ist einspaltig. Er ist die Fassung, die in eine Akte geht:
	 * ohne Bedienelemente, ohne Werbung, mit ausgeschriebenen Adressen.
	 */
	.bpvi-kopf,
	.bpvi-az,
	.bpvi-suche,
	.bpvi-thema,
	.bpvi-daumen,
	.bpvi-linie,
	.bpvi-sprungmarke,
	.bpvi-treffer,
	.nav-links,
	.pagination {
		display: none !important;
	}

	/* Die Anzeige wird im Ausdruck ausgeblendet — sie ist bezahlter Raum auf
	   dem Bildschirm und hat auf einem abgelegten Blatt nichts zu suchen. */
	.bpvi-anzeige {
		display: none !important;
	}

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

	.bpvi-blatt {
		display: block;
		max-width: none;
		padding: 0;
	}

	.bpvi-block {
		display: block;
	}

	.bpvi-block__kennung {
		margin-bottom: 4pt;
	}

	.bpvi-block__satz,
	.bpvi-kurzantwort,
	.bpvi-prosa p {
		max-width: none;
	}

	/* Fundstellen-Adressen ausgeschrieben: auf Papier ist ein Verweis ohne
	   Adresse eine Sackgasse. Interne Anker bleiben ausgespart, sonst stuende
	   hinter jedem Registersprung eine Raute. */
	a[href^='http']::after {
		content: ' (' attr(href) ')';
		font-family: monospace;
		font-size: 9pt;
		word-break: break-all;
	}

	.bpvi-fristen th,
	.bpvi-fristen td {
		border-left: 1px solid #000000;
	}

	.bpvi-fuss {
		border-top: 1px solid #000000;
	}
}

/*
 * ZWANGSFARBEN (Windows-Kontrastmodus).
 * Dort ersetzt das System alle Farben. Was dann verschwindet, sind genau die
 * Dinge, die als Flaeche gebaut sind — also der Rahmen der Anzeige und die
 * gefuellte Auswahlflaeche. Beide werden hier auf Systemfarben umgestellt,
 * damit die Werbekennzeichnung auch in diesem Modus ein Rechteck bleibt.
 */
@media (forced-colors: active) {
	.bpvi-anzeige {
		border-color: CanvasText;
	}

	.bpvi-treffer__zeile--gewaehlt .bpvi-treffer__ziel,
	.bpvi-az__ziel--aktiv {
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

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


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

/* B2. Die drei Kolumnenlinien sind absolut positioniert, wurden aber von
   .bpvi-blatt > * {grid-column:2} mit in die Textspalte gezogen und lagen
   dadurch 129 px zu weit rechts — sie schnitten quer durch die Ueberschrift,
   den Fliesstext und die Anzeige. */
.bpvi-linie { grid-column: auto; }

/* B3. 28 absolut positionierte Vorlese-Spans entkamen ihrem Scroller und
   erzeugten 1308 px Dokumentueberlauf bei 390 und 768 px. */
.bpvi-az__liste { position: relative; }


/* ============================================================
   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;
}