/*
Theme Name: baupvo.org — Planblatt
Theme URI: https://baupvo.org
Author: Zurynski, Oezdogan & Co GmbH
Author URI: https://baupvo.org
Description: Klassisches WordPress-Theme fuer baupvo.org. Die Bauproduktenverordnung aus der Sicht der Planung: Leistungsverzeichnis, Produktauswahl, Bemusterung, Bauueberwachung. Satzspiegel eines Planblatts — umlaufender Schriftfeldrahmen, haengende Ordnungszahl-Rinne, Gliederung ausschliesslich ueber Rahmenzellen. Keine Karten, keine Fotografie, kein externer Request: Schriften, Zeichnungen und Skripte liegen im Theme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baupvo-org
Tags: custom-menu, translation-ready, accessibility-ready, threaded-comments
*/

/* ============================================================
   1  SCHRIFTEN — SELBST GEHOSTET
   ------------------------------------------------------------
   Kein Google-Fonts-CDN und kein sonstiger Fremdrequest. Ein
   Aufruf an fonts.gstatic.com uebertraegt die IP der Besucherin
   an einen Dritten, bevor sie irgendetwas zustimmen konnte; das
   ist in Deutschland mehrfach beanstandet worden. Die Dateien
   liegen deshalb unter assets/fonts/ im Theme.

   Die Familiennamen tragen den Zusatz "BauPVO Subset", weil die
   ausgelieferten Dateien Subsets sind. Nach OFL 1.1 §3 darf der
   Reserved Font Name ("IBM Plex") nicht auf einer geaenderten
   Datei stehen — der Name im Font und der Name hier muessen
   deshalb uebereinstimmen und beide den Zusatz tragen. Die
   unveraenderte Lizenzkopie liegt unter assets/fonts/OFL.txt und
   ist im Blattfuss verlinkt.

   Welche Dateien noch beschafft werden muessen, steht in
   README.md im Themeordner.

   Die latin-Unicode-Range deckt die auf dieser Seite tragenden
   Sonderzeichen mit ab: § U+00A7 (Artikel- und Paragrafenbezug),
   × U+00D7 (Masse), ° U+00B0, µ U+00B5, · U+00B7 sowie das
   schmale geschuetzte Leerzeichen U+202F (aus U+2000-206F), das
   vor Einheiten steht.
   ============================================================ */

@font-face {
	font-family: 'Plex Sans BauPVO Subset';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/plex-sans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plex Sans BauPVO Subset';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/plex-sans-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Plex Sans BauPVO Subset';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/plex-sans-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plex Sans BauPVO Subset';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/plex-sans-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Condensed traegt AUSSCHLIESSLICH Beschriftungen: Abschnittslabels,
   Schriftfeldzellen, Tabellenkoepfe, Zeichnungsbeschriftung. Die schmale
   Laufweite ist hier funktional, nicht dekorativ — Gewerkebezeichnungen wie
   "Waermedaemm-Verbundsysteme, Klebe- und Armierungsmoertel" stehen damit
   ungebrochen ueber der Spalte. */
@font-face {
	font-family: 'Plex Sans Cond BauPVO Subset';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/plex-sans-cond-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plex Sans Cond BauPVO Subset';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/plex-sans-cond-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Plex Sans Cond BauPVO Subset';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/plex-sans-cond-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plex Sans Cond BauPVO Subset';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/plex-sans-cond-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Mono steht ausschliesslich fuer normative Kennungen: Normnummern,
   Klassenbezeichnungen, Ordnungszahlen, DoP-Nummern, Artikelverweise.
   Nie fuer Bloecke, nie als Codeblock — die Seite hat keinen Code. */
@font-face {
	font-family: 'Plex Mono BauPVO Subset';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/plex-mono-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plex Mono BauPVO Subset';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   2  TOKEN
   ------------------------------------------------------------
   Die Seite ist ein Zweifarbendruck: Tinte und Petrolgruen, sonst
   nichts. Es gibt keine zweite Signalfarbe. Die Unterscheidung
   Herstellerpflicht / Planungsaufgabe laeuft ueber Form und Wort
   (gefuelltes gegen hohles Quadrat plus ausgeschriebenes Wort),
   nicht ueber Farbe — SC 1.4.1 ist damit konstruktiv erfuellt und
   nicht bloss redaktionell abgefedert.

   Alle Kontrastwerte in den Kommentaren sind gegen die jeweils
   genannte Flaeche nach WCAG-Formel gerechnet.
   ============================================================ */

:root {
	/* Papier. Die EINZIGE Grundflaeche der Seite. Es gibt keine Karten,
	   keine weisse Inhaltsflaeche, keine erhabene Ebene, keinen Schatten. */
	--bpo-grund: #F1F6F2;

	/* Tinte: Fliesstext, Ueberschriften, Tabellenwerte. 7,94:1 auf Papier. */
	--bpo-tinte: #1E3529;

	/* Sekundaertext: Beschriftungen, Quellen, Stand, Bildunterschrift.
	   6,00:1 auf Papier — auch die 13-px-Versalbeschriftungen liegen damit
	   deutlich ueber 4,5:1. */
	--bpo-sekundaer: #3B4542;

	/* Akzent Petrol: Verweise, Ordnungszahl, Zeichnungsstrich, Primaerknopf,
	   aktive Navigationszeile. 6,02:1 auf Papier. */
	--bpo-akzent: #0C4D28;

	/* Text auf Akzentflaeche. 9,96:1 auf Petrol. Bewusst nicht #FFFFFF,
	   sondern derselbe Ton wie das innere Fokusband: die Seite fuehrt genau
	   einen hellen Ton, damit Knopf und Fokusring nicht um Weiss konkurrieren. */
	--bpo-auf-akzent: #F7FBF9;

	/* Rahmenlinie. Das TRAGENDE Trennmittel: Zellkanten, Schriftfeldrahmen,
	   Bedienelementrand. 3,45:1 auf Papier, 3,11:1 auf Anzeigengrund — beide
	   ueber 3:1, weil die Linie hier informationstragend ist (SC 1.4.11). */
	--bpo-rahmen: #5A6A62;

	/* Haarlinie. Rein dekorativ, 1,35:1. Sie trennt nie eine Zelle und nie
	   ein Bedienelement — dafuer ist immer --bpo-rahmen zustaendig. Sie
	   gliedert lediglich Zeilen INNERHALB einer bereits gerahmten Zelle. */
	--bpo-haarlinie: #9FB2A8;

	/* Anzeigengrund. Die einzige warme Flaeche der Seite. 1,11:1 gegen das
	   Papier — dieser Wert traegt messbar NICHTS und wird deshalb auch nicht
	   als Trennsignal behauptet (siehe Abschnitt 12). Er bleibt nur als
	   ausdruecklich nachrangige Andeutung fuer Farbtuechtige. */
	--bpo-anzeige-grund: #EDF2EC;

	/* Anzeigen-Label. 5,02:1 auf Anzeigengrund. */
	--bpo-anzeige-label: #4E4736;

	/* FOKUS — eigener Token, weder Akzent noch Zustandsflaeche.
	   Warum der Ring zweifarbig sein MUSS und kein einzelner Flachton reicht:
	   gegen das Papier (Relativluminanz 0,5840) verlangen 3:1 einen Ton mit
	   L <= 0,1613; gegen die Petrol-Auswahlflaeche (L 0,0554) verlangen 3:1
	   einen Ton mit L >= 0,2662. Das Fenster ist leer. Der Ring wird deshalb
	   so bemessen, dass an jedem Zustand mindestens ein Band >= 3:1 gegen die
	   Flaeche liegt und beide Baender zueinander >= 3:1 liegen — er bleibt
	   also immer als Ring lesbar.
	   Gerechnet: Mantel auf Papier 5,78:1, Kern auf Petrolflaeche 9,45:1,
	   Mantel auf Anzeigengrund 5,22:1, Kern auf Tintenflaeche 12,47:1,
	   Baender zueinander 9,08:1. Kein Zustand unter 3:1. */
	--bpo-fokus-kern: #F7FBF9;
	--bpo-fokus-mantel: #5B2D8A;

	/* Schriftfamilien. Im Fallback steht keine Schrift, die das Theme nicht
	   ausliefert — eine benannte Fremdschrift, die nur zufaellig auf manchen
	   Systemen liegt, ist keine Zusage, die man einhalten kann. */
	--bpo-schrift: 'Plex Sans BauPVO Subset', ui-sans-serif, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--bpo-schrift-eng: 'Plex Sans Cond BauPVO Subset', 'Plex Sans BauPVO Subset', ui-sans-serif, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--bpo-schrift-mono: 'Plex Mono BauPVO Subset', ui-monospace, Consolas, monospace;

	/* Raster. 4-px-Grundraster, Abstandsstufen 8/12/16/24/32/48/64. */
	--bpo-a1: 8px;
	--bpo-a2: 12px;
	--bpo-a3: 16px;
	--bpo-a4: 24px;
	--bpo-a5: 32px;
	--bpo-a6: 48px;
	--bpo-a7: 64px;

	/* Satzspiegel. */
	--bpo-blattbreite: 1280px;
	--bpo-inhaltsbreite: 1040px;
	--bpo-navbreite: 232px;
	--bpo-rinne: 88px;
	--bpo-rinnenabstand: 24px;
	--bpo-prosa: 34rem; /* rund 64 Zeichen bei 17 px. */

	/* Abstand des umlaufenden Schriftfeldrahmens vom Fensterrand. */
	--bpo-blattrand: 24px;

	/* Hoehe der klebenden Kopfleiste. Derselbe Wert steckt in jedem
	   scroll-margin-top, damit kein Sprungziel darunter verschwindet. */
	--bpo-kopfhoehe: 56px;

	/* Es gibt keinen dunklen Modus. Die Zielgruppe arbeitet neben einem
	   AVA-Programm und druckt Bemusterungsblaetter; die Seite bleibt in
	   Bildschirm und Ausdruck dasselbe Planblatt. */
	color-scheme: light;
}

/* ============================================================
   3  GRUNDLAGE UND DEUTSCHER FACHSATZ
   ============================================================ */

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

html {
	font-size: 16px;
	/* Sprungziele duerfen nie unter der klebenden Kopfleiste liegen. */
	scroll-padding-top: calc(var(--bpo-kopfhoehe) + var(--bpo-blattrand));
	background: var(--bpo-grund);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bpo-grund);
	color: var(--bpo-tinte);
	font-family: var(--bpo-schrift);
	/* 17 px in JEDEM Umbruchband. Der Desktopsatz ist nie kleiner als der
	   mobile; nur die Ueberschriften skalieren. */
	font-size: 17px;
	line-height: 1.65;
	font-weight: 400;
	/* Deutscher Fachsatz: lange Komposita wie "Verwendbarkeitsnachweis"
	   duerfen trennen, aber nicht mit ein- oder zweibuchstabigen Resten. */
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
}

/* Alle Anker respektieren die klebende Kopfleiste. */
:target,
[id] {
	scroll-margin-top: calc(var(--bpo-kopfhoehe) + var(--bpo-blattrand) + var(--bpo-a1));
}

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

/* ============================================================
   4  FOKUS
   ------------------------------------------------------------
   Ein einziger, ueberall identischer Ring: 2 px Kern innen,
   2 px Mantel aussen, 2 px Versatz, 0 px Radius. Realisiert als
   outline (Mantel) plus box-shadow (Kern), weil beide Baender
   dann zusammen mit dem Element skalieren und keinerlei Layout
   verschieben.
   ============================================================ */

:focus {
	outline: none; /* wird von :focus-visible unten ersetzt. */
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--bpo-fokus-mantel);
	outline-offset: 4px;
	box-shadow: 0 0 0 2px var(--bpo-fokus-kern);
	/* Der Fokus verschwindet nie unter der klebenden Kopfleiste. */
	scroll-margin-top: calc(var(--bpo-kopfhoehe) + var(--bpo-blattrand) + var(--bpo-a1));
}

/* Ohne :focus-visible-Unterstuetzung faellt der Ring auf :focus zurueck,
   statt ganz zu fehlen. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	summary:focus {
		outline: 2px solid var(--bpo-fokus-mantel);
		outline-offset: 4px;
		box-shadow: 0 0 0 2px var(--bpo-fokus-kern);
	}
}

.bpo-sprungmarke {
	/* fixed und nicht absolute: der Rahmen ist ebenfalls fixiert, und ein
	   absolut positionierter Sprungmarker waere nach einem Ankersprung
	   irgendwo weit oben im Dokument — sichtbar fokussiert, aber nicht im
	   Bild. */
	position: fixed;
	left: var(--bpo-blattrand);
	top: 0;
	z-index: 90;
	transform: translateY(-200%);
	display: inline-block;
	min-height: 44px;
	padding: var(--bpo-a2) var(--bpo-a3);
	background: var(--bpo-akzent);
	color: var(--bpo-auf-akzent);
	font-family: var(--bpo-schrift-eng);
	font-size: 15px;
	text-decoration: none;
}

.bpo-sprungmarke:focus {
	transform: translateY(var(--bpo-blattrand));
}

/* Nur fuer Hilfsmittel. Bleibt im Fokus sichtbar, damit eine
   Tastaturnutzerin nicht in ein unsichtbares Element laeuft. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ============================================================
   5  UMLAUFENDER SCHRIFTFELDRAHMEN
   ------------------------------------------------------------
   Das Erkennungsmerkmal der Seite in der ersten Sekunde. Der
   Rahmen ist beim Scrollen fest, der Inhalt scrollt darin.

   Der auswaertsgerichtete Schatten in Papierfarbe deckt das
   24-px-Band zwischen Rahmen und Fensterrand ab: ohne ihn wuerde
   der scrollende Inhalt oberhalb und unterhalb des Rahmens
   sichtbar bleiben und die Blattmetapher zerfallen.
   ============================================================ */

.bpo-blattrahmen {
	position: fixed;
	inset: var(--bpo-blattrand);
	border: 2px solid var(--bpo-rahmen);
	box-shadow: 0 0 0 var(--bpo-blattrand) var(--bpo-grund);
	/* Rein grafisch: darf niemals einen Klick oder eine Textauswahl
	   abfangen, die dem Inhalt darunter gilt. */
	pointer-events: none;
	z-index: 30;
}

/* Das Innenmass des Rahmens. Die Polsterung sitzt hier und nicht an den
   einzelnen Baendern, damit Kopfleiste, Blatt und Fuss exakt dieselbe
   Innenkante haben — auf einem Planblatt springt der Satzspiegel nicht. */
.bpo-seite {
	padding:
		calc(var(--bpo-blattrand) + var(--bpo-a4))
		calc(var(--bpo-blattrand) + var(--bpo-a4))
		var(--bpo-a7);
}

/* Die Breitenbegrenzung liegt auf den drei Baendern und nicht auf .bpo-seite:
   sonst zoege die Polsterung von der 1280 px ab und die drei Spuren
   (232 + 40 + 1040) haetten nie ihr volles Mass. */
.bpo-kopf,
.bpo-blatt,
.bpo-fuss {
	max-width: var(--bpo-blattbreite);
	margin-left: auto;
	margin-right: auto;
}

/* Unter 768 px rueckt der Rahmen auf 12 px Abstand. */
@media (max-width: 767px) {
	:root {
		--bpo-blattrand: 12px;
	}

	.bpo-seite {
		padding:
			calc(var(--bpo-blattrand) + var(--bpo-a3))
			calc(var(--bpo-blattrand) + var(--bpo-a3))
			var(--bpo-a6);
	}
}

/* ============================================================
   6  KLEBENDE KOPFLEISTE UND STATUSZEILE
   ============================================================ */

.bpo-kopf {
	position: sticky;
	top: calc(var(--bpo-blattrand) + 2px);
	z-index: 20;
	background: var(--bpo-grund);
	border-bottom: 2px solid var(--bpo-rahmen);
	min-height: var(--bpo-kopfhoehe);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bpo-a3) var(--bpo-a4);
	padding: var(--bpo-a1) 0;
}

.bpo-kopf__name {
	font-family: var(--bpo-schrift-eng);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--bpo-tinte);
	text-decoration: none;
	/* Zielgroesse nach SC 2.5.8. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.bpo-kopf__name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Die Statuszeile steht DAUERHAFT im Kopf, nicht erst im Fuss. Grund:
   eine .org-Domain mit Schriftfeld liest sich wie eine ausstellende
   Stelle. Wer diesen Eindruck erst im Blattfuss korrigiert, korrigiert
   ihn fuer die meisten gar nicht. */
.bpo-statuszeile {
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.45;
	color: var(--bpo-sekundaer);
	margin: 0;
	max-width: 62ch;
}

.bpo-kopf__werkzeuge {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--bpo-a2);
}

/* Das Suchfeld in der Kopfleiste bleibt schmal und traegt seine Beschriftung
   nur fuer Hilfsmittel: eine 13-px-Versalzeile ueber dem Feld wuerde die
   56-px-Leiste auf das Doppelte aufziehen. Sichtbar bleibt die Anweisung im
   Platzhalter, und auf der Suchergebnisseite und in 404.php steht dasselbe
   Formular mit sichtbarer Beschriftung. */
.bpo-kopf .bpo-suche {
	max-width: 24rem;
	margin: 0;
	align-items: center;
	flex-wrap: nowrap;
}

.bpo-kopf .bpo-suche label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * UNTER 768 PX IST DIE KOPFLEISTE NICHT KLEBEND.
 * Die Statuszeile ist vier Zeilen lang, sobald die Spalte schmal wird; eine
 * klebende Leiste von rund 120 px frisst auf einem Telefon ein Drittel des
 * Sichtfensters. Sie steht dann gewoehnlich am Blattanfang — gelesen wird sie
 * trotzdem als Erstes. Mit der Leiste faellt auch der Versatz weg, den jedes
 * Sprungziel einrechnet; --bpo-kopfhoehe geht deshalb auf 0.
 */
@media (max-width: 767px) {
	:root {
		--bpo-kopfhoehe: 0px;
	}

	.bpo-kopf {
		position: static;
		padding-bottom: var(--bpo-a2);
	}

	.bpo-kopf .bpo-suche {
		max-width: none;
		flex-wrap: wrap;
	}
}

/* ============================================================
   7  DREI SPUREN — GEWERKENAVIGATION, RINNE, INHALT
   ============================================================ */

.bpo-blatt {
	display: block;
	padding-top: var(--bpo-a5);
}

@media (min-width: 1200px) {
	.bpo-blatt {
		display: grid;
		grid-template-columns: var(--bpo-navbreite) 40px minmax(0, var(--bpo-inhaltsbreite));
		align-items: start;
	}

	.bpo-gewerke {
		grid-column: 1;
	}

	.bpo-inhalt {
		grid-column: 3;
		min-width: 0;
	}
}

/* --- Gewerkenavigation ab 1200 px: klebende Spalte mit eigenem Scrollbereich --- */

.bpo-gewerke {
	margin: 0 0 var(--bpo-a6);
}

.bpo-gewerke__titel {
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	margin: 0 0 var(--bpo-a2);
}

.bpo-gewerke__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--bpo-rahmen);
}

.bpo-gewerke__liste a {
	display: flex;
	align-items: center;
	gap: var(--bpo-a1);
	min-height: 44px;
	padding: var(--bpo-a1) var(--bpo-a2);
	border-bottom: 2px solid var(--bpo-rahmen);
	color: var(--bpo-tinte);
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
	hyphens: none;
}

.bpo-gewerke__liste a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Die aktive Zeile ist eine gefuellte Petrolflaeche mit hellem Text.
   Sie traegt zusaetzlich aria-current="page" — die Flaeche ist die
   Verstaerkung, nicht die Information. */
.bpo-gewerke__liste a[aria-current] {
	background: var(--bpo-akzent);
	color: var(--bpo-auf-akzent);
	font-weight: 600;
}

.bpo-gewerke__ordnung {
	font-family: var(--bpo-schrift-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (min-width: 1200px) {
	.bpo-gewerke {
		position: sticky;
		top: calc(var(--bpo-blattrand) + var(--bpo-kopfhoehe) + var(--bpo-a3));
		max-height: calc(100vh - var(--bpo-kopfhoehe) - (var(--bpo-blattrand) * 2) - var(--bpo-a6));
		overflow-y: auto;
		/* Der eigene Scrollbereich braucht bei Tastaturbedienung einen
		   Fokus — sonst laesst er sich nicht scrollen, ohne einen Link
		   darin anzusteuern. Das erledigt tabindex="0" im Markup. */
	}
}

/* --- 768 bis 1199 px: 48 px hohe klebende Leiste mit horizontalem Scroll --- */

@media (min-width: 768px) and (max-width: 1199px) {
	.bpo-gewerke {
		position: sticky;
		top: calc(var(--bpo-blattrand) + var(--bpo-kopfhoehe) + 2px);
		z-index: 15;
		background: var(--bpo-grund);
		margin-bottom: var(--bpo-a5);
	}

	.bpo-gewerke__titel {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.bpo-gewerke__liste {
		display: flex;
		min-height: 48px;
		overflow-x: auto;
		border-top: 2px solid var(--bpo-rahmen);
		border-bottom: 2px solid var(--bpo-rahmen);
	}

	.bpo-gewerke__liste li + li {
		border-left: 2px solid var(--bpo-rahmen);
	}

	.bpo-gewerke__liste a {
		border-bottom: 0;
		white-space: nowrap;
		min-height: 48px;
	}
}

@media (max-width: 767px) {
	.bpo-gewerke__liste {
		border-top: 2px solid var(--bpo-rahmen);
	}
}

/* ============================================================
   8  ABSCHNITT MIT HAENGENDER ORDNUNGSZAHL-RINNE
   ------------------------------------------------------------
   Die zweite Eigenheit des Satzspiegels. Links haengt eine
   88-px-Rinne mit der Ordnungszahl in Mono, dazu Marginalien und
   Artikelbezuege. Rahmenzellen, Tabellen, LV-Bausteine und
   Zeichnungen duerfen die Rinne ueberbruecken und die vollen
   928 px nutzen; die Rinne bleibt dann sichtbar leer — es wird
   NIE Text darunter geschoben.
   ============================================================ */

.bpo-abschnitt {
	display: grid;
	grid-template-columns: var(--bpo-rinne) var(--bpo-rinnenabstand) minmax(0, 1fr);
	margin: 0 0 var(--bpo-a7);
}

.bpo-abschnitt > * {
	grid-column: 3;
	min-width: 0;
}

/* Die Rinne selbst. */
.bpo-rinne {
	grid-column: 1;
	grid-row: 1 / span 1;
	text-align: right;
	padding-top: 4px; /* Grundlinie der Ordnungszahl buendig zur ersten Ueberschriftenzeile. */
}

.bpo-ordnungszahl {
	display: block;
	font-family: var(--bpo-schrift-mono);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	color: var(--bpo-akzent);
	white-space: nowrap;
}

/* Alles, was die Rinne ueberbruecken darf. */
.bpo-breit {
	grid-column: 3;
}

/* Die Prosaspalte ist in JEDEM Umbruchband gedeckelt. Ohne diese Regel
   erreicht der mobile Satz real 86 Zeichen je Zeile, weil dort nichts
   ausser dem Fensterrand begrenzt. */
.bpo-prosa,
.bpo-abschnitt > p,
.bpo-abschnitt > ul,
.bpo-abschnitt > ol,
.bpo-abschnitt > blockquote {
	max-width: var(--bpo-prosa);
}

/* baupvo-org: Inhaltsbehaelter der Redaktion */
/* Der redaktionelle Inhalt einer Position oder Seite steht in
   einem Behaelter, der SELBST nicht gedeckelt ist. Gedeckelt wird
   nur die Prosa darin. Andernfalls koennte eine Rahmenzelle, eine
   Anforderung-Nachweis-Tabelle oder eine Entscheidungsstrecke im
   Inhalt die 928 px nicht nutzen, die der Satzspiegel ihnen
   ausdruecklich zugesteht - die Rinne zu ueberbruecken ist ihr
   Vorrecht, nicht das der Prosa. */
.bpo-inhalt-text > p,
.bpo-inhalt-text > ul,
.bpo-inhalt-text > ol,
.bpo-inhalt-text > dl,
.bpo-inhalt-text > blockquote,
.bpo-inhalt-text > h2,
.bpo-inhalt-text > h3,
.bpo-inhalt-text > h4 {
	max-width: var(--bpo-prosa);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.bpo-abschnitt {
		grid-template-columns: 56px var(--bpo-a3) minmax(0, 1fr);
	}
}

/* Unter 768 px: eine Spalte. Die Ordnungszahl wandert als vorangestellte
   Mono-Marke in die Ueberschriftenzeile — sie verschwindet nicht, sie
   wechselt die Position. */
@media (max-width: 767px) {
	.bpo-abschnitt {
		display: block;
	}

	.bpo-rinne {
		text-align: left;
		padding-top: 0;
		margin-bottom: var(--bpo-a1);
	}

	.bpo-ordnungszahl {
		display: inline-block;
	}
}

/* ============================================================
   9  TYPOGRAFIE
   ------------------------------------------------------------
   Die tragende Idee heisst "Beschriftung statt Ueberschrift":
   Abschnittstitel werden wie Beschriftungen auf einem Planblatt
   behandelt, das visuelle Gewicht liegt bei der Ordnungszahl in
   der Rinne.
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--bpo-a2);
	color: var(--bpo-tinte);
	font-weight: 600;
	text-wrap: balance;
}

.bpo-blattkopf h1,
h1 {
	font-family: var(--bpo-schrift-eng);
	font-weight: 600;
	font-size: 34px;
	line-height: 40px;
	letter-spacing: -0.01em;
}

h2 {
	font-family: var(--bpo-schrift-eng);
	font-weight: 600;
	font-size: 24px;
	line-height: 30px;
	margin-top: var(--bpo-a6);
}

h3 {
	font-family: var(--bpo-schrift);
	font-weight: 500;
	font-size: 19px;
	line-height: 26px;
	margin-top: var(--bpo-a5);
}

h4,
h5,
h6 {
	font-family: var(--bpo-schrift);
	font-weight: 500;
	font-size: 17px;
	line-height: 26px;
	margin-top: var(--bpo-a4);
}

@media (max-width: 767px) {
	h1 {
		font-size: 27px;
		line-height: 32px;
	}
}

p {
	margin: 0 0 var(--bpo-a4);
}

/* Abschnittsbeschriftung ueber der Zellkante. Die Beschriftung sitzt
   IMMER ueber einer 2-px-Linie und nie in einer Flaeche — die Seite
   kennt keine gefuellten Kaesten. */
.bpo-label {
	display: block;
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	margin: 0 0 var(--bpo-a2);
	hyphens: none;
}

.bpo-kante {
	border-top: 2px solid var(--bpo-rahmen);
	padding-top: var(--bpo-a2);
}

/* Verweise. Sie sind NICHT allein durch Farbe erkennbar: Petrol gegen
   Tinte liegt bei 1,20:1 und faellt in Graustufen zusammen. Die
   Unterstreichung ist deshalb Pflicht und kein Geschmack (SC 1.4.1). */
a {
	color: var(--bpo-akzent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

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

strong,
b {
	font-weight: 500;
}

ul,
ol {
	margin: 0 0 var(--bpo-a4);
	padding-left: 1.4em;
}

li {
	margin-bottom: var(--bpo-a1);
}

blockquote {
	margin: 0 0 var(--bpo-a4);
	padding-left: var(--bpo-a3);
	border-left: 2px solid var(--bpo-rahmen);
	color: var(--bpo-sekundaer);
}

hr {
	border: 0;
	border-top: 2px solid var(--bpo-rahmen);
	margin: var(--bpo-a6) 0;
}

/* Mono im Fliesstext: 0,88em relativ zur Umgebung, damit die
   Grossbuchstabenhoehe zur Umgebung passt. */
code,
kbd,
samp,
pre,
.bpo-mono {
	font-family: var(--bpo-schrift-mono);
	font-size: 0.88em;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   10  NORMKUERZEL-CHIP UND UMBRUCHSICHERE KENNUNGEN
   ------------------------------------------------------------
   A2-s1,d0 darf nicht am Bindestrich und nicht am Komma brechen,
   EN 13501-1 nicht im Leerzeichen. Beides wuerde die Kennung
   fachlich falsch lesbar machen.
   ============================================================ */

.bpo-chip {
	display: inline;
	font-family: var(--bpo-schrift-mono);
	font-size: 0.88em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	border: 1px solid var(--bpo-rahmen);
	border-radius: 0;
	padding: 1px 4px;
	color: var(--bpo-tinte);
	hyphens: none;
}

/* CELEX- und DoP-Nummern sind zu lang fuer nowrap; sie muessen brechen
   duerfen, aber nur als letzte Rettung und nie in der Mitte einer
   Ziffernfolge, die als Zahl gelesen wird. */
.bpo-kennung {
	font-family: var(--bpo-schrift-mono);
	font-size: 0.88em;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
	hyphens: none;
}

/* Erlaeuterung eines Chips oeffnet sich IM FLUSS, nicht als Hoverblase:
   ein Tabletnutzer auf der Baustelle hat keinen Hover. */
.bpo-chip-erklaerung {
	margin: var(--bpo-a1) 0 var(--bpo-a4);
	max-width: var(--bpo-prosa);
	border-left: 2px solid var(--bpo-rahmen);
	padding-left: var(--bpo-a2);
}

.bpo-chip-erklaerung > summary {
	cursor: pointer;
	min-height: 24px;
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--bpo-akzent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bpo-chip-erklaerung > div {
	font-size: 15px;
	line-height: 1.55;
	padding: var(--bpo-a1) 0 0;
}

/* ============================================================
   11  RAHMENZELLEN — DAS EINZIGE GLIEDERUNGSMITTEL
   ------------------------------------------------------------
   Keine Karte, keine Fuellflaeche, kein Schatten, kein Radius.
   Eine Zelle ist ein Rechteck aus 2-px-Linien auf demselben
   Papier wie alles andere.
   ============================================================ */

.bpo-zelle {
	border: 2px solid var(--bpo-rahmen);
	background: transparent;
	padding: var(--bpo-a3);
	margin: 0 0 var(--bpo-a4);
	/* Immer min-height, nie height: deutsche Komposita und 200 % Zoom
	   duerfen die Zeile aufmachen, ohne dass Text abgeschnitten wird. */
	min-height: 0;
}

.bpo-zelle__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bpo-a2);
	margin-bottom: var(--bpo-a2);
	padding-bottom: var(--bpo-a1);
	border-bottom: 2px solid var(--bpo-rahmen);
}

.bpo-zelle__hinweis {
	margin: var(--bpo-a2) 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--bpo-sekundaer);
	max-width: var(--bpo-prosa);
}

/* --- Schriftfeld im Blattkopf --- */

.bpo-blattkopf {
	margin: 0 0 var(--bpo-a6);
}

.bpo-schriftfeld {
	border: 2px solid var(--bpo-rahmen);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0 0 var(--bpo-a2);
}

.bpo-schriftfeld__zelle {
	padding: var(--bpo-a1) var(--bpo-a2);
	min-height: 60px;
	border-left: 2px solid var(--bpo-rahmen);
}

/*
 * Der Blattkopf traegt in der Regel fuenf Zellen. Fuehrt eine Seite zusaetzlich
 * die Zelle "Zuständige Rolle im Bauablauf", werden es sechs — dann bricht die
 * Zeile um. Deshalb wird die erste Zelle JEDER Zeile ueber 5n+1 angesprochen
 * und nicht ueber :first-child, und jede Zelle ab der zweiten Zeile bekommt
 * ihre Oberkante. Ohne diese beiden Regeln haette die sechste Zelle links eine
 * Linie zu viel und oben keine.
 */
.bpo-schriftfeld__zelle:nth-child(5n + 1) {
	border-left: 0;
}

.bpo-schriftfeld__zelle:nth-child(n + 6) {
	border-top: 2px solid var(--bpo-rahmen);
}

.bpo-schriftfeld__beschriftung {
	display: block;
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	hyphens: none;
	margin-bottom: 2px;
}

.bpo-schriftfeld__wert {
	display: block;
	font-family: var(--bpo-schrift-eng);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.35;
	color: var(--bpo-tinte);
}

/* Zwei Spalten. Die Zellkanten werden vollstaendig neu gesetzt und nicht bloss
   ergaenzt: die 5n+1-Regel des Fuenfspalters trifft im Zweispalter die
   falschen Zellen. */
@media (max-width: 1199px) {
	.bpo-schriftfeld {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bpo-schriftfeld__zelle:nth-child(odd) {
		border-left: 0;
	}

	.bpo-schriftfeld__zelle:nth-child(even) {
		border-left: 2px solid var(--bpo-rahmen);
	}

	.bpo-schriftfeld__zelle:nth-child(n + 3) {
		border-top: 2px solid var(--bpo-rahmen);
	}

	.bpo-schriftfeld__zelle:nth-child(-n + 2) {
		border-top: 0;
	}
}

/* Eine Spalte. */
@media (max-width: 559px) {
	.bpo-schriftfeld {
		grid-template-columns: minmax(0, 1fr);
	}

	.bpo-schriftfeld__zelle:nth-child(odd),
	.bpo-schriftfeld__zelle:nth-child(even) {
		border-left: 0;
	}

	.bpo-schriftfeld__zelle:nth-child(n + 2),
	.bpo-schriftfeld__zelle:nth-child(-n + 2) {
		border-top: 2px solid var(--bpo-rahmen);
	}

	.bpo-schriftfeld__zelle:first-child {
		border-top: 0;
	}
}

/* ============================================================
   12  ANFORDERUNG-NACHWEIS-TABELLE
   ------------------------------------------------------------
   Das inhaltliche Rueckgrat. Kein Zebra, keine gefuellte
   Kopfleiste — die Seite kennt keine Fuellflaechen. Spalten
   trennt die 2-px-Kante, Zeilen die dekorative Haarlinie
   INNERHALB der bereits gerahmten Tabelle.
   ============================================================ */

.bpo-tabelle-huelle {
	margin: 0 0 var(--bpo-a4);
}

table,
.bpo-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
}

.bpo-tabelle {
	border: 2px solid var(--bpo-rahmen);
}

.bpo-tabelle caption {
	caption-side: top;
	text-align: left;
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	padding-bottom: var(--bpo-a1);
	hyphens: none;
}

.bpo-tabelle th,
.bpo-tabelle td {
	padding: var(--bpo-a1) var(--bpo-a2);
	text-align: left;
	vertical-align: top;
	border-left: 2px solid var(--bpo-rahmen);
	/* min-height statt height: eine Zelle mit "Verwendbarkeitsnachweis"
	   darf zwei Zeilen hoch werden. */
	height: auto;
}

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

.bpo-tabelle thead th {
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	background: transparent;
	border-bottom: 2px solid var(--bpo-rahmen);
	hyphens: none;
}

.bpo-tabelle tbody td,
.bpo-tabelle tbody th {
	font-family: var(--bpo-schrift-eng);
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	hyphens: auto;
}

.bpo-tabelle tbody tr + tr td,
.bpo-tabelle tbody tr + tr th {
	border-top: 1px solid var(--bpo-haarlinie);
}

/* --- Adressatenmarken: Form und Wort, niemals Farbe --- */

.bpo-adressat {
	display: inline-flex;
	align-items: center;
	gap: var(--bpo-a1);
	hyphens: none;
}

.bpo-adressat__marke {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border: 2px solid var(--bpo-tinte);
}

/* Gefuelltes Quadrat = Pflicht des Herstellers. */
.bpo-adressat--hersteller .bpo-adressat__marke {
	background: var(--bpo-tinte);
}

/* Hohles Quadrat mit 2-px-Kontur = Aufgabe der Planung / Bauueberwachung.
   Beide Marken stehen IMMER mit dem ausgeschriebenen Wort — die Form
   allein waere eine Legende, die man auswendig lernen muesste. */
.bpo-adressat--planung .bpo-adressat__marke {
	background: transparent;
}

/* Offene Rechtsfrage: 45-Grad-schraffierte linke Zellkante plus das Wort
   "Offen". Die Schraffur ist ein Verlaufsmuster, keine Fuellflaeche — sie
   sitzt in einem 6 px breiten Streifen an der Kante. */
.bpo-offen {
	border-left: 6px solid transparent;
	border-image: repeating-linear-gradient(
		45deg,
		var(--bpo-rahmen) 0,
		var(--bpo-rahmen) 2px,
		transparent 2px,
		transparent 5px
	) 6;
	padding-left: var(--bpo-a2);
}

.bpo-offen__wort {
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	display: block;
	hyphens: none;
}

/* Der Seitenkoerper scrollt NIE horizontal. Genau ein Bausteintyp darf
   einen eigenen Scrollbereich haben: die Fristen- und Uebergangsmatrix. */
.bpo-matrix {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bpo-matrix:focus-visible {
	outline: 2px solid var(--bpo-fokus-mantel);
	outline-offset: 4px;
	box-shadow: 0 0 0 2px var(--bpo-fokus-kern);
}

.bpo-matrix > table {
	min-width: 46rem;
}

.bpo-matrix__hinweis {
	font-family: var(--bpo-schrift-eng);
	font-size: 14px;
	color: var(--bpo-sekundaer);
	margin: 0 0 var(--bpo-a1);
	hyphens: none;
}

/* Unter 768 px werden die Anforderung-Nachweis-Tabellen zu gestapelten
   Beschriftung-Wert-Zellen mit 2-px-Kante links. Der Kopf wandert per
   data-label in die Zeile — sonst waere nach dem dritten Stapel nicht
   mehr erkennbar, welche Spalte man liest. */
@media (max-width: 767px) {
	.bpo-tabelle--stapelbar,
	.bpo-tabelle--stapelbar thead,
	.bpo-tabelle--stapelbar tbody,
	.bpo-tabelle--stapelbar tr,
	.bpo-tabelle--stapelbar td,
	.bpo-tabelle--stapelbar th {
		display: block;
	}

	.bpo-tabelle--stapelbar thead {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.bpo-tabelle--stapelbar {
		border: 0;
	}

	.bpo-tabelle--stapelbar tbody tr {
		border-left: 2px solid var(--bpo-rahmen);
		padding-left: var(--bpo-a2);
		margin-bottom: var(--bpo-a4);
	}

	.bpo-tabelle--stapelbar tbody td,
	.bpo-tabelle--stapelbar tbody th {
		border: 0;
		border-top: 0;
		padding: 0 0 var(--bpo-a1);
	}

	.bpo-tabelle--stapelbar tbody td::before,
	.bpo-tabelle--stapelbar tbody th::before {
		content: attr(data-label);
		display: block;
		font-family: var(--bpo-schrift-eng);
		font-weight: 500;
		font-size: 13px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--bpo-sekundaer);
		hyphens: none;
	}
}

/* ============================================================
   13  LV-TEXTBAUSTEIN
   ============================================================ */

.bpo-lv__text {
	font-size: 16px;
	line-height: 26px;
	font-variant-numeric: tabular-nums;
	margin: 0;
	white-space: pre-wrap;
	/* Ausschreibungstexte werden grundsaetzlich als markierbarer Text
	   gezeigt, nie als Bildschirmfoto — sie sollen sich in das
	   AVA-Programm kopieren lassen. */
	-webkit-user-select: text;
	user-select: text;
}

.bpo-lv__werkzeuge {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpo-a2);
	align-items: center;
}

.bpo-lv__meldung {
	font-family: var(--bpo-schrift-eng);
	font-size: 14px;
	color: var(--bpo-sekundaer);
	min-height: 21px;
	hyphens: none;
}

/* ============================================================
   14  BEDIENELEMENTE UND FORMULAR
   ------------------------------------------------------------
   Zielgroessen nach SC 2.5.8: mindestens 24 x 24 px, Bedien- und
   Formularelemente 44 x 44 px mit 12 px Abstand.
   ============================================================ */

.bpo-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bpo-a1);
	min-height: 44px;
	min-width: 44px;
	padding: var(--bpo-a1) var(--bpo-a3);
	border: 2px solid var(--bpo-rahmen);
	border-radius: 0;
	background: transparent;
	color: var(--bpo-tinte);
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
	cursor: pointer;
	hyphens: none;
}

.bpo-knopf:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

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

.bpo-feldgruppe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--bpo-a2) var(--bpo-a4);
	margin: 0 0 var(--bpo-a4);
	border: 0;
	padding: 0;
}

.bpo-feld {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bpo-feld > label,
.bpo-feld > .bpo-feld__label {
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	hyphens: none;
}

input[type='text'],
input[type='search'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='password'],
select,
textarea {
	min-height: 44px;
	padding: var(--bpo-a1) var(--bpo-a2);
	border: 2px solid var(--bpo-rahmen);
	border-radius: 0;
	background: transparent;
	color: var(--bpo-tinte);
	font-family: var(--bpo-schrift);
	font-size: 17px;
	line-height: 1.45;
	width: 100%;
}

textarea {
	min-height: 6.5rem;
	resize: vertical;
}

/* Ein Feldsatz ohne eigenen Rahmen: die Gruppierung traegt hier die
   Beschriftung des legend, nicht eine zweite Linie in einer Zelle, die
   ohnehin schon gerahmt ist. */
.bpo-feldsatz {
	border: 0;
	padding: 0;
	margin: 0 0 var(--bpo-a4);
}

.bpo-feld--breit {
	margin-bottom: var(--bpo-a4);
}

.bpo-hinweis-lokal--abgesetzt {
	margin-top: var(--bpo-a3);
}

/* Die Beschriftung im Zellkopf steht buendig zur Oberkante des Kopfes; der
   Standardabstand einer Abschnittsbeschriftung wuerde die Werkzeuge daneben
   nach unten schieben. */
.bpo-label--buendig {
	margin: 0;
}

legend {
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	padding: 0 0 var(--bpo-a1);
	hyphens: none;
}

/* Der Befund ist eine Auswahl mit AUSGESCHRIEBENEN Woertern. Die Seite
   fuehrt bewusst keine Kontrollkaestchen und keine Haekchen — eine
   abhakbare Liste waere ein Widerspruch zur eigenen Abgrenzung gegen
   baupvo.de und traegt auf einem Anlieferungsblatt ohnehin nicht. */
.bpo-befund {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpo-a2);
}

.bpo-befund label {
	display: inline-flex;
	align-items: center;
	gap: var(--bpo-a1);
	min-height: 44px;
	padding: 0 var(--bpo-a2);
	border: 2px solid var(--bpo-rahmen);
	font-family: var(--bpo-schrift-eng);
	font-size: 15px;
	cursor: pointer;
	hyphens: none;
}

.bpo-befund input[type='radio'] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--bpo-akzent);
}

/* Unterschriftsfeld: eine leere Zelle mit Grundlinie, die im Ausdruck
   traegt. Auf dem Bildschirm ist sie kein Eingabefeld — auf einem
   Anlieferungsblatt wird von Hand unterschrieben. */
.bpo-unterschrift {
	border: 2px solid var(--bpo-rahmen);
	min-height: 88px;
	padding: var(--bpo-a1) var(--bpo-a2);
	display: flex;
	align-items: flex-end;
}

.bpo-unterschrift span {
	font-family: var(--bpo-schrift-eng);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	border-top: 1px solid var(--bpo-haarlinie);
	padding-top: 4px;
	width: 100%;
	hyphens: none;
}

.bpo-hinweis-lokal {
	font-size: 14px;
	line-height: 21px;
	color: var(--bpo-sekundaer);
	max-width: var(--bpo-prosa);
}

/* ============================================================
   15  ENTSCHEIDUNGSSTRECKE PRODUKTAUSWAHL
   ------------------------------------------------------------
   Lineare senkrechte Schiene entlang der Rinne. Kein Modal, kein
   mehrseitiger Assistent: der gesamte Pfad bleibt gleichzeitig
   sichtbar und druckbar.
   ============================================================ */

.bpo-strecke {
	margin: 0 0 var(--bpo-a4);
	list-style: none;
	padding: 0;
	counter-reset: bpo-schritt;
}

.bpo-strecke > li {
	position: relative;
	margin: 0 0 var(--bpo-a2);
}

.bpo-schritt {
	border: 2px solid var(--bpo-rahmen);
	padding: 0;
}

.bpo-schritt > summary {
	display: flex;
	align-items: flex-start;
	gap: var(--bpo-a2);
	min-height: 44px;
	padding: var(--bpo-a2) var(--bpo-a3);
	cursor: pointer;
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.35;
	list-style: none;
}

.bpo-schritt > summary::-webkit-details-marker {
	display: none;
}

.bpo-schritt__nummer {
	flex: 0 0 auto;
	font-family: var(--bpo-schrift-mono);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	color: var(--bpo-akzent);
	white-space: nowrap;
}

.bpo-schritt__auf {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--bpo-schrift-eng);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-sekundaer);
	hyphens: none;
}

.bpo-schritt[open] .bpo-schritt__auf::after {
	content: ' \2191';
}

.bpo-schritt:not([open]) .bpo-schritt__auf::after {
	content: ' \2193';
}

.bpo-schritt__inhalt {
	padding: 0 var(--bpo-a3) var(--bpo-a3);
	border-top: 2px solid var(--bpo-rahmen);
	margin-top: 0;
	padding-top: var(--bpo-a2);
}

.bpo-schritt__inhalt > :last-child {
	margin-bottom: 0;
}

/* Die senkrechte Schiene zwischen den Schritten. Sie ist eine Linie,
   kein Bild, und faellt im Ausdruck nicht weg. */
.bpo-strecke > li + li::before {
	content: '';
	position: absolute;
	left: var(--bpo-a4);
	top: calc(var(--bpo-a2) * -1);
	width: 2px;
	height: var(--bpo-a2);
	background: var(--bpo-rahmen);
}

/* ============================================================
   16  MARGINALIE QUERVERWEIS
   ============================================================ */

.bpo-marginalie {
	font-size: 14px;
	line-height: 21px;
	color: var(--bpo-sekundaer);
	hyphens: none;
}

.bpo-marginalie a {
	display: inline-block;
	min-height: 24px;
}

.bpo-rinne .bpo-marginalie {
	margin-top: var(--bpo-a2);
	text-align: right;
}

/* Unter 1200 px klappen die Marginalien unter den zugehoerigen Absatz und
   behalten die 2-px-Kante links — sie bleiben als Randnotiz erkennbar,
   statt sich in den Fliesstext zu mischen. */
@media (max-width: 1199px) {
	.bpo-rinne .bpo-marginalie {
		text-align: left;
	}

	.bpo-marginalie {
		border-left: 2px solid var(--bpo-rahmen);
		padding-left: var(--bpo-a2);
		margin: 0 0 var(--bpo-a4);
	}
}

/* ============================================================
   17  ZEICHNUNGEN
   ------------------------------------------------------------
   Einzige Bildgattung: selbst gezeichnete technische
   Strichzeichnungen als Inline-SVG. Keine Fotografie, kein
   Rasterbild, kein Stock, keine Menschen.
   ============================================================ */

.bpo-zeichnung {
	margin: 0 0 var(--bpo-a5);
	max-width: 928px;
}

.bpo-zeichnung__rahmen {
	border: 2px solid var(--bpo-rahmen);
	padding: var(--bpo-a2);
	/* 3:2. aspect-ratio auf dem Container statt fester Hoehe, damit die
	   Zeichnung bei 200 % Zoom mitwaechst. */
}

.bpo-zeichnung svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--bpo-akzent);
	font-family: var(--bpo-schrift-eng);
}

.bpo-zeichnung figcaption {
	margin: var(--bpo-a1) 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--bpo-sekundaer);
	max-width: 62ch;
}

.bpo-zeichnung__legende {
	margin: var(--bpo-a1) 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 21px;
	color: var(--bpo-sekundaer);
}

.bpo-zeichnung__legende b {
	font-family: var(--bpo-schrift-mono);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Die Textalternative beschreibt den SACHVERHALT, nicht die Grafik.
   Sie steht offen im Fluss und nicht in einem alt-Attribut, weil sie
   fuer alle nuetzlich ist und im Ausdruck erhalten bleibt. */
.bpo-zeichnung__alternative {
	margin: var(--bpo-a2) 0 0;
	border-left: 2px solid var(--bpo-rahmen);
	padding-left: var(--bpo-a2);
	max-width: var(--bpo-prosa);
}

.bpo-zeichnung__alternative > summary {
	cursor: pointer;
	min-height: 24px;
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 14px;
	color: var(--bpo-akzent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bpo-zeichnung__alternative p {
	font-size: 15px;
	line-height: 1.55;
	margin: var(--bpo-a1) 0 0;
}

/* Der Zeichensatz: zwoelf Zeichen, 20 px, 1,5 px Strich, gerade Enden,
   rechtwinklig konstruiert. Ausschliesslich NEBEN Beschriftungen, nie
   allein als Bedienelement. */
.bpo-zeichen {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

/* ============================================================
   18  ANZEIGENPLATZ
   ------------------------------------------------------------
   Was die Trennung TRAEGT, ehrlich benannt:
   1. die LEERE RINNE — der Block bekommt keine Ordnungszahl; auf
      einer Seite, deren gesamter redaktioneller Inhalt nummeriert
      ist, ist das der staerkste Bruch;
   2. der umlaufende 2-px-Rahmen (3,11:1 gegen die Anzeigenflaeche),
      messbar ueber 3:1 und auch in Graustufen und im Ausdruck da;
   3. das Wort "Anzeige" als ERSTES Element im Block, gefolgt von
      einer 2-px-Trennlinie;
   4. die feste Schlusszeile "Bezahlte Anzeige. Kein redaktioneller
      Inhalt."

   Was die Trennung NICHT traegt und was deshalb auch nicht
   behauptet wird: der Flaechenton. Anzeigengrund gegen Papier sind
   1,11:1 — unterhalb jeder Wahrnehmungsschwelle fuer Helligkeit
   und in Graustufen gar nicht vorhanden. Der Ton bleibt nur, weil
   er die einzige warme Flaeche der sonst kuehl-gruenen Seite ist
   und Farbtuechtigen eine zusaetzliche, ausdruecklich NACHRANGIGE
   Andeutung gibt.
   ============================================================ */

.bpo-anzeige {
	border: 2px solid var(--bpo-rahmen);
	background: var(--bpo-anzeige-grund);
	color: var(--bpo-tinte);
	padding: var(--bpo-a3);
	/* Feste Mindesthoehe gegen Layoutsprung (CLS), nie height. */
	min-height: 180px;
	margin: 0 0 var(--bpo-a7);
	/* Nicht klebend, nicht mitscrollend. Steht im Inhaltsstrom. */
	position: static;
	max-width: 928px;
}

.bpo-anzeige__label {
	display: block;
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bpo-anzeige-label);
	hyphens: none;
	margin: 0 0 var(--bpo-a1);
}

.bpo-anzeige__trenner {
	border: 0;
	border-top: 2px solid var(--bpo-rahmen);
	margin: 0 0 var(--bpo-a3);
}

.bpo-anzeige__inhalt > :last-child {
	margin-bottom: 0;
}

.bpo-anzeige__titel {
	font-family: var(--bpo-schrift);
	font-weight: 500;
	font-size: 19px;
	line-height: 26px;
	margin: 0 0 var(--bpo-a1);
	color: var(--bpo-tinte);
}

.bpo-anzeige__text {
	font-size: 16px;
	line-height: 25px;
	margin: 0 0 var(--bpo-a3);
	max-width: var(--bpo-prosa);
}

/* Farbdisziplin: die Werbung darf weder das Akzentpetrol noch den
   Fokus-Token verwenden. Ihre Schaltflaeche ist neutrale Tinte mit
   hellem Text (12,47:1). */
.bpo-anzeige__knopf {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--bpo-a1) var(--bpo-a3);
	background: var(--bpo-tinte);
	border: 2px solid var(--bpo-tinte);
	color: var(--bpo-auf-akzent);
	font-family: var(--bpo-schrift-eng);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	hyphens: none;
}

.bpo-anzeige__knopf:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bpo-anzeige__schluss {
	margin: var(--bpo-a3) 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--bpo-anzeige-label);
	hyphens: none;
}

/* ============================================================
   19  REVISIONSZEILE, FUSSNOTEN
   ============================================================ */

.bpo-revision {
	margin: var(--bpo-a6) 0 0;
	/* Eigener Scrollbereich statt eines waagerecht scrollenden
	   Seitenkoerpers. Der Vermerk wird nicht gestapelt: seine Zeilen
	   sind als Zeilen zu lesen. */
	overflow-x: auto;
}

.bpo-revision table {
	font-size: 14px;
	line-height: 21px;
}

.bpo-fussnoten {
	margin: var(--bpo-a6) 0 0;
	border-top: 2px solid var(--bpo-rahmen);
	padding-top: var(--bpo-a2);
}

.bpo-fussnoten ol {
	font-size: 14px;
	line-height: 21px;
	max-width: 68ch;
	padding-left: 1.6em;
}

.bpo-fussnoten li {
	margin-bottom: var(--bpo-a1);
}

/* Rueckspringpfeil zum Textanker. Eigene Zielgroesse, damit er auf dem
   Tablet zu treffen ist. */
.bpo-fussnote__rueck {
	display: inline-block;
	min-width: 24px;
	min-height: 24px;
	text-decoration: none;
	font-family: var(--bpo-schrift-mono);
}

.bpo-fussnote__rueck:hover {
	text-decoration: underline;
}

sup.bpo-fussnote-anker a {
	display: inline-block;
	min-width: 24px;
	text-align: center;
	font-family: var(--bpo-schrift-mono);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   20  BEITRAGSLISTEN, SUCHE, 404
   ============================================================ */

.bpo-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--bpo-rahmen);
}

.bpo-liste > li {
	border-bottom: 2px solid var(--bpo-rahmen);
	padding: var(--bpo-a3) 0;
	margin: 0;
	display: grid;
	grid-template-columns: var(--bpo-rinne) var(--bpo-rinnenabstand) minmax(0, 1fr);
}

.bpo-liste > li > .bpo-rinne {
	grid-column: 1;
	grid-row: 1 / span 3;
}

.bpo-liste h2,
.bpo-liste h3 {
	grid-column: 3;
	margin: 0 0 4px;
	font-size: 19px;
	line-height: 26px;
	font-family: var(--bpo-schrift);
	font-weight: 500;
}

.bpo-liste p {
	grid-column: 3;
	margin: 0;
	max-width: var(--bpo-prosa);
}

.bpo-liste__meta {
	grid-column: 3;
	font-family: var(--bpo-schrift-eng);
	font-size: 14px;
	color: var(--bpo-sekundaer);
	margin: 0 0 4px;
	hyphens: none;
}

@media (max-width: 767px) {
	.bpo-liste > li {
		display: block;
	}
}

.bpo-suche {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpo-a2);
	align-items: flex-end;
	max-width: var(--bpo-prosa);
	margin: 0 0 var(--bpo-a4);
}

.bpo-suche__feld {
	flex: 1 1 14rem;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bpo-blaettern {
	margin: var(--bpo-a5) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpo-a2);
}

.bpo-blaettern .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--bpo-a2);
	border: 2px solid var(--bpo-rahmen);
	font-family: var(--bpo-schrift-mono);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--bpo-tinte);
}

.bpo-blaettern .page-numbers.current {
	background: var(--bpo-akzent);
	border-color: var(--bpo-akzent);
	color: var(--bpo-auf-akzent);
}

/* ============================================================
   21  BLATTFUSS
   ============================================================ */

.bpo-fuss {
	border-top: 2px solid var(--bpo-rahmen);
	margin-top: var(--bpo-a7);
	padding-top: var(--bpo-a4);
	font-size: 15px;
	line-height: 23px;
}

.bpo-fuss__raster {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--bpo-a4);
}

@media (max-width: 767px) {
	.bpo-fuss__raster {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Die Impressumszeile steht UNGEKUERZT auf jeder Seite. Sie ist keine
   Fussnote und wird nicht auf ein "Impressum"-Link reduziert: wer
   wissen will, wer hinter einer .org-Domain zum Baurecht steht, soll
   es lesen koennen, ohne zu klicken. */
.bpo-fuss__impressum {
	margin: 0 0 var(--bpo-a3);
	max-width: 78ch;
	color: var(--bpo-tinte);
}

.bpo-fuss__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpo-fuss__nav li {
	margin: 0;
}

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

.bpo-fuss__lizenz {
	margin: var(--bpo-a3) 0 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--bpo-sekundaer);
	max-width: 78ch;
}

/* ============================================================
   22  WORDPRESS-EIGENE KLASSEN
   ============================================================ */

.alignleft {
	float: left;
	margin: 0 var(--bpo-a4) var(--bpo-a3) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--bpo-a3) var(--bpo-a4);
}

.aligncenter {
	display: block;
	margin: 0 auto var(--bpo-a3);
}

.alignwide,
.alignfull {
	max-width: 928px;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	font-size: 14px;
	line-height: 21px;
	color: var(--bpo-sekundaer);
}

.sticky,
.bypostauthor {
	/* Von WordPress verlangte Klassen. Die Seite kennt weder angeheftete
	   Beitraege noch Autorenkuerzel; die Regeln bleiben leer statt eine
	   Auszeichnung zu erfinden, die es redaktionell nicht gibt. */
	position: relative;
}

.bpo-inhalt img {
	border: 2px solid var(--bpo-rahmen);
}

/* ============================================================
   23  BEWEGUNG
   ------------------------------------------------------------
   Die Seite animiert nichts. Die einzige Bewegung ist weiches
   Scrollen zu Ankern — und genau das wird abgeschaltet, wenn das
   System es verlangt. Die Regeln stehen trotzdem vollstaendig da,
   weil eingebettete Blockinhalte eigene Uebergaenge mitbringen
   koennen.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   24  DRUCK — VERPFLICHTEND
   ------------------------------------------------------------
   Bemusterungs- und Abnahmeblaetter sollen mit auf die Baustelle.
   Der Schriftfeldrahmen, das Schriftfeld, die Ordnungszahlen und
   die Revisionszeile bleiben; Navigation und Anzeigenblock fallen
   weg. Verweise werden mit ihrem Ziel in Klammern ausgegeben —
   auf Papier ist ein unterstrichenes Wort ohne Adresse wertlos.
   ============================================================ */

@media print {
	@page {
		size: A4 portrait;
		margin: 14mm;
	}

	html,
	body {
		background: #ffffff;
		color: #000000;
		font-size: 10.5pt;
		line-height: 1.45;
	}

	/* Der feste Rahmen kann nicht mitgedruckt werden — position: fixed
	   erscheint sonst auf jeder Seite an derselben Stelle und
	   ueberdruckt den Inhalt. Der Blattrahmen wird deshalb im Druck
	   vom Seitenrand der @page uebernommen. */
	.bpo-blattrahmen {
		display: none;
	}

	.bpo-seite {
		padding: 0;
		max-width: none;
	}

	.bpo-kopf {
		position: static;
		border-bottom: 1.5pt solid #000000;
	}

	.bpo-kopf__werkzeuge,
	.bpo-gewerke,
	.bpo-sprungmarke,
	.bpo-blaettern,
	.bpo-suche,
	.bpo-lv__werkzeuge,
	form.bpo-suchformular {
		display: none !important;
	}

	/* Kein Bemusterungsblatt geht mit Werbung auf die Baustelle. */
	.bpo-anzeige {
		display: none !important;
	}

	.bpo-blatt {
		display: block;
	}

	.bpo-abschnitt {
		display: block;
		break-inside: auto;
	}

	.bpo-rinne {
		text-align: left;
		margin-bottom: 2mm;
	}

	.bpo-ordnungszahl {
		color: #000000;
	}

	.bpo-zelle,
	.bpo-schriftfeld,
	.bpo-tabelle,
	.bpo-schritt,
	.bpo-zeichnung__rahmen,
	.bpo-unterschrift {
		border-color: #000000;
		break-inside: avoid;
	}

	.bpo-tabelle th,
	.bpo-tabelle td {
		border-left-color: #000000;
	}

	.bpo-schriftfeld__zelle {
		border-color: #000000;
	}

	/* Alle Schritte der Entscheidungsstrecke sind im Ausdruck offen.
	   Ein zugeklapptes details waere auf Papier ein Loch. */
	details {
		display: block;
	}

	details > summary {
		list-style: none;
	}

	details:not([open]) > *:not(summary) {
		display: block !important;
	}

	a {
		color: #000000;
		text-decoration: underline;
	}

	/* Ziel in Klammern. Interne Anker und javascript:-Ziele bleiben
	   ausgenommen — "(#abschnitt-3)" auf Papier hilft niemandem. */
	.bpo-inhalt a[href^='http']::after {
		content: ' (' attr(href) ')';
		font-family: 'Plex Mono BauPVO Subset', ui-monospace, monospace;
		font-size: 8.5pt;
		word-break: break-all;
	}

	h1,
	h2,
	h3 {
		break-after: avoid;
	}

	.bpo-revision,
	.bpo-fuss__impressum {
		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;
}