/* 07 Wie ein Projekt läuft (Entwurf, 23.10.2026): drei Fassungen zum Vergleich, B Fahrwasser, C Zwei Linien und die Mischung BC.
   Copy aus dem Konzept, Satz 3 nach Jonah neu (Entwurf). Dezent: nichts läuft in Schleife, Sonne nur für einen Zustand.
   Farben über die Kanäle aus quelle/thema.css, damit Tag und Nacht ohne Zusatz gehen. Skript: quelle/ablauf07.js. */
.ablauf { overflow-x: clip; padding-bottom: 0; }   /* unten nichts extra: der Abstand zur nächsten Section ist ihr --abstand-oben (23.10. spät) */   /* clip, nicht hidden: sticky bleibt; Karte und Kurs laufen bis an den Rand */
.ablauf-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 24px 0; }
.ablauf-kopf .abschnitt-titel { margin: 0; padding-right: 28px; }
.ablauf-schluss { margin: 0; padding-left: clamp(20px, 3vw, 56px); max-width: 38ch; color: var(--leise); font-size: clamp(17px, 15px + .4vw, 21px); line-height: 1.45;
                  letter-spacing: -.008em; text-wrap: pretty; }
.ablauf-schritte { list-style: none; margin: 0; padding: 0; }
.schritt-nr { margin: 0; font-weight: 300; font-size: clamp(40px, 22px + 1.8vw, 64px); line-height: 1; letter-spacing: -.04em; color: rgb(var(--vg-k) / .42); }
.schritt-titel { margin: 0; font: 400 clamp(22px, 16px + .7vw, 30px)/1.12 var(--schrift); letter-spacing: -.024em; text-wrap: balance; }
.schritt-satz { margin: 12px 0 0; max-width: 32ch; color: var(--leise); font-size: clamp(16px, 15px + .25vw, 18px); line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }

/* ---------- die Striche (C und BC), in Bildschirmpixeln ---------- */
.ablauf svg { display: block; max-width: none; overflow: visible; }
.st-linie { fill: none; stroke: rgb(var(--vg-k) / .8); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.st-leise { stroke: rgb(var(--vg-k) / .45); }
.st-partner { stroke: rgb(var(--vg-k) / .5); stroke-dasharray: 3 5; }
.st-pfeil { fill: none; stroke: rgb(var(--vg-k) / .55); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.st-boje { fill: var(--nacht); stroke: rgb(var(--vg-k) / .75); stroke-width: 1.4; transition: stroke .5s var(--aus); }
.st-kern { fill: rgb(var(--vg-k) / .85); transition: fill .5s var(--aus); }
.st-kern.leise { fill: rgb(var(--vg-k) / .5); }
.st-uhr { fill: none; stroke: rgb(var(--vg-k) / .7); stroke-width: 1.2; stroke-linecap: round; }
.st-voll { fill: rgb(var(--vg-k) / .62); }
.st-mass { fill: none; stroke: rgb(var(--vg-k) / .5); stroke-width: 1.1; stroke-linecap: round; }
.st-kurs { fill: none; stroke: rgb(var(--vg-k) / .72); stroke-width: 1.6; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.st-ping { fill: none; stroke: rgb(var(--vg-k) / .34); stroke-width: 1.2; }
.st-ping.p1 { stroke: rgb(var(--vg-k) / .18); }
.st-schild { font: 500 13px/1 var(--schrift); letter-spacing: -.005em; fill: rgb(var(--vg-k) / .78); paint-order: stroke; stroke: var(--nacht); stroke-width: 6px; stroke-linejoin: round; }
.st-schild.leise { fill: rgb(var(--vg-k) / .5); }
.ablauf.fertig .st-launch { stroke: var(--sonne); }
.ablauf.fertig .st-launch-kern { fill: var(--sonne); }

/* ====================================================================== C Zwei Linien: treppab durch vier Spalten */
.ablauf[data-variante="c"] .ablauf-schritte { margin-top: clamp(56px, 6vw, 104px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ablauf[data-variante="c"] .ablauf-schritt { position: relative; padding-right: 28px; }
.ablauf[data-variante="c"] .ablauf-schritt:nth-child(2) { margin-top: var(--stufe, 60px); }
.ablauf[data-variante="c"] .ablauf-schritt:nth-child(3) { margin-top: calc(var(--stufe, 60px) * 2); }
.ablauf[data-variante="c"] .ablauf-schritt:nth-child(4) { margin-top: calc(var(--stufe, 60px) * 3); }
.ablauf[data-variante="c"] .schritt-strich { position: relative; z-index: 1; height: 132px; }   /* Strichfeld: die Linie liegt in der Mitte, Platz bis zur Zahl */
.ablauf[data-variante="c"] .schritt-nr { margin-top: 32px; margin-bottom: 14px; }
.js .ablauf[data-variante="c"]:not([data-bewegung]) .ablauf-schritt :is(.schritt-nr, .schritt-titel, .schritt-satz) { opacity: .35; translate: 0 8px;
  transition: opacity .8s var(--aus) .35s, translate .9s var(--aus) .35s; }
.js .ablauf[data-variante="c"]:not([data-bewegung]) .ablauf-schritt.gezeichnet :is(.schritt-nr, .schritt-titel, .schritt-satz) { opacity: 1; translate: 0 0; }
.js .ablauf[data-variante="c"]:not([data-bewegung]) .ablauf-schritt.gezeichnet .schritt-nr { opacity: .55; }

/* ---------- C aufgefrischt (23.10.2026): Kursspitze, die Zahl zählt weiter, Titel und Satz zeilenweise aus Masken, Bausteine nacheinander.
   Alles einmal, nichts in Schleife; die Sonne steht für die Spitze und danach für die Launch-Boje. Zeiten und Reihenfolge in ablauf07.js. */
.ablauf[data-bewegung="neu"] .schritt-nr { height: 1em; overflow: clip; color: rgb(var(--vg-k) / .24); transition: color 1.1s var(--aus); }
.ablauf[data-bewegung="neu"] .ablauf-schritt.jetzt .schritt-nr { color: rgb(var(--vg-k) / .72); transition-duration: .35s; }
.nr-rolle, .nr-rolle > span { display: block; }
.nr-rolle > span { height: 1em; }
.js .ablauf[data-bewegung="neu"] .nr-rolle { opacity: 0; transition: translate 1.1s var(--sanft), opacity .35s var(--aus); }
.js .ablauf[data-bewegung="neu"] .ablauf-schritt.da .nr-rolle { translate: 0 -50%; opacity: 1; }
.ablauf[data-bewegung="neu"] .zeile { display: block; overflow-x: visible; overflow-y: clip; padding-bottom: .16em; margin-bottom: -.16em; }
.ablauf[data-bewegung="neu"] .zeile > span { display: inline-block; white-space: nowrap; }
.js .ablauf[data-bewegung="neu"] .zeile > span { translate: 0 115%; transition: translate 1.05s var(--sanft) var(--v, 0s); }
.js .ablauf[data-bewegung="neu"] .ablauf-schritt.da .zeile > span { translate: 0 0; }
/* Kursspitze wie in 06 und in B: Ring und Punkt in Sonne; der Weg liegt unsichtbar daneben */
.c-spitze { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; will-change: transform; }
.c-spitze-form { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; opacity: 0; scale: .5; transition: opacity .35s var(--aus), scale .5s var(--aus); }
.c-spitze-form::before, .c-spitze-form::after { content: ""; position: absolute; border-radius: 50%; }
.c-spitze-form::before { inset: 0; box-shadow: inset 0 0 0 1.2px var(--sonne); opacity: .5; }
.c-spitze-form::after { left: 6px; top: 6px; width: 8px; height: 8px; background: var(--sonne); }
.c-spitze.da .c-spitze-form { opacity: 1; scale: 1; }
.c-weg { position: absolute; left: 0; top: 0; overflow: visible; visibility: hidden; pointer-events: none; }
/* Bausteine: auf (Schild, Marken), Knall (Bojen, ab 55 %), Füllen (Felder, Maß von links), Ziehen (Viertelstunde, Design) */
.js .ablauf[data-bewegung="neu"] .st-auf { opacity: 0; translate: 0 5px; transition: opacity .6s var(--aus) var(--v, 0s), translate .8s var(--aus) var(--v, 0s); }
.js .ablauf[data-bewegung="neu"] .st-knall { opacity: 0; scale: .55; transform-box: fill-box; transform-origin: center;
                                           transition: opacity .3s var(--aus), scale .6s var(--sanft), stroke .5s var(--aus), fill .5s var(--aus); }
.js .ablauf[data-bewegung="neu"] .st-fuell { scale: 0 1; transform-box: fill-box; transform-origin: 0 50%; transition: scale .45s var(--aus) var(--v, 0s); }
.js .ablauf[data-bewegung="neu"] .st-mass-ende { opacity: 0; translate: calc(var(--weg) * -1) 0; transition: translate .45s var(--aus), opacity .2s var(--aus); }
.js .ablauf[data-bewegung="neu"] .st-zieh { opacity: 0; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
                                          transition: stroke-dashoffset var(--dauer, .7s) cubic-bezier(.3, .1, .3, 1), opacity .1s linear; }
.js .ablauf[data-bewegung="neu"] :is(.st-auf, .st-knall, .st-mass-ende).da { opacity: 1; translate: 0 0; scale: 1; }
.js .ablauf[data-bewegung="neu"] .st-fuell.da { scale: 1 1; }
.js .ablauf[data-bewegung="neu"] .st-zieh.da { opacity: 1; stroke-dashoffset: 0; }
.st-puls { fill: none; stroke: var(--sonne); stroke-width: 1.2; opacity: 0; }
.ablauf.ohne-uebergang, .ablauf.ohne-uebergang * { transition: none !important; }

/* ====================================================================== BC: die Karte über die ganze Breite, darunter die vier Punkte */
.ablauf-band { position: relative; overflow: clip; height: clamp(260px, 22vw + 40px, 420px); margin: clamp(40px, 5vw, 88px) calc(var(--rand) * -1) 0;
               border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.ablauf-band svg { position: absolute; left: 0; top: 0; }
.ablauf-band .band-karte { -webkit-mask-image: none; }
.ablauf[data-variante="bc"] .ablauf-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ablauf[data-variante="bc"] .ablauf-schritt { position: relative; padding: 40px 28px 0 0; transition: opacity .6s var(--aus); }
.ablauf[data-variante="bc"] .ablauf-schritt + .ablauf-schritt { border-left: 1px solid var(--zl); padding-left: 28px; }
.ablauf[data-variante="bc"] .ablauf-schritt::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%;
                                                       background: var(--nacht); box-shadow: inset 0 0 0 1.5px rgb(var(--vg-k) / .6); transition: background-color .4s var(--aus), box-shadow .4s var(--aus); }
.ablauf[data-variante="bc"] .ablauf-schritt + .ablauf-schritt::before { left: -5px; }
.ablauf[data-variante="bc"] .schritt-strich { display: none; }
.ablauf[data-variante="bc"] .schritt-nr { margin-bottom: 14px; font-size: clamp(32px, 20px + 1.2vw, 48px); }
.js .ablauf[data-variante="bc"] .ablauf-schritt { opacity: .4; }
.js .ablauf[data-variante="bc"] .ablauf-schritt:is(.an, .vorbei), .ablauf[data-variante="bc"].fertig .ablauf-schritt { opacity: 1; }
.ablauf[data-variante="bc"] .ablauf-schritt.an::before { background: var(--sonne); box-shadow: none; }

/* ====================================================================== B Fahrwasser: die Section steht, die Karte zieht seitlich durch */
.ablauf[data-variante="b"] { padding-bottom: clamp(80px, 6vw + 20px, 160px); }
.ablauf-fahrt { position: relative; }
.js .ablauf-fahrt { height: calc(100svh - var(--kopf) + 150vh); }
.ablauf-buehne .abschnitt-titel { max-width: none; }   /* in der stehenden Bühne auf einer Zeile, sonst bleibt der Karte zu wenig Höhe */
.ablauf-buehne { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100svh - var(--kopf)); min-height: 560px; padding: clamp(24px, 5vh, 64px) 0 clamp(28px, 5vh, 56px); }
.js .ablauf-buehne { position: sticky; top: var(--kopf); }
.ablauf-karte { position: relative; margin: clamp(20px, 3.5vh, 44px) calc(var(--rand) * -1); min-height: 220px; overflow: clip;
                border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.karte-svg { position: absolute; left: 0; top: 0; will-change: transform; }
.hoehen path { fill: none; stroke: var(--sand); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hoehen .krone { fill: rgb(var(--vg-k) / .045); stroke: none; }
.b-weg { fill: none; stroke: rgb(var(--vg-k) / .3); stroke-width: 1.2; stroke-dasharray: 3 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.b-spur { fill: none; stroke: rgb(var(--vg-k) / .85); stroke-width: 1.6; stroke-dasharray: 1.5 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.b-strich { fill: none; stroke: rgb(var(--vg-k) / .6); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.b-strich.leise { stroke: rgb(var(--vg-k) / .25); }
.b-feuer { fill: rgb(var(--vg-k) / .7); transition: fill .4s var(--aus); }
.b-feuer.an { fill: var(--sand); }
.b-leit { fill: none; stroke: rgb(var(--vg-k) / .22); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; transition: stroke .4s var(--aus); }
.b-leit.an { stroke: rgb(var(--vg-k) / .7); }
.b-tonne { fill: none; stroke: rgb(var(--vg-k) / .45); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke .4s var(--aus); }
.b-tonne.an { stroke: rgb(var(--vg-k) / .9); }
.b-ping { fill: none; stroke: rgb(var(--vg-k) / .3); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke .5s var(--aus); }
.b-ping.p1 { stroke: rgb(var(--vg-k) / .18); } .b-ping.p2 { stroke: rgb(var(--vg-k) / .1); }
.b-ping.an { stroke: rgb(var(--vg-k) / .7); } .b-ping.p1.an { stroke: rgb(var(--vg-k) / .45); } .b-ping.p2.an { stroke: rgb(var(--vg-k) / .25); }
.b-schild { font: 500 15px/1 var(--schrift); letter-spacing: -.005em; fill: rgb(var(--vg-k) / .5); paint-order: stroke; stroke: var(--nacht); stroke-width: 6px;
            stroke-linejoin: round; transition: fill .4s var(--aus); }
.b-schild.klein { font-size: 13px; }
.b-schild.leise { fill: rgb(var(--vg-k) / .4); }
.b-schild.klein.an { fill: rgb(var(--vg-k) / .85); }
.b-marke .b-boje { fill: var(--nacht); stroke: rgb(var(--vg-k) / .6); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: stroke .4s var(--aus); }
.b-marke .b-kern { fill: rgb(var(--vg-k) / .7); transform-box: fill-box; transform-origin: center; scale: .7; transition: fill .4s var(--aus), scale .4s var(--aus); }
.b-marke.vorbei .b-boje { stroke: rgb(var(--vg-k) / .85); }
.b-marke.an .b-boje { stroke: var(--sonne); }
.b-marke.an .b-kern { fill: var(--sonne); scale: 1; }
.b-marke.an .b-schild, .b-marke.vorbei .b-schild { fill: var(--sand); }
.b-spitze-ring { fill: none; stroke: var(--sonne); stroke-width: 1.2; opacity: .45; vector-effect: non-scaling-stroke; }
.b-spitze-punkt { fill: var(--sonne); }
.b-spitze { transition: opacity .3s var(--aus); }
.b-spitze.weg { opacity: 0; }
/* Leiste unter der Karte: Linie mit vier Punkten, die Füllung folgt dem Kurs */
.ablauf-leiste { position: relative; height: 1px; background: rgb(var(--vg-k) / .16); }
.leiste-fuellung { position: absolute; inset: 0; background: rgb(var(--vg-k) / .8); transform-origin: left; transform: scaleX(0); }
.ablauf[data-variante="b"] .ablauf-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.ablauf[data-variante="b"] .ablauf-schritt { position: relative; padding-top: 24px; opacity: .42; transition: opacity .5s var(--aus); }
.ablauf[data-variante="b"] .ablauf-schritt.vorbei { opacity: .7; }
.ablauf[data-variante="b"] .ablauf-schritt.an { opacity: 1; }
.ablauf[data-variante="b"] .ablauf-schritt::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--nacht);
                                                      box-shadow: inset 0 0 0 1.5px rgb(var(--vg-k) / .7); transition: background-color .4s var(--aus), box-shadow .4s var(--aus); }
.ablauf[data-variante="b"] .ablauf-schritt.vorbei::before { background: rgb(var(--vg-k) / .8); box-shadow: none; }
.ablauf[data-variante="b"] .ablauf-schritt.an::before { background: var(--sonne); box-shadow: none; }
.ablauf[data-variante="b"] .schritt-nr, .ablauf[data-variante="b"] .schritt-strich { display: none; }
.ablauf[data-variante="b"] .schritt-titel { font-size: clamp(19px, 14px + .55vw, 24px); }
.ablauf[data-variante="b"] .schritt-satz { margin-top: 8px; font-size: clamp(15px, 14px + .2vw, 17px); }

/* Vergleich: Leiste unten wie bei 05 im Vergleich */
.vergleich { position: fixed; left: 50%; bottom: 16px; z-index: 40; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 6px;
             border-radius: 6px; background: rgb(var(--hg-k) / .92); box-shadow: inset 0 0 0 1px var(--zl), 0 10px 30px -12px rgb(0 0 0 / .6);
             font: 500 14px/1 var(--schrift); max-width: calc(100% - 16px); flex-wrap: wrap; justify-content: center; }
.vergleich-titel { padding: 0 10px 0 8px; color: var(--leise); }
.vergleich a, .vergleich button { padding: 9px 12px; border: 0; border-radius: 4px; background: none; color: var(--sand); font: inherit; text-decoration: none;
                                    cursor: pointer; transition: background-color .2s var(--aus); }
.vergleich :is(a, button):hover { background: rgb(var(--vg-k) / .1); }
.vergleich-nochmal { box-shadow: inset 0 0 0 1px var(--zl); margin-left: 4px; }
.vergleich a[aria-current="page"] { background: var(--sand); color: var(--nacht); }

@media (max-width: 860px) {
  .ablauf-kopf { grid-template-columns: 1fr; }
  .ablauf-schluss { padding-left: 0; }
  .ablauf[data-variante="c"] .ablauf-schritte, .ablauf[data-variante="bc"] .ablauf-schritte { grid-template-columns: 1fr; }
  .ablauf[data-variante="c"] .ablauf-schritt { margin-top: 0 !important; padding-right: 0; }
  .ablauf[data-variante="c"] .ablauf-schritt + .ablauf-schritt { margin-top: 24px !important; }
  .ablauf[data-variante="c"] .schritt-strich { height: 120px; }
  .ablauf[data-variante="c"] .schritt-nr { margin-top: 16px; }
  .ablauf[data-variante="bc"] .ablauf-schritt + .ablauf-schritt { border-left: 0; padding-left: 0; border-top: 1px solid var(--zl); }
  .ablauf[data-variante="bc"] .ablauf-schritt + .ablauf-schritt::before { left: 0; }
  .ablauf[data-variante="bc"] .ablauf-schritt { padding: 32px 0 28px; }
  .ablauf-band { height: 240px; }
  .ablauf-band .st-schild { display: none; }   /* vier Striche auf 390 px: ohne Beschriftung, die Spalten darunter sagen es */
  /* B am Handy: vier Punkte, darunter nur der jeweilige Schritt */
  .ablauf[data-variante="b"] .ablauf-schritte { display: grid; grid-template-columns: 1fr; }
  .ablauf[data-variante="b"] .ablauf-schritt { grid-area: 1 / 1; opacity: 0; padding-top: 20px; }
  .ablauf[data-variante="b"] .ablauf-schritt.vorbei { opacity: 0; }
  .ablauf[data-variante="b"] .ablauf-schritt.an { opacity: 1; }
  .ablauf[data-variante="b"] .ablauf-schritt::before { display: none; }
  .ablauf-karte { min-height: 200px; }
  .vergleich { font-size: 12px; bottom: 10px; }
  .vergleich a, .vergleich button { padding: 8px 8px; white-space: nowrap; }
  .vergleich-titel, .vergleich a[href^="07-richtungen"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ablauf[data-bewegung="neu"] :is(.zeile > span, .nr-rolle, .st-auf, .st-knall, .st-fuell, .st-mass-ende, .st-zieh, .c-spitze-form) { transition: none; }
  .js .ablauf-fahrt { height: auto; }
  .js .ablauf-buehne { position: relative; top: 0; height: auto; min-height: 0; }
  .ablauf-karte { height: 300px; }
  .ablauf[data-variante="b"] .ablauf-schritt { opacity: 1; }
}