/* s04 · Zentral gesteuert. Dezentral genutzt. (Meisterwerk, Nacht) · Fixrunde 11.10., zweiter Durchgang: Band statt Kasten.
   Der BUSINESS CORE ist ein Film-Band (.fenster.vorhang) über die volle Satzbreite wie das Maschinenraum-Band in s02. Höhe --s04-h setzt
   s04.js: was unter Kopf, BUSINESS CORE und der Titelzeile in eine Bildschirmhöhe passt und in den Zuständen 2/3 (Kopf draußen, Listen da)
   noch passt, 34–56 vh (2200 × 1100 ≈ 42 %, 1920 × 1080 ≈ 47 %). Darüber mittig BUSINESS CORE mit den vier Punkten, darunter die Zeile
   .s04-unten: INTERN an K0, „hey LOOP“ in der Mitte, NETZWERK / MARKT an der rechten Satzkante; der Knotenraum (Faden + Lichtknoten,
   --s04-unten-pad) liegt zwischen Bandunterkante und Titeln. Zustände 2 und 3: der Kopf fährt nach oben (--fahrt = Kopfhöhe + Abstand, s04.js),
   Rollen und Fähigkeiten kommen unter die Titel (data-ab im Markup). Die Fäden zeichnet s04.js als SVG (.s04-leitungen) aus den gemessenen
   Lagen, zwei Gruppen: data-ab 0 (Faden von den Punkten in die Bandoberkante, zwei Fäden aus der Bandunterkante zu den Lichtknoten über
   INTERN und NETZWERK / MARKT: schon in Zustand 0 hängt nichts im Leeren), data-ab 1 (die zwei Pulse, 4 px --gold-hell, danach zünden die
   Knoten und die Titel werden hell). Jeder Selektor beginnt mit .s04. */
.s04 .s04-prinzip{position:relative;min-height:100vh;min-height:100svh}
.s04 .s04-buehne{padding:calc(var(--abschnitt-y) * .5) var(--rand) calc(var(--abschnitt-y) * .45)}
.s04 .s04-fahrt{display:grid;row-gap:var(--r4)}
.s04 .buehne.gepinnt .s04-fahrt{transition:transform .6s var(--ease)}
.s04 .buehne.gepinnt:is([data-k="2"],[data-k="3"]) .s04-fahrt{transform:translateY(calc(-1 * var(--fahrt,0px)))}
.s04 .s04-lead{font-size:var(--t-text);line-height:1.5;max-width:var(--mass-text)}
.s04 .s04-dia{position:relative;display:grid;grid-template-rows:auto var(--s04-h,35vh) auto;row-gap:var(--r3)}   /* Fixrunde 2 (11.10.): Band flacher, Deckel 34,5 vh = 380 px bei 1100 (s04.js) */
.s04 .s04-leitungen{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}   /* Größe und viewBox setzt s04.js in Pixeln (kein CSS-Maß: sonst skaliert der viewBox die Zeichnung) */

/* ---------- Typografie der Knoten: Titel versal in Inter 600, Rollen hell, Fähigkeiten gold-hell (das, was hey LOOP bereitstellt) ---------- */
.s04 .s04-titel{font-family:var(--sans);font-weight:600;font-size:var(--t-lead);line-height:1.15;letter-spacing:.075em;color:var(--hell-text);white-space:nowrap}
.s04 .s04-kern .s04-titel{color:var(--gold-hell)}
.s04 .s04-punkte,.s04 .s04-rollen{font-size:var(--t-lead);line-height:1.38;font-weight:500;color:var(--hell-text)}
.s04 .s04-faehig{font-size:var(--t-text);line-height:1.5;font-weight:400;color:var(--gold-hell)}
/* Rollen als 2 + 2 im Raster (der Ring hängt am ersten Punkt jeder Zeile, system.css §10 li::after), Fähigkeiten je eine Zeile ohne Ring */
@media (min-width:701px){
  .s04 .s04-rollen{display:grid;grid-template-columns:max-content max-content;justify-content:start}
  .s04 .s04-rollen > li:nth-child(even)::after{display:none}
  .s04 .s04-faehig > li{display:block}
  .s04 .s04-faehig > li::after{display:none}
}
.s04 .s04-titel + .zeile{margin-top:var(--r2)}
.s04 .s04-rollen + .s04-faehig{margin-top:calc(var(--r2) * 1.2)}
.s04 .s04-mitte{font-family:var(--sans);font-size:var(--t-h3);line-height:1.02;letter-spacing:-.012em;color:var(--gold-hell);white-space:nowrap}
.s04 .s04-hey{font-weight:400}
.s04 .s04-loop{font-weight:600}

/* ---------- Lage: BUSINESS CORE mittig über dem Band, das Band über die volle Breite, darunter INTERN · hey LOOP · NETZWERK / MARKT ---------- */
.s04 .s04-kern{grid-row:1;justify-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:var(--r3)}   /* r3: Platz für den Faden zum Band */
.s04 .s04-fenster{grid-row:2;width:100%;height:100%;--lage:50% 50%}
.s04 .s04-unten{grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"intern mitte netz";column-gap:var(--r4);align-items:start;padding-top:var(--s04-unten-pad,0px)}
.s04 .s04-intern{grid-area:intern}
.s04 .s04-mitte{grid-area:mitte;justify-self:center}
.s04 .s04-netz{grid-area:netz;justify-self:end}

/* ---------- Zeichnung (SVG): Fäden 2 px gold mit Glow (Fixrunde 2, 11.10.), Lichtknoten, Puls 4 px gold-hell ---------- */
.s04 .s04-leitungen .loop{stroke-width:2;filter:drop-shadow(0 0 6px rgba(230,196,113,.5))}
.s04 .s04-leitungen .knoten{transition:opacity .4s var(--ease) var(--verz,0s)}
.s04 .s04-leitungen .s04-puls{stroke-dasharray:.3 1;stroke-dashoffset:.3;opacity:0}
.s04 .s04-leitungen g.vor{opacity:1;transform:none}   /* die Gruppe bleibt stehen, ihre Striche zeichnen sich (system.css §20 kennt nur .tinte[data-ab]) */
.js:not(.ruhig) .s04 .s04-leitungen g[data-ab]:not(.vor) .zieht{stroke-dashoffset:0}
.js:not(.ruhig) .s04 .s04-leitungen g.vor .zieht{transition:none}
.js:not(.ruhig) .s04 .s04-leitungen g.vor .knoten{opacity:0;transition-delay:0s}
.js:not(.ruhig) .s04 .s04-leitungen g[data-ab]:not(.vor) .s04-puls{animation:s04-puls var(--puls-dauer,.6s) linear var(--verz,0s) forwards}
@keyframes s04-puls{0%{opacity:1;stroke-dashoffset:.3}88%{opacity:1}100%{opacity:0;stroke-dashoffset:-1}}
.s04 .s04-leitungen .knoten.an{animation:s04-zuend .8s var(--ease)}
@keyframes s04-zuend{0%{transform:scale(1)}30%{transform:scale(2);filter:drop-shadow(0 0 14px rgba(230,196,113,1))}100%{transform:scale(1)}}
.s04 .s04-leitungen .knoten{transform-box:fill-box;transform-origin:center}

/* ---------- Erscheinen (data-hoch über .vor): die Titel stehen gedämpft von Anfang an, verbunden über die Fäden; mit dem Puls (Zustand 1)
   zünden die Knoten und die Titel werden hell (.an, s04.js); Rollen und Fähigkeiten kommen in 2 und 3, sobald die Kamerafahrt läuft ---------- */
.s04 .buehne .s04-seite [data-ab]{transition-delay:.2s}
.s04 .s04-seite .s04-titel{transition:color .7s var(--ease)}
.js .s04 .s04-seite:not(.an) .s04-titel{color:var(--hell-text-2)}

/* ---------- Modi der Bühne (vortrag.js) ---------- */
.s04 .buehne.einbild > .buehne-bild{height:100vh}
.s04 .buehne.frei > .buehne-bild{min-height:auto}

/* ---------- unter 1880 px: gestapelt (frei), Band 16:9, darunter „hey LOOP“ und die beiden Blöcke nebeneinander, keine Fäden ---------- */
@media (max-width:1879px){
  .s04 .s04-dia{grid-template-rows:auto auto auto}
  .s04 .s04-fenster{height:auto;aspect-ratio:16/9}
  .s04 .s04-unten{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"mitte mitte" "intern netz";row-gap:var(--r4);padding-top:0}
  .s04 .s04-netz{justify-self:start}
  .s04 .buehne .s04-seite [data-ab]{transition-delay:0s}
  .s04 .s04-leitungen{display:none}
}
@media (max-width:1099px){
  .s04 .s04-fenster{margin-inline:calc(-1 * var(--rand));width:auto}   /* das Band blutet an beide Kanten */
}
@media (max-width:700px){
  .s04 .s04-unten{grid-template-columns:minmax(0,1fr);grid-template-areas:"mitte" "intern" "netz"}
  .s04 .s04-titel{white-space:normal}
}