/* Arcturis — /arbeitsweise/fallstudie.
   Gerüst: tokens.css + analyse.css (Kopfleiste, Fuß, Korn, Typografie).
   Diese Datei dreht die Seite auf Nacht und setzt Raster, Bildwirkung,
   Messbalken und die zwei Werkzeuge.

   ══ Das Raster, zweite Fassung ═══════════════════════════════════════════
   Die erste Fassung hatte einen Fehler, der sich als Gefühl zeigte, nicht als
   Wert: Satzspiegel links, Randspalte rechts — und dazwischen Luft, weil die
   Randspalte in den meisten Abschnitten nur vier Wörter trug. Ergebnis war
   eine Seite, die nach rechts kippt und ihren Platz nicht nutzt.

   Jetzt gilt: die Randspalte trägt in JEDEM Abschnitt zwei Sachen — die
   Verfahren UND die Kennzahlen des Abschnitts. Sie ist damit eine echte
   Marginalspalte wie im Fachaufsatz, kein Restplatz. Die Abbildungen laufen
   über beide Spalten und die Höhepunkte randlos über die ganze Fensterbreite.
   Der Abstand zwischen den Abschnitten ist halbiert; getrennt wird durch eine
   Haarlinie, die beim Hereinrollen gezogen wird, nicht durch Leerraum.

   Vier Größen treiben alles, gesetzt von fallstudie.js:
     --fs-ein   0 bis 1, Einzug des Bauteils
     --fs-lauf  -1 bis 1, Weg durch das Fenster (Versatzgeschwindigkeit)
     --fs-zug   0 bis 1, Sonderweg für Sektion 08
     --fs-i     Zeilennummer für gestaffelte Listen

   Wird in Astro zu src/styles/fallstudie.css. */

/* ══ 1 · Nacht ═════════════════════════════════════════════════════════════
   Nicht Geschmack: alle Abbildungen sind auf dunklem Grund gerechnet. Auf
   Papier bräuchte jede einen Rahmen. Ausnahme ist Sektion 09. */
.arc-fs{background:var(--n0);color:var(--on-night);--spalte:800px}
.arc-fs [data-grund="nacht"]{--eigen:var(--n0);--acc:var(--glut);
  --linie-tag:var(--linie);color:var(--on-night);position:relative;isolation:isolate}
.arc-fs [data-grund="nacht"] > :not(canvas){position:relative;z-index:1}

.arc-fs [data-grund="nacht"] .arc-h1,
.arc-fs [data-grund="nacht"] .fs-h2,
.arc-fs [data-grund="nacht"] .fs-h3{color:var(--on-night)}
.arc-fs [data-grund="nacht"] strong{color:var(--on-night);font-weight:500}
.arc-fs [data-grund="nacht"] em{font-style:italic;color:var(--on-night)}
.arc-fs code{font-family:var(--f-m);font-size:.92em;color:var(--kalt)}
.arc-fs a{color:#F0A79A;text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,#F0A79A 40%,transparent)}
.arc-fs a:hover{color:#FFC9BE;border-bottom-color:#FFC9BE}
.arc-fs [data-grund="tag"] a{color:var(--glut-tag);
  border-bottom-color:color-mix(in oklab,var(--glut-tag) 40%,transparent)}
.arc-fs [data-grund="tag"] a:hover{color:#0E5C9E;border-bottom-color:#0E5C9E}

/* Sternenfeld: drei Ebenen an der Rollstrecke, keine Endlosanimation. In den
   Beweis-Sektionen gedimmt, damit es nicht in die Datenpunkte funkt. */
.fs-sterne{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;z-index:0;opacity:.9}
[data-sterne="gedimmt"] .fs-sterne{opacity:.28}

/* ══ 2 · Der Abschnitt ═════════════════════════════════════════════════════ */
.fs-block{--fs-pad:max(var(--rand),calc((100vw - var(--spalte))/2));
  width:100%;margin:0;position:relative;display:block;
  padding-block:clamp(40px,6.5vh,92px);
  padding-inline:var(--fs-pad)}
.fs-block--erst{padding-block-start:calc(88px + clamp(26px,5vh,72px))}
@media (max-width:1023px){
  .fs-block--erst{padding-block-start:calc(56px + clamp(22px,4vh,52px))}
}

/* Die Trennlinie wird gezogen, nicht gesetzt. */
.fs-block + .fs-block::before{content:"";position:absolute;top:0;left:0;height:1px;
  width:calc(clamp(0,calc(var(--fs-ein,1) * 1.6),1) * 100%);
  background:linear-gradient(90deg,var(--acc),color-mix(in oklab,var(--acc) 8%,transparent));
  opacity:.5;z-index:2}
/* Die Abschnittsnummer als Schattenziffer: Tiefe aus Typografie, kein Bild. */
.fs-block[data-nr]::after{content:attr(data-nr);position:absolute;z-index:0;
  right:calc(-1 * var(--fs-pad) * .42);bottom:clamp(10px,2vh,30px);
  font-family:var(--f-m);font-size:clamp(3.6rem,7vw,8.5rem);line-height:.78;
  color:color-mix(in oklab,var(--kalt) 7%,transparent);
  pointer-events:none;letter-spacing:-.04em;
  transform:translate3d(0,calc(var(--fs-lauf,0) * 34px),0)}

/* Die Marginalspalte: Verfahren UND Kennzahlen. Sie ist in jedem Abschnitt
   gefüllt — sonst kippt die Seite nach rechts weg. */
.fs-rand{display:grid;gap:16px clamp(20px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));
  margin:clamp(28px,4.4vh,52px) 0 0;padding-top:16px;
  border-top:1px solid var(--linie);
  font-family:var(--f-m);font-size:.71rem;line-height:1.7;
  color:var(--on-night-mute)}
.fs-rand section{display:grid;gap:3px;align-content:start}
.fs-rand b{display:block;font-weight:400;color:var(--kalt);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px}
.fs-rand span{display:block;overflow-wrap:anywhere}
.fs-rand i{font-style:normal;color:var(--on-night);font-variant-numeric:tabular-nums}

.fs-rand section[data-art="zahlen"] span{display:grid;gap:0;margin-bottom:7px}
.fs-rand section[data-art="zahlen"] span:last-child{margin-bottom:0}
.fs-rand section[data-art="zahlen"] i{font-size:.86rem;color:var(--on-night)}


/* ══ 3 · Typografie ═══════════════════════════════════════════════════════ */
.fs-marke{margin:0 0 12px;font-family:var(--f-m);font-size:var(--t-mark);
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.fs-h2{margin:0 0 16px;font-size:var(--t-h2);line-height:1.04;font-weight:400;
  letter-spacing:-.024em;max-width:26ch;text-wrap:pretty}
.fs-h3{margin:30px 0 10px;font-size:var(--t-h3);line-height:1.18;font-weight:400;
  letter-spacing:-.012em;color:var(--on-night);max-width:none;
  display:flex;align-items:baseline;gap:.7em}
.fs-h3::before{content:"";flex:0 0 auto;width:18px;height:1px;background:var(--acc);
  transform:translateY(-.35em);opacity:.8}
.fs-lauf{margin:0 0 13px;max-width:none;font-size:var(--t-body);line-height:1.6;
  color:var(--on-night-mute);text-wrap:pretty}
.fs-lead{font-size:var(--t-lead);line-height:1.42;color:var(--on-night);max-width:none}
.fs-lauf:last-child{margin-bottom:0}
.fs-formel{margin:18px 0;font-family:var(--f-m);font-size:1.06rem;color:var(--on-night);
  padding-left:16px;border-left:2px solid var(--acc)}
/* Ein Satz, der allein steht — die Seite hat drei davon. */
.fs-satz{margin:clamp(22px,3.4vh,42px) 0;max-width:34ch;
  font-size:clamp(1.2rem,.95rem + 1vw,1.7rem);line-height:1.24;color:var(--on-night);
  font-weight:400;letter-spacing:-.015em;
  opacity:clamp(0,calc(var(--fs-ein,1) * 2.2),1);
  transform:translate3d(0,calc((1 - clamp(0,calc(var(--fs-ein,1) * 2.2),1)) * 12px),0)}
.fs-satz em{font-style:italic}

/* Das Datenblatt aus Sektion 01. */
.fs-daten{margin:20px 0 0;padding:0;list-style:none;max-width:none;
  border-top:1px solid var(--linie);font-family:var(--f-m);font-size:.84rem}
.fs-daten li{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);
  gap:5px 22px;padding:11px 0;border-bottom:1px solid var(--linie);
  color:var(--on-night-mute);
  opacity:clamp(.1,calc((var(--fs-ein,1) - var(--fs-i,0) * .05) * 5),1);
  transform:translate3d(calc((1 - clamp(0,calc((var(--fs-ein,1) - var(--fs-i,0) * .05) * 5),1)) * -10px),0,0)}
.fs-daten b{font-weight:400;color:var(--on-night)}
.fs-daten span u{text-decoration:none;color:var(--kalt)}
@media (max-width:620px){.fs-daten li{grid-template-columns:minmax(0,1fr)}}

/* ══ 4 · Der Ergebniskasten ═══════════════════════════════════════════════ */
.fs-ergebnis{margin:0;padding:clamp(18px,2.6vh,30px) 0;max-width:none;
  border-top:1px solid var(--acc);border-bottom:1px solid var(--linie)}
.fs-ergebnis dl{margin:0;display:grid;gap:11px}
.fs-erg-z{display:grid;grid-template-columns:minmax(0,18em) minmax(0,1fr);
  gap:3px 26px;align-items:baseline}
.fs-erg-z dt{font-family:var(--f-m);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-night-mute)}
.fs-erg-z dd{margin:0;font-family:var(--f-m);font-size:1rem;color:var(--on-night);
  font-variant-numeric:tabular-nums}
.fs-erg-z dd i{font-style:normal;color:var(--on-night-mute);font-size:.86em}
.fs-erg-z dd u{text-decoration:none;color:var(--acc)}
.fs-erg-gross dd{font-size:clamp(1.05rem,.85rem + .95vw,1.5rem)}
@media (max-width:620px){.fs-erg-z{grid-template-columns:minmax(0,1fr)}}

/* Die vier Sorten Ehrlichkeit: kein Kasten, kein Zeichen, nur Zeilenabstand. */
.fs-vertrag{margin:0;padding:0;list-style:none;max-width:none;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.fs-vertrag li{font-size:.94rem;line-height:1.5;color:var(--on-night-mute)}
.fs-vertrag b{display:block;font-weight:400;color:var(--on-night)}

.fs-inhalt{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px 26px;
  font-family:var(--f-m);font-size:.78rem}
.fs-inhalt a{border-bottom:0;color:var(--on-night-mute);display:flex;gap:.7em}
.fs-inhalt a:hover{color:var(--nadel-hell)}
.fs-inhalt a u{text-decoration:none;color:var(--acc);font-variant-numeric:tabular-nums}

/* ══ 5 · Ebene 2 — der Beleg ══════════════════════════════════════════════ */
.fs-beleg{margin:24px 0 0;max-width:none;border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.fs-beleg > summary{list-style:none;cursor:pointer;padding:13px 0;
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-m);font-size:.76rem;letter-spacing:.06em;color:var(--acc)}
.fs-beleg > summary::-webkit-details-marker{display:none}
.fs-beleg > summary::before{content:"+";width:1em;text-align:center;flex:0 0 auto}
.fs-beleg[open] > summary::before{content:"–"}
.fs-beleg > summary i{font-style:normal;color:var(--on-night-mute);letter-spacing:0}
.fs-beleg > summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.fs-beleg-inhalt{padding:0 0 20px;display:grid;gap:0}
.fs-beleg-inhalt p{margin:0 0 11px;font-size:.95rem;line-height:1.58;
  color:var(--on-night-mute);max-width:none}
.fs-beleg-inhalt p:last-child{margin-bottom:0}
.fs-tab{width:100%;border-collapse:collapse;margin:6px 0 16px;
  font-family:var(--f-m);font-size:.78rem}
.fs-tab th,.fs-tab td{text-align:left;padding:7px 16px 7px 0;
  border-bottom:1px solid var(--linie);color:var(--on-night-mute);
  font-weight:400;font-variant-numeric:tabular-nums;vertical-align:top}
.fs-tab th{color:var(--kalt);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}
.fs-tab td b{font-weight:400;color:var(--on-night)}
.fs-tab tr[data-hebt] td{color:var(--on-night)}
.fs-beleg .fs-abb{opacity:0;transform:translate3d(0,10px,0);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.fs-beleg[open] .fs-abb{opacity:1;transform:none}
/* Die Prüfliste läuft beim Öffnen von oben nach unten ein — vierzehn Zeilen,
   rund 40 ms je Zeile. Die Länge ist die Aussage. */
.fs-beleg[open] .fs-abb--lauf img{animation:fs-zeilenlauf 640ms var(--ease) both}
@keyframes fs-zeilenlauf{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ══ 6 · Die Abbildungen ══════════════════════════════════════════════════
   Randlos: kein Rahmen, kein Kasten, kein Schatten, keine Rundung. Jede zieht
   beim Hereinrollen ein; die Höhepunkte kippen zusätzlich und tragen einen
   Lichtstreifen, der am Einzug hängt statt an einer Zeitachse. */
.fs-abb{--p:clamp(0,calc(var(--fs-ein,1) * 1.7),1);
  display:block;margin:clamp(26px,4vh,54px) 0 0;position:relative;
  opacity:clamp(.06,calc(var(--fs-ein,1) * 2.6),1);
  clip-path:inset(calc((1 - var(--p)) * 9%) 0 calc((1 - var(--p)) * 9%) 0);
  transform:scale(calc(1 + (1 - var(--p)) * .035));
  transform-origin:50% 50%}
.fs-abb img{display:block;width:100%;height:auto;border:0;border-radius:0;
  background:transparent}
.fs-abb figcaption{margin:13px 0 0;max-width:none;
  font-family:var(--f-m);font-size:.73rem;line-height:1.7;color:var(--on-night-mute)}
.fs-abb figcaption b{font-weight:400;color:var(--on-night)}
.fs-abb--zwei{max-width:min(100%,880px)}
.fs-abb--halb{max-width:min(100%,600px)}
/* Über beide Spalten. */
.fs-voll{margin-inline:0}
/* Randlos über die ganze Fensterbreite: die Höhepunkte laufen in den
   Seitengrund über, statt im Satzspiegel zu sitzen. */
.fs-rand-los{margin-inline:calc(-1 * var(--fs-pad));width:auto;max-width:none}
.fs-rand-los figcaption{padding-inline:var(--fs-pad);max-width:none;box-sizing:border-box}

/* A · Versatzgeschwindigkeit: Abbildung 0,88, Randspalte 1,06, Sterne
   langsamer — drei Ebenen aus flachen Dateien. */
.fs-abb[data-wirkung]{transform:scale(calc(1 + (1 - var(--p)) * .035))
  translate3d(0,calc(var(--fs-lauf,0) * 16px),0)}
.fs-abb[data-wirkung="hoehepunkt"]{overflow:hidden}
.fs-abb[data-wirkung="hoehepunkt"]::after{content:"";position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 0 32%,rgba(214,234,255,.10) 46%,transparent 60% 100%);
  background-size:260% 100%;
  background-position:calc((1 - clamp(0,calc(var(--fs-ein,1) * 1.25),1)) * 100%) 0;
  opacity:clamp(0,calc(var(--fs-ein,1) * 2),.9)}

/* C · Die Kippung, nur an den Höhepunkten. Höchstens 6 Grad — darüber wird
   die Schrift in den Abbildungen unlesbar, und dann ist es Effekt statt
   Tiefe. perspective am Elternelement, das Bild ist direktes Kind. */
.fs-kipp{perspective:1500px}
.fs-kipp > img,.fs-kipp > .fs-stapel,.fs-kipp > .fs-platz{
  transform:rotateX(calc((1 - clamp(0,calc(var(--fs-ein,1) * 1.2),1)) * 6deg))
            translateZ(calc((1 - clamp(0,calc(var(--fs-ein,1) * 1.2),1)) * -44px));
  transform-origin:50% 0}

/* B · Zerlegen mehrteiliger Abbildungen: eine Datei, mehrere Lagen. Der
   Stapel trägt sein Seitenverhältnis inline, weil alle Lagen absolut liegen. */
.fs-stapel{position:relative;display:block;width:100%}
.fs-stapel > img{position:absolute;inset:0;width:100%;height:100%}
.fs-stapel > img[data-teil]{
  clip-path:inset(var(--o,0%) var(--r,0%) var(--u,0%) var(--l,0%));
  opacity:clamp(0,calc((var(--fs-ein,1) - var(--s,0)) * 4),1);
  transform:translateZ(calc((1 - clamp(0,(var(--fs-ein,1) - var(--s,0)) * 4,1)) * -60px))
            translate3d(0,calc((1 - clamp(0,(var(--fs-ein,1) - var(--s,0)) * 4,1)) * 14px),0)}
/* Sektion 08: hier treibt der Zug des Lesers, nicht der Einzug. */
.fs-stapel[data-zug] > img[data-teil="links"]{
  clip-path:inset(16% 48% 0 0);opacity:1;transform:none}
.fs-stapel[data-zug] > img[data-teil="rechts"]{
  clip-path:inset(16% 0 0 calc(52% + (1 - var(--fs-zug,0)) * 48%));
  opacity:1;transform:none}
.fs-stapel[data-zug] > img[data-teil="titel"]{
  clip-path:inset(0 0 84% 0);transform:none;
  opacity:clamp(0,calc((var(--fs-zug,0) - .5) * 3),1)}
/* Die Zuganzeige: ein Strich, der zeigt, wo im Übergang man steht. */
.fs-zuganzeige{display:flex;align-items:center;gap:14px;margin:14px 0 0;
  font-family:var(--f-m);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-night-mute)}
.fs-zuganzeige span{flex:1 1 auto;height:1px;background:var(--linie);position:relative}
.fs-zuganzeige span::after{content:"";position:absolute;inset:0 auto 0 0;
  width:calc(var(--fs-zug,0) * 100%);background:var(--acc)}
.fs-zuganzeige b{font-weight:400;color:var(--acc);font-variant-numeric:tabular-nums}

/* ══ 7 · Der Messbalken — die Signatur ════════════════════════════════════ */
.fs-balken{position:fixed;right:clamp(8px,1.2vw,20px);top:50%;z-index:40;
  translate:0 -50%;width:clamp(104px,8.6vw,126px);
  font-family:var(--f-m);pointer-events:none;
  padding:12px 12px 11px;box-sizing:border-box;
  background:color-mix(in oklab,var(--n0) 88%,transparent);
  border:1px solid var(--linie);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity 600ms var(--ease)}
.fs-balken[data-an="ja"]{opacity:1}
.fs-balken-kopf{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kalt);margin:0 0 8px}
.fs-balken-wert{margin:0;font-size:1.14rem;color:var(--on-night);
  font-variant-numeric:tabular-nums;transition:color 400ms var(--ease)}
.fs-balken-band{position:relative;height:clamp(150px,26vh,250px);margin:10px 0 9px;
  border-left:1px solid var(--linie);
  background:linear-gradient(180deg,rgba(147,160,180,.09),rgba(147,160,180,0))}
.fs-balken-saeule{position:absolute;left:-1px;bottom:0;width:5px;background:var(--acc);
  box-shadow:0 0 12px 1px color-mix(in oklab,var(--acc) 50%,transparent);
  height:calc(var(--w,0) * 100%);
  transition:height 700ms var(--ease),background-color 400ms var(--ease)}
.fs-balken-feld{position:absolute;left:-1px;width:14px;
  background:color-mix(in oklab,var(--acc) 22%,transparent);
  bottom:calc(var(--lo,0) * 100%);height:calc((var(--hi,0) - var(--lo,0)) * 100%);
  transition:bottom 700ms var(--ease),height 700ms var(--ease)}
/* Die schon durchlaufenen Stände bleiben als feine Marken stehen. */
.fs-balken-spur{position:absolute;left:-1px;width:20px;height:1px;
  background:color-mix(in oklab,var(--kalt) 60%,transparent);
  bottom:calc(var(--w,0) * 100%)}
.fs-balken-skala{position:absolute;left:24px;right:0;top:0;bottom:0;pointer-events:none}
.fs-balken-skala b{position:absolute;left:0;font-weight:400;font-size:.54rem;
  color:var(--on-night-mute);bottom:calc(var(--w,0) * 100%);transform:translateY(50%)}
.fs-balken-skala b::before{content:"";position:absolute;left:-8px;top:50%;width:5px;height:1px;
  background:var(--linie)}
.fs-balken-int{margin:0;font-size:.58rem;color:var(--on-night-mute);
  font-variant-numeric:tabular-nums;line-height:1.5}
.fs-balken-marke{display:block;margin-top:9px;font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kalt);
  opacity:0;transform:translate3d(0,4px,0);
  transition:opacity 400ms var(--ease),transform 400ms var(--ease)}
.fs-balken-marke[data-zeig="ja"]{opacity:1;transform:none}
.fs-balken[data-stand="steht"] .fs-balken-wert{color:var(--on-night-mute)}
.fs-balken[data-stand="ungueltig"] .fs-balken-wert{color:var(--kalt)}
.fs-balken[data-stand="ungueltig"] .fs-balken-saeule{background:var(--kalt)}
.fs-balken[data-stand="springt"] .fs-balken-wert,
.fs-balken[data-stand="ziel"] .fs-balken-wert{color:#FFC9BE}
@media (max-width:1300px){
  .fs-balken-skala{display:none}
  .fs-balken{top:auto;bottom:14px;right:14px;translate:none;
    width:auto;max-width:calc(100vw - 28px);
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    background:color-mix(in oklab,var(--n0) 90%,transparent);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border:1px solid var(--linie);padding:9px 13px}
  .fs-balken-band{display:none}
  .fs-balken-kopf,.fs-balken-marke{margin:0}
}

/* ══ 8 · Sektion 04 — das Timing ist der Effekt ═══════════════════════════ */
.fs-solo{margin:clamp(16px,3.4vh,40px) 0;font-family:var(--f-m);
  font-size:var(--t-num);line-height:1;color:var(--acc);
  font-variant-numeric:tabular-nums;
  opacity:clamp(0,calc(var(--fs-ein,0) * 3),1);
  letter-spacing:-.03em}
.fs-solo small{display:block;margin-top:10px;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-night-mute)}
.fs-takt{opacity:0;transform:translate3d(0,8px,0);
  transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.fs-takt[data-takt="ja"]{opacity:1;transform:none;transition-delay:600ms}

/* ══ 9 · Sektion 06 — die Zahlen wandern auseinander ══════════════════════ */
.fs-spreiz{display:flex;align-items:center;justify-content:center;
  gap:calc(18px + var(--fs-ein,0) * 14vw);
  margin:clamp(20px,5vh,60px) 0;font-family:var(--f-m);
  font-size:clamp(1.5rem,1rem + 3.2vw,3.2rem);color:var(--on-night);
  font-variant-numeric:tabular-nums;flex-wrap:nowrap}
.fs-spreiz-wort{font-family:var(--f-b);font-size:clamp(.72rem,.58rem + .7vw,1.1rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc);white-space:nowrap;
  opacity:clamp(0,calc((var(--fs-ein,0) - .45) * 4),1)}
@media (max-width:820px){
  .fs-treppe > i::after{font-size:.52rem}
  .fs-ablesung dd{font-size:.98rem}
}
@media (max-width:700px){
  .fs-spreiz{gap:14px;font-size:1.4rem}
  .fs-spreiz-wort{font-size:.66rem;letter-spacing:.12em}
}

/* ══ 10 · Sektion 09 — heller Grund, keinerlei Bewegung ═══════════════════ */
.arc-fs [data-grund="tag"]{--eigen:var(--dawn);--acc:var(--nadel-tag);color:var(--on-dawn)}
.arc-fs [data-grund="tag"] .fs-h2,
.arc-fs [data-grund="tag"] .fs-h3,
.arc-fs [data-grund="tag"] .fs-satz{color:var(--on-dawn)}
.arc-fs [data-grund="tag"] .fs-lauf,
.arc-fs [data-grund="tag"] .fs-abb figcaption,
.arc-fs [data-grund="tag"] .fs-rand{color:var(--on-dawn-mute)}
/* Der fette Teil der Bildunterschrift trug weiter --on-night: „Der Messbalken
   springt hier nach oben…" stand weiß auf Papier, Kontrast 1,08. */
.arc-fs [data-grund="tag"] .fs-abb figcaption b{color:var(--on-dawn)}
.arc-fs [data-grund="tag"] strong{color:var(--on-dawn);font-weight:500}
.arc-fs [data-grund="tag"] .fs-beleg,
.arc-fs [data-grund="tag"] .fs-rand section{border-color:var(--linie-tag)}
.arc-fs [data-grund="tag"] .fs-rand i{color:var(--on-dawn)}
.arc-fs [data-grund="tag"] .fs-rand b{color:var(--acc-tag,#566070)}
.arc-fs [data-grund="tag"] .fs-abb,
.arc-fs [data-grund="tag"] .fs-abb[data-wirkung],
.arc-fs [data-grund="tag"] .fs-rand{transform:none;opacity:1}
.arc-fs [data-grund="tag"] .fs-tab th,
.arc-fs [data-grund="tag"] .fs-tab td{border-color:var(--linie-tag);color:var(--on-dawn-mute)}
.arc-fs [data-grund="tag"][data-nr]::after{color:rgba(20,22,26,.06)}

/* ══ 11 · Zeilenlisten: 33 Zeilen, gleichmäßig ═══════════════════════════
   Die schiere Länge ist der Effekt — also braucht die Liste die volle Breite
   ihres Kastens. In einem zentrierten Raster schrumpft sie sonst auf ihre
   Eigenbreite, und aus 33 Zeilen wird eine Senkrechte. */
.fs-zeilen{margin:0;padding:0 clamp(18px,4vw,44px);list-style:none;display:grid;gap:3px;
  width:100%;justify-self:stretch;align-self:end;box-sizing:border-box}
.fs-zeilen li{height:4px;background:color-mix(in oklab,var(--kalt) 22%,transparent);
  border-left:2px solid var(--acc);
  transform:scaleX(clamp(0,calc((var(--fs-ein,0) - var(--fs-i,0) * .022) * 6),1));
  transform-origin:0 50%;
  opacity:clamp(.15,calc((var(--fs-ein,0) - var(--fs-i,0) * .022) * 6),1)}
.fs-zeilen li:nth-child(3n){width:88%}
.fs-zeilen li:nth-child(4n){width:72%}
.fs-zeilen li:nth-child(5n){width:94%}

/* Platzhalter für die drei gesperrten Abbildungen: sie bleiben sichtbar
   stehen, aber sie führen den Abschnitt nicht — dafür steht in jedem dieser
   Abschnitte eine fertige Abbildung. */
.fs-platz{position:relative;display:grid;place-items:center;align-content:center;
  gap:clamp(12px,2.2vh,26px);overflow:hidden;
  border:1px dashed color-mix(in oklab,var(--kalt) 34%,transparent);
  background:repeating-linear-gradient(135deg,
    rgba(147,160,180,.06) 0 12px,rgba(147,160,180,0) 12px 24px)}
.fs-platz-text{max-width:50ch;padding:clamp(12px,2.4vw,28px);text-align:center;
  font-family:var(--f-m);font-size:.73rem;line-height:1.75;color:var(--on-night-mute)}
.fs-platz-text b{display:block;font-weight:400;color:var(--acc);
  letter-spacing:.14em;text-transform:uppercase;font-size:.64rem;margin-bottom:9px}
.fs-platz-text span{display:block;margin-top:9px;color:var(--kalt)}

/* ══ 12 · Die zwei Werkzeuge ══════════════════════════════════════════════ */
.fs-werkzeug{margin:clamp(22px,3.4vh,46px) 0 0;padding:clamp(18px,2.4vw,28px) 0;
  border-top:1px solid var(--acc);border-bottom:1px solid var(--linie);
  max-width:none;display:grid;gap:20px}
.fs-werk-kopf{margin:0;font-family:var(--f-m);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.fs-werk-raster{display:grid;gap:clamp(20px,3vw,44px);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:840px){
  .fs-werk-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
.fs-regler{display:grid;gap:14px;margin:0}
.fs-regler label{display:grid;gap:7px;font-family:var(--f-m);font-size:.76rem;
  color:var(--on-night-mute)}
.fs-regler label b{font-weight:400;color:var(--on-night);font-variant-numeric:tabular-nums;
  font-size:1rem}
.fs-regler input[type="range"]{appearance:none;width:100%;height:24px;
  background:transparent;cursor:ew-resize}
.fs-regler input[type="range"]::-webkit-slider-runnable-track{height:1px;background:var(--kalt)}
.fs-regler input[type="range"]::-moz-range-track{height:1px;background:var(--kalt)}
.fs-regler input[type="range"]::-webkit-slider-thumb{appearance:none;
  width:15px;height:15px;margin-top:-7px;border-radius:50%;background:var(--acc);border:0}
.fs-regler input[type="range"]::-moz-range-thumb{width:15px;height:15px;
  border-radius:50%;background:var(--acc);border:0}
.fs-regler input[type="range"]:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.fs-stufenmarken{display:flex;justify-content:space-between;
  font-family:var(--f-m);font-size:.62rem;color:var(--on-night-mute);
  font-variant-numeric:tabular-nums}
.fs-schalter{display:flex;flex-wrap:wrap;gap:8px}
.fs-schalter button{appearance:none;background:transparent;cursor:pointer;
  border:1px solid var(--linie);color:var(--on-night-mute);
  font-family:var(--f-m);font-size:.7rem;letter-spacing:.06em;padding:8px 12px;
  transition:border-color 200ms var(--ease),color 200ms var(--ease)}
.fs-schalter button:hover{color:var(--on-night)}
.fs-schalter button[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
.fs-schalter button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* Die Treppe. Die Fehlalarmrate kann nur Vielfache von 1/50 bis 1/100
   annehmen; eine geglättete Linie behauptete eine Genauigkeit, die nicht
   gemessen ist. Fünf gemessene Stützstellen, fünf Stufen, nichts dazwischen. */
.fs-treppe{display:flex;align-items:flex-end;gap:3px;
  height:clamp(110px,17vh,190px);margin:0;
  border-bottom:1px solid var(--linie)}
.fs-treppe > i{position:relative;display:block;flex:1 1 0;
  background:color-mix(in oklab,var(--acc) 26%,transparent);
  height:calc(var(--h,0) * 100%);
  transition:height 260ms var(--ease),background-color 200ms var(--ease)}
.fs-treppe > i::after{content:attr(data-wert);position:absolute;left:-4px;right:-4px;top:-19px;
  text-align:center;font-family:var(--f-m);font-size:.6rem;color:var(--on-night-mute);
  font-variant-numeric:tabular-nums}
.fs-treppe > i[data-jetzt="ja"]{background:var(--acc)}
.fs-treppe > i[data-jetzt="ja"]::after{color:var(--acc)}
.fs-treppe-fuss{display:flex;justify-content:space-between;margin:8px 0 0;
  font-family:var(--f-m);font-size:.62rem;color:var(--on-night-mute)}
.fs-ablesung{margin:0;display:grid;gap:9px;font-family:var(--f-m);font-size:.8rem;
  align-content:start}
.fs-ablesung > div{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:4px 18px;align-items:baseline;
  border-bottom:1px solid var(--linie);padding-bottom:8px}
.fs-ablesung dt{color:var(--on-night-mute)}
.fs-ablesung dd{margin:0;color:var(--on-night);font-variant-numeric:tabular-nums;
  font-size:1.06rem;text-align:right}
.fs-ablesung dd small{display:block;font-size:.62rem;color:var(--on-night-mute)}
.fs-hinweis{margin:0;font-size:.86rem;line-height:1.58;color:var(--on-night-mute);
  max-width:none}
.fs-hinweis b{font-weight:400;color:var(--on-night)}
.fs-hinweis + .fs-hinweis{margin-top:-6px}

/* Der ONNX-Regler: zwei gemessene Lagen, der Leser schiebt dazwischen. */
.fs-onnx-bahn{position:relative;height:96px;margin:0;
  border-bottom:1px solid var(--linie);
  background:linear-gradient(90deg,rgba(147,160,180,.06),transparent)}
.fs-onnx-bahn > i{position:absolute;bottom:0;width:3px;height:74%;border-radius:2px;
  box-shadow:0 0 14px 2px currentColor;transition:left 160ms linear}
.fs-onnx-bahn > i[data-lage="normal"]{background:var(--kalt);color:color-mix(in oklab,var(--kalt) 45%,transparent);
  left:calc(8% + var(--v,0) * 32%)}
.fs-onnx-bahn > i[data-lage="anomal"]{background:var(--glut);color:color-mix(in oklab,var(--glut) 45%,transparent);
  left:calc(60% + var(--v,0) * 9%)}
.fs-onnx-bahn > span{position:absolute;top:6px;font-family:var(--f-m);font-size:.62rem;
  color:var(--on-night-mute);transition:left 160ms linear;white-space:nowrap}
.fs-onnx-bahn > span[data-lage="normal"]{left:calc(8% + var(--v,0) * 32%);padding-left:8px}
.fs-onnx-bahn > span[data-lage="anomal"]{left:calc(60% + var(--v,0) * 9%);padding-left:8px}
.fs-onnx-bahn > u{position:absolute;left:0;right:0;bottom:-1px;height:1px;
  text-decoration:none;background:var(--linie)}

/* ══ 13 · Abschluss ══════════════════════════════════════════════════════ */
.fs-wege{margin:clamp(22px,3.4vh,42px) 0 0;padding:22px 0 0;list-style:none;
  display:grid;gap:15px;max-width:none;border-top:1px solid var(--linie)}
.fs-wege li{font-size:var(--t-body);line-height:1.55;color:var(--on-night-mute)}
.fs-lizenz{margin:clamp(26px,4vh,52px) 0 0;padding-top:18px;
  border-top:1px solid var(--linie);max-width:none;
  font-family:var(--f-m);font-size:.72rem;line-height:1.8;color:var(--on-night-mute)}
.fs-lizenz code{overflow-wrap:anywhere}
.arc-fs + .arc-fuss{border-top:1px solid var(--linie)}

/* ══ 14 · Schmale Fenster ════════════════════════════════════════════════
   Die Marginalspalte wird zum Block unter dem Text; kein Effekt wird kleiner
   nachgebaut. */
@media (max-width:1000px){
  .fs-rand{gap:14px clamp(18px,3vw,30px);font-size:.7rem}
  .fs-rand section[data-art="zahlen"] i{font-size:.92rem}
  .arc-fs [data-grund="tag"] .fs-rand{border-top-color:var(--linie-tag)}
  .fs-block[data-nr]::after{display:none}
  .fs-block[data-nr]::after{opacity:.7}
  .fs-abb[data-wirkung]{transform:scale(calc(1 + (1 - var(--p)) * .02))}
  .fs-kipp > img,.fs-kipp > .fs-stapel,.fs-kipp > .fs-platz{transform:none}
  .fs-stapel > img[data-teil]{transform:none}

}

/* ══ 15 · prefers-reduced-motion: jede Abbildung im Endzustand ═══════════ */
@media (prefers-reduced-motion:reduce){
  .fs-abb,.fs-abb[data-wirkung],.fs-rand,.fs-satz,.fs-daten li{
    transform:none!important;opacity:1!important;clip-path:none!important}
  .fs-kipp > img,.fs-kipp > .fs-stapel,.fs-kipp > .fs-platz{transform:none!important}
  .fs-stapel > img[data-teil]{opacity:1!important;transform:none!important}
  .fs-stapel[data-zug] > img[data-teil="rechts"]{clip-path:inset(16% 0 0 52%)!important}
  .fs-stapel[data-zug] > img[data-teil="titel"]{opacity:1!important}
  .fs-abb[data-wirkung="hoehepunkt"]::after{display:none}
  .fs-solo{opacity:1!important}
  .fs-takt{opacity:1!important;transform:none!important;transition:none!important}
  .fs-spreiz{gap:14vw!important}
  .fs-spreiz-wort{opacity:1!important}
  .fs-zeilen li{transform:none!important;opacity:1!important}
  .fs-treppe > i{transition:none!important}
  .fs-balken{opacity:1!important}
  .fs-balken-saeule,.fs-balken-feld{transition:none!important}
  .fs-block + .fs-block::before{width:100%!important}
}


/* ══ 16 · Neugezeichnetes: vier Teilfelder, Kernabbildung, zwei Tafeln ════
   Drei Platzhalter sind ersetzt — nicht durch größere Bilder, sondern durch
   Inline-SVG und HTML-Tabellen. Grund: ein PNG lässt sich nicht ehrlich
   zerlegen, und 33 Zeilen deutscher Text in einer Rasterdatei sind für jede
   Maschine nicht vorhanden. Die Palette ist Pixel für Pixel aus den 19
   bestehenden Abbildungen ausgelesen, damit nichts fremd wirkt. */
.fs-svg{display:block;width:100%;height:auto;overflow:visible}
.fs-svg-t{fill:#F2F5F9;font:400 15px var(--f-b);letter-spacing:-.01em}
.fs-svg-u{fill:#8A94A6;font:400 10.5px var(--f-b)}
.fs-svg-l{fill:#F2F5F9;font:400 11.5px var(--f-b)}
.fs-svg-w{fill:#F2F5F9;font:400 11px var(--f-m)}
.fs-svg--kern .fs-svg-t{font-size:19px}

/* Balken wachsen beim Hereinrollen; Geometrie als CSS, damit sie am Rollweg
   hängt und rückwärts wieder zurückgeht. */
/* Nicht data-balken: dieses Attribut gehört den Stationen des Messbalkens,
   und ein gleichnamiges hier hätte ihn als leere Station überschrieben. */
.fs-svg rect[data-wachs]{
  width:calc(var(--w,0) * clamp(0,calc((var(--fs-ein,1) - .04) * 2.2),1) * 1px)}
.fs-svg circle[data-punkt]{
  opacity:clamp(0,calc((var(--fs-ein,1) - var(--i,0) * .006) * 3),1)}
/* Die zwei Pfeile der Kernabbildung: das Motiv. Kapseln zuerst, Makkaroni
   danach — der Versatz steckt in --v. */
.fs-pfeil{--f:clamp(0,calc((var(--fs-ein,1) - var(--v,0) - .12) * 2.4),1)}
.fs-svg rect[data-schaft]{width:calc(var(--w,0) * var(--f,1) * 1px)}
.fs-svg polygon[data-spitze]{transform:translateX(calc(var(--x,0) * var(--f,1) * 1px))}
.fs-pfeil .fs-svg-w{opacity:clamp(0,calc((var(--f,1) - .7) * 4),1)}

.fs-felder{display:grid;gap:clamp(22px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,318px),1fr));
  margin:clamp(26px,4vh,54px) 0 0}
.fs-feld{margin:0}
.fs-kern{max-width:min(100%,720px)}

/* Die zwei Tafeln. Sie tragen dieselben Spalten wie die Abbildungen, aus
   denen sie hervorgehen — nur eben als Text, der sich markieren lässt. */
.fs-tafel{width:100%;border-collapse:collapse;margin:clamp(20px,3vh,38px) 0 0;
  font-size:.84rem;line-height:1.5;text-align:left}
.fs-tafel caption{caption-side:top;text-align:left;padding:0 0 12px;
  font-family:var(--f-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc)}
.fs-tafel th{font-weight:400;font-family:var(--f-m);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--kalt);
  padding:0 16px 8px 0;border-bottom:1px solid var(--linie);vertical-align:bottom}
.fs-tafel td{padding:11px 16px 11px 0;border-bottom:1px solid var(--linie);
  color:var(--on-night-mute);vertical-align:top}
.fs-tafel tfoot td{color:var(--on-night);border-bottom:0;border-top:1px solid var(--acc);
  font-family:var(--f-m);font-size:.74rem}
.fs-irr td[data-sp="vorhersage"]{color:var(--acc)}
.fs-irr td[data-sp="messung"]{color:#7FBF95}
.arc-fs [data-grund="tag"] .fs-tafel th{color:var(--on-dawn-mute)}
.arc-fs [data-grund="tag"] .fs-tafel td{color:var(--on-dawn-mute);border-color:var(--linie-tag)}
.arc-fs [data-grund="tag"] .fs-irr td[data-sp="messung"]{color:#1D6B3F}
.arc-fs [data-grund="tag"] .fs-tafel th{border-color:var(--linie-tag)}
/* Der Prüfpfad: die Zeilen laufen ein, 60 ms Abstand. Die Länge ist die
   Aussage — bei 33 Zeilen knapp zwei Sekunden. */
.fs-pruefpfad td:first-child,.fs-pruefpfad td:nth-child(4){font-family:var(--f-m);font-size:.74rem}
.fs-pruefpfad tbody tr{
  opacity:clamp(0,calc((var(--fs-ein,1) - var(--fs-i,0) * .022) * 6),1);
  transform:translate3d(calc((1 - clamp(0,calc((var(--fs-ein,1) - var(--fs-i,0) * .022) * 6),1)) * -12px),0,0)}
.fs-pruefpfad[data-stand]::after{content:"Stand: " attr(data-stand);display:block;
  margin-top:10px;font-family:var(--f-m);font-size:.66rem;color:var(--kalt)}
.fs-hinweis[data-leer="nein"]{display:none}
.fs-formel--klein{font-size:.86rem;line-height:1.7}
.fs-formel--klein span{display:block;margin-top:6px;font-size:.74rem;color:var(--on-night-mute)}
@media (max-width:820px){
  .fs-tafel{font-size:.76rem}
  .fs-tafel td,.fs-tafel th{padding-right:10px}
  .fs-pruefpfad{font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .fs-svg rect[data-wachs]{width:calc(var(--w,0) * 1px)}
  .fs-svg circle[data-punkt]{opacity:1}
  .fs-pfeil{--f:1}
  .fs-pruefpfad tbody tr{opacity:1;transform:none}
}

/* ══ 16 · Kopfleiste: der Akzent gehört dem Grund darunter ════════════════
   Die Seite liegt in der Nacht und trägt dort Glut. Nur Sektion 09 ist
   Papier — solange sie unter der Leiste liegt, geht der Akzent in das
   Peilungsblau über, wie im Fußbereich, und springt danach zurück.
   fallstudie.js schreibt den Zustand nach data-fs-kopf; --acc ist als
   @property angemeldet und damit überführbar. */
.arc-kopf{--acc:var(--glut);
  transition:height 300ms var(--ease),background-color 300ms var(--ease),
    box-shadow 300ms var(--ease),--acc 520ms var(--ease)}
.arc-mobil{--acc:var(--glut);transition:--acc 520ms var(--ease)}
[data-fs-kopf="hell"] .arc-kopf,
[data-fs-kopf="hell"] .arc-mobil{--acc:var(--nadel)}