/*
Theme Name: baupvo.info
Theme URI: https://baupvo.info/
Author: Zurynski, Oezdogan & Co GmbH
Author URI: https://baupvo.info/
Description: Klassisches Theme für baupvo.info — Rollen und Pflichten im Handel, Import und auf Online-Marktplätzen. Querformat-Matrix Rolle mal Pflicht auf Kraftpapier, Schreibmaschinensatz, Stempel als einziges Bildmittel. Kein Block-Theme, kein Build-Schritt, keine externen Ressourcen, Schriften selbst gehostet.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
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: baupvo-info
Tags: classic-theme, accessibility-ready, translation-ready, custom-menu, threaded-comments
*/

/* ============================================================
   1. SCHRIFTEN — selbst gehostet, kein externer Aufruf
   ------------------------------------------------------------
   Es wird keine Schrift von einem fremden Dienst geladen. Ein
   Aufruf an ein Schrift-CDN überträgt die IP-Adresse des Lesers
   an einen Dritten; für deutsche Angebote ist das
   datenschutzrechtlich beanstandet worden und hier schlicht
   unnötig — fünf WOFF2-Dateien liegen im Theme.

   Die Familiennamen tragen den Zusatz „BauPVO Subset". Ein
   Subset ist nach der SIL Open Font License 1.1 eine Modified
   Version; sie darf einen Reserved Font Name nicht weiterführen.
   Der Fallback-Stack nennt danach die ungekürzten Originalnamen
   (falls jemand sie im System hat) und endet bei Schriften, die
   jedes Betriebssystem mitbringt.

   WELCHE DATEIEN NOCH FEHLEN, STEHT IN README.md.
   Solange sie fehlen, greift der Fallback-Stack: Die Seite ist
   vollständig lesbar, sie sieht nur nicht nach Schreibmaschine
   aus.
   ============================================================ */

@font-face {
	font-family: "Courier Prime BauPVO Subset";
	src: url("assets/fonts/courier-prime-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+00A0, U+00B0, U+00B5, U+00B7, U+202F, U+2011, U+2013, U+2014, U+2018-201E, U+2026, U+00A7, U+00D7;
}

@font-face {
	font-family: "Courier Prime BauPVO Subset";
	src: url("assets/fonts/courier-prime-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+00A0, U+00B0, U+00B5, U+00B7, U+202F, U+2011, U+2013, U+2014, U+2018-201E, U+2026, U+00A7, U+00D7;
}

@font-face {
	font-family: "Courier Prime BauPVO Subset";
	src: url("assets/fonts/courier-prime-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+00A0, U+00B0, U+00B5, U+00B7, U+202F, U+2011, U+2013, U+2014, U+2018-201E, U+2026, U+00A7, U+00D7;
}

@font-face {
	font-family: "Courier Prime BauPVO Subset";
	src: url("assets/fonts/courier-prime-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+00A0, U+00B0, U+00B5, U+00B7, U+202F, U+2011, U+2013, U+2014, U+2018-201E, U+2026, U+00A7, U+00D7;
}

@font-face {
	font-family: "Archivo Narrow BauPVO Subset";
	src: url("assets/fonts/archivo-narrow-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+00A0, U+00B0, U+00B5, U+00B7, U+202F, U+2011, U+2013, U+00A7;
}

/* ============================================================
   2. TOKEN
   ------------------------------------------------------------
   Vier Werte sind netzweit vergeben und dürfen nicht abweichen:
   Grund #FAF4E9, Lesetext #070403, Sekundär #422726,
   Akzent #631513. Alles Weitere ist daraus abgeleitet und mit
   dem Kontrastverhältnis kommentiert, das es einlösen muss.

   KEIN DUNKLER MODUS. Das ist eine Festlegung, keine
   Auslassung: Der Grundton ist Kraftpapier, und ein
   Kraftpapierbogen wird nicht dunkel. color-scheme: light sorgt
   dafür, dass auch Formularfelder und Bildlaufleisten hell
   bleiben — sonst stünde der Fokusring auf einer Fläche, für
   die er nicht nachgerechnet ist.
   ============================================================ */

:root {
	color-scheme: light;

	/* Vergebene Token. */
	--bp-grund: #FAF4E9;
	--bp-text: #070403;
	--bp-sekundaer: #422726;
	--bp-akzent: #631513;

	/*
	 * Abgeleitet. Die Zahl in Klammern ist das Kontrastverhältnis
	 * gegen die Fläche, auf der der Wert vorkommt.
	 */
	--bp-auf-fuellung: #F0E3D2;      /* auf #070403: 16,2:1 */
	--bp-auf-akzent: #FFFFFF;        /* auf #631513: 12,7:1 */
	--bp-linie: #5C3B35;             /* auf Grund: 4,1:1 — trägt Zellzugehörigkeit */
	--bp-rahmen: #422726;            /* auf Grund: 5,6:1 — Bedienelemente */
	--bp-perfo: #D4BC9E;             /* auf Grund: rund 1,2:1 — ausdrücklich dekorativ */

	/* Nur in Anzeigen. */
	--bp-anzeige-flaeche: #F3EBDA;   /* gegen Grund 1,2:1 — KEIN Trennsignal */
	--bp-anzeige-rahmen: #4A2F2A;    /* auf Fläche 4,2:1, auf Grund 5,1:1 — trägt */
	--bp-anzeige-text: #422726;      /* auf Fläche 4,6:1 */

	/* Fokus: zweifarbiger Doppelring, kommt sonst nirgends vor. */
	--bp-fokus-innen: #FFFFFF;
	--bp-fokus-aussen: #631513;

	/* Schriften. */
	--bp-schrift: "Courier Prime BauPVO Subset", "Courier Prime", "Nimbus Mono PS", "Courier New", ui-monospace, monospace;
	--bp-etikett: "Archivo Narrow BauPVO Subset", "Archivo Narrow", "Liberation Sans Narrow", "Arial Narrow", sans-serif;

	/* Maße. Basiseinheit 4px, Abschnittsrhythmus 48px, Blockabstand 24px. */
	--bp-max: 1440px;
	--bp-rand: 20px;
	--bp-rinne: 20px;
	--bp-abschnitt: 48px;
	--bp-block: 24px;
	--bp-lese: 38rem;
	--bp-perfo-breite: 16px;
	--bp-kopf-hoehe: 64px;
	--bp-ziel: 44px;
}

@media (min-width: 1180px) {
	:root {
		--bp-rand: 32px;
	}
}

/* ============================================================
   3. GRUNDLAGEN
   ============================================================ */

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

html {
	/*
	 * Sprungziele dürfen nicht unter der klebenden Kopfleiste
	 * landen. 80px = 64px Kopfleiste plus Luft.
	 */
	scroll-padding-top: 80px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	/* Der Rand hält den Platz für die beiden Perforationsstreifen frei. */
	padding-inline: var(--bp-perfo-breite);
	background: var(--bp-grund);
	color: var(--bp-text);
	font-family: var(--bp-schrift);
	font-size: 16px;
	line-height: 26px;
	/*
	 * Deutscher Fachsatz: Silbentrennung an, aber nicht zu gierig.
	 * 6 3 3 heißt: mindestens sechs Zeichen im Wort, mindestens drei
	 * vor und drei nach der Trennstelle.
	 */
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
	overflow-wrap: break-word;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 1180px) {
	body {
		/* Der Desktop-Satz ist nie kleiner als der mobile. */
		font-size: 17px;
		line-height: 28px;
	}
}

[id] {
	scroll-margin-top: 80px;
}

img,
svg {
	max-width: 100%;
}

/* Die Seite scrollt nie waagerecht als Ganzes — nur ihre Bereiche tun das. */
html,
body {
	overflow-x: clip;
}

/* ============================================================
   4. TYPOGRAFIE
   ------------------------------------------------------------
   Überschriften sind gesetzte Schreibmaschinenzeilen, keine
   Grotesk. H1 und H2 laufen versal auf einer 2-px-Regel, wie der
   Kopf eines Vordrucks. Die Etikettenschrift kommt AUSSCHLIESSLICH
   in Spaltenköpfen, Rollenlabels, Stempeltexten und dem
   Anzeigenlabel vor — nie im Fließtext, nie in Überschriften.
   ============================================================ */

h1,
h2,
h3,
h4 {
	font-family: var(--bp-schrift);
	font-weight: 700;
	margin: 0 0 var(--bp-block);
	text-wrap: balance;
}

h1,
.bp-seitenkopf__titel {
	font-size: 30px;
	line-height: 36px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--bp-text);
}

h2,
.bp-matrix__titel,
.bp-blatt__titel {
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bp-text);
}

h3 {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0.02em;
}

h4 {
	font-size: 17px;
	line-height: 26px;
}

p {
	margin: 0 0 var(--bp-block);
}

a {
	color: inherit;
	/*
	 * Verweise werden durch die Unterstreichung erkennbar, nicht durch
	 * Farbe. In Graustufen und im Ausdruck bleibt damit sichtbar, was
	 * anklickbar ist.
	 */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--bp-akzent);
	text-decoration-thickness: 2px;
}

b,
strong {
	font-weight: 700;
}

hr {
	border: 0;
	border-top: 2px solid var(--bp-text);
	margin: var(--bp-abschnitt) 0;
}

ul,
ol {
	margin: 0 0 var(--bp-block);
	padding-left: 1.6em;
}

li {
	margin-bottom: 8px;
}

/* Etikett: die einzige Stelle für die zweite Schrift. */
.bp-etikett {
	display: inline-block;
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-sekundaer);
}

/*
 * Kennungen: DoP-, CELEX-, EORI-, Chargen- und Zolltarifnummern. Eine
 * Schreibmaschine kennt keinen Schriftwechsel — ausgezeichnet wird durch
 * Fettung. Getrennt wird NICHT: Eine mit Trennstrich zerlegte
 * CELEX-Nummer wäre eine falsche Kennung.
 */
.bp-kennung {
	font-weight: 700;
	hyphens: none;
	-webkit-hyphens: none;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Fundstellen brechen nie um: „Art. 13 Abs. 3" über zwei Zeilen liest
   sich beim Überfliegen als zwei getrennte Angaben. */
.bp-fundstelle {
	white-space: nowrap;
	hyphens: none;
	-webkit-hyphens: none;
}

.bp-quelle,
.bp-bildunterschrift {
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
	margin: 0 0 var(--bp-block);
}

.bp-lesart {
	display: block;
	border-left: 0;
	font-size: 15px;
	line-height: 24px;
}

.bp-lesart__label {
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-akzent);
}

/* Lesespalte: rund 60 Zeichen je Zeile, in JEDEM Umbruchband. */
.bp-lesespalte,
.bp-fliesstext > * {
	max-width: var(--bp-lese);
}

.bp-fliesstext > .bp-tabelle__sicht,
.bp-fliesstext > figure,
.bp-fliesstext > table {
	max-width: none;
}

.bp-zahl {
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   5. BARRIEREFREIHEIT
   ============================================================ */

.bp-nur-vorlesen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Sprungmarken: sichtbar, sobald sie den Fokus haben. */
.bp-sprung {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	min-height: var(--bp-ziel);
	padding: 12px 16px;
	background: var(--bp-grund);
	border: 2px solid var(--bp-text);
	text-decoration: none;
	font-family: var(--bp-etikett);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bp-sprung:focus {
	left: var(--bp-perfo-breite);
	top: 8px;
}

/*
 * FOKUS — eigener, zweifarbiger Token, der in keinem anderen
 * Zusammenhang vorkommt.
 *
 * Warum zwei Farben und nicht eine: Die Zustandsflächen dieser Seite
 * reichen vom Kraftgrund #FAF4E9 bis zur bandschwarzen Füllung #070403.
 * Ein einzelner Ringwert müsste gegen beide zugleich 3:1 erreichen —
 * das Luminanzfenster dafür ist praktisch null. Der Doppelring löst das:
 * Gegen den Kraftgrund trägt der äußere Ring (5,2:1), gegen die
 * bandschwarze Füllung der innere (20,4:1), und die beiden Ringteile
 * stehen mit 12,7:1 zueinander — sie sind also immer als Ring erkennbar.
 *
 * Die durchsichtige erste Schicht erzeugt den 2-px-Versatz zum Element:
 * Dort scheint der Grund durch, auf dem das Element steht.
 *
 * Strukturelle Absicherung: Stempelrot ist nie Füllung hinter einem
 * fokussierbaren Element, und keine Zustandsfläche nimmt einen der
 * Fokuswerte an.
 */
:is(a, button, input, select, textarea, summary, [tabindex]):focus {
	outline: none;
}

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid transparent; /* nur für den Kontrastmodus, s. u. */
	outline-offset: 2px;
	border-radius: 0;
	box-shadow:
		0 0 0 2px transparent,
		0 0 0 4px var(--bp-fokus-innen),
		0 0 0 6px var(--bp-fokus-aussen);
}

@media (forced-colors: active) {
	:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: 3px;
		box-shadow: none;
	}
}

/*
 * Bewegung: Die Seite animiert nichts. Die einzige Transformation ist
 * die Stempeldrehung, und die entfällt hier — ein gedrehter Text kann
 * bei vestibulären Beschwerden stören und trägt keine Information.
 */
@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;
	}

	.bp-stempel {
		transform: none !important;
	}
}

/* ============================================================
   6. BOGEN, PERFORATION, KOPFLEISTE
   ============================================================ */

.bp-perforation {
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--bp-perfo-breite);
	height: 100%;
	color: var(--bp-perfo);
	pointer-events: none;
	z-index: 1;
}

.bp-perforation--links {
	left: 0;
}

.bp-perforation--rechts {
	right: 0;
}

.bp-kopf {
	position: sticky;
	top: 0;
	z-index: 6;
	min-height: var(--bp-kopf-hoehe);
	background: var(--bp-grund);
	border-bottom: 2px solid var(--bp-text);
}

.bp-kopf__innen,
.bp-inhalt,
.bp-fuss__innen {
	max-width: var(--bp-max);
	margin-inline: auto;
	padding-inline: var(--bp-rand);
}

.bp-kopf__innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px var(--bp-rinne);
	padding-block: 10px;
	min-height: var(--bp-kopf-hoehe);
}

.bp-wortmarke {
	text-decoration: none;
	display: block;
	margin-right: auto;
}

.bp-wortmarke__name {
	display: block;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bp-wortmarke__zusatz {
	display: block;
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
}

.bp-nav__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.bp-nav__eintrag {
	margin: 0;
}

.bp-nav__link,
.bp-nav__liste a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bp-ziel);
	padding: 0 8px;
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.bp-nav__liste a:hover {
	border-bottom-color: var(--bp-akzent);
}

/* Die aktuelle Seite trägt aria-current — hier wird derselbe Zustand
   sichtbar gemacht, über eine Linie und nicht über Farbe allein. */
.bp-nav__liste a[aria-current] {
	border-bottom-color: var(--bp-text);
	font-weight: 600;
}

.bp-kopf__werkzeug {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px var(--bp-rinne);
}

.bp-kopf__stand {
	margin: 0;
}

.bp-bogen {
	position: relative;
	z-index: 2;
}

.bp-inhalt {
	padding-block: var(--bp-abschnitt) calc(var(--bp-abschnitt) * 1.5);
}

/* ============================================================
   7. BEDIENELEMENTE
   ------------------------------------------------------------
   Zielgrößen mindestens 44 × 44 px mit 12 px Abstand.
   Eingabefelder sind FORMULARLINIEN — 2-px-Grundlinie, keine
   Kästen, keine Füllfläche. Gefüllte Flächen sind dem aktiven
   Zustand vorbehalten, umlaufende Rahmen der Anzeige.
   ============================================================ */

.bp-feld,
.bp-knopf {
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	min-height: var(--bp-ziel);
	color: var(--bp-text);
	background: transparent;
	border-radius: 0;
}

.bp-feld {
	padding: 8px 4px;
	border: 2px solid var(--bp-rahmen);
	max-width: 100%;
}

/* Formularlinie: nur die Grundlinie, kein Kasten. */
.bp-feld--linie {
	border: 0;
	border-bottom: 2px solid var(--bp-rahmen);
	padding-inline: 0;
	width: 100%;
}

.bp-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border: 2px solid var(--bp-rahmen);
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.bp-knopf:hover {
	border-color: var(--bp-akzent);
	color: var(--bp-akzent);
}

.bp-rollenwahl,
.bp-suche {
	margin: 0;
}

.bp-rollenwahl__zeile,
.bp-suche__zeile,
.bp-uhr__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.bp-rollenwahl__hilfe {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
	max-width: var(--bp-lese);
}

.bp-suche__zeile .bp-feld--linie {
	width: auto;
	min-width: 14rem;
	flex: 1 1 14rem;
}

/* ============================================================
   8. SCROLLENDE BEREICHE
   ------------------------------------------------------------
   Die Pflichtenmatrix ist breiter als der Satzspiegel und liegt
   in einem eigenen Bereich mit overflow-x, tabindex und
   aria-label. Die Kante zeigt an, dass es weitergeht — als
   LINIE, denn Linien sind das Trennmittel dieser Seite. Ein
   Verlauf wäre eine zweite Fläche mit eigener
   Bedeutungsvermutung.
   ============================================================ */

.bp-matrix__sicht,
.bp-tabelle__sicht,
.bp-kette__sicht,
.bp-pfade__sicht,
.bp-strahl__sicht {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-padding-inline: 8px;
	-webkit-overflow-scrolling: touch;
}

.bp-sicht--links {
	box-shadow: inset 2px 0 0 0 var(--bp-linie);
}

.bp-sicht--rechts {
	box-shadow: inset -2px 0 0 0 var(--bp-linie);
}

.bp-sicht--links.bp-sicht--rechts {
	box-shadow:
		inset 2px 0 0 0 var(--bp-linie),
		inset -2px 0 0 0 var(--bp-linie);
}

/* ============================================================
   9. PFLICHTENMATRIX
   ------------------------------------------------------------
   Getrennt wird ausschließlich durch Linien: 1 px zwischen den
   Rollenspalten, 2 px unter dem Matrixkopf. Keine Zebrazeile,
   keine Karten, kein Radius, kein Schatten. Gefüllt wird nur
   der Matrixkopf und die aktive Rollenspalte.
   ============================================================ */

.bp-matrix,
.bp-dokumente,
.bp-kontrolle,
.bp-sonder,
.bp-blaetter {
	margin-block: var(--bp-abschnitt);
}

.bp-matrix__hinweis {
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
	max-width: var(--bp-lese);
}

.bp-matrix__formular {
	margin: 0;
}

.bp-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	text-align: left;
}

.bp-tabelle caption {
	text-align: left;
}

/* Matrixkopf: bandschwarz gefüllt, wie der Kopf eines Vordrucks. */
.bp-tabelle thead th {
	background: var(--bp-text);
	color: var(--bp-auf-fuellung);
	border-bottom: 2px solid var(--bp-text);
	vertical-align: bottom;
	padding: 11px 12px;
}

.bp-tabelle th,
.bp-tabelle td {
	padding: 11px 12px;
	vertical-align: top;
	border-left: 1px solid var(--bp-linie);
}

.bp-tabelle th:first-child,
.bp-tabelle td:first-child {
	border-left: 0;
}

/*
 * min-height statt height: „Anleitung und Sicherheitsinformation in
 * deutscher Sprache" braucht einzeilig rund 470 px. Zweizeilige Labels
 * sind ausdrücklich zugelassen; das Raster darf davon nicht zerfallen.
 * In einer Tabelle wirkt height wie eine Mindesthöhe — genau das ist
 * hier gewollt.
 */
.bp-tabelle tbody tr {
	height: var(--bp-ziel);
	border-bottom: 1px solid var(--bp-linie);
}

/* Klebende erste Spalte: der Pflichtname bleibt beim Schieben stehen. */
.bp-tabelle__ecke,
.bp-tabelle__pflicht {
	position: sticky;
	left: 0;
	z-index: 2;
	min-width: 300px;
	background: var(--bp-grund);
}

.bp-tabelle__ecke {
	background: var(--bp-text);
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bp-tabelle__pflicht {
	font-weight: 700;
	/* Die klebende Spalte braucht eine eigene rechte Kante, sonst
	   schiebt sich der Zellinhalt sichtbar darunter durch. */
	box-shadow: 1px 0 0 0 var(--bp-linie);
}

.bp-tabelle__pflichtlink {
	display: block;
	min-height: var(--bp-ziel);
	padding-block: 4px;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bp-tabelle__pflichtlink:hover {
	border-bottom-width: 2px;
}

/* Spaltenkopf = Rollenschalter. */
.bp-spaltenkopf {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	min-width: 88px;
	min-height: var(--bp-ziel);
	padding: 4px;
	background: transparent;
	color: inherit;
	border: 0;
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.bp-spaltenkopf__gewaehlt {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bp-spaltenkopf__marke .bp-status__zeichen {
	display: block;
}

/* Aktive Rollenspalte: die einzige gefüllte Fläche der Seite neben
   dem Matrixkopf. */
.bp-zelle--aktiv {
	background: var(--bp-text);
	color: var(--bp-auf-fuellung);
}

.bp-zelle {
	min-width: 148px;
}

.bp-zelle__link {
	display: block;
	min-height: var(--bp-ziel);
	min-width: var(--bp-ziel);
	padding-block: 2px;
	text-decoration: none;
	color: inherit;
}

.bp-zelle__link:hover .bp-status__wort {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.bp-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 22px;
}

.bp-status__zeichen {
	flex: 0 0 auto;
}

.bp-status__wort {
	font-weight: 700;
}

.bp-zelle__quelle {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	line-height: 21px;
}

.bp-zelle:not(.bp-zelle--aktiv) .bp-zelle__quelle {
	color: var(--bp-sekundaer);
}

.bp-fussnote__anker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bp-matrix__rollensatz {
	max-width: var(--bp-lese);
	margin-top: var(--bp-block);
	font-size: 15px;
	line-height: 24px;
}

.bp-matrix__rollensatz .bp-etikett {
	display: block;
}

/* Vergleichszelle: nur unter 900 px. */
.bp-tabelle__vergleich {
	display: none;
}

.bp-vergleich__auf {
	min-height: var(--bp-ziel);
	display: flex;
	align-items: center;
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.bp-vergleich__liste {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 22px;
}

.bp-vergleich__liste dt {
	font-weight: 700;
	margin-top: 8px;
}

.bp-vergleich__liste dd {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/*
 * UNTER 900 px: Die nicht gewählten Rollenspalten treten ab, die
 * Vergleichszelle tritt an. Die Tabelle bleibt dabei eine Tabelle —
 * ein per CSS zu Blöcken umgebautes table-Element verliert für
 * Screenreader seine Zeilen- und Spaltenbezüge.
 */
@media (max-width: 899px) {
	body:not(.bp-rolle-keine) .bp-tabelle__vergleich {
		display: table-cell;
	}

	.bp-rolle-haendler [data-bp-spalte]:not([data-bp-spalte="haendler"]),
	.bp-rolle-importeur [data-bp-spalte]:not([data-bp-spalte="importeur"]),
	.bp-rolle-fulfilment [data-bp-spalte]:not([data-bp-spalte="fulfilment"]),
	.bp-rolle-marktplatz [data-bp-spalte]:not([data-bp-spalte="marktplatz"]),
	.bp-rolle-bevollmaechtigter [data-bp-spalte]:not([data-bp-spalte="bevollmaechtigter"]),
	.bp-rolle-mehrfach [data-bp-spalte]:not([data-bp-spalte="mehrfach"]) {
		display: none;
	}

	.bp-tabelle__ecke,
	.bp-tabelle__pflicht {
		min-width: 180px;
	}

	/* Klebend hilft hier nicht mehr — es sind nur noch zwei Spalten. */
	.bp-tabelle__ecke,
	.bp-tabelle__pflicht {
		position: static;
		box-shadow: none;
	}
}

/* Fußnotenapparat. */
.bp-fussnoten {
	margin-top: var(--bp-abschnitt);
	border-top: 2px solid var(--bp-text);
	padding-top: var(--bp-block);
}

.bp-fussnoten__titel {
	font-size: 18px;
	line-height: 26px;
}

.bp-fussnoten__liste {
	list-style: decimal;
	max-width: var(--bp-lese);
}

.bp-fussnoten__text,
.bp-fussnoten__rueck {
	font-size: 14px;
	line-height: 21px;
	margin: 0 0 4px;
}

.bp-fussnoten__pfeil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ============================================================
   10. LIEFERKETTENBAND, ZEICHNUNGEN, STEMPEL
   ============================================================ */

.bp-kette {
	margin-block: var(--bp-block);
	border-top: 2px solid var(--bp-text);
	border-bottom: 2px solid var(--bp-text);
	padding-block: 12px;
}

.bp-kette__zeichnung,
.bp-pfade__zeichnung,
.bp-strahl__zeichnung {
	display: block;
	width: 100%;
	min-width: 720px;
	height: auto;
	color: var(--bp-text);
}

.bp-schema__zeichnung {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	color: var(--bp-text);
}

.bp-kette__label,
.bp-pfade__label,
.bp-pfade__knoten,
.bp-pfade__ziel,
.bp-strahl__label,
.bp-schema__marke,
.bp-kette__hier {
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: currentColor;
}

.bp-kette__label--aktiv,
.bp-kette__hier {
	font-weight: 700;
}

/* Übergabepunkt der Kette: gefüllt mit dem Grundton, damit der Kettenstrich
   nicht sichtbar durch die Marke hindurchläuft. */
.bp-kette__punkt {
	fill: var(--bp-grund);
}

.bp-kette__hinweis {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
}

.bp-pfade,
.bp-strahl,
.bp-schema {
	margin-block: var(--bp-block);
}

.bp-schema {
	display: grid;
	gap: var(--bp-rinne);
	grid-template-columns: minmax(0, 420px);
}

@media (min-width: 900px) {
	.bp-schema {
		grid-template-columns: minmax(0, 420px) minmax(0, var(--bp-lese));
		align-items: start;
	}
}

.bp-schema__liste {
	font-size: 15px;
	line-height: 22px;
}

/*
 * STEMPEL — das exklusive Bildmittel dieser Seite.
 * Doppelte Kontur, versale Etikettenschrift, 2 bis 3 Grad Drehung,
 * echter Text. Er quittiert genau drei Dinge: Standdatum,
 * Rollenwechsel und abgeschlossene Eingangskontrolle. Niemals gefüllt
 * (außer im Druck), niemals in einer Anzeige, niemals ohne Aussage.
 */
.bp-stempel {
	display: inline-block;
	padding: 6px 12px;
	color: var(--bp-akzent);
	border: 2px solid currentColor;
	outline: 2px solid currentColor;
	outline-offset: 3px;
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: transparent;
}

.bp-stempel--stand {
	transform: rotate(-2deg);
}

.bp-stempel--wechsel,
.bp-stempel--kontrolle {
	transform: rotate(-3deg);
}

/* ============================================================
   11. ROLLENWECHSEL
   ------------------------------------------------------------
   Kein linker Balken, kein Rahmen: Der Rahmen gehört
   ausschließlich der Anzeige, der linke Balken ist anderweitig
   vergeben. Bleibt ein 2-px-Regelpaar plus Stempel.
   ============================================================ */

.bp-wechsel {
	margin-block: var(--bp-abschnitt);
}

.bp-wechsel__regel {
	border-top: 2px solid var(--bp-akzent);
	margin: 0;
}

.bp-wechsel__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bp-rinne);
	padding-top: var(--bp-block);
}

.bp-wechsel__titel {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	flex: 1 1 20rem;
}

.bp-wechsel__folge,
.bp-wechsel__verweis {
	max-width: var(--bp-lese);
}

.bp-wechsel__liste {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--bp-block);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.bp-wechsel__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bp-block) var(--bp-rinne);
	}
}

.bp-wechsel__eintrag {
	border-top: 1px solid var(--bp-linie);
	padding-top: 12px;
	max-width: var(--bp-lese);
}

.bp-wechsel__eintragtitel {
	font-size: 17px;
	line-height: 26px;
	margin-bottom: 8px;
}

.bp-wechsel__verweis {
	margin-bottom: var(--bp-block);
}

/* ============================================================
   12. UNTERLAGEN, AUFBEWAHRUNGSUHR
   ============================================================ */

.bp-uhr {
	max-width: var(--bp-lese);
	margin-bottom: var(--bp-block);
}

.bp-uhr__hinweis {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
}

.bp-uhr__wert {
	font-weight: 700;
}

/* Abgelaufene Fristen tragen das Wortpräfix „abgelaufen:" — die Linie
   darunter ist ein Zusatz, nicht der Träger der Aussage. */
.bp-uhr__wert--abgelaufen {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.bp-tabelle--schmal th,
.bp-tabelle--schmal td {
	font-size: 15px;
	line-height: 22px;
}

.bp-tabelle--schmal td .bp-status__zeichen,
.bp-tabelle--protokoll td .bp-status__zeichen {
	vertical-align: -4px;
}

/* ============================================================
   13. EINGANGSKONTROLLE
   ============================================================ */

.bp-kontrolle__hinweis,
.bp-kontrolle__leer {
	max-width: var(--bp-lese);
}

.bp-protokoll__kopf {
	display: grid;
	gap: var(--bp-block) var(--bp-rinne);
	grid-template-columns: 1fr;
	margin-block: var(--bp-block);
}

@media (min-width: 700px) {
	.bp-protokoll__kopf {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bp-protokoll__rolle {
	margin-bottom: var(--bp-block);
}

.bp-protokoll__rolle .bp-etikett {
	display: block;
}

.bp-tabelle--protokoll .bp-feld--linie {
	min-width: 10rem;
}

.bp-protokoll__abschluss {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bp-abschnitt);
	margin-block: var(--bp-abschnitt);
}

.bp-protokoll__unterschrift {
	flex: 1 1 18rem;
	max-width: 24rem;
}

.bp-protokoll__linie {
	display: block;
	margin-top: 32px;
	border-bottom: 2px solid var(--bp-rahmen);
}

.bp-protokoll__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: var(--bp-block);
}

.bp-protokoll__fuss,
.bp-blatt__fuss {
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
	border-top: 1px solid var(--bp-linie);
	padding-top: 8px;
	max-width: var(--bp-lese);
}

/* ============================================================
   14. PFLICHTBLATT, RUBRIKEN, LISTEN
   ============================================================ */

.bp-blatt {
	margin-block: var(--bp-abschnitt);
	border-top: 2px solid var(--bp-text);
	padding-top: var(--bp-block);
}

.bp-blatt__stand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	max-width: var(--bp-lese);
}

.bp-blatt__abschnitt {
	margin-bottom: var(--bp-block);
}

/*
 * Die sechs Abschnittsüberschriften des Pflichtblatts laufen in der
 * Etikettenschrift und nicht in der Schreibmaschine. Grund: Sie sind auf
 * jedem Blatt dieselben sechs Wörter — sie sollen als Spaltenköpfe eines
 * Vordrucks gelesen werden, nicht als Überschriften mit eigenem Gewicht.
 */
.bp-blatt__ueberschrift {
	margin-bottom: 4px;
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-sekundaer);
}

.bp-sonder__gruppe {
	margin-block: var(--bp-abschnitt);
	border-top: 2px solid var(--bp-text);
	padding-top: var(--bp-block);
}

.bp-sonder__rolle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
}

.bp-sonder__liste {
	margin: 0;
	max-width: var(--bp-lese);
}

.bp-sonder__punkt {
	font-weight: 700;
	border-top: 1px solid var(--bp-linie);
	padding-top: 12px;
	margin-top: 12px;
}

.bp-sonder__text {
	margin: 8px 0 0;
}

.bp-liste {
	margin-block: var(--bp-abschnitt);
}

.bp-eintrag {
	border-top: 2px solid var(--bp-text);
	padding-top: var(--bp-block);
	margin-bottom: var(--bp-abschnitt);
	max-width: var(--bp-lese);
}

.bp-eintrag__titel {
	border-bottom: 0;
	padding-bottom: 0;
	font-size: 20px;
	line-height: 28px;
	text-transform: none;
	letter-spacing: 0;
}

.bp-eintrag__meta {
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
}

.bp-blaetterung,
.bp-blattnav {
	margin-block: var(--bp-abschnitt);
	border-top: 2px solid var(--bp-text);
	padding-top: var(--bp-block);
}

.bp-blaetterung .page-numbers,
.bp-blattnav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bp-ziel);
	padding: 0 12px;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.bp-blaetterung .page-numbers:hover,
.bp-blattnav a:hover {
	border-bottom-color: var(--bp-akzent);
}

.bp-blaetterung .page-numbers.current {
	border-bottom-color: var(--bp-text);
	font-weight: 700;
}

.bp-seitenkopf {
	margin-bottom: var(--bp-abschnitt);
}

.bp-seitenkopf__lead {
	margin-top: var(--bp-block);
}

.bp-seitenkopf__meta {
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
}

.bp-fehler {
	max-width: var(--bp-lese);
}

.bp-fehler__weg {
	margin-top: var(--bp-block);
}

/* Eingebetteter Redaktionsinhalt. */
.bp-fliesstext table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.bp-fliesstext th,
.bp-fliesstext td {
	border-bottom: 1px solid var(--bp-linie);
	padding: 11px 12px;
	text-align: left;
	font-size: 15px;
	line-height: 22px;
}

/*
 * Eingebettete Tabellen im Redaktionsinhalt tragen denselben Blockabstand wie
 * figure. Ohne ihn steht die 2-px-Regel der naechsten Zwischenueberschrift
 * unmittelbar auf der letzten Tabellenzeile — die Zeile liest sich dann als
 * Teil der Ueberschrift.
 */
.bp-fliesstext > .bp-tabelle__sicht,
.bp-fliesstext > table {
	margin-block: var(--bp-block);
}

.bp-fliesstext blockquote {
	margin: var(--bp-block) 0;
	padding-left: 0;
	border-top: 1px solid var(--bp-linie);
	border-bottom: 1px solid var(--bp-linie);
	padding-block: 12px;
	font-style: italic;
}

.bp-fliesstext figure {
	margin: var(--bp-block) 0;
}

.bp-fliesstext figcaption {
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
	margin-top: 8px;
}

/* Kommentare: funktionsfähig, aber ohne Werbung für sich selbst. */
.bp-kommentare {
	margin-block: var(--bp-abschnitt);
	border-top: 2px solid var(--bp-text);
	padding-top: var(--bp-block);
	max-width: var(--bp-lese);
}

.bp-kommentare__liste {
	list-style: none;
	padding: 0;
}

.bp-kommentare__liste .comment-body {
	border-top: 1px solid var(--bp-linie);
	padding-top: 12px;
	margin-bottom: var(--bp-block);
}

.bp-kommentare input[type="text"],
.bp-kommentare input[type="email"],
.bp-kommentare input[type="url"],
.bp-kommentare textarea {
	font-family: inherit;
	font-size: 16px;
	width: 100%;
	min-height: var(--bp-ziel);
	padding: 8px 0;
	border: 0;
	border-bottom: 2px solid var(--bp-rahmen);
	background: transparent;
	color: var(--bp-text);
	border-radius: 0;
}

.bp-kommentare label {
	display: block;
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-sekundaer);
}

/* ============================================================
   15. ANZEIGENBAND
   ------------------------------------------------------------
   Der einzige umrahmte und gefüllte Baustein der ganzen Seite.
   Tragend sind der 2-px-Rahmen und das Textlabel. Der
   Flächenton ist ausdrücklich KEIN Trennsignal — er liegt bei
   rund 1,2:1 gegen den Grund und trägt in Graustufen und im
   Ausdruck nichts. Er kommt nur hier vor, und nur hier gibt es
   einen Rahmen.

   Kein Radius, kein Schatten, kein linker Balken, keine
   Rotation, kein Stempel, keine Konturform. Nicht klebend,
   nicht überlagernd, nicht mitscrollend.
   ============================================================ */

.bp-anzeige {
	/*
	 * Das Band steht außerhalb von .bp-inhalt und muss den Seitenrand
	 * deshalb selbst mitbringen. width und max-width zusammen ergeben in
	 * jedem Umbruchband dieselbe Rinne wie beim redaktionellen Satz —
	 * ein randlos laufendes Anzeigenband gäbe es sonst genau dort, wo die
	 * Trennung am deutlichsten sein muss.
	 */
	width: calc(100% - 2 * var(--bp-rand));
	max-width: calc(var(--bp-max) - 2 * var(--bp-rand));
	margin: var(--bp-abschnitt) auto;
	padding: 20px;
	min-height: 120px;
	border: 2px solid var(--bp-anzeige-rahmen);
	border-radius: 0;
	background: var(--bp-anzeige-flaeche);
	color: var(--bp-anzeige-text);
	box-shadow: none;
	position: static;
}

.bp-anzeige__label {
	margin: 0;
	font-family: var(--bp-etikett);
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bp-anzeige-text);
	text-align: left;
}

.bp-anzeige__trenner {
	margin: 12px 0;
	border: 0;
	border-top: 1px solid var(--bp-anzeige-rahmen);
}

/* Anzeigentext läuft zentriert, redaktioneller Text linksbündig. */
.bp-anzeige__inhalt {
	text-align: center;
	color: var(--bp-text);
}

.bp-anzeige__zeile {
	margin: 0 0 8px;
}

.bp-anzeige__link {
	color: inherit;
}

.bp-anzeige__schluss {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-anzeige-text);
	text-align: left;
}

.bp-anzeige__werber {
	display: block;
}

/* ============================================================
   16. FUSS
   ============================================================ */

.bp-fuss {
	border-top: 2px solid var(--bp-text);
	padding-block: var(--bp-abschnitt);
}

.bp-quellen__liste {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--bp-block);
}

.bp-quellen__eintrag {
	border-top: 1px solid var(--bp-linie);
	padding-top: 12px;
	margin-bottom: 12px;
	max-width: 60rem;
}

.bp-quellen__lang {
	display: block;
	font-size: 15px;
	line-height: 22px;
}

.bp-quellen__celex {
	display: block;
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
}

.bp-quellen__stand,
.bp-quellen__lesart,
.bp-fuss__schriften {
	font-size: 14px;
	line-height: 21px;
	color: var(--bp-sekundaer);
	max-width: 60rem;
}

/* Die Impressumszeile steht ungekürzt im Fuß jeder Seite. Sie wird
   nirgends beschnitten, gefaltet oder in Bestandteile zerlegt. */
.bp-fuss__impressum {
	border-top: 2px solid var(--bp-text);
	padding-top: var(--bp-block);
	font-size: 14px;
	line-height: 21px;
	max-width: 60rem;
	hyphens: none;
	-webkit-hyphens: none;
}

.bp-fuss__liste {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.bp-fuss__liste a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bp-ziel);
	font-size: 14px;
}

/* ============================================================
   17. DRUCK
   ------------------------------------------------------------
   Die Matrix wird ausgedruckt — das ist der Regelfall, nicht
   der Sonderfall. Deshalb: A4 quer, Anzeigen weg, Bedienung
   weg, Stempel ohne Drehung, Verweisziele ausgeschrieben.
   ============================================================ */

@media print {
	@page {
		size: A4 landscape;
		margin: 12mm;
	}

	body {
		background: #FFFFFF;
		color: #000000;
		font-size: 10pt;
		line-height: 15pt;
		padding-inline: 0;
	}

	/* Anzeigen erscheinen im Ausdruck nicht. */
	.bp-anzeige {
		display: none !important;
	}

	/* Bedienung entfällt: Suche, Auswahlfelder, Schaltflächen, Sprungmarken. */
	.bp-suche,
	.bp-rollenwahl,
	.bp-knopf,
	.bp-sprung,
	.bp-protokoll__aktionen,
	.bp-matrix__hinweis,
	.bp-nav {
		display: none !important;
	}

	.bp-kopf {
		position: static;
		border-bottom: 2pt solid #000000;
	}

	/* Nichts klebt, nichts scrollt. */
	.bp-matrix__sicht,
	.bp-tabelle__sicht,
	.bp-kette__sicht,
	.bp-pfade__sicht,
	.bp-strahl__sicht {
		overflow: visible;
		box-shadow: none;
	}

	.bp-tabelle__ecke,
	.bp-tabelle__pflicht {
		position: static;
		box-shadow: none;
	}

	.bp-tabelle {
		page-break-inside: auto;
	}

	.bp-tabelle tr {
		page-break-inside: avoid;
	}

	/* Der Matrixkopf wiederholt sich auf jeder Seite des Ausdrucks. */
	.bp-tabelle thead {
		display: table-header-group;
		background: #000000 !important;
		color: #FFFFFF !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.bp-zelle--aktiv {
		background: #000000 !important;
		color: #FFFFFF !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Der Stempel wird als Kontur gedruckt und nicht gedreht. */
	.bp-stempel {
		transform: none !important;
		color: #000000;
	}

	/* Perforation bleibt sichtbar, aber nicht als fixierte Ebene —
	   sonst druckte sie auf jeder Seite mit voller Höhe durch. */
	.bp-perforation {
		position: absolute;
	}

	/*
	 * Fundstellen als ausgeschriebene Angabe: Ein Verweis, dessen Ziel
	 * im Ausdruck fehlt, ist im Verfahren wertlos. Interne Anker bleiben
	 * außen vor — „#blatt-aufbewahrung" hinter dem Text hilft niemandem.
	 */
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	.bp-fussnoten,
	.bp-quellen,
	.bp-fuss__impressum {
		page-break-inside: avoid;
	}
}


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