/* s03 · Aus einzelnen Tools wird ein intelligenter Flow (Meisterwerk, Nacht)
   Fixrunde 11.10.2026: links die Heute-Linie als Lichtspur (2,5 px kühles Licht #c3c7ce mit Hof und weichem Schein .heute-hof, sieben hohle
   Stationen .knoten.hohl, Störungszeichen in --rost-hell), rechts das Glas-∞ aus dem Imagefilm als Film-Fenster .s03-glas. Zweiter Durchgang:
   s03.js legt den Film nach der gemessenen Röhren-Mittellinie (GLAS) so, dass das Glas die Fläche zwischen den Etiketten füllt; sechs weiße
   Lichtknoten .knoten mit Hof .hof-knoten, Haarlinien .haar bis an die Glaskante und die Etiketten zünden mit dem Licht im Film (.an), der
   Impuls (Zustand 2) läuft als Lichtflare über die Mittellinie. Keine gezeichnete ∞-Linie. Jeder Selektor beginnt mit .s03. Höhen setzt s03.js an .flow:
     --fahrt       Zustand 3: der Kopf (Nummer, h2, Unterzeile) samt Abstand fährt aus dem Bild
     --bild-h      Höhe der Schaubilder in der gepinnten Bühne (Fenster − Spaltentitel − max(Kopf, Ergebnis))
     --bild-h-ein  Höhe im Modus einbild (Kopf und Ergebnis zugleich im Bild, keine Fahrt)
   Spalten ab 1880 px nebeneinander (1 : 1,4; die Spaltenreihe blutet um --rand nach rechts, damit das ∞ ≥ 45 % der Fensterbreite
   bekommt: Titel und Ergebnisliste der rechten Spalte bleiben an der Satzkante). Darunter gestapelt, die Bühne läuft im Fluss.
   Alle Beschriftungen sind HTML-Etiketten in --t-etikett; die Heute-Etiketten stehen im 8-Spalten-Raster (links an ihrer Station,
   abwechselnd über und unter der Linie), die ∞-Etiketten setzt s03.js an die gemessenen Stationen (außen, nie auf der Linie).
   Sichtbarkeit hängt an data-hoch (vortrag.js setzt .vor): Zustand 0 beide Linien, 1 Zeichen, 2 Impuls, 3 Ergebnis. */
.s03 .flow{position:relative;min-height:100vh;min-height:100svh}
.s03 .flow-buehne{padding:calc(var(--abschnitt-y) * .5) var(--rand) calc(var(--abschnitt-y) * .45)}
.s03 .fahrt{display:grid;row-gap:var(--r4)}
.s03 .flow .buehne.gepinnt .fahrt{transition:transform .6s var(--ease)}
.s03 .flow .buehne.gepinnt[data-k="3"] .fahrt{transform:translateY(calc(-1 * var(--fahrt, 0px)))}
.s03 .flow .buehne.gepinnt .spalten{grid-template-rows:auto var(--bild-h, 480px) auto}
.s03 .flow .buehne.einbild .spalten{grid-template-rows:auto var(--bild-h-ein, 420px) auto}
.s03 .flow .kopf .lead{font-size:var(--t-text);line-height:1.5;max-width:var(--mass-text)}
/* Fixrunde 2 (11.10.): die Spaltenreihe blutet um --rand − 60 px statt um --rand: das Etikett „Inhalte / Aktionen erzeugen“ stand 22 px vor dem
   Fensterrand, jetzt endet der ∞-Block 60 px weiter links (s03.js misst die Spalte, der Film legt sich neu). */
.s03{--s03-blut:calc(var(--rand) - 60px)}
.s03 .spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:var(--rinne);margin-right:calc(-1 * var(--s03-blut));min-height:0}
.s03 .spalte{display:grid;grid-row:span 3;grid-template-rows:subgrid;min-height:0}   /* Spaltentitel, Schaubilder und Listen stehen auf einer Linie */
.s03 .spalte h3{padding-bottom:var(--r2);border-bottom:1px solid var(--linie-nacht);color:var(--hell-text)}
.s03 .spalte.loop > h3,.s03 .spalte.loop > .ergebnis{margin-right:var(--s03-blut)}   /* nur das Schaubild blutet, der Text bleibt an der Satzkante */
.s03 .bild{position:relative;min-height:0}
.s03 .ergebnis{padding-top:var(--r3);color:var(--hell-text-2);line-height:1.4}
.s03 .ergebnis.gold{color:var(--hell-text)}
/* Ergebnislisten: je ein Punkt in einer Zeile, ohne Trennring (beide Spalten lesen sich als fünf Zeilen) */
@media (min-width:701px){
  .s03 .ergebnis > li{display:block}
  .s03 .ergebnis > li::after{display:none}
}
/* Die Schaubilder tragen ihre Teile einzeln ein (Linie, Knoten, Etiketten); das Bild selbst bleibt stehen */
.s03 .buehne .s03-heute-bild.vor,.s03 .buehne .s03-zeichen.vor,.s03 .buehne .s03-loop-bild.vor{opacity:1;transform:none}

/* ============ Heute: Linie mit sieben Stationen ============
   Raster: 6 gleiche Spalten + eine doppelt breite letzte für „Prozess endet / beginnt wieder / von vorn“. Station i steht an der
   linken Kante der Spalte i + 1, ihr Etikett beginnt dort (Haarlinie an der Textkante) und reicht über zwei Spalten.
   Zeile 1 Etiketten oben · Zeile 2 die Bahn der Linie (--s03-bahn-h) · Zeile 3 Etiketten unten · Zeile 4 Legende.
   Linker Einzug .45em: die erste Station beginnt an der Satzkante statt in der Marginalspalte. */
.s03 .s03-heute-bild{display:grid;align-content:center}
.s03 .s03-heute{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,2fr);
  grid-template-rows:auto var(--s03-bahn-h,clamp(130px,17vh,200px)) auto auto;padding-left:calc(var(--t-etikett) * .45)}
.s03 .s03-heute .stationen{display:contents;list-style:none}
/* Fixrunde 2 (11.10.): --t-etikett ist seitenweit +10 % gewachsen; im 8-Spalten-Raster stieß „nächstes Tool /“ bei 1920 an „Ergebnis“.
   Die Heute-Etiketten bleiben auf dem vorigen Maß (× .91 = 22,2 px bei 1920, 24,9 bei 2200), die ∞-Etiketten legt s03.js nach Messung. */
.s03 .s03-heute .etikett{font-size:calc(var(--t-etikett) * .91)}
.s03 .s03-heute .stationen > li{position:relative;z-index:1;padding-left:.55em;transition:opacity .5s var(--ease) var(--verz,0s)}
.s03 .s03-heute .stationen > li:nth-child(odd){grid-row:1;align-self:end;padding-bottom:.08em}
.s03 .s03-heute .stationen > li:nth-child(even){grid-row:3;align-self:start;padding-top:.12em}
.s03 .s03-heute .stationen > li:nth-child(1){grid-column:1 / span 2}
.s03 .s03-heute .stationen > li:nth-child(2){grid-column:2 / span 2}
.s03 .s03-heute .stationen > li:nth-child(3){grid-column:3 / span 2}
.s03 .s03-heute .stationen > li:nth-child(4){grid-column:4 / span 2}
.s03 .s03-heute .stationen > li:nth-child(5){grid-column:5 / span 2}
.s03 .s03-heute .stationen > li:nth-child(6){grid-column:6 / span 2}
.s03 .s03-heute .stationen > li:nth-child(7){grid-column:7 / span 1}
.s03 .s03-bahn{grid-row:2;grid-column:1 / -1}
.s03 .s03-linie,.s03 .s03-zeichen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.s03 .s03-zeichen{z-index:2;transition:none}
.s03 .s03-heute .stoerung{grid-row:4;grid-column:1 / -1;margin-top:var(--r3)}
/* Zeichnung als Lichtspur (Fixrunde 11.10.): Linie 2,5 px kühles Licht mit Hof (zieht .9 s, system.css §20), darunter ein weicher breiter
   Schein (.heute-hof, blendet mit der Linie ein), Stationen hohl (Nacht gefüllt, Lichtrand), Haarlinien zu den Etiketten */
.s03 .s03-linie .heute{stroke:#c3c7ce;stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(217,213,205,.55))}
.s03 .s03-linie .heute-hof{stroke:#d9d5cd;stroke-width:16;stroke-linecap:round;opacity:.11;filter:blur(7px);transition:opacity .7s var(--ease) .2s}
.s03 .s03-linie .knoten.hohl{stroke:#c3c7ce;filter:drop-shadow(0 0 5px rgba(217,213,205,.4))}
.s03 .s03-linie .station{transform-box:fill-box;transform-origin:center;transition:transform .4s var(--ease) var(--verz,0s),opacity .4s var(--ease) var(--verz,0s)}
.s03 .s03-linie .haar{stroke:rgba(245,242,234,.42);stroke-width:1;transition:opacity .5s var(--ease) var(--verz,0s)}
.js:not(.ruhig) .s03 .buehne .s03-heute-bild.vor .stationen > li,.js:not(.ruhig) .s03 .buehne .s03-heute-bild.vor .haar{opacity:0;transition-delay:0s}
.js:not(.ruhig) .s03 .buehne .s03-heute-bild.vor .heute-hof{opacity:0;transition-delay:0s}
.js:not(.ruhig) .s03 .buehne .s03-heute-bild.vor .station{transform:scale(.2);opacity:0;transition-delay:0s}
/* Störungszeichen (Zustand 1): jedes Zeichen ist eine Gruppe aus Deckstrich (Nacht, schneidet die Linie auf), kurzen Dashes und
   dem Zeichen in --rost-hell; die Gruppe springt von .3 auf 1 (0,35 s, --verz staffelt) */
.s03 .s03-zeichen g{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease) var(--verz,0s),opacity .35s var(--ease) var(--verz,0s)}
.js:not(.ruhig) .s03 .buehne .s03-zeichen.vor g{transform:scale(.3);opacity:0;transition-delay:0s}
.s03 .s03-zeichen .deck{stroke:var(--nacht);stroke-width:12;stroke-linecap:butt}
.s03 .s03-zeichen .stoer{stroke-width:2.2;filter:drop-shadow(0 0 5px rgba(232,116,76,.55))}
.s03 .s03-zeichen .direkt{stroke-dasharray:2.5 6.5;stroke-width:2;filter:none}
.s03 .s03-zeichen .station{fill:var(--nacht);stroke:var(--rost-hell);stroke-width:2}
/* Legende: Zeichen in Rost, Wörter hell */
.s03 .stoerung{list-style:none;display:flex;flex-wrap:wrap;gap:.3em 1.5em;padding:.2em 0;font-size:var(--t-etikett);line-height:1.3;font-weight:600;color:var(--hell-text)}
.s03 .stoerung li{display:flex;align-items:center;gap:.55em}
.s03 .stoerung svg{width:1.3em;height:1.3em;flex:none;color:var(--rost-hell)}

/* ============ hey LOOP: das Glas-∞ aus dem Imagefilm ============
   .s03-glas füllt .s03-acht (Nacht-Grund, beschnitten); der Film liegt darin mit --gx/--gy/--gw (s03.js) so, dass seine Röhren-Mittellinie
   (GLAS, aus dem Endbild getract) auf dem gemessenen ∞-Kasten liegt. brightness .84 + lighten: das Clip-Schwarz wird Nacht, die Röhre bleibt
   Licht, weiße Knoten bleiben darauf sichtbar. Drei SVG-Lagen darüber: .s03-halo (Höfe der Knoten), .s03-ring (Haarlinien, sechs weiße
   Lichtknoten), .s03-impuls (Lichtflare mit Schweif, ab Zustand 2 per animateMotion entlang der Mittellinie). Etiketten, „hey LOOP“ und der
   Rücklauf stehen absolut außerhalb der Röhre. Knoten und Etiketten erscheinen, wenn das Licht ihre Station erreicht (--verz aus s03.js). */
.s03 .s03-loop-bild{display:grid}
.s03 .s03-acht{position:relative;width:100%;height:100%;min-height:0}
/* Das Filmfenster blutet 64 px nach links (Rinne) und 48 px nach oben, rechts und unten über .s03-acht hinaus, und seine Ränder blenden per Maske
   in die Nacht: der Lichthof der Röhre reicht im Clip weit über das Glas, ein harter Kasten schnitt ihn an der Spaltenkante sichtbar ab
   (zweiter Durchgang 11.10.). s03.js rechnet den Versatz (offsetLeft/offsetTop) in --gx/--gy ein; das Glas selbst liegt immer im ungeblendeten Kern. */
.s03 .s03-glas{position:absolute;inset:-48px -48px -48px -64px;overflow:hidden;background:var(--nacht);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.s03 .s03-glas::after{display:none}
.s03 .s03-glas > video{inset:auto;left:var(--gx,0px);top:var(--gy,0px);width:var(--gw,100%);height:auto;aspect-ratio:16/9;object-fit:fill;filter:brightness(.84) contrast(1.03);mix-blend-mode:lighten}
.s03 .s03-halo,.s03 .s03-ring,.s03 .s03-impuls{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.s03 .s03-halo .hof-knoten{fill:var(--gold-hell);opacity:.34;filter:blur(9px);transition:opacity .7s var(--ease) var(--verz,0s)}
.js:not(.ruhig) .s03 .buehne .s03-loop-bild.vor .hof-knoten{opacity:0;transition-delay:0s}
.s03 .s03-ring .knoten{fill:#fff7e6;filter:drop-shadow(0 0 7px rgba(230,196,113,.95)) drop-shadow(0 0 18px rgba(230,196,113,.7))}   /* zweiter Hof: die Station bleibt auch auf dem hellen Kern sichtbar */
.s03 .s03-ring .haar{stroke:rgba(245,242,234,.42);stroke-width:1;transition:opacity .5s var(--ease) var(--verz,0s)}
.js:not(.ruhig) .s03 .buehne .s03-loop-bild.vor .haar{opacity:0;transition-delay:0s}
.s03 .s03-ring .st{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease) var(--verz,0s),opacity .35s var(--ease) var(--verz,0s)}
.s03 .s03-ring .st.an{animation:s03-zuend .7s var(--ease)}
@keyframes s03-zuend{0%{transform:scale(1)}30%{transform:scale(2.1);filter:drop-shadow(0 0 16px rgba(255,247,230,1))}100%{transform:scale(1)}}
.s03 .s03-ring .st.pop{animation:s03-zuend-2 .7s var(--ease)}   /* erneutes Zünden beim Impuls (Zustand 2), ohne .an zu nehmen */
@keyframes s03-zuend-2{0%{transform:scale(1)}30%{transform:scale(2.1);filter:drop-shadow(0 0 16px rgba(255,247,230,1))}100%{transform:scale(1)}}
/* Zünden mit dem Licht (zweiter Durchgang 11.10.): s03.js setzt .an, sobald der Film die Station erreicht hat (Zündzeiten aus dem Clip);
   bis dahin stehen Knoten, Höfe, Haarlinien, Etiketten, „hey LOOP“ und der Rücklauf unsichtbar. Ohne JS und bei html.ruhig steht alles. */
.js:not(.ruhig) .s03 .s03-ring .st:not(.an){transform:scale(.2);opacity:0}
.js:not(.ruhig) .s03 .s03-halo .hof-knoten:not(.an),.js:not(.ruhig) .s03 .s03-ring .haar:not(.an),.js:not(.ruhig) .s03 .s03-acht .stationen > li:not(.an),
.js:not(.ruhig) .s03 .mitte:not(.an),.js:not(.ruhig) .s03 .rueck:not(.an){opacity:0}
.s03 .mitte{--verz:.25s}
.s03 .rueck{--verz:.5s}
.s03 .s03-impuls .puls-punkt{fill:#fff7e6;filter:drop-shadow(0 0 12px rgba(230,196,113,1))}
.s03 .s03-impuls .schweif{fill:var(--gold-hell);opacity:.45;filter:blur(3px)}
.s03 .s03-impuls .schweif-2{fill:var(--gold-hell);opacity:.22;filter:blur(6px)}
.s03 .buehne .s03-impuls.vor{transform:none}
.js .s03 .s03-acht .stationen{list-style:none}
.s03 .s03-acht .stationen > li{transition:opacity .5s var(--ease) var(--verz,0s)}
.js .s03 .s03-acht:not(.liste) .stationen > li{position:absolute;left:0;top:0;width:max-content;max-width:11em}
.js .s03 .s03-acht:not(.liste) .stationen > li.re{text-align:right}
.js .s03 .s03-acht:not(.liste) .stationen .nb{display:block}   /* Zeilenfall der ∞-Beschriftungen steht im Markup */
.s03 .mitte{font-family:var(--sans);font-weight:600;font-size:var(--t-etikett);line-height:1;letter-spacing:-.01em;color:var(--gold-hell);white-space:nowrap;transition:opacity .6s var(--ease) var(--verz,0s)}
.s03 .mitte .m-hey{font-weight:400}
.js .s03 .mitte{position:absolute;left:0;top:0}
.s03 .rueck{display:inline-flex;align-items:center;gap:.45em;font-family:var(--serif);font-style:italic;font-weight:450;font-size:var(--t-etikett);line-height:1.2;color:var(--gold-hell);white-space:nowrap;transition:opacity .6s var(--ease) var(--verz,0s)}
.s03 .rueck svg{width:1.15em;height:1.15em;flex:none}
.js .s03 .s03-acht:not(.liste) .rueck{position:absolute;left:0;top:0}
.js:not(.ruhig) .s03 .buehne .s03-loop-bild.vor .stationen > li,.js:not(.ruhig) .s03 .buehne .s03-loop-bild.vor .mitte,
.js:not(.ruhig) .s03 .buehne .s03-loop-bild.vor .rueck{opacity:0;transition-delay:0s}
.js:not(.ruhig) .s03 .buehne .s03-loop-bild.vor .st{transform:scale(.2);opacity:0;transition-delay:0s}
/* Liste (s03.js setzt .liste in schmalen Spalten) und ohne JS: Stationen untereinander mit Lichtpunkt als Aufzählungszeichen */
.s03 .s03-acht.liste{height:auto;padding-top:var(--acht-h,320px)}
.s03 .s03-acht.liste .s03-halo,.s03 .s03-acht.liste .s03-ring,.s03 .s03-acht.liste .s03-impuls,.s03 .s03-acht.liste .s03-glas{height:var(--acht-h,320px)}
html:not(.js) .s03 .s03-acht{height:auto;padding-top:0}
html:not(.js) .s03 .s03-acht .s03-halo,html:not(.js) .s03 .s03-acht .s03-ring,html:not(.js) .s03 .s03-acht .s03-impuls{display:none}
html:not(.js) .s03 .s03-glas{position:relative;inset:auto;aspect-ratio:16/9;margin-bottom:var(--r3);-webkit-mask-image:none;mask-image:none}
html:not(.js) .s03 .s03-glas > video{left:0;top:0;width:100%}
.s03 .s03-acht.liste .stationen,html:not(.js) .s03 .s03-acht .stationen{display:grid;gap:.45em;padding-top:var(--r3)}
.s03 .s03-acht.liste .stationen > li,html:not(.js) .s03 .s03-acht .stationen > li{position:relative;padding-left:1.5em}
.s03 .s03-acht.liste .stationen > li::before,html:not(.js) .s03 .s03-acht .stationen > li::before{content:'';position:absolute;left:.25em;top:.4em;width:.55em;height:.55em;border-radius:50%;background:var(--gold-hell);box-shadow:0 0 8px rgba(230,196,113,.8)}
.s03 .s03-acht.liste .rueck,html:not(.js) .s03 .rueck{margin-top:var(--r3)}
html:not(.js) .s03 .mitte{margin-top:var(--r3)}

/* ============ Modi der Bühne (vortrag.js) ============ gepinnt = sticky 4 × 100vh · einbild = ein Bild im Endzustand · frei = im Fluss */
.s03 .flow .buehne.einbild > .buehne-bild{height:100vh}
.s03 .flow .buehne.frei > .buehne-bild{min-height:auto}
.s03 .flow .buehne.frei .bild{margin-top:var(--r4)}
.s03 .flow .buehne.frei .loop .bild{height:clamp(420px,52vw,660px)}
.s03 .flow .buehne .loop .bild.liste{height:auto}

/* ============ Quintessenz ============
   Fixrunde 11.10.: rechts das Standbild der Impulsbahn als Fenster (.q-fenster, 50 % der Breite, volle Höhe), abgedunkelt (brightness .6) und
   links über 30 % seiner Breite in die Nacht verlaufend; Titel, Aussagen und Schlusszeile bleiben links in 54 % minus Rinne, kein Text liegt
   auf dem Bild. Je Aussage: Rolle links, die zwei Sätze rechts, darunter die Tinte-Linie (24 em breit) als Zeichen der Aussage. */
.s03 .quint{display:grid;grid-template-rows:auto 1fr auto;border-top:1px solid var(--linie-nacht);overflow:hidden}
.s03 .q-fenster{position:absolute;top:0;right:0;bottom:0;width:50%;--lage:62% 50%;background:var(--nacht)}
.s03 .q-fenster > img{filter:brightness(.6) saturate(.92)}
.s03 .q-fenster::after{box-shadow:none;background:linear-gradient(90deg,var(--nacht) 0,rgba(11,13,16,.6) 12%,rgba(11,13,16,0) 30%)}
.s03 .quint > :not(.q-fenster){position:relative;z-index:1;width:calc(100% * (1 - var(--halb)) - var(--rinne))}
.s03 .quint-titel{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:var(--zh-h2);letter-spacing:-.02em;color:var(--hell-text)}
.s03 .aussagen{display:grid;align-content:center;padding:var(--r3) 0}
.s03 .aussage{display:grid;grid-template-columns:calc(var(--t-h3) * 4.4) minmax(0,1fr);grid-template-rows:auto auto;align-items:start;column-gap:var(--r4);padding:var(--r3) 0;border-bottom:1px solid var(--linie-nacht)}
.s03 .aussage:first-child{border-top:1px solid var(--linie-nacht)}
.s03 .aussage h4{grid-column:1;grid-row:1;padding-top:.12em;white-space:nowrap;font-family:var(--serif);font-weight:600;font-size:var(--t-h3);line-height:var(--zh-h3);letter-spacing:-.01em;color:var(--hell-text-2)}
.s03 .aussage.loop-z h4{color:var(--gold-hell)}
.s03 .aussage > div{grid-column:2;grid-row:1}
.s03 .aussage p{font-family:var(--serif);font-weight:400;font-size:calc(var(--t-lead) * 1.08);line-height:1.26;letter-spacing:-.012em;color:var(--hell-text);text-wrap:balance}
.s03 .aussage p + p{margin-top:.18em}
.s03 .aussage p b{font-weight:640}
.s03 .q-obj{grid-column:2;grid-row:2;width:min(100%,24em);height:auto;aspect-ratio:420/120;margin-top:var(--r2)}
.s03 .q-obj .q-punkt{r:5}
.s03 .q-obj .stoer{stroke-width:2.5}
.s03 .q-obj .q-ende{stroke-width:3}
.s03 .q-obj .q-halo{stroke:var(--gold);stroke-width:12;opacity:0;filter:blur(6px);transition:opacity .8s var(--ease) .4s}
.s03 .aussage.da .q-halo,html:not(.js) .s03 .q-halo,.ruhig .s03 .q-halo{opacity:.18}
.s03 .q-obj .q-bahn{filter:drop-shadow(0 0 5px rgba(230,196,113,.55))}
.s03 .q-obj .knoten{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease) var(--verz,0s),opacity .35s var(--ease) var(--verz,0s)}
.js:not(.ruhig) .s03 .aussage:not(.da) .knoten,.js:not(.ruhig) .s03 .aussage:not(.da) .q-puls{opacity:0;transform:scale(.2);transition-delay:0s}
.s03 .q-obj .q-puls{transition:opacity .4s var(--ease) .7s}
.s03 .quint .schluss-zeile{margin-top:var(--r3)}

/* Unter 1880 px stehen die Schaubilder übereinander (nebeneinander reicht die Breite nicht für Etiketten in Fließtextgröße); die Bühne läuft im Fluss */
@media (max-width:1879px){
  .s03 .spalten{grid-template-columns:minmax(0,1fr);row-gap:var(--r6);margin-right:0}
  .s03 .spalte{grid-row:auto;grid-template-rows:auto auto auto}
  .s03 .spalte.loop > h3,.s03 .spalte.loop > .ergebnis{margin-right:0}
  .s03 .flow .buehne.frei .loop .bild{height:clamp(420px,46vw,620px)}
}
@media (max-width:1099px){
  .s03 .q-fenster{display:none}
  .s03 .quint > :not(.q-fenster){width:auto}
  .s03 .aussage{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .s03 .aussage h4,.s03 .aussage > div,.s03 .q-obj{grid-column:1;grid-row:auto}
}
/* Unter 760 px hängt die Heute-Linie senkrecht: Stationen untereinander, Etiketten rechts daneben, die Übergabe-Station (3.) nach rechts versetzt */
@media (max-width:759px){
  .s03 .s03-heute{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:1.25em;padding-left:0;--s03-lift:2.6em}
  .s03 .s03-heute .stationen > li:nth-child(n){grid-column:1;grid-row:auto;align-self:auto;padding:0 0 0 2.6em}
  .s03 .s03-heute .stationen > li:nth-child(3){padding-left:calc(2.6em + var(--s03-lift))}
  .s03 .s03-bahn{display:none}
  .s03 .s03-heute .stoerung{grid-row:auto;margin-top:var(--r3)}
  .s03 .stoerung{gap:.2em 1.2em}
}
@media (max-width:700px){
  .s03 .flow .buehne.frei .loop .bild{height:auto}
  .s03 .q-obj{width:100%}
}

/* 11.10. Überlauf 390: das Glas-Fenster ragt mit seinem negativen inset 25 px über die Seitenbreite (Prüfung 13) */
@media (max-width:759px){.s03 .s03-glas{inset:0}}