/* ══════════════════════════════════════════════════════════════════════════
   fabian-develop.de

   Ein einziger Bogen, sechs Abschnitte, keine Reiterleiste. Die Ordnung kommt
   aus drei Dingen, die überall gelten:

     1. Der Versatz ist ein Gesetz: jede nachgeordnete Zeile rückt um genau
        eine Rasterspalte (--col) nach rechts.
     2. Jeder Abschnitt hat links eine haftende Spalte mit Nummer und Titel.
        Sie bleibt stehen, während der Inhalt daran vorbeiläuft.
     3. Deutsch und Englisch sind kein Zusatz, sondern ein Paar: die zweite
        Sprache liegt als Durchschlag daneben und tauscht beim Zeigen die
        Betonung mit der ersten.

   Die Akzentwerte stehen NICHT hier, sondern in content.json; app.js setzt
   --accent / --accent-text / --on-accent auf <html>.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter var";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:        #000000;
  --surface:   #0B0B0C;
  --surface-2: #131317;
  --line:      #1E1E23;
  --line-2:    #2B2B32;
  --fg:        #F4F4F5;
  --fg-dim:    #9A9AA2;
  --fg-faint:  #78787F;
  --fg-en:     #8B8B92;

  --accent:      #E6FF00;
  --accent-text: #E6FF00;
  --on-accent:   #000000;

  --grid: #121216;

  /* Raster und Versatz */
  --pad: clamp(20px, 4.4vw, 76px);
  --col: clamp(44px, 5.2vw, 88px);
  --step: var(--col);

  /* Schriftgrade. Bewusst gross — die Seite soll auf einem 27-Zoll-Schirm
     nicht wie eine vergrösserte Handyansicht aussehen. */
  --t-xs:  clamp(11.5px, 0.78vw, 14px);
  --t-sm:  clamp(14px, 1.02vw, 17px);
  --t-md:  clamp(17px, 1.32vw, 22px);
  --t-lg:  clamp(21px, 2.05vw, 33px);
  --t-xl:  clamp(28px, 3.4vw, 56px);
  --t-2xl: clamp(46px, 8.2vw, 132px);
  --t-3xl: clamp(56px, 15.5vw, 215px);

  /* Abstände */
  --r1: 8px;
  --r2: 18px;
  --r3: 32px;
  --r4: 56px;
  --r5: clamp(72px, 9vw, 130px);
  --r6: clamp(104px, 15vh, 220px);

  --kopf-h: 60px;

  --f: "Inter var", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 20px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.noscript { padding: 140px var(--pad); color: var(--fg-dim); max-width: 46ch; font-size: var(--t-md); }

/* ── Ziffern ────────────────────────────────────────────────────────────── */

.num {
  display: block;
  font-variation-settings: "wght" 860, "opsz" 32;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: .88;
  color: var(--fg);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   ZWEISPRACHIGKEIT — der Durchschlag
   Nicht „Text, darunter kleiner derselbe Text". Die zweite Sprache liegt als
   eigene Schicht daneben: bei Überschriften als Umriss versetzt unter der
   ersten, im Fliesstext als Parallelspalte mit Haarlinie. Beim Zeigen
   tauschen beide die Betonung — die Übersetzung wird zur Hauptsache.
   ═══════════════════════════════════════════════════════════════════════ */

.zw { display: block; }
.zw-de { display: block; }
.zw-en {
  display: block;
  color: var(--fg-en);
  transition: color .22s ease, opacity .22s ease;
}
.zw-de { transition: color .22s ease, opacity .22s ease; }

/* Fliesstext: die zweite Sprache rückt ein und hängt an einer Haarlinie. */
.zw-en {
  margin-top: .5em;
  padding-left: calc(var(--step) * .42);
  border-left: 1px solid var(--line);
  font-size: .88em;
  line-height: 1.42;
}
.zw:hover > .zw-de, .zw:focus-within > .zw-de { color: var(--fg-faint); }
.zw:hover > .zw-en, .zw:focus-within > .zw-en { color: var(--fg); border-left-color: var(--accent); }

/* Überschriften: der Durchschlag ist ein Umriss, gleich gross, versetzt. */
.zw-gross > .zw-en {
  margin-top: -.06em;
  margin-left: calc(var(--step) * .5);
  padding-left: 0;
  border-left: 0;
  font-size: 1em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--line-2);
  transition: -webkit-text-stroke-color .22s ease, color .22s ease;
}
.zw-gross:hover > .zw-en, .zw-gross:focus-within > .zw-en {
  -webkit-text-stroke-color: var(--accent);
  color: transparent;
}
.zw-gross:hover > .zw-de { color: var(--fg-faint); }

/* Kleinteiliges (Labels in Kacheln) bleibt schlicht untereinander. */
.zw-knapp > .zw-en {
  margin-top: .28em; padding-left: 0; border-left: 0; font-size: .92em;
}

/* ══════════════════════════════════════════════════════════════════════════
   KOPFLEISTE · FORTSCHRITT · ÜBERSICHT · KANTE
   Die Navigation ist kein Kasten mit fünf Knöpfen, sondern drei Anzeigen:
   wo man ist (Kopf), wie weit man ist (Fortschritt), was es sonst gibt
   (Kante rechts, Übersichtstafel auf Zuruf).
   ═══════════════════════════════════════════════════════════════════════ */

.fortschritt {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: transparent; pointer-events: none;
}
.fortschritt i {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transition: width .1s linear;
}

.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  height: var(--kopf-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r2);
  padding: 0 var(--pad);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.kopf[data-fest="true"] { border-bottom-color: var(--line); }

.kopf-marke {
  display: flex; align-items: baseline; gap: 12px;
  padding: 6px 10px 6px 0;
  border-radius: 4px;
}
.kopf-no {
  font-size: var(--t-sm);
  font-variation-settings: "wght" 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  letter-spacing: -0.02em;
}
.kopf-name {
  font-size: var(--t-sm);
  font-variation-settings: "wght" 620;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.kopf-gitter { display: inline-flex; flex-direction: column; gap: 3px; margin-left: 4px; align-self: center; }
.kopf-gitter i { display: block; width: 15px; height: 1.5px; background: var(--fg-dim); transition: transform .22s ease, background .22s ease; }
.kopf-marke:hover .kopf-gitter i { background: var(--accent); }
.kopf-marke[aria-expanded="true"] .kopf-gitter i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.kopf-marke[aria-expanded="true"] .kopf-gitter i:nth-child(2) { opacity: 0; }
.kopf-marke[aria-expanded="true"] .kopf-gitter i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.schalter { display: flex; gap: 8px; }
.schalter-feld { position: relative; }
.schalter-knopf {
  height: 34px; min-width: 34px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .2s ease;
}
.schalter-knopf:hover { border-color: var(--line-2); }
.tupfen { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
.kuerzel { font-size: var(--t-xs); font-variation-settings: "wght" 700; color: var(--fg-dim); letter-spacing: .02em; }
.schalter-knopf[aria-expanded="true"] .kuerzel { color: var(--accent-text); }

.schalter-liste {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px;
  background: #08080A; border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; display: flex; flex-direction: column; z-index: 5;
}
.schalter-liste[hidden] { display: none; }
.schalter-eintrag {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 8px; text-align: left; width: 100%;
  color: var(--fg-dim); font-size: var(--t-sm);
}
.schalter-eintrag:hover { background: #141419; color: var(--fg); }
.schalter-eintrag[aria-checked="true"] { color: var(--fg); }
.schalter-eintrag[aria-checked="true"]::after {
  content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.schalter-eintrag .punkt { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.schalter-eintrag .kurz { width: 36px; font-size: var(--t-xs); font-variation-settings: "wght" 700; color: var(--fg-faint); flex: none; }

/* Übersichtstafel — ein ganzes Blatt, keine Klappliste. */
.tafel {
  position: fixed; inset: 0; z-index: 58;
  background: var(--bg);
  padding: calc(var(--kopf-h) + var(--r4)) var(--pad) var(--r4);
  display: flex; flex-direction: column; justify-content: center;
  overflow: auto;
}
.tafel[hidden] { display: none; }
.tafel-gitter { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--grid) 0 1px, transparent 1px);
  background-size: var(--col) 100%; }
.tafel ol { position: relative; display: flex; flex-direction: column; }
.tafel li { border-top: 1px solid var(--line); }
.tafel li:last-child { border-bottom: 1px solid var(--line); }
.tafel a {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 44px);
  padding: clamp(14px, 2.1vh, 26px) 0;
  text-decoration: none;
  transition: color .2s ease, padding-left .25s cubic-bezier(.2,.7,.3,1);
}
.tafel a:hover, .tafel a:focus-visible { padding-left: var(--step); color: var(--accent-text); }
.tafel .t-no {
  font-size: var(--t-sm); font-variation-settings: "wght" 780;
  font-variant-numeric: tabular-nums; color: var(--fg-faint); flex: none; width: 3ch;
}
.tafel a:hover .t-no { color: var(--accent-text); }
.tafel .t-name {
  font-size: clamp(34px, 6.4vw, 88px);
  font-variation-settings: "wght" 860, "opsz" 32;
  letter-spacing: -0.045em; line-height: 1;
}
.tafel .t-en2 {
  margin-left: auto; font-size: var(--t-sm); color: var(--fg-faint);
  align-self: center; text-align: right;
}

/* Die Kante: das Register am rechten Blattrand. */
.kante {
  position: fixed; right: max(14px, calc(var(--pad) * .42)); top: 50%;
  transform: translateY(-50%); z-index: 50;
  display: none; flex-direction: column; gap: 2px;
}
.kante a {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  height: 30px; text-decoration: none; color: var(--fg-faint);
}
.kante .k-name {
  font-size: var(--t-xs); font-variation-settings: "wght" 620;
  opacity: 0; transform: translateX(6px);
  transition: opacity .22s ease, transform .22s ease;
  white-space: nowrap;
}
.kante .k-strich {
  display: block; width: 20px; height: 1.5px; background: currentColor;
  transition: width .25s cubic-bezier(.2,.7,.3,1), background .2s ease;
}
.kante a:hover .k-name, .kante a[aria-current="true"] .k-name { opacity: 1; transform: none; }
.kante a:hover { color: var(--fg-dim); }
.kante a[aria-current="true"] { color: var(--accent-text); }
.kante a[aria-current="true"] .k-strich { width: 42px; background: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   BAUTEILE
   ═══════════════════════════════════════════════════════════════════════ */

.papier {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--grid) 0 1px, transparent 1px);
  background-size: var(--col) 100%;
}
.papier.kariert {
  background-image:
    linear-gradient(to right, var(--grid) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px);
  background-size: var(--col) 100%, 100% var(--col);
}

.ecken { position: absolute; inset: 0; pointer-events: none; }
.ecken i { position: absolute; width: 15px; height: 15px; border: 0 solid var(--fg-faint); opacity: .5; }
.ecken i:nth-child(1) { top: 0; left: 0;     border-top-width: 1px; border-left-width: 1px; }
.ecken i:nth-child(2) { top: 0; right: 0;    border-top-width: 1px; border-right-width: 1px; }
.ecken i:nth-child(3) { bottom: 0; left: 0;  border-bottom-width: 1px; border-left-width: 1px; }
.ecken i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.mass { display: flex; align-items: center; gap: 14px; }
.mass .strich { position: relative; flex: 1 1 0; height: 1px; background: var(--line); transform-origin: left center; }
.mass .strich::before, .mass .strich::after {
  content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--line);
}
.mass .strich::before { left: 0; }
.mass .strich::after { right: 0; }
.mass .strich:last-child::before { display: none; }
.mass .strich:first-child::after { display: none; }
.mass .wert {
  flex: none; background: var(--bg); padding: 0 12px;
  font-size: var(--t-xs); letter-spacing: .06em; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   ABSCHNITT — die tragende Figur
   Links eine haftende Spalte mit Nummer, Titel und Beitext. Rechts der
   Inhalt, der daran vorbeiläuft. Auf dem Telefon stapelt sich beides.
   ═══════════════════════════════════════════════════════════════════════ */

#bogen { display: block; }

.abschnitt {
  position: relative;
  padding: var(--r6) 0;
  border-top: 1px solid var(--line);
}
.abschnitt:first-child { border-top: 0; padding-top: 0; }

.abschnitt-innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--r4) 0;
  padding: 0 var(--pad);
}

.abschnitt-kopf { position: relative; }
.abschnitt-no {
  display: block;
  font-size: var(--t-2xl);
  font-variation-settings: "wght" 900, "opsz" 32;
  line-height: .78; letter-spacing: -0.07em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-2);
  user-select: none;
}
.abschnitt-titel {
  margin-top: -.12em;
  margin-left: calc(var(--step) * .8);
  font-size: var(--t-xl);
  font-variation-settings: "wght" 880, "opsz" 32;
  letter-spacing: -0.045em; line-height: .98;
}
.abschnitt-kicker {
  margin: var(--r2) 0 0 calc(var(--step) * .8);
  max-width: 34ch;
  color: var(--fg-dim);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.abschnitt-kopf .mass { margin-top: var(--r2); margin-left: calc(var(--step) * .8); }

.abschnitt-inhalt { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   00 · TITELSEITE
   ═══════════════════════════════════════════════════════════════════════ */

.titelseite {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  gap: var(--r3);
  padding: calc(var(--kopf-h) + clamp(56px, 12vh, 130px)) var(--pad) var(--r4);
  overflow: hidden;
}
.titelseite > .ecken { inset: calc(var(--kopf-h) + 24px) calc(var(--pad) * .4) 22px; }

.wortmarke { position: relative; line-height: .8; }
.wortmarke span {
  display: block;
  font-size: var(--t-3xl);
  font-variation-settings: "wght" 880, "opsz" 32;
  letter-spacing: -0.058em;
  white-space: nowrap;
}
.wortmarke span:nth-child(2) { margin-left: var(--step); }
.wortmarke span:nth-child(3) { margin-left: calc(var(--step) * 2); color: var(--accent); }

.schriftfeld {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-left: var(--step); max-width: 780px;
}
.schriftfeld > div { background: var(--bg); padding: 12px 14px 14px; min-width: 0; }
.schriftfeld dt { font-size: var(--t-xs); letter-spacing: .07em; color: var(--fg-faint); }
.schriftfeld dd {
  margin-top: 5px; font-size: var(--t-sm);
  font-variation-settings: "wght" 700; font-variant-numeric: tabular-nums;
}

.weiter {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-xs); letter-spacing: .07em; color: var(--fg-faint);
}
.weiter i {
  display: block; width: 1px; height: 32px; background: var(--fg-faint);
  transform-origin: top center; animation: lot 2.6s ease-in-out infinite;
}
@keyframes lot { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }

/* ── Das Tagesblatt ─────────────────────────────────────────────────────── */

.tagesblatt { display: grid; gap: var(--r4); }

.seitenschrift {
  position: absolute; left: 0; top: 0;
  writing-mode: vertical-rl;
  font-size: var(--t-xs); letter-spacing: .09em; color: var(--fg-faint);
  white-space: nowrap;
}
.seitenschrift::after { content: ""; display: block; width: 1px; height: 40px; background: var(--line); margin: 12px auto 0; }

.post {
  position: relative;
  padding-left: calc(var(--step) * .7);
}
.post .roast {
  font-size: clamp(26px, 4.4vw, 62px);
  line-height: 1.12;
  font-variation-settings: "wght" 740, "opsz" 32;
  letter-spacing: -0.032em;
  max-width: 21ch;
  text-wrap: balance;
}
.post .roast::before {
  content: ""; display: block; width: var(--step); height: 3px;
  background: var(--accent); margin-bottom: var(--r2);
}
.post .roast .zw-en {
  margin-top: .5em; font-size: .52em; line-height: 1.24;
  font-variation-settings: "wght" 640;
}

/* Der Beleg: woher der Satz kommt und warum gerade dieser. */
.beleg {
  margin-left: calc(var(--step) * .7);
  border: 1px solid var(--line);
  max-width: 900px;
}
.beleg-kopf {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); letter-spacing: .06em; color: var(--fg-faint);
}
.beleg-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.beleg-gitter > div { background: var(--bg); padding: 14px 18px 16px; min-width: 0; }
.beleg-gitter dt { font-size: var(--t-xs); color: var(--fg-faint); }
.beleg-gitter dd {
  margin-top: 5px; font-size: var(--t-sm); line-height: 1.4;
  font-variation-settings: "wght" 620;
}
.beleg-erklaerung {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm); line-height: 1.55; color: var(--fg-dim);
  max-width: 62ch;
}

.tagesmass { margin-left: calc(var(--step) * .7); }

.kennzahl { margin-left: calc(var(--step) * 1.4); border-top: 1px solid var(--line); padding-top: var(--r2); }
.kennzahl .num { font-size: clamp(52px, 7vw, 116px); color: var(--accent); }
.kennzahl .label { margin-top: 12px; color: var(--fg-dim); font-size: var(--t-sm); max-width: 34ch; }

/* ══════════════════════════════════════════════════════════════════════════
   01 · STATS — Bänder statt Kacheln
   ═══════════════════════════════════════════════════════════════════════ */

.band {
  border-top: 1px solid var(--line);
  padding: var(--r3) 0;
}
.band:first-child { border-top: 0; padding-top: 0; }

/* Paare: zwei Werte, die einander widersprechen. */
.paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r3); position: relative; }
.paar .haelfte { min-width: 0; }
.paar .haelfte:nth-child(2) .num { color: var(--accent); }
.paar .num { font-size: clamp(54px, 9vw, 148px); }
.paar .label { margin-top: 14px; font-size: var(--t-md); color: var(--fg); max-width: 24ch; line-height: 1.3; }
.paar .sub { margin-top: 6px; font-size: var(--t-sm); color: var(--fg-faint); max-width: 30ch; }

/* Einzelwerte: ruhiges Raster, aber grosse Ziffern. */
.einzeln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.einzeln > .zelle { background: var(--bg); padding: var(--r3) var(--r2) var(--r3) 0; min-width: 0; }
.einzeln > .zelle:nth-child(even) { padding-left: var(--r2); }
.zelle .num { font-size: clamp(38px, 5.2vw, 78px); }
.zelle .label { margin-top: 12px; font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.4; }
.zelle .sub { margin-top: 5px; font-size: var(--t-xs); color: var(--fg-faint); }

.satzband {
  border-top: 1px solid var(--line);
  padding: var(--r4) 0 0;
  font-size: var(--t-lg);
  line-height: 1.3;
  font-variation-settings: "wght" 560;
  max-width: 30ch;
}

/* Aufklappbarer Zweitsatz */
.mehr-knopf {
  margin-top: var(--r2);
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--fg-faint); font-size: var(--t-sm);
}
.mehr-knopf:hover { color: var(--accent-text); }
.mehr-knopf .keil {
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.mehr-knopf[aria-expanded="true"] .keil { transform: rotate(-135deg) translate(-1px, -1px); }
.mehr {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .26s cubic-bezier(.2,.7,.3,1);
}
.mehr > div { overflow: hidden; }
.mehr[data-offen="true"] { grid-template-rows: 1fr; }
.mehr p {
  padding-top: var(--r2);
  font-size: var(--t-sm); line-height: 1.55; color: var(--fg-dim); max-width: 56ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   02 · KARTE — eine Laufkarte, die sich selbst nicht ernst nimmt
   ═══════════════════════════════════════════════════════════════════════ */

.karte { position: relative; }
.karte-rahmen {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(20px, 2.4vw, 40px) clamp(16px, 2vw, 34px) clamp(16px, 1.8vw, 28px);
}
.karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.karte .spur { fill: none; stroke: var(--accent); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.karte .spur-schatten { fill: none; stroke: var(--line); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.karte .knoten-start { fill: var(--bg); stroke: var(--accent); stroke-width: 3.5; }
.karte .knoten-ende { fill: var(--accent); }
.karte .marke { fill: var(--fg-dim); font-size: 26px; font-variation-settings: "wght" 660; font-variant-numeric: tabular-nums; }
.karte .fahne-linie { stroke: var(--fg-faint); stroke-width: 1.6; }
.karte .fahne-text { fill: var(--fg); font-size: 22px; font-variation-settings: "wght" 560; }
.karte .fahne-feld { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.4; }
.karte .fahne-punkt { fill: var(--accent); }

.karte-titel {
  position: absolute; top: -1px; left: clamp(16px, 2vw, 34px);
  transform: translateY(-50%);
  background: var(--bg); padding: 0 10px;
  font-size: var(--t-xs); letter-spacing: .07em; color: var(--fg-faint);
}
.karte-stempel {
  position: absolute; bottom: clamp(46px, 5vw, 74px); left: clamp(20px, 2.4vw, 44px);
  border: 2px solid var(--accent); color: var(--accent-text);
  padding: 5px 12px; border-radius: 3px;
  font-size: var(--t-xs); letter-spacing: .12em;
  font-variation-settings: "wght" 760;
  transform: rotate(-11deg);
  opacity: .85;
}
.karte-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--r2); margin-top: var(--r3);
}
.karte-massstab { font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: .05em; }
.karte-nord { display: flex; align-items: center; gap: 9px; font-size: var(--t-xs); color: var(--fg-faint); }
.karte-nord .pfeil {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 13px solid var(--accent);
}
.zeichenerklaerung { margin-top: var(--r3); border-top: 1px solid var(--line); padding-top: var(--r2); }
.zeichenerklaerung h3 { font-size: var(--t-xs); letter-spacing: .07em; color: var(--fg-faint); margin-bottom: 12px; }
.zeichenerklaerung ul { display: grid; gap: 10px; }
.zeichenerklaerung li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-sm); color: var(--fg-dim); }
.zeichenerklaerung .sym { flex: none; width: 26px; height: 18px; margin-top: 2px; }
.karte figcaption { margin-top: var(--r3); font-size: var(--t-sm); line-height: 1.55; color: var(--fg-dim); max-width: 56ch; }

/* ══════════════════════════════════════════════════════════════════════════
   03 · CHANGELOG — der Bereich, an dem man hängenbleiben soll
   ═══════════════════════════════════════════════════════════════════════ */

.log { position: relative; }
.eintrag {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--r2);
  padding: var(--r4) 0;
  border-top: 1px solid var(--line);
  transition: background .3s ease;
}
.eintrag:first-child { border-top: 0; }
.eintrag:hover { background: linear-gradient(to right, var(--surface), transparent 70%); }

.eintrag-marke { display: flex; align-items: baseline; gap: 16px; }
.eintrag .v {
  font-size: clamp(30px, 3.6vw, 62px);
  font-variation-settings: "wght" 880, "opsz" 32;
  letter-spacing: -0.05em; line-height: .9;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.eintrag:first-child .v { color: var(--accent); }
.eintrag .d {
  font-size: var(--t-sm); color: var(--fg-faint);
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.eintrag .txt {
  font-size: var(--t-lg);
  line-height: 1.34;
  font-variation-settings: "wght" 560;
  letter-spacing: -0.018em;
  max-width: 32ch;
}
.eintrag .txt .zw-en { font-size: .74em; }

.bekannt {
  margin-top: var(--r5);
  border: 1px solid var(--line);
  padding: var(--r3);
  background: var(--surface);
}
.bekannt h3 {
  font-size: var(--t-xl);
  font-variation-settings: "wght" 840, "opsz" 32;
  letter-spacing: -0.035em;
  margin-bottom: var(--r3);
}
.bekannt li {
  padding: var(--r2) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-md); line-height: 1.45;
  display: flex; gap: 16px;
}
.bekannt li .nr {
  flex: none; font-size: var(--t-xs); color: var(--accent-text);
  font-variation-settings: "wght" 760; padding-top: .45em;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   04 · RELEASES
   ═══════════════════════════════════════════════════════════════════════ */

.app {
  position: relative;
  padding: var(--r4) 0;
  border-top: 1px solid var(--line);
}
.app:first-child { border-top: 0; padding-top: 0; }
.app-no {
  position: absolute; right: 0; top: var(--r4);
  font-size: clamp(52px, 6vw, 118px);
  font-variation-settings: "wght" 900;
  line-height: .8; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.3px var(--line);
  user-select: none; pointer-events: none;
}
.app h3 {
  position: relative;
  font-size: var(--t-xl);
  font-variation-settings: "wght" 880, "opsz" 32;
  letter-spacing: -0.042em; line-height: 1;
}
.app .kurz { margin-top: var(--r2); color: var(--fg-dim); font-size: var(--t-md); max-width: 42ch; }
.fakten { display: flex; flex-wrap: wrap; gap: 6px clamp(28px, 3.4vw, 60px); margin-top: var(--r3); }
.fakten dt { font-size: var(--t-xs); color: var(--fg-faint); }
.fakten dd { margin-top: 3px; font-size: var(--t-md); font-variation-settings: "wght" 660; font-variant-numeric: tabular-nums; }

.feld { margin-top: var(--r3); }
.feld .k { font-size: var(--t-xs); color: var(--fg-dim); font-variation-settings: "wght" 720; letter-spacing: .05em; margin-bottom: 9px; }
.feld p { font-size: var(--t-md); line-height: 1.55; max-width: 54ch; }
.feld.zaehne { border-left: 2px solid var(--accent); padding-left: var(--r2); margin-left: calc(var(--step) * .5); }
.feld.zaehne .k { color: var(--accent-text); }

.laden {
  margin-top: var(--r3);
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--accent); color: var(--on-accent);
  padding: 14px 24px; border-radius: 999px;
  font-size: var(--t-sm); font-variation-settings: "wght" 720;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.laden svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.laden:hover { filter: brightness(1.12); transform: translateY(-1px); }
.hinweis-install {
  margin-top: var(--r4); color: var(--fg-dim);
  font-size: var(--t-sm); line-height: 1.55; max-width: 62ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   05 · ISSUES — ein Journal, keine Liste
   ═══════════════════════════════════════════════════════════════════════ */

.issue-gruppe { margin-bottom: var(--r5); }
.gruppe-marke {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: var(--r3);
  font-size: var(--t-xs); letter-spacing: .08em; color: var(--fg-faint);
}
.gruppe-marke::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.ticket {
  border: 1px solid var(--line);
  margin-bottom: var(--r3);
  background: var(--surface);
}
.ticket-kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 14px var(--r3);
  border-bottom: 1px solid var(--line);
}
.ticket .nr {
  font-size: var(--t-sm); color: var(--fg-faint);
  font-variant-numeric: tabular-nums; font-variation-settings: "wght" 700;
}
.zustand {
  font-size: var(--t-xs); padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--fg-dim); letter-spacing: .05em;
}
.zustand.open { border-color: var(--accent); color: var(--accent-text); }
.ticket-frage {
  padding: var(--r3);
  font-size: var(--t-xl);
  line-height: 1.16;
  font-variation-settings: "wght" 720, "opsz" 32;
  letter-spacing: -0.03em;
  max-width: 26ch;
}
.ticket-frage .zw-en { font-size: .5em; }

.antwort { padding: 0 var(--r3) var(--r3); }
.antwort.amtlich {
  border-left: 3px solid var(--accent);
  margin: 0 var(--r3) var(--r3);
  padding: var(--r2) 0 var(--r2) var(--r2);
  background: var(--surface-2);
}
.antwort .k { font-size: var(--t-xs); color: var(--fg-faint); margin-bottom: 8px; letter-spacing: .05em; }
.antwort.amtlich .k { color: var(--accent-text); }
.antwort p { font-size: var(--t-lg); line-height: 1.36; font-variation-settings: "wght" 560; max-width: 40ch; }
.antwort .wer { margin-top: 9px; font-size: var(--t-xs); color: var(--fg-faint); }

.beitraege { border-top: 1px solid var(--line); padding: var(--r3); }
.beitraege > .k { font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: .05em; margin-bottom: var(--r2); }
.beitrag {
  border-left: 1px solid var(--line-2);
  padding: 4px 0 4px var(--r2);
  margin-bottom: var(--r2);
}
.beitrag p { font-size: var(--t-md); line-height: 1.45; max-width: 48ch; }
.beitrag .wer { margin-top: 7px; font-size: var(--t-xs); color: var(--fg-faint); }

.wink {
  border: 1px dashed var(--line-2); border-radius: 4px;
  padding: var(--r2); color: var(--fg-dim);
  font-size: var(--t-sm); max-width: 48ch;
}

form.antwort-form { border-top: 1px solid var(--line); padding: var(--r3); }
form.antwort-form .k { font-size: var(--t-xs); color: var(--fg-faint); letter-spacing: .05em; margin-bottom: var(--r2); }
form.antwort-form textarea, form.antwort-form input[type="text"] {
  width: 100%; font: inherit; font-size: var(--t-md); color: var(--fg);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 14px 15px; resize: vertical;
}
form.antwort-form textarea { min-height: 116px; line-height: 1.45; }
form.antwort-form input[type="text"] { margin-top: 10px; }
form.antwort-form textarea::placeholder, form.antwort-form input::placeholder { color: var(--fg-faint); }
form.antwort-form textarea:focus-visible, form.antwort-form input:focus-visible { border-color: var(--accent); outline-offset: 0; }

.form-fuss { margin-top: var(--r2); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-fuss .links { color: var(--fg-faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.senden {
  background: var(--accent); color: var(--on-accent);
  padding: 12px 24px; border-radius: 999px;
  font-size: var(--t-sm); font-variation-settings: "wght" 720;
  transition: filter .2s ease;
}
.senden.zweitrangig { background: transparent; color: var(--fg-dim); border: 1px solid var(--line-2); }
.senden[disabled] { opacity: .4; cursor: default; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Vorschau vor dem Absenden — nichts geht raus, bevor man es gesehen hat. */
.vorschau { margin-top: var(--r3); border: 1px solid var(--accent); padding: var(--r2); }
.vorschau[hidden] { display: none; }
.vorschau .k { color: var(--accent-text); }
.vorschau p { font-size: var(--t-md); line-height: 1.45; white-space: pre-wrap; }
.vorschau .wer { margin-top: 8px; font-size: var(--t-xs); color: var(--fg-faint); }

.form-meldung { margin-top: var(--r2); font-size: var(--t-sm); max-width: 48ch; }
.form-meldung.ok { color: var(--accent-text); }
.form-meldung.err { color: #FF7A7A; }

.sichtungs-hinweis { color: var(--fg-faint); font-size: var(--t-sm); max-width: 58ch; margin-bottom: var(--r4); }

.abwesend { border: 1px solid var(--line); padding: var(--r3); background: var(--surface); }
.abwesend h3 { font-size: var(--t-xl); font-variation-settings: "wght" 800; letter-spacing: -0.03em; }
.abwesend p { margin-top: var(--r2); color: var(--fg-dim); font-size: var(--t-md); max-width: 46ch; }
.abwesend button {
  margin-top: var(--r3); border: 1px solid var(--accent); color: var(--accent-text);
  border-radius: 999px; padding: 11px 22px; font-size: var(--t-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   FUSS · IMPRESSUM
   So dezent wie zulässig: klein, am Ende, aber ständig vorhanden und ohne
   Umweg erreichbar — nicht hinter einem Klick auf einer anderen Seite.
   ═══════════════════════════════════════════════════════════════════════ */

#fuss {
  border-top: 1px solid var(--line);
  padding: var(--r5) var(--pad) var(--r4);
}
.fuss-innen { display: grid; gap: var(--r4); }
.fuss-zeile { color: var(--fg-faint); font-size: var(--t-sm); line-height: 1.55; max-width: 56ch; }

.impressum { border: 1px solid var(--line); max-width: 640px; }
.impressum h2 {
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); letter-spacing: .08em; color: var(--fg-dim);
  font-variation-settings: "wght" 700;
}
.impressum dl { display: grid; }
.impressum .zeile { display: grid; grid-template-columns: 11ch 1fr; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.impressum dt { font-size: var(--t-xs); color: var(--fg-faint); padding-top: .25em; }
.impressum dd { font-size: var(--t-sm); overflow-wrap: anywhere; }
.impressum dd.fehlt { color: #FFB020; }
.impressum .kleingedruckt { padding: 14px 18px; font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.55; }
.impressum .rechtsgrund { padding: 0 18px 14px; font-size: var(--t-xs); color: var(--fg-faint); }

.fuss-ende { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); flex-wrap: wrap; }
.fuss-ende a, .fuss-ende button { font-size: var(--t-xs); color: var(--fg-faint); text-decoration: none; letter-spacing: .05em; }
.fuss-ende a:hover, .fuss-ende button:hover { color: var(--accent-text); }

/* ══════════════════════════════════════════════════════════════════════════
   BEWEGUNG
   Alles hier antwortet entweder auf das Scrollen oder auf eine Handlung.
   Nichts bewegt sich von allein ausser dem Strich unter „nach unten".
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes hoch { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ziehen { from { transform: scaleX(0); } to { transform: none; } }

.auftritt > * { animation: hoch .68s cubic-bezier(.2,.75,.25,1) both; }
.auftritt .wortmarke span { animation: hoch .68s cubic-bezier(.2,.75,.25,1) both; }
.auftritt .wortmarke span:nth-child(1) { animation-delay: .05s; }
.auftritt .wortmarke span:nth-child(2) { animation-delay: .14s; }
.auftritt .wortmarke span:nth-child(3) { animation-delay: .23s; }
.auftritt .mass .strich { animation: ziehen .8s cubic-bezier(.2,.75,.25,1) .3s both; }
.auftritt > .schriftfeld { animation-delay: .38s; }
.auftritt > .weiter { animation-delay: .52s; }

/* Beim Hereinscrollen: der Abschnitt richtet sich auf. */
.kommt { opacity: 0; transform: translateY(26px); }
.kommt.da {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.75,.25,1), transform .7s cubic-bezier(.2,.75,.25,1);
}
.kommt.da[data-verzug="1"] { transition-delay: .07s; }
.kommt.da[data-verzug="2"] { transition-delay: .14s; }
.kommt.da[data-verzug="3"] { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .kommt { opacity: 1; transform: none; }
  .weiter i { animation: none; transform: scaleY(.7); }
}

/* ══════════════════════════════════════════════════════════════════════════
   BREITE BILDSCHIRME
   Ab hier wird aus dem Stapel ein Bau: haftende Kopfspalte links, Inhalt
   rechts, das Register an der Blattkante.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 760px) {
  .paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 64px); }
  .paar::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px; background: var(--line);
  }
  .einzeln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .einzeln > .zelle { padding: var(--r3) var(--r2); }
  .einzeln > .zelle:nth-child(even) { padding-left: var(--r2); }
  .schriftfeld { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .beleg-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .eintrag { grid-template-columns: minmax(190px, 20%) minmax(0, 1fr); gap: 0 clamp(28px, 3.4vw, 72px); }
  .eintrag-marke { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fuss-innen { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

@media (min-width: 1100px) {
  .kante { display: flex; }

  .abschnitt-innen {
    grid-template-columns: minmax(240px, 21%) minmax(0, 1fr);
    column-gap: clamp(40px, 4.6vw, 104px);
  }
  .abschnitt-kopf {
    position: sticky;
    top: calc(var(--kopf-h) + 44px);
    align-self: start;
  }
  .abschnitt-no { font-size: clamp(72px, 7vw, 128px); }
  .abschnitt-titel { font-size: clamp(30px, 2.7vw, 48px); margin-left: calc(var(--step) * .34); }
  .abschnitt-kicker { margin-left: calc(var(--step) * .34); font-size: var(--t-sm); }
  .abschnitt-kopf .mass { margin-left: calc(var(--step) * .34); }

  /* Der zweisprachige Fliesstext wird zur echten Parallelspalte. */
  .zw-parallel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2vw, 44px); align-items: start; }
  .zw-parallel > .zw-en { margin-top: 0; padding-left: clamp(20px, 2vw, 44px); border-left: 1px solid var(--line); font-size: 1em; }

  .titelseite { padding-top: calc(var(--kopf-h) + clamp(60px, 9vh, 120px)); }
  .post { padding-left: calc(var(--step) * 1.1); }
  .tagesblatt { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1500px) {
  .abschnitt-innen { grid-template-columns: minmax(280px, 20%) minmax(0, 1fr); }
  .einzeln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Auf dem Telefon stehen die Bemerkungen unter der Karte, nummeriert. */
.karte-notizen { margin-top: var(--r3); display: grid; gap: 14px; counter-reset: none; }
.karte-notizen[hidden] { display: none; }
.karte-notizen li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; color: var(--fg); }
.karte-notizen .n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-size: 12.5px; font-variation-settings: "wght" 780;
  font-variant-numeric: tabular-nums;
}
.karte .fahne-nummer { fill: var(--on-accent); font-variation-settings: "wght" 800; }

/* Der Impressum-Verweis in der Übersicht: vorhanden, aber leiser als die
   Abschnitte — so dezent, wie es zulässig ist. */
.tafel .tafel-neben a { padding-block: clamp(10px,1.5vh,18px); }
.tafel .tafel-neben .t-name { font-size: clamp(20px, 2.6vw, 34px); color: var(--fg-dim); }
.tafel .tafel-neben a:hover .t-name { color: var(--accent-text); }
.tafel .tafel-neben .t-no { color: var(--fg-faint); }