/*
Theme Name: bauphysik.io
Theme URI: https://bauphysik.io/
Author: Zurynski, Oezdogan & Co GmbH
Author URI: https://bauphysik.io/
Description: Klassisches Theme für das Fachmagazin bauphysik.io — Wärmeschutz, Feuchteschutz, Schallschutz, Messtechnik, Regelwerk. Zweispaltiger Heftsatz ohne Navigationsbaum, selbst gehostete Schriften, Zeichnungen als Inline-SVG, kein externer Request zur Laufzeit.
Version: 1.0.0
Requires at least: 6.4
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: bauphysik-io
Tags: two-columns, custom-colors, accessibility-ready, translation-ready, editor-style, threaded-comments
*/

/* ============================================================================
   1. SCHRIFTEN — SELBST GEHOSTET
   ----------------------------------------------------------------------------
   KEIN GOOGLE FONTS, KEIN CDN, KEIN EXTERNER REQUEST. Die Einbindung über
   fonts.googleapis.com überträgt die IP-Adresse jedes Lesers an einen Dritten;
   deutsche Gerichte haben das als Eingriff in das allgemeine Persönlichkeits-
   recht bewertet. Das Ausgabenimpressum sagt dem Leser ausdrücklich zu, dass
   kein Abruf bei Dritten stattfindet — diese Zusage wäre mit einem CDN unwahr.

   DIE DATEIEN LIEGEN NOCH NICHT BEI. Binärdateien lassen sich nicht als Text
   erzeugen; welche zehn WOFF2-Dateien zu subsetten und nach assets/fonts/ zu
   legen sind, steht in der README dieses Themes. Bis dahin greift der
   Fallback-Stack, und der enthält bewusst nur Schriften, die auf dem Gerät
   vorhanden sind: Georgia für den Lesetext, die Systemgroteske für den Apparat.
   Die Seite ist damit vollständig benutzbar, nur nicht in ihrer Schriftsippe.

   FONT-DISPLAY: SWAP. Der Text steht sofort im Fallback und wird ersetzt,
   sobald die Datei da ist. Bei 'block' bliebe die Seite bis zu drei Sekunden
   leer — auf einer Seite, die gelesen und nicht überflogen wird, ist ein
   Schriftwechsel nach 200 ms das kleinere Übel als eine leere Fläche.

   UNICODE-RANGE — DER TEIL, DER OFT SCHIEFGEHT: Der Bereich enthält
   AUSDRÜCKLICH U+0370–03FF. λ, μ, ρ und Θ sind griechische Zeichen, kein
   Latin-Extended. Ein Subset ohne diesen Bereich lässt jedes Formelzeichen
   mitten in der Gleichung auf Georgia fallen — und genau das war der Fehler des
   ersten Entwurfs. Ebenso enthalten: U+202F (schmales geschütztes Leerzeichen
   vor Einheiten), U+2032–2033 (Prime für R′w), U+2212 (echtes Minus, nicht der
   Bindestrich), U+2191 (Rücksprungpfeil) und U+25B2 (Dreieck am überholten
   Regelwerksstand). Fehlt eines davon, steht an dieser Stelle ein Kästchen.

   NAME-TABLE: Die Subsets führen den Zusatz „bauphysik.io Subset“. Literata,
   Zilla Slab, Fira Sans und Fira Mono sind Reserved Font Names; ein Subset ist
   nach OFL 1.1 §3 eine Modified Version und darf den Originalnamen nicht
   führen. Die Familiennamen unten sind deshalb genau die geänderten.
   ========================================================================== */

@font-face {
	font-family: "Literata bauphysik.io Subset";
	src: url("assets/fonts/literata-bauphysik-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2018-201F, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2190-2193, U+2211-2212, U+221A, U+2248, U+2264-2265, U+22C5, U+25B2-25B3, U+202F;
}

@font-face {
	font-family: "Literata bauphysik.io Subset";
	src: url("assets/fonts/literata-bauphysik-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2018-201F, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2190-2193, U+2211-2212, U+221A, U+2248, U+2264-2265, U+22C5, U+25B2-25B3, U+202F;
}

@font-face {
	font-family: "Literata bauphysik.io Subset";
	src: url("assets/fonts/literata-bauphysik-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2018-201F, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2190-2193, U+2211-2212, U+221A, U+2248, U+2264-2265, U+22C5, U+25B2-25B3, U+202F;
}

@font-face {
	font-family: "Zilla Slab bauphysik.io Subset";
	src: url("assets/fonts/zilla-slab-bauphysik-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2018-201F, U+2026, U+2032-2033, U+202F;
}

@font-face {
	font-family: "Zilla Slab bauphysik.io Subset";
	src: url("assets/fonts/zilla-slab-bauphysik-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2018-201F, U+2026, U+2032-2033, U+202F;
}

@font-face {
	font-family: "Fira Sans bauphysik.io Subset";
	src: url("assets/fonts/fira-sans-bauphysik-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2018-201F, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2190-2193, U+2211-2212, U+22C5, U+25B2-25B3, U+202F;
}

@font-face {
	font-family: "Fira Sans bauphysik.io Subset";
	src: url("assets/fonts/fira-sans-bauphysik-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2018-201F, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2190-2193, U+2211-2212, U+22C5, U+25B2-25B3, U+202F;
}

@font-face {
	font-family: "Fira Sans bauphysik.io Subset";
	src: url("assets/fonts/fira-sans-bauphysik-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2018-201F, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2190-2193, U+2211-2212, U+22C5, U+25B2-25B3, U+202F;
}

@font-face {
	font-family: "Fira Mono bauphysik.io Subset";
	src: url("assets/fonts/fira-mono-bauphysik-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2032-2033, U+2212, U+22C5, U+202F;
}

@font-face {
	font-family: "Fira Mono bauphysik.io Subset";
	src: url("assets/fonts/fira-mono-bauphysik-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-017F, U+0370-03FF, U+2010-2015, U+2032-2033, U+2212, U+22C5, U+202F;
}

/* ============================================================================
   2. TOKEN
   ----------------------------------------------------------------------------
   HELLER STANDARD. Der dunkle Modus ist KEINE INVERTIERUNG: Jede Zustands-
   fläche, jede Textfarbe auf einer Akzentfläche, jede Datenlinie, der besuchte
   Verweis und beide Fokusringe haben einen eigenen, eigens gerechneten
   Dunkelwert. Es gibt keinen Token, der im Dunkelmodus ungesetzt bleibt und auf
   den Hellwert zurückfällt — nicht gesetzte Dunkelwerte sind die Ursache für
   Zustandsflächen mit 1,4:1 gegen den Grund.

   NACHGERECHNETE KONTRASTE — HELL (Grund #FAFBFC):
     Lesetext #4C3B6D                 7,25:1  (AAA)
     Sekundärtext #565758             5,38:1
     Akzent #653BB0                   5,56:1  — Verweise zusätzlich unterstrichen
     #FFFFFF auf Akzentfläche         7,49:1
     #FFFFFF auf Primärknopf #4C3B6D  9,75:1
     Rahmen #6B6C74 auf Grund         3,88:1  — Anforderung 3:1 für Nicht-Text
     Rahmen #6B6C74 auf Anzeigenfl.   3,49:1
     Datenlinie 2 #2F2C3A            10,12:1  Datenlinie 3 #767781  3,30:1
     Besuchter Verweis #4A4658        6,77:1
     Haarlinie #C4C5CB                1,28:1  — unter 3:1, deshalb AUSSCHLIESSLICH
                                      Zeilentrennung in Tabellen, nie Gliederung
     Anzeigenfläche #F3F5F7           1,11:1  — trägt messbar nichts, siehe unten

   NACHGERECHNETE KONTRASTE — DUNKEL (Grund #2D2938):
     Lesetext #BAB4C3                 7,00:1
     Sekundärtext #A299B1             5,20:1
     Akzent #AB88E9                   5,00:1
     #17131F auf Akzentfläche         6,47:1  — Weiß läge hier bei 1,25:1
     #2D2938 auf Primärknopf #BAB4C3  7,00:1
     Rahmen #8F8898 auf Grund         4,13:1  auf Anzeigenfläche  3,56:1
     Datenlinie 2 #D9D3E2             9,67:1  Datenlinie 3 #8B8496  3,93:1
     Besuchter Verweis #C9C0D9        8,09:1
     Haarlinie #454052                1,42:1  Anzeigenfläche #383345  1,16:1

   SC 1.4.1 — DIE SEMANTISCH GETRENNTEN FARBEN LIEGEN IN GRAUSTUFEN DICHT
   BEIEINANDER: Akzent gegen Datenlinie 2 = 1,82:1, gegen Datenlinie 3 = 1,67:1,
   besuchter Verweis gegen Akzent = 1,22:1. Farbe ist deshalb NIRGENDS
   alleiniges Merkmal. Kurven tragen zusätzlich Strichart, Markerform und
   Direktbeschriftung; die laufende Rubrik zusätzlich aria-current und das Wort
   „Rubrik:“; gelesene Einträge zusätzlich das Wort „gelesen“; ein überholter
   Regelwerksstand zusätzlich das Wort „Überholt —“ und ein Dreieck.
   ========================================================================== */

:root {
	color-scheme: light dark;

	/* Farbe — hell */
	--bpio-grund: #FAFBFC;
	--bpio-text: #4C3B6D;
	--bpio-sekundaer: #565758;
	--bpio-akzent: #653BB0;
	--bpio-auf-akzent: #FFFFFF;
	--bpio-knopf: #4C3B6D;
	--bpio-auf-knopf: #FFFFFF;
	--bpio-rahmen: #6B6C74;
	--bpio-haarlinie: #C4C5CB;
	--bpio-anzeigenflaeche: #F3F5F7;
	--bpio-besucht: #4A4658;
	--bpio-linie-1: #653BB0;
	--bpio-linie-2: #2F2C3A;
	--bpio-linie-3: #767781;
	--bpio-achse: #565758;
	--bpio-fokus-innen: #FFFFFF;
	--bpio-fokus-aussen: #1F1533;

	/* Schrift */
	--bpio-lesetext: "Literata bauphysik.io Subset", Georgia, "Liberation Serif", serif;
	--bpio-titel: "Zilla Slab bauphysik.io Subset", Georgia, "Liberation Serif", serif;
	--bpio-apparat: "Fira Sans bauphysik.io Subset", "Segoe UI", "Liberation Sans", system-ui, sans-serif;
	--bpio-ziffern: "Fira Mono bauphysik.io Subset", ui-monospace, Consolas, monospace;

	/* Maß — Satzspiegel 1120 px, Spalte 34 rem, Steg 32 px, Außenrand 56 px */
	--bpio-satzspiegel: 1120px;
	--bpio-spalte: 34rem;
	--bpio-steg: 32px;
	--bpio-rand: 56px;

	/* Vertikalraster 8 px; alle Abstände sind Vielfache davon */
	--bpio-raster: 8px;
	--bpio-grundlinie: 1.8rem;
}

/*
 * Der Dunkelmodus folgt zuerst der Systemeinstellung — aber nur, solange der
 * Leser nichts anderes gewählt hat. :not([data-theme="light"]) sorgt dafür,
 * dass der Knopf im Heftkopf AUCH GEGEN ein dunkel gestelltes System auf hell
 * schalten kann. Ohne diese Ausnahme gewänne die Systemeinstellung immer, und
 * der Knopf wirkte in genau einer Richtung.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bpio-grund: #2D2938;
		--bpio-text: #BAB4C3;
		--bpio-sekundaer: #A299B1;
		--bpio-akzent: #AB88E9;
		--bpio-auf-akzent: #17131F;
		--bpio-knopf: #BAB4C3;
		--bpio-auf-knopf: #2D2938;
		--bpio-rahmen: #8F8898;
		--bpio-haarlinie: #454052;
		--bpio-anzeigenflaeche: #383345;
		--bpio-besucht: #C9C0D9;
		--bpio-linie-1: #AB88E9;
		--bpio-linie-2: #D9D3E2;
		--bpio-linie-3: #8B8496;
		--bpio-achse: #A299B1;
		--bpio-fokus-innen: #17131F;
		--bpio-fokus-aussen: #EDE9F2;
	}
}

/* Die ausdrückliche Wahl gewinnt in BEIDEN Richtungen. */
:root[data-theme="dark"] {
	--bpio-grund: #2D2938;
	--bpio-text: #BAB4C3;
	--bpio-sekundaer: #A299B1;
	--bpio-akzent: #AB88E9;
	--bpio-auf-akzent: #17131F;
	--bpio-knopf: #BAB4C3;
	--bpio-auf-knopf: #2D2938;
	--bpio-rahmen: #8F8898;
	--bpio-haarlinie: #454052;
	--bpio-anzeigenflaeche: #383345;
	--bpio-besucht: #C9C0D9;
	--bpio-linie-1: #AB88E9;
	--bpio-linie-2: #D9D3E2;
	--bpio-linie-3: #8B8496;
	--bpio-achse: #A299B1;
	--bpio-fokus-innen: #17131F;
	--bpio-fokus-aussen: #EDE9F2;
}

:root[data-theme="light"] {
	--bpio-grund: #FAFBFC;
	--bpio-text: #4C3B6D;
	--bpio-sekundaer: #565758;
	--bpio-akzent: #653BB0;
	--bpio-auf-akzent: #FFFFFF;
	--bpio-knopf: #4C3B6D;
	--bpio-auf-knopf: #FFFFFF;
	--bpio-rahmen: #6B6C74;
	--bpio-haarlinie: #C4C5CB;
	--bpio-anzeigenflaeche: #F3F5F7;
	--bpio-besucht: #4A4658;
	--bpio-linie-1: #653BB0;
	--bpio-linie-2: #2F2C3A;
	--bpio-linie-3: #767781;
	--bpio-achse: #565758;
	--bpio-fokus-innen: #FFFFFF;
	--bpio-fokus-aussen: #1F1533;
}

/* ============================================================================
   3. GRUNDLAGE
   ========================================================================== */

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

html {
	font-size: 100%;

	/*
	 * clip statt hidden: Randabfallende Abbildungen laufen über die volle
	 * Fensterbreite und ragen um die Breite der Bildlaufleiste über den
	 * Seitenkörper hinaus. hidden erzeugt einen eigenen Scrollbereich und
	 * bricht damit position: sticky; clip nicht. Der ältere Wert steht davor
	 * als Rückfall.
	 */
	overflow-x: hidden;
	overflow-x: clip;

	/* Sprungmarken landen 24 px unter der Fensterkante. Weil auf dieser Seite
	   NICHTS klebt, ist das reine Luft und keine Ausgleichsrechnung für eine
	   Kopfleiste. */
	scroll-padding-top: 24px;
}

body {
	margin: 0;
	background: var(--bpio-grund);
	color: var(--bpio-text);
	font-family: var(--bpio-lesetext);
	font-size: 1.125rem;   /* 18 px */
	line-height: 1.6;      /* 28,8 px Grundlinienabstand */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-synthesis-weight: none;
}

/*
 * DEUTSCHER FACHSATZ. Bei 58 Zeichen je Spalte ist die Silbentrennung keine
 * Feinheit: „Wasserdampf-Diffusionswiderstandszahl“ reißt ohne sie ein Loch
 * über die halbe Spaltenbreite. 6 3 3 heißt: erst ab sechs Zeichen trennen,
 * mindestens drei davor, mindestens drei danach — darunter werden deutsche
 * Wörter unleserlich getrennt.
 */
.bpio-prosa,
.bpio-vorspann,
.bpio-eintrag__anriss,
.bpio-einordnung__text,
.bpio-abb__legende,
.bpio-normspiegel__liste dd {
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
	orphans: 3;
	widows: 3;
}

/* DoP- und CELEX-Kennungen sind lange Zeichenfolgen ohne Trennstelle. Ohne
   diese Regel schieben sie eine 34-rem-Spalte auseinander. */
.bpio-prosa,
.bpio-normspiegel__liste dd,
.bpio-fussnoten {
	overflow-wrap: break-word;
}

/* Normbezeichnungen und Kennwert-Chips. Gesetzt wird die Klasse von
   inc/fachsatz.php und von den Bausteinen. */
.bpio-nowrap {
	white-space: nowrap;
}

.bpio-ziffern {
	font-family: var(--bpio-ziffern);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

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

/* FOTOS LAUFEN IN GRAUSTUFEN. Die einzige Farbmarkierung im Bild ist der
   Akzent für die im Text besprochene Stelle, und der wird im SVG gesetzt, nicht
   im Foto. Kein Radius, kein Schatten, kein Filter darüber hinaus. */
.bpio-aufmacher__bild img,
.bpio-eintrag__bild img {
	filter: grayscale(1);
	border-radius: 0;
	box-shadow: none;
}

a {
	color: var(--bpio-akzent);

	/* Verweise sind IMMER unterstrichen. Farbe trägt hier nichts allein
	   (SC 1.4.1), und der Akzent liegt gegen den Lesetext bei nur 1,30:1 —
	   ohne Unterstreichung wäre ein Verweis im Fließtext nicht auffindbar. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

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

/* Besuchte Einträge NUR in Rubrikstrecke und Archiv. Im Fließtext eines
   Beitrags wäre ein zweifarbiges Verweissystem eine Unterscheidung, die der
   Text nicht meint. */
.bpio-eintrag__titel a:visited,
.bpio-strecke a:visited {
	color: var(--bpio-besucht);
}

/* ---------------------------------------------------------------------------
   FOKUS — eigener Token, von jeder anderen Rolle getrennt
   ---------------------------------------------------------------------------
   ZWEIFARBIG, WEIL EINFARBIG RECHNERISCH NICHT GEHT. Gegen den hellen Grund
   #FAFBFC (Relativluminanz 0,7305) verlangt 3:1 eine Luminanz von höchstens
   0,2102; gegen die aktive Akzentfläche #653BB0 (0,0903) verlangt 3:1
   mindestens 0,3708. Die beiden Intervalle überschneiden sich nicht — KEIN
   einzelner Farbwert erfüllt beide Zustände. Der Doppelring löst das, weil
   immer mindestens einer der beiden Ringe die 3:1 hält.

   Gerechnet, hell: gegen den Grund trägt der äußere Ring #1F1533 mit 12,86:1;
   gegen die Akzentfläche trägt der innere Ring #FFFFFF mit 7,49:1; gegen den
   Primärknopf #4C3B6D trägt der innere Ring mit 9,75:1. Die Ringe stehen
   zueinander bei 17,31:1 und verschmelzen deshalb nie.
   Dunkel: gegen den Grund trägt der äußere Ring #EDE9F2 mit 11,80:1; gegen die
   Akzentfläche #AB88E9 der innere Ring #17131F mit 6,47:1; gegen den
   Primärknopf #BAB4C3 der innere Ring mit 9,05:1. Ringe zueinander 15,26:1.
   Minimum über alle Zustände: hell 7,49:1, dunkel 6,47:1 — beide über 3:1,
   SC 2.4.11 und SC 2.4.13 sind in jedem Zustand und in beiden Modi erfüllt.

   Der Akzent ist AUSDRÜCKLICH KEIN Fokuswert. Im ersten Entwurf trugen Ring
   und aktive Fläche dieselbe Farbe — 1,00:1, der Fokus verschwand genau dort,
   wo er gebraucht wird.

   :focus-visible statt :focus, damit ein Mausklick auf einen Knopf keinen Ring
   hinterlässt; der Rückfall auf :focus steht darunter für Browser ohne
   :focus-visible.
   --------------------------------------------------------------------------- */

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

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

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

/* Sprungziele. 24 px Luft, damit die erste Zeile nicht an der Fensterkante
   klebt — nicht als Ausgleich für eine Kopfleiste, es gibt keine. */
[id] {
	scroll-margin-top: 24px;
}

/* Nur für Vorleseprogramme. NICHT display:none — ein so ausgeblendetes Element
   wird gar nicht vorgelesen und könnte keinen Fokus bekommen. */
.bpio-vorlese {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Die Sprungmarke: aus dem Sichtfeld geschoben, bei Fokus zurück. */
.bpio-sprungmarke {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10;
	background: var(--bpio-knopf);
	color: var(--bpio-auf-knopf);
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	padding: 16px 24px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.bpio-sprungmarke:focus {
	left: 16px;
	top: 16px;
}

/* ============================================================================
   4. SATZSPIEGEL
   ----------------------------------------------------------------------------
   1120 px Inhaltsbreite, ab 1264 px Fensterbreite 56 px Außenrand, im Fenster
   zentriert. 12 Spalten à 64 px mit 32 px Steg ergeben genau diese 1120 px;
   das Raster steht damit hinter jedem Maß der Seite, ohne dass es gezeichnet
   werden müsste.
   ========================================================================== */

.bpio-satzspiegel {
	max-width: calc(var(--bpio-satzspiegel) + 2 * var(--bpio-rand));
	margin-inline: auto;
	padding-inline: var(--bpio-rand);
}

/* ============================================================================
   5. HEFTKOPF
   ----------------------------------------------------------------------------
   NICHT KLEBEND, KEINE LINIE DARUNTER, 64 px Weißraum bis zum Aufmacher.
   ========================================================================== */

.bpio-heftkopf {
	padding-top: 32px;
	padding-bottom: 64px;
}

.bpio-heftkopf__innen {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"marke suche"
		"rubriken rubriken";
	gap: 24px var(--bpio-steg);
	align-items: start;
}

.bpio-heftkopf__marke {
	grid-area: marke;
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.bpio-wortmarke {
	font-family: var(--bpio-titel);
	font-weight: 700;
	font-size: 1.5rem;   /* 24 px */
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--bpio-text);
	text-decoration: none;

	/* Zielgröße nach SC 2.5.8. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.bpio-heftkopf__ausgabe {
	margin: 0;
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;
	line-height: 1.53;
	color: var(--bpio-sekundaer);
}

/* --- Die fünf Rubriken ---------------------------------------------------- */

.bpio-rubriken {
	grid-area: rubriken;
}

.bpio-rubriken ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;

	/* 12 px Abstand zwischen den Zielflächen — SC 2.5.8 verlangt entweder
	   44 × 44 px oder 24 × 24 px mit ausreichendem Abstand. Hier gilt beides. */
	gap: 12px;
}

.bpio-rubrik {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;   /* 15 px */
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-akzent);
	text-decoration: none;
}

.bpio-rubrik:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/*
 * Die laufende Rubrik. Die Fläche ist EINES von drei Merkmalen — daneben
 * stehen aria-current="page" und das nur vorgelesene Wort „Rubrik:“. Die
 * Fläche allein entscheidet nichts.
 */
.bpio-rubrik--aktuell {
	background: var(--bpio-akzent);
	color: var(--bpio-auf-akzent);
}

.bpio-rubrik--aktuell:hover {
	text-decoration-color: var(--bpio-auf-akzent);
}

/* --- Suche und Darstellungswechsel ---------------------------------------- */

.bpio-heftkopf__suche {
	grid-area: suche;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.bpio-suche {
	display: flex;
	gap: 0;
}

.bpio-suche__feld {
	min-height: 56px;
	min-width: 14rem;
	padding: 8px 16px;
	font-family: var(--bpio-apparat);
	font-size: 1rem;
	color: var(--bpio-text);
	background: transparent;

	/* 2 px Rahmen, nicht 1 px: Ein 1-px-Rahmen in #6B6C74 ist bei 3,88:1 zwar
	   über der Anforderung, aber auf einem Bildschirm mit 1,5-facher
	   Gerätepixeldichte optisch ein Grauschleier. */
	border: 2px solid var(--bpio-rahmen);
	border-right: none;
	border-radius: 0;
}

.bpio-suche__feld::placeholder {
	color: var(--bpio-sekundaer);
	opacity: 1;
}

.bpio-suche__knopf,
.bpio-darstellung {
	min-height: 56px;
	min-width: 44px;
	padding: 8px 20px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;
	background: var(--bpio-knopf);
	color: var(--bpio-auf-knopf);
	border: 2px solid var(--bpio-knopf);
	border-radius: 0;
	cursor: pointer;
}

.bpio-darstellung {
	background: transparent;
	color: var(--bpio-akzent);
	border-color: var(--bpio-rahmen);

	/*
	 * Ohne Skript wirkt der Knopf nicht; ein wirkungsloser Knopf ist schlechter
	 * als keiner. html.bpio-js setzt der Inline-Block in header.php.
	 */
	display: none;
}

.bpio-js .bpio-darstellung {
	display: inline-flex;
	align-items: center;
}

/* ============================================================================
   6. AUFMACHER
   ========================================================================== */

.bpio-aufmacher {
	margin-bottom: 48px;
}

/*
 * RANDABFALLEND über die volle Fensterbreite. Die Abbildung ist neben dem
 * Weißraum das einzige Gliederungsmittel der Seite und darf als einziges
 * Element aus dem Satzspiegel heraustreten.
 */
.bpio-aufmacher__bild {
	margin: 0 0 32px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.bpio-aufmacher__bild img {
	width: 100%;

	/* min-height, nie height: Bei 200 % Zoom und schmalem Fenster darf das Bild
	   flach werden, aber nicht verschwinden. */
	min-height: 200px;
	object-fit: cover;
}

.bpio-aufmacher__bildfuss {
	margin-top: 12px;
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;
	line-height: 1.47;
	color: var(--bpio-sekundaer);
	max-width: none;
}

.bpio-dachzeile {
	margin: 0 0 12px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;   /* 15 px */
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-sekundaer);
}

.bpio-schlagzeile {
	margin: 0 0 24px;
	font-family: var(--bpio-titel);
	font-weight: 700;
	font-size: 2.75rem;    /* 44 px */
	line-height: 1.1;      /* 48,4 px */
	letter-spacing: -0.015em;
	color: var(--bpio-text);
	max-width: var(--bpio-satzspiegel);
}

.bpio-schlagzeile a {
	color: inherit;
	text-decoration: none;
}

.bpio-schlagzeile a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.08em;
}

/*
 * Der Vorspann steht auf 544 px in der LINKEN Spaltenachse, nicht mittig unter
 * der Schlagzeile: Dort beginnt gleich darauf der zweispaltige Satz, und das
 * Auge findet den Einstieg ohne Sprung.
 */
.bpio-vorspann {
	margin: 0 0 24px;
	max-width: var(--bpio-spalte);
	font-size: 1.3125rem;   /* 21 px */
	line-height: 1.524;     /* 32 px */
	color: var(--bpio-text);
}

.bpio-beitragszeile {
	margin: 0;
	font-family: var(--bpio-apparat);
	font-size: 0.875rem;    /* 14 px */
	line-height: 1.43;
	color: var(--bpio-sekundaer);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* ============================================================================
   7. DER ZWEISPALTIGE SATZ
   ----------------------------------------------------------------------------
   Zwei Spalten à 544 px mit 32 px Steg — 34 rem je Spalte, rund 58 Zeichen bei
   18 px Literata. Der Deckel von 34 rem gilt in JEDEM Band und für JEDEN
   Prosablock, nicht nur je Spalte.

   KEIN ABSATZABSTAND, stattdessen 1,1 em Einzug ab dem zweiten Absatz. Das ist
   die klassische Lösung des Heftsatzes: Ein Abstand zwischen Absätzen kostet
   in einer 22-zeiligen Spalte zwei Zeilen je Absatz, ein Einzug keine.
   ========================================================================== */

.bpio-satz {
	columns: 2;
	column-gap: var(--bpio-steg);
	column-fill: balance;
}

.bpio-prosa p {
	margin: 0;
}

.bpio-prosa p + p {
	text-indent: 1.1em;
}

/*
 * SPALTENÜBERGREIFENDE ELEMENTE. Sie sind das Mittel, mit dem ein Satzblock
 * aufgebrochen wird — nach höchstens rund 22 Zeilen je Spalte muss eines davon
 * kommen, sonst wird der Rückweg des Auges vom Fuß der rechten zum Kopf der
 * linken Spalte länger als eine Bildschirmhöhe, und der zweispaltige Satz
 * bricht als Lesbarkeitsmodell zusammen.
 *
 * 48 px Abstand oben und unten, beim Einordnungskasten 56 px.
 */
.bpio-satz h2,
.bpio-satz figure,
.bpio-satz table,
.bpio-satz .bpio-abb,
.bpio-satz .bpio-datenblock,
.bpio-satz .bpio-formel,
.bpio-satz .bpio-normspiegel,
.bpio-satz .bpio-einordnung,
.bpio-satz .bpio-tabelle-rollen,
.bpio-satz .wp-block-table {
	column-span: all;
}

/* Nichts von alledem darf mitten in einer Spalte auseinandergerissen werden. */
.bpio-abb,
.bpio-datenblock,
.bpio-formel,
.bpio-normspiegel,
.bpio-einordnung,
.bpio-prosa figure,
.bpio-prosa table,
.bpio-prosa blockquote {
	break-inside: avoid;
}

/* --- Überschriften im Satz ------------------------------------------------ */

.bpio-prosa h2 {
	margin: 48px 0 16px;
	font-family: var(--bpio-titel);
	font-weight: 600;
	font-size: 1.625rem;   /* 26 px */
	line-height: 1.23;     /* 32 px */
	color: var(--bpio-text);
	max-width: var(--bpio-spalte);
}

/* Die erste Überschrift eines Satzblocks braucht den Abstand nach oben nicht —
   der Vorspann hat ihn schon gesetzt. */
.bpio-prosa > h2:first-child {
	margin-top: 0;
}

.bpio-prosa h3 {
	margin: 24px 0 8px;
	font-family: var(--bpio-titel);
	font-weight: 600;
	font-size: 1.1875rem;  /* 19 px */
	line-height: 1.32;     /* 25 px */
	color: var(--bpio-text);
	break-after: avoid;
}

/*
 * H4 läuft in der Lesetextschrift und MIT PUNKT IM ANLAUF — sie steht in
 * derselben Zeile wie der Text, den sie ankündigt. Das ist die vierte Ebene
 * eines Fachtextes; eine eigene Zeile dafür wäre in einer 22-zeiligen Spalte
 * verschwendet.
 */
.bpio-prosa h4 {
	margin: 16px 0 0;
	font-family: var(--bpio-lesetext);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.6;
	display: inline;
	break-after: avoid;
}

.bpio-prosa h4::after {
	content: ". ";
}

.bpio-prosa h4 + p {
	display: inline;
	text-indent: 0;
}

/* --- Listen, Zitate, Hervorhebungen --------------------------------------- */

.bpio-prosa ul,
.bpio-prosa ol {
	margin: 16px 0;
	padding-left: 1.4em;
}

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

/*
 * Zitat: Literata Kursiv 20/30. KEIN Rahmen, KEINE Linie links, KEINE Fläche —
 * die 3-px-Linie am linken Rand gehört einer anderen Seite des Netzes, und auf
 * dieser ist außer der Anzeige nichts gerahmt und nichts gefüllt. Getragen wird
 * das Zitat durch Kursive, größeren Grad und den Einzug.
 */
.bpio-prosa blockquote {
	margin: 24px 0;
	padding: 0 0 0 1.6em;
	font-style: italic;
	font-size: 1.25rem;    /* 20 px */
	line-height: 1.5;      /* 30 px */
	max-width: var(--bpio-spalte);
	border: 0;
}

.bpio-prosa blockquote p + p {
	text-indent: 0;
	margin-top: 12px;
}

/* Formelzeichen im Fließtext: kursiv, Einheiten aufrecht. */
.bpio-prosa var,
.bpio-prosa i:not(.bpio-aufrecht) {
	font-style: italic;
}

/* Fußnotenanker aus inc/fachsatz.php. Zielfläche mindestens 24 × 24 px
   (SC 2.5.8, Ausnahme für Anker im Fließtext). */
.bpio-fnref {
	font-size: 0.7em;
	line-height: 0;
	vertical-align: super;
}

.bpio-fnref a {
	display: inline-block;
	min-width: 24px;
	min-height: 24px;
	padding: 0 6px;
	text-align: center;
	text-decoration: none;
	font-family: var(--bpio-apparat);
	font-weight: 600;
}

.bpio-fnref a:hover {
	text-decoration: underline;
}

/* Einspaltiger Satz für statische Seiten und die Fehlerseite. */
.bpio-prosa--einspaltig {
	max-width: var(--bpio-spalte);
}

/* ============================================================================
   8. ABBILDUNG
   ========================================================================== */

.bpio-abb {
	margin: 48px 0;
}

.bpio-abb--randabfallend {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Die Legende bleibt auch bei randabfallender Abbildung im Satzspiegel — sie
   ist Text und unterliegt demselben Zeilenlängendeckel wie jeder andere. */
.bpio-abb--randabfallend .bpio-abb__fuss {
	max-width: calc(var(--bpio-satzspiegel) + 2 * var(--bpio-rand));
	margin-inline: auto;
	padding-inline: var(--bpio-rand);
}

.bpio-abb__fuss {
	margin-top: 12px;
}

.bpio-abb__legende {
	margin: 0;
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;   /* 15 px */
	line-height: 1.47;      /* 22 px */
	color: var(--bpio-text);
	max-width: var(--bpio-spalte);
}

.bpio-abb__nr {
	font-weight: 700;
	white-space: nowrap;
}

.bpio-abb__quelle {
	margin: 4px 0 0;
	font-family: var(--bpio-apparat);
	font-size: 0.875rem;    /* 14 px */
	line-height: 1.43;      /* 20 px */
	color: var(--bpio-sekundaer);
	display: block;
	max-width: var(--bpio-spalte);
}

/* ============================================================================
   9. NORMSPIEGEL
   ----------------------------------------------------------------------------
   OHNE RAHMEN, OHNE FLÄCHE, OHNE LINIE. Abgesetzt allein durch 48 px Weißraum.
   ========================================================================== */

.bpio-normspiegel {
	margin: 48px 0;
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;   /* 15 px */
	line-height: 1.533;     /* 23 px */
}

.bpio-normspiegel__titel {
	margin: 0 0 12px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-sekundaer);
}

.bpio-normspiegel__liste {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(10rem, 16rem) 1fr;
	gap: 8px var(--bpio-steg);
}

.bpio-normspiegel__liste dt {
	font-weight: 600;
	color: var(--bpio-text);
}

.bpio-normspiegel__liste dd {
	margin: 0;
	color: var(--bpio-sekundaer);
	max-width: var(--bpio-spalte);
}

/* ============================================================================
   10. FORMELBLOCK
   ========================================================================== */

.bpio-formel {
	margin: 48px 0;
}

.bpio-formel__satz {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 64px;
}

.bpio-formel math {
	font-family: var(--bpio-lesetext);
	font-size: 1.25rem;
}

.bpio-formel__nr {
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;
	color: var(--bpio-sekundaer);

	/* Die Gleichungsnummer steht rechts. margin-left:auto in einem zentrierten
	   Flexbehälter würde die Gleichung nach links schieben; sie behält deshalb
	   eine feste Mindestbreite und der Satz bleibt optisch mittig. */
	min-width: 3rem;
	text-align: right;
}

.bpio-formel__klartext {
	margin: 16px auto 0;
	max-width: var(--bpio-spalte);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bpio-text);
}

.bpio-zeichenlegende {
	margin: 16px auto 0;
	max-width: var(--bpio-satzspiegel);
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;
	line-height: 1.4;
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 8px var(--bpio-steg);
}

.bpio-zeichenlegende dt {
	font-size: 1.0625rem;
	color: var(--bpio-text);
}

.bpio-zeichenlegende dd {
	margin: 0;
	color: var(--bpio-sekundaer);
}

.bpio-zeichenlegende__einheit {
	white-space: nowrap;
}

.bpio-formel__norm {
	margin: 12px 0 0;
	font-family: var(--bpio-apparat);
	font-size: 0.875rem;
	color: var(--bpio-sekundaer);
}

/* ============================================================================
   11. KENNWERTTABELLE
   ----------------------------------------------------------------------------
   Der EINZIGE Ort im Heft, an dem eine Linie erlaubt ist — und auch dort ist
   sie ausdrücklich dekorativ (1,28:1 hell, 1,42:1 dunkel). Keine senkrechten
   Spaltenlinien, kein Zebra, keine Rahmenzellen.
   ========================================================================== */

.bpio-datenblock {
	margin: 48px 0;
}

/*
 * Der waagerecht scrollende Behälter. tabindex, role und Beschriftung stehen
 * im Markup; hier steht nur, dass er scrollt — und der Schattenrand, der
 * anzeigt, DASS er scrollt. Er ist der einzige Schatten der Seite und tragt
 * eine Funktion, keine Zierde.
 */
.bpio-tabelle-rollen {
	overflow-x: auto;
	max-width: 100%;
	background:
		linear-gradient(to right, var(--bpio-grund) 30%, transparent) left / 40px 100% no-repeat,
		linear-gradient(to left, var(--bpio-grund) 30%, transparent) right / 40px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.22), transparent) left / 14px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.22), transparent) right / 14px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

.bpio-kennwerte {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;   /* 15 px */
	line-height: 1.4;       /* 21 px */
}

.bpio-kennwerte caption {
	text-align: left;
	font-weight: 600;
	color: var(--bpio-text);
	padding-bottom: 12px;
}

.bpio-kennwerte th,
.bpio-kennwerte td {
	/* min-height statt height: „Werkseigene Produktionskontrolle“ muss in der
	   Zeilenkopfspalte zweizeilig umbrechen dürfen, ohne dass die Tabelle
	   bricht — und bei 200 % Zoom gilt das für jede Zelle. */
	min-height: 40px;
	padding: 8px 16px 8px 0;
	text-align: left;
	vertical-align: baseline;
}

.bpio-kennwerte thead th {
	font-weight: 600;
	font-size: 0.875rem;    /* 14 px */
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bpio-text);
	white-space: nowrap;

	/* 2-px-Unterstreichung im Akzent — die einzige Linie der Tabelle, die etwas
	   trägt: Sie trennt Kopf von Körper. 5,56:1 gegen den Grund. */
	border-bottom: 2px solid var(--bpio-akzent);
}

.bpio-kennwerte tbody th,
.bpio-kennwerte tbody td {
	/* Dekorative Haarlinie. Sie trennt Zeilen und sonst nichts. */
	border-bottom: 1px solid var(--bpio-haarlinie);
}

.bpio-kennwerte tbody th {
	font-weight: 400;
	color: var(--bpio-text);
}

/*
 * ZAHLEN. Fira Mono mit Tabellenziffern, rechtsbündig — erst dadurch stehen
 * die Ziffern übereinander, und erst dann fällt ein Größenunterschied ins Auge,
 * ohne dass man liest. Das ist der ganze Zweck einer Kennwerttabelle.
 */
.bpio-zahl,
.bpio-zahlspalte {
	font-family: var(--bpio-ziffern);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	text-align: right;
	white-space: nowrap;
}

.bpio-kennwerte thead .bpio-zahlspalte {
	font-family: var(--bpio-apparat);
}

.bpio-datenblock__quelle {
	margin: 8px 0 0;
	font-family: var(--bpio-apparat);
	font-size: 0.875rem;
	line-height: 1.43;
	color: var(--bpio-sekundaer);
}

/* ============================================================================
   12. EINORDNUNGSKASTEN
   ----------------------------------------------------------------------------
   Kein Kasten. Getragen durch 56 px Weißraum und den engeren Satz.
   ========================================================================== */

.bpio-einordnung {
	margin: 56px auto;
	max-width: var(--bpio-spalte);
}

.bpio-einordnung__kicker {
	margin: 0 0 12px;
	font-family: var(--bpio-titel);
	font-weight: 600;
	font-size: 1.1875rem;   /* 19 px */
	line-height: 1.32;
	color: var(--bpio-text);
}

.bpio-einordnung__text p {
	margin: 0;
}

.bpio-einordnung__text p + p {
	text-indent: 1.1em;
}

.bpio-einordnung__hinaus {
	margin: 12px 0 0;
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;
	line-height: 1.53;
	color: var(--bpio-sekundaer);
}

/* ============================================================================
   13. QUELLENAPPARAT
   ========================================================================== */

.bpio-apparat {
	margin: 48px 0 0;
}

.bpio-apparat__titel {
	margin: 0 0 16px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-sekundaer);
}

.bpio-fussnoten {
	margin: 0;
	padding-left: 1.6em;
	font-family: var(--bpio-apparat);
	font-size: 0.875rem;    /* 14 px */
	line-height: 1.5;       /* 21 px */
	color: var(--bpio-sekundaer);

	/* Tabellenziffern in der Nummerierung, damit zweistellige Fußnoten die
	   Textkante nicht verschieben. */
	font-variant-numeric: tabular-nums;
}

.bpio-fussnoten li {
	margin-bottom: 8px;
	max-width: var(--bpio-spalte);
}

.bpio-ruecksprung {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	margin-left: 4px;
	text-decoration: none;
	font-size: 1rem;
	line-height: 1;
}

.bpio-ruecksprung:hover {
	text-decoration: underline;
}

.bpio-stand {
	margin: 24px 0 0;
	font-family: var(--bpio-apparat);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--bpio-sekundaer);
}

/*
 * ÜBERHOLT: Wort und Dreieck tragen, nicht Farbe. Der Block bekommt deshalb
 * KEINE eigene Farbe — er bekommt Fettung und das Symbol. Eine rote Fläche
 * hier wäre genau der Verstoß gegen SC 1.4.1, den die Redundanz vermeidet.
 */
.bpio-stand--ueberholt {
	font-weight: 600;
	color: var(--bpio-text);
}

.bpio-stand__symbol {
	margin-right: 6px;
}

/* ============================================================================
   14. RUBRIKSTRECKE UND ARCHIV
   ----------------------------------------------------------------------------
   Keine Kacheln, keine Rahmen, keine Trennlinien. 56 px Weißraum zwischen den
   Einträgen; das Standbild links ist das Trennmittel.
   ========================================================================== */

.bpio-strecke__titel,
.bpio-weiterlesen__titel {
	margin: 0 0 32px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-sekundaer);
}

.bpio-eintrag {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--bpio-steg);
	align-items: start;
	margin-bottom: 56px;
}

/*
 * Der Bildplatz bleibt AUCH OHNE BILD reserviert. Sonst rutschte ein einzelner
 * Eintrag ohne Standbild aus der Flucht und läse sich als Hervorhebung — auf
 * einer Seite ohne jede andere Hervorhebung ein starkes Signal, das niemand
 * gemeint hat.
 */
.bpio-eintrag__bild {
	width: 160px;
	min-height: 112px;
}

.bpio-eintrag__bild img {
	width: 160px;
	height: 112px;
	object-fit: cover;
}

.bpio-eintrag__kopf {
	margin: 0 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: baseline;
	font-size: 0.875rem;
	line-height: 1.43;
	color: var(--bpio-sekundaer);
}

.bpio-eintrag__kopf time {
	font-family: var(--bpio-ziffern);
	font-variant-numeric: tabular-nums;
}

.bpio-eintrag__rubrik {
	font-family: var(--bpio-apparat);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bpio-eintrag__titel {
	margin: 0 0 8px;
	font-family: var(--bpio-titel);
	font-weight: 600;
	font-size: 1.375rem;   /* 22 px */
	line-height: 1.27;
	max-width: var(--bpio-spalte);
}

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

/* Der Vermerk „gelesen“ — von heft.js eingeblendet, siehe dort. */
.bpio-eintrag__gelesen {
	display: inline-block;
	margin-left: 8px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-sekundaer);
	vertical-align: middle;
}

.bpio-eintrag--gelesen .bpio-eintrag__titel a {
	color: var(--bpio-besucht);
}

.bpio-eintrag__anriss {
	margin: 0;
	font-size: 1.0625rem;   /* 17 px */
	line-height: 1.53;
	max-width: var(--bpio-spalte);
	color: var(--bpio-text);
}

/* ============================================================================
   15. ANZEIGENBLOCK
   ----------------------------------------------------------------------------
   DER EINZIGE BAUSTEIN DER SEITE MIT RAHMEN UND FLÄCHE — und er wirkt genau
   deshalb: Kein redaktioneller Baustein hat je eine Umrandung oder eine
   Flächenfarbe, gegliedert wird ausschließlich mit Weißraum und Bild.

   TRAGEND SIND ZWEI MITTEL: der durchgezogene 2-px-Rahmen (3,88:1 hell gegen
   den Grund, 4,13:1 dunkel) und das Wort „ANZEIGE“ in 14 px. NICHT tragend ist
   der Flächenton — 1,11:1 hell, 1,16:1 dunkel, in Graustufen praktisch nicht
   wahrnehmbar. Er wird deshalb nicht als Trennsignal behauptet.

   VERBOTEN und hier durchgesetzt: keine Literata, keine Zilla Slab (der ganze
   Block läuft in Fira Sans), keine Abbildungsnummer, keine Legenden- und keine
   Quellenzeile — die auffälligste redaktionelle Bildsprache der Seite darf
   nicht imitiert werden.
   ========================================================================== */

.bpio-anzeige {
	/* 64 px Außenabstand oben und unten, 32 px Innenabstand. */
	margin: 64px 0;
	padding: var(--bpio-steg);
	border: 2px solid var(--bpio-rahmen);
	background: var(--bpio-anzeigenflaeche);

	/* min-height, nie height: reservierte Mindesthöhe gegen Layoutsprünge, und
	   Platz zum Wachsen bei 200 % Zoom und der Textabstandsanpassung nach
	   SC 1.4.12. */
	min-height: 200px;
	max-width: var(--bpio-satzspiegel);

	/* Ausdrücklich kein Sticky, kein Mitscrollen, kein Overlay. */
	position: static;

	font-family: var(--bpio-apparat);
	color: var(--bpio-text);
}

.bpio-anzeige__label {
	/* ERSTES Element INNERHALB des Rahmens, linksbündig, 12 px Abstand zum
	   Motiv. Nie außerhalb auf dem Seitengrund. */
	margin: 0 0 12px;
	font-family: var(--bpio-apparat);
	font-weight: 700;
	font-size: 0.875rem;    /* 14 px — nicht kleiner als die kleinste
	                           redaktionelle Größe der Seite */
	line-height: 1.43;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--bpio-sekundaer);
}

.bpio-anzeige__zeile {
	margin: 0 0 8px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.3;
	max-width: var(--bpio-spalte);
}

.bpio-anzeige__text {
	margin: 0 0 16px;
	font-family: var(--bpio-apparat);
	font-size: 1rem;
	line-height: 1.5;
	max-width: var(--bpio-spalte);
}

.bpio-anzeige__knopf {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;

	/* Rahmenknopf, nicht der gefüllte Primärknopf der Seite: Auch die
	   Schaltfläche der Anzeige soll nicht wie ein redaktionelles Bedienelement
	   aussehen. */
	color: var(--bpio-akzent);
	background: transparent;
	border: 2px solid var(--bpio-rahmen);
	text-decoration: none;
}

.bpio-anzeige__knopf:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.bpio-anzeige__pflicht {
	margin: 16px 0 0;
	font-family: var(--bpio-apparat);
	font-size: 0.875rem;
	line-height: 1.43;
	color: var(--bpio-sekundaer);
}

/* ============================================================================
   16. BLÄTTERUNG
   ----------------------------------------------------------------------------
   Echte Blätterung, keine Endlosliste. Zielflächen 44 × 44 px mit 12 px
   Abstand (SC 2.5.8).
   ========================================================================== */

.bpio-blaetterung {
	margin: 48px 0;
}

.bpio-blaetterung ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bpio-blaetterung a,
.bpio-blaetterung .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 10px 14px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--bpio-akzent);
}

.bpio-blaetterung a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Die laufende Seitenzahl: Akzentfläche UND — weil Farbe nichts allein trägt —
   der von paginate_links() gesetzte Text „Seite N“ für Vorleseprogramme. */
.bpio-blaetterung .current {
	background: var(--bpio-akzent);
	color: var(--bpio-auf-akzent);
}

/* ============================================================================
   17. SEITENKÖPFE, LEERE ANSICHTEN, FEHLERSEITE
   ========================================================================== */

.bpio-seitenkopf {
	margin-bottom: 48px;
}

.bpio-seitentitel {
	margin: 0 0 16px;
	font-family: var(--bpio-titel);
	font-weight: 700;
	font-size: 2.75rem;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--bpio-text);
	max-width: var(--bpio-satzspiegel);
}

.bpio-leer {
	max-width: var(--bpio-spalte);
	margin-bottom: 48px;
}

.bpio-leer h2 {
	margin: 0 0 12px;
	font-family: var(--bpio-titel);
	font-weight: 600;
	font-size: 1.625rem;
	line-height: 1.23;
}

.bpio-leer p {
	margin: 0 0 24px;
}

.bpio-fehler__rubriken {
	margin-top: 48px;
}

.bpio-fehler__rubriken h2 {
	margin: 0 0 16px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-sekundaer);
}

.bpio-fehler__rubriken dl {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(9rem, 12rem) 1fr;
	gap: 12px var(--bpio-steg);
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;
	line-height: 1.53;
}

.bpio-fehler__rubriken dd {
	margin: 0;
	color: var(--bpio-sekundaer);
	max-width: var(--bpio-spalte);
}

/* ============================================================================
   18. AUSGABENIMPRESSUM UND FUSSZEILE
   ========================================================================== */

.bpio-ausgabenimpressum {
	margin: 64px 0 0;
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;   /* 15 px */
	line-height: 1.533;     /* 23 px */
}

.bpio-ausgabenimpressum__titel {
	margin: 0 0 16px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-sekundaer);
}

.bpio-ausgabenimpressum__liste {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(10rem, 16rem) 1fr;
	gap: 12px var(--bpio-steg);
}

.bpio-ausgabenimpressum__liste dt {
	font-weight: 600;
	color: var(--bpio-text);
}

.bpio-ausgabenimpressum__liste dd {
	margin: 0;
	color: var(--bpio-sekundaer);
	max-width: var(--bpio-satzspiegel);
}

.bpio-fuss {
	margin-top: 96px;
	padding-bottom: 64px;
	font-family: var(--bpio-apparat);
	font-size: 0.9375rem;
	line-height: 1.533;
	color: var(--bpio-sekundaer);
}

/* Keine Linie über dem Fuß. Der Abstand von 96 px trennt ihn — mehr als
   irgendwo sonst auf der Seite, und deshalb eindeutig. */
.bpio-fuss__titel {
	margin: 0 0 12px;
	font-family: var(--bpio-apparat);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpio-sekundaer);
}

.bpio-fuss__rubriken,
.bpio-fuss__netz,
.bpio-fuss__recht {
	margin-bottom: 48px;
}

.bpio-fuss__rubriken ul,
.bpio-fuss__netz ul,
.bpio-fuss__recht ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 16px var(--bpio-steg);
}

.bpio-fuss__rubriken a,
.bpio-fuss__netz a,
.bpio-fuss__recht a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.bpio-fuss__sache {
	display: block;
	max-width: var(--bpio-spalte);
}

.bpio-impressum {
	margin-bottom: 48px;
	max-width: var(--bpio-satzspiegel);
}

.bpio-impressum p {
	margin: 0 0 8px;
	max-width: 60rem;
}

.bpio-impressum__kurz {
	font-weight: 600;
	color: var(--bpio-text);
}

.bpio-impressum__abgrenzung {
	color: var(--bpio-text);
}

/* ============================================================================
   19. UMBRUCHBÄNDER
   ----------------------------------------------------------------------------
   1024–1263 px  Satzspiegel fluid von 928 auf 1120 px, weiter zweispaltig,
                 Spalten nie unter 448 px
   900–1023 px   einspaltig, Prosa max. 34 rem, zentriert
   unter 900 px  einspaltig, Außenrand 20 px, Fließtext 18/29 px
   ========================================================================== */

@media (max-width: 1263px) {
	:root {
		--bpio-rand: 32px;
	}
}

@media (max-width: 1023px) {
	/*
	 * EINSPALTIG. Unterhalb von 1024 px wären zwei Spalten schmaler als
	 * 448 px — und eine Spalte unter 448 px trägt bei 18 px Literata keine
	 * 40 Zeichen mehr. Zweispaltiger Satz mit 40 Zeichen je Spalte ist
	 * schlechter lesbar als einspaltiger, nicht besser.
	 */
	.bpio-satz {
		columns: 1;
		max-width: var(--bpio-spalte);
	}

	.bpio-schlagzeile,
	.bpio-seitentitel {
		font-size: 2rem;
		line-height: 1.13;
	}

	/* Abbildungen laufen bis zu 100 % des Satzspiegels, nicht mehr
	   randabfallend: Auf einem Gerät dieser Breite ist der Unterschied
	   zwischen Satzspiegel und Fensterbreite so klein, dass das Heraustreten
	   nur noch wie ein Fehler im Innenabstand aussieht. */
	.bpio-abb--randabfallend,
	.bpio-aufmacher__bild {
		width: auto;
		margin-left: 0;
	}

	.bpio-abb--randabfallend .bpio-abb__fuss {
		max-width: none;
		padding-inline: 0;
	}
}

@media (max-width: 899px) {
	:root {
		--bpio-rand: 20px;
	}

	body {
		/*
		 * MOBIL EBENSO 18 px, nie größer. Der Desktop-Satz darf nie der
		 * kleinere sein — die Zeilenhöhe geht von 28,8 px auf 29 px, weil der
		 * einspaltige Satz auf schmalem Gerät etwas mehr Durchschuss verträgt.
		 */
		font-size: 1.125rem;
		line-height: 1.611;
	}

	.bpio-schlagzeile,
	.bpio-seitentitel {
		font-size: 1.875rem;   /* 30 px */
		line-height: 1.133;    /* 34 px */
	}

	.bpio-prosa h2 {
		font-size: 1.375rem;   /* 22 px */
		line-height: 1.27;     /* 28 px */
	}

	.bpio-prosa h3 {
		font-size: 1.125rem;   /* 18 px */
		line-height: 1.39;     /* 25 px */
	}

	.bpio-heftkopf__innen {
		grid-template-columns: 1fr;
		grid-template-areas:
			"marke"
			"rubriken"
			"suche";
	}

	/* Das Standbild rückt über den Text: Bei 320 px Fensterbreite blieben für
	   den Anriss neben einem 160-px-Bild rund 120 px — das sind zwölf Zeichen
	   je Zeile. */
	.bpio-eintrag {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.bpio-eintrag__bild,
	.bpio-eintrag__bild img {
		width: 100%;
	}

	/*
	 * Im einspaltigen Band steht das Bild ÜBER dem Text; ein leerer Bildplatz
	 * wäre dann keine Flucht mehr, sondern eine Lücke. Der reservierte Platz
	 * ist nur waagerecht nebeneinander sinnvoll — dort hält er die Textkante.
	 */
	.bpio-eintrag--ohne-bild .bpio-eintrag__bild {
		display: none;
	}

	.bpio-normspiegel__liste,
	.bpio-ausgabenimpressum__liste,
	.bpio-fehler__rubriken dl {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.bpio-normspiegel__liste dd,
	.bpio-ausgabenimpressum__liste dd,
	.bpio-fehler__rubriken dd {
		margin-bottom: 12px;
	}

	.bpio-suche {
		width: 100%;
	}

	.bpio-suche__feld {
		flex: 1 1 auto;
		min-width: 0;
	}

	.bpio-formel__satz {
		flex-direction: column;
		gap: 8px;
	}

	.bpio-formel__nr {
		align-self: flex-end;
		text-align: right;
	}
}

/* ============================================================================
   20. BEWEGUNG
   ----------------------------------------------------------------------------
   Die Seite hat keine Einblendungen, kein Karussell, kein Parallax und keinen
   Bildlauf, den sie selbst auslöst. Was bleibt, sind Übergänge an Verweisen und
   das vom Browser angestoßene weiche Scrollen zu Sprungmarken. Beides wird bei
   prefers-reduced-motion abgeschaltet — weiches Scrollen über eine lange
   Beitragsseite ist für Menschen mit vestibulären Störungen der unangenehmste
   Effekt überhaupt, gerade weil er so harmlos aussieht.
   ========================================================================== */

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

	a,
	.bpio-rubrik,
	.bpio-suche__knopf,
	.bpio-darstellung,
	.bpio-anzeige__knopf {
		transition: text-decoration-thickness 120ms ease, background-color 120ms ease, color 120ms ease;
	}
}

@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;
		scroll-behavior: auto !important;
	}
}

/* ============================================================================
   21. DRUCK
   ----------------------------------------------------------------------------
   Beiträge dieser Seite werden ausgedruckt und in Projektakten abgelegt. Der
   Druckstil ist deshalb kein Zugeständnis, sondern eine zweite Ausgabeform.

   EINSPALTIG über die volle Seitenbreite: Zwei Spalten auf DIN A4 ergeben bei
   11 pt rund 45 Zeichen und drei Seiten mehr.
   ANZEIGENBLÖCKE UND SUCHFELD ENTFALLEN. Der Block ist nicht Teil des Beitrags.
   URLS WERDEN AUSGESCHRIEBEN: Ein unterstrichenes Wort auf Papier führt
   nirgendwohin.
   DAS AUSGABENIMPRESSUM WIRD MITGEDRUCKT — samt der nach § 18 Abs. 2 MStV
   verantwortlichen Person.
   ========================================================================== */

@media print {
	:root {
		--bpio-grund: #FFFFFF;
		--bpio-text: #000000;
		--bpio-sekundaer: #333333;
		--bpio-akzent: #000000;
		--bpio-haarlinie: #999999;
		--bpio-linie-1: #000000;
		--bpio-linie-2: #555555;
		--bpio-linie-3: #888888;
		--bpio-achse: #333333;
	}

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

	.bpio-anzeige,
	.bpio-suche,
	.bpio-darstellung,
	.bpio-sprungmarke,
	.bpio-blaetterung,
	.bpio-rubriken,
	.bpio-weiterlesen {
		display: none !important;
	}

	.bpio-satz {
		columns: 1;
		max-width: none;
	}

	.bpio-satzspiegel {
		max-width: none;
		padding-inline: 0;
	}

	.bpio-abb--randabfallend,
	.bpio-aufmacher__bild {
		width: auto;
		margin-left: 0;
	}

	/* Die Wertetabelle unter jeder Zeichnung wird aufgeklappt gedruckt: Auf
	   Papier lässt sich nichts ausklappen, und sie ist die Textalternative. */
	.bpio-wertetabelle {
		display: block;
	}

	.bpio-wertetabelle > summary {
		display: none;
	}

	.bpio-tabelle-rollen {
		overflow: visible;
		background: none;
	}

	/* URLs ausschreiben — aber nur dort, wo der Verweistext sie nicht schon
	   selbst ist, und nicht bei Sprungmarken innerhalb des Dokuments. */
	.bpio-prosa a[href^="http"]::after,
	.bpio-impressum a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-family: var(--bpio-apparat);
		font-size: 9pt;
		word-break: break-all;
	}

	.bpio-abb,
	.bpio-datenblock,
	.bpio-formel,
	.bpio-eintrag,
	.bpio-normspiegel {
		break-inside: avoid;
	}

	.bpio-prosa h2,
	.bpio-prosa h3 {
		break-after: avoid;
	}

	/* Der Fuß mit der Impressumszeile wird IMMER mitgedruckt. */
	.bpio-fuss,
	.bpio-fuss__recht,
	.bpio-impressum,
	.bpio-ausgabenimpressum {
		display: block !important;
		margin-top: 24pt;
	}
}


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

/* B5. display:inline-block schlug das hidden-Attribut, deshalb stand bei
   jedem Erstbesucher "GELESEN" an jedem Beitrag. */
.bpio-eintrag__gelesen[hidden] { display: none; }


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