/* ══════════════════════════════════════════════════════════════════════════
   websites-lese.css — Der Leseteil des Websites-Reiters

   ── Was hier vorher stand und warum es weg ist ────────────────────────────
   Die erste Fassung war ein Zeitungssatz: Papier, eine Spalte, viele
   Haarlinien, kleine Kästen mit kleinen Beschriftungen. Jedes Element hatte
   einen Rahmen, und weil alles einen Rahmen hatte, trug keiner mehr etwas.
   Das liest sich billig, obwohl jede einzelne Regel begründet war.

   ── Die neue Sprache: FILMISCH IN LEINEN ─────────────────────────────────
   Dieselbe Haltung wie Entwurf 04 der Stilkarten — große Flächen, Tiefe,
   wenig Text je Bild —, nur nicht in Nacht, sondern in den Leinentönen des
   Hauses. Vier Regeln:

   1 · TIEFE STATT RAHMEN. Gegliedert wird durch Tonwert und Schatten, nicht
       durch Linien. Eine Haarlinie gibt es nur da, wo sie eine Messung trennt
       (Tabellenzeilen) — dort ist sie Information, nicht Dekoration.
   2 · RANDLOSE FELDER. Die Tonwechsel gehen von Kante zu Kante. Ein Kasten
       im Satz wirkt wie ein Aufkleber; ein Feld über die ganze Breite wirkt
       wie ein Raum.
   3 · EINE MITTE. Der Satz steht auf einer Achse, mittig im Blatt, mit einem
       Maß von 66 Zeichen. Figuren nehmen das volle Maß und stehen auf
       derselben Achse — nichts sitzt mehr zufällig links oder rechts.
   4 · MASSSTAB. Eine große Sache je Bild: die Ziffer des Kapitels, die Zahl
       der Rechnung, die Reihe der Striche. Alles andere wird kleiner, damit
       das eine groß sein darf.

   Farbe entsteht auf dieser Seite genau EINMAL, am Ring. Der Leseteil arbeitet
   in drei Leinentönen, Tinte und einem kalten Grau als Akzent. Kein #FFF, kein
   #000 — wer eins von beiden braucht, hat die falsche Fläche.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ Der Leseteil ══════════════════════════════════════════════════════════ */
.wb-lese{position:relative;z-index:1;isolation:isolate;
  /* Die Kapitelplatten gehen von Kante zu Kante (margin-inline:calc(50% - 50vw)).
     50vw zählt die Bildlaufleiste mit, das Dokument nicht — ohne diese Zeile
     ragen sie um deren Breite hinaus und erzeugen ein waagerechtes Rollen.
     clip statt hidden: es macht keinen Rollcontainer und lässt position:sticky
     in Ruhe. */
  overflow-x:clip;
  /* Drei Leinentöne. Der tiefste ist kein Grau, sondern wärmer als das
     Papier — sonst kippt die Seite ins Technische. */
  --leinen:      #F0EEE7;
  --leinen-tief: #E4E0D4;
  --leinen-satt: #D8D3C4;
  --tinte:       #14120F;
  --leise:       rgba(20,18,15,.62);
  --acc:         #56607097;
  --acc-voll:    #3C4654;
  --kante:       rgba(20,18,15,.10);
  /* Die Spalte. Jede Achse der Seite hängt hier — wer ein zweites Maß
     einführt, bekommt eine zweite Kante und damit den alten Fehler zurück. */
  --satz:        min(52rem,100%);
  --schatten:    0 30px 70px -44px rgba(34,28,20,.55);
  --schatten-tief:0 44px 90px -50px rgba(34,28,20,.62);
  interpolate-size:allow-keywords}

/* Die Naht zum Ring: ein Pixel in der Farbe, die dort entstanden ist. Der
   Leseteil erbt den Moment, statt einen zweiten zu behaupten. */
.wb-l-naht{display:block;height:1px;background:var(--nadel);
  position:relative;z-index:2}

/* Randlose Tonfelder. Der Wechsel Papier → Leinen → Papier gliedert die drei
   Abschnitte; innerhalb eines Abschnitts wechselt nichts mehr. */
.wb-l-seite{position:relative;
  padding-block:clamp(72px,13vh,168px);
  scroll-margin-top:96px;
  background:var(--leinen);color:var(--tinte)}
.wb-l-seite[data-ton="leinen"]{background:var(--leinen-tief)}
.wb-l-innen{max-width:min(1180px,calc(100% - 2 * var(--rand)));
  margin-inline:auto}

/* Eine Achse: der Satz steht mittig im Blatt, das Maß bleibt bei 66 Zeichen. */
.wb-l-text{max-width:var(--satz);margin-inline:auto;
  display:flex;flex-direction:column;gap:clamp(18px,2.4vh,30px)}
.wb-lese p{margin:0;font:400 clamp(1.02rem,.99rem + .28vw,1.16rem)/1.75 var(--f-b);
  color:var(--leise);text-wrap:pretty}
.wb-lese .wb-l-text strong,.wb-lese .wb-l-hervor strong{font-weight:600;
  color:var(--tinte)}

/* Verweise: Tinte mit einer Linie, die auf Berührung dicker wird. Kein Blau im
   Satz — das Blau gehört dem Ring. */
.wb-lese a{color:var(--tinte);text-decoration:none;
  background-image:linear-gradient(var(--acc-voll),var(--acc-voll));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .2s var(--ease),color .2s var(--ease)}
.wb-lese a:hover{background-size:100% 2px;color:var(--acc-voll)}
.wb-lese :focus-visible{outline:2px solid var(--acc-voll);outline-offset:3px}


/* ══ Abschnittskopf ════════════════════════════════════════════════════════
   Groß, mittig, viel Luft. Ein Abschnitt beginnt mit einer Behauptung und
   nicht mit einer Kachel. */
.wb-l-kopf{max-width:min(50ch,100%);margin-inline:auto;
  margin-bottom:clamp(56px,9vh,120px);text-align:center}
.wb-lese .wb-aufschrift{margin:0 0 clamp(18px,2.6vh,28px);
  font:400 var(--t-mark)/1 var(--f-m);letter-spacing:.24em;
  text-transform:uppercase;color:var(--acc-voll)}
.wb-lese h2{margin:0;
  font:400 clamp(2rem,1.4rem + 3.2vw,4.2rem)/1.02
    'Source Serif 4',Georgia,serif;
  letter-spacing:-.02em;color:var(--tinte);text-wrap:balance}
.wb-l-lead{margin:clamp(22px,3vh,34px) auto 0!important;max-width:48ch;
  font:400 clamp(1.12rem,1.05rem + .5vw,1.4rem)/1.5 var(--f-b)!important;
  color:var(--leise)!important}
/* margin-bottom mit !important, nicht die Regel darunter: .wb-l-wege setzt
   weiter unten sein eigenes margin:0 auto und gewinnt bei gleicher
   Spezifit\u00e4t durch die Reihenfolge — die \u00dcberschrift klebte dadurch ohne
   Abstand auf dem ersten Kartenbild. */
.wb-l-h2-zweit{margin-top:clamp(96px,15vh,190px)!important;
  margin-bottom:clamp(40px,6vh,76px)!important;text-align:center}
.wb-l-h2-zweit + *{margin-top:0}


/* ══ Kapitel ═══════════════════════════════════════════════════════════════ */
.wb-l-kap{position:relative;
  padding-top:clamp(56px,9vh,120px);margin-top:clamp(56px,9vh,120px)}
.wb-l-kap:first-of-type{margin-top:0;padding-top:0}

/* ── Die Kapitelplatte ───────────────────────────────────────────────────
   Randlos über die ganze Breite, im satteren Ton, mit einer Ziffer, die über
   die rechte Kante hinausläuft. Das ist der filmische Auftritt: eine Fläche,
   eine Zahl, ein Titel — und der Rest der Seite hält den Atem an.

   Die Ziffer ist Kontur, nicht Fläche: gefüllt wäre sie ein Logo, als Kontur
   ist sie eine Gravur im Leinen. Sie wandert langsam mit dem Rollen (--kap-fort
   kommt vom Skript), 40 px auf die ganze Kapitelhöhe — genug für Tiefe, wenig
   genug, dass niemand eine Animation sieht. */
.wb-l-platte{position:relative;isolation:isolate;overflow:hidden;
  margin:0 0 clamp(44px,7vh,88px);
  /* Randlos: das Feld sprengt die Innenspalte bis zur Fensterkante. */
  margin-inline:calc(50% - 50vw);
  padding:clamp(52px,9vh,116px) var(--rand) clamp(48px,8vh,104px);
  background:var(--leinen-satt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -1px 0 rgba(20,18,15,.06)}
.wb-l-seite[data-ton="leinen"] .wb-l-platte{background:var(--leinen)}
.wb-l-platte-geist{position:absolute;right:-.06em;bottom:-.24em;z-index:0;
  pointer-events:none;
  font:300 clamp(9rem,26vw,26rem)/.72 var(--f-b);letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in oklab,var(--tinte) 12%,transparent);
  opacity:0;translate:0 30px;
  transition:opacity 1.2s var(--ease) .1s,translate 1.2s var(--ease) .1s}
.wb-l-platte[data-sicht="ja"] .wb-l-platte-geist{opacity:1;
  translate:0 calc(var(--kap-fort,0) * -40px)}
.wb-l-platte-kennung{position:relative;z-index:1;
  max-width:var(--satz);margin:0 auto clamp(16px,2.4vh,26px)!important;
  font:400 var(--t-mark)/1 var(--f-m)!important;letter-spacing:.24em;
  text-transform:uppercase;color:var(--acc-voll)!important}
.wb-lese .wb-l-platte h3{position:relative;z-index:1;margin-inline:auto;
  margin-block:0;max-width:var(--satz);
  font:400 clamp(2.2rem,1.6rem + 3.4vw,4.6rem)/1
    'Source Serif 4',Georgia,serif;
  letter-spacing:-.022em;color:var(--tinte)}
.wb-lese .wb-l-platte h3 .wb-l-nr{display:none}
/* Der Strich unter der Platte wird gezogen: die einzige Linie, die hier
   erlaubt ist, weil sie eine Bewegung ist und kein Rahmen. */
.wb-l-platte-strich{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--tinte);transform-origin:left;transform:scaleX(0);
  transition:transform 1.4s var(--ease) .15s}
.wb-l-platte[data-sicht="ja"] .wb-l-platte-strich{transform:scaleX(1)}

/* Zwischenbeschriftung: mittig, klein, ohne Linie. Sie ordnet, sie trennt
   nicht — dafür ist der Abstand da. */
.wb-l-teilkopf{max-width:var(--satz);
  margin:clamp(56px,8vh,104px) auto clamp(20px,3vh,34px)!important;
  text-align:center;
  font:400 var(--t-mark)/1.4 var(--f-m)!important;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc-voll)!important}

/* Text neben Figur: ab 1100 px zwei Spalten, sonst untereinander. */
.wb-l-spalten{display:grid;gap:clamp(30px,4vw,64px);align-items:center;
  max-width:1180px;margin:clamp(30px,4.4vh,56px) auto 0}
@media (min-width:1100px){
  .wb-l-spalten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wb-l-spalten .wb-l-text{max-width:52ch;margin:0}
}


/* ══ Datenblätter ══════════════════════════════════════════════════════════
   Hier bleibt die Haarlinie: sie trennt Messwerte, das ist ihre Arbeit. Alles
   andere ist Tonwert. Zahlen in der Schreibmaschine mit gleicher
   Ziffernbreite, damit Spalten stehen. */
.wb-l-tab{width:100%;max-width:var(--satz);
  margin:clamp(30px,4.4vh,56px) auto 0;
  border-collapse:collapse;text-align:left;
  font-variant-numeric:tabular-nums}
.wb-l-tab caption{margin-bottom:1.2em;text-align:center;
  font:400 var(--t-mark)/1 var(--f-m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc-voll)}
.wb-l-tab th,.wb-l-tab td{padding:clamp(14px,1.9vh,20px) clamp(8px,1.2vw,16px);
  border-bottom:1px solid var(--kante);vertical-align:baseline}
.wb-l-tab tbody tr:first-child th,
.wb-l-tab tbody tr:first-child td{border-top:1px solid var(--kante)}
.wb-l-tab th[scope="row"]{font:400 1.02rem/1.4 var(--f-b);color:var(--leise);
  padding-left:0}
.wb-l-tab td{font:400 1.02rem/1.4 var(--f-m);color:var(--tinte);
  text-align:right;white-space:nowrap;padding-right:0}
.wb-l-tab td strong{font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem)}
.wb-l-tab-mess td{white-space:normal}
/* Beim Überfahren bekommt die Zeile ihren Ton und der Wert tritt heraus.
   So liest man eine lange Reihe ohne Zebra. */
.wb-l-tab tbody tr{transition:background-color .22s var(--ease)}
.wb-l-tab tbody tr:hover{background:color-mix(in oklab,var(--tinte) 4%,transparent)}
.wb-l-tab tbody tr:hover th[scope="row"]{color:var(--tinte)}
.wb-l-tab tbody td{transition:translate .25s var(--ease)}
.wb-l-tab tbody tr:hover td{translate:-5px 0}
.wb-l-tab-preis td{font-size:clamp(1.1rem,1rem + .6vw,1.45rem)}
.wb-l-tab-preis [data-zahl]{white-space:nowrap}


/* ══ Der hervorgehobene Satz ═══════════════════════════════════════════════
   Kein Kasten, keine Linie links: eine eigene Fläche in satterem Leinen, über
   die ganze Innenbreite, groß gesetzt. Der Satz IST der Befund, also bekommt
   er den Raum eines Befunds. */
.wb-l-hervor{max-width:min(52ch,100%)!important;
  margin:clamp(44px,6.6vh,84px) auto!important;
  padding:clamp(30px,4.4vw,56px)!important;text-align:center;
  background:var(--leinen-satt);box-shadow:var(--schatten);
  font:400 clamp(1.24rem,1.1rem + 1vw,1.85rem)/1.42
    'Source Serif 4',Georgia,serif!important;
  color:var(--tinte)!important}
.wb-l-seite[data-ton="leinen"] .wb-l-hervor{background:var(--leinen)}


/* ══ Instrument 1 · Die Rechnung ═══════════════════════════════════════════
   Filmisch heißt hier: eine Fläche, eine große Zahl, drei Regler darunter. Die
   Zahl steht mittig auf eigener Achse — vorher hing sie links unter der
   Zwischenüberschrift und sah aus wie ein verrutschter Absatz.

   Drei Regler, weil zwei die Abschlussquote verschweigen und damit lügen. */
.wb-l-rechner{max-width:min(960px,100%);
  margin:clamp(36px,5.4vh,72px) auto 0;padding:0;
  background:var(--leinen-satt);box-shadow:var(--schatten-tief)}
.wb-l-seite[data-ton="leinen"] .wb-l-rechner{background:var(--leinen)}
.wb-l-rechner figcaption{margin:0;
  padding:clamp(20px,3vh,32px) clamp(24px,3.4vw,48px) 0;text-align:center;
  font:400 var(--t-mark)/1.4 var(--f-m);letter-spacing:.22em;
  text-transform:uppercase;color:var(--acc-voll)}
.wb-l-rechner-tafel{padding:clamp(14px,2vh,22px) clamp(24px,3.4vw,48px)
  clamp(22px,3.2vh,34px);
  display:grid;gap:clamp(12px,1.8vh,20px);justify-items:center}
.wb-l-rechner-zahl{display:flex;align-items:baseline;gap:.34em;
  margin:0!important;
  font:400 clamp(3.4rem,2.4rem + 7vw,8rem)/.9 var(--f-b)!important;
  letter-spacing:-.03em;color:var(--tinte)!important;
  font-variant-numeric:tabular-nums}
.wb-l-rechner-zahl i{font-style:normal;
  font:400 var(--t-mark)/1 var(--f-m);letter-spacing:.18em;
  text-transform:uppercase;color:var(--leise)}
.wb-l-rechner-balken{display:block;width:min(560px,100%);height:3px;
  background:color-mix(in oklab,var(--tinte) 10%,transparent);overflow:hidden}
.wb-l-rechner-balken i{display:block;height:100%;background:var(--acc-voll);
  width:var(--fuell,0%);transition:width .3s var(--ease)}
.wb-l-rechner-fuss{margin:0!important;text-align:center;max-width:44ch;
  font-size:.94rem!important;line-height:1.55!important;
  color:var(--leise)!important}

/* Die Regler: eine Reihe zu drei, im tieferen Ton abgesetzt — sie sind das
   Bedienfeld unter der Anzeige, nicht Teil der Anzeige. */
.wb-l-rechner-regler{display:grid;gap:clamp(20px,2.6vw,38px);
  padding:clamp(22px,3.2vh,34px) clamp(24px,3.4vw,48px);
  background:color-mix(in oklab,var(--tinte) 5%,transparent)}
@media (min-width:820px){
  .wb-l-rechner-regler[data-reihe="drei"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.wb-l-rechner-regler label{display:grid;
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
  gap:6px 12px;align-items:baseline}
.wb-l-rechner-marke{grid-column:1;grid-row:1;
  font:400 .8rem/1.3 var(--f-b);color:rgba(20,18,15,.82)}
.wb-l-rechner-regler output{grid-column:2;grid-row:1;justify-self:end;
  white-space:nowrap;font:400 .95rem/1.3 var(--f-m);color:var(--tinte);
  font-variant-numeric:tabular-nums}
.wb-l-rechner-regler input[type="range"]{grid-column:1/-1;grid-row:2;
  appearance:none;-webkit-appearance:none;width:100%;height:20px;
  background:none;cursor:ew-resize}
.wb-l-rechner-regler input[type="range"]::-webkit-slider-runnable-track{
  height:2px;background:color-mix(in oklab,var(--tinte) 16%,transparent)}
.wb-l-rechner-regler input[type="range"]::-moz-range-track{
  height:2px;background:color-mix(in oklab,var(--tinte) 16%,transparent)}
.wb-l-rechner-regler input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;margin-top:-7px;
  border-radius:50%;background:var(--tinte);border:0;
  transition:background-color .2s var(--ease),scale .2s var(--ease)}
.wb-l-rechner-regler input[type="range"]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--tinte);border:0}
.wb-l-rechner-regler input[type="range"]:hover::-webkit-slider-thumb,
.wb-l-rechner-regler input[type="range"]:focus-visible::-webkit-slider-thumb{
  background:var(--acc-voll);scale:1.2}


/* ══ Figur · Vierzig Striche ════════════════════════════════════════════════
   Groß, randlos, im satteren Ton. Vierzig stellen sich auf, neun fallen nach
   kurzem Stehen zurück und liegen blass unten. Man SIEHT die verlorenen
   Aufträge wegfallen — deshalb existiert die Figur; ein Balkendiagramm hätte
   dieselbe Zahl und keine Aussage. */
.wb-l-zaehl{margin:0;padding:clamp(26px,3.6vw,44px);
  background:var(--leinen-satt);box-shadow:var(--schatten);
  container-type:inline-size;overflow:hidden}
.wb-l-seite[data-ton="leinen"] .wb-l-zaehl{background:var(--leinen)}
.wb-l-striche{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));
  align-items:end;gap:min(1.2cqi,6px);height:clamp(110px,17vw,190px)}
.wb-l-striche i{width:100%;height:100%;background:var(--tinte);
  transform-origin:bottom;transform:scaleY(0)}
.wb-l-zaehl-fuss{display:flex;align-items:baseline;gap:.8em;
  margin-top:clamp(20px,2.8vh,30px);opacity:0}
.wb-l-zaehl-zahl{font:400 clamp(2.6rem,1.8rem + 3.4vw,4.6rem)/.9 var(--f-b);
  letter-spacing:-.03em;color:var(--tinte);font-variant-numeric:tabular-nums}
.wb-l-zaehl-wort{font:400 var(--t-mark)/1.4 var(--f-m);letter-spacing:.16em;
  text-transform:uppercase;color:var(--leise)}
.wb-l-zaehl[data-sicht="ja"] .wb-l-striche i{
  animation:wb-l-steh .5s var(--ease) calc(var(--i) * 22ms) both}
.wb-l-zaehl[data-sicht="ja"] .wb-l-striche i[data-fall]{
  animation:wb-l-fall 1.1s var(--ease) calc(var(--i) * 22ms) both}
.wb-l-zaehl[data-sicht="ja"] .wb-l-zaehl-fuss{
  animation:wb-l-auf .7s var(--ease) 1.6s both}
@keyframes wb-l-steh{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Zwei Phasen in EINER Kurve: aufstellen, kurz stehen, zurückfallen. Als zwei
   Übergänge geschrieben stünden die neun nie oben — der zweite überschriebe
   das Ziel des ersten, bevor er läuft. */
@keyframes wb-l-fall{
  0%{transform:scaleY(0);opacity:1}
  30%{transform:scaleY(1);opacity:1}
  56%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(.1);opacity:.34}
}
@keyframes wb-l-auf{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}


/* ══ Figur · Die zwei Vokabulare ═══════════════════════════════════════════
   Zwei Säulen fahren aufeinander zu und gehen aneinander vorbei; in der Mitte
   bleibt ein Spalt. Die Bewegung IST der Befund. Rechts steht die
   Schreibmaschine: das ist getippt, nicht gewählt. */
.wb-l-vokabel{position:relative;max-width:min(880px,100%);
  margin:clamp(36px,5.4vh,72px) auto 0;
  padding:clamp(24px,3.4vw,44px);overflow:hidden;
  background:var(--leinen-satt);box-shadow:var(--schatten)}
.wb-l-seite[data-ton="leinen"] .wb-l-vokabel{background:var(--leinen)}
.wb-l-tab-zwei{width:100%;max-width:none;margin:0;table-layout:fixed}
.wb-l-tab-zwei th[scope="col"]{padding:0 0 clamp(16px,2.2vh,22px);
  font:400 var(--t-mark)/1.3 var(--f-m);letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc-voll);
  border-bottom:1px solid var(--kante)}
.wb-l-tab-zwei thead th:first-child{text-align:right;
  padding-right:clamp(16px,3.4vw,44px)}
.wb-l-tab-zwei thead th:last-child{text-align:left;
  padding-left:clamp(16px,3.4vw,44px)}
.wb-l-tab-zwei td{border-bottom:1px solid var(--kante);white-space:normal;
  padding-block:clamp(12px,1.7vh,18px)}
.wb-l-tab-zwei td span{display:block}
.wb-l-tab-zwei td[data-s="links"]{text-align:right;
  padding-right:clamp(16px,3.4vw,44px);padding-left:0;
  font-family:var(--f-b);color:var(--tinte)}
.wb-l-tab-zwei td[data-s="rechts"]{text-align:left;
  padding-left:clamp(16px,3.4vw,44px);padding-right:0;
  font-family:var(--f-m);font-size:.95em;color:var(--leise)}
.wb-l-tab-zwei tbody tr:hover{background:none}
.wb-l-tab-zwei tbody tr:hover td{translate:0 0}
.wb-l-spalt{position:absolute;top:clamp(24px,3.4vw,44px);
  bottom:clamp(24px,3.4vw,44px);left:50%;width:1px;background:var(--acc-voll);
  transform:scaleY(0);transform-origin:top}
.wb-l-vokabel td[data-s="links"] span{transform:translateX(-24px);opacity:0}
.wb-l-vokabel td[data-s="rechts"] span{transform:translateX(24px);opacity:0}
.wb-l-vokabel[data-sicht="ja"] td span{transform:none;opacity:1;
  transition:transform .85s var(--ease) calc(.15s + var(--r,0) * 95ms),
             opacity .85s var(--ease) calc(.15s + var(--r,0) * 95ms)}
.wb-l-vokabel[data-sicht="ja"] .wb-l-spalt{transform:scaleY(1);
  transition:transform .95s var(--ease) .55s}
/* Ein Streiflicht wandert EINMAL über die Mittellinie, wenn die Figur
   erscheint: der Blick soll dorthin, wo die Vokabulare aneinander vorbeigehen.
   Eine Schleife wäre Dekoration. */
.wb-l-vokabel::after{content:"";position:absolute;top:0;bottom:0;left:0;
  width:40%;pointer-events:none;opacity:0;
  translate:-110% 0;
  background:linear-gradient(90deg,transparent,
    rgba(255,255,255,.5),transparent)}
.wb-l-vokabel[data-sicht="ja"]::after{
  animation:wb-l-streif 1.6s var(--ease) .5s both}
@keyframes wb-l-streif{
  0%{translate:-110% 0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{translate:255% 0;opacity:0}
}


/* ══ Figur · Der Plan ══════════════════════════════════════════════════════
   Rahmen, Kästen, Wege, Rechtsmarken — und bleibt grau. Der Farbschlag gehört
   dem Ring; zwei Farbmomente auf einer Seite heben sich gegenseitig auf. */
.wb-l-plan{max-width:min(820px,100%);margin:clamp(36px,5.4vh,72px) auto 0;
  padding:clamp(26px,3.6vw,48px);
  background:var(--leinen-satt);box-shadow:var(--schatten)}
.wb-l-seite[data-ton="leinen"] .wb-l-plan{background:var(--leinen)}
.wb-l-plan svg{display:block;width:100%;height:auto}
.wb-l-plan-rahmen{fill:none;stroke:var(--kante);stroke-width:1;
  stroke-dasharray:1290;stroke-dashoffset:1290}
.wb-l-plan-kasten{fill:color-mix(in oklab,var(--tinte) 7%,transparent);
  stroke:var(--leise);stroke-width:.7;opacity:0;
  transform-box:fill-box;transform-origin:top;transform:scaleY(.86)}
.wb-l-plan-weg{fill:none;stroke:var(--acc-voll);stroke-width:1.2;
  stroke-dasharray:210;stroke-dashoffset:210}
.wb-l-plan-marken circle{fill:var(--tinte);opacity:0}
.wb-l-plan[data-sicht="ja"] .wb-l-plan-rahmen{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s var(--ease)}
.wb-l-plan[data-sicht="ja"] .wb-l-plan-kasten{opacity:1;transform:none;
  transition:opacity .55s var(--ease) calc(.55s + var(--i) * .1s),
             transform .55s var(--ease) calc(.55s + var(--i) * .1s)}
.wb-l-plan[data-sicht="ja"] .wb-l-plan-weg{stroke-dashoffset:0;
  transition:stroke-dashoffset .75s var(--ease) calc(1.15s + var(--i) * .13s)}
.wb-l-plan[data-sicht="ja"] .wb-l-plan-marken circle{opacity:1;
  transition:opacity .45s var(--ease) calc(1.6s + var(--i) * .1s)}


/* ══ Die zwei Listen ═══════════════════════════════════════════════════════ */
.wb-l-listen{max-width:min(860px,100%);margin:clamp(36px,5.4vh,72px) auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:clamp(28px,4vw,64px)}
.wb-l-listen-kopf{margin:0 0 clamp(14px,2vh,20px)!important;
  font:400 var(--t-mark)/1 var(--f-m)!important;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc-voll)!important}
.wb-l-listen ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column}
.wb-l-listen li{padding:clamp(11px,1.5vh,15px) 0;
  font:400 1.02rem/1.45 var(--f-b);color:var(--leise);
  border-bottom:1px solid var(--kante)}


/* ══ Randnotizen ═══════════════════════════════════════════════════════════
   Kein Kasten und kein Zettel unten rechts: ein kleiner, mittiger Nachsatz auf
   derselben Achse wie der Text, abgesetzt nur durch Größe und einen Punkt. */
.wb-l-rand{max-width:var(--satz);margin:clamp(34px,5vh,60px) auto 0;
  padding:0;background:none;border:0;text-align:center}
.wb-l-rand-titel{margin:0 0 .6em!important;
  font:400 var(--t-mark)/1 var(--f-m)!important;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc-voll)!important}
.wb-l-rand p{font-size:.98rem;line-height:1.62;max-width:none}


/* ══ Das Paket ═════════════════════════════════════════════════════════════
   Zehn Punkte, zwei Säulen, eine Raute als Marke. Kein Häkchen — ein Haken
   behauptet eine Prüfung, die niemand vorgenommen hat. */
.wb-l-paket{list-style:none;margin:0 auto;padding:0;
  max-width:min(920px,100%);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  column-gap:clamp(28px,5vw,80px)}
.wb-l-paket li{display:grid;grid-template-columns:.5em minmax(0,1fr);
  gap:.9em;align-items:baseline;padding:clamp(13px,1.8vh,18px) 0;
  border-bottom:1px solid var(--kante);
  font:400 1.04rem/1.45 var(--f-b);color:var(--tinte);
  opacity:0;translate:0 9px;
  transition:background-color .25s var(--ease),padding-left .25s var(--ease)}
.wb-l-paket li::before{content:"";grid-column:1;
  width:.44em;height:.44em;background:var(--acc-voll);
  transform:rotate(45deg) translateY(-.18em);
  transition:background-color .25s var(--ease),rotate .35s var(--ease)}
.wb-l-paket li:hover{padding-left:.5em}
.wb-l-paket li:hover::before{rotate:135deg}
.wb-l-paket[data-sicht="ja"] li{opacity:1;translate:0 0;
  transition:opacity .55s var(--ease) calc(var(--i) * 45ms),
             translate .55s var(--ease) calc(var(--i) * 45ms),
             padding-left .25s var(--ease)}
.wb-l-domain{margin:clamp(38px,5.4vh,64px) auto 0!important;text-align:center;
  font:400 clamp(1.15rem,1.05rem + .7vw,1.6rem)/1.4
    'Source Serif 4',Georgia,serif!important;color:var(--tinte)!important}
.wb-l-domain strong{font-weight:400}


/* ══ Der ehrliche Teil ═════════════════════════════════════════════════════
   Serife, eigene Fläche, KEINE Bewegung. Ein Absatz über eigene Fehler, der
   animiert wird, ist keiner. */
.wb-l-ehrlich{max-width:min(58ch,100%);margin-inline:auto;
  padding:clamp(40px,6vw,80px) clamp(28px,4.4vw,64px);
  background:var(--leinen-satt);box-shadow:var(--schatten-tief)}
.wb-l-seite[data-ton="leinen"] .wb-l-ehrlich{background:var(--leinen)}
.wb-lese .wb-l-ehrlich h2{font-size:clamp(1.7rem,1.3rem + 2vw,2.9rem);
  text-align:left}
.wb-l-ehrlich p{margin-top:clamp(20px,2.8vh,32px);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:clamp(1.1rem,1.02rem + .5vw,1.3rem);line-height:1.62;
  color:var(--tinte)}
.wb-l-ehrlich strong{font-weight:600}


/* ══ Die Fragen ════════════════════════════════════════════════════════════
   Native <details>: mit Tastatur bedienbar, ohne Skript, und die Überschrift
   bleibt eine echte h3. Die Marke rechts ist ein Kreuz aus zwei Linien — beim
   Öffnen legt sich der senkrechte Strich um. */
.wb-l-fragen{max-width:min(820px,100%);margin-inline:auto;
  border-top:1px solid var(--kante)}
.wb-l-frage{border-bottom:1px solid var(--kante);opacity:0;translate:0 9px}
.wb-l-fragen[data-sicht="ja"] .wb-l-frage{opacity:1;translate:0 0;
  transition:opacity .55s var(--ease) calc(var(--i) * 45ms),
             translate .55s var(--ease) calc(var(--i) * 45ms)}
.wb-l-frage summary{display:grid;
  grid-template-columns:minmax(0,1fr) 1.2em;column-gap:1.6em;align-items:center;
  padding:clamp(20px,2.8vh,28px) 0;cursor:pointer;list-style:none}
.wb-l-frage summary::-webkit-details-marker{display:none}
.wb-l-frage summary::marker{content:""}
.wb-lese .wb-l-frage summary h3{grid-column:1;grid-row:1;margin:0;
  font:400 clamp(1.06rem,1rem + .45vw,1.3rem)/1.35
    'Source Serif 4',Georgia,serif;color:var(--tinte)}
.wb-l-frage summary::before,
.wb-l-frage summary::after{content:"";grid-column:2;grid-row:1;
  align-self:center;justify-self:center;background:var(--acc-voll);
  transition:transform .35s var(--ease),background-color .25s var(--ease)}
.wb-l-frage summary::before{width:1px;height:1.2em}
.wb-l-frage summary::after{width:1.2em;height:1px}
.wb-l-frage[open] summary::before{transform:scaleY(0)}
.wb-l-frage summary:hover h3{color:var(--acc-voll)}
.wb-l-frage p{max-width:62ch;padding-bottom:clamp(20px,2.8vh,30px)}
@supports selector(::details-content){
  .wb-l-frage::details-content{block-size:0;overflow:hidden;
    transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .wb-l-frage[open]::details-content{block-size:auto}
}


/* ══ Die drei Wege ═════════════════════════════════════════════════════════
   Drei Flächen, keine Knöpfe. Beim Überfahren hebt sich die Fläche und der
   Pfeil geht los — die Karte kündigt die Richtung an. */
.wb-l-wege{list-style:none;margin:0 auto;padding:0;
  max-width:min(1100px,100%);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(16px,2.2vw,28px)}
.wb-l-wege li{opacity:0;translate:0 12px}
.wb-l-wege[data-sicht="ja"] li{opacity:1;translate:0 0;
  transition:opacity .6s var(--ease) calc(var(--i) * 90ms),
             translate .6s var(--ease) calc(var(--i) * 90ms)}
.wb-l-wege a{display:grid;gap:.6em;height:100%;
  padding:clamp(26px,3.4vw,40px);background:var(--leinen-satt);
  box-shadow:var(--schatten);background-image:none;
  color:inherit;text-decoration:none;
  transition:translate .3s var(--ease),box-shadow .3s var(--ease)}
.wb-l-seite[data-ton="leinen"] .wb-l-wege a{background:var(--leinen)}
.wb-l-wege a:hover{translate:0 -4px;box-shadow:var(--schatten-tief)}
.wb-l-wege b{font:400 clamp(1.1rem,1rem + .5vw,1.35rem)/1.3
  'Source Serif 4',Georgia,serif;color:var(--tinte)}
.wb-l-wege span{font:400 .98rem/1.55 var(--f-b);color:var(--leise)}
.wb-l-wege i{font-style:normal;font-family:var(--f-m);color:var(--acc-voll);
  justify-self:start;margin-top:.4em;
  transition:translate .3s var(--ease)}
.wb-l-wege a:hover i{translate:8px 0}


/* ══ Die Messleiste ════════════════════════════════════════════════════════
   Links am Satz, klebt in halber Höhe: Spur, vier Marken, ein Zeiger. Reine
   Anzeige — wer springen will, hat die Platten. Erst ab 1180 px, darunter
   fehlt die Gasse. */
.wb-l-leiste{display:none}
@media (min-width:1180px){
  .wb-l-leiste{display:block;position:fixed;z-index:3;
    left:clamp(18px,2.4vw,40px);top:50%;translate:0 -50%;
    width:22px;height:min(46vh,400px);pointer-events:none;
    opacity:0;transition:opacity .5s var(--ease)}
  .wb-lese[data-leiste="ja"] .wb-l-leiste{opacity:1}
  .wb-l-leiste-spur{position:absolute;left:10px;top:0;bottom:0;width:1px;
    background:var(--kante)}
  .wb-l-leiste-zeiger{position:absolute;left:10px;top:0;width:1px;
    background:var(--acc-voll);height:var(--fort,0%);
    transition:height .18s linear}
  .wb-l-leiste-marke{position:absolute;left:0;width:22px;top:var(--y);
    translate:0 -50%;display:flex;align-items:center}
  .wb-l-leiste-marke::before{content:"";width:15px;height:1px;
    background:var(--kante);transition:background-color .3s var(--ease),
      width .3s var(--ease)}
  .wb-l-leiste-marke span{position:absolute;left:26px;
    font:400 .62rem/1 var(--f-m);letter-spacing:.14em;color:var(--leise);
    opacity:0;translate:-4px 0;
    transition:opacity .3s var(--ease),translate .3s var(--ease)}
  .wb-l-leiste-marke[data-hier="ja"]::before{background:var(--tinte);width:21px}
  .wb-l-leiste-marke[data-hier="ja"] span{opacity:1;translate:0 0;
    color:var(--tinte)}
}

/* ══ Der Kapitelmerker ═════════════════════════════════════════════════════
   Fest unter der Seitenkopfleiste, während man im Protokoll liest: Nummer,
   Titel, eine Spur mit dem Fortschritt IM Kapitel. Fest und nicht klebend,
   damit er im Fluss keinen leeren Streifen hinterlässt. */
.wb-l-merker{position:fixed;top:var(--merker-oben,88px);left:0;right:0;z-index:3;
  display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);
  max-width:min(1180px,calc(100% - 2 * var(--rand)));margin-inline:auto;
  padding:12px 0;
  border-bottom:1px solid var(--kante);
  opacity:0;translate:0 -8px;pointer-events:none;
  transition:opacity .4s var(--ease),translate .4s var(--ease)}
.wb-l-merker[data-an="ja"]{opacity:1;translate:0 0}
.wb-l-merker-nr{font:400 var(--t-mark)/1 var(--f-m);letter-spacing:.2em;
  color:var(--acc-voll)}
.wb-l-merker-titel{font:400 .98rem/1 'Source Serif 4',Georgia,serif;
  color:var(--tinte)}
.wb-l-merker-spur{flex:1 1 auto;height:1px;
  background:color-mix(in oklab,var(--tinte) 12%,transparent);
  position:relative;overflow:hidden}
.wb-l-merker-spur i{position:absolute;inset:0 auto 0 0;width:var(--fort,0%);
  background:var(--tinte);transition:width .18s linear}

/* ══ Leinenkorn ════════════════════════════════════════════════════════════
   Eine Schicht Rauschen über dem Leseteil, 3 % multiplizierend: der Grund
   bekommt Tiefe, ohne dass eine Farbe dazukommt. SVG-Filter, kein Bild —
   vierhundert Zeichen statt vierzig Kilobyte. */
.wb-l-korn{position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:multiply;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size:160px 160px}


/* ══ Enthüllen ═════════════════════════════════════════════════════════════
   Der Grundzustand steht hier, der Endzustand am Merkmal data-sicht. Wer ohne
   Skript oder ohne Beobachter lädt, sieht den Endzustand: die Regeln greifen
   nur bei data-bewegung="ja" am Dokument. */
[data-bewegung="ja"] .wb-lese [data-enth]{opacity:0;translate:0 12px}
[data-bewegung="ja"] .wb-lese [data-enth][data-sicht="ja"]{opacity:1;
  translate:0 0;
  transition:opacity .8s var(--ease) calc(var(--v,0) * 60ms),
             translate .8s var(--ease) calc(var(--v,0) * 60ms),
             clip-path .9s var(--ease) calc(var(--v,0) * 60ms)}
/* Überschriften zusätzlich mit Maske: die Zeile steigt aus ihrer Grundlinie
   heraus statt einzublenden. Nur Überschriften — bei Fließtext liest man die
   Maske als Fehler. */
[data-bewegung="ja"] .wb-lese h2[data-enth],
[data-bewegung="ja"] .wb-lese .wb-l-kopf[data-enth]{clip-path:inset(0 0 102% 0)}
[data-bewegung="ja"] .wb-lese h2[data-enth][data-sicht="ja"],
[data-bewegung="ja"] .wb-lese .wb-l-kopf[data-enth][data-sicht="ja"]{
  clip-path:inset(0 0 -16% 0)}

[data-bewegung="nein"] .wb-lese .wb-l-striche i{transform:scaleY(1)}
[data-bewegung="nein"] .wb-lese .wb-l-striche i[data-fall]{transform:scaleY(.1);
  opacity:.34}
[data-bewegung="nein"] .wb-lese .wb-l-zaehl-fuss{opacity:1}
[data-bewegung="nein"] .wb-lese .wb-l-vokabel td span{transform:none;opacity:1}
[data-bewegung="nein"] .wb-lese .wb-l-spalt{transform:scaleY(1)}
[data-bewegung="nein"] .wb-lese .wb-l-plan-rahmen,
[data-bewegung="nein"] .wb-lese .wb-l-plan-weg{stroke-dashoffset:0}
[data-bewegung="nein"] .wb-lese .wb-l-plan-kasten,
[data-bewegung="nein"] .wb-lese .wb-l-plan-marken circle{opacity:1;
  transform:none}
[data-bewegung="nein"] .wb-lese .wb-l-paket li,
[data-bewegung="nein"] .wb-lese .wb-l-frage,
[data-bewegung="nein"] .wb-lese .wb-l-wege li,
[data-bewegung="nein"] .wb-lese .wb-l-liste li{opacity:1;translate:0 0}
[data-bewegung="nein"] .wb-lese .wb-l-platte-geist{opacity:1;translate:0 0}
[data-bewegung="nein"] .wb-lese .wb-l-platte-strich{transform:scaleX(1)}


/* ══ Ohne Bewegung ═════════════════════════════════════════════════════════
   Jede Figur steht in ihrem ENDZUSTAND als Standbild: die neun Striche liegen
   unten, die Säulen stehen aneinander vorbei, der Plan ist fertig gezeichnet.
   Nicht „Animation aus und nichts zu sehen". */
@media (prefers-reduced-motion:reduce){
  .wb-lese [data-enth],.wb-lese .wb-l-paket li,.wb-lese .wb-l-frage,
  .wb-lese .wb-l-wege li,.wb-lese .wb-l-liste li,
  .wb-lese .wb-l-zaehl-fuss,.wb-lese .wb-l-platte-geist{
    opacity:1!important;translate:none!important;clip-path:none!important;
    transition:none!important;animation:none!important}
  .wb-lese .wb-l-striche i{transform:scaleY(1)!important;animation:none!important}
  .wb-lese .wb-l-striche i[data-fall]{transform:scaleY(.1)!important;
    opacity:.34!important}
  .wb-lese .wb-l-vokabel td span{transform:none!important;opacity:1!important;
    transition:none!important}
  .wb-lese .wb-l-vokabel::after{display:none}
  .wb-lese .wb-l-spalt{transform:scaleY(1)!important;transition:none!important}
  .wb-lese .wb-l-plan-rahmen,.wb-lese .wb-l-plan-weg{
    stroke-dashoffset:0!important;transition:none!important}
  .wb-lese .wb-l-plan-kasten,.wb-lese .wb-l-plan-marken circle{
    opacity:1!important;transform:none!important;transition:none!important}
  .wb-lese .wb-l-platte-strich{transform:scaleX(1)!important;
    transition:none!important}
  .wb-l-merker,.wb-l-merker-spur i,.wb-l-leiste-zeiger,
  .wb-l-rechner-balken i,.wb-l-wege a,.wb-l-tab tbody td,
  .wb-l-tab tbody tr{transition:none!important}
}


/* ══ Schmal ════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .wb-l-striche{gap:1px;height:96px}
  .wb-l-zaehl{padding:18px}
  .wb-l-tab-zwei td[data-s="links"],.wb-l-tab-zwei td[data-s="rechts"]{
    font-size:.94rem;padding-inline:10px}
  .wb-l-tab-zwei th[scope="col"]{font-size:.6rem;letter-spacing:.1em;
    padding-inline:10px}
  .wb-l-tab th[scope="row"],.wb-l-tab td{font-size:.98rem}
  .wb-l-merker{display:none}      /* zu wenig Breite für eine Anzeige */
}


/* ══ Bilder als Teil der Komposition ══════════════════════════════════════
   Ein Foto über dem Text und Text darunter ist ein Stapel, kein Zusammenspiel.
   Deshalb gibt es hier keine freistehenden Bildkacheln, sondern vier
   Verschränkungen — dieselbe Grammatik wie Entwurf 04 der Stilkarten, nur in
   Leinen statt in Nacht:

   1 · BILDBAND MIT SCHRIFT DARAUF (Kapitel 01, 04, Abschnitt B)
       Randlos, Schleier von unten, Kennung und Titel liegen im Bild.
   2 · STEHENDES BILD NEBEN LAUFENDEM SATZ (Kapitel 02)
       Das Bild klebt, der Text zieht vorbei. Zwei Vokabulare nebeneinander —
       die Komposition sagt dasselbe wie der Inhalt.
   3 · ZEICHNUNG AUF FOTO (Kapitel 03)
       Der Plan bleibt grau und liegt auf einem Foto von Planblättern.
   4 · BILDKOPF IN DER FLÄCHE (die drei Wege)

   Jedes Motiv zeigt UNSERE Arbeit — messen, recherchieren, planen, bauen,
   betreiben. Kein Kundengerät: wer für seine eigene Arbeit wirbt, zeigt seine
   eigene Werkbank.

   Die Datei kommt jeweils in --bild. Solange keine liegt, trägt der Platz den
   satten Leinenton: die Seite steht auch ohne Foto. */

/* ── 1 · Bildband ────────────────────────────────────────────────────────
   Das Foto liegt nicht als Hintergrund am Feld, sondern auf einer eigenen
   Ebene darin. Nur so lässt es sich BEWEGEN: es kommt mit einem Wischer von
   unten herein, steht dabei 6 % zu groß und geht auf sein Maß zurück, während
   man am Kapitel vorbeirollt (--kap-fort). Erst danach erscheint die Schrift —
   das ist die Reihenfolge, die der Nutzer verlangt hat: Bild schiebt sich
   herein, Text taucht auf. */
.wb-l-platte[data-bild]{background-color:var(--leinen-satt);
  padding-block:clamp(88px,20vh,240px) clamp(52px,9vh,116px)}
/* --bild-pos wählt den Ausschnitt. Bei cover bestimmt die Breite die
   Skalierung, senkrecht bleiben rund 40 % Überschuss — genug, um in derselben
   Aufnahme zwei verschiedene Bilder zu finden: die Leiste zeigt ein Detail,
   der Kapiteltext dasselbe Motiv als Ganzes. */
.wb-l-platte[data-bild]::after{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bild,none);background-size:cover;
  background-position:var(--bild-pos,50% 50%);
  clip-path:inset(100% 0 0 0);
  transform:scale(1.06);transform-origin:50% 65%;
  transition:clip-path 1.5s var(--ease),transform 1.6s var(--ease)}
.wb-l-platte[data-bild][data-sicht="ja"]::after{clip-path:inset(0 0 0 0);
  transform:scale(calc(1.06 - var(--kap-fort,0) * .06))}
/* Der Schleier: von unten satt, nach oben aus. Er hält die Schrift lesbar,
   ohne das Bild abzudunkeln — ein Schleier über dem ganzen Foto würde beides
   verlieren. */
.wb-l-platte[data-bild]::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    color-mix(in oklab,var(--leinen) 94%,transparent) 0%,
    color-mix(in oklab,var(--leinen) 78%,transparent) 34%,
    color-mix(in oklab,var(--leinen) 22%,transparent) 74%,
    transparent 100%)}
.wb-l-platte[data-bild] .wb-l-platte-geist{z-index:2;
  -webkit-text-stroke:1px color-mix(in oklab,var(--tinte) 20%,transparent)}
/* Kennung und Titel kommen NACH dem Wischer: 0,55 s und 0,7 s. Wer sie
   gleichzeitig einblendet, bekommt zwei Ereignisse, die sich gegenseitig die
   Aufmerksamkeit nehmen. */
.wb-l-platte[data-bild] .wb-l-platte-kennung,
.wb-l-platte[data-bild] h3{z-index:2;opacity:0;translate:0 14px;
  transition:opacity .8s var(--ease),translate .8s var(--ease)}
.wb-l-platte[data-bild][data-sicht="ja"] .wb-l-platte-kennung{opacity:1;
  translate:0 0;transition-delay:.55s}
.wb-l-platte[data-bild][data-sicht="ja"] h3{opacity:1;translate:0 0;
  transition-delay:.7s}
.wb-l-platte[data-bild] .wb-l-platte-strich{z-index:2;transition-delay:.85s}

/* Das Band in Abschnitt B: ein Satz auf einem Foto, randlos. */
.wb-l-band{position:relative;isolation:isolate;overflow:hidden;
  margin:clamp(56px,9vh,120px) calc(50% - 50vw) 0;
  padding:clamp(88px,18vh,200px) var(--rand);
  display:grid;place-items:center;
  background-color:var(--leinen-satt);
  background-image:var(--bild,none);background-size:cover;
  background-position:50% 50%}
.wb-l-band{background-image:none}
/* Wieder auf eigener Ebene: Wischer von unten, dann geht der Schleier zu und
   der Satz taucht auf. Drei Schritte, 1,4 s — eine Einstellung, kein Effekt. */
.wb-l-band::after{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bild,none);background-size:cover;
  background-position:50% 50%;
  clip-path:inset(100% 0 0 0);transform:scale(1.05);
  transition:clip-path 1.4s var(--ease),transform 1.6s var(--ease)}
.wb-l-band[data-sicht="ja"]::after{clip-path:inset(0 0 0 0);transform:scale(1)}
.wb-l-band::before{content:"";position:absolute;inset:0;z-index:1;
  background:color-mix(in oklab,var(--leinen) 62%,transparent);
  opacity:0;transition:opacity .9s var(--ease) .5s}
.wb-l-band[data-sicht="ja"]::before{opacity:1}
.wb-l-band .wb-l-domain{position:relative;z-index:2;
  opacity:0;translate:0 12px;
  transition:opacity .9s var(--ease) .8s,translate .9s var(--ease) .8s}
.wb-l-band[data-sicht="ja"] .wb-l-domain{opacity:1;translate:0 0}
.wb-l-band .wb-l-domain{
  margin:0!important;max-width:var(--satz);
  font-size:clamp(1.5rem,1.2rem + 2vw,2.8rem)!important}

/* ── 2 · Stehendes Bild neben laufendem Satz ─────────────────────────────
   Erst ab 1100 px: darunter liegt das Bild über dem Satz und klebt nicht —
   ein stehendes Bild auf einem Telefon nimmt die halbe Höhe und sagt nichts. */
.wb-l-paar{display:grid;gap:clamp(28px,4vw,64px);
  max-width:min(1180px,100%);margin-inline:auto}
.wb-l-paar-bild{margin:0;padding:0}
/* Die Maske öffnet AUS DER MITTE nach außen — dort, wo im Foto der Spalt
   zwischen den beiden Stapeln liegt. Die Enthüllung zeigt also zuerst genau
   das, worum es im Kapitel geht. */
.wb-l-paar-bild[data-bild] .wb-l-paar-flaeche{clip-path:inset(0 50% 0 50%);
  transition:clip-path 1.3s var(--ease)}
.wb-l-paar-bild[data-sicht="ja"] .wb-l-paar-flaeche{clip-path:inset(0 0 0 0)}
.wb-l-paar-flaeche{display:grid;place-items:center;overflow:hidden;
  /* Einspalter: liegend und gekappt. Das Hochformat gilt nur, wo es neben dem
     Satz steht — allein untereinander ist es ein Vorhang. */
  width:100%;height:min(44vh,380px);
  background-position:50% 40%;
  background-color:var(--leinen-satt);
  background-image:var(--bild,none);background-size:cover;
  background-position:50% 50%;
  box-shadow:var(--schatten)}
.wb-l-seite[data-ton="leinen"] .wb-l-paar-flaeche{background-color:var(--leinen)}
.wb-l-paar-flaeche i{font-style:normal;
  font:400 var(--t-mark)/1 var(--f-m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--leise)}
.wb-l-paar-satz > .wb-l-text{margin-inline:0}
/* Im Einspalter rutscht das Bild hinter den Satz: order bewegt nur die
   Darstellung, die Vorlesereihenfolge bleibt, wie sie im Dokument steht. */
.wb-l-paar{grid-auto-flow:row}
.wb-l-paar-bild{order:2}
.wb-l-paar-satz{order:1}
@media (min-width:1100px){
  .wb-l-paar{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
    align-items:start}
  .wb-l-paar-bild{order:0;position:sticky;
    top:calc(var(--merker-oben,88px) + 64px)}
  .wb-l-paar-satz{order:0}
  .wb-l-paar-flaeche{height:auto;aspect-ratio:4/5;
    background-position:50% 50%}
  .wb-l-paar-satz > .wb-l-text{max-width:none}
}

/* ── 3 · Zeichnung auf Foto ─────────────────────────────────────────────── */
.wb-l-plan[data-bild]{position:relative;isolation:isolate;
  background-color:var(--leinen-satt)}
.wb-l-plan[data-bild]::after{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bild,none);background-size:cover;
  background-position:50% 50%;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.wb-l-plan[data-bild][data-sicht="ja"]::after{clip-path:inset(0 0 0 0)}
/* Ein Milchglas über dem Foto: die grauen Linien der Zeichnung brauchen einen
   ruhigen Grund, das Foto darf nur noch Textur sein. */
.wb-l-plan[data-bild]::before{content:"";position:absolute;inset:0;z-index:1;
  background:color-mix(in oklab,var(--leinen) 82%,transparent);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.wb-l-plan[data-bild] svg{position:relative;z-index:2}

/* ── 4 · Bildkopf in der Fläche ─────────────────────────────────────────── */
/* Beim Überfahren fährt ein Lichtstreifen über das Foto und es wächst um 4 %.
   Der Streifen ist kein Glanz auf der Fläche, sondern auf dem BILD — er sieht
   aus wie Licht, das über den Gegenstand geht. */
.wb-l-wege a{position:relative}
.wb-l-weg-bild{position:relative;overflow:hidden;
  display:block;aspect-ratio:16/10;margin-bottom:.4em;
  background-color:var(--leinen-tief);
  background-image:var(--bild,none);background-size:cover;
  background-position:50% 50%;
  transition:filter .35s var(--ease)}
.wb-l-seite[data-ton="leinen"] .wb-l-weg-bild{background-color:var(--leinen-satt)}
.wb-l-wege a{padding:0;overflow:hidden;
  grid-template-rows:auto auto auto auto}
.wb-l-wege a > b{padding-inline:clamp(24px,3vw,34px);margin-top:.4em}
.wb-l-wege a > span{padding-inline:clamp(24px,3vw,34px)}
.wb-l-wege a > i{margin:.2em clamp(24px,3vw,34px) clamp(24px,3vw,34px)}
.wb-l-weg-bild::after{content:"";position:absolute;top:0;bottom:0;left:0;
  width:45%;translate:-150% 0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent)}
.wb-l-wege a:hover .wb-l-weg-bild::after{
  animation:wb-l-glanz .9s var(--ease) both}
@keyframes wb-l-glanz{from{translate:-150% 0}to{translate:260% 0}}
.wb-l-weg-bild{background-size:cover;
  transition:background-size .5s var(--ease),filter .35s var(--ease)}
.wb-l-wege a:hover .wb-l-weg-bild{background-size:106% auto;
  filter:brightness(1.03)}

@media (prefers-reduced-motion:reduce){
  .wb-l-weg-bild{transition:none!important}
}

/* ══ Ohne Bewegung: die Bilder stehen fertig da ════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .wb-l-platte[data-bild]::after,.wb-l-band::after,.wb-l-plan[data-bild]::after,
  .wb-l-paar-bild[data-bild] .wb-l-paar-flaeche{
    clip-path:none!important;transform:none!important;transition:none!important}
  .wb-l-band::before,.wb-l-band .wb-l-domain,
  .wb-l-platte[data-bild] .wb-l-platte-kennung,
  .wb-l-platte[data-bild] h3{opacity:1!important;translate:none!important;
    transition:none!important}
  .wb-l-weg-bild::after{display:none}
}


/* ══ Die sechs Richtungen im Einzelnen ═══════════════════════════════════════
   Der Quellabschnitt zu Ring und Vorschaufenster (R1). Er liest sich als
   Datenblatt und nicht als Kachelgitter: eine Linie je Richtung, die Nummer
   in der Schreibmaschine, die Argumente in zwei knappen Spalten. Keine
   Rahmen, keine Schatten — der Leseteil hat keine. */
.wb-stile{max-width:min(1180px,100%);margin-inline:auto;
  display:grid;gap:0;border-top:1px solid var(--linie,rgba(27,26,22,.14))}
.wb-stil{padding-block:clamp(30px,4.2vh,52px);
  border-bottom:1px solid var(--linie,rgba(27,26,22,.14));
  display:grid;gap:clamp(14px,2vh,22px)}
.wb-stil-titel{margin:0;display:flex;align-items:baseline;gap:.7em;
  font:400 clamp(1.34rem,1.2rem + .7vw,1.8rem)/1.2 var(--f-t,var(--f-b));
  letter-spacing:-.02em;color:var(--tinte);text-wrap:balance}
.wb-stil-nr{font:400 var(--t-mark)/1 var(--f-m);letter-spacing:.18em;
  color:var(--leise);flex:0 0 auto}
.wb-lese .wb-stil-text{max-width:58ch}
.wb-stil-arg{display:grid;gap:8px}
.wb-lese .wb-stil-kopf{font:500 var(--t-mark)/1 var(--f-m);letter-spacing:.16em;
  text-transform:uppercase;color:var(--leise)}
.wb-stil-arg ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.wb-stil-arg li{font:400 clamp(.98rem,.95rem + .2vw,1.08rem)/1.6 var(--f-b);
  color:var(--tinte);padding-left:1.1em;position:relative;text-wrap:pretty}
.wb-stil-arg li::before{content:"";position:absolute;left:0;top:.72em;
  width:.5em;height:1px;background:var(--leise)}

@media (min-width:900px){
  .wb-stil{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,.85fr);
    gap:clamp(20px,3vw,48px);align-items:start}
  .wb-stil-titel{grid-column:1;flex-direction:column;gap:.35em}
  .wb-lese .wb-stil-text{grid-column:1;max-width:34ch}
  .wb-stil-arg:nth-of-type(1){grid-column:2;grid-row:1 / span 2}
  .wb-stil-arg:nth-of-type(2){grid-column:3;grid-row:1 / span 2}
}