/* ==================================================================
   DIE DISTANZ — Ein Instrument nach Arthur Schopenhauer
   Aufnahmemedium (verbindlich für alles): Blätter aus dem Archiv eines
   physikalischen Instituts, 1974. Schlierenaufnahmen auf 4x5-Planfilm,
   Silbergelatine-Kontaktabzug auf Barytpapier.
   Es gibt kein reines Schwarz und kein reines Weiß auf dieser Seite.
   Es gibt genau eine Lichtrichtung: 118 Grad.
   ================================================================== */

/* ---------- 0 · Schriften ---------- */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var-italic.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Martian";src:url("../fonts/martianmono-var.woff2") format("woff2-variations");
  font-weight:100 800;font-stretch:75% 112%;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni";src:url("../fonts/bodoni-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}

/* ---------- 1 · Der Regler als Wurzelgröße ---------- */
@property --d{syntax:"<number>";inherits:true;initial-value:50}

:root{
  --d:50;
  --near:calc((100 - var(--d)) * 1%);
  --far:calc(var(--d) * 1%);

  /* Zwei Temperaturanker. Nie neutral, nie beide gleich. */
  --ink-warm:#191009;  --ink-cold:#0a0f13;
  --pap-warm:#f2e3c9;  --pap-cold:#bfc9ce;
  --sig-warm:#e28b36;  --sig-cold:#4d98ac;

  /* Rückfallwerte zuerst — Browser ohne color-mix() bekommen die Mittelstellung */
  --bg:#12141a;   --fg:#d9d5cb;   --sig:#a29171;
  --fg-2:#aeaba2; --fg-3:#82807a; --line:#31333a; --plate:#191c22;

  --bg:  color-mix(in oklab, var(--ink-warm) var(--near), var(--ink-cold));
  --fg:  color-mix(in oklab, var(--pap-warm) var(--near), var(--pap-cold));
  --sig: color-mix(in oklab, var(--sig-warm) var(--near), var(--sig-cold));
  --fg-2:color-mix(in oklab, var(--fg) 78%, var(--bg));
  --fg-3:color-mix(in oklab, var(--fg) 57%, var(--bg));
  --line:color-mix(in oklab, var(--fg) 21%, var(--bg));
  --plate:color-mix(in oklab, var(--fg) 7%, var(--bg));

  --light:118deg;
  --grain:calc(0.020 + (100 - var(--d)) * 0.0007);

  /* Typografie reagiert auf Distanz: nah = groß, warm, eng gesetzt */
  --track:calc((var(--d) - 50) * 0.0018em);
  --lead:calc(1.72 - var(--d) * 0.0022);
  --scale:calc(1.06 - var(--d) * 0.0014);

  --step--1:calc(0.80rem * var(--scale));
  --step-0: calc(1.05rem * var(--scale));
  --step-1: calc(1.35rem * var(--scale));
  --step-2: clamp(1.6rem, 2.6vw, 2.3rem);
  --step-3: clamp(2.1rem, 5.2vw, 4.4rem);
  --step-4: clamp(2.8rem, 11vw, 9.5rem);

  --rail:clamp(0px, 4vw, 92px);
  --gut:clamp(1.15rem, 4vw, 3.4rem);
  --ease-heavy:cubic-bezier(.16,.84,.28,1);
  --ease-light:cubic-bezier(.34,1.12,.42,1);

  color-scheme:dark;
}

/* ---------- 2 · Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;
  font-size:var(--step-0);line-height:var(--lead);
  font-variation-settings:"wght" 380,"wdth" 96;
  letter-spacing:var(--track);
  transition:background-color .9s var(--ease-heavy), color .9s var(--ease-heavy);
  overflow-x:hidden;
}
img,video,canvas,svg,picture{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in oklab,var(--sig) 70%,transparent)}
a:hover{text-decoration-color:var(--sig)}
::selection{background:color-mix(in oklab,var(--sig) 45%,transparent)}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}

/* ---------- 3 · Emulsion: Korn, Vignette, Halation ---------- */
/* Das Korn sitzt in der Schicht, nicht im Motiv — es scrollt nicht mit. */
.emulsion{position:fixed;inset:0;pointer-events:none;z-index:900}
.emulsion__grain{
  position:absolute;inset:-40px;opacity:var(--grain);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  transition:opacity .9s var(--ease-heavy);
}
.emulsion__vignette{
  position:absolute;inset:0;
  background:radial-gradient(125% 105% at 42% 34%, transparent 46%, rgba(0,0,0,.34) 100%);
}
.emulsion__scratch{
  position:absolute;top:0;bottom:0;left:63.2%;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.055) 18%,rgba(255,255,255,.02) 62%,transparent);
  opacity:.7;
}

/* ---------- 4 · Aufbau ---------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:600;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:1.4rem 0 8.5rem;
  border-right:1px solid var(--line);
  background:linear-gradient(var(--light), color-mix(in oklab,var(--fg) 3%,var(--bg)), var(--bg));
}
.rail__mark{font-family:"Martian",monospace;font-size:9px;font-variation-settings:"wght" 600,"wdth" 80;
  letter-spacing:.16em;writing-mode:vertical-rl;text-orientation:mixed;color:var(--fg-3)}
.rail__nav{display:flex;flex-direction:column;gap:.1rem;align-items:center}
.rail__link{
  font-family:"Martian",monospace;font-size:10px;font-variation-settings:"wght" 500,"wdth" 85;
  color:var(--fg-3);padding:.55rem .3rem;text-decoration:none;position:relative;
  transition:color .4s var(--ease-heavy);
}
.rail__link::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:20px;height:20px;border:1px solid transparent;border-radius:50%;
  transition:border-color .5s var(--ease-heavy),scale .5s var(--ease-light)}
.rail__link:hover,.rail__link[aria-current="true"]{color:var(--sig)}
.rail__link[aria-current="true"]::before{border-color:color-mix(in oklab,var(--sig) 55%,transparent)}

main{margin-left:var(--rail)}
.blatt{position:relative;padding:clamp(4.5rem,11vh,9rem) var(--gut) clamp(4.5rem,11vh,9rem);
  max-width:1560px}
.blatt + .blatt{border-top:1px solid var(--line)}

/* Kopfmarke jedes Blattes */
.marke{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,4vh,3.2rem)}
.marke__nr{font-family:"Martian",monospace;font-size:var(--step--1);
  font-variation-settings:"wght" 700,"wdth" 78;color:var(--sig);letter-spacing:.1em}
.marke__t{font-family:"Martian",monospace;font-size:var(--step--1);
  font-variation-settings:"wght" 300,"wdth" 90;color:var(--fg-2);letter-spacing:.22em;text-transform:uppercase}
.marke__rule{flex:1;height:1px;background:var(--line);align-self:center}

h1,h2,h3{font-family:"Martian",monospace;font-weight:400;margin:0;text-wrap:balance}
h1{font-size:var(--step-4);font-variation-settings:"wght" 200,"wdth" 76;
  line-height:.92;letter-spacing:-.035em}
h2{font-size:clamp(1.45rem,2.6vw,2.35rem);font-variation-settings:"wght" 300,"wdth" 78;
  line-height:1.14;letter-spacing:-.018em;max-width:19ch}

/* Aufschlag: Titel links, Vorspann rechts — quer statt hoch */
.aufschlag{display:grid;gap:clamp(1rem,2.6vw,3rem);align-items:start}
@media (min-width:900px){
  .aufschlag{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .aufschlag > .vorspann{margin-top:.3rem}
}
h3{font-size:var(--step-1);font-variation-settings:"wght" 600,"wdth" 88;line-height:1.25}

.satz{max-width:46ch}
.satz--breit{max-width:62ch}
.satz p + p{margin-top:1.05em}
.vorspann{font-size:var(--step-1);font-variation-settings:"wght" 300,"wdth" 100;
  color:var(--fg-2);line-height:1.5}

.zitat{font-family:"Bodoni",Georgia,serif;font-style:italic;
  font-size:clamp(1.35rem,2.7vw,2.15rem);line-height:1.32;letter-spacing:0;
  color:var(--fg);max-width:24ch;margin:0}
.zitat__q{display:block;font-family:"Martian",monospace;font-style:normal;
  font-size:10px;font-variation-settings:"wght" 500,"wdth" 82;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);margin-top:1.1rem}

.mono{font-family:"Martian",monospace;font-variation-settings:"wght" 450,"wdth" 85;
  font-size:var(--step--1);letter-spacing:.06em}
.kap{font-family:"Martian",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  font-variation-settings:"wght" 550,"wdth" 82;color:var(--fg-3)}

/* Platte: ein Blatt aus dem Archiv */
.platte{position:relative;background:var(--plate);border:1px solid var(--line);
  box-shadow:0 22px 44px -30px rgba(0,0,0,.85), 0 2px 0 -1px color-mix(in oklab,var(--fg) 8%,transparent) inset}
.platte img{width:100%;height:auto;
  filter:contrast(calc(1 + (var(--d) - 50) * .0016)) saturate(0) brightness(calc(1.02 - var(--d)*.0012));
  transition:filter .9s var(--ease-heavy)}
.platte__bu{position:absolute;left:0;right:0;bottom:-1.65rem;display:flex;justify-content:space-between;
  font-family:"Martian",monospace;font-size:9px;letter-spacing:.16em;color:var(--fg-3);
  font-variation-settings:"wght" 450,"wdth" 80}

/* ---------- 5 · Deckblatt ---------- */
.deck{min-height:100svh;display:grid;align-content:center;padding-top:clamp(3rem,8vh,6rem)}
.deck__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
@media (min-width:960px){.deck__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:end}}
.deck__kopf{font-family:"Martian",monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-3);display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-bottom:clamp(2rem,6vh,4rem)}
.deck h1 .w2{display:block;padding-left:.09em;color:var(--sig)}
.deck__these{margin-top:clamp(1.6rem,4vh,2.6rem);max-width:44ch;font-size:var(--step-1);
  font-variation-settings:"wght" 300,"wdth" 102;color:var(--fg-2)}
.deck__medien{position:relative;overflow:hidden}
.deck__medien img{width:100%;height:auto}
.deck__medien video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease-heavy)}
.deck__medien video.da{opacity:1}
.deck__scroll{margin-top:clamp(2rem,6vh,3.6rem);display:flex;align-items:center;gap:.8rem;
  font-family:"Martian",monospace;font-size:10px;letter-spacing:.2em;color:var(--fg-3);text-transform:uppercase}
.deck__scroll span:last-child{display:block;width:44px;height:1px;background:var(--fg-3);
  transform-origin:left;animation:zieh 3.6s var(--ease-heavy) infinite}
@keyframes zieh{0%{scale:0 1;opacity:0}22%{scale:1 1;opacity:1}72%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}

/* ---------- 6 · Der Regler ---------- */
.regler{
  position:fixed;left:50%;translate:-50% 0;bottom:clamp(.7rem,2vh,1.4rem);z-index:800;
  width:min(94vw,720px);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.7rem,2vw,1.4rem);
  padding:.62rem clamp(.7rem,2vw,1.15rem);
  background:color-mix(in oklab,var(--bg) 86%,var(--fg));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(.7);
  box-shadow:0 -2px 40px -18px color-mix(in oklab,var(--sig) 70%,transparent),
             0 30px 60px -40px rgba(0,0,0,.9);
}
.regler__wert{font-family:"Martian",monospace;font-variation-settings:"wght" 250,"wdth" 78;
  font-size:clamp(1.5rem,4vw,2rem);line-height:1;color:var(--sig);
  font-variant-numeric:tabular-nums;min-width:2.7ch;text-align:right}
.regler__mitte{display:grid;gap:.32rem}
.regler__legende{display:flex;justify-content:space-between;font-family:"Martian",monospace;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);
  font-variation-settings:"wght" 500,"wdth" 80}
.regler__legende b{font-variation-settings:"wght" 700,"wdth" 80;color:var(--fg-2);font-weight:400}
.regler__bahn{position:relative;height:26px;display:flex;align-items:center}
.regler__skala{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;
  pointer-events:none;padding:0 6px}
.regler__skala i{width:1px;background:var(--line);height:7px}
.regler__skala i:nth-child(5n+1){height:13px;background:color-mix(in oklab,var(--fg) 34%,var(--bg))}
input[type=range].regler__zug{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;margin:0;height:26px;position:relative;z-index:2}
input[type=range].regler__zug::-webkit-slider-runnable-track{height:26px;background:transparent}
input[type=range].regler__zug::-moz-range-track{height:26px;background:transparent}
input[type=range].regler__zug::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:24px;border-radius:1px;cursor:grab;
  background:linear-gradient(var(--light),color-mix(in oklab,var(--sig) 92%,var(--fg)),var(--sig));
  box-shadow:0 0 0 1px color-mix(in oklab,var(--bg) 60%,transparent),
             0 0 22px -3px color-mix(in oklab,var(--sig) 85%,transparent)}
input[type=range].regler__zug::-moz-range-thumb{
  width:14px;height:24px;border:0;border-radius:1px;cursor:grab;background:var(--sig);
  box-shadow:0 0 22px -3px color-mix(in oklab,var(--sig) 85%,transparent)}
input[type=range].regler__zug:active::-webkit-slider-thumb{cursor:grabbing}
.regler__ton{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);
  color:var(--fg-3);transition:color .4s,border-color .4s}
.regler__ton[aria-pressed="true"]{color:var(--sig);border-color:color-mix(in oklab,var(--sig) 50%,transparent)}
.regler__ton svg{width:15px;height:15px}

/* Registerwechsel */
[data-reg]{transition:opacity .42s var(--ease-heavy)}
[data-reg].wechsel{opacity:.12}

/* ---------- 7 · Feld / Simulation ---------- */
.feldwerk{display:grid;gap:clamp(1.4rem,3vw,2.4rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){.feldwerk{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.buehne{position:relative;background:var(--plate);border:1px solid var(--line);aspect-ratio:16/10;overflow:hidden;
  touch-action:none;cursor:ew-resize}
.buehne canvas{position:absolute;inset:0;width:100%;height:100%}
.buehne__hinweis{position:absolute;right:12px;top:10px;font-family:"Martian",monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);pointer-events:none}

.stellwerk{display:grid;gap:1.15rem;align-content:start}
.stell{display:grid;gap:.42rem}
.stell__kopf{display:flex;justify-content:space-between;align-items:baseline;
  font-family:"Martian",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-2);font-variation-settings:"wght" 500,"wdth" 82}
.stell__kopf b{color:var(--sig);font-weight:400;font-variant-numeric:tabular-nums}
input[type=range].fein{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:0}
input[type=range].fein::-webkit-slider-runnable-track{height:1px;background:var(--line);margin-top:8px}
input[type=range].fein::-moz-range-track{height:1px;background:var(--line)}
input[type=range].fein::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:17px;border-radius:1px;
  background:var(--fg-2);margin-top:-8px;cursor:grab}
input[type=range].fein::-moz-range-thumb{width:9px;height:17px;border:0;border-radius:1px;background:var(--fg-2);cursor:grab}

.ablesung{border:1px solid var(--line);padding:1rem 1.1rem;display:grid;gap:.75rem;
  background:linear-gradient(var(--light),color-mix(in oklab,var(--fg) 4%,var(--bg)),var(--bg))}
.ablesung__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:"Martian",monospace;font-size:11px;letter-spacing:.09em;color:var(--fg-2);
  font-variation-settings:"wght" 400,"wdth" 84}
.ablesung__zeile b{font-weight:400;font-variation-settings:"wght" 700,"wdth" 80;color:var(--fg);
  font-variant-numeric:tabular-nums}
.ablesung__gross{font-family:"Martian",monospace;font-size:clamp(2rem,5vw,2.9rem);line-height:1;
  font-variation-settings:"wght" 200,"wdth" 76;color:var(--sig);font-variant-numeric:tabular-nums}

.knopf{display:inline-flex;align-items:center;gap:.6rem;padding:.62rem 1.05rem;border:1px solid var(--line);
  font-family:"Martian",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-variation-settings:"wght" 550,"wdth" 82;color:var(--fg-2);
  transition:color .35s var(--ease-heavy),border-color .35s var(--ease-heavy),background-color .35s}
.knopf:hover{color:var(--bg);background:var(--sig);border-color:var(--sig)}
.knopf--still:hover{color:var(--sig);background:transparent;border-color:color-mix(in oklab,var(--sig) 55%,transparent)}

/* ---------- 8 · Typen ---------- */
.typen{display:grid;gap:clamp(1rem,2.5vw,1.8rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:clamp(2rem,5vh,3.4rem)}
.typ{border:1px solid var(--line);background:var(--plate);display:grid;grid-template-rows:auto 1fr;
  transition:border-color .5s var(--ease-heavy),transform .6s var(--ease-heavy)}
.typ:hover{border-color:color-mix(in oklab,var(--sig) 45%,var(--line));transform:translateY(-3px)}
.typ img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 68%;filter:saturate(0)}
.typ__k{padding:1rem 1.05rem 1.2rem;display:grid;gap:.55rem}
.typ__n{font-family:"Martian",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sig);font-variation-settings:"wght" 600,"wdth" 80}
.typ__s{font-family:"Bodoni",Georgia,serif;font-style:italic;font-size:var(--step-0);color:var(--fg-2);line-height:1.4}
.typ__b{font-size:var(--step--1);color:var(--fg-2);line-height:1.6}

/* ---------- 9 · Stopp-Test ---------- */
.test{max-width:880px}
.frage{border-top:1px solid var(--line);padding:1.35rem 0}
.frage__t{display:flex;gap:.9rem;align-items:baseline;margin-bottom:.85rem}
.frage__nr{font-family:"Martian",monospace;font-size:10px;color:var(--sig);letter-spacing:.14em;
  font-variation-settings:"wght" 650,"wdth" 78}
.frage__x{font-size:var(--step-1);font-variation-settings:"wght" 420,"wdth" 98;line-height:1.32}
.wahl{display:grid;gap:.35rem;padding-left:clamp(0px,2.2vw,1.6rem)}
.wahl label{display:flex;gap:.85rem;align-items:flex-start;padding:.62rem .85rem;border:1px solid transparent;
  cursor:pointer;transition:border-color .35s,background-color .35s,color .35s;font-size:var(--step-0);
  color:var(--fg-2);line-height:1.5}
.wahl label:hover{border-color:var(--line);color:var(--fg)}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl label::before{content:"";flex:none;width:9px;height:9px;margin-top:.45em;border:1px solid var(--fg-3);
  transition:background-color .3s,border-color .3s,box-shadow .3s}
.wahl input:checked + span::before{content:none}
.wahl label:has(input:checked){border-color:color-mix(in oklab,var(--sig) 45%,transparent);color:var(--fg);
  background:color-mix(in oklab,var(--sig) 7%,transparent)}
.wahl label:has(input:checked)::before{background:var(--sig);border-color:var(--sig);
  box-shadow:0 0 14px -1px color-mix(in oklab,var(--sig) 80%,transparent)}
.wahl label:has(input:focus-visible){outline:2px solid var(--sig);outline-offset:2px}

.befund{margin-top:2.2rem;border:1px solid var(--line);padding:clamp(1.2rem,3vw,2rem);
  background:linear-gradient(var(--light),color-mix(in oklab,var(--fg) 5%,var(--bg)),var(--bg));
  display:none}
.befund.an{display:grid;gap:1.15rem;animation:auftauchen .8s var(--ease-heavy) both}
@keyframes auftauchen{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.befund__zeile{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;align-items:baseline}
.befund__gr{font-family:"Martian",monospace;font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.05;
  font-variation-settings:"wght" 250,"wdth" 78;color:var(--sig)}
.enthuellung{border-top:1px solid var(--line);padding-top:1.1rem;display:none}
.enthuellung.an{display:block;animation:auftauchen 1s var(--ease-heavy) .35s both}
.enthuellung__k{color:var(--sig)}

/* ---------- 10 · Die 38 Stacheln ---------- */
.sieb{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-bottom:1.6rem}
.sieb input[type=search]{flex:1 1 200px;min-width:170px;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:.55rem .1rem;font-family:"Martian",monospace;
  font-size:11px;letter-spacing:.1em;color:var(--fg)}
.sieb input[type=search]::placeholder{color:var(--fg-3)}
.sieb input[type=search]:focus{outline:0;border-bottom-color:var(--sig)}
.pille{padding:.42rem .8rem;border:1px solid var(--line);font-family:"Martian",monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
  font-variation-settings:"wght" 550,"wdth" 80;transition:all .35s var(--ease-heavy)}
.pille[aria-pressed="true"]{color:var(--bg);background:var(--fg-2);border-color:var(--fg-2)}

.kartei{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:720px){.kartei{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1240px){.kartei{grid-template-columns:repeat(3,1fr)}}
.karte{background:var(--bg);padding:1.05rem 1.15rem 1.15rem;display:grid;gap:.55rem;align-content:start;
  position:relative;transition:background-color .45s var(--ease-heavy)}
.karte:hover{background:color-mix(in oklab,var(--fg) 4%,var(--bg))}
.karte:target{background:color-mix(in oklab,var(--sig) 11%,var(--bg))}
.karte__kopf{display:flex;align-items:baseline;gap:.7rem}
.karte__nr{font-family:"Martian",monospace;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1;
  font-variation-settings:"wght" 200,"wdth" 76;color:var(--sig);font-variant-numeric:tabular-nums}
.karte__t{font-family:"Martian",monospace;font-size:var(--step-0);line-height:1.2;
  font-variation-settings:"wght" 550,"wdth" 86}
.karte__w{font-size:var(--step--1);color:var(--fg-2);line-height:1.6}
.karte__b{font-family:"Bodoni",Georgia,serif;font-style:italic;font-size:var(--step-0);color:var(--fg-2);
  line-height:1.4;padding-left:.8rem;border-left:1px solid color-mix(in oklab,var(--sig) 40%,transparent)}
.karte__mehr{display:grid;gap:.55rem;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .6s var(--ease-heavy),opacity .45s var(--ease-heavy),margin-top .6s var(--ease-heavy)}
.karte.offen .karte__mehr{max-height:44rem;opacity:1;margin-top:.35rem}
.feldchen{display:grid;gap:.22rem}
.feldchen dt{font-family:"Martian",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);font-variation-settings:"wght" 600,"wdth" 80}
.feldchen dd{margin:0;font-size:var(--step--1);line-height:1.6;color:var(--fg-2)}
.feldchen--g dd{color:var(--fg)}
.karte__fuss{display:flex;justify-content:space-between;align-items:center;margin-top:.3rem;
  font-family:"Martian",monospace;font-size:9px;letter-spacing:.14em;color:var(--fg-3)}
.karte__auf{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}
.karte__fuss a{position:relative;z-index:2}
.marker{display:inline-flex;gap:.25rem}
.marker i{width:5px;height:5px;background:var(--fg-3);border-radius:50%}
.marker i.an{background:var(--sig)}

/* ---------- 11 · Hauptbuch ---------- */
.buch{display:grid;gap:clamp(1.4rem,3vw,2.6rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.buch{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.eintrag{display:grid;gap:.9rem;border:1px solid var(--line);padding:clamp(1.1rem,2.5vw,1.5rem);align-content:start}
.zeile{display:grid;gap:.3rem}
.zeile > span{font-family:"Martian",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-3);font-variation-settings:"wght" 550,"wdth" 80}
.zeile input[type=text],.zeile select,.zeile textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:.42rem .1rem;
  font-size:var(--step--1);color:var(--fg);width:100%}
.zeile textarea{resize:vertical;min-height:3.2em;border:1px solid var(--line);padding:.5rem}
.zeile input:focus,.zeile select:focus,.zeile textarea:focus{outline:0;border-color:var(--sig)}
.zeile select option{background:#12161a;color:#d8d2c8}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}

.register{border:1px solid var(--line);min-height:210px;display:grid;align-content:start}
.register__kopf{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;
  border-bottom:1px solid var(--line);font-family:"Martian",monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3)}
.person{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--line);align-items:center}
.person:last-child{border-bottom:0}
.person__n{font-family:"Martian",monospace;font-size:var(--step--1);font-variation-settings:"wght" 600,"wdth" 86}
.person__m{font-family:"Martian",monospace;font-size:9px;letter-spacing:.13em;color:var(--fg-3);
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.person__bil{font-family:"Martian",monospace;font-variation-settings:"wght" 300,"wdth" 78;
  font-size:var(--step-1);font-variant-numeric:tabular-nums;line-height:1}
.person__bil.minus{color:var(--sig-warm)}
.person__bil.plus{color:var(--sig-cold)}
.person__bahn{grid-column:1/-1;height:3px;background:var(--line);position:relative;margin-top:.15rem}
.person__bahn i{position:absolute;top:-3px;width:2px;height:9px;background:var(--sig)}
.person__bahn u{position:absolute;top:-1px;width:2px;height:5px;background:var(--fg-3);text-decoration:none}
.leer{padding:2.2rem 1rem;text-align:center;color:var(--fg-3);font-size:var(--step--1)}

/* ---------- 12 · Blinder Fleck ---------- */
.fleck{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .fleck{grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);align-items:start}
  .fleck > :first-child{position:sticky;top:clamp(1.2rem,4vh,2.6rem)}
}
.diagramm{border:1px solid var(--line);background:var(--plate);aspect-ratio:16/11;position:relative}
.diagramm canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- 13 · Kolophon ---------- */
.kolophon{padding:clamp(3rem,8vh,5.5rem) var(--gut) clamp(9rem,14vh,11rem);
  border-top:1px solid var(--line);margin-left:var(--rail);max-width:1560px}
.kolophon__gitter{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kolophon h3{font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:"wght" 600,"wdth" 80;color:var(--fg-3);margin-bottom:.8rem}
.kolophon p,.kolophon li{font-size:var(--step--1);color:var(--fg-2);line-height:1.65}
.kolophon ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}

/* ---------- 14 · Bewegung mit Masse ---------- */
.auf{opacity:0;translate:0 26px;filter:blur(6px)}
.auf.da{opacity:1;translate:0 0;filter:blur(0);
  transition:opacity 1.15s var(--ease-heavy),translate 1.15s var(--ease-heavy),filter 1.15s var(--ease-heavy)}
.auf.da:nth-child(2){transition-delay:.07s}
.auf.da:nth-child(3){transition-delay:.14s}
.auf.da:nth-child(4){transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .auf{opacity:1;translate:none;filter:none}
}

/* ---------- 15 · Kleine Blätter ---------- */
@media (max-width:860px){
  .rail{position:static;width:auto;flex-direction:row;padding:.55rem .8rem;height:auto;
    border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .rail__mark{writing-mode:horizontal-tb}
  .rail__nav{flex-direction:row;gap:.2rem}
  main,.kolophon{margin-left:0}
  :root{--rail:0px}
  .regler{width:calc(100vw - 1rem)}
  .regler__wert{font-size:1.35rem}
  .marke > .marke__t:last-child{display:none}
  .marke__rule{display:none}
}

@media (max-width:560px){
  .regler__legende > span{display:none}
  .regler__legende{justify-content:center}
}

@media print{
  .rail,.regler,.emulsion,.buehne,.diagramm{display:none !important}
  body{background:#fff;color:#111}
  .karte{break-inside:avoid;border:1px solid #999;margin-bottom:6mm}
  .karte__mehr{max-height:none !important;opacity:1 !important}
}