/* =====================================================================
   system.css — die gemeinsame Schicht ueber ALLEN acht Seiten.

   Vorher: index.html hatte 229 eigene Klassen und lud case.css gar nicht,
   die sechs Case-Seiten definierten .hero/.lead/.marquee/.used je neu, und
   es gab drei verschiedene Navigationen. Acht Seiten, kein System.

   Hier stehen genau drei Bauteile, sonst nichts:
     1) .idx   — die leise Indexzeile, auf jeder Seite identisch
     2) .blatt — das Indexblatt (Werk / Archiv / Kontakt) als ein Bild
     3) .rail  — das Rueckgrat der jeweiligen Arbeit, sichtbar gemacht

   Kein Kasten, kein Radius, kein Schatten. Alles traegt Typografie,
   Position und Kontrast.
   ===================================================================== */

:root{
  --idx-h:2.85rem;          /* Hoehe der Indexzeile — die Leiste haengt daran */
  --sys-pap:#ECE6D8;
}

/* =====================================================================
   1) DIE INDEXZEILE
   Sie schwebt auf dem Papier: keine Flaeche, kein Rahmen, keine Schatten.
   Ueber den Bildkoepfen wird sie hell, danach dunkel — deshalb .hell.
   ===================================================================== */
.idx{
  position:fixed;inset:0 0 auto;z-index:200;
  height:var(--idx-h);display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  padding-inline:var(--gut,3rem);
  font-family:var(--mono);font-size:var(--t-2);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
  transition:opacity .5s var(--ease),color .5s var(--ease);
  pointer-events:none;                 /* die Zeile selbst faengt nichts ab … */
}
.idx > *{pointer-events:auto}          /* … nur ihre Kinder */
.idx.hell{color:#F4EFE4}
/* Die Abdunklung im Bildkopf sitzt RADIAL in der Bildmitte — oben ist das Foto
   unbehandelt. Ohne diesen flachen Verlauf waere helle Schrift auf hellen
   Aufnahmen unlesbar. Kein Balken, kein Rahmen: nur ein Schatten am Blattrand,
   und nur solange die Zeile ueberhaupt hell ist. */
.idx::before{content:"";position:absolute;inset:0 0 auto;height:5.5rem;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(180deg,rgba(10,7,5,.62),rgba(10,7,5,.28) 46%,rgba(10,7,5,0))}
.idx.hell::before{opacity:1}

/* Auf hellem Grund traegt die Zeile selbst die Papierfarbe. Im Ruhezustand
   ist sie damit unsichtbar — sie maskiert erst, sobald Inhalt darunter
   durchlaeuft. Auf Seiten OHNE Rueckgrat-Leiste (Startseite, data.html)
   fehlte diese Flaeche bisher ganz, und der Text lief mitten durch die
   Navigation hindurch. Ueber dunklen Flaechen bleibt sie transparent,
   dort uebernimmt der Verlauf. */
.idx:not(.hell){background:var(--sys-pap)}
/* Der Abschluss nach unten erscheint erst beim Lesen — und nur, wenn nicht
   ohnehin die Leiste darunter klebt und ihre eigene Kante mitbringt. */
.idx.fest:not(.hell){box-shadow:0 1px 0 var(--line)}

/* Beim Weiterlesen tritt die Zeile zurueck. Sie verschwindet nie ganz —
   Orientierung darf nicht verhandelbar sein. */
.idx.weg{opacity:.34}
.idx:hover,.idx:focus-within{opacity:1}

.idx-name{text-decoration:none;font-weight:500;
  transition:opacity .5s var(--ease)}
/* Auf der Startseite traegt der Deckel den Namen schon in voller Groesse.
   Solange er im Bild ist, tritt der Name in der Zeile zurueck — sonst
   steht er zweimal uebereinander. Die Markierung .hier gibt es nur dort.
   Bei Tastaturnutzung kommt er sofort zurueck, sonst waere ein
   fokussierbarer Link unsichtbar. */
.idx.hell .idx-name.hier{opacity:0;pointer-events:none}
.idx.hell:focus-within .idx-name.hier{opacity:1;pointer-events:auto}
.idx-set{display:flex;gap:clamp(.9rem,2.2vw,1.7rem);align-items:center}
.idx-set a,.idx-set button{
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  background:none;border:0;padding:0;cursor:pointer;text-decoration:none;
  opacity:.52;transition:opacity .3s var(--ease)}
.idx-set a:hover,.idx-set button:hover,.idx-set .hier{opacity:1}
/* "Wo bin ich" — ein Strich, kein Kasten, keine Farbe. */
.idx-set .hier{position:relative}
.idx-set .hier::after{content:"";position:absolute;left:0;right:0;bottom:-.42em;
  height:1px;background:currentColor}
@media(max-width:560px){
  /* Die Hoehe gehoert an :root, nicht an .idx — die Leiste haengt mit
     ihrem sticky-Abstand daran und stand sonst 5,6 px tiefer, mit einem
     Spalt dazwischen, durch den der Inhalt lief. */
  :root{--idx-h:2.5rem}
  .idx{font-size:var(--t-1);letter-spacing:.12em}
  /* Auf dem Telefon weicht "Archive" — es oeffnet dasselbe Blatt wie
     "Work" und ist dort ohnehin die zweite Spalte. Der Name wird NICHT
     abgeschnitten: ein Name mit Auslassungspunkten sieht nach Fehler aus,
     nicht nach Gestaltung. */
  .idx-set .weit{display:none}
}

/* =====================================================================
   2) DAS INDEXBLATT
   Ein Blatt, kein Menue. Es faehrt als Maske von oben auf, wie eine
   umgeschlagene Seite. Sechs Zeilen Werk, daneben das Archiv.
   ===================================================================== */
/* OHNE JavaScript ist das Blatt ein gewoehnlicher Abschnitt am Seitenende,
   und "Work" ein Sprungziel darauf. Erst das Skript macht daraus die
   aufziehende Maske. So ist kein Bedienelement je tot. */
.blatt{background:var(--sys-pap);
  padding:clamp(2.4rem,7vh,4.5rem) var(--gut,3rem) clamp(1.4rem,4vh,2.4rem);
  border-top:1px solid var(--line)}
.blatt.js{
  position:fixed;inset:0;z-index:260;border-top:0;
  padding-top:calc(var(--idx-h) + clamp(1.2rem,4vh,2.6rem));
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--ease),visibility .62s;
  visibility:hidden}
.blatt.js.auf{clip-path:inset(0 0 0 0);visibility:visible}
.blatt-in{max-width:var(--maxw,1280px);margin-inline:auto}

/* --- Zwei Tafeln, nicht zwei Woerter fuer dasselbe.
       "Work" und "Archive" oben in der Zeile oeffneten vorher exakt
       denselben Inhalt. Jetzt schaltet jedes seine eigene Tafel. --- */
.blatt-reiter{display:flex;gap:clamp(1.1rem,3vw,2rem);
  padding-bottom:.7rem;margin-bottom:clamp(.9rem,2.5vh,1.6rem);
  border-bottom:1px solid var(--line)}
.bl-r{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:var(--t-1);font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  position:relative;transition:color .3s var(--ease)}
.bl-r:hover{color:var(--ink-2)}
.bl-r.an{color:var(--ink)}
.bl-r.an::after{content:"";position:absolute;left:0;right:0;bottom:-.72rem;
  height:1px;background:var(--ink)}

/* Ohne JavaScript stehen beide Tafeln untereinander und die Reiter
   verschwinden — sie haetten dann nichts zu schalten. */
.blatt:not(.js) .blatt-reiter{display:none}
.blatt.js .paneel[hidden]{display:none}

.paneel{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.78fr);
  gap:clamp(1.4rem,4vw,3.4rem);align-items:start}
.paneel[data-p="archiv"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* --- die sechs Arbeiten: Zeilen eines Verzeichnisses, keine Kacheln --- */
.wk{display:block;text-decoration:none;color:inherit;
  padding-block:clamp(.62rem,1.6vh,1rem);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto;
  gap:0 clamp(.7rem,2vw,1.4rem);align-items:baseline;
  transition:opacity .34s var(--ease)}
.wk-n{font-family:var(--mono);font-size:var(--t-1);color:var(--ink-soft);
  letter-spacing:.1em;line-height:1.35}
/* Nummer ueber Kuerzel, wie eine Signatur im Katalog. */
.wk-n i{display:block;font-style:normal;letter-spacing:.06em;opacity:.72}
.wk-t{font-family:var(--didone);font-size:var(--t-6);line-height:1.02;
  letter-spacing:-.015em;
  transition:transform .42s var(--ease)}
.wk-t em{font-style:italic;color:var(--ox-2)}
/* Das Rueckgrat der Arbeit steht rechts — vier Woerter, sonst nichts. */
.wk-w{font-family:var(--mono);font-size:var(--t-1);color:var(--ink-soft);
  letter-spacing:.12em;text-transform:uppercase;text-align:right;
  transition:color .34s var(--ease)}
.wk-s{grid-column:2/-1;font-family:var(--read);font-size:var(--t-3);
  color:var(--ink-2);margin-top:.28rem;max-width:52ch}
/* Beim Zeigen tritt die eine Zeile vor und die uebrigen zuruck. */
.wkliste:hover .wk{opacity:.38}
.wkliste .wk:hover,.wkliste .wk:focus-visible{opacity:1}
.wk:hover .wk-t{transform:translateX(.4rem)}
.wk:hover .wk-w{color:var(--ox-2)}

/* --- Die Vorschau: das Blatt soll leben, nicht nur auflisten.
       Kein Rahmen, kein Radius, kein Schatten — nur das Bild auf Papier.
       Es laedt erst, wenn das Blatt geoeffnet wird; vorher kostet es
       nichts. Data hat kein Foto (sein Bildkopf ist ein Verlauf), also
       tragen dort seine eigenen Zahlen die Flaeche. --- */
.vorschau{margin:0;position:sticky;top:calc(var(--idx-h) + 1rem)}
.vs-bild{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.vs-bild img{width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s var(--ease)}
.vorschau.da .vs-bild img{opacity:1}
.vorschau.zahlen .vs-bild{display:none}
.vs-zahl{display:none}
.vorschau.zahlen .vs-zahl{display:flex;flex-direction:column;
  justify-content:space-between;
  aspect-ratio:4/5;background:var(--paper-2);
  padding:clamp(1.4rem,3.2vw,2.4rem)}
.vs-zahl b{font-family:var(--didone);font-weight:500;
  font-size:clamp(2.1rem,4vw,3.7rem);line-height:.94;letter-spacing:-.035em;
  color:var(--ox-2)}
.vs-zahl i{font-style:normal;font-family:var(--mono);font-size:var(--t-1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:.42rem}
.vs-name{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}
@media(max-width:900px){
  /* Auf dem Telefon kostet die Vorschau nur Platz — dort zaehlt die Liste. */
  .vorschau{display:none}
}

/* --- Archiv + Kontakt --- */
.k-label{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);margin:0}
.arch{display:flex;flex-direction:column}
.arch a{font-family:var(--mono);font-size:var(--t-2);letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-2);
  padding-block:.52rem;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;
  transition:color .3s var(--ease),padding-left .3s var(--ease)}
.arch a span{color:var(--ink-soft)}
.arch a:hover{color:var(--ox-2);padding-left:.35rem}
.kontakt{margin-top:0}
.kontakt a{display:block;font-family:var(--didone);font-size:var(--t-5);
  line-height:1.1;text-decoration:none;margin-top:.4rem;
  transition:color .3s var(--ease)}
.kontakt a:hover{color:var(--ox-2)}
.kontakt p{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;
  color:var(--ink-soft);margin-top:.7rem;line-height:1.7}

.blatt-zu{position:fixed;top:0;right:var(--gut,3rem);z-index:270;
  height:var(--idx-h);display:flex;align-items:center;
  background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:var(--t-2);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
  visibility:hidden;opacity:0;transition:opacity .3s var(--ease) .3s,visibility .3s}
.blatt-zu.auf{visibility:visible;opacity:1}

@media(max-width:900px){
  .paneel,.paneel[data-p="archiv"]{grid-template-columns:1fr;gap:clamp(1.4rem,4vh,2.2rem)}
  .wk-w{display:none}                 /* mobil traegt die Zeile den Titel, nicht das Raster */
  .wk{grid-template-columns:4.2rem minmax(0,1fr)}
}

/* =====================================================================
   DIE STILLE
   Genau ein Moment auf der ganzen Seite darf die Oberflaeche abwerfen:
   der Uebergang vom Film zu ihrer Frage. Nichts blendet, nichts klebt,
   nichts orientiert. Danach ist alles wieder da.
   ===================================================================== */
html.still .idx,html.still .rail{opacity:0;pointer-events:none}
html.still .idx{transition:opacity .9s var(--ease)}
html.still .rail{transition:opacity .6s var(--ease)}
.idx,.rail{transition:opacity .5s var(--ease),color .5s var(--ease)}

/* =====================================================================
   3) DAS RUECKGRAT
   Jede Arbeit hat denselben Bogen — sehen, fragen, bauen, pruefen,
   messen, entscheiden — nur in ihrer eigenen Sprache. Diese Leiste
   macht ihn sichtbar, ohne ihn zu erklaeren.
   ===================================================================== */
.rail{position:sticky;top:var(--idx-h);z-index:150;
  background:var(--sys-pap);
  border-bottom:1px solid var(--line);
  padding-inline:var(--gut,3rem)}
.rail-in{max-width:var(--maxw,1280px);margin-inline:auto;
  display:flex;gap:clamp(1rem,3vw,2.4rem);align-items:center;
  overflow-x:auto;scrollbar-width:none;
  padding-block:.62rem}
.rail-in::-webkit-scrollbar{display:none}
.rail a{display:flex;gap:.42rem;align-items:baseline;flex:0 0 auto;
  text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:var(--t-1);letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.34;transition:opacity .38s var(--ease)}
.rail a i{font-style:normal;color:var(--ink-soft);letter-spacing:.06em}
.rail a:hover{opacity:.7}
.rail a.an{opacity:1}
.rail a.an i{color:var(--ox-2)}
/* Die rechte Kante blendet aus, damit auf schmalen Geraeten sichtbar ist,
   dass die Leiste weitergeht. Ohne das endet sie scheinbar am Rand. */
.rail{position:sticky}
/* Sobald die Leiste oben klebt, zieht sie ihre Flaeche bis an den
   Blattrand hoch. Damit steht die Indexzeile ab da IMMER auf einem
   ruhigen Grund — vorher lief jedes seitenbreite Foto unter ihr durch
   und die Schrift verschwand darin. Solange die Leiste noch mitlaeuft
   (unter dem Bildkopf), passiert nichts: dort soll die Zeile schweben. */
.rail.klebt::before{content:"";position:absolute;left:0;right:0;
  bottom:100%;height:var(--idx-h);background:inherit}
.rail::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:2.6rem;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sys-pap))}
@media(min-width:901px){.rail::after{display:none}}

/* Ohne JavaScript ist jede Marke gleich sichtbar — niemand verliert
   Orientierung, wenn das Skript ausfaellt. */
.rail:not(.bereit) a{opacity:.72}

/* Liegt die Leiste an einer dunklen Flaeche, nimmt sie sie an, statt als
   helles Band darauf zu liegen. Dieselbe Regel wie bei der Indexzeile:
   die Oberflaeche folgt dem Bild, nicht umgekehrt. */
.rail{transition:background-color .5s var(--ease),border-color .5s var(--ease),opacity .5s var(--ease)}
.rail.dunkel{background:#0A0807;border-bottom-color:rgba(244,239,228,.16)}
.rail.dunkel a{color:#F4EFE4}
.rail.dunkel a i{color:rgba(244,239,228,.5)}
.rail.dunkel a.an i{color:var(--ox-light)}
.rail.dunkel::after{background:linear-gradient(90deg,transparent,#0A0807)}

/* =====================================================================
   Ruecksicht auf reduzierte Bewegung
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  .blatt.js{transition:visibility .01s}
  .blatt.js.auf{clip-path:none}
  .idx,.wk,.wk-t,.wk-w,.arch a,.rail a{transition:none}
}

/* =====================================================================
   Die Fortschrittsleiste, leiser gestellt.
   Sie lag als drei Pixel Ochsenrot quer ueber jedem Bildkopf und war
   damit das Lauteste auf einer Seite, deren Navigation nicht einmal
   eine Flaeche hat. Ein Haarstrich reicht.
   ===================================================================== */
.prog{height:1px;opacity:.55}

/* =====================================================================
   ENTKASTUNG

   Bis 08/2026 lag auf fuenf Seiten dieselbe Regel, jedes Mal wortgleich
   in die Seite kopiert:

     .used{border:1px solid var(--line-2);background:rgba(228,220,201,.55);
           padding:.9rem 1.1rem;max-width:460px}

   Darin standen echte Belege — Herkunft des Materials, Pruefnorm,
   Mengengeruest. Der Rahmen und die Fuellung haben daraus ein Bedienteil
   gemacht statt einer Spezifikation. Jetzt traegt sie Typografie: eine
   Linie oben, Bezeichnung links, Wert rechts, Haarlinien dazwischen —
   dieselbe Sprache wie das Archiv im Indexblatt. Kein Rahmen, keine
   Fuellung, kein Radius, kein Schatten.
   ===================================================================== */
.used{margin-top:clamp(1.4rem,3.6vh,2.3rem);max-width:min(100%,33rem);
  border-top:1px solid var(--ink);padding:.55rem 0 0;background:none}
.used .ul{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ox-2);display:block;
  margin-bottom:.15rem;border-bottom:0;padding-bottom:0}
/* Kein Rasterabstand zwischen den Spalten: sonst bricht die Haarlinie
   in der Luecke und die Zeile sieht aus wie zwei kaputte Striche.
   Der Abstand kommt stattdessen aus der Innenflaeche der Bezeichnung. */
.used dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0}
.used dt,.used dd{padding-block:.46rem;border-bottom:1px solid var(--line);
  align-self:end}
.used dt{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);padding-right:1.6rem}
.used dd{font-family:var(--mono);font-size:var(--t-2);color:var(--ink);
  text-align:right;line-height:1.35}
/* Die letzte Zeile braucht keinen Abschluss — die Linie oben genuegt. */
.used dl > :nth-last-child(-n+2){border-bottom:0}

/* --- Die Pillen. Bis 08/2026 sassen die Kompetenzworte in kleinen
   umrandeten Kaesten mit Innenabstand — 16 Stueck auf zwei Seiten.
   Ein Rahmen um ein Wort macht es nicht wichtiger, nur enger. Jetzt
   eine Schlagwortzeile unter einer Haarlinie, wie im Katalog. --- */
.tags{display:flex;flex-wrap:wrap;gap:.34rem 1.5rem;
  margin-top:clamp(1.2rem,3vh,1.9rem);
  border-top:1px solid var(--line);padding-top:.72rem}
.tag{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
  border:0;padding:0;background:none;border-radius:0}

/* --- Die beiden Karten auf data.html. Bis 08/2026 lagen der Fallbericht
   und das Pipeline-Schaubild je in einem umrandeten, gefuellten Rechteck.
   Sie tragen die einzige durchgerechnete Analyse der Seite — das ist ein
   Beleg, kein Bedienteil. Jetzt: Linie oben, Luft aussen, senkrechte
   Haarlinie zwischen den Spalten statt eines Rahmens aussen herum. --- */
.dcase{border:0;background:none;padding:0;
  border-top:1px solid var(--ink);padding-top:clamp(1rem,2.4vw,1.6rem);
  margin:clamp(1.6rem,4vw,2.6rem) 0 clamp(2.2rem,5vw,3.4rem);
  gap:clamp(1.6rem,4.5vw,3.4rem)}
.medallion{border:0;background:none;padding:0;
  border-top:1px solid var(--ink);padding-top:clamp(1rem,2.4vw,1.6rem);
  margin:0 0 clamp(2rem,4.5vw,3rem)}
/* Die senkrechte Linie haelt die zwei Spalten zusammen, ohne sie
   einzukasten. Auf schmalen Schirmen faellt sie weg. */
@media(min-width:821px){
  .dcase-r{border-left:1px solid var(--line);padding-left:clamp(1.4rem,3.5vw,2.6rem)}
}

/* --- Und die fuenf Werkzeug-Pillen darin. --- */
.dv-stacks{display:flex;flex-wrap:wrap;gap:.34rem 1.4rem;margin-top:auto;
  border-top:1px solid var(--line);padding-top:.7rem}
.dv-stacks span{font-family:var(--mono);font-size:var(--t-1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  border:0;padding:0;background:none}

/* --- Der Entscheidungsblock. Er steht auf buying, textile und mymex und
   traegt jeweils die begruendete Einkaufs- oder Laborentscheidung — also
   das Ergebnis der ganzen Seite. Bis 08/2026 lag genau das in einem
   umrandeten, gefuellten Rechteck. Jetzt: Linie oben, sonst nichts.
   Der Querverweis-Block behaelt seine Kennung, nur wandert sie von der
   linken Kante nach oben — als Farbe der Linie statt als Balken. --- */
.decision{border:0;background:none;
  border-top:1px solid var(--ink);
  padding:clamp(1rem,2.4vw,1.7rem) 0 0}
.decision-next{border-left:0;
  border-top:2px solid var(--ox);
  padding-top:clamp(1rem,2.4vw,1.7rem)}

/* =====================================================================
   DIE NAHT

   Ein sauberer Zwirn, kein Foto von Gurtband. Der Faden ist erzeugt und
   im VERHAELTNIS zur Nadel bemessen: ihr Schaft ist 44 von 58 px breit,
   der Faden ein Viertel davon — 1 : 3,8. So sieht es aus, als koennte er
   wirklich durch das Oehr.

   Gelesen = genaeht. Darunter liegt nichts: der Faden entsteht erst beim
   Lesen. Die Nadel fuehrt ihn und wandert mit.

   Sie ERSETZT den Fortschrittsbalken oben, sie kommt nicht dazu.
   ===================================================================== */
.naht{position:fixed;left:calc(var(--gut,3rem) * .46);top:0;bottom:0;
  width:38px;z-index:110;pointer-events:none;
  opacity:0;transition:opacity 1s var(--ease)}
.naht.da{opacity:1}

/* Der genaehte Faden. Die Hoehe kommt aus dem Lesefortschritt. */
.naht i{position:absolute;top:0;left:50%;margin-left:-3.5px;width:7px;
  height:var(--genaeht,0%);
  background:url("assets/faden.webp?v=2") repeat-y center / 7px auto}

/* DIE NADEL — reiner Vektor, kein Bild. Sie sitzt mit dem Oehr am
   Fadenende und fuehrt ihn nach unten. */
.naht i .nadel{position:absolute;left:50%;top:100%;
  width:19px;height:388px;margin-left:-9.5px;
  fill:#3D3834;opacity:.85;
  filter:drop-shadow(1px 1px 2px rgba(0,0,0,.05))}
/* Auf dunklem Grund waere eine dunkle Nadel unsichtbar — sie dreht sich um. */
html.dunkelzone .naht i .nadel{fill:#D8D2C6;opacity:.9;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.5))}
html.dunkelzone .naht i{filter:brightness(1.45) saturate(.9)}

html.still .naht{opacity:0}

/* Unter 900px ist der Blattrand zu schmal — dort bleibt der Haarstrich
   oben die Anzeige. Zwei Anzeigen gleichzeitig waeren eine zu viel. */
@media(min-width:900px){ .prog{display:none} }
@media(max-width:899px){ .naht{display:none} }
@media(prefers-reduced-motion:reduce){ .naht{transition:none} }