/* Forest Air — Wirkungsweise ("The Tech")
   ===========================================================================
   Die Seite, die erklaert, wie das Geraet arbeitet. Sie soll nach Instrument
   aussehen, nicht nach Merkblatt: dunkler Grund, Licht als Material, Tiefe
   durch gestaffelte Ebenen.

   Warum hier KEIN echtes CSS-3D steht
   -----------------------------------
   transform-style:preserve-3d und perspective brechen auf dieser Seite, sobald
   irgendein Elternteil filter, opacity oder overflow setzt. Raeumlichkeit
   entsteht deshalb auf zwei Wegen:
     1) Canvas — eine eigene kleine Projektion in wirkungsweise.js
        (Ring, Kammer, Schnitt, Welle). Dort ist Tiefe echt gerechnet.
     2) In 2D vorgetaeuscht — translate + scale, gestaffelte Ebenen,
        Schlagschatten, Glanzkanten. Nie ueber filter.

   Und KEIN overflow-x:auto auf Baendern mit absolut gesetzten Kindern:
   das schneidet die Kinder auf eine Kachelbreite zusammen.
   =========================================================================== */

.fa-wk{
  --wk-tief:#181A15;
  --wk-grund:#232323;
  --wk-wald:#2F3428;
  --wk-linie:rgba(231,228,214,.14);
  --wk-linie-stark:rgba(231,228,214,.28);
  --wk-glanz:linear-gradient(180deg,rgba(245,242,235,.10),rgba(245,242,235,0) 60%);
  position:relative;
  /* KEIN overflow hier. overflow:hidden macht die Sektion zum Scrollbehaelter
     und damit haftet position:sticky darin an einem Behaelter, der sich nie
     bewegt — die Grafik im Ablauf blieb daraufhin einfach stehen und war
     nach einer Bildschirmhoehe weg. Der waagerechte Ueberstand ist ohnehin
     schon von body{overflow-x:hidden} in rahmen.css abgefangen. */
}

/* ------------------------------------------------------------- Bausteine */
.fa-wk-innen{max-width:1200px;margin:0 auto;padding:0 var(--rand)}
.fa-wk-schmal{max-width:760px}

.fa-wk-ober{
  display:inline-flex;align-items:center;gap:11px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  color:#B9BCA6;margin:0 0 18px;
}
.fa-wk-ober::before{
  content:"";width:26px;height:1px;background:currentColor;opacity:.7;flex:0 0 auto;
}
.fa-wk-titel{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(30px,5.2vw,58px);line-height:1.02;
  color:var(--creme);margin:0 0 16px;
}
.fa-wk-titel em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  text-transform:none;letter-spacing:0;color:var(--mondlicht);
  font-size:1.06em;line-height:.95;
}
.fa-wk-lede{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.5vw,26px);line-height:1.42;color:var(--mondlicht);
  margin:0 0 18px;max-width:34em;
}
.fa-wk-vor{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(15px,1.5vw,17px);line-height:1.72;color:#DDD9CD;
  margin:0;max-width:46em;
}
.fa-wk-vor strong{color:var(--creme);font-weight:600}
.fa-wk-hinweis{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#9EA28A;
  margin:14px 0 0;
}

/* Sanftes Einblenden — ohne Bewegung ist alles sofort da. */
.fa-wk-auf{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.3,1)}
.fa-wk-auf.ein{opacity:1;transform:none}
body.rm .fa-wk-auf{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .fa-wk-auf{opacity:1;transform:none;transition:none}
}

/* Buehnenrahmen: der Kasten, in dem eine Leinwand sitzt.
   Tiefe entsteht aus drei Ebenen — Aussenkante, Innenschatten, Glanzkante. */
.fa-wk-buehne{
  position:relative;border-radius:18px;
  background:radial-gradient(120% 130% at 50% 0%,#2A2D26 0%,#1C1E19 55%,#141610 100%);
  border:1px solid var(--wk-linie);
  box-shadow:
    0 1px 0 rgba(245,242,235,.10) inset,
    0 -30px 60px rgba(0,0,0,.45) inset,
    0 26px 60px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.6);
  overflow:hidden;
}
.fa-wk-buehne::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--wk-glanz);opacity:.5;
}
.fa-wk-canvas{display:block;width:100%;height:100%}

/* Fallbacktext unter jeder Leinwand — sichtbar fuer Vorlesegeraete,
   und wenn kein Canvas gezeichnet wird, bleibt der Inhalt vollstaendig. */
.fa-wk-alt{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* ============================================================ 1 — Auftakt */
.fa-wk-hero{
  background:
    radial-gradient(90% 70% at 50% -10%,rgba(231,220,201,.10) 0%,rgba(231,220,201,0) 60%),
    linear-gradient(180deg,#1E201B 0%,#232323 60%,#202220 100%);
  padding:clamp(58px,8vw,104px) 0 clamp(52px,7vw,92px);
}
.fa-wk-hero-feld{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.fa-wk-hero-innen{position:relative;z-index:2;text-align:center}
.fa-wk-hero h1{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(42px,9vw,104px);line-height:.96;margin:0 0 14px;
  color:var(--creme);
  text-shadow:0 2px 0 rgba(0,0,0,.35),0 22px 60px rgba(0,0,0,.5);
}
.fa-wk-hero-unter{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(20px,3vw,32px);line-height:1.35;color:var(--mondlicht);
  margin:0 auto clamp(38px,5vw,62px);max-width:22em;
}
.fa-wk-hero .fa-wk-ober{justify-content:center}

/* Die drei Absaetze als Faden: Linie links, Perle je Absatz. */
.fa-wk-faden{
  --wk-faden-x:clamp(6px,1.6vw,16px);
  position:relative;max-width:760px;margin:0 auto;text-align:left;
  padding-left:calc(var(--wk-faden-x) + 30px);
}
.fa-wk-faden::before{
  content:"";position:absolute;left:var(--wk-faden-x);top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(231,220,201,0),rgba(231,220,201,.45) 18%,rgba(231,220,201,.45) 82%,rgba(231,220,201,0));
}
.fa-wk-faden li{
  list-style:none;position:relative;margin:0 0 clamp(22px,3vw,34px);
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(15px,1.6vw,17.5px);line-height:1.78;color:#DEDACF;
}
.fa-wk-faden li:last-child{margin-bottom:0}
.fa-wk-faden li strong{color:var(--creme);font-weight:600}
.fa-wk-faden li::before{
  content:"";position:absolute;left:-34.5px;
  top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--mondlicht);
  box-shadow:0 0 0 4px rgba(231,220,201,.12),0 0 18px 3px rgba(231,220,201,.35);
}
.fa-wk-faden ol{margin:0;padding:0}

/* ==================================================== 2 — Kreislauf (Ring) */
.fa-wk-ring{
  background:linear-gradient(180deg,#202220 0%,#191B16 50%,#1E201B 100%);
  padding:clamp(56px,7vw,96px) 0;
}
.fa-wk-ring-kopf{max-width:760px;margin:0 0 clamp(28px,4vw,44px)}
.fa-wk-ring-gitter{
  display:grid;grid-template-columns:minmax(0,1.48fr) minmax(0,1fr);
  gap:clamp(20px,3vw,42px);align-items:center;
}
/* Die Auftakt-Szene laeuft von links (Sonne, Pflanze) nach rechts (Anregung,
   Rueckfall). Sie braucht deshalb Breite, nicht Hoehe. */
.fa-wk-ring-buehne{aspect-ratio:16/10;min-height:300px}
.fa-wk-ring-liste{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.fa-wk-ring-liste li{margin:0}
.fa-wk-stat{
  display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:baseline;
  width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,rgba(245,242,235,.055),rgba(245,242,235,.015));
  border:1px solid var(--wk-linie);border-radius:12px;
  padding:12px 16px;color:var(--creme);
  box-shadow:0 1px 0 rgba(245,242,235,.07) inset,0 8px 18px rgba(0,0,0,.28);
  transition:transform .28s cubic-bezier(.22,.9,.3,1),border-color .28s ease,background .28s ease;
}
.fa-wk-stat:hover,.fa-wk-stat:focus-visible{
  transform:translateX(5px);border-color:var(--wk-linie-stark);
  background:linear-gradient(180deg,rgba(245,242,235,.10),rgba(245,242,235,.03));
}
.fa-wk-stat[aria-pressed="true"]{
  border-color:rgba(231,220,201,.62);
  background:linear-gradient(180deg,rgba(231,220,201,.17),rgba(231,220,201,.05));
  box-shadow:0 1px 0 rgba(245,242,235,.16) inset,0 10px 26px rgba(0,0,0,.4),
             0 0 0 1px rgba(231,220,201,.14);
}
.fa-wk-stat-nr{
  grid-row:span 2;align-self:center;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.12em;color:#A8AC93;
}
.fa-wk-stat[aria-pressed="true"] .fa-wk-stat-nr{color:var(--mondlicht)}
.fa-wk-stat-name{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;letter-spacing:.05em;color:var(--creme);
}
.fa-wk-stat-unter{
  grid-column:2;font-family:"Barlow",Arial,sans-serif;
  font-size:13.5px;line-height:1.45;color:#B7BAA4;margin-top:3px;
}
.fa-wk-formel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12.5px;letter-spacing:.03em;color:var(--mondlicht);
  display:inline-block;margin-top:5px;
  border-bottom:1px dashed rgba(231,220,201,.4);padding-bottom:2px;
}
body.rm .fa-wk-stat{transition:none}
@media (prefers-reduced-motion:reduce){.fa-wk-stat{transition:none}}

/* ================================================== 3 — Bruecke (Aussage) */
.fa-wk-bruecke{
  background:linear-gradient(180deg,#1E201B 0%,#232323 100%);
  padding:clamp(58px,8vw,110px) 0;text-align:center;
}
.fa-wk-bruecke-satz{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(22px,3.4vw,40px);line-height:1.4;color:var(--creme);
  max-width:20em;margin:0 auto;font-style:italic;
}
.fa-wk-bruecke-satz b{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;font-style:normal;
  text-transform:uppercase;letter-spacing:.02em;font-size:.86em;
}
.fa-wk-bruecke-satz i{font-style:italic;color:var(--mondlicht)}
.fa-wk-bruecke-linie{
  width:1px;height:clamp(40px,7vw,80px);margin:0 auto clamp(24px,3vw,40px);
  background:linear-gradient(180deg,rgba(231,220,201,0),rgba(231,220,201,.6));
}
.fa-wk-bruecke-perle{
  width:9px;height:9px;border-radius:50%;margin:0 auto clamp(26px,3vw,40px);
  background:var(--mondlicht);box-shadow:0 0 22px 5px rgba(231,220,201,.4);
}

/* ================================================= 4 — Kammer (Herzstueck) */
.fa-wk-kammer{
  background:
    radial-gradient(70% 55% at 50% 42%,rgba(231,220,201,.09) 0%,rgba(231,220,201,0) 62%),
    linear-gradient(180deg,#232323 0%,#15170F 45%,#1B1D16 100%);
  padding:clamp(58px,7vw,100px) 0;
}
.fa-wk-kammer-kopf{max-width:820px;margin:0 auto clamp(30px,4vw,46px);text-align:center}
.fa-wk-kammer-kopf .fa-wk-ober{justify-content:center}
.fa-wk-kammer-kopf .fa-wk-lede,.fa-wk-kammer-kopf .fa-wk-vor{margin-left:auto;margin-right:auto}
.fa-wk-kammer-buehne{
  aspect-ratio:16/9;min-height:300px;border-radius:22px;
  touch-action:pan-y;cursor:grab;
}
.fa-wk-kammer-buehne:active{cursor:grabbing}
.fa-wk-kammer-buehne:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}
/* Die drei Bauteil-Kaesten unter der Buehne sind RAUS (Wunsch Jonas). Der
   vollstaendige Bauteil-Text steht in der Bildbeschreibung der Leinwand —
   ein Vorlesegeraet erreicht ihn dort. */

.fa-wk-marken{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin:22px 0 0;padding:0;list-style:none;
}
.fa-wk-marken li{
  display:flex;align-items:center;gap:9px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#B9BCA6;
}
.fa-wk-marken i{
  width:10px;height:10px;border-radius:50%;display:block;flex:0 0 auto;
  box-shadow:0 0 12px 2px currentColor;
}
/* Formeln duerfen NICHT durch text-transform laufen: aus "hν" wird sonst
   "HN" und aus dem tiefgestellten g ein G. Beides ist schlicht falsch. */
.fa-wk-marken em{text-transform:none;font-style:normal;letter-spacing:.04em}
/* Vier Zustaende, vier Punkte. Salbeinebel und Mondlicht sind Markenfarben;
   Gold und Terrakotta sind ZUSTANDSFARBEN der Physik. Dieselben Werte stehen
   in wirkungsweise.js unter C.gold und C.photon — sie MUESSEN uebereinstimmen,
   sonst zeigt der Punkt neben der Zeile eine andere Farbe als die Grafik
   darueber. Das Gold ist von #D6B068 auf #E6B341 gegangen: das alte Altgold
   war auf einem sechs Bildpunkte grossen Atom nicht mehr als Gold zu lesen.
   Es bleibt Gold — Farbton 41 Grad, unter voller Saettigung, kein Neon. */
.fa-wk-m1{color:#A1A58C;background:#A1A58C}
.fa-wk-m2{color:#E7DCC9;background:#E7DCC9}
.fa-wk-m3{color:#E6B341;background:#E6B341}
.fa-wk-m4{color:#C47058;background:#C47058}
/* Bildlegende unter der Kammer: was die Farben behaupten und was nicht. */
/* 680 px sind bei 13 px Schrift rund 100 Zeichen je Zeile — gemessen
   am 15.08. Ein Maß in ch bindet die Breite an die Schrift statt an
   den Bildschirm und bleibt auch dann richtig, wenn jemand die
   Schriftgröße ändert. */
.fa-wk-bildlegende{
  max-width:64ch;margin:16px auto 0;text-align:center;
  font-family:"Barlow",Arial,sans-serif;
  font-size:13px;line-height:1.62;color:#B3B7A1;
}
.fa-wk-regler{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:20px 0 0;
}
.fa-wk-knopf{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--creme);cursor:pointer;
  background:linear-gradient(180deg,rgba(245,242,235,.10),rgba(245,242,235,.02));
  border:1px solid var(--wk-linie-stark);border-radius:999px;padding:10px 20px;
  box-shadow:0 1px 0 rgba(245,242,235,.12) inset,0 8px 18px rgba(0,0,0,.35);
  transition:background .25s ease,transform .25s ease;
}
.fa-wk-knopf:hover{background:linear-gradient(180deg,rgba(245,242,235,.18),rgba(245,242,235,.05))}
.fa-wk-knopf:active{transform:translateY(1px)}
body.rm .fa-wk-knopf{transition:none}

/* ====================================== 5 — Ablauf (scrollgefuehrt, sticky) */
/* Die Gestaltung folgt einer INSTRUMENTENTAFEL: eine eingefasste Tafel mit
   Kopfzeile, Leinwand und Fortschrittsspur haftet mit, waehrend rechts die
   fuenf Schritte durchlaufen. Alles, was mitwandert, hat einen ruhigen
   Uebergang — und schaltet unter prefers-reduced-motion hart um. */
.fa-wk-ablauf{
  background:
    radial-gradient(64% 46% at 22% 34%,rgba(231,220,201,.07) 0%,rgba(231,220,201,0) 62%),
    linear-gradient(180deg,#1B1D16 0%,#232323 100%);
  padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,96px);
}
.fa-wk-ablauf-kopf{max-width:760px;margin:0 0 clamp(26px,3.5vw,42px)}
.fa-wk-ablauf-gitter{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.9fr);
  gap:clamp(22px,3.4vw,54px);align-items:start;
}
.fa-wk-ablauf-halt{position:sticky;top:88px}

/* Die Tafel: eingelassener Rahmen, Glanzkante oben, tiefer Schatten. */
.fa-wk-ablauf-tafel{
  position:relative;border-radius:22px;
  padding:clamp(14px,1.7vw,20px) clamp(14px,1.7vw,20px) clamp(12px,1.5vw,18px);
  background:linear-gradient(180deg,rgba(245,242,235,.055) 0%,rgba(245,242,235,.012) 42%,rgba(0,0,0,.16) 100%);
  border:1px solid var(--wk-linie);
  box-shadow:0 1px 0 rgba(245,242,235,.10) inset,0 22px 50px rgba(0,0,0,.42);
}
/* Kopfzeile: Nummer gross, Name in Anton, Formel rechts. Sie sagt in einem
   Blick, welcher Schritt gerade gilt — ohne dass man den Text daneben liest. */
.fa-wk-ablauf-zeile{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:0 14px;margin:0 2px clamp(11px,1.4vw,16px);
  border-bottom:1px solid var(--wk-linie);padding-bottom:clamp(9px,1.2vw,13px);
}
.fa-wk-ablauf-nr{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  font-size:clamp(26px,3.2vw,38px);line-height:1;color:var(--mondlicht);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(231,220,201,.35);
}
.fa-wk-ablauf-name{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(15px,1.7vw,20px);line-height:1.1;color:var(--creme);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fa-wk-ablauf-formel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.04em;color:#BFC2AC;white-space:nowrap;
}
.fa-wk-ablauf-buehne{aspect-ratio:16/10;min-height:250px;border-radius:15px}

/* Fortschrittsspur: fuenf Marken unter der Leinwand. Die durchlaufene
   Strecke ist heller — man sieht, wie weit die Geschichte gelaufen ist. */
.fa-wk-ablauf-spur{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin:clamp(13px,1.7vw,19px) 2px 0;padding:0;list-style:none;
}
.fa-wk-ablauf-spur::before{
  content:"";position:absolute;left:6%;right:6%;top:5px;height:1px;
  background:rgba(231,228,214,.18);
}
.fa-wk-ablauf-spur li{margin:0;min-width:0}
.fa-wk-spur-marke{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:none;text-align:center;color:inherit;
}
.fa-wk-spur-marke i{
  display:block;width:11px;height:11px;border-radius:50%;margin:0 auto;
  background:#3E4338;border:1px solid rgba(231,228,214,.32);
  transition:background .35s ease,box-shadow .35s ease,transform .35s ease;
}
/* Die Beschriftung darf UMBRECHEN. Mit nowrap wurde aus
   "Singulett-Sauerstoff" ein "Singulett-Sau…" — und damit stand da ein
   Wort, das es nicht gibt. */
.fa-wk-spur-marke span{
  display:block;margin-top:9px;padding:0 3px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:9.5px;letter-spacing:.045em;line-height:1.3;
  text-transform:uppercase;color:#9EA28A;
  overflow-wrap:anywhere;
  transition:color .35s ease;
}
.fa-wk-spur-marke:hover span,.fa-wk-spur-marke:focus-visible span{color:var(--mondlicht)}
.fa-wk-spur-marke:focus-visible{outline:2px solid var(--mondlicht);outline-offset:4px;border-radius:8px}
.fa-wk-spur-marke.vorbei i{background:#6E7460;border-color:rgba(231,228,214,.5)}
.fa-wk-spur-marke.an i{
  background:var(--mondlicht);transform:scale(1.28);
  box-shadow:0 0 0 4px rgba(231,220,201,.14),0 0 18px 4px rgba(231,220,201,.45);
}
.fa-wk-spur-marke.an span{color:var(--creme)}
body.rm .fa-wk-spur-marke i,body.rm .fa-wk-spur-marke span{transition:none}
@media (prefers-reduced-motion:reduce){
  .fa-wk-spur-marke i,.fa-wk-spur-marke span{transition:none}
}

.fa-wk-ablauf-fuss{
  margin:clamp(13px,1.6vw,18px) 0 0;text-align:center;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#B9BCA6;
}
.fa-wk-schritte{margin:0;padding:0;list-style:none;counter-reset:wkschritt}
.fa-wk-schritt{
  position:relative;padding:clamp(20px,3vw,30px) 0 clamp(20px,3vw,30px) clamp(46px,6vw,66px);
  border-top:1px solid var(--wk-linie);
}
.fa-wk-schritt:first-child{border-top:0}
.fa-wk-schritt::before{
  counter-increment:wkschritt;content:counter(wkschritt,decimal-leading-zero);
  position:absolute;left:0;top:clamp(20px,3vw,30px);
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.1em;color:#8E9279;
  width:clamp(30px,4vw,40px);text-align:left;
  transition:color .35s ease;
}
.fa-wk-schritt::after{
  content:"";position:absolute;left:clamp(34px,4.6vw,48px);top:clamp(22px,3vw,32px);
  width:7px;height:7px;border-radius:50%;background:#4C5142;
  transition:background .35s ease,box-shadow .35s ease,transform .35s ease;
}
.fa-wk-schritt.an::before{color:var(--mondlicht)}
.fa-wk-schritt.an::after{
  background:var(--mondlicht);transform:scale(1.25);
  box-shadow:0 0 0 4px rgba(231,220,201,.13),0 0 20px 4px rgba(231,220,201,.45);
}
/* Der gelesene Schritt bekommt eine Lichtkante links und einen Hauch Grund —
   so hebt er sich ab, ohne dass die uebrigen verschwinden. */
.fa-wk-schritt::marker{content:""}
.fa-wk-schritt .fa-wk-schritt-kante,
.fa-wk-schritt h3{position:relative}
.fa-wk-schritt.an{
  background:linear-gradient(90deg,rgba(231,220,201,.075),rgba(231,220,201,0) 62%);
  border-radius:0 14px 14px 0;
}
.fa-wk-schritt h3{
  margin:0 0 4px;font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(19px,2.3vw,26px);line-height:1.12;
  color:#9DA189;transition:color .35s ease;
}
.fa-wk-schritt.an h3{color:var(--creme)}
.fa-wk-schritt-unter{
  margin:0 0 8px;font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#A8AC93;
}
.fa-wk-schritt p.fa-wk-schritt-text{
  margin:8px 0 0;font-family:"Barlow",Arial,sans-serif;
  font-size:clamp(14.5px,1.5vw,16px);line-height:1.7;color:#CFCCC1;
  max-width:40em;
}
body.rm .fa-wk-schritt::before,body.rm .fa-wk-schritt::after,
body.rm .fa-wk-schritt h3{transition:none}
@media (prefers-reduced-motion:reduce){
  .fa-wk-schritt::before,.fa-wk-schritt::after,.fa-wk-schritt h3{transition:none}
}

/* ============================================ 6 — Spektrum (Welle ziehen) */
/* Der Abschnitt gefaellt — er war nur zu gross. Deshalb ist hier ALLES eine
   Nummer kleiner: schmalere Spalte, flachere Welle, niedrigere Schiene,
   ruhigere Ablesung. Inhalt und Bedienung bleiben unveraendert. */
.fa-wk-spektrum{
  background:linear-gradient(180deg,#232323 0%,#1A1C17 60%,#1E201B 100%);
  padding:clamp(40px,5vw,64px) 0;
}
.fa-wk-spektrum .fa-wk-innen{max-width:940px}
.fa-wk-spektrum-kopf{max-width:620px;margin:0 auto clamp(16px,2vw,24px);text-align:center}
.fa-wk-spektrum-kopf .fa-wk-ober{justify-content:center;margin-bottom:11px}
.fa-wk-spektrum-kopf .fa-wk-titel{font-size:clamp(25px,3.6vw,40px);margin-bottom:9px}
.fa-wk-spektrum-kopf .fa-wk-lede{
  margin-left:auto;margin-right:auto;margin-bottom:0;
  font-size:clamp(16px,1.8vw,19px);
}
.fa-wk-welle{aspect-ratio:40/9;min-height:132px;max-height:230px;border-radius:16px}

/* Die Schiene: eine eingelassene Rinne mit Skala und einem Griff darauf.
   Kein overflow:auto — der Griff ist absolut gesetzt und wuerde beschnitten. */
.fa-wk-schiene{
  position:relative;margin:16px 0 0;height:58px;
  border-radius:999px;
  background:linear-gradient(180deg,#101208 0%,#1D2019 45%,#2A2E24 100%);
  border:1px solid var(--wk-linie);
  box-shadow:0 3px 10px rgba(0,0,0,.6) inset,0 1px 0 rgba(245,242,235,.09);
  touch-action:none;cursor:ew-resize;
}
.fa-wk-schiene:focus-visible{outline:2px solid var(--mondlicht);outline-offset:4px}
.fa-wk-band{
  position:absolute;left:14px;right:14px;top:12px;height:13px;border-radius:7px;
  background:linear-gradient(90deg,
    #6C4FA8 0%, #4C63C8 12%, #3E9BB8 24%, #4FA85F 36%,
    #C9C35A 50%, #C97B3E 62%, #B24A3C 72%, #7A3630 82%, #4A3230 92%, #33302C 100%);
  box-shadow:0 0 20px rgba(0,0,0,.5) inset;
}
.fa-wk-band::after{
  content:"";position:absolute;inset:0;border-radius:7px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%);
}
.fa-wk-skala{
  position:absolute;left:14px;right:14px;bottom:6px;height:16px;
}
.fa-wk-skala span{
  position:absolute;top:0;transform:translateX(-50%);
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.1em;color:#D6D3C4;white-space:nowrap;
}
.fa-wk-skala span::before{
  content:"";position:absolute;left:50%;top:-7px;width:1px;height:5px;
  background:rgba(231,228,214,.45);
}
.fa-wk-griff{
  position:absolute;top:4px;width:22px;height:30px;border-radius:7px;
  transform:translateX(-50%);pointer-events:none;
  background:
    linear-gradient(90deg,#8F927C 0%,#E7DCC9 22%,#FFFDF6 42%,#D8CDB6 62%,#8F927C 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 6px rgba(0,0,0,.4) inset,
    0 10px 20px rgba(0,0,0,.55),
    0 0 26px 4px rgba(231,220,201,.28);
  border:1px solid rgba(0,0,0,.45);
}
.fa-wk-griff::after{
  content:"";position:absolute;left:50%;top:7px;bottom:7px;width:7px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.34) 0 1px,rgba(255,255,255,.2) 1px 3px);
  border-radius:2px;
}
.fa-wk-ablesung{margin:14px 0 0;text-align:center}
.fa-wk-ablesung-zeile{
  display:inline-flex;align-items:baseline;gap:13px;flex-wrap:wrap;
  justify-content:center;
}
.fa-wk-nm{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  font-size:clamp(24px,3.1vw,34px);line-height:1;color:var(--creme);
  font-variant-numeric:tabular-nums;
}
.fa-wk-nm sub{
  font-family:"Space Grotesk",Arial,sans-serif;font-size:.32em;
  letter-spacing:.2em;vertical-align:baseline;margin-left:6px;color:#B9BCA6;
}
.fa-wk-ablesung-name{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mondlicht);
}
.fa-wk-ablesung-text{
  margin:7px auto 0;font-family:"Barlow",Arial,sans-serif;
  font-size:clamp(14px,1.4vw,15.5px);line-height:1.6;color:#D6D2C6;
  max-width:44em;min-height:2.6em;
}
.fa-wk-spektrum .fa-wk-hinweis{margin-top:11px}

/* ============================================== 7 — Zahlen (Praegeplatten) */
.fa-wk-zahlen{
  background:linear-gradient(180deg,#1E201B 0%,#232323 100%);
  padding:clamp(52px,7vw,92px) 0;
}
.fa-wk-zahlen-kopf{max-width:700px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.fa-wk-zahlen-kopf .fa-wk-ober{justify-content:center}
.fa-wk-platten{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);margin:0;padding:0;list-style:none;
}
.fa-wk-platte{
  position:relative;border-radius:16px;padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,24px);
  background:
    linear-gradient(160deg,#2E322A 0%,#22251E 42%,#191C15 100%);
  border:1px solid rgba(231,228,214,.16);
  box-shadow:
    0 1px 0 rgba(245,242,235,.16) inset,
    0 -1px 0 rgba(0,0,0,.55) inset,
    0 18px 34px rgba(0,0,0,.45);
  overflow:hidden;
}
/* Gestreiftes Licht als zweite Ebene — nicht als filter, sondern als Flaeche. */
.fa-wk-platte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(245,242,235,0) 30%,rgba(245,242,235,.13) 46%,rgba(245,242,235,0) 60%);
}
.fa-wk-platte-zahl{
  display:block;font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  font-size:clamp(34px,4.4vw,54px);line-height:1;color:var(--creme);
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(245,242,235,.16);
}
.fa-wk-platte-zahl small{
  font-family:"Space Grotesk",Arial,sans-serif;font-size:.36em;
  letter-spacing:.1em;margin-left:7px;color:var(--mondlicht);
}
.fa-wk-platte-name{
  display:block;margin:12px 0 8px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#B9BCA6;
}
.fa-wk-platte-text{
  margin:0;font-family:"Barlow",Arial,sans-serif;
  font-size:14px;line-height:1.6;color:#CBC8BC;
}
.fa-wk-zahlen-fuss{
  margin:22px 0 0;text-align:center;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#9EA28A;
}

/* ================================================= 8 — Abschluss (Wissen) */
.fa-wk-schluss{
  background:
    radial-gradient(70% 90% at 50% 120%,rgba(86,94,76,.55) 0%,rgba(86,94,76,0) 65%),
    linear-gradient(180deg,#232323 0%,#1E211A 100%);
  padding:clamp(58px,7vw,104px) 0;text-align:center;
}
.fa-wk-schluss-teiler{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 0 26px;
}
.fa-wk-schluss-teiler span{
  display:block;height:1px;width:clamp(40px,10vw,120px);
  background:linear-gradient(90deg,rgba(231,220,201,0),rgba(231,220,201,.55));
}
.fa-wk-schluss-teiler span+span{background:linear-gradient(90deg,rgba(231,220,201,.55),rgba(231,220,201,0))}
.fa-wk-schluss-teiler i{
  width:7px;height:7px;border-radius:50%;background:var(--mondlicht);
  box-shadow:0 0 18px 4px rgba(231,220,201,.4);
}
.fa-wk-schluss-satz{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(20px,2.9vw,32px);line-height:1.48;color:var(--creme);
  max-width:24em;margin:0 auto clamp(26px,3.4vw,40px);
}
.fa-wk-schluss-satz b{font-style:normal;font-weight:600;color:var(--mondlicht)}
.fa-wk-schluss .fa-cta{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 32px;display:inline-block;
}

/* ===================================================== Schmale Bildschirme */
@media (max-width:900px){
  .fa-wk-ring-gitter{grid-template-columns:minmax(0,1fr)}
  /* Auf schmalen Bildschirmen KEIN Raster mehr, sondern ein Block.
     Grund: bei zwei Rasterzeilen ist der Haftbereich eines Rasterkindes nur
     seine eigene Zeile — die Grafik klebte genau eine Kachelhoehe lang und
     war danach weg. Als Blockkind haftet sie ueber die ganze Liste. */
  .fa-wk-ablauf-gitter{display:block}
  /* Flaeche des Abschnitts hier einfarbig: der haftende Kasten braucht einen
     DECKENDEN Grund, sonst liest man den darunter durchlaufenden Text mit.
     Ein Verlauf laesst sich nicht mitfuehren — also gibt es auf schmalen
     Bildschirmen keinen. */
  .fa-wk-ablauf{background:#1B1D16}
  .fa-wk-ablauf-halt{position:sticky;top:78px;z-index:3;
    padding:12px 0;background:#1B1D16;}
  .fa-wk-ablauf-halt::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:34px;
    background:linear-gradient(180deg,#1B1D16 30%,rgba(27,29,22,0));pointer-events:none;}
  /* Die Tafel darf auf schmalen Bildschirmen keinen eigenen Rahmen mehr
     haben: sie sitzt dann buendig im Grund des Abschnitts. */
  .fa-wk-ablauf-tafel{border:0;box-shadow:none;background:none;padding:0;border-radius:0}
  .fa-wk-platten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  /* war 18 px — brach die Flucht gegen alle anderen Abschnitte. */
  .fa-wk-ring-buehne{aspect-ratio:1/1;min-height:300px}
  .fa-wk-kammer-buehne{aspect-ratio:5/4;min-height:270px}
  .fa-wk-ablauf-buehne{aspect-ratio:4/3;min-height:210px}
  .fa-wk-welle{aspect-ratio:16/7;min-height:140px}
  .fa-wk-schiene{height:56px}
  .fa-wk-spur-marke span{font-size:8.5px;letter-spacing:.02em;padding:0 1px}
  .fa-wk-ablauf-zeile{grid-template-columns:auto 1fr;gap:0 10px}
  .fa-wk-ablauf-formel{grid-column:2;font-size:11px;text-align:left}
  /* Zwischen der Stationsliste des Auftakts und dem Satz der Bruecke klafften
     auf dem Handy rund 210 Bildpunkte Leere — mehr als ein Viertel
     Bildschirmhoehe, in der nichts steht. Sie kamen nicht von der Grafik,
     sondern aus vier Polstern hintereinander: Abschluss des Ringabschnitts,
     Anfang der Bruecke und darin noch Linie, Perle und deren Abstaende. Am
     Rechner ist das ein ruhiger Uebergang; auf 390 Bildpunkten reisst es die
     Erzaehlung auseinander. Hier wird es auf rund die Haelfte gezogen — die
     Bruecke bleibt als Zeichen erhalten, nur kuerzer. */
  .fa-wk-ring{padding-bottom:34px}
  .fa-wk-bruecke{padding-top:30px;padding-bottom:44px}
  .fa-wk-bruecke-linie{height:26px;margin-bottom:12px}
  .fa-wk-bruecke-perle{margin-bottom:16px}
  .fa-wk-marken{gap:8px 16px}
  .fa-wk-marken li{font-size:11px;letter-spacing:.1em}
  .fa-wk-platten{grid-template-columns:minmax(0,1fr)}
  .fa-wk-skala span:nth-child(even){display:none}
}

/* Mittig gesetzte Hinweiszeilen (Kammer, Spektrum) */
.fa-wk-mitte{text-align:center}
.fa-wk-ring-buehne:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}

/* ==================================================================
   18.08.2026 — was von der Startseite hierher gezogen ist
   ==================================================================
   Audit B1 und B2. Der Grund war nicht Optik, sondern Verteilung:
   diese Seite trug 880 Wörter, die Startseite 1.785 zum selben
   Thema. Zwei Seiten derselben Domain haben um denselben Begriff
   konkurriert — und die falsche hat gewonnen.

   Beide Blöcke benutzen die Kopfklassen der Seite (.fa-wk-ober,
   .fa-wk-titel, .fa-wk-lede) und setzen nur ihr eigenes Innenleben.
   Wer hier etwas ergänzt, tut dasselbe: keine zweite Titelschrift.
   ================================================================== */

/* ------------------------------- B1 · die fünf Karten von der Startseite */
.fa-lichtvertieft{
  background:linear-gradient(180deg,var(--wk-grund),var(--wk-tief));
  padding:clamp(56px,8vh,104px) 0;
}
.fa-lv-liste{
  list-style:none;margin:clamp(30px,3.6vw,44px) 0 0;padding:0;
  border-top:1px solid var(--wk-linie);
}
.fa-lv-stueck{
  display:grid;
  grid-template-columns:auto minmax(120px,150px) 1fr;
  gap:clamp(16px,2.4vw,34px);align-items:start;
  padding:clamp(24px,3vw,34px) 0;
  border-bottom:1px solid var(--wk-linie);
}
.fa-lv-nr{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.2em;color:#8E927C;padding-top:6px;
}
/* Die Zahl trägt die Karte — sie war auf der Startseite das Erste, was
   man gesehen hat, und soll es hier bleiben. Deshalb eigene Spalte und
   nicht als Auszeichnung im Fließtext. */
.fa-lv-zahl{
  margin:0;font-family:"Anton","Arial Narrow",sans-serif;
  font-size:clamp(30px,4.2vw,52px);line-height:.95;color:var(--mondlicht);
}
.fa-lv-zahl b{font-weight:400}
/* Wortgruppen statt Zahlen — "0 Zusätze", "Nanosekunden", "8 min 20 s".
   In Anton bei 52 px sprengt "additives" jede vertretbare Spaltenbreite.
   Die Stufe kommt aus dem Generator (Zeichenzahl), weil CSS nicht zählen
   kann. Zusätzlich overflow-wrap, damit auch ein unerwartet langes Wort
   umbricht statt in den Nachbartext zu laufen. */
.fa-lv-zahl{overflow-wrap:break-word;hyphens:none}
.fa-lv-mittel{font-size:clamp(22px,2.9vw,34px);line-height:1.04}
.fa-lv-lang{font-size:clamp(18px,2.2vw,26px);line-height:1.08;letter-spacing:.01em}
.fa-lv-zahl i{
  font-family:"Space Grotesk",sans-serif;font-style:normal;
  font-size:.34em;letter-spacing:.06em;margin-left:.18em;color:#B9BCA6;
}
.fa-lv-ober{
  margin:0 0 8px;font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:#9EA28A;
}
.fa-lv-bt{
  margin:0 0 10px;font-family:"Space Grotesk",sans-serif;font-weight:400;
  font-size:clamp(18px,2vw,23px);line-height:1.24;color:var(--creme);
}
.fa-lv-tx{
  margin:0;font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(14.5px,1.4vw,16px);line-height:1.74;color:#DDD9CD;
  /* 56em waren gemessen 112 Zeichen je Zeile. Über etwa 80 verliert das
     Auge beim Rücksprung die Spur. In bewegung.css stand die Korrektur
     schon — sie hat aber nie gegriffen, weil dieses Blatt SPÄTER geladen
     wird und bei gleicher Spezifität die spätere Regel gewinnt.
     Deshalb hier, an der Quelle. */
  max-width:38em;
}
@media (max-width:760px){
  /* Drei Spalten auf dem Handy lassen für den Text 90 px übrig.
     Nummer und Zahl rücken deshalb in eine gemeinsame Kopfzeile. */
  .fa-lv-stueck{grid-template-columns:auto 1fr;gap:10px 16px}
  .fa-lv-zahl{grid-column:2;font-size:clamp(26px,9vw,38px)}
  .fa-lv-text{grid-column:1 / -1;margin-top:6px}
}

/* --------------------------------------- B2 · Warburg von der Startseite */
.fa-warburgvertieft{
  background:var(--wk-grund);
  padding:clamp(56px,8vh,104px) 0;
  border-top:1px solid var(--wk-linie);
}
.fa-warburgvertieft .fa-wk-titel{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  text-transform:none;letter-spacing:-.01em;
  font-size:clamp(26px,3.6vw,44px);line-height:1.18;
}
.fa-warburgvertieft .fa-wk-titel em{font-size:1em;font-style:italic}
.fa-wv-zitat{
  margin:clamp(26px,3.2vw,38px) 0;padding:clamp(24px,3vw,34px);
  border:1px solid var(--wk-linie-stark);border-radius:3px;
  background:rgba(47,52,40,.4);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(22px,3vw,36px);line-height:1.16;color:var(--creme);
  hyphens:none;text-wrap:balance;
}
.fa-wv-quelle{
  display:block;margin-top:18px;font-family:"Space Grotesk",sans-serif;
  font-style:normal;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:#9EA28A;
}
.fa-wv-raster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(20px,2.6vw,34px);
}
.fa-wv-gedanke{
  padding-top:16px;border-top:1px solid var(--wk-linie);
}
.fa-wv-nr{
  display:block;margin-bottom:10px;font-family:"Space Grotesk",sans-serif;
  font-size:11.5px;letter-spacing:.2em;color:#8E927C;
}
.fa-wv-bt{
  margin:0 0 10px;font-family:"Space Grotesk",sans-serif;font-weight:400;
  font-size:clamp(17px,1.8vw,21px);line-height:1.26;color:var(--creme);
}
.fa-wv-tx{
  margin:0 0 12px;font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(14px,1.4vw,15.5px);line-height:1.74;color:#DDD9CD;
}
.fa-wv-tx:last-child{margin-bottom:0}
.fa-wv-tx b{color:var(--creme);font-weight:600}
/* Die Quellenangabe steht kleiner und abgesetzt — sie ist Beleg, nicht
   Argument. Wegfallen darf sie trotzdem nie: sie ist der Grund, warum
   wir einen Nobelpreisträger überhaupt zitieren dürfen. */
.fa-wv-belegt{
  margin-top:clamp(28px,3.4vw,40px);padding-top:18px;
  border-top:1px solid var(--wk-linie);max-width:76ch;
}
.fa-wv-belegt .fa-wv-tx{font-size:13px;color:#B9BCA6}

/* ------------------------------- Die Kammer auf der Startseite (18.08.)
   Dieselbe Szene wie auf /wirkungsweise, nur knapper gerahmt: dort ist sie
   ein Kapitel in einer Erklärung, hier ein Blick ins Gerät zwischen
   Verkaufsabschnitten. Deshalb weniger Luft oben und unten und ein Weg
   weiter statt einer Fortsetzung. */
.fa-kammer-start{padding-block:clamp(48px,6vh,86px)}
.fa-kammer-start .fa-wk-titel{font-size:clamp(28px,4.4vw,50px)}
.fa-kammer-weiter{margin:22px 0 0;text-align:center}
/* Die Bühne zeigt an, dass man sie anfassen darf. cursor:grab steht schon
   an .fa-wk-kammer-buehne; hier nur der Fokusring für die Tastatur, damit
   auch ohne Maus sichtbar ist, was gerade bedient wird. */
.fa-kammer-start .fa-wk-kammer-buehne:focus-visible{
  outline:2px solid var(--mondlicht);outline-offset:3px;
}
@media (max-width:700px){
  .fa-kammer-start{padding-block:clamp(38px,7vw,56px)}
}