/* s02 · Nicht zu wenig Technologie. Zu wenig Verbindung. (Meisterwerk, Nacht)
   Jeder Selektor beginnt mit .s02. Der Kopf (Nummer, einzeilige h2 in --t-h2-zeile: Folie 2 „Bitte in eine Zeile!“, Prüfung 18) läuft über
   die volle Breite; darunter rechts das Foto-Fenster .fenster.halb (absolut in der sticky Bühne, Oberkante = Oberkante der Unterzeile,
   bis zum Boden ≈ 86 % der Höhe, fährt nie mit), links die Spalte mit Unterzeile, drei Messingplatten (.platte.quer) und Schlusszeile.
   Höhen setzt s02.js aus der Fensterhöhe:
   --s02-fenster-top  Oberkante des Fensters (Polster + h2 + Abstand der Unterzeile); Zustand 4 zieht das Fenster auf volle Höhe.
   --s02-fahrt1       Zustände 1–3: die Spalte fährt so weit hoch, dass die Platten über der Unterkante stehen.
   --s02-fahrt2       Zustand 4: Kopf blendet aus, Platten und Schlusszeile stehen in der Bildmitte; die Messinglinie zieht durch die Nieten.
   Text hängt an data-hoch (vortrag.js setzt .vor), das Aufleuchten der Platte (.licht) setzt s02.js an data-k. */
.s02 .s02-flaeche{position:relative}
.s02 .s02-bild{padding:calc(var(--abschnitt-y) * .7) var(--rand) calc(var(--abschnitt-y) * .55)}
.s02 .s02-spalte{display:block;transform:none}
.s02 .buehne.gepinnt .s02-spalte{transition:transform .6s var(--ease)}
.s02 .buehne.gepinnt:is([data-k="1"],[data-k="2"],[data-k="3"]) .s02-spalte{transform:translateY(calc(-1 * var(--s02-fahrt1,0px)))}
.s02 .buehne.gepinnt[data-k="4"] .s02-spalte{transform:translateY(calc(-1 * var(--s02-fahrt2,0px)))}

/* Kopf: Überschrift ab 980 px in einer Zeile (48 Zeichen ≈ 1340 px bei 2200, auch Palatino); die Unterzeile bleibt in der linken Spalte
   (endet eine Rinne vor dem Fenster: Inhaltsbreite + 2 Ränder = Fensterbreite). Zustand 4: der Kopf blendet aus, während die Spalte fährt */
.s02 .s02-kopf h2{font-size:var(--t-h2-zeile)}
@media (min-width:980px){.s02 .s02-kopf h2{white-space:nowrap}}
.s02 .s02-kopf .lead,.s02 .s02-feld,.s02 .s02-schluss{--spalte:calc((100% + 2 * var(--rand)) * (1 - var(--halb)) - var(--rand) - var(--rinne))}
.s02 .s02-kopf .lead{max-width:min(var(--mass-lead),var(--spalte))}
.s02 .s02-feld,.s02 .s02-schluss{width:var(--spalte)}
.s02 .buehne.gepinnt .s02-oben{transition:opacity .5s var(--ease)}
.s02 .buehne.gepinnt[data-k="4"] .s02-oben{opacity:0}

/* Foto-Fenster: Maschinenraum von der Unterzeile bis zum Boden; einmal 14 s Fahrt scale 1,06 → 1 (Technologie ist da, man sieht genauer
   hin). Zustand 4: das Fenster wächst auf volle Höhe, sobald der Kopf verschwunden ist (Verzögerung .45 s: nie Text über dem Foto) */
.s02 .s02-fenster{--lage:58% 50%;top:var(--s02-fenster-top,0px);left:calc(100% * (1 - var(--halb)));width:auto}
/* Zustand −1/0 (Integration 11.10., Advisor-Gate): das Foto als Band über die volle Breite unter der Unterzeile (Satzkante bis
   Fensterrand, Oberkante --s02-band-top aus s02.js = Oberkante der Platten), kein halbleerer Schirm. Ab Zustand 1 zieht es sich
   in 0,9 s in die rechte Spalte zurück, die Platten kommen in den frei werdenden Raum */
.s02 .buehne.gepinnt:is([data-k="-1"],[data-k="0"]) .s02-fenster{left:var(--rand);top:var(--s02-band-top,var(--s02-fenster-top,0px));--lage:58% 65%}
.s02 .buehne.gepinnt .s02-fenster{transition:left .6s var(--ease),top .6s var(--ease)}
.s02 .s02-fenster > img{transition:object-position .6s var(--ease)}
.s02 .buehne.gepinnt[data-k="4"] .s02-fenster{top:0;transition:left .6s var(--ease),top .6s var(--ease) .3s}
.js:not(.ruhig) .s02 .s02-fenster > img{transform:scale(1.06)}
.js:not(.ruhig) .s02 .s02-fenster.da > img{animation:s02-fahrt 14s var(--ease-weich) both}
@keyframes s02-fahrt{from{transform:scale(1.06)}to{transform:scale(1)}}

/* Drei Messingplatten untereinander, kompakt (Fixrunde 2, 11.10.: ohne SVG-Objekt, flaches Polster wie .platte.quer): Blocktitel mit Nummer
   gold-hell und Text hell. Die neue leuchtet auf (.licht) */
.s02 .s02-feld{position:relative;margin-top:var(--r4)}
.s02 .s02-platten{list-style:none;display:grid;row-gap:var(--r3)}
.s02 .s02-platte{padding:var(--r3) var(--r4) calc(var(--r3) + 4px)}
.s02 .s02-titel{display:flex;align-items:baseline;gap:.4em;white-space:nowrap}
.s02 .s02-text{margin-top:var(--r2);font-size:var(--t-text);line-height:var(--zh-text);max-width:var(--mass-text);text-wrap:pretty}
.s02 .buehne .s02-platte[data-ab]{transition-duration:.6s}
/* Zustände 1–2 (Fixrunde 11.10.): die noch kommenden Platten stehen schwach (32 %) an ihrem Platz statt zwei Drittel leerer Spalte; je Zustand
   leuchtet eine auf. In Zustand 0 liegt dort das Band, deshalb erst ab data-hoch 1 (nie Text über dem Foto). */
.s02 .buehne:is([data-hoch="1"],[data-hoch="2"]) .s02-platte.vor{opacity:.32;transform:none}
/* Zustand 4: alle drei verbunden, die Nieten werden golden (r 3 mit Lichthof wie .knoten, Mitte bleibt 16 px von Kante und Boden) */
.s02 .buehne[data-hoch="4"] .s02-platte::after{background:
  radial-gradient(circle,#e6c471 0 3px,#5f4715 3.5px,rgba(0,0,0,0) 4.6px) top 10px right 10px/12px 12px no-repeat,
  radial-gradient(circle,#e6c471 0 3px,#5f4715 3.5px,rgba(0,0,0,0) 4.6px) bottom 10px left 10px/12px 12px no-repeat,
  radial-gradient(circle,rgba(230,196,113,.5) 0 4px,rgba(230,196,113,0) 9px) top 7px right 7px/18px 18px no-repeat,
  radial-gradient(circle,rgba(230,196,113,.5) 0 4px,rgba(230,196,113,0) 9px) bottom 7px left 7px/18px 18px no-repeat}

/* Zustand 4: die Messinglinie zieht senkrecht durch die unteren linken Nieten der drei Platten (Nietmitte 16 px von links und von unten;
   s02.js setzt --s02-linie-top/-h). viewBox-Breite 4 = Pixelbreite 4, deshalb bleibt der Strich 2,5 px breit; Kappen stumpf. Ohne
   vector-effect (Firefox zeichnet mit non-scaling-stroke das Strichmuster trotz dashoffset 1, gemessen 11.10.). */
.s02 .s02-linie{position:absolute;left:14px;top:var(--s02-linie-top,0px);width:4px;height:var(--s02-linie-h,100%);z-index:2;pointer-events:none;transition:none;--zieht-dauer:.9s;filter:drop-shadow(0 0 6px rgba(230,196,113,.75))}
/* Beamer-fest (Advisor-Gate 11.10.): 4 px gold-hell mit Lichthof wie .puls, nur hier gescopt (system.css .loop bleibt 2,5 px für s03) */
.s02 .s02-linie .loop{stroke:var(--gold-hell);stroke-width:4}
.s02 .s02-linie path{stroke-linecap:butt}
.s02 .buehne .s02-linie.vor{opacity:1;transform:none}
.s02 .s02-schluss{margin-top:var(--r4)}
.s02 .buehne .s02-schluss[data-ab]{transition-delay:.2s}

@media (max-width:1099px){
  .s02 .s02-fenster{margin:calc(-1 * var(--abschnitt-y) * .7) calc(-1 * var(--rand)) var(--r5);top:auto;left:auto}
  .s02 .s02-kopf .lead{max-width:var(--mass-lead)}
  .s02 .s02-feld,.s02 .s02-schluss{width:auto}
  .s02 .s02-linie{display:none}
}