/* ==========================================================================
   THE HUMAN PERFORMANCE BLUEPRINT — Book design system
   Performance luxury × medical futurism × editorial. Dark, cyan/blue,
   thin lines, high information density. Layers on style.css variables.
   ========================================================================== */
:root {
  /* Die Ebook-Seiten führen eine eigene Tokenschicht (--bp-*). Sie war
     dunkel wie der Rest der Seite und blieb es deshalb beim Palettenwechsel
     stehen: 21 Kapitelseiten in Schwarz hinter einer hellen Website.
     Jetzt zeigt --bp-* auf die zentralen Tokens, statt eigene Werte zu
     führen — damit folgt der Lesestand künftig automatisch. */
  --bp-cyan: var(--accent-2); --bp-blue: var(--accent); --bp-ink: var(--bg-0);
  --bp-a: #3ddc84; --bp-b: #16C4F4; --bp-c: #f5a623; --bp-frontier: #b388ff; --bp-red: #ff5c6c;

  /* ---- SATZSPIEGEL -------------------------------------------------------
     Der alte Wert (820 px Rahmen, 780 px Textbreite bei 16,3 px Schrift) ergab
     im Browser gemessen ~96 Zeichen je Zeile. Ab etwa 85 Zeichen findet das
     Auge den Zeilenanfang nicht mehr zuverlässig — bei einem Werk, das man
     30 Minuten am Stück liest, ist das der teuerste Einzelfehler.
     Ziel: 62–75 Zeichen. Bei 18,4 px Schrift sind das ~680 px Textbreite. */
  --bp-measure: 680px;
  --bp-gutter: 20px;

  /* ---- TYPO-SKALA (fließend, ein System für Mobil bis 1920) --------------
     Alle Stufen wachsen an derselben Achse; kein Wert steht für sich. */
  --bp-fs-body: clamp(1.0625rem, 1.0rem + 0.28vw, 1.15rem);   /* 17.0 → 18.4 px */
  --bp-fs-lead: clamp(1.16rem, 1.08rem + 0.4vw, 1.32rem);
  --bp-fs-h2:   clamp(1.42rem, 1.28rem + 0.62vw, 1.72rem);
  --bp-fs-h3:   clamp(1.09rem, 1.05rem + 0.2vw, 1.19rem);
  --bp-fs-h4:   clamp(0.95rem, 0.93rem + 0.1vw, 1.0rem);
  --bp-fs-small: 0.875rem;
  --bp-fs-micro: 0.78rem;   /* Bildunterschriften, Quellen-Metazeilen */
  --bp-fs-label: 0.66rem;   /* Mono-Kicker; darunter wird es unlesbar */
  --bp-lh-body: 1.68;

  /* ---- VERTIKALER RHYTHMUS ----------------------------------------------
     Eine Basis (4 px) und eine feste Leiter. Vorher standen im Werk 14, 22,
     24, 26, 30, 37, 40 und 44 px nebeneinander, ohne gemeinsamen Nenner. */
  --bp-s1: 4px;  --bp-s2: 8px;  --bp-s3: 12px; --bp-s4: 16px;
  --bp-s5: 24px; --bp-s6: 32px; --bp-s7: 48px; --bp-s8: 64px; --bp-s9: 96px;

  /* ---- FLÄCHEN & LINIEN (eine Sprache statt sieben Zufallswerten) -------- */
  --bp-line: var(--wash-4);
  --bp-line-soft: var(--wash-3);
  --bp-surface: var(--wash-1);
  --bp-surface-2: var(--wash-2);
  --bp-radius: 14px;          /* Karten, Boxen, Tabellenrahmen */
  --bp-radius-lg: 18px;       /* große Flächen: Figur, Instrument, CTA */
  --bp-radius-sm: 10px;       /* Chips, Eingaben, kleine Knöpfe */

  /* ---- TEXTFARBEN -------------------------------------------------------- */
  --bp-text: var(--text);         /* Fließtext */
  --bp-text-strong: var(--text);  /* <strong>, Zwischenüberschriften */
  --bp-text-head: var(--text);    /* Überschriften */
  --bp-text-mut: var(--muted);     /* Sekundär: Bildunterschrift, Meta */
  --bp-text-dim: var(--muted-2);     /* Tertiär: Mono-Kicker, Tabellenkopf */
}
.bp {
  max-width: calc(var(--bp-measure) + 2 * var(--bp-gutter));
  margin: 0 auto;
  padding: 0 var(--bp-gutter);
}
.bp-wrap { background: var(--bp-ink); }
/* Sprungziele aus dem Inhaltsverzeichnis dürfen nicht unter dem fixierten
   Header landen — betrifft jede Kapitel-Navigation im Blueprint-Reader.
   Der Reader legt zusätzlich eine Orientierungsleiste an; --bp-jump-clear
   wird dort gesetzt und ist hier bewusst mit 0 vorbelegt. */
.bp-wrap [id] { scroll-margin-top: calc(var(--header-h) + var(--bp-jump-clear, 0px) + var(--bp-s5)); }

/* ---- AUSBRUCH AUS DEM SATZSPIEGEL ---------------------------------------
   Tabellen, Figuren, Instrumente und Kartenraster brauchen mehr Breite als
   Fließtext — sonst wird eine fünfspaltige Marker-Tabelle in 680 px gequetscht.
   Der Ausbruch ist relativ zur Elternbreite formuliert und funktioniert damit
   in JEDER Verschachtelungstiefe des entschlüsselten Werks. Auf schmalen
   Geräten fällt er über clamp() sauber auf 0 zurück. */
.bp .bp-tablewrap,
.bp .bp-mech,
.bp .bp-figure,
.bp .bp-grid,
.bp .bp-nums,
.bp .p2svg {
  --bp-out: clamp(0px, (100vw - var(--bp-measure)) / 2 - 40px, 92px);
  margin-inline: calc(-1 * var(--bp-out));
  width: calc(100% + 2 * var(--bp-out));
}

/* Reading progress */
.bp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60; background: linear-gradient(90deg, var(--bp-blue), var(--bp-cyan)); transition: width .12s linear; }

/* ---------- COVER ---------- */
.bp-cover { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.bp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bp-cover .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0) 40%, rgba(var(--scrim-rgb), .35) 66%, var(--bp-ink) 99%); }
.bp-cover .cap { position: relative; z-index: 2; width: 100%; text-align: center; padding: 0 20px 44px; }
.bp-cover .cap .kick { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); }
.bp-cover .cap .sub { color: var(--muted); max-width: 40ch; margin: 12px auto 0; font-size: 1rem; }
.bp-scroll { margin-top: 18px; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: rgba(0, 0, 0, 0.825); }

/* ---------- SECTION SHELL ----------
   Der vertikale Rhythmus folgt einer Regel: je größer der Sprung in der
   Hierarchie, desto größer der Abstand DAVOR — und immer deutlich kleiner
   danach. Dadurch gehört eine Überschrift sichtbar zu dem, was ihr folgt,
   nicht zu dem, was über ihr steht. */
.bp-part { padding: var(--bp-s7) 0 var(--bp-s2); }
.bp-part-head { border-top: 1px solid var(--bp-line-soft); padding-top: var(--bp-s6); margin-bottom: var(--bp-s2); }
.bp-part-no { font-family: var(--font-body); font-weight: 600; font-size: var(--bp-fs-label); letter-spacing: 0.01em; color: var(--bp-cyan); }
/* Kapitelüberschriften sind h2 (eine h1 je Dokument, auf dem Cover).
   Der Selektor greift bewusst ohne Tag, damit Größe und Abstand identisch
   bleiben. */
.bp .bp-h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.7rem); line-height: 1.06; margin: var(--bp-s2) 0 var(--bp-s2); letter-spacing: -.018em; color: var(--bp-text-head); text-wrap: balance; }

/* h2 = Abschnitt innerhalb eines Kapitels. Trägt eine kurze Akzentlinie:
   beim Scrollen ist damit ohne Lesen erkennbar, dass hier ein neuer Gedanke
   beginnt — vorher unterschied h2 sich von h3 nur um 0,3 rem. */
.bp h2.bp-h2 {
  font-size: var(--bp-fs-h2); line-height: 1.22; letter-spacing: -.015em;
  margin: var(--bp-s8) 0 var(--bp-s4); color: var(--bp-text-head);
  padding-top: var(--bp-s5); position: relative; text-wrap: balance;
}
.bp h2.bp-h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--bp-cyan), rgba(22,196,244,0));
}
/* Direkt nach einem Kapitel-Auftakt braucht das erste h2 keine zweite
   Zäsur — sonst stehen zwei Trenner übereinander. */
.bp-chapter-open + * > h2.bp-h2:first-child,
.bp-chapter-open + h2.bp-h2 { margin-top: var(--bp-s6); }

.bp h3.bp-h3 { font-size: var(--bp-fs-h3); line-height: 1.34; margin: var(--bp-s6) 0 var(--bp-s3); color: var(--bp-text-strong); font-weight: 600; letter-spacing: -.005em; }
.bp h4 { font-size: var(--bp-fs-h4); line-height: 1.4; margin: var(--bp-s5) 0 var(--bp-s2); color: var(--bp-text-strong); font-weight: 600; }

.bp p { color: var(--bp-text); line-height: var(--bp-lh-body); margin: 0 0 var(--bp-s4); font-size: var(--bp-fs-body); }
.bp p.lead { font-size: var(--bp-fs-lead); color: #dfe8f0; line-height: 1.58; margin-bottom: var(--bp-s5); }
.bp strong { color: var(--bp-text-strong); font-weight: 600; }
/* <em> ist im Werk Hervorhebung, nicht Fremdwort — Farbe statt Kursive
   bleibt richtig; sie war nur nicht von Links unterscheidbar. */
.bp em { color: var(--accent); font-style: normal; font-weight: 500; }
.bp ul, .bp ol { color: var(--bp-text); line-height: var(--bp-lh-body); margin: 0 0 var(--bp-s4); padding-left: var(--bp-s5); font-size: var(--bp-fs-body); }
.bp li { margin: var(--bp-s2) 0; padding-left: 2px; }
.bp ul > li::marker { color: rgba(22,196,244,.7); }
.bp ol > li::marker { color: var(--bp-text-dim); font-family: var(--font-mono); font-size: .82em; }
.bp a.deep { color: var(--bp-cyan); text-decoration: none; border-bottom: 1px solid rgba(22, 196, 244,.35); }
.bp a.deep:hover { border-bottom-color: var(--bp-cyan); }

/* Externe Quellenlinks im Fließtext öffnen in einem neuen Tab und sagen das
   auch — sonst verliert der Leser den Reader mitten im Kapitel. */
.bp a[target="_blank"]::after {
  content: ""; display: inline-block; width: .62em; height: .62em; margin-left: .3em;
  vertical-align: baseline; opacity: .7;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bp .bp-toc a[target="_blank"]::after, .bp-nav a[target="_blank"]::after { content: none; }

/* Kicker / recurring section labels (chapter skeleton) */
.bp-block { font-family: var(--font-body);
  font-weight: 600; font-size: var(--bp-fs-label); letter-spacing: 0.01em; color: var(--bp-text-dim); margin: var(--bp-s6) 0 var(--bp-s1); }

/* ---------- EVIDENCE BADGES ----------
   Evidenzstärke ist im Werk eine tragende Information, kein Schmuck. Deshalb:
   klein, monospaced, ein Punkt als Farbträger, nie gefüllt-bunt. Der Punkt
   trägt die Farbe, die Schrift bleibt hell — so sind die Stufen auch bei
   Farbfehlsichtigkeit über Position und Text unterscheidbar. */
.ev {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.01em;
  padding: 3px 9px 3px 8px; border-radius: 999px; border: 1px solid;
  white-space: nowrap; vertical-align: middle; line-height: 1.5;
}
.ev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ev-a { color: var(--bp-a); border-color: rgba(61,220,132,.4); }
.ev-b { color: var(--bp-b); border-color: rgba(22, 196, 244,.4); }
.ev-c { color: var(--bp-c); border-color: rgba(245,166,35,.4); }
.ev-frontier { color: var(--bp-frontier); border-color: rgba(179,136,255,.4); }
.ev-red { color: var(--bp-red); border-color: rgba(255,92,108,.45); }

/* ---------- INFOBOXES ----------
   EIN Kartensystem: gleicher Radius, gleiche Polsterung, gleiche Kopfzeile.
   Unterschieden wird ausschließlich über eine 3-px-Akzentkante links und die
   Farbe der Kopfzeile — nicht über sieben verschiedene Rahmenstärken. */
.box {
  margin: var(--bp-s5) 0; padding: var(--bp-s4) var(--bp-s5);
  border-radius: var(--bp-radius); border: 1px solid var(--bp-line);
  border-left-width: 3px; border-left-color: var(--bp-line);
  background: var(--bp-surface); position: relative;
}
.box .box-t {
  display: block; font-family: var(--font-body); font-size: var(--bp-fs-label);
  letter-spacing: 0.01em; margin-bottom: var(--bp-s2); font-weight: 500;
}
.box > :last-child { margin-bottom: 0; }
.box p { font-size: calc(var(--bp-fs-body) * .97); }
.box.insight { border-left-color: var(--bp-cyan); background: linear-gradient(100deg, rgba(22, 196, 244,.055), var(--bp-surface) 62%); }
.box.insight .box-t { color: var(--bp-cyan); }
.box.myth { border-left-color: var(--bp-c); }
.box.myth .box-t { color: var(--bp-c); }
.box.frontier { border-left-color: var(--bp-frontier); }
.box.frontier .box-t { color: var(--bp-frontier); }
.box.datatrap { border-left-color: var(--accent); }
.box.datatrap .box-t { color: var(--accent); }
.box.clinical { border-left-color: var(--wash-6); }
.box.clinical .box-t { color: var(--muted); }
.box.bottom { border-left-color: var(--bp-a); background: linear-gradient(100deg, rgba(61,220,132,.05), var(--bp-surface) 62%); }
.box.bottom .box-t { color: var(--bp-a); }

/* ---------- MEDICAL RED ZONE ----------
   Ein medizinisch relevanter Hinweis darf nicht überscrollbar sein. Vorher
   unterschied .redflag sich von .myth nur in der Randfarbe — beim schnellen
   Scrollen sahen beide gleich aus. Jetzt: kräftigere Kante, eigener Grund,
   ein gezeichnetes Warnzeichen (kein Emoji) und eine Kopfzeile, die den Blick
   fängt. Bewusst NICHT knallrot flächig: das Werk enthält viele solcher
   Hinweise, eine Panikwand würde sie gemeinsam entwerten. */
.box.redflag {
  border-color: rgba(255,92,108,.28); border-left-color: var(--bp-red);
  background: linear-gradient(100deg, rgba(255,92,108,.075), rgba(255,92,108,.022) 62%);
  padding-left: calc(var(--bp-s5) + 26px);
}
.box.redflag::before {
  content: ""; position: absolute; left: var(--bp-s4); top: calc(var(--bp-s4) + 1px);
  width: 17px; height: 17px; background: var(--bp-red); opacity: .95;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 3.9 1.8 18.4A2 2 0 0 0 3.5 21.4h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.4v4.2M12 17.3h.01' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 3.9 1.8 18.4A2 2 0 0 0 3.5 21.4h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.4v4.2M12 17.3h.01' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.box.redflag .box-t { color: #ff8a95; letter-spacing: .22em; }
.box.redflag strong { color: #ffe3e6; }
@media (max-width: 560px) {
  .box { padding: var(--bp-s4); }
  .box.redflag { padding-left: calc(var(--bp-s4) + 24px); }
  .box.redflag::before { left: var(--bp-s3); }
}

/* ---------- FRAMEWORK STACK (in-code visual) ---------- */
.stack { margin: var(--bp-s5) 0; display: flex; flex-direction: column; gap: 6px; }
.stack .lvl { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); background: linear-gradient(100deg, rgba(22, 196, 244,.04), transparent 60%); }
.stack .lvl .id { font-family: var(--font-mono); font-size: .72rem; color: var(--bp-cyan); }
.stack .lvl b { font-size: .96rem; }
.stack .lvl span { display: block; font-size: .82rem; color: var(--muted-2); }
.stack .lvl.l0 { border-color: rgba(61,220,132,.3); }
.stack .lvl.l7 { border-color: rgba(179,136,255,.3); }

/* Intervention pyramid */
.pyr { margin: var(--bp-s5) 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pyr .row { border: 1px solid var(--bp-line); border-radius: var(--bp-radius-sm); padding: 9px 14px; text-align: center; background: var(--wash-1); }
.pyr .row b { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; }
.pyr .row span { display: block; font-size: .78rem; color: var(--muted-2); margin-top: 2px; }
.pyr .r1 { width: 96%; border-color: rgba(61,220,132,.35); } .pyr .r2 { width: 80%; } .pyr .r3 { width: 64%; }
.pyr .r4 { width: 48%; border-color: rgba(245,166,35,.35); } .pyr .r5 { width: 34%; border-color: rgba(179,136,255,.4); }

/* Decision tree */
.tree { margin: var(--bp-s5) 0; border-left: 2px solid rgba(22, 196, 244,.35); padding-left: 16px; }
.tree .q { font-weight: 600; color: var(--text); margin: 14px 0 6px; }
.tree .step { display: flex; gap: 10px; margin: 6px 0; font-size: .92rem; color: var(--muted); }
.tree .step .n { font-family: var(--font-mono); font-size: .7rem; color: var(--bp-cyan); flex: 0 0 auto; padding-top: 2px; }
.tree .doc { color: var(--bp-c); }

/* Case study */
.case { margin: var(--bp-s5) 0; border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg); overflow: hidden; }
.case .ch { padding: 14px 18px; background: rgba(22, 196, 244,.05); border-bottom: 1px solid var(--bp-line-soft); }
.case .ch .tag { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); }
.case .ch b { display: block; font-size: 1.02rem; margin-top: 4px; }
.case .cb { padding: 16px 18px; }
.case .facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.case .facts span { font-size: .74rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--wash-4); color: var(--muted); }

/* ---------- MARKER- / DATENTABELLE ----------
   Vorher: nackte Tabelle ohne Rahmen, auf 360 px mit gemessenen 11 von 11
   Tabellen im unkontrollierten Überlauf. Jetzt eine echte Komponente mit
   Rahmen, Kopfzeile und zwei Mobilstrategien (siehe .bp-tablewrap). */
.bp-table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--bp-fs-small); }
.bp-table th {
  text-align: left; font-family: var(--font-body); font-size: var(--bp-fs-label);
  letter-spacing: 0.01em; color: var(--bp-text-dim); font-weight: 500;
  padding: var(--bp-s3) var(--bp-s4); border-bottom: 1px solid var(--bp-line);
  background: var(--wash-1); white-space: nowrap;
}
.bp-table td { padding: var(--bp-s3) var(--bp-s4); border-bottom: 1px solid var(--bp-line-soft); color: var(--muted); vertical-align: top; line-height: 1.55; }
.bp-table tbody tr:last-child td { border-bottom: 0; }
.bp-table tbody tr:hover td { background: var(--wash-1); }
/* Zahlen in Tabellen tabellarisch setzen — sonst springen die Spalten. */
.bp-table td { font-variant-numeric: tabular-nums; }

/* Rahmen + horizontale Rolle. Der Wrapper wird vom Reader zur Laufzeit um
   jede Tabelle des Werks gelegt (das verschlüsselte Markup lässt sich nicht
   ändern); .bp-scroll-x aus dem Bestand bleibt als Alias gültig. */
.bp-tablewrap, .bp-scroll-x {
  margin: var(--bp-s5) 0; border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius); overflow: hidden; background: var(--bp-surface);
  position: relative;
}
.bp-tablewrap > .bp-tablescroll, .bp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bp-tablewrap > .bp-tablescroll { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.33) transparent; }
.bp-tablewrap > .bp-tablescroll::-webkit-scrollbar { height: 8px; }
.bp-tablewrap > .bp-tablescroll::-webkit-scrollbar-thumb { background: var(--wash-6); border-radius: 999px; }
/* Rechte Kante andeuten, solange noch etwas außerhalb liegt — sonst ist auf
   dem Telefon nicht erkennbar, DASS die Tabelle weitergeht. */
.bp-tablewrap.is-scrollable::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 40px;
  pointer-events: none; border-radius: 0 var(--bp-radius) var(--bp-radius) 0;
  background: linear-gradient(90deg, var(--surface), var(--card));
  transition: opacity .18s ease;
}
.bp-tablewrap.is-scrollable.is-end::after { opacity: 0; }
.bp-tablehint {
  display: none; align-items: center; gap: 6px; padding: var(--bp-s2) var(--bp-s4);
  font-family: var(--font-body);
  font-weight: 600; font-size: var(--bp-fs-label); letter-spacing: 0.01em; color: var(--bp-text-dim); border-top: 1px solid var(--bp-line-soft);
}
.bp-tablewrap.is-scrollable .bp-tablehint { display: flex; }

/* Mobile Karten-Ansicht für breite Tabellen (≥4 Spalten). Horizontales
   Rollen ist bei einer fünfspaltigen Marker-Tabelle auf 360 px keine Lösung,
   sondern eine Zumutung: der Leser verliert die Zeilenzugehörigkeit. Der
   Reader schreibt dafür data-th aus dem <th> in jede Zelle. */
@media (max-width: 620px) {
  .bp-tablewrap.is-stacked { border: 0; background: none; overflow: visible; }
  .bp-tablewrap.is-stacked .bp-tablehint, .bp-tablewrap.is-stacked::after { display: none; content: none; }
  .bp-tablewrap.is-stacked > .bp-tablescroll { overflow: visible; }
  .bp-tablewrap.is-stacked table, .bp-tablewrap.is-stacked tbody, .bp-tablewrap.is-stacked tr, .bp-tablewrap.is-stacked td { display: block; width: auto; }
  .bp-tablewrap.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bp-tablewrap.is-stacked tr {
    border: 1px solid var(--bp-line); border-radius: var(--bp-radius);
    background: var(--bp-surface); padding: var(--bp-s2) var(--bp-s4) var(--bp-s3);
    margin-bottom: var(--bp-s3);
  }
  .bp-tablewrap.is-stacked td { border: 0; padding: var(--bp-s2) 0 0; }
  .bp-tablewrap.is-stacked td + td { border-top: 1px solid var(--bp-line-soft); margin-top: var(--bp-s2); }
  .bp-tablewrap.is-stacked td::before {
    content: attr(data-th); display: block; font-family: var(--font-body);
  font-weight: 600;
    font-size: var(--bp-fs-label); letter-spacing: 0.01em;
    color: var(--bp-text-dim); margin-bottom: 3px;
  }
  /* Erste Zelle = Zeilenkopf: größer, ohne Label. */
  .bp-tablewrap.is-stacked td:first-child { color: var(--bp-text-strong); font-size: calc(var(--bp-fs-body) * .97); font-weight: 600; padding-top: var(--bp-s2); }
  .bp-tablewrap.is-stacked td:first-child::before { content: none; }
}

/* Matrix / grid cards */
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--bp-s3); margin: var(--bp-s5) 0; }
.bp-card { border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: var(--bp-s4) var(--bp-s5); background: var(--bp-surface); }
.bp-card b { font-size: .96rem; display: block; margin-bottom: var(--bp-s1); color: var(--bp-text-head); }
.bp-card p { font-size: var(--bp-fs-small); margin: var(--bp-s2) 0 0; line-height: 1.6; }
.bp-card > :last-child { margin-bottom: 0; }
.bp-card b + span, .bp-card b ~ span { display: block; font-size: var(--bp-fs-small); color: var(--bp-text-mut); line-height: 1.6; }

/* Verdict chips (hype graveyard) */
.verdict { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; padding: 2px 8px; border-radius: var(--bp-radius-sm); }
.v-worth { color: var(--bp-a); background: rgba(61,220,132,.12); }
.v-cond { color: var(--bp-cyan); background: rgba(22, 196, 244,.1); }
.v-early { color: var(--bp-frontier); background: rgba(179,136,255,.12); }
.v-over { color: var(--bp-c); background: rgba(245,166,35,.12); }
.v-avoid { color: var(--bp-red); background: rgba(255,92,108,.12); }

/* TOC */
.bp-toc { margin: var(--bp-s6) 0; border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg); padding: 20px 22px; }
.bp-toc h2 { font-size: 0.75rem !important; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.01em; color: var(--muted-2); margin: 0 0 14px !important; }
.bp-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.bp-toc li { counter-increment: t; margin: 2px 0; }
.bp-toc a { display: flex; gap: 12px; padding: 7px 0; color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--wash-3); font-size: .95rem; }
.bp-toc a::before { content: counter(t, decimal-leading-zero); font-family: var(--font-mono); font-size: .72rem; color: var(--bp-cyan); flex: 0 0 34px; }
.bp-toc a:hover { color: var(--text); }

/* Platform CTA */
.bp-cta { margin: var(--bp-s5) 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid rgba(22, 196, 244,.25); border-radius: var(--bp-radius); background: linear-gradient(100deg, rgba(22, 196, 244,.06), transparent 70%); }
.bp-cta .t { flex: 1; min-width: 200px; }
.bp-cta .t b { display: block; }
.bp-cta .t span { font-size: .85rem; color: var(--muted-2); }
.bp-cta a { flex: 0 0 auto; }

/* Callout number strip */
.bp-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--bp-s3); margin: var(--bp-s5) 0; }
.bp-num { text-align: center; padding: 14px; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); }
.bp-num b { display: block; font-size: 1.5rem; color: var(--text); }
.bp-num span { font-size: .74rem; color: var(--muted-2); }

/* ---------- COVER TITLE + TAGS (für Bücher mit Titel-Cover, z. B. Ultimate Stack) ---------- */
.bp-cover .bp-cover-title { font-size: clamp(2.6rem, 9vw, 5.4rem); line-height: .92; letter-spacing: -.02em; margin: 10px 0 4px; color: var(--text); font-weight: 800; }
.bp-cover .bp-cover-title span { background: linear-gradient(135deg, var(--bp-blue), var(--bp-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bp-cover-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 16px auto 0; max-width: 44ch; }
.bp-cover-tags span { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(22, 196, 244,.35); color: var(--muted); }

/* ---------- CHAIN-DIAGRAMM (node → arrow → node) ---------- */
.bp-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--bp-s2); margin: var(--bp-s5) 0; }
.bp-chain .node { flex: 1 1 140px; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 12px 14px; background: linear-gradient(100deg, rgba(22, 196, 244,.04), transparent 60%); }
.bp-chain .node b { display: block; font-size: .95rem; color: var(--text); }
.bp-chain .node small { color: var(--muted-2); font-size: .8rem; }
.bp-chain .arrow { display: flex; align-items: center; color: var(--bp-cyan); font-size: 1.2rem; flex: 0 0 auto; }

/* ---------- KARTEN-VARIANTEN + KICKER ---------- */
.bp-card .bp-card-kick { display: block; font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); margin-bottom: 6px; }
.bp-card h3 { font-size: .98rem; margin: 0 0 6px; color: var(--text); }
.bp-card-red { border-color: rgba(255,92,108,.35); background: rgba(255,92,108,.04); }
.bp-card-red .bp-card-kick { color: var(--bp-red); }
.bp-card-blue { border-color: rgba(22, 196, 244,.3); }
.bp-card-accent { border-color: rgba(61,220,132,.3); background: rgba(61,220,132,.04); }
.bp-card-accent .bp-card-kick { color: var(--bp-a); }

/* ---------- FIGUR + BILDUNTERSCHRIFT ---------- */
.bp-figure { margin: var(--bp-s6) 0; border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg); overflow: hidden; }
.bp-figure img { display: block; width: 100%; height: auto; }
/* Hochformat-Grafiken (900×1599) dürfen den Viewport nicht füllen: Höhe
   deckeln, zentriert auf dunklem Grund — der Lesefluss bleibt erhalten. */
.bp-figure img[width="900"] { width: auto; max-width: 100%; max-height: min(68vh, 560px); margin: 0 auto; background: #0a0d12; }
.bp-figure:has(img[width="900"]) { background: #0a0d12; }
.bp-figcap { padding: 12px 16px; font-size: .82rem; color: var(--muted-2); background: var(--wash-1); }

/* ---------- PULL-QUOTE ---------- */
.bp-pull { margin: var(--bp-s7) 0; padding: var(--bp-s1) 0 var(--bp-s1) var(--bp-s5); border-left: 3px solid #16C4F4; }
.bp-pull p { margin: 0; font-family: var(--font-display, inherit); font-size: 1.22rem; line-height: 1.45; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
@media (min-width: 700px) { .bp-pull p { font-size: 1.38rem; } }

/* ---------- QUELLEN-SEKTION ----------
   Quellen sollen belegen, nicht den Lesefluss zumüllen. Deshalb: nummeriert
   (der Leser kann eine Referenz benennen), Titel zuerst, Metazeile leiser,
   Link als eigene Zeile mit Ziel-Hinweis. Der Reader klappt den Block
   zusätzlich zusammen, damit das Kapitelende nicht in einer Literaturwand
   endet. */
.bp-sources { margin-top: var(--bp-s7); }
.bp-sources ol, .bp-sources ul { list-style: none; padding: 0; margin: 0; counter-reset: src; }
.bp-sources li {
  counter-increment: src; position: relative;
  color: var(--bp-text); margin: 0; font-size: var(--bp-fs-small); line-height: 1.6;
  padding: var(--bp-s3) 0 var(--bp-s3) 38px; border-bottom: 1px solid var(--bp-line-soft);
}
.bp-sources li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--bp-s3) + 2px);
  font-family: var(--font-mono); font-size: var(--bp-fs-label);
  letter-spacing: .06em; color: var(--bp-cyan); opacity: .8;
}
.bp-sources li:last-child { border-bottom: 0; }
.bp-sources li > div:first-of-type { color: var(--bp-text-strong); font-weight: 600; }
.bp-sources li > div { color: var(--bp-text-mut); font-size: var(--bp-fs-micro); margin: 3px 0 0; }
.bp-sources a { color: var(--bp-cyan); text-decoration: none; border-bottom: 1px solid rgba(22,196,244,.3); word-break: break-word; }
.bp-sources a:hover { border-bottom-color: var(--bp-cyan); }
.bp-sources em { color: var(--accent); font-style: normal; }

/* Zusammenklappbarer Quellenblock (Reader setzt <details> zur Laufzeit). */
.bp-srcfold { border: 1px solid var(--bp-line); border-radius: var(--bp-radius); background: var(--bp-surface); margin: var(--bp-s5) 0; }
.bp-srcfold > summary {
  list-style: none; cursor: pointer; padding: var(--bp-s4) var(--bp-s5);
  display: flex; align-items: center; gap: var(--bp-s3);
  font-family: var(--font-body);
  font-weight: 600; font-size: var(--bp-fs-label);
  letter-spacing: 0.01em; color: var(--bp-text-dim);
}
.bp-srcfold > summary::-webkit-details-marker { display: none; }
.bp-srcfold > summary::after {
  content: ""; margin-left: auto; width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.bp-srcfold[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.bp-srcfold > summary:hover { color: var(--bp-text-strong); }
.bp-srcfold > summary:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: -2px; border-radius: var(--bp-radius); }
.bp-srcfold .bp-srcbody { padding: 0 var(--bp-s5) var(--bp-s3); }
.bp-srcfold .bp-sources { margin-top: 0; }

/* ---------- DOC-RESTE AUF DUNKLEM bp-GRUND (Footer / Disclaimer / Diagramm) ---------- */
.bp .doc-footer { border-top-color: var(--wash-4); color: var(--muted-2); }
.bp .doc-disclaimer { color: var(--muted-2); }
.bp .doc-diagram { background: #f7f9fc; border-color: #e6eaf1; }

/* ---------- PROTOKOLL-RESTE (Chain-Pills + System-Grafiken) ---------- */
.bp .p2chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 26px; margin: 18px 0; }
.bp .p2chain span { position: relative; background: var(--wash-1); border: 1px solid var(--wash-4); border-radius: var(--bp-radius-sm); padding: 9px 13px; font-size: .86rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.bp .p2chain span:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--bp-cyan); font-size: 1rem; }
.bp .p2svg { display: block; width: 100%; height: auto; margin: 24px 0; background: var(--wash-1); border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg); padding: 12px; }

/* ---------- DUNKLES GATE (Freischalt-Seite im bp-Look) ---------- */
.bp-gate {
  max-width: 520px; margin: calc(var(--header-h) + var(--bp-s8)) auto var(--bp-s9);
  padding: var(--bp-s8) var(--bp-s6) var(--bp-s7); text-align: center;
  border: 1px solid var(--bp-line); border-radius: 22px;
  background: linear-gradient(180deg, rgba(22, 196, 244,.06), var(--card));
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.bp-gate-kick { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--bp-fs-label); letter-spacing: 0.01em; color: var(--bp-cyan); margin-bottom: var(--bp-s4); }
.bp-gate h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.05rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--bp-s3); color: var(--text); }
.bp-gate p { color: var(--bp-text-mut); margin: 0 0 var(--bp-s5); font-size: .96rem; line-height: 1.6; }
.bp-gate-label {
  display: block; text-align: left; font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--bp-fs-label); letter-spacing: 0.01em;
  color: var(--bp-text-dim); margin-bottom: var(--bp-s2);
}
.bp-gate input {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--wash-5); border-radius: var(--bp-radius-sm);
  background: var(--wash-2); color: var(--text); text-align: center;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
  margin-bottom: var(--bp-s3);
}
.bp-gate input::placeholder { color: #5f7182; letter-spacing: .08em; }
.bp-gate input:focus { outline: none; border-color: var(--bp-cyan); box-shadow: 0 0 0 3px rgba(22,196,244,.18); }
.bp-gate .bp-gate-note { font-size: .84rem; color: var(--bp-text-dim); margin: var(--bp-s4) 0 0; text-wrap: pretty; }
.bp-gate .bp-gate-links { font-size: .88rem; color: var(--bp-text-mut); margin: var(--bp-s4) 0 0; text-wrap: pretty; }
.bp-gate .bp-gate-links a { color: var(--bp-cyan); text-decoration: none; border-bottom: 1px solid rgba(22,196,244,.3); padding-bottom: 1px; }
.bp-gate .bp-gate-links a:hover { border-bottom-color: var(--bp-cyan); }
@media (max-width: 560px) { .bp-gate { margin-top: calc(var(--header-h) + var(--bp-s5)); padding: var(--bp-s6) var(--bp-s5); } }
.bp-gate .gate-btn { width: 100%; min-height: 52px; padding: 14px 16px; border: 0; border-radius: var(--bp-radius-sm); cursor: pointer; font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: #04121c; background: linear-gradient(135deg, var(--bp-blue), var(--bp-cyan)); transition: filter .15s ease, transform .05s ease; }
.bp-gate .gate-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bp-gate .gate-btn:hover { filter: brightness(1.08); }
.bp-gate .gate-btn:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .bp .bp-h1 { font-size: 1.7rem; }
  .stack .lvl { grid-template-columns: 44px 1fr; }
  .bp-cover { min-height: 84vh; }
  .bp-cover .bp-cover-title { font-size: 3rem; }
  .bp-chain .arrow { transform: rotate(90deg); width: 100%; justify-content: center; }
}
@media print { .bp-cover { min-height: auto; } .bp-progress, .bp-cta { display: none; } .bp p, .bp li { color: #111; } }

/* ---------- COVER OHNE FOTO: neue Kapitel (00/11/12) im System-Look (P16-E) ---------- */
.bp-cover.nofoto { min-height: 66vh; align-items: center; background: radial-gradient(130% 90% at 50% 0%, rgba(22, 196, 244,.13), transparent 58%), var(--bp-ink); }
.bp-cover.nofoto::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 0, 0, 0.053) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.053) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 50% 32%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% 32%, #000, transparent 72%); }
.bp-cover.nofoto .cap { padding: calc(var(--header-h) + 46px) 20px 54px; }
.bp-cover.nofoto .bp-cover-title { margin-top: 8px; }
.bp-cover.nofoto .kick { display: inline-block; }

/* Evidenz-Label KNOWN/LIKELY/… — nutzt die bestehende .ev-Pill-Basis (oben),
   nur eigene Farbmodifier. KEIN erneutes .ev { } (würde .ev-a/.ev-red brechen). */
.ev.known { border-color: rgba(61,220,132,.4); color: #7ee6a8; }
.ev.likely { border-color: rgba(22, 196, 244,.4); color: var(--accent); }
.ev.plausible { border-color: rgba(245,166,35,.4); color: #f5c06a; }
.ev.uncertain { border-color: var(--wash-6); color: #9fb2c2; }
.ev.experimental { border-color: rgba(179,136,255,.4); color: #c3a8ff; }

/* ---------- MM / MECHANISM — Motion-Instrument (Flagship Motion #01) ---------- */
.bp-mech { margin: var(--bp-s6) 0; border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg); overflow: hidden; background: #05070b; }
.bp-mech-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px 12px; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); border-bottom: 1px solid var(--wash-3); }
.bp-mech-head .sub { color: #6f8698; letter-spacing: .18em; }
.bp-mech-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(22, 196, 244,.4), transparent); }
.bp-mech-stage { position: relative; aspect-ratio: 16 / 9; background: #05070b; }
.bp-mech-stage video { display: block; width: 100%; height: 100%; object-fit: cover; background: #05070b; }
.bp-mech-cap { padding: 13px 16px 15px; font-size: .84rem; line-height: 1.55; color: var(--muted-2); background: var(--wash-1); }
.bp-mech-cap strong { color: var(--muted); font-weight: 600; }
/* Reduce-Motion & preload=none: das Poster-Attribut trägt die Aussage; das JS
   startet Auto-Play nur im Viewport und nur ohne reduce-motion — sonst bleibt
   das Posterframe stehen und die Videodaten werden nie geladen. */

/* ---------- PROTOKOLL-RAHMUNG: freie Ebooks sind Kapitel des Systems (P16-D1) ---------- */
.bp-protohead { margin: 30px 0 6px; padding-bottom: 20px; border-bottom: 1px solid var(--bp-line-soft); }
.bp-protohead .os14-sysline { margin-bottom: 10px; }
.bp-protohead-t { font-family: var(--font-mono); font-size: .72rem; line-height: 1.5; letter-spacing: .04em; color: var(--muted-2); margin: 0; text-transform: none; }
.bp-protohead-t strong { color: var(--text); font-weight: 600; letter-spacing: .01em; }
.bp-protohead-t a { color: var(--bp-cyan); text-decoration: none; border-bottom: 1px solid rgba(22, 196, 244,.32); }
.bp-protohead-t a:hover { border-bottom-color: var(--bp-cyan); }

/* Kapitel-Fußnavigation — Vorher / Übersicht / Nächstes (P16-CORR-C/D) */
.bp-chnav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin: 40px 0 8px; }
.bp-chnav-c { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 14px 16px; border: 1px solid var(--bp-line); border-radius: 14px; background: var(--wash-1); text-decoration: none; transition: border-color .2s, transform .2s; min-height: 62px; }
.bp-chnav-c:hover { border-color: var(--bp-cyan); transform: translateY(-2px); }
.bp-chnav-next { text-align: right; align-items: flex-end; }
.bp-chnav-c span { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); }
.bp-chnav-c b { font-size: .84rem; font-weight: 600; color: var(--muted); line-height: 1.25; }
.bp-chnav-empty { border: 1px dashed var(--wash-3); background: transparent; }
.bp-chnav-idx { display: flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid rgba(22, 196, 244,.3); border-radius: 14px; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); text-decoration: none; white-space: nowrap; transition: background .2s; }
.bp-chnav-idx:hover { background: rgba(22, 196, 244,.08); }
@media (max-width: 560px) {
  .bp-chnav { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .bp-chnav-idx { grid-column: 1 / -1; order: 3; padding: 12px; }
  .bp-chnav-empty { display: none; }
}

.bp-protocta { margin: 44px 0 10px; padding: 26px 24px; border: 1px solid rgba(22, 196, 244,.28); border-radius: 18px; background: linear-gradient(160deg, rgba(22, 196, 244,.07), var(--bg-1) 72%); }
.bp-protocta .os14-sysline { margin-bottom: 14px; }
.bp-protocta-h { font-size: 1.35rem; line-height: 1.22; color: var(--text); margin: 0 0 10px; letter-spacing: -.01em; font-weight: 700; }
.bp-protocta-p { color: #a9bccb; margin: 0 0 18px; font-size: .98rem; line-height: 1.55; }
.bp-protocta-p strong { color: var(--text); font-weight: 600; }
.bp-protocta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
  .bp-protocta { padding: 22px 18px; }
  .bp-protocta-h { font-size: 1.2rem; }
  .bp-protocta-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ==========================================================================
   PROTOKOLL-READER — Atmosphäre statt flachem Schwarz (P19)
   Ein einzelnes Foto flächig hinter 400 KB Text würde entweder den Text
   erschlagen oder unter dem nötigen Schleier verschwinden. Stattdessen:
   eine feste, geschichtete Tiefenebene hinter dem Satzspiegel — und
   Kapitel-Auftakte, über deren Bild der Text tatsächlich hinwegrollt.
   ========================================================================== */
.bp-atmos { position: relative; }
.bp-atmos::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(22, 196, 244,.16), transparent 55%),
    radial-gradient(110% 70% at 88% 8%, rgba(37, 140, 255,.13), transparent 58%),
    radial-gradient(90% 60% at 50% 108%, rgba(22, 196, 244,.10), transparent 60%),
    linear-gradient(180deg, #0a1018 0%, #070A0F 42%, #05070b 100%);
}
/* Feines Raster + Vignette: gibt der Fläche Materialität, ohne zu lenken. */
.bp-atmos::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.033) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.033) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 78%);
}
/* Der Lesetext bekommt eine eigene, minimal abgesetzte Fläche — sorgt für
   Kontrast über der Atmosphäre, ohne wie eine Karte zu wirken. */
.bp-atmos .bp { position: relative; }

/* ---------- KAPITEL-AUFTAKT: Text rollt über dem Bild ---------- */
.bp-chapter-open {
  position: relative; margin: 0 calc(50% - 50vw) 10px; width: 100vw;
  min-height: clamp(320px, 52vh, 520px);
  display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate;
}
.bp-chapter-open .shot {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 38%;
  background-attachment: fixed;          /* der Parallax-Effekt beim Rollen */
  transform: scale(1.02);
}
.bp-chapter-open .veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), .55) 0%, rgba(var(--scrim-rgb), .72) 45%, var(--bp-ink) 97%);
}
.bp-chapter-open .cap { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 20px 34px; }
.bp-chapter-open .bp-part-no {
  display: block; font-size: .72rem; letter-spacing: .34em; margin-bottom: 10px;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}
.bp-chapter-open h2 {
  font-size: clamp(1.9rem, 5.4vw, 3rem); line-height: 1.02; letter-spacing: -.02em;
  color: var(--text); margin: 0; text-shadow: 0 3px 26px rgba(0,0,0,.7);
}
.bp-chapter-open .sub {
  color: var(--muted); font-size: 1.04rem; margin: 12px 0 0; max-width: 54ch;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
/* iOS ruckelt bei fixed-Backgrounds, und reduzierte Bewegung heißt: kein
   Parallax. Beides faellt sauber auf ein statisches Bild zurueck. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .bp-chapter-open .shot { background-attachment: scroll; }
}
@media (max-width: 560px) {
  .bp-chapter-open { min-height: 300px; }
  .bp-chapter-open .cap { padding-bottom: 26px; }
}

/* ==========================================================================
   READER-CHROME — aus dem Dokument wird eine Applikation
   --------------------------------------------------------------------------
   Das Werk kam bis hierher als ein einziger, 500 KB langer Textblock mit einem
   3-px-Fortschrittsbalken. Es fehlte alles, was ein Nachschlagewerk brauchbar
   macht: Wo bin ich? Wie komme ich zu Kapitel 7? Wo stand noch mal SHBG?
   Diese Ebene liefert genau das — und sonst nichts. Kein Rahmenwerk, keine
   Effekte, keine zweite Navigation neben der bestehenden App-Leiste.
   Erzeugt von js/protokoll-reader.js aus dem entschlüsselten DOM.
   ========================================================================== */

/* ---------- Orientierungsleiste ---------- */
.bp-readerbar {
  position: fixed; z-index: 58; left: 0; right: 0; top: var(--header-h);
  display: flex; align-items: center; gap: var(--bp-s3);
  padding: 0 max(var(--bp-s4), env(safe-area-inset-left, 0px)) 0 max(var(--bp-s4), env(safe-area-inset-right, 0px));
  height: 50px; min-height: 50px;
  background: var(--card);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--bp-line);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
/* Beim Vorwärtslesen fährt die Leiste weg, beim Zurückscrollen kommt sie
   wieder — sie soll orientieren, nicht dauerhaft Bildschirm kosten. */
body.bp-bar-hidden .bp-readerbar { transform: translateY(calc(-100% - var(--header-h) - 4px)); }

.bp-now { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.bp-now-k { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); }
.bp-now-t { font-size: .84rem; font-weight: 600; color: var(--bp-text-strong); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-barright { display: flex; align-items: center; gap: var(--bp-s2); flex: 0 0 auto; }
.bp-pct { font-family: var(--font-mono); font-size: .72rem; color: var(--bp-text-dim); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

.bp-barbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; min-width: 44px; padding: 0 var(--bp-s3);
  border: 1px solid var(--bp-line); border-radius: var(--bp-radius-sm);
  background: var(--bp-surface); color: var(--bp-text-strong);
  font-size: .8rem; font-weight: 600; letter-spacing: .01em; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.bp-barbtn:hover { border-color: rgba(22,196,244,.5); background: rgba(22,196,244,.07); }
.bp-barbtn:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: 2px; }
.bp-barbtn-icon { padding: 0; }
.bp-ic { width: 17px; height: 17px; display: block; background: currentColor; flex: 0 0 auto; }
.bp-ic-toc { -webkit-mask: var(--ic-toc) center/contain no-repeat; mask: var(--ic-toc) center/contain no-repeat; }
.bp-ic-search { -webkit-mask: var(--ic-search) center/contain no-repeat; mask: var(--ic-search) center/contain no-repeat; }
:root {
  --ic-toc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M20 20l-3.6-3.6' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Auf dem Telefon ist der Platz das knappste Gut: Kopfzeile der Website
   (72 px) + Leseleiste + App-Navigation unten wären zusammen ein Viertel des
   Bildschirms. Im Lesemodus übernimmt deshalb die Leseleiste den Kopf. */
@media (max-width: 900px) {
  body.with-appnav .site-header { display: none; }
  body.with-appnav .bp-readerbar { top: 0; padding-top: env(safe-area-inset-top, 0px); height: auto; min-height: 52px; }
  body.with-appnav .bp-wrap [id] { scroll-margin-top: calc(56px + var(--bp-jump-clear, 0px)); }
  body.with-appnav { padding-top: 52px; }
  body.bp-bar-hidden .bp-readerbar { transform: translateY(-120%); }
  .bp-barbtn-t { display: none; }
  .bp-barbtn { padding: 0 var(--bp-s2); }
}

/* ---------- Inhaltsverzeichnis ---------- */
.bp-nav {
  position: fixed; z-index: 64; top: 0; bottom: 0; left: 0; width: min(88vw, 330px);
  display: flex; flex-direction: column;
  background: #080b11; border-right: 1px solid var(--bp-line);
  box-shadow: 30px 0 60px rgba(0,0,0,.5);
  transform: translateX(-102%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  padding-top: env(safe-area-inset-top, 0px);
}
body.bp-nav-open .bp-nav { transform: translateX(0); }
body.bp-nav-open::after {
  content: ""; position: fixed; inset: 0; z-index: 63; background: var(--card);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.bp-nav-pinned.bp-nav-open::after { content: none; }

.bp-nav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bp-s3); padding: var(--bp-s5) var(--bp-s5) var(--bp-s4); border-bottom: 1px solid var(--bp-line-soft); }
.bp-nav-kick { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); }
.bp-nav-close { position: relative; width: 44px; height: 44px; margin: -10px -10px -10px 0; border: 0; background: none; cursor: pointer; border-radius: var(--bp-radius-sm); }
.bp-nav-close::before, .bp-nav-close::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 1.8px; background: var(--bp-text-mut); border-radius: 2px; }
.bp-nav-close::before { transform: rotate(45deg); } .bp-nav-close::after { transform: rotate(-45deg); }
.bp-nav-close:hover::before, .bp-nav-close:hover::after { background: #fff; }
.bp-nav-close:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: -2px; }

.bp-nav-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--bp-s3) var(--bp-s3) var(--bp-s5); }
.bp-nav-ch {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--bp-s3); align-items: start;
  min-height: 46px; padding: var(--bp-s3) var(--bp-s3); border-radius: var(--bp-radius-sm);
  color: var(--bp-text); text-decoration: none; transition: background .16s ease, color .16s ease;
}
.bp-nav-ch:hover { background: var(--wash-2); color: var(--bp-text-strong); }
.bp-nav-ch:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: -2px; }
.bp-nav-no { font-family: var(--font-mono); font-size: .72rem; color: var(--bp-text-dim); padding-top: 2px; font-variant-numeric: tabular-nums; }
.bp-nav-b { min-width: 0; }
.bp-nav-b b { display: block; font-size: .86rem; font-weight: 600; line-height: 1.35; color: inherit; }
/* Die Spur erschien vorher unter JEDEM Eintrag — elf graue Linien lasen sich
   wie Tabellenzeilen, nicht wie Fortschritt. Jetzt trägt sie nur Information:
   sichtbar ab dem ersten gelesenen Prozent, kräftig nur im aktuellen Kapitel,
   gelesene Kapitel bleiben ruhig zurück. */
.bp-nav-prog { display: block; height: 2px; margin-top: 7px; border-radius: 2px; background: var(--wash-3); overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.bp-nav-prog i { display: block; height: 100%; width: 0; border-radius: 2px; background: rgba(22,196,244,.34); transition: width .3s ease, background .2s ease; }
.bp-nav-ch.has-progress .bp-nav-prog, .bp-nav-ch.is-current .bp-nav-prog { opacity: 1; }
.bp-nav-ch.is-current .bp-nav-prog i { background: linear-gradient(90deg, var(--bp-blue), var(--bp-cyan)); }
.bp-nav-ch.is-current { background: rgba(22,196,244,.09); color: var(--text); }
.bp-nav-ch.is-current .bp-nav-no { color: var(--bp-cyan); }
.bp-nav-foot { padding: var(--bp-s4) var(--bp-s5) calc(var(--bp-s4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bp-line-soft); }
.bp-nav-foot a { font-size: .8rem; color: var(--bp-text-mut); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.bp-nav-foot a:hover { color: var(--bp-cyan); }

/* Auf breiten Schirmen steht das Verzeichnis dauerhaft im linken Freiraum —
   dort, wo bisher 360 px ungenutzte Fläche waren. Der Satzspiegel bleibt
   dabei mittig; nichts wird verschoben, nichts eingeengt. */
@media (min-width: 1280px) {
  .bp-nav.is-pinned {
    transform: none; box-shadow: none; border-right: 0;
    /* Die Kapitel-Auftakte laufen als vollflächiges Bild unter dem Verzeichnis
       hindurch. Ohne eigenen Grund stand die Kapitelliste dort direkt auf dem
       Foto und war streckenweise nicht lesbar. Ein weicher Schleier statt
       einer Karte: das Verzeichnis bleibt Randspalte, gewinnt aber Kontrast. */
    /* Bewusst OHNE backdrop-filter: im Browser gemessen kostete der Weichzeichner
       hinter einer fixen Randspalte beim Scrollen 14 ms je Frame (Median 33,9 →
       47,9 ms) — mehr als das gesamte Wasserzeichen vorher. Ein etwas
       kräftigerer Verlauf leistet dasselbe für die Lesbarkeit und kostet nichts. */
    background: linear-gradient(90deg, var(--card) 0%, var(--card) 78%, var(--card) 92%, var(--surface) 100%);
    padding: var(--bp-s4) 0 var(--bp-s3) 0;
    border-radius: 0 var(--bp-radius-lg) var(--bp-radius-lg) 0;
    /* Der Verlauf blendet nur den LEEREN Rand aus. Text endet vorher — sonst
       verschwanden lange Abschnittstitel („Körperkomposition ist ein
       Multiplikator") im Nichts, statt umzubrechen. */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    top: calc(var(--header-h) + 50px + var(--bp-s5));
    bottom: var(--bp-s5);
    left: max(var(--bp-s4), calc(50vw - 640px));
    width: 268px;
  }
  .bp-nav.is-pinned .bp-nav-head { padding: 0 var(--bp-s3) var(--bp-s3) var(--bp-s4); border-bottom: 1px solid var(--bp-line-soft); }
  .bp-nav.is-pinned .bp-nav-close { display: none; }
  .bp-nav.is-pinned .bp-nav-list { padding-left: var(--bp-s2); padding-right: 30px; }
  .bp-nav.is-pinned .bp-nav-head { padding-right: 30px; }
  /* Zwei Zeilen genügen zum Wiedererkennen; drei machen die Liste unruhig. */
  .bp-nav.is-pinned .bp-nav-sect,
  .bp-nav.is-pinned .bp-nav-b b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bp-nav.is-pinned .bp-nav-foot { display: none; }
  body.bp-nav-pinned #bpNavToggle { display: none; }
  /* Linke Kante der Leiste = linke Kante des Verzeichnisses. Vorher standen
     Kapitelanzeige (24 px) und Verzeichnis (134 px) auf zwei Achsen. */
  body.bp-nav-pinned .bp-readerbar { padding-left: max(var(--bp-s4), calc(50vw - 624px)); }
}
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
  .bp-nav.is-pinned { transition: opacity .3s ease; }
}

/* ---------- Suche ---------- */
.bp-search { position: fixed; inset: 0; z-index: 70; display: none; padding: max(8vh, 64px) var(--bp-s4) var(--bp-s4); background: var(--card); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.bp-search-open .bp-search { display: block; }
.bp-search-box { max-width: 720px; margin: 0 auto; background: #0a0e14; border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow: hidden; display: flex; flex-direction: column; max-height: min(72vh, 680px); }
.bp-search-in { display: flex; align-items: center; gap: var(--bp-s3); padding: var(--bp-s3) var(--bp-s4); border-bottom: 1px solid var(--bp-line); color: var(--bp-text-dim); }
.bp-search-in input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--text);
  font-family: var(--font-body, inherit); font-size: 1.02rem; padding: var(--bp-s3) 0; min-height: 44px;
}
.bp-search-in input::placeholder { color: #6d7f8e; }
.bp-search-in input:focus { outline: none; }
.bp-search-close { position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; border-radius: var(--bp-radius-sm); flex: 0 0 auto; }
.bp-search-close::before, .bp-search-close::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 1.8px; background: var(--bp-text-mut); border-radius: 2px; }
.bp-search-close::before { transform: rotate(45deg); } .bp-search-close::after { transform: rotate(-45deg); }
.bp-search-close:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: -2px; }
/* Das Suchfeld ist beim Öffnen automatisch fokussiert — ein 2-px-Rahmen um
   das ganze Feld sah dann wie ein Fehlerzustand aus. Der Fokus liegt jetzt
   auf der Zeile, nicht auf dem Kasten. */
.bp-search-in:focus-within { border-bottom-color: rgba(22,196,244,.55); box-shadow: inset 0 -2px 0 var(--bp-cyan); }
.bp-search-in input:focus-visible { outline: none; }
/* Chromes eigener Löschknopf in <input type=search> passte farblich nicht. */
.bp-search-in input::-webkit-search-cancel-button, .bp-search-in input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.bp-search-results { overflow-y: auto; overscroll-behavior: contain; padding: var(--bp-s2) 0 var(--bp-s3); }
.bp-search-hint, .bp-search-count { padding: var(--bp-s4) var(--bp-s5); margin: 0; color: var(--bp-text-mut); font-size: var(--bp-fs-small); line-height: 1.6; }
.bp-search-count { font-family: var(--font-body);
  font-weight: 600; font-size: var(--bp-fs-label); letter-spacing: 0.01em; color: var(--bp-text-dim); padding-bottom: var(--bp-s2); }
.bp-hit {
  display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--bp-line-soft);
  background: none; cursor: pointer; padding: var(--bp-s3) var(--bp-s5); min-height: 44px; color: var(--bp-text);
}
.bp-hit:hover, .bp-hit:focus-visible { background: rgba(22,196,244,.07); outline: none; }
.bp-hit:focus-visible { box-shadow: inset 2px 0 0 var(--bp-cyan); }
.bp-hit-ch { display: block; font-family: var(--font-body);
  font-weight: 600; font-size: var(--bp-fs-label); letter-spacing: 0.01em; color: var(--bp-cyan); margin-bottom: 3px; }
.bp-hit-t { display: block; font-size: var(--bp-fs-small); line-height: 1.55; color: var(--bp-text); }
.bp-hit mark { background: rgba(22,196,244,.22); color: var(--text); border-radius: 3px; padding: 0 2px; }
@media (max-width: 560px) { .bp-search { padding: var(--bp-s4) var(--bp-s3); } .bp-search-box { max-height: 82vh; } }

/* ---------- Kapitelübergang ---------- */
.bp-nextch {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--bp-s3) var(--bp-s5);
  margin: var(--bp-s8) auto var(--bp-s7); max-width: var(--bp-measure);
  padding: var(--bp-s5); border: 1px solid var(--bp-line); border-radius: var(--bp-radius-lg);
  background: linear-gradient(110deg, rgba(22,196,244,.06), var(--bp-surface) 64%);
  text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.bp-nextch:hover { border-color: rgba(22,196,244,.45); transform: translateY(-2px); }
.bp-nextch:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: 3px; }
.bp-nextch-k { grid-column: 1 / -1; font-family: var(--font-body); font-weight: 600; font-size: var(--bp-fs-label); letter-spacing: 0.01em; color: var(--bp-cyan); }
.bp-nextch b { font-size: 1.06rem; line-height: 1.3; color: var(--bp-text-head); font-weight: 700; letter-spacing: -.01em; }
.bp-nextch-go {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: .84rem; font-weight: 600; color: var(--bp-cyan);
}
.bp-nextch-go::after { content: "→"; font-size: 1.05em; transition: transform .2s ease; }
.bp-nextch:hover .bp-nextch-go::after { transform: translateX(3px); }
@media (max-width: 560px) {
  .bp-nextch { grid-template-columns: 1fr; padding: var(--bp-s4); margin-top: var(--bp-s7); }
}

/* ---------- Weiterlesen ---------- */
.bp-resume {
  position: fixed; left: 50%; z-index: 61; bottom: calc(var(--bp-s4) + var(--bp-nav-clear, 0px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  max-width: min(92vw, 420px); padding: var(--bp-s3) var(--bp-s5);
  border: 1px solid var(--bp-line); border-radius: 999px; background: #0b0f16;
  box-shadow: 0 14px 38px rgba(0,0,0,.5); cursor: pointer; text-align: left;
  transition: opacity .26s ease, transform .26s ease;
}
.bp-resume.is-out { opacity: 0; transform: translateX(-50%) translateY(8px); }
.bp-resume:hover { border-color: rgba(22,196,244,.5); }
.bp-resume:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: 2px; }
.bp-resume-k { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--bp-cyan); }
.bp-resume b { font-size: .86rem; font-weight: 600; color: var(--bp-text-strong); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Sprungziel kurz markieren ---------- */
.bp-flash { animation: bpflash 1.6s ease-out 1; border-radius: 6px; }
@keyframes bpflash {
  0%, 22% { background: rgba(22,196,244,.16); box-shadow: 0 0 0 6px rgba(22,196,244,.16); }
  100% { background: transparent; box-shadow: 0 0 0 6px rgba(22,196,244,0); }
}
.bp-srccount { margin-left: auto; margin-right: var(--bp-s3); font-variant-numeric: tabular-nums; color: var(--bp-cyan); }

@media (prefers-reduced-motion: reduce) {
  .bp-readerbar, .bp-nav, .bp-nextch, .bp-resume, .bp-nav-prog i { transition: none; }
  .bp-flash { animation-duration: .01ms; }
}
@media print {
  .bp-readerbar, .bp-nav, .bp-search, .bp-resume, .bp-nextch, .bp-tablehint { display: none !important; }
}

/* Der Fortschrittsbalken sitzt an der Unterkante der Leseleiste (dorthin
   umgehängt von protokoll-reader.js) — nicht mehr unter der Website-Kopfzeile,
   wo er beim Lesen nicht im Blickfeld lag. */
.bp-readerbar .bp-progress { position: absolute; left: 0; right: auto; top: auto; bottom: -1px; height: 2px; z-index: 1; }

/* ==========================================================================
   TOUCH-TARGETS — 44 px als Untergrenze auf allen Protokoll-Flächen
   --------------------------------------------------------------------------
   Gemessen im Browser: Verzeichnis-Einträge 41 px, Kopfzeilen-Navigation
   36–39 px, Menü-Knopf 42 px. Auf dem Telefon ist das der Unterschied
   zwischen „getroffen" und „daneben". Bewusst auf die bp-Flächen begrenzt
   (Reader + Kapitelseiten), damit keine ungetestete Änderung an allen
   30 Seiten der Website entsteht.
   ========================================================================== */
.bp-wrap .main-nav a,
.bp-wrap .header-actions .btn,
.bp-wrap .nav-toggle,
.bp-wrap .logo {
  min-height: 44px; display: inline-flex; align-items: center;
}
.bp-wrap .nav-toggle { min-width: 44px; justify-content: center; }
/* Kurze Navigationswörter („Score") blieben unter 44 px Breite. */
.bp-wrap .main-nav a { min-width: 44px; justify-content: center; padding-inline: 6px; }
.bp-toc a { min-height: 44px; align-items: center; padding: var(--bp-s3) 0; }
.bp-toc a::before { align-self: center; }
/* Der Quellenlink steht als eigene Zeile unter jedem Eintrag — dort ist er
   ein echtes Ziel, kein Wort im Satz, und bekommt volle Antippfläche. */
.bp .bp-sources a { display: inline-flex; align-items: center; min-height: 44px; }
.bp .bp-sources p a, .bp .bp-sources li > div:first-of-type a { display: inline; min-height: 0; }
.bp-chnav-c { min-height: 66px; }

/* ==========================================================================
   MM / UPDATE — datierte regulatorische Aktualisierung
   --------------------------------------------------------------------------
   Sichtbar vom Werk getrennt: der Leser muss erkennen können, was Werk ist
   und was redaktioneller Nachtrag. Deshalb eigener Rahmen, eigenes Label,
   Datum im Kopf und ausklappbare Belege — statt still umgeschriebenem Text.
   ========================================================================== */
.bp-update {
  margin: var(--bp-s6) 0 var(--bp-s7);
  border: 1px solid rgba(22,196,244,.26); border-radius: var(--bp-radius-lg);
  background: linear-gradient(150deg, rgba(22,196,244,.055), var(--wash-1) 60%);
  padding: var(--bp-s5);
}
.bp-update-head { display: flex; align-items: center; gap: var(--bp-s3); flex-wrap: wrap; margin-bottom: var(--bp-s3); }
.bp-update-kick { font-family: var(--font-body); font-weight: 600; font-size: var(--bp-fs-label); letter-spacing: 0.01em; color: var(--bp-cyan); }
.bp-update-date {
  margin-left: auto; font-family: var(--font-body); font-weight: 600; font-size: var(--bp-fs-label);
  letter-spacing: 0.01em; color: var(--bp-text-dim);
  border: 1px solid var(--bp-line); border-radius: 999px; padding: 3px 10px;
}
.bp .bp-update-h { font-size: 1.1rem; line-height: 1.3; color: var(--bp-text-head); margin: 0 0 var(--bp-s2); font-weight: 700; letter-spacing: -.01em; }
.bp .bp-update-lead { font-size: calc(var(--bp-fs-body) * .97); color: var(--bp-text); margin: 0 0 var(--bp-s4); }

.bp-update-rows { display: grid; grid-template-columns: minmax(140px, 218px) 1fr; gap: 0; margin: 0 0 var(--bp-s4); }
.bp-update-rows dt {
  display: flex; align-items: flex-start; gap: 7px;
  padding: var(--bp-s3) var(--bp-s4) var(--bp-s3) 0; border-top: 1px solid var(--bp-line-soft);
  font-size: var(--bp-fs-small); font-weight: 600; color: var(--bp-text-strong);
}
.bp-update-rows dd {
  margin: 0; padding: var(--bp-s3) 0; border-top: 1px solid var(--bp-line-soft);
  font-size: var(--bp-fs-small); line-height: 1.6; color: var(--bp-text);
}
.bp-update-rows dd strong { color: var(--bp-text-strong); }
/* Der Punkt trägt die Evidenz-/Statusfarbe — dieselbe Sprache wie .ev. */
/* Der Punkt gehört zur ersten Zeile des Begriffs. Vorher zentrierte er sich
   in der ganzen Zeilenhöhe und stand bei langen Einträgen drei Zeilen tiefer
   als das Wort, zu dem er gehört. */
.bp-update-tone { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; align-self: flex-start; margin-top: .48em; }
.tone-known { background: var(--bp-a); }
.tone-likely { background: var(--bp-cyan); }
.tone-preclinical { background: var(--bp-c); }
.tone-experimental { background: var(--bp-frontier); }
.tone-red { background: var(--bp-red); }

.bp .bp-update-note {
  font-size: var(--bp-fs-small); line-height: 1.62; color: var(--bp-text-mut);
  margin: 0; padding-top: var(--bp-s3); border-top: 1px solid var(--bp-line-soft);
}
.bp-update-src { margin-top: var(--bp-s3); }
.bp-update-src > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--bp-s2);
  min-height: 44px; font-family: var(--font-body);
  font-weight: 600; font-size: var(--bp-fs-label);
  letter-spacing: 0.01em; color: var(--bp-text-dim);
}
.bp-update-src > summary::-webkit-details-marker { display: none; }
.bp-update-src > summary::after {
  content: ""; width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.bp-update-src[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.bp-update-src > summary:hover { color: var(--bp-text-strong); }
.bp-update-src > summary:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: 2px; border-radius: var(--bp-radius-sm); }
.bp .bp-update-src ul { list-style: none; padding: 0; margin: 0 0 var(--bp-s2); }
.bp .bp-update-src li { margin: 0; border-top: 1px solid var(--bp-line-soft); }
.bp .bp-update-src a { display: flex; align-items: center; min-height: 44px; padding: var(--bp-s2) 0; font-size: var(--bp-fs-micro); line-height: 1.5; color: var(--bp-cyan); text-decoration: none; }
.bp .bp-update-src a:hover { text-decoration: underline; }
.bp-update-src .bp-srccount { margin-left: 0; }

@media (max-width: 620px) {
  .bp-update { padding: var(--bp-s4); }
  .bp-update-rows { grid-template-columns: 1fr; }
  .bp-update-rows dt { padding-bottom: 2px; border-top: 1px solid var(--bp-line-soft); }
  .bp-update-rows dd { padding-top: 0; border-top: 0; padding-bottom: var(--bp-s3); }
  .bp-update-date { margin-left: 0; }
}

/* Abschnitte des aktuellen Kapitels — nur dort aufgeklappt, sonst waeren elf
   Kapitel mit je sechs Unterpunkten eine Wand statt Orientierung. */
.bp-nav-secs { list-style: none; margin: 2px 0 var(--bp-s3); padding: 0 0 0 42px; }
.bp-nav-secs li { margin: 0; }
.bp-nav-sec {
  display: flex; align-items: center; padding: 7px var(--bp-s3); min-height: 44px;
  font-size: .8rem; line-height: 1.35; color: var(--bp-text-mut); text-decoration: none;
  border-left: 1px solid var(--bp-line); border-radius: 0 var(--bp-radius-sm) var(--bp-radius-sm) 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.bp-nav-sec:hover { color: var(--bp-text-strong); background: var(--wash-1); }
.bp-nav-sec:focus-visible { outline: 2px solid var(--bp-cyan); outline-offset: -2px; }
.bp-nav-sec.is-here { color: var(--bp-text-head); border-left-color: var(--bp-cyan); background: rgba(22,196,244,.06); }


/* Das Werk liefert seine Tabellen bereits in .bp-scroll-x. Dann ist DIESE
   Huelle die Komponente — sie rollt selbst, statt einen zweiten Rahmen zu
   bekommen (im echten Werk waren das 62 doppelt gerahmte Tabellen). */
.bp-tablewrap.is-selfscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.33) transparent; }
.bp-tablewrap.is-selfscroll::-webkit-scrollbar { height: 8px; }
.bp-tablewrap.is-selfscroll::-webkit-scrollbar-thumb { background: var(--wash-6); border-radius: 999px; }
.bp-tablewrap.is-selfscroll .bp-tablehint { position: sticky; left: 0; }
@media (max-width: 620px) { .bp-tablewrap.is-stacked.is-selfscroll { overflow-x: visible; } }

/* Abschnittsnummer im Verzeichnis (02.4) vor dem Titel. */
.bp-nav-secno { font-family: var(--font-mono); font-size: .68rem; color: var(--bp-text-dim); flex: 0 0 auto; margin-right: 8px; font-variant-numeric: tabular-nums; }
.bp-nav-sec.is-here .bp-nav-secno { color: var(--bp-cyan); }
.bp-nav-sect { min-width: 0; }