/*
Theme Name: baupvo.de
Theme URI: https://baupvo.de
Author: Zurynski, Oezdogan & Co GmbH
Author URI: https://baupvo.de
Description: Arbeitsmittel statt Lektüre. Klassisches Theme für den Pflichtenpfad Hersteller: sieben feste Arbeitsschritte, Checklisten mit lokal gespeichertem Stand, Fristentafel mit Restlaufzeit, Musterdokument mit nummerierten Pflichtfeldern. Ein weißes Arbeitsblatt auf graubeigem Grund, eine einzige Buntfarbe, keine externen Laufzeit-Ressourcen: Schriften, Skripte und sämtliche Grafiken 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-de
Tags: classic, one-column, right-sidebar, accessibility-ready, custom-menu, translation-ready
*/

/* ============================================================
   SCHRIFTEN — vollständig selbst gehostet
   ------------------------------------------------------------
   Kein Google-Fonts-CDN, kein Fremdrequest, keine Vorverbindung.
   Ein Aufruf von fonts.gstatic.com überträgt die IP-Adresse des
   Besuchers vor jeder Einwilligung an einen Dritten; deutsche
   Gerichte haben genau das beanstandet (LG München I, 3 O
   17493/20). Diese Seite richtet sich an Betriebe, die sie am
   Werksbildschirm öffnen — dort ist das kein theoretisches
   Risiko, sondern ein abmahnfähiger Vorgang.

   Die WOFF2-Dateien liegen NICHT im Repository (Binärdateien
   lassen sich nicht als Text erzeugen). Welche Dateien mit
   welchem Subset zu beschaffen sind, steht in README.md.
   Fehlt eine Datei, greift der Fallback-Stack: er enthält
   ausschließlich systemseitig vorhandene Schriften, damit kein
   Name im Stack steht, den niemand ausliefert.
   ============================================================ */

/* Public Sans — Fließtext, Zahlen, Tabellen, Formularlogik.
   Für Pflichtangaben der öffentlichen Verwaltung entworfen:
   offene Punzen, klar getrenntes 1/l/I und 0/O. Das zählt, wenn
   jemand eine Kennnummer aus einem Prüfbericht abschreibt. */
@font-face {
  font-family: 'Public Sans BauPVO';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/public-sans-baupvo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans BauPVO';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/public-sans-baupvo-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans BauPVO';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/public-sans-baupvo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans BauPVO';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/public-sans-baupvo-700.woff2') format('woff2');
}

/* Archivo — Anweisungsebene: Überschriften, Überzeilen,
   Tabellenköpfe, Schrittzahlen, Knopfbeschriftung.
   Statische Schnitte statt der variablen Fassung, weil die
   variable Datei die Breitenachse mitbringt und Archivo Narrow
   auf dieser Domain ausdrücklich verboten ist (es gehört zu den
   Etiketten einer Schwesterseite). Was nicht ausgeliefert wird,
   kann auch nicht versehentlich schmal laufen. */
@font-face {
  font-family: 'Archivo BauPVO';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/archivo-baupvo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo BauPVO';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/archivo-baupvo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo BauPVO';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/archivo-baupvo-800.woff2') format('woff2');
}

/* ============================================================
   TOKEN
   ------------------------------------------------------------
   Die vier Grundwerte (Grund, Lesetext, Sekundär, Akzent) sind
   netzweit zentral vergeben und dürfen hier NICHT abweichen.
   Alle übrigen Werte sind aus ihnen abgeleitet und tragen den
   nachgerechneten Kontrast im Kommentar — nicht als Zierde,
   sondern damit eine spätere Änderung sofort sieht, was sie
   kaputt macht.

   Kein Dunkelmodus. color-scheme: light ist gesetzt, damit der
   Browser Formularelemente, Bildlaufleisten und die
   Systemfarben nicht eigenmächtig invertiert und dadurch ein
   halb dunkles Blatt entsteht, für das es keine geprüften
   Kontrastwerte gibt.
   ============================================================ */
:root {
  color-scheme: light;

  /* --- Netzweit vergeben, unveränderlich --- */
  --bp-grund:        #F0EEE8; /* Seitengrund */
  --bp-text:         #61483B; /* Lesetext, zugleich die „Tinte“ dieser Seite */
  --bp-sekundaer:    #626262; /* Bildunterschrift, Meta, Fußnote */
  /* Signalgelb. AUSSCHLIESSLICH als Fläche, nie als Schrift und nie
     als Linie: gegen das weiße Blatt sind es 1,68:1. Als Fläche
     trägt es, weil der Lesetext darauf 5,00:1 erreicht — und weil
     jede gelbe Fläche zwingend eine 2px-Kante in Tinte und ein
     ausgeschriebenes Wort bekommt. */
  --bp-akzent:       #F2C200;

  /* --- Abgeleitete Flächen ---
     Die Werte hinter den Flächen sind der Kontrast des Lesetexts
     #61483B darauf. Sekundärtext #626262 liegt überall darüber
     bei mindestens 4,66:1, erfüllt also auch auf der
     Anzeigenfläche die 4,5:1 für Fließtext. */
  --bp-blatt:        #FFFFFF; /* Arbeitsblatt; Text darauf 8,41:1 */
  --bp-zebra:        #F6F5F0; /* Zebrazeile und Abbildungsfläche; Text 7,70:1 */
  --bp-hover:        #EAE7DE; /* Zeile unter dem Zeiger; Text 6,80:1 */
  --bp-anzeige:      #E4E1D8; /* Anzeigenfläche; Text 6,43:1 — die FLÄCHE
                                 selbst trägt AUSDRÜCKLICH nichts */

  /* --- Linien ---
     Drei Stärken, drei Bedeutungen. Die Rasterlinie trägt
     Information (Zeilenzugehörigkeit in Tabellen) und erreicht
     deshalb 4,10:1 auf dem Blatt. Die Haarlinie trägt keine und
     darf nie zur Tabellenlinie umgewidmet werden. */
  --bp-raster:       #857C72; /* 4,10:1 auf Blatt, 3,53:1 auf Grund */
  --bp-haarlinie:    #DCD8CE; /* 1,42:1 — dekorativ, ohne Informationslast */
  --bp-bedienrahmen: #626262; /* 6,10:1 auf Blatt — Eingabefeld, Kontrollkästchen */

  /* --- Fokus ---
     Eigener, ausschließlich hierfür reservierter Token.
     #000000 und #FFFFFF kommen als Ringfarbe sonst nirgends in
     einer Bedienrolle vor, der Ring kann also nie mit einer
     Zustandsfläche zusammenfallen. */
  --bp-fokus-kern:   #FFFFFF;
  --bp-fokus-mantel: #000000;

  /* --- Maße --- */
  --bp-container:    1384px;
  --bp-blatt-breite: 760px;
  --bp-prosa:        38rem;  /* rund 67 Zeichen bei 18px Public Sans */
  --bp-prosa-eng:    34rem;  /* jedes Umbruchband unter 1240px */
  --bp-innenrand:    40px;
  --bp-leiste:       52px;   /* Höhe der mobilen Klebeleiste */
  --bp-anker:        68px;   /* Leiste + 16px Luft */

  /* --- Schrift --- */
  --bp-satz: 'Public Sans BauPVO', 'Segoe UI', Roboto, Arial, sans-serif;
  --bp-kopf: 'Archivo BauPVO', 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   GRUNDGERÜST
   ============================================================ */

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

html {
  /* Alle Sprungziele liegen unter der 52px hohen Klebeleiste,
     wenn nichts dagegen steht. Global statt je Anker, weil sonst
     genau der Anker vergessen wird, den jemand später ergänzt. */
  scroll-padding-top: var(--bp-anker);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bp-grund);
  color: var(--bp-text);
  font-family: var(--bp-satz);
  font-size: 1.125rem;   /* 18px — auf Desktop wie mobil identisch */
  line-height: 1.611;    /* 29px */
  /* Deutscher Fachsatz: die Wörter dieses Fachs sind lang
     („Leistungsbeständigkeit“, „Bauproduktenverordnung“) und
     zerreißen ohne Trennung jede 34-rem-Spalte. */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

/* Die Seite scrollt NIE waagerecht. Was zu breit ist (Tabellen),
   scrollt in seinem eigenen Rahmen — siehe .bp-tabelle-rollbar. */
html, body { overflow-x: hidden; }

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

/* ============================================================
   TYPOGRAFIE
   ============================================================ */

h1, h2, h3 {
  font-family: var(--bp-kopf);
  margin: 0 0 0.5em;
  color: var(--bp-text);
}

h1 {
  font-weight: 600;
  font-size: 2.5rem;    /* 40px */
  line-height: 1.15;    /* 46px */
  letter-spacing: -0.01em;
}

h2 {
  font-weight: 600;
  font-size: 1.75rem;   /* 28px */
  line-height: 1.214;   /* 34px */
}

h3 {
  font-weight: 500;
  font-size: 1.3125rem; /* 21px */
  line-height: 1.333;   /* 28px */
}

h4 {
  font-family: var(--bp-satz);
  font-weight: 600;
  font-size: 1.125rem;  /* 18px */
  line-height: 1.444;   /* 26px */
  margin: 0 0 0.4em;
}

p { margin: 0 0 1.333rem; }
p:last-child { margin-bottom: 0; }

/* Prosa ist gedeckelt, Tabellen und Abbildungen sind es nicht.
   Ein Absatz über die vollen 680px wären rund 96 Zeichen je
   Zeile; die Augenrückführung bricht dort messbar ein. */
.bp-prosa { max-width: var(--bp-prosa); }

/* Verweise tragen KEINE Farbe. Das System kennt genau eine
   Buntfarbe, und die ist als Fläche vergeben. Unterscheidbar
   bleibt der Verweis über eine 2px-Unterstreichung mit Abstand
   zur Grundlinie — das funktioniert in Graustufen, im Ausdruck
   und bei vollständiger Farbenblindheit gleich gut. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}
a:hover { background: var(--bp-hover); }

/* ============================================================
   FOKUS
   ------------------------------------------------------------
   ABWEICHUNG VON DER SPEZIFIKATION, BEWUSST:
   Vorgesehen war Element | 2px durchsichtiger Abstand | 2px
   weißer Kern | 2px schwarzer Mantel. Ein DURCHSICHTIGER
   Abstand nimmt aber die Farbe dessen an, worauf das Element
   liegt — auf dem weißen Blatt ist er weiß und verschmilzt mit
   dem Kern, der Ring wird optisch zu einem einfachen 2px-Strich.

   Deshalb hier drei volle Bänder: 2px Mantel, 2px Kern, 2px
   Mantel. Die Bänder stehen mit 21,00:1 zueinander; der Ring
   bleibt also auch dann als Ring erkennbar, wenn ein Band mit
   dem Untergrund verschmilzt.

   Nachgerechnet, je Fläche das TRAGENDE (bessere) Band:
     Blatt #FFFFFF        21,00:1
     Zebra #F6F5F0        19,24:1
     Grund #F0EEE8        18,10:1
     Zeile Hover #EAE7DE  16,98:1
     Anzeigenfläche       16,06:1
     Signalgelb #F2C200   12,49:1
     Primärfläche #61483B  8,41:1  ← schwächster Wert im System
   Das Minimum liegt damit beim Zweikommasiebenfachen der
   geforderten 3:1. Gesamtstärke 6px, rechtwinklig, nie entfernt.
   ============================================================ */
:focus { outline: none; } /* nur, weil :focus-visible unmittelbar folgt */

:focus-visible {
  outline: 2px solid var(--bp-fokus-kern);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--bp-fokus-mantel);
  /* Der Ring darf von keiner Nachbarfläche überdeckt werden. */
  position: relative;
  z-index: 5;
}

/* Windows-Kontrastmodus: dort sind eigene Farben wirkungslos.
   Highlight ist die einzige Farbe, die das System als „hier
   steht der Fokus“ garantiert durchreicht. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* Sprungmarke. Sichtbar, sobald sie den Fokus hat — nicht
   „display:none bis Tab“, denn dann kennt der Screenreader sie
   gar nicht. */
.bp-sprungmarke {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  background: var(--bp-text);
  color: var(--bp-blatt);
  font-family: var(--bp-kopf);
  font-size: 1.0625rem;
  padding: 14px 20px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: top 120ms linear;
}
.bp-sprungmarke:focus { top: 8px; }

/* Nur für Hilfsmittel. clip-path statt display:none, weil ein
   verstecktes Element sonst aus dem Barrierebaum fällt. */
.bp-nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Bausteine, die ohne JavaScript sinnlos wären (Fortschritts-
   zähler, „Stand zurücksetzen“, „Werksakte drucken“), sind
   vorgabemäßig verborgen und werden erst sichtbar, wenn das
   Bootstrap-Skript in header.php die Klasse gesetzt hat. Ein
   Knopf, der nichts tut, ist schlimmer als kein Knopf. */
.bp-nur-js { display: none; }
.bp-js .bp-nur-js { display: revert; }
.bp-js .bp-ohne-js { display: none; }

/* ============================================================
   KOPF
   ============================================================ */

.bp-kopf {
  background: var(--bp-blatt);
  border-bottom: 3px solid var(--bp-text);
}

.bp-kopf__inner {
  max-width: calc(var(--bp-container) + 48px);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}

.bp-wortmarke {
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.bp-wortmarke:hover { background: none; text-decoration: underline; text-decoration-thickness: 2px; }
.bp-wortmarke__zusatz {
  font-family: var(--bp-satz);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--bp-sekundaer);
}

.bp-hauptnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.bp-hauptnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 12px;
  font-family: var(--bp-kopf);
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: none;
}
.bp-hauptnav a:hover { background: var(--bp-hover); text-decoration: underline; text-decoration-thickness: 2px; }
/* Die aktuelle Seite ist schwarz gefüllt, nicht farbig markiert:
   dieselbe Form wie die aktive Zeile der Schrittspalte, damit
   „hier stehe ich“ im ganzen System eine einzige Gestalt hat. */
.bp-hauptnav a[aria-current] {
  background: var(--bp-text);
  color: var(--bp-blatt);
  text-decoration: none;
}

/* Dauerhafte Statuszeile. Sie steht auf JEDER Seite und verneint
   ausdrücklich, was ein Besucher sonst annehmen könnte. */
.bp-statuszeile {
  background: var(--bp-grund);
  border-bottom: 1px solid var(--bp-raster);
  font-size: 0.9375rem;
  line-height: 1.533;
  color: var(--bp-sekundaer);
}
.bp-statuszeile__inner {
  max-width: calc(var(--bp-container) + 48px);
  margin: 0 auto;
  padding: 10px 24px;
}
.bp-statuszeile a { color: var(--bp-text); }

/* Mobile Klebeleiste: „Schritt 3 von 7 — Leistungserklärung“
   plus Fortschrittsbalken. Nur unter 900px, weil oberhalb die
   linke Schiene dauerhaft mitläuft und dieselbe Auskunft gibt. */
.bp-leiste { display: none; }

@media (max-width: 899px) {
  .bp-leiste {
    display: block;
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: var(--bp-leiste);
    background: var(--bp-blatt);
    border-bottom: 3px solid var(--bp-text);
  }
  .bp-leiste__inner {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--bp-leiste);
  }
  .bp-leiste__text {
    font-family: var(--bp-kopf);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
  }
  .bp-leiste__balken { flex: 1 1 96px; }
}

/* Fortschrittsbalken. Schwarze 2px-Kante, gelb gefüllter Anteil,
   Zahl daneben — die Farbe allein sagt nichts, die Zahl schon. */
.bp-balken {
  display: block;
  min-height: 16px;
  border: 2px solid var(--bp-text);
  background: var(--bp-blatt);
  padding: 0;
}
.bp-balken__fuellung {
  display: block;
  height: 12px;
  background: var(--bp-akzent);
  transition: width 160ms linear;
}

/* ============================================================
   ARBEITSBLATT-RASTER
   ------------------------------------------------------------
   Vier Rasterkinder statt „Blatt mit zwei Beistellspalten“:
   Schiene, Blattkopf, Fristentafel, Blattkorpus.

   Der Grund ist der Umbruch. Unter 1240px soll die Fristentafel
   DIREKT UNTER DIE H1 wandern, nicht ans Seitenende. Läge sie in
   einer eigenen Spalte neben einem einzigen Blattelement, käme
   sie beim Umbruch zwangsläufig hinter dem gesamten Blatt zu
   liegen. Als eigenständiges Rasterkind zwischen Kopf und
   Korpus lässt sie sich dorthin stellen, wo sie hingehört.

   Optisch bleiben Kopf, Tafel und Korpus unter 1240px EIN Blatt:
   alle drei tragen dieselbe weiße Fläche und es liegt kein
   senkrechter Abstand dazwischen.
   ============================================================ */

.bp-raster {
  max-width: calc(var(--bp-container) + 48px);
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.bp-blatt {
  background: var(--bp-blatt);
  /* Rechtwinklig, ohne Schatten, ohne Rundung. Die Tiefe kommt
     allein aus dem Flächenwechsel — siehe Kommentar unten. */
}
.bp-blatt--kopf   { padding: var(--bp-innenrand) var(--bp-innenrand) 0; }
.bp-blatt--korpus { padding: 24px var(--bp-innenrand) var(--bp-innenrand); }

/*
 * EHRLICHKEIT ZUR EBENENTRENNUNG:
 * Weiß #FFFFFF gegen Grund #F0EEE8 sind 1,16:1. Das ist sichtbar,
 * aber schwach — schwächer, als der Entwurf ursprünglich
 * angenommen hat. Deshalb trägt das Blatt zusätzlich eine
 * 3px-Oberkante in Tinte. Diese Kante ist das, was die Ebene
 * tatsächlich markiert; der Tonwechsel ist Beiwerk und wird hier
 * ausdrücklich nicht als Trennsignal behauptet.
 */
.bp-blatt--kopf { border-top: 3px solid var(--bp-text); }

/* Zwischen 900 und 1239px: zwei Spalten. Die Schiene bleibt als
   232px-Schiene stehen — ausdrücklich KEINE waagerecht
   scrollbare Leiste, die gehört einer Schwesterseite. */
/*
 * Nur die Spalte wird festgelegt, nie die Zeile: die Blattelemente ordnen sich
 * per Auto-Placement in DOM-Reihenfolge untereinander. Eine feste Zeilenzahl
 * hätte einen Fehler eingebaut, der erst später aufgefallen wäre — die
 * Suchergebnisseite hat ZWEI Korpusblöcke (Suchfeld und Trefferliste), und die
 * hätten bei fest zugewiesener Zeile übereinandergelegen.
 *
 * Die klebenden Spalten spannen über 30 Zeilen. Leere Zeilen sind 0px hoch,
 * kosten also nichts, und die Zahl liegt weit über allem, was eine Seite
 * dieses Themes je an Blattelementen hat.
 */
@media (min-width: 900px) {
  .bp-raster {
    grid-template-columns: 232px minmax(0, 1fr);
    column-gap: 32px;
  }
  .bp-schiene { grid-column: 1; grid-row: 1 / span 30; }
  .bp-blatt--kopf,
  .bp-tafel,
  .bp-blatt--korpus { grid-column: 2; }
}

/* Ab 1240px: drei Spalten, die Fristentafel bekommt ihre eigene
   klebende Spalte auf dem Grund. */
@media (min-width: 1240px) {
  .bp-raster {
    grid-template-columns: 264px minmax(0, var(--bp-blatt-breite)) 296px;
    column-gap: 32px;
    justify-content: center;
  }
  .bp-schiene { grid-column: 1; grid-row: 1 / span 30; }
  .bp-blatt--kopf,
  .bp-blatt--korpus { grid-column: 2; }
  .bp-tafel { grid-column: 3; grid-row: 1 / span 30; }

  .bp-schiene, .bp-tafel {
    position: sticky;
    top: 24px;
    align-self: start;
    /* Klebende Spalten dürfen nie höher als der Bildschirm
       werden, sonst ist ihr unteres Ende unerreichbar. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

/* ============================================================
   LINKE SPALTE — Pflichtenpfad
   ============================================================ */

.bp-schiene__kopf {
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 0.875rem;   /* 14px */
  line-height: 1.357;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--bp-text);
}

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

.bp-schiene__zeile a,
.bp-schiene__zeile > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;            /* Trefferzeile, nie height */
  padding: 6px 8px;
  font-size: 1rem;
  line-height: 1.375;
  text-decoration: none;
  border-bottom: 1px solid var(--bp-haarlinie);
}
.bp-schiene__zeile a:hover { background: var(--bp-hover); }

/* Die aktive Zeile ist gefüllt, nicht eingefärbt. */
.bp-schiene__zeile--aktiv a,
.bp-schiene__zeile--aktiv > span {
  background: var(--bp-text);
  color: var(--bp-blatt);
}
.bp-schiene__zeile--aktiv .bp-marke { --bp-marke-kante: var(--bp-blatt); }

.bp-schiene__nr {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.bp-schiene__titel { flex: 1 1 auto; }

/* Unter 900px wird die Schiene zum statischen 7-Zellen-Raster im
   Blattkopf. Vier plus drei Zellen, jede 44px hoch. Sie trägt
   dieselbe weiße Fläche wie das Blatt und schließt bündig an,
   damit sie als Teil des Blattes gelesen wird und nicht als
   vierte Ebene. */
@media (max-width: 899px) {
  .bp-schiene {
    background: var(--bp-blatt);
    border-top: 3px solid var(--bp-text);
    padding: 16px 16px 0;
  }
  .bp-schiene__liste {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .bp-schiene__zeile a,
  .bp-schiene__zeile > span {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    border: none;
    border-bottom: 1px solid var(--bp-raster);
    font-size: 0.9375rem;
    line-height: 1.2;
  }
  .bp-schiene__titel {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bp-blatt--kopf { border-top: none; padding: 16px 16px 0; }
  .bp-blatt--korpus { padding: 16px 16px 24px; }
  .bp-raster { padding: 0 16px 24px; }
}

/* ============================================================
   ZUSTANDSMARKE — das farbunabhängige Kernbauteil
   ------------------------------------------------------------
   Vier Ausprägungen, unterschieden durch FORM, nicht durch
   Farbe: leer, gelb gefüllt, gefüllt mit Häkchen, gefüllt mit
   Kreuz. Jede trägt zusätzlich das ausgeschriebene Wort und, wo
   es um Zeit geht, die Restlaufzeit als Zahl. In Graustufen, im
   Ausdruck und bei Monochromasie bleibt jede Ausprägung
   eindeutig.
   ============================================================ */
.bp-marke {
  --bp-marke-kante: currentColor;
  flex: 0 0 auto;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -3px;
  color: inherit;
}
.bp-marke svg { display: block; width: 100%; height: 100%; }

/* Alle vier Ausprägungen stecken im Markup, data-zustand wählt aus. So kann
   pflichtenpfad.js den Zustand nach dem Lesen des lokalen Speichers umstellen,
   ohne Geometrie im JavaScript nachzubauen. */
.bp-m-gelb, .bp-m-fuell, .bp-m-haken, .bp-m-kreuz { display: none; }
.bp-m-fuell { fill: currentColor; stroke: none; }
.bp-m-gelb  { fill: var(--bp-akzent); stroke: currentColor; stroke-width: 2; }
.bp-m-haken, .bp-m-kreuz {
  fill: none;
  stroke: var(--bp-blatt);
  stroke-width: 2.5;
  stroke-linecap: square;
}
.bp-m-kante {
  fill: none;
  stroke: var(--bp-marke-kante);
  stroke-width: 2;
}
.bp-marke[data-zustand="laeuft"] .bp-m-gelb { display: block; }
.bp-marke[data-zustand="erledigt"] .bp-m-fuell,
.bp-marke[data-zustand="erledigt"] .bp-m-haken { display: block; }
.bp-marke[data-zustand="ueberschritten"] .bp-m-fuell,
.bp-marke[data-zustand="ueberschritten"] .bp-m-kreuz { display: block; }
/* Auf der gefüllten aktiven Zeile ist die Tinte der Untergrund. Häkchen und
   Kreuz müssten dort weiß auf weiß stehen — also drehen sie mit. */
.bp-schiene__zeile--aktiv .bp-m-haken,
.bp-schiene__zeile--aktiv .bp-m-kreuz { stroke: var(--bp-text); }
.bp-schiene__zeile--aktiv .bp-m-fuell { fill: var(--bp-blatt); }

/* Die 45°-Schraffur der überschrittenen Zeile. Sie liegt auf der
   ZEILE, nicht auf der Marke — die Zeile ist es, die auffallen
   muss, und eine Schraffur überlebt jeden Schwarzweißdruck. */
.bp-zeile--ueberschritten {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 5px,
    var(--bp-haarlinie) 5px 7px
  );
}

.bp-zustand-wort {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ============================================================
   ÜBERZEILEN, META, STAND
   ============================================================ */
.bp-ueberzeile {
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 0.875rem;   /* 14px */
  line-height: 1.357;    /* 19px */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.bp-meta {
  font-size: 0.9375rem;  /* 15px — kleinste redaktionelle Größe */
  line-height: 1.533;
  color: var(--bp-sekundaer);
}

.bp-blatt__stand {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bp-haarlinie);
}

/* Zahlen, Fristen, Norm- und DoP-Nummern. Keine Monoschrift —
   Public Sans 600 mit Tabellenziffern. Eine dritte Familie
   allein für Ziffern wäre genau die Signatur, die diese Seite
   von einer Schwesterseite ununterscheidbar machte. */
.bp-zahl {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Normkennungen und CELEX-Nummern brechen nicht um. Eine in der
   Mitte umbrochene Nummer ist beim Abschreiben eine Fehlerquelle. */
.bp-norm {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border: 1px solid var(--bp-raster);
  font-size: 0.9375rem;
}
/* Ausnahme von overflow-wrap: break-word am body — sonst reißt
   der Browser die Kennung an beliebiger Stelle auf. */
.bp-norm, .bp-kennung { overflow-wrap: normal; hyphens: none; -webkit-hyphens: none; }
.bp-kennung { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================
   ARBEITSSCHRITT-BLOCK
   ============================================================ */
.bp-schritt {
  margin: 0;
  padding: 0 0 56px;
  scroll-margin-top: var(--bp-anker);
}
.bp-schritt + .bp-schritt { border-top: 3px solid var(--bp-text); padding-top: 32px; }

.bp-schritt__kopf {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 16px;
}

/* Die Schrittzahl sitzt im Abschnittskopf in einem gefüllten
   Quadrat — ausdrücklich NICHT als hängende Zahl neben der
   Spalte. Hängende Randnummern gehören einer Schwesterseite. */
.bp-schritt__quadrat {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bp-text);
  color: var(--bp-blatt);
  font-family: var(--bp-kopf);
  font-weight: 800;
  font-size: 1.375rem;   /* 22px */
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bp-schritt__titel { margin: 0; flex: 1 1 auto; }
.bp-schritt__frage { margin: 4px 0 0; }

/* Immer dieselben drei Untereinheiten. Genau das macht die Seite
   querlesbar, ohne dass ein einziger Fließtextsatz gelesen
   werden muss. */
.bp-untereinheit { margin: 24px 0 0; }
.bp-untereinheit__titel {
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bp-raster);
}
.bp-untereinheit ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--bp-prosa);
}
.bp-untereinheit li {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 8px;
}
/* Kein Aufzählungspunkt, sondern ein kleines gefülltes Quadrat:
   dieselbe Grundform wie Schrittquadrat und Zustandsmarke. */
.bp-untereinheit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--bp-text);
}
.bp-ergebnis {
  margin: 8px 0 0;
  padding: 12px 16px;
  background: var(--bp-zebra);
  border-top: 3px solid var(--bp-text);
  max-width: var(--bp-prosa);
}

/* ============================================================
   CHECKLISTE
   ============================================================ */
.bp-checkliste { margin: 24px 0 0; }

.bp-checkliste__fortschritt {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bp-raster);
}
.bp-checkliste__zaehler { font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-checkliste__fortschritt .bp-balken { flex: 1 1 140px; min-width: 120px; }

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

.bp-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;      /* Trefferzeile, min-height statt height */
  padding: 10px 12px;
  margin: 0;
  line-height: 1.555;
  cursor: pointer;
}
.bp-checkliste__liste li:nth-child(odd) .bp-check { background: var(--bp-zebra); }
.bp-check:hover { background: var(--bp-hover); }

/* Das Kontrollkästchen ist ein echtes <input type="checkbox">.
   Nur so funktioniert die Liste auch ohne JavaScript, taucht im
   Barrierebaum als Kontrollkästchen auf und lässt sich mit der
   Leertaste bedienen. appearance:none nimmt nur die Optik. */
.bp-check__box {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  border: 2px solid var(--bp-bedienrahmen);
  background: var(--bp-blatt);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.bp-check__box::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 3px solid var(--bp-blatt);
  border-bottom: 3px solid var(--bp-blatt);
  transform: rotate(-45deg) translate(1px, -2px);
  opacity: 0;
}
.bp-check__box:checked {
  background: var(--bp-text);
  border-color: var(--bp-text);
}
.bp-check__box:checked::after { opacity: 1; }

.bp-check__text { flex: 1 1 auto; }

/* Das ausgeschriebene Wort wechselt mit dem Zustand — ohne
   JavaScript, allein über :checked. Ein Screenreader liest
   ohnehin „aktiviert“; das Wort ist für den sehenden Blick und
   für den Ausdruck. */
.bp-check__wort {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  align-self: center;
}
.bp-check__wort .bp-wort-erledigt { display: none; }
.bp-check__box:checked ~ .bp-check__wort .bp-wort-erledigt { display: inline; }
.bp-check__box:checked ~ .bp-check__wort .bp-wort-offen { display: none; }

.bp-checkliste__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}

/* ============================================================
   KNÖPFE
   ============================================================ */
.bp-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 44px;
  padding: 10px 20px;
  font-family: var(--bp-kopf);
  font-weight: 500;
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--bp-blatt);
  color: var(--bp-text);
  border: 2px solid var(--bp-bedienrahmen);
}
.bp-knopf:hover { background: var(--bp-hover); }

.bp-knopf--primaer {
  min-height: 56px;
  background: var(--bp-text);
  color: var(--bp-blatt);
  border-color: var(--bp-text);
}
.bp-knopf--primaer:hover { background: var(--bp-text); text-decoration: underline; text-decoration-thickness: 2px; }

.bp-knopf svg { width: 24px; height: 24px; flex: 0 0 auto; }

/* ============================================================
   ENTSCHEIDUNGSWEICHE
   ============================================================ */
.bp-weiche {
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 3px solid var(--bp-text);
}
.bp-weiche__frage {
  font-family: var(--bp-kopf);
  font-weight: 500;
  font-size: 1.3125rem;   /* 21px */
  line-height: 1.333;
  margin: 0 0 16px;
  max-width: var(--bp-prosa);
}
.bp-weiche__knoepfe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 480px;
}
.bp-weiche__knopf { min-height: 56px; width: 100%; }
/* Die gewählte Antwort ist gefüllt — dieselbe Gestalt wie die
   aktive Zeile der Schiene und der aktuelle Menüpunkt. */
.bp-weiche__knopf[aria-pressed="true"] {
  background: var(--bp-text);
  color: var(--bp-blatt);
  border-color: var(--bp-text);
}
.bp-weiche__ergebnis {
  margin: 16px 0 0;
  padding: 16px;
  background: var(--bp-zebra);
  border-top: 3px solid var(--bp-text);
  max-width: var(--bp-prosa);
}
.bp-weiche__ergebnis-titel {
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 0 8px;
}

/* ============================================================
   RECHTSGRUNDLAGE
   ------------------------------------------------------------
   Bewusst klein und OHNE Rahmen. Der Verordnungstext ist auf
   dieser Seite Beleg, nicht Gegenstand; die Handlungsanweisung
   muss dominant bleiben. Ein geschlossener Rahmen kommt im
   ganzen System genau einmal vor — um die Anzeige.
   ============================================================ */
.bp-recht {
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--bp-zebra);
  border-top: 3px solid var(--bp-text);
  max-width: var(--bp-prosa);
}
.bp-recht__quelle {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0 0 8px;
}
.bp-recht__zitat {
  margin: 0 0 12px;
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.588;
}
.bp-recht__verweis { margin: 0; font-size: 0.9375rem; }

/* ============================================================
   TABELLEN — Fristentafel, Nachweisablage
   ------------------------------------------------------------
   Ausschließlich waagerechte Rasterlinien. SENKRECHTE
   Spaltenlinien sind ausgeschlossen: sie gehören zwei
   Schwesterseiten und wären genau die Verwechselbarkeit, die
   dieser Entwurf vermeidet.
   ============================================================ */
.bp-tabelle-rollbar {
  /* Tabellen brechen mobil nicht um, sie rollen in ihrem eigenen
     Rahmen. tabindex + role in der Vorlage machen den Bereich
     mit der Tastatur erreichbar — ohne das ist ein rollbarer
     Kasten für Tastaturnutzer eine Sackgasse. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bp-tabelle-rollbar:focus-visible { outline-offset: 0; }

.bp-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;         /* 16px */
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.bp-tabelle caption {
  text-align: left;
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 0 8px;
}
.bp-tabelle th,
.bp-tabelle td {
  text-align: left;
  vertical-align: top;
  padding: 12px 12px 12px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--bp-raster);
}
.bp-tabelle th {
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 0.9375rem;    /* 15px */
  line-height: 1.333;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom-width: 3px;
  border-bottom-color: var(--bp-text);
}
.bp-tabelle tbody tr:nth-child(even) { background: var(--bp-zebra); }
.bp-tabelle td:last-child, .bp-tabelle th:last-child { padding-right: 0; }

/* ============================================================
   FRISTENTAFEL
   ============================================================ */
.bp-tafel { padding: 0; }
.bp-tafel__kopf {
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--bp-text);
}
.bp-tafel__liste { list-style: none; margin: 0; padding: 0; }
.bp-tafel__zeile {
  padding: 12px 0;
  border-bottom: 1px solid var(--bp-raster);
}
.bp-tafel__datum {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.bp-tafel__was { margin: 4px 0 0; font-size: 1rem; line-height: 1.5; }
.bp-tafel__zustand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  flex-wrap: wrap;
}
.bp-tafel__fund { margin: 6px 0 0; font-size: 0.9375rem; color: var(--bp-sekundaer); }

/* Unter 1240px liegt die Tafel im Blatt und trägt dessen Fläche;
   ab 1240px liegt sie ohne eigene Fläche auf dem Grund. */
@media (max-width: 1239px) {
  .bp-tafel {
    background: var(--bp-blatt);
    padding: 24px var(--bp-innenrand) 0;
  }
}
@media (max-width: 899px) {
  .bp-tafel { padding: 24px 16px 0; }
}

/* ============================================================
   ABBILDUNGEN
   ------------------------------------------------------------
   Rahmenlos auf der Zebrafläche. Die Bildunterschrift ist durch
   eine 1px-Rasterlinie getrennt, nicht durch Abstand allein.
   Keine Bildbreite über 680px.
   ============================================================ */
.bp-abb {
  margin: 24px 0 0;
  max-width: 680px;
}
.bp-abb__flaeche {
  background: var(--bp-zebra);
  padding: 24px;
}
.bp-abb__flaeche svg { display: block; width: 100%; height: auto; }
.bp-abb figcaption,
.bp-abb__unterschrift {
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--bp-raster);
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.533;
  color: var(--bp-sekundaer);
}

/* Zeichnungen laufen durchgehend in currentColor, damit sie im
   Ausdruck und im Kontrastmodus mitziehen. Deshalb tragen die
   Pfade selbst keine Attribute. */
.bp-zeichnung {
  color: var(--bp-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.bp-zeichnung text {
  fill: currentColor;
  stroke: none;
  font-family: var(--bp-satz);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bp-zeichnung .bp-fuell { fill: currentColor; stroke: none; }
.bp-zeichnung .bp-gelb  { fill: var(--bp-akzent); stroke: currentColor; stroke-width: 2; }
/* Gelbe Füllung OHNE Kante — nur dort erlaubt, wo die Kante ein eigenes
   Element ist (Fortschritts- und Fristbalken zeichnen sie separat). */
.bp-zeichnung .bp-fuell-gelb { fill: var(--bp-akzent); stroke: none; }
/* Schrift auf gefüllter Fläche. Als Klasse und nicht als fill-Attribut, weil
   die Regel .bp-zeichnung text weiter oben jedes Präsentationsattribut
   schlägt und die Ziffer sonst in der Tinte auf der Tinte stünde. */
.bp-zeichnung .bp-weiss-text { fill: var(--bp-blatt); stroke: none; }

/* ============================================================
   MUSTERDOKUMENT MIT FELDFAHNEN
   ============================================================ */
.bp-muster { margin: 24px 0 0; max-width: 680px; }
.bp-muster__fahnen {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  max-width: 480px;
}
.bp-muster__fahne {
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  background: var(--bp-akzent);
  color: var(--bp-text);
  border: 2px solid var(--bp-text);
  cursor: pointer;
}
.bp-muster__fahne[aria-expanded="true"] {
  background: var(--bp-text);
  color: var(--bp-blatt);
}
.bp-muster__feld {
  margin: 12px 0 0;
  padding: 16px;
  background: var(--bp-zebra);
  border-top: 3px solid var(--bp-text);
}
.bp-muster__feld h4 { margin: 0 0 6px; }
.bp-muster__fehler { margin: 8px 0 0; font-size: 1rem; }
.bp-muster__fehler strong { font-weight: 600; }

/* ============================================================
   NACHWEISABLAGE / DOWNLOADS
   ============================================================ */
.bp-ablage { margin: 32px 0 0; }
.bp-ablage__wofuer { color: var(--bp-sekundaer); font-size: 0.9375rem; }

/* ============================================================
   ANZEIGE
   ------------------------------------------------------------
   Der EINZIGE geschlossene Rahmen im ganzen System. Redaktionell
   wird ausschließlich mit einzelnen waagerechten 3px-Balken
   getrennt; damit ist ein umlaufender Rahmen eine Form, die
   sonst nirgends vorkommt — auch in Graustufen und im Ausdruck.

   Was die Trennung TATSÄCHLICH trägt, ist nachgerechnet:
     (1) der geschlossene 3px-Rahmen, 6,43:1 gegen die
         Anzeigenfläche und 7,24:1 gegen den Seitengrund,
     (2) das Textlabel als erstes Element im Block,
     (3) die wortgleiche Pflichtzeile darunter,
     (4) eine eigene Typografie und ein Rahmenknopf statt des
         gefüllten Primärknopfs.
   AUSDRÜCKLICH NICHT tragend: der Flächenton. #E4E1D8 gegen den
   Seitengrund #F0EEE8 sind 1,13:1 — unterhalb jeder
   Wahrnehmungsschwelle in Graustufen. Er wird deshalb hier als
   Beiwerk geführt und nirgends als Trennsignal behauptet.
   ============================================================ */
.bp-anzeige {
  margin: 40px 0;
  padding: 0;
  border: 3px solid var(--bp-text);
  background: var(--bp-anzeige);
  min-height: 168px;      /* min-height, nie height: Zoom und
                             Textabstandsanpassung nach WCAG
                             1.4.12 müssen den Block wachsen
                             lassen, nicht brechen. */
}
.bp-anzeige__label {
  display: block;
  font-family: var(--bp-kopf);
  font-weight: 700;
  font-size: 1rem;        /* 16px — nie kleiner als die kleinste
                             redaktionelle Größe (15px) */
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bp-raster);
}
.bp-anzeige__motiv { padding: 20px; }
.bp-anzeige__zeile {
  font-family: var(--bp-kopf);
  font-weight: 500;
  font-size: 1.3125rem;   /* 21px */
  line-height: 1.333;
  margin: 0 0 8px;
}
.bp-anzeige__text {
  font-size: 1rem;        /* 16px */
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 46rem;
}
/* Rahmenknopf, ungefüllt — optisch das Gegenteil des schwarz
   gefüllten Primärknopfs des Portals. */
.bp-anzeige__knopf {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid var(--bp-text);
  background: none;
  color: var(--bp-text);
  font-family: var(--bp-kopf);
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: none;
}
.bp-anzeige__knopf:hover { text-decoration: underline; text-decoration-thickness: 2px; background: none; }
.bp-anzeige__pflicht {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--bp-raster);
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.466;
}
@media (max-width: 599px) {
  .bp-anzeige { min-height: 220px; }
}

/* ============================================================
   BEITRÄGE UND ARCHIVE
   ============================================================ */
.bp-eintrag {
  padding: 24px 0;
  border-bottom: 1px solid var(--bp-raster);
}
.bp-eintrag:first-of-type { padding-top: 0; }
.bp-eintrag__titel { font-size: 1.75rem; line-height: 1.214; margin: 0 0 8px; }
.bp-eintrag__titel a { text-decoration: none; }
.bp-eintrag__titel a:hover { text-decoration: underline; text-decoration-thickness: 2px; background: none; }
.bp-eintrag__meta { margin: 0 0 8px; }
.bp-eintrag__auszug { max-width: var(--bp-prosa); margin: 0; }

.bp-inhalt { max-width: var(--bp-prosa); }
.bp-inhalt > h2, .bp-inhalt > h3, .bp-inhalt > h4 { margin-top: 1.5em; }
.bp-inhalt ul, .bp-inhalt ol { padding-left: 1.25em; }
.bp-inhalt li { margin: 0 0 8px; }
.bp-inhalt blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--bp-zebra);
  border-top: 3px solid var(--bp-text);
}
.bp-inhalt table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bp-inhalt th, .bp-inhalt td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--bp-raster); }
.bp-inhalt code, .bp-inhalt pre { font-family: var(--bp-satz); font-weight: 600; }
.bp-inhalt img { height: auto; }

/* ============================================================
   BAUSTEINE IM BEITRAGSINHALT
   ------------------------------------------------------------
   Eine Bearbeitung ist derselbe Gegenstand wie ein Arbeitsschritt,
   nur ohne Checkliste. Sie darf deshalb dieselben Bausteine
   verwenden: Belegblock, Tabelle, Ergebnisfeld, Zustandsmarke.
   Ohne die folgenden Regeln überschriebe der allgemeine Satz für
   .bp-inhalt sie — gleiche Spezifität, spätere Stelle im
   Stylesheet. Das ist kein neues Aussehen, sondern die
   Wiederherstellung des vorhandenen.
   ============================================================ */
.bp-inhalt .bp-recht > p { max-width: none; }
.bp-inhalt .bp-recht blockquote {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border-top: 0;
}
.bp-inhalt .bp-tabelle th,
.bp-inhalt .bp-tabelle td { padding: 12px 12px 12px 0; }
.bp-inhalt .bp-tabelle th {
  border-bottom: 3px solid var(--bp-text);
}
.bp-inhalt .bp-tabelle td:last-child,
.bp-inhalt .bp-tabelle th:last-child { padding-right: 0; }
.bp-inhalt .bp-untereinheit ul { padding-left: 0; }

/* Belegstatus-Liste: dieselbe Zustandsmarke wie Schiene, Fristentafel
   und Checkliste, mit ausgeschriebenem Wort daneben. Der Zustand wird
   nie über Farbe allein getragen — hier gar nicht über Farbe. */
.bp-inhalt .bp-belegstatus {
  list-style: none;
  margin: 16px 0 0;
  padding-left: 0;
  max-width: var(--bp-prosa);
}
.bp-inhalt .bp-belegstatus li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--bp-raster);
}
.bp-inhalt .bp-belegstatus li::before { content: none; }
.bp-inhalt .bp-belegstatus .bp-marke { margin-top: 4px; }

.bp-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 3px solid var(--bp-text);
}
.bp-blaettern .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 12px;
  text-decoration: none;
  border: 1px solid var(--bp-raster);
  font-variant-numeric: tabular-nums;
}
.bp-blaettern .page-numbers:hover { background: var(--bp-hover); }
.bp-blaettern .page-numbers.current {
  background: var(--bp-text);
  color: var(--bp-blatt);
  border-color: var(--bp-text);
}

/* ============================================================
   SUCHFORMULAR
   ============================================================ */
.bp-suche {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  max-width: var(--bp-prosa);
}
.bp-suche__feld { flex: 1 1 220px; }
.bp-suche label {
  display: block;
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.bp-suche input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-family: var(--bp-satz);
  font-size: 1.125rem;
  color: var(--bp-text);
  background: var(--bp-blatt);
  border: 2px solid var(--bp-bedienrahmen);
  border-radius: 0;
}

/* ============================================================
   FUSS
   ============================================================ */
.bp-fuss {
  background: var(--bp-blatt);
  border-top: 3px solid var(--bp-text);
  margin-top: 24px;
}
.bp-fuss__inner {
  max-width: calc(var(--bp-container) + 48px);
  margin: 0 auto;
  padding: 32px 24px 40px;
}
.bp-fuss__gruppe { margin: 0 0 24px; }
.bp-fuss__titel {
  font-family: var(--bp-kopf);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bp-raster);
}
.bp-fuss__netz { list-style: none; margin: 0; padding: 0; }
.bp-fuss__netz li { padding: 8px 0; border-bottom: 1px solid var(--bp-haarlinie); }
.bp-fuss__netz-aufgabe { color: var(--bp-sekundaer); font-size: 0.9375rem; display: block; }

/* Die Impressumszeile steht ungekürzt im Fuß JEDER Seite. */
.bp-impressum {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 3px solid var(--bp-text);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 46rem;
}
.bp-impressum p { margin: 0 0 8px; }
.bp-impressum p:last-child { margin: 0; }

/* Impressum und Datenschutzerklärung stehen im Fuß jeder Seite. Sie werden
   gegenüber dem übrigen Fußtext angehoben: § 5 DDG verlangt eine LEICHT
   ERKENNBARE Kennzeichnung, und ein Verweis, der sich typografisch nicht vom
   Umgebungstext abhebt, ist genau das nicht. Trefferfläche 44 px wie überall. */
.bp-impressum .bp-fuss__recht {
  font-family: var(--bp-kopf);
  font-weight: 600;
  margin: 16px 0 8px;
}
.bp-impressum .bp-fuss__recht a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 900px) {
  .bp-fuss__spalten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ============================================================
   MOBILE SATZGRÖSSEN
   ------------------------------------------------------------
   Der Fließtext bleibt bei 18/29px. Der Desktopsatz ist an
   keiner Stelle kleiner als der mobile — die Seite wird auf dem
   Werkstablett gelesen, nicht auf einem Redaktionsmonitor.
   ============================================================ */
@media (max-width: 1239px) {
  .bp-prosa, .bp-untereinheit ul, .bp-ergebnis, .bp-recht,
  .bp-weiche__frage, .bp-weiche__ergebnis, .bp-eintrag__auszug, .bp-inhalt {
    max-width: var(--bp-prosa-eng);
  }
}
@media (max-width: 599px) {
  h1 { font-size: 1.875rem; line-height: 1.2; }   /* 30/36 */
  h2 { font-size: 1.4375rem; line-height: 1.304; } /* 23/30 */
  h3 { font-size: 1.25rem; line-height: 1.35; }    /* 20/27 */
  .bp-weiche__knoepfe { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   BEWEGUNG
   ------------------------------------------------------------
   Die Seite bewegt sich fast nicht: es gibt keine Einblendungen,
   keine Parallaxe, kein Karussell. Bewegt wird nur die Füllung
   des Fortschrittsbalkens und die Sprungmarke. Beides wird bei
   prefers-reduced-motion abgeschaltet — auch eine kleine
   Bewegung kann bei vestibulären Störungen auslösen.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   KONTRASTMODUS
   ============================================================ */
@media (forced-colors: active) {
  .bp-blatt, .bp-tafel, .bp-schiene { background: Canvas; }
  .bp-schritt__quadrat,
  .bp-hauptnav a[aria-current],
  .bp-schiene__zeile--aktiv a,
  .bp-knopf--primaer {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
  .bp-anzeige { border-color: CanvasText; }
  /* Die Zustände bleiben durch Form und Wort unterscheidbar,
     nicht durch die Fläche — hier zahlt sich das aus. */
  .bp-marke svg { forced-color-adjust: auto; }
}

/* ============================================================
   DRUCK — die Werksakte
   ------------------------------------------------------------
   Was gedruckt wird, kommt in eine Akte und wird im Prüfungsfall
   vorgelegt. Deshalb: Grund und Blatt weiß, gelbe Flächen als
   schraffierte Flächen mit schwarzer Kante (Gelb verschwindet im
   Schwarzweißdruck), Beistellspalten und Anzeigenblock weg,
   Verweisziele als Text ausgegeben.
   ============================================================ */
@media print {
  :root {
    --bp-grund: #FFFFFF;
    --bp-blatt: #FFFFFF;
    --bp-zebra: #FFFFFF;
    --bp-hover: #FFFFFF;
    --bp-text: #000000;
    --bp-sekundaer: #333333;
  }

  body { font-size: 11pt; line-height: 1.45; }

  /* Der Anzeigenblock ist nicht Teil der Werksakte. */
  .bp-anzeige,
  .bp-schiene,
  .bp-leiste,
  .bp-hauptnav,
  .bp-sprungmarke,
  .bp-suche,
  .bp-nur-js,
  .bp-blaettern { display: none !important; }

  .bp-raster { display: block; padding: 0; max-width: none; }
  .bp-blatt--kopf, .bp-blatt--korpus, .bp-tafel { padding: 0; }

  /* Gelb wird zur schraffierten Fläche mit schwarzer Kante. */
  .bp-balken__fuellung,
  .bp-muster__fahne {
    background: repeating-linear-gradient(45deg, #FFF 0 3px, #000 3px 5px) !important;
    border: 2px solid #000 !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Verweisziele ausschreiben — ein Papierausdruck kann nicht
     klicken. Interne Anker und leere Ziele bleiben stumm. */
  .bp-inhalt a[href^="http"]::after,
  .bp-schritt a[href^="http"]::after,
  .bp-fuss a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .bp-schritt { break-inside: avoid-page; }
  h1, h2, h3 { break-after: avoid-page; }
  .bp-tabelle { break-inside: auto; }
  .bp-tabelle tr { break-inside: avoid; }

  /* Kopfzeile auf jeder Druckseite. @page-Ränder tragen den Rest. */
  @page { margin: 18mm 15mm; }
}


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

/* B7. Den Grid-Items fehlte min-width:0, deshalb ragten alle sieben Zellen
   des Schrittrasters 13 bis 112 px ueber ihre Spur und die Beschriftungen
   ueberlappten sichtbar. Deutsche Komposita brechen ohne diese beiden
   Angaben nicht. */
.bp-schiene__zeile { min-width: 0; }
.bp-schiene__titel { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 560px) {
  /* 83 px Spurbreite tragen kein "Werkseigene Produktionskontrolle". */
  .bp-schiene__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


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

/* ============================================================
   ÜBLICHE SEITENFORM — UMBAU VOM 05.08.2026
   ============================================================

   Ansage des Auftraggebers: die Seiten wichen „zu weit von der Norm ab".
   Das stimmte. Der vorherige Aufbau war ein dreispaltiges Arbeitsblatt mit
   klebender Schrittschiene links und Fristentafel rechts — eine Metapher
   aus dem technischen Zeichnen, nicht aus dem Web.

   Hier steht der Aufbau, den jeder Leser kennt: Titel und Vorspann ueber
   die volle Breite, darunter eine Lesespalte mit echter Seitenspalte,
   darunter Beitraege als Karten. Die Unterscheidung zu den sechs
   Schwesterseiten traegt jetzt Akzent, Typografie und Bildsprache — nicht
   mehr ein abweichendes Raster.

   Die alten Regeln fuer .bp-raster, .bp-schiene und .bp-blatt bleiben
   vorerst stehen: Unterseiten und Einzelbeitraege laufen noch darueber.
   Sie werden nach der Abnahme dieser Startseite nachgezogen. */

.bp-seite { display: block; }

.bp-mitte {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* ---------- Titelblock ---------- */

.bp-seitenkopf {
  padding-block: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--bp-raster);
}

.bp-seitenkopf h1 {
  /* Die Ueberschrift darf breiter laufen als der Fliesstext, aber nicht
     ueber die ganze Seite — sonst zerfaellt sie in zwei Leseeinheiten. */
  max-width: 22ch;
  margin: 6px 0 14px;
}

.bp-lead {
  max-width: 62ch;
  font-size: 1.125rem;
  line-height: 1.55;
  margin: 0 0 14px;
}

/* ---------- Zwei Spalten ---------- */

.bp-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  padding-block: clamp(32px, 4vw, 52px);
  align-items: start;
}

@media (min-width: 1040px) {
  .bp-spalten { grid-template-columns: minmax(0, 1fr) 320px; }

  .bp-neben {
    position: sticky;
    top: 24px;
  }
}

/* Lesebreite. Ueber 75 Zeichen findet das Auge den Zeilenanfang nicht mehr
   zuverlaessig zurueck. */
.bp-haupt > * { max-width: 72ch; }
.bp-haupt > figure,
.bp-haupt > .bp-karten,
.bp-haupt > section { max-width: none; }
.bp-haupt > section > p,
.bp-haupt > section > ul,
.bp-haupt > section > ol:not(.bp-karten) { max-width: 72ch; }

.bp-abschnitt { margin-block: clamp(32px, 4vw, 48px); }
.bp-abschnitt__lead { color: var(--bp-sekundaer); margin: 4px 0 20px; }

/* ---------- Die sieben Schritte als Karten ---------- */

.bp-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.bp-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--bp-blatt);
  border: 1px solid var(--bp-raster);
  min-width: 0;
}

.bp-karte__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
}

.bp-karte__link:hover .bp-karte__titel,
.bp-karte__link:focus-visible .bp-karte__titel { text-decoration: underline; }

.bp-karte__nr {
  flex: none;
  min-width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  background: var(--bp-text);
  color: var(--bp-blatt);
  font-size: .85rem;
  font-weight: 700;
}

.bp-karte__titel { overflow-wrap: break-word; hyphens: auto; }

.bp-karte__frage {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--bp-sekundaer);
}

/* ---------- Seitenspalte ---------- */

.bp-neben > * + * { margin-top: 24px; }

.bp-neben .bp-tafel {
  border: 1px solid var(--bp-raster);
  padding: 18px;
  background: var(--bp-blatt);
}

/* ---------- Abbildungen ---------- */

.bp-abb { margin-block: clamp(24px, 3vw, 36px); }
.bp-abb__flaeche { overflow-x: auto; }
.bp-abb svg { max-width: 100%; height: auto; display: block; }

.bp-abb figcaption {
  max-width: 72ch;
  margin-top: 10px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--bp-sekundaer);
}

/* ---------- Beitragsband ---------- */

.bp-beitragsband {
  border-top: 1px solid var(--bp-raster);
  padding-block: clamp(36px, 5vw, 56px);
}

.bp-beitragsband__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.bp-beitragsband__kopf h2 { margin: 0; }

.bp-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-teaser__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 14px;
  border-top: 3px solid var(--bp-text);
}

.bp-teaser__rubrik {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bp-sekundaer);
}

.bp-teaser__titel { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.bp-teaser__titel a { text-decoration: none; }
.bp-teaser__titel a:hover,
.bp-teaser__titel a:focus-visible { text-decoration: underline; }

.bp-teaser__anriss {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--bp-sekundaer);
}

.bp-teaser__datum { margin: 0; font-size: .8125rem; color: var(--bp-sekundaer); }

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

/* Diagramme schrumpfen auf dem Telefon unter die Lesbarkeit: Der Kasten
   "Bauprodukt / Verwendungszweck" stand bei 390 px in 5-px-Schrift. Ein
   Fachdiagramm mit Beschriftung wird deshalb nicht verkleinert, sondern
   bleibt auf seiner Mindestbreite und laesst sich seitlich schieben.
   tabindex und role, damit der Bereich auch mit der Tastatur erreichbar ist. */
.bp-abb__flaeche {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bp-abb__flaeche > svg {
  min-width: 520px;
  max-width: 100%;
  height: auto;
}

@media (min-width: 620px) {
  .bp-abb__flaeche > svg { min-width: 0; }
}