/* s06 · Von Insellösungen zur skalierbaren Plattform (Meisterwerk, Nacht). Jeder Selektor beginnt mit .s06. Kein WebGL.
   Bühne: rechts das Foto-Fenster .fenster.halb (absolut in der sticky Bühne, volle Höhe, fährt nie mit), links die Spalte (.fahrt) von K0
   bis eine Rinne vor dem Fenster. Höhen setzt s06.js aus der Fensterhöhe:
   --s06-mitte   Zustand 0 (gepinnt): der Kopf steht in der Bildmitte neben dem Foto; ab Zustand 1 fährt er nach oben (1,1 s).
   --s06-fahrt1  Zustand 1: die Spalte fährt so weit hoch, dass das Schaubild in den Rahmen passt (2200 × 1100: 0, der Inhalt passt).
   --fahrt       erlaubte Mehrhöhe für vortrag.js (sonst liefe die Bühne frei).
   Text hängt an data-hoch (vortrag.js setzt .vor); Aufleuchten der Platte (.licht), goldene Nieten und der Impuls hängen an hl:schritt. */

/* ============ Bühne ============ */
.s06 .s06-plattform{position:relative}
.s06 .s06-bild{padding:calc(var(--abschnitt-y) * .7) var(--rand) calc(var(--abschnitt-y) * .55)}
.s06 .s06-fenster{--lage:50% 50%}
.js:not(.ruhig) .s06 .s06-fenster > img{transform:scale(1.06)}
.js:not(.ruhig) .s06 .s06-fenster.da > img{animation:s06-fahrt 14s var(--ease-weich) both}
@keyframes s06-fahrt{from{transform:scale(1.06)}to{transform:scale(1)}}

/* Spalte: Breite von K0 bis eine Rinne vor dem Fenster (Inhaltsbreite + 2 Ränder = Fensterbreite) */
.s06 .s06-spalte{display:block;transform:none;width:calc((100% + 2 * var(--rand)) * (1 - var(--halb)) - var(--rand) - var(--rinne))}
.s06 .buehne.gepinnt .s06-spalte{transition:transform .6s var(--ease)}
.s06 .buehne.gepinnt[data-k="1"] .s06-spalte{transform:translateY(calc(-1 * var(--s06-fahrt1,0px)))}
.s06 .buehne.gepinnt .s06-oben{transition:transform .6s var(--ease)}
.s06 .buehne.gepinnt[data-hoch="-1"] .s06-oben,.s06 .buehne.gepinnt[data-hoch="0"] .s06-oben{transform:translateY(var(--s06-mitte,0px))}
.s06 .s06-kopf h2{max-width:15em}

/* ============ Schaubild: FIELD → hey LOOP (Messingplatte) → ZENTRALE, senkrecht ============
   Drei Blöcke untereinander, die Platte über die Spaltenbreite. Die Leitungen (Tinte, 2,5 px gold) laufen 16 px von der linken Kante:
   von FIELD in die Oberkante der Platte, aus der unteren linken Niete zur ZENTRALE; der Rückweg als gestrichelter Bogen links in der
   Marginalspalte (s06.js). Reihenfolge in Zustand 1: Kopf fährt (0–1,1 s; nach 0,45 s ist er zu 88 % oben, erst dann kommt FIELD an seinen
   Platz, nie Text über Text) · FIELD (0,45 s) · Platte (0,65 s) · ZENTRALE (0,85 s) · Leitungen ziehen (0,75–1,85 s) · Rückweg (1,8 s) ·
   Impuls hinab (2,2 s) und zurück (3,5 s). */
.s06 .s06-feld{position:relative;display:grid;row-gap:clamp(44px,6.2vh,76px);margin-top:var(--r5)}
.s06 .s06-et-titel{font-family:var(--sans);font-weight:600;font-size:var(--t-h3);line-height:1.1;letter-spacing:.06em;color:var(--hell-text);white-space:nowrap}
.s06 .s06-verben{margin-top:var(--r2);color:var(--hell-text)}
.s06 .s06-platte{padding:var(--r4) var(--r4) calc(var(--r4) + 4px)}
.s06 .s06-loop-titel{letter-spacing:.02em;white-space:nowrap}
.s06 .s06-hey{font-weight:400;letter-spacing:0}
.s06 .s06-fluss{margin-top:var(--r3);font-size:var(--t-lead);line-height:1.42}
.s06 .s06-fluss > li:not(:last-child)::after{margin:0 .45em 0 .48em}   /* Ring am Ende des Punkts (system.css §10); rechts kürzer: das Leerzeichen zwischen den li zählt mit */
.s06 .buehne .s06-field[data-ab]{transition-delay:.25s}
.s06 .buehne .s06-platte[data-ab]{transition:opacity .5s var(--ease) .4s,transform .5s var(--ease) .4s,background-position .9s var(--ease)}
.s06 .buehne .s06-zentrale[data-ab]{transition-delay:.55s}
/* Zustand 1: die Nieten der Platte werden golden (die Leitung läuft aus der unteren linken Niete) */
.s06 .buehne[data-hoch="1"] .s06-platte::after{background:
  radial-gradient(circle,#e6c471 0 2px,#5f4715 2.4px,rgba(0,0,0,0) 3.4px) top 11px right 11px/10px 10px no-repeat,
  radial-gradient(circle,#e6c471 0 2px,#5f4715 2.4px,rgba(0,0,0,0) 3.4px) bottom 11px left 11px/10px 10px no-repeat}

/* Tinte: liegt über dem Feld und ragt --s06-rand-l in die Marginalspalte (Rückweg). Immer sichtbar, nur die Striche ziehen. */
.s06 .s06-tinte{--s06-rand-l:56px;position:absolute;top:0;left:calc(-1 * var(--s06-rand-l));width:calc(100% + var(--s06-rand-l));height:100%;z-index:1;pointer-events:none;transition:none}
.s06 .buehne .s06-tinte.vor{opacity:1;transform:none}
.s06 .s06-tinte .s06-r{stroke-dasharray:7 9;stroke-linecap:butt;transition:opacity .5s var(--ease) 1.2s}
.s06 .buehne .s06-tinte.vor .s06-r{opacity:0;transition:none}
.s06 .s06-tinte .s06-puls{opacity:0;transition:opacity .3s var(--ease)}   /* jeder Punkt nur während seines Laufs sichtbar (s06.js setzt .an) */
.s06 .s06-tinte .s06-puls.an{opacity:1}

/* ============ Tafeln: Text links an K0, Materialkarte rechts als Fenster in voller Höhe ============ */
.s06 .s06-tafel{display:flex;align-items:center}
.s06 .s06-tafel-text{width:calc((100% + 2 * var(--rand)) * (1 - var(--halb)) - var(--rand) - var(--rinne));display:grid;row-gap:var(--r4)}
.s06 .s06-titel{font-family:var(--sans);font-weight:600;font-size:var(--t-h2);line-height:1;letter-spacing:.04em;color:var(--hell-text)}
.s06 .s06-kette{font-family:var(--serif);font-weight:400;font-size:var(--t-schluss);line-height:1.22;letter-spacing:-.012em;color:var(--hell-text)}
.s06 .s06-kette > li:not(:last-child)::after{width:.4em;height:.4em;margin:0 .25em 0 .5em;border-width:2px;vertical-align:.14em}
.s06 .s06-erkl{color:var(--hell-text-2);max-width:26em}
.s06 .s06-foto{--lage:50% 50%}
.s06 .s06-foto-commerce{--lage:56% 50%}
.s06 .s06-foto-marketing{--lage:46% 50%}
.js:not(.ruhig) .s06 .s06-foto > img{transform:scale(1.08)}
.js:not(.ruhig) .s06 .s06-foto.da > img{animation:s06-heran 1.1s var(--ease) .05s both}
@keyframes s06-heran{from{transform:scale(1.08)}to{transform:none}}

/* ============ Schluss: Lichtnetz-Panorama oben über die ganze Breite, darunter die Litanei ============ */
.s06 .s06-schluss{display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:var(--r5)}
.s06 .s06-panorama{height:44vh;--lage:50% 50%}
.s06 .s06-schluss .schluss-zeile{align-self:center}
.s06 .s06-schluss .schluss-zeile::before{margin-top:calc(var(--t-h1) * .58)}
.s06 .s06-litanei{font-size:var(--t-h1);line-height:var(--zh-h1);font-weight:380;letter-spacing:-.024em;max-width:none;color:var(--hell-text)}
.s06 .s06-litanei > span{display:block}
.s06 .s06-litanei > span + span{color:var(--gold-hell)}

/* ============ Breiten ============ */
@media (max-width:1099px){
  .s06 .s06-fenster{margin:calc(-1 * var(--abschnitt-y) * .7) calc(-1 * var(--rand)) var(--r5)}
  .s06 .s06-spalte{width:auto}
  .s06 .s06-tinte{display:none}
  .s06 .s06-tafel{display:block}
  .s06 .s06-foto{margin:calc(-1 * var(--abschnitt-y)) calc(-1 * var(--rand)) var(--r6)}
  .s06 .s06-tafel-text{width:auto}
  .s06 .s06-panorama{height:30vh}
}
@media (max-width:700px){
  .s06 .s06-kette{font-size:var(--t-lead)}
  .s06 .s06-titel{font-size:var(--t-h3)}
  .s06 .s06-schluss{min-height:0}
  .s06 .s06-panorama{height:auto;aspect-ratio:16/9}
  .s06 .s06-litanei{font-size:var(--t-h2)}
  .s06 .s06-schluss .schluss-zeile::before{margin-top:0}
}