/* Organisation unter KI — Gestaltungsraster der Reihenwebsite.
   Eine Datei für alle Seiten. Keine externen Aufrufe, keine Google Fonts:
   Die Schriften werden selbst gehostet, erzeugt wie bei „Kein Naturgesetz"
   mit schriften_bauen.py. Im Entwurf greifen die Systemfallbacks.

   Farben und Schriften folgen dem generischen Markendesign (Navy/Off-White/
   Gold, Libre Franklin + Inter). Der Riss aus „Kein Naturgesetz" kommt hier
   nicht vor — er bleibt den Klimathemen vorbehalten. Das Motiv dieser Reihe
   ist die Naht mit der Leerstelle. */

:root {
  --bg:#FAFAF8; --flaeche:#FFFFFF; --tief:#F1EEE7;
  --ink:#16212C; --ink-weich:#4B5A68; --ink-blass:#7E8A96;
  --navy:#233348; --gold:#8A6A34; --gold-hell:#9C7A3C;
  --haar:rgba(35,51,72,0.14); --haar-stark:rgba(35,51,72,0.30);
  --korrektur:#8E3B2F;
  --fokus:#9C7A3C;
  --buch:"Fira Sans", "Segoe UI", -apple-system, sans-serif;   /* Schrift des Bandes */
  --grotesk:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --titel:"Libre Franklin", "Inter", -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#141D28; --flaeche:#1C2836; --tief:#101720;
    --ink:#F4F0E6; --ink-weich:#B7C1CC; --ink-blass:#7C8A97;
    --gold:#E8C787; --gold-hell:#F0D6A2;
    --haar:rgba(232,199,135,0.16); --haar-stark:rgba(232,199,135,0.32);
    --korrektur:#D98C7A; --fokus:#E8C787;
  }
}
:root[data-theme="dark"] {
  --bg:#141D28; --flaeche:#1C2836; --tief:#101720;
  --ink:#F4F0E6; --ink-weich:#B7C1CC; --ink-blass:#7C8A97;
  --gold:#E8C787; --gold-hell:#F0D6A2;
  --haar:rgba(232,199,135,0.16); --haar-stark:rgba(232,199,135,0.32);
  --korrektur:#D98C7A; --fokus:#E8C787;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--grotesk); font-size:17px; line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased;
}

/* Die Naht: eine senkrechte Haarlinie am rechten Rand, die auf halber Höhe
   eine Lücke lässt. Das Reihenzeichen als Seitenornament, nicht als Deko —
   auf schmalen Bildschirmen fällt sie weg. */
body::before {
  content:""; position:fixed; top:0; bottom:0; right:clamp(14px,4vw,64px);
  width:1px; pointer-events:none; z-index:0;
  background:linear-gradient(to bottom,
    var(--haar) 0, var(--haar) 42%,
    transparent 42%, transparent 58%,
    var(--haar) 58%, var(--haar) 100%);
}
@media (max-width:900px){ body::before{ display:none; } }

.wrap { position:relative; z-index:1; max-width:860px; margin:0 auto; padding:0 24px 110px; }
.schmal { max-width:660px; }

a { color:var(--navy); text-underline-offset:2px; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) a { color:var(--gold); } }
:root[data-theme="dark"] a { color:var(--gold); }
a:focus-visible { outline:2px solid var(--fokus); outline-offset:3px; border-radius:2px; }

/* ---------------------------------------------------------------- Kopf */
.kopf { display:flex; align-items:center; gap:14px; padding:26px 0 0; }
.kopf img { width:26px; height:26px; display:block; }
.kopf .reihe { font-family:var(--titel); font-weight:600; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-weich); text-decoration:none; }
.kopf nav { margin-left:auto; display:flex; gap:20px; font-size:.86rem; }
.kopf nav a { color:var(--ink-weich); text-decoration:none; }
.kopf nav a:hover { color:var(--gold-hell); }
/* Die laufende Seite wird markiert, nicht weggelassen. Ein Menue, das auf
   jeder Seite anders aussieht, laesst den Leser raten, wo er ist — genau
   das leistet die Apparatleiste darunter richtig, und der Kopf tat es nicht.
   Kein Link, weil ein Verweis auf die eigene Seite nichts tut. */
.kopf nav .hier { color:var(--ink); font-weight:600; }
@media (max-width:620px){ .kopf nav { display:none; } }

/* --------------------------------------------------- Sprachumschalter */
/* Zwei Ausgaben, zwei Domains. Der Schalter steht neben dem Menue, nicht
   darin: Auf schmalen Bildschirmen faellt die Navigation weg, der Weg zur
   anderen Sprachfassung soll bleiben. Die laufende Sprache wird markiert
   und ist kein Link — ein Verweis auf die eigene Seite tut nichts. */
.sprache { display:flex; align-items:center; gap:6px; margin-left:20px;
  font-family:var(--titel); font-weight:600; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; }
.sprache a { color:var(--ink-blass); text-decoration:none; }
.sprache a:hover { color:var(--gold-hell); }
.sprache .hier { color:var(--ink); }
.sprache .teiler { color:var(--haar-stark); }
@media (max-width:620px){ .sprache { margin-left:auto; } }

/* ------------------------------------------------------- Typografie */
h1 { font-family:var(--titel); font-weight:300; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(2.1rem,6vw,3.4rem); margin:0 0 16px; }
h2 { font-family:var(--titel); font-weight:600; letter-spacing:-.01em; line-height:1.2;
  font-size:clamp(1.25rem,2.6vw,1.55rem); margin:64px 0 14px; }
h3 { font-family:var(--titel); font-weight:600; font-size:1.02rem; margin:34px 0 8px; }
p { margin:0 0 17px; max-width:64ch; }
.lede { font-size:1.12rem; color:var(--ink-weich); max-width:60ch; }
.klein { font-size:.84rem; color:var(--ink-blass); }
.marke { font-family:var(--titel); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hell); margin:0 0 12px; }

/* Buchtext steht in der Schrift des Bandes, Websitetext in Inter. Der Unterschied
   ist die Auszeichnung, ein Kasten drumherum wird nicht gebraucht.
   Fira Sans ist am 30.08.2026 als Buchschrift entschieden. Sie unterscheidet sich
   von Inter deutlich genug, dass die Herkunft eines Absatzes ohne Beschriftung
   erkennbar bleibt — offene Aperturen, eigene Formen, etwas weiter laufend. */
.buchtext { font-family:var(--buch); font-size:1.03rem; line-height:1.72; }
.buchtext p { max-width:58ch; }

/* ------------------------------------------------------ Die Teilung */
/* Das Coverprinzip als Seitenkopf: eine waagerechte Teilung im Verhältnis
   des jeweiligen Bandes. Band 1 teilt bei 24,4 % — zehn von einundvierzig. */
.teilung { position:relative; margin:34px 0 0; border-radius:2px; overflow:hidden;
  background:var(--bg); display:grid; grid-template-rows:24.4fr 0.5fr 75.1fr;
  height:min(700px, 84vh); }
/* Unter 700 px fällt die Skala weg. Dann trägt die Teilung die Aussage nicht mehr
   allein, und die Höhe darf sich nach dem Text richten. */
@media (max-width:700px){ .teilung { height:auto; grid-template-rows:auto 4px auto; } }
.teilung .oben { padding:26px 30px 22px; display:flex; align-items:flex-end; }
.teilung .oben p { margin:0; font-size:.94rem; color:var(--ink-weich); max-width:52ch; }
.teilung .kante { height:3px; background:linear-gradient(90deg,#9C7A3C,#E8C787); }
.teilung .unten { background:var(--navy); color:#F4F1EA; padding:44px 30px 38px;
  display:flex; flex-direction:column; justify-content:center; }
.teilung .unten h1 { color:#FAFAF8; margin-bottom:10px; }
.teilung .unten .lede { color:#D5DCE4; }
.teilung .unten .marke { color:#E8C787; }

/* Die Skala: einundvierzig Striche, zehn davon lang. Die Kante der Teilung
   fällt zwischen den zehnten und den elften. Rang 19 ist golden. */
.skala { position:absolute; top:0; right:16px; bottom:0; width:34px;
  display:flex; flex-direction:column; justify-content:space-between; }
.skala i { display:block; height:1px; background:var(--navy); opacity:.34; width:11px;
  margin-left:auto; }
.skala i.gelesen { opacity:.95; width:26px; }
.skala i.hell { background:#FAFAF8; opacity:.38; }
.skala i.osterkamp { background:#E8C787; opacity:1; width:32px; height:2px; }
@media (max-width:700px){ .skala { display:none; } }

/* --------------------------------------------------------- Bandkarten */
.baende { display:grid; gap:2px; margin:30px 0 0; background:var(--haar); }
.band { display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:start;
  background:var(--bg); padding:26px 4px 28px; text-decoration:none; color:inherit; }
.band img { width:46px; height:46px; }
.band .marke { margin-bottom:6px; }
.band h3 { margin:0 0 6px; font-size:1.22rem; font-weight:300; letter-spacing:-.01em; }
.band p { margin:0; font-size:.94rem; color:var(--ink-weich); }
.band .status { display:inline-block; margin-top:10px; font-size:.78rem; color:var(--ink-blass);
  border-top:1px solid var(--haar); padding-top:6px; }
a.band:hover h3 { color:var(--gold-hell); }
.band.offen h3 { color:var(--ink-blass); }

/* Die Leerstelle: was noch nicht da ist, bekommt eine leere Fläche und keine
   erfundene Vorschau. */
.leer { border:1px dashed var(--haar-stark); padding:22px 24px; margin:22px 0;
  color:var(--ink-blass); font-size:.92rem; }
.leer strong { color:var(--ink-weich); font-weight:600; }

/* ---------------------------------------------------------- Belegtypen */
.typ { display:inline-block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border:1px solid var(--haar-stark); color:var(--ink-weich); border-radius:2px;
  white-space:nowrap; }
.typ.primaer { border-color:var(--gold-hell); color:var(--gold-hell); }
.typ.offen { border-style:dashed; }

/* ------------------------------------------------------------- Listen */
ul.klar { list-style:none; padding:0; margin:0 0 20px; max-width:62ch; }
ul.klar li { padding:11px 0 11px 0; border-bottom:1px solid var(--haar); }
ul.klar li:first-child { border-top:1px solid var(--haar); }
ul.klar b { font-weight:600; }
ul.klar span { color:var(--ink-weich); }

.zeile { display:flex; flex-wrap:wrap; gap:8px 26px; padding:12px 0;
  border-bottom:1px solid var(--haar); font-size:.92rem; }
.zeile dt { color:var(--ink-blass); min-width:150px; margin:0; }
.zeile dd { margin:0; }

/* --------------------------------------------------------- Handschrift */
/* Höchstens eine je Seite, und nur dort, wo sie etwas hinzufügt, das im
   Layout keinen Platz hatte. Im Entwurf als kursive Platzhalterzeile;
   im Ausbau das freigestellte Asset aus 99_System/Handschrift/. */
.hand { font-family:"Segoe Script","Bradley Hand",cursive; font-size:.96rem;
  color:var(--ink-weich); transform:rotate(-2.5deg); display:inline-block; margin:6px 0 0; }
.teilung .hand { color:#E8C787; }

/* ------------------------------------------------------------ Aktionen */
.knopf { display:inline-block; font-family:var(--titel); font-weight:600; font-size:.92rem;
  padding:12px 22px; border:1px solid var(--navy); color:var(--navy);
  text-decoration:none; border-radius:2px; }
.knopf:hover { background:var(--navy); color:#FAFAF8; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .knopf { border-color:var(--gold); color:var(--gold); }
  :root:not([data-theme="light"]) .knopf:hover { background:var(--gold); color:#141D28; } }
:root[data-theme="dark"] .knopf { border-color:var(--gold); color:var(--gold); }
:root[data-theme="dark"] .knopf:hover { background:var(--gold); color:#141D28; }

/* ---------------------------------------------------------------- Fuß */
footer { margin-top:80px; padding-top:22px; border-top:1px solid var(--haar);
  font-size:.84rem; color:var(--ink-blass); }
footer a { color:var(--ink-weich); }
footer .stand { margin-top:8px; }

/* ═══════════════════════════════════════════════════════════════════════
   Der Apparat: Belege, Rechtsstand, Zuschnitte

   Diese Seiten baut Begleitseite/bauen.py aus den Vault-Quellen. Sie tragen
   kein eigenes Stylesheet mehr — die Tokens sind dieselben, und zwei
   Gestaltungen für ein Buch wären zwei Gestaltungen zum Auseinanderlaufen.
   ═══════════════════════════════════════════════════════════════════════ */

/* Inhaltsverzeichnis der Apparatseiten: der Weg zurück zum Band und
   zwischen den vier Seiten. Steht oben, weil die meisten hier aus einem
   QR-Code kommen und nicht wissen, wo sie gelandet sind. */
.apparat { display:flex; flex-wrap:wrap; gap:6px 22px; margin:26px 0 0;
  padding:14px 0; border-top:1px solid var(--haar); border-bottom:1px solid var(--haar);
  font-size:.86rem; }
.apparat a { color:var(--ink-weich); text-decoration:none; }
.apparat a:hover { color:var(--gold-hell); }
.apparat .hier { color:var(--ink); font-weight:600; text-decoration:none; }

/* --------------------------------------------------- Belege, kapitelweise */
.kap { margin:0 0 30px; }
.kap h3 { display:flex; gap:12px; align-items:baseline; margin:38px 0 4px;
  padding-bottom:7px; border-bottom:1px solid var(--haar); }
.kap .nr { font-variant-numeric:tabular-nums; color:var(--gold-hell);
  font-weight:600; min-width:1.7rem; }

ul.belege { list-style:none; padding:0; margin:0; max-width:70ch; }
ul.belege > li { padding:11px 0; border-bottom:1px solid var(--haar); font-size:.95rem; }
ul.belege > li:last-child { border-bottom:0; }
ul.belege .typ { margin-right:10px; vertical-align:1px; }

ul.unterbelege { list-style:none; margin:9px 0 2px; padding-left:14px;
  border-left:1px solid var(--haar); }
ul.belege ul.unterbelege li { border-bottom:0; padding:4px 0;
  font-size:.94em; color:var(--ink-weich); }

/* Die Rasterlogik ersetzt die Farbcodierung — dieselbe Unterscheidung wie in
   den Buchgrafiken, die einfarbig gedruckt werden. Das Quadrat vor dem Etikett
   sagt, wie stark der Beleg trägt; das Etikett sagt, was er ist.

     voll        die Sache selbst        Primärquelle, Rechtsquelle
     schraffiert Bericht über die Sache  Sekundärquelle, Preprint, dokumentiert
     gepunktet   vom Autor gesetzt       eigene Setzung, konstruierter Fall
     offen       kein eigener Beleg      Verweis, im Buch nicht verwendet

   Zwei Ebenen statt neun Farben: Wer die Liste überfliegt, sieht die Stärke,
   wer einen Eintrag liest, die genaue Art. */
.typ::before { content:""; display:inline-block; width:8px; height:8px;
  margin-right:7px; vertical-align:0; border:1px solid currentColor; }
.typ.r-voll::before        { background:currentColor; }
.typ.r-schraffiert::before { background:repeating-linear-gradient(45deg,
  currentColor 0 1px, transparent 1px 3px); }
.typ.r-gepunktet::before   { background:radial-gradient(currentColor 0.7px, transparent 0.8px)
  0 0 / 3px 3px; }
.typ.r-offen::before       { border-style:dashed; }

.legende { border:1px solid var(--haar); padding:18px 20px; margin:0 0 34px;
  font-size:.88rem; max-width:70ch; }
.legende p { margin:0 0 10px; }
.legende .typ { margin:0 10px 6px 0; }
.legende .fuss { margin:12px 0 0; color:var(--ink-blass); }

/* Ein Kasten, der eine Einschränkung trägt — nicht für Betonung. */
.hinweis { border-left:2px solid var(--gold-hell); padding:2px 0 2px 18px;
  margin:26px 0; font-size:.94rem; color:var(--ink-weich); max-width:64ch; }

/* --------------------------------------- Fließtext aus dem Markdown-Bau */
.apparat-text h4 { font-family:var(--titel); font-weight:600; font-size:.94rem;
  color:var(--ink-weich); margin:24px 0 6px; }
.apparat-text ul, .apparat-text ol { max-width:64ch; padding-left:20px; margin:0 0 18px; }
.apparat-text li { margin:6px 0; }
.apparat-text hr { border:0; border-top:1px solid var(--haar); margin:34px 0; }
.apparat-text code { font-size:.88em; background:var(--tief); padding:1px 5px; border-radius:2px; }

/* ------------------------------------------------------- Buchgrafiken */
/* Eine Abbildung aus dem Band, nicht von der Website — dieselbe Auszeichnung
   wie ein Absatz in Fira Sans, nur als Bild. Sie behält deshalb ihren hellen
   Grund, auch im Dunkelmodus: Das Blatt aus dem Buch färbt sich nicht mit um,
   und ein Diagramm mit gedrehten Farben ist ein anderes Diagramm.
   Die Bildstimme erlaubt auf der Website nur drei Bildarten: Flächenverhältnisse
   mit echten Zahlen, abstrahierte Formularartefakte, Autorenfoto. Ein
   Strukturdiagramm ist keines davon. Guido hat am 04.09.2026 entschieden, das
   als Ausnahme zu behandeln und nicht als vierte Bildart: Die Grafik stammt aus
   dem Band und trägt dessen Bildsprache. Die Regel bleibt, wie sie ist — sie
   zielte auf Deko und Stockmaterial. Wer die nächste Grafik aufnehmen will,
   entscheidet das wieder einzeln. */
figure.buchgrafik { margin:26px 0 0; }
figure.buchgrafik .blatt { background:#FAFAF8; border:1px solid var(--haar-stark);
  padding:14px; border-radius:2px; overflow-x:auto; }
figure.buchgrafik img { display:block; width:100%; min-width:520px; height:auto; }
figure.buchgrafik figcaption { margin:10px 0 0; font-size:.84rem; color:var(--ink-blass);
  max-width:64ch; }
@media (max-width:640px){
  /* Unter 640 px ist das Diagramm nicht mehr zu lesen. Es bleibt erreichbar —
     der Kasten scrollt seitwärts —, aber die Seite scrollt deswegen nicht. */
  figure.buchgrafik .blatt { padding:10px; }
}

/* ------------------------------------------- Zusatz für die englische Seite */
/* Das Stylesheet ist ansonsten Zeile für Zeile das der deutschen Reihenseite.
   Diese vier Regeln kommen dazu, weil die englischen Seiten mehr Tabellen
   führen als die deutschen — die Werkzeugliste und die Buchdaten. Wer am
   gemeinsamen Teil etwas ändert, ändert es in beiden Dateien. */
table th { text-align:left; font-weight:600; color:var(--ink-blass);
  font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }
table td:first-child { color:var(--ink-weich); }
.belege li b { font-weight:600; }
.kap h3 { font-size:1.05rem; }