/* Abschnitt „Ablauf“: sechs Stationen statt der Leistungskacheln. Am Computer links die Texte, rechts die Bühne mit dem Auto
   (klebt in der Mitte des Fensters); am Handy klebt die Bühne oben unter dem Kopf, die Texte laufen darunter durch.
   Ohne Skript: keine Bühne, alle Stationen gut lesbar als Liste. */
.ablauf{padding-top:56px;padding-bottom:40px}
.ablauf-kopf h2{margin-bottom:0}
.ablauf-lead{margin:18px 0 0;max-width:46ch;font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--muted)}
.ablauf-raster{--b-oben:calc(76px + (100svh - 76px - var(--gm-hoehe) - var(--b-hoehe)) / 2);--b-hoehe:min(64svh,600px);
  display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:0 5%;margin-top:8px}
.buehne{grid-column:2;grid-row:1;position:sticky;top:var(--b-oben);height:var(--b-hoehe);align-self:start}
.buehne canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
html:not(.js) .buehne{display:none}
html:not(.js) .ablauf-raster{grid-template-columns:minmax(0,760px)}
.stationen{grid-column:1;grid-row:1;list-style:none;margin:0;padding:8svh 0 22svh}
/* jede Station ist ein hoher Block; ihr Text bleibt stehen, solange die Station läuft (wie eine Folie) */
.station{min-height:88svh;scroll-margin-top:calc(42svh - 90px)}   /* html hat scroll-padding-top:90px, das zählt dazu */
.st-text{position:sticky;top:calc(var(--b-oben) + var(--b-hoehe) * .26)}
.js .station{opacity:0;transition:opacity .45s}   /* nur die laufende Station ist zu sehen, keine blassen Reste darüber */
.js .station.aktiv{opacity:1}
.st-nr{font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--muted)}
.st-nr::after{content:" / 06";color:#5d6067}
.station h3{font-size:clamp(28px,2.7vw,38px);font-weight:650;letter-spacing:-.04em;line-height:1.08;margin:16px 0 14px}
.station p{margin:0;font-size:17px;line-height:1.6;color:var(--muted);max-width:36ch}
.station .st-extra{margin-top:14px;font-size:15px}
.station .st-extra b{font-weight:600;color:var(--ink)}
.komplett{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:8px;padding:26px 0 0;border-top:1px solid var(--line)}
.komplett p{margin:0;font-size:18px;color:var(--muted)}
.komplett b{font-weight:600;color:var(--ink)}
html:not(.js) .station{min-height:0;padding:28px 0;border-top:1px solid var(--line)}
html:not(.js) .st-text{position:static}

@media(max-width:900px){
  .ablauf-raster{display:block;margin-top:24px}
  /* Bühne randlos; Bühne und Text stehen zusammen in der Mitte zwischen Kopf und Glanzmesser (sonst unten eine große Lücke).
     Gerechnet mit einer üblichen Texthöhe (--t-platz); der längste Text (Innenreinigung) passt trotzdem über den Glanzmesser.
     Unten weicher Übergang, damit die Texte darunter verschwinden. */
  .ablauf-raster{--kopf-h:72px;--b-h:60vw;--t-platz:180px;
    --b-top:calc(var(--kopf-h) + max(0px, (100svh - var(--kopf-h) - var(--gm-hoehe) - env(safe-area-inset-bottom,0px) - var(--b-h) - 22px - var(--t-platz)) / 2));
    --b-unten:calc(var(--b-top) + var(--b-h))}
  .buehne{position:sticky;top:var(--b-top);z-index:2;height:auto;aspect-ratio:1000/600;margin-inline:calc((100% - 100vw) / 2);background:var(--paper)}
  .buehne::after{content:"";position:absolute;left:0;right:0;top:100%;height:36px;background:linear-gradient(var(--paper),transparent);pointer-events:none}
  .stationen{padding:6svh 0 24svh}
  .station{min-height:72svh;scroll-margin-top:calc(var(--b-unten) - 82px)}
  .st-text{top:calc(var(--b-unten) + 22px)}
  .station h3{font-size:30px;margin:12px 0 10px}
  .station p{font-size:16px}
}
@media(min-width:701px) and (max-width:900px){.ablauf-raster{--kopf-h:76px;--b-h:56vw}.buehne{aspect-ratio:1000/560}}
@media(prefers-reduced-motion:reduce){.js .station{transition:none}}