/* s05a · Meisterwerk (Nacht-2): Tafeln im Fluss an K0, rechts die sticky Medientafel (--medium-b = 44vw × 100vh, bis an den
   Fensterrand). Gemeinsame Regeln für 5a, 5b und 5c stehen unter .s05 (alle drei Wurzeln tragen die Klasse), Eigenes unter
   .s05a/.s05b/.s05c. Jeder Selektor beginnt mit .s05; eigene Namen tragen das Präfix s05-. Grund --nacht-2, Text --hell-text
   (16,1:1), gedämpft --hell-text-2 (12,3:1), Gold-Text immer --gold-hell (10,6:1), Zeichen --gold. Kein Papier, kein Ring-Objekt.

   Grundform (ohne JS): eine Spalte, das Fenster steht im Endzustand zwischen Kopf und erstem Block, vor jeder Blocknummer ein Ring.
   Mit JS (HL.tafelKette setzt .s05-szene): ab 1100 px zwei Spalten, rechts die Spalte sticky (100vh). HL.tafelKette setzt an
   .s05-kette data-block (aktueller Block) und die Klassen ab0 … abN (erreichte Blöcke); daran hängen Überblendung, Linien, Fenster.
   5a: Foto-Fenster in voller Höhe, das je Block überblendet (.s05-bild.an, 0,6 s), links davon die Linie mit den Marken 1.–6.
   (Haarlinie, erreichte Strecke 2 px Gold über --s05-fort 0 … 1, aktive Marke gold-hell mit Lichtpunkt). */

.s05{--s05-spalte:var(--medium-b)}
.s05a{--s05-strip:calc(var(--t-nr) * 2.3);--s05-spalte:calc(var(--medium-b) + var(--s05-strip))}
.s05 .s05-flaeche{position:relative;padding:0 var(--rand)}
.s05 .s05-flaeche::before{content:'';position:absolute;left:var(--rand);right:0;top:0;height:1px;background:var(--linie-nacht)}
.js .s05:not(.s05-szene) .s05-kette{display:none}
.s05 [hidden]{display:none!important}   /* system.css setzt img/video auf display:block; verdeckte Medien (hidden) dürfen nicht laufen */

/* Tafel: eine Bildschirmhöhe, Inhalt optisch leicht über der Mitte. Jede Tafel ist ein Vortragsschritt. */
.s05 .s05-tafel{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--r4);padding:max(44px,6vh) 0 max(48px,7vh)}
.s05 .s05-tafel > *{max-width:100%}

/* Block: Nummer und Titel in einer Zeile, die Nummer hängt in der Marginalspalte (wie die Abschnittsnummer) */
.s05 .s05-bt{display:grid;grid-template-columns:var(--nr-b) minmax(0,1fr);column-gap:var(--nr-luft);align-items:baseline;margin-left:calc(-1 * (var(--nr-b) + var(--nr-luft)));max-width:calc(24em + var(--nr-b) + var(--nr-luft))}
.s05 .s05-bt > .nr{justify-self:end}
.s05 .s05-bt > span:last-child{text-wrap:balance}
.s05:not(.s05-szene) .s05-bt > .nr::before{content:'';display:inline-block;width:.42em;height:.42em;margin-right:.32em;border:2px solid var(--ring-gold);border-radius:50%;vertical-align:.1em}

.s05 .s05-tafel .text{color:var(--hell-text);text-wrap:balance}
.s05 .s05-tafel .s05-wende{font-weight:500}
.s05 .s05-gruppe{display:flex;flex-direction:column;gap:.4em}
.s05 .vorspann{font-size:var(--t-etikett);line-height:1.3}
.s05 .s05-tafel .zeile{color:var(--hell-text);max-width:34em}
.s05 .s05-statt .zeile{color:var(--hell-text-2)}
.s05 .s05-gross{font-size:var(--t-lead);line-height:1.42;letter-spacing:-.008em}   /* kurze Begriffe groß, in Inter (Serif nur für Überschriften, Schluss und Nummern) */

/* Listen mit langen Punkten: ein Punkt je Zeile, der Ring steht davor (Trennring der Fließzeile als Aufzählung) */
.s05 .s05-liste{list-style:none;font-size:var(--t-text);line-height:1.38;color:var(--hell-text);max-width:34em}
.s05 .s05-liste > li{position:relative;padding:0 0 .38em 1.3em;break-inside:avoid}
.s05 .s05-liste > li::before{content:'';position:absolute;left:.12em;top:.46em;width:.46em;height:.46em;border:1.7px solid var(--ring-stahl);border-radius:50%}
.s05 .s05-liste.gold > li::before{border-color:var(--ring-gold)}
.s05 .s05-liste.s05-zwei{columns:2;column-gap:var(--r5);max-width:min(100%,46em)}
.s05 .s05-liste.s05-fragen > li{padding-bottom:.22em}

/* Kernsatz (5a, 3.): Serif in gold-hell (system.css), mit der Goldlinie der Schlusszeile davor */
.s05 .s05-kern{position:relative;margin-top:var(--r2);max-width:22em}
.s05 .s05-kern::before{content:'';position:absolute;right:calc(100% + var(--r4));top:.6em;width:clamp(36px,3vw,64px);height:2px;background:var(--gold)}

/* Nutzen: eine Messingplatte über die Tafelbreite (system.css §19). Titel Serif gold-hell, die Punkte hell mit Goldringen in zwei
   Spalten (lange Punkte, eine Fließzeile würde am Eckschnitt abgeschnitten). Die Hülle trägt den Schatten (ein clip-path-Element
   verliert seinen eigenen box-shadow), damit die Platte auf Nacht-2 als Körper liegt; .licht setzt das Skript beim Erreichen. */
.s05 .s05-nt{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:var(--zh-h3);letter-spacing:-.012em;color:var(--gold-hell)}
.s05 .s05-huelle{width:100%;--dauer:.6s;filter:drop-shadow(0 26px 44px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(230,196,113,.28))}
.s05 .s05-platte{width:100%}
.s05 .s05-platte .s05-nt + *{margin-top:var(--r3)}
.s05 .s05-platte .s05-liste{color:var(--hell-text);max-width:none}
.s05 .s05-platte .s05-liste > li::before{border-color:var(--ring-gold)}
.s05 .s05-platte .vorspann{color:var(--hell-text)}
.s05 .s05-ende .schluss{max-width:20em}

/* ---------- Medientafel (mit JS) ---------- */
.s05.s05-szene .s05-flaeche{display:grid;grid-template-columns:minmax(0,1fr) var(--s05-spalte);column-gap:var(--rinne);padding-right:0}
.s05.s05-szene .s05-flaeche::before{right:var(--s05-spalte)}
.s05.s05-szene .s05-tafel{grid-column:1}
.s05.s05-szene .s05-kette{display:block;grid-column:2;grid-row:1 / span 30;position:relative}
.s05.s05-szene .s05-buehne{position:sticky;top:0;height:100vh;overflow:hidden}
.s05 .s05-buehne{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--nacht-2)}
.s05 .s05-fenster{grid-column:-2 / -1;grid-row:1}
.s05 .s05-bild{opacity:0;transition:opacity .6s var(--ease)}
.s05 .s05-bild.an{opacity:1}
/* 5a, Fixrunde 2 (11.10.): Kopf zeigt den Außendienst im Auto (data-von −1), Block 1 das Büro (data-von 1); ab Block 2 (Außendienst erfasst
   Wissen) blendet das Büro wieder aus, darunter steht das Auto weiter, kein dunkler Dip. Rückwärts nimmt die Kette .ab2 wieder weg. */
.s05a .s05-kette.ab2 .s05-bild[data-von="1"]{opacity:0}
html:not(.js) .s05 .s05-fenster > .s05-bild:last-child{opacity:1}

/* 5a: links vom Fenster die Linie mit den Marken 1.–6. Strip --s05-strip breit; Lichtpunkt auf der Linie bei .3 n (n = --t-nr), die
   Nummer dahinter. Grundlinie Haarlinie, erreichte Strecke 2 px Gold (--s05-fort), erreichte Marke Goldrand, aktive Marke gefüllt mit Glow. */
.s05a .s05a-buehne{grid-template-columns:var(--s05-strip) minmax(0,1fr)}
.s05a .s05-marken{list-style:none;position:relative;grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;padding:14vh 0 14vh calc(var(--t-nr) * .8)}
.s05a .s05-marken::before,.s05a .s05-marken::after{content:'';position:absolute;top:calc(14vh + var(--t-nr) * .5);pointer-events:none}
.s05a .s05-marken::before{left:calc(var(--t-nr) * .3 - .5px);width:1px;height:calc(100% - 28vh - var(--t-nr));background:var(--haar)}
.s05a .s05-marken::after{left:calc(var(--t-nr) * .3 - 1px);width:2px;height:calc((100% - 28vh - var(--t-nr)) * var(--s05-fort,0));background:var(--gold);transition:height .6s var(--ease)}
.s05a .s05-marken > li{position:relative;z-index:1;font-family:var(--serif);font-weight:500;font-size:var(--t-nr);line-height:1;color:var(--hell-text-2);letter-spacing:.02em;font-variant-numeric:lining-nums;transition:color .5s var(--ease)}
.s05a .s05-marken > li::before{content:'';position:absolute;left:calc(var(--t-nr) * -.68);top:calc(50% - var(--t-nr) * .18);width:calc(var(--t-nr) * .36);height:calc(var(--t-nr) * .36);box-sizing:border-box;border:2px solid var(--ring-stahl);border-radius:50%;background:var(--nacht-2);transition:border-color .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease)}
.s05a .s05-marken > li.an{color:var(--hell-text)}
.s05a .s05-marken > li.an::before{border-color:var(--gold)}
.s05a .s05-marken > li.s05-akt{color:var(--gold-hell)}
.s05a .s05-marken > li.s05-akt::before{border-color:var(--gold-hell);background:var(--gold-hell);box-shadow:0 0 10px 2px rgba(230,196,113,.55)}
.s05a .s05-marken.voll > li{color:var(--gold-hell)}

/* ---------- ohne JS: das Fenster steht im Endzustand zwischen Kopf und erstem Block, ohne Marken ---------- */
html:not(.js) .s05 .s05-kette{height:min(56vw,620px);margin:0 calc(-1 * var(--rand)) var(--r5)}
html:not(.js) .s05 .s05-buehne{height:100%}
html:not(.js) .s05a .s05-marken{display:none}
html:not(.js) .s05a .s05a-buehne{grid-template-columns:minmax(0,1fr)}

/* ---------- schmal: eine Spalte, das Fenster steht im Endzustand zwischen Kopf und erstem Block ---------- */
@media (max-width:1099px){
  .s05 .s05-tafel{min-height:0;padding:var(--r5) 0;gap:var(--r3)}
  .s05 .s05-kopf{padding-top:var(--abschnitt-y)}
  .s05.s05-szene .s05-flaeche{display:flex;flex-direction:column;padding-right:var(--rand)}
  .s05.s05-szene .s05-flaeche::before{right:0}
  .s05.s05-szene .s05-kopf{order:0}
  .s05.s05-szene .s05-kette{order:1;height:min(92vw,560px);margin:0 calc(-1 * var(--rand))}
  .s05.s05-szene .s05-tafel:not(.s05-kopf){order:2}
  .s05.s05-szene .s05-buehne{position:relative;height:100%}
  .s05a .s05-marken{display:none}
  .s05a .s05a-buehne{grid-template-columns:minmax(0,1fr)}
  .s05 .s05-ende{padding-bottom:var(--abschnitt-y)}
}
@media (max-width:899px){
  .s05 .s05-bt{grid-template-columns:auto minmax(0,1fr);column-gap:.4em;margin-left:0}
  .s05 .s05-bt > .nr{justify-self:start}
  .s05 .s05-kern::before{position:static;display:block;margin-bottom:var(--r2)}
}
@media (max-width:700px){
  .s05 .s05-liste.s05-zwei{columns:1}
}