/* Stil des Heros (Seekarte v12 Kielwasser), bis 24.10.2026 inline im HTML-Entwurf; Reihenfolge nach basis.css und lenis.css */
  /* Variante 13, Kamerafahrt: v12 Kielwasser, dazu beim Scrollen eine Kamerafahrt in echter Perspektive (Abschnitt „v13“ unten).
     Variante 12, Kielwasser: das Riff als Wasserlinien auf einer Leinwand. Was durchs Wasser fährt (beim Laden die Spitze des
     Kurses, danach Zeiger oder Finger), schiebt die Linien beiseite und zieht eine Heckwelle hinter sich her; um das Boot hellen
     die Linien auf, die Plus-Zeichen im Raster fangen das Licht.
     Grundlage ist v7, die Seekarte auf Nacht (Ausgang v4, Riff neu: skripte/riff-v7.py, zwei Riffe mit Fahrrinne).
     Ablauf: Lader (die Wortmarke steigt aus der Wasserlinie, die Linie wird zur Kante der Kopfleiste), dann zeichnet sich
     das Riff, die Überschrift steigt zeilenweise aus Masken, danach kommt der Kurs von der offenen See, hält an den drei
     Fragen und läuft in der Bucht auf Höhe des Knopfs aus, dessen Pfeil einmal antwortet. Beim Scrollen taucht nur der Grund
     ab (flache Linien ziehen vorbei, die Tiefe kommt näher, Mittelpunkt ist der Wegpunkt System); Kurs und Wegpunkte bleiben,
     System wird betont, im Satz wandert die Betonung nach innen.
     Kurs-Fehler aus v4: pathLength zusammen mit vector-effect: non-scaling-stroke rechnet die Striche im Bildschirmraum.
     Ist die Karte größer als 1:1 skaliert, war das Ende des Kurses schon beim Laden zu sehen und lange Höhenlinien
     blieben abgeschnitten. Hier ohne vector-effect, die Strichstärke gleicht --k (1 / Maßstab) aus. */
  /* Schrift, Grund, Farben der Nacht und die feste Kopfleiste stehen seit 25.10. in quelle/rahmen.css (gemeinsam mit den Unterseiten) */
  .varianten { background: rgb(39 32 27 / .94); box-shadow: inset 0 0 0 1px var(--linie), 0 8px 24px -10px rgb(0 0 0 / .6); }

  /* ---------- Lader ---------- */
  .lader { display: none; }
  .mit-lader { overflow: hidden; }   /* kein Scrollen in den Tauchgang, solange der Lader steht */
  .mit-lader .lader { display: block; position: fixed; inset: 0; z-index: 25; }
  .lader-halb { position: absolute; left: 0; right: 0; height: calc(50% + 1px); background: var(--nacht); will-change: transform; }
  .lader-oben { top: 0; }
  .lader-unten { bottom: 0; }
  .lader-linie { position: absolute; left: var(--rand); right: var(--rand); bottom: 0; height: 1px; background: rgb(var(--vg-k) / .45); transform: scaleX(0); }
  .lader-marke { position: absolute; left: 50%; top: 50%; width: clamp(180px, 26vw, 380px); aspect-ratio: 6590.8 / 1765.4; translate: -50% -100%;
                 color: var(--sand); transform-origin: 0 0; will-change: transform; }
  .lader-marke svg { width: 100%; height: 100%; }
  /* Startlage der Teile des Logos steht in quelle/marke.css (Lader seit 29.10.2026 aus Bausteinen) */   /* unter der Wasserlinie, bis das Skript sie steigen lässt */
  .mit-lader .kopf { background: transparent; }
  .mit-lader .kopf::after, .mit-lader .kopf .marke { opacity: 0; }
  .mit-lader .kopf-r { opacity: 0; }
  .mit-lader.lader-auf .kopf-r { opacity: 1; }

  /* ---------- Bühne: steht fest, solange man abtaucht ---------- */
  .tauchgang { position: relative; }
  .js .tauchgang { height: 160svh; }
  .buehne { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
  .js .buehne { position: sticky; top: 0; }
  .karte { position: absolute; top: var(--kopf); left: var(--rand); right: var(--rand); bottom: 0; overflow: hidden; }
  .karte svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .tiefe path { fill: none; stroke: var(--sand); stroke-opacity: calc(var(--a, .3) * var(--boost, 1)); stroke-width: calc(1px * var(--k, 1)); stroke-linejoin: round;
                stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1) var(--v, 0s); }
  .tiefe path.haupt { stroke-width: calc(1.35px * var(--k, 1)); }
  .gezeichnet .tiefe path { stroke-dashoffset: 0; }
  .ruht .tiefe path { stroke-dasharray: none; transition: none; }   /* fertig gezeichnet: keine Striche mehr zu rechnen */
  .tiefe .krone { fill: var(--sand); fill-opacity: .045; stroke: none; opacity: 0; transition: opacity 1.2s var(--aus) 1.3s; }   /* Riffkrone über Wasser */
  .gezeichnet .tiefe .krone { opacity: 1; }
  .kurs { fill: none; stroke: var(--sonne); stroke-width: calc(2px * var(--k, 1)); stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; visibility: hidden; }
  .kurs-los .kurs { visibility: visible; }
  .kurs-gestrichelt { fill: none; stroke: var(--sonne); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 2 9; stroke-linecap: round; opacity: 0; transition: opacity .8s var(--aus); }
  .kurs-fertig .kurs { opacity: 0; transition: opacity .8s var(--aus); }
  .kurs-fertig .kurs-gestrichelt { opacity: .9; }
  /* Ruhiges Wasser hinter dem Text: der Grund läuft nach links aus wie in einer Kartusche; der Kurs liegt darüber */
  .kartusche { position: absolute; inset: 0; pointer-events: none;
               background: linear-gradient(90deg, rgb(var(--hg-k) / .97) 0%, rgb(var(--hg-k) / .9) 30%, rgb(var(--hg-k) / 0) 58%); }
  #gitter { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .gitter-h, .gitter-v { position: absolute; background: rgb(var(--vg-k) / .1); }
  .gitter-h { left: 0; right: 0; height: 1px; transform-origin: left; }
  .gitter-v { top: 0; bottom: 0; width: 1px; transform-origin: top; }
  #gitter .plus { color: rgb(var(--vg-k) / .3); }
  .zeichnen .gitter-h { animation: linie-x .9s var(--aus) both; }
  .zeichnen .gitter-v { animation: linie-y .9s var(--aus) both; }
  #gitter.steht i { animation: none; }

  /* Wegpunkte: Beschriftung wie auf einer Karte, die Linien dahinter freigestellt, kein Kasten, damit sie nicht wie Knöpfe aussehen */
  .wegpunkt { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; pointer-events: none; color: rgb(var(--vg-k) / var(--dim, 1)); }
  .wegpunkt > span { position: relative; }
  .wegpunkt > span::before { content: ""; position: absolute; inset: -2px -6px; z-index: -1; border-radius: 8px; background: rgb(var(--hg-k) / .74);
                             box-shadow: 0 0 12px 8px rgb(var(--hg-k) / .74); opacity: 0; transition: opacity .4s var(--aus); }
  .wegpunkt.da > span::before { opacity: 1; }
  .wegpunkt i { position: relative; width: 13px; height: 13px; margin-left: -6.5px; flex: none; border-radius: 50%; background: var(--nacht);
                box-shadow: inset 0 0 0 1.5px rgb(var(--vg-k) / .85); opacity: 0; scale: .4; transition: opacity .3s var(--aus), scale .5s var(--aus); }
  .wegpunkt i::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--sand); scale: 0; transition: scale .4s var(--aus) .12s, background-color .5s var(--aus); }
  .wegpunkt i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgb(var(--vg-k) / .7); opacity: 0; }
  .wegpunkt b { display: block; font: 500 15px/1.2 var(--schrift); letter-spacing: -.005em; opacity: 0; translate: 0 6px; transition: opacity .45s var(--aus) .06s, translate .45s var(--aus) .06s; }
  .wegpunkt small { display: block; margin-top: 3px; font: 400 13px/1.3 var(--schrift); color: rgb(var(--vg-k) / calc(.8 * var(--dim, 1))); white-space: nowrap;
                    clip-path: inset(-6px 100% -6px -6px); transition: clip-path .55s cubic-bezier(.23, 1, .32, 1) .1s, color .5s var(--aus); }
  .wegpunkt.da i, .wegpunkt.da i::before { opacity: 1; scale: 1; }
  .wegpunkt.da i { opacity: var(--dim, 1); }
  .taucht .wegpunkt i { transition: none; }
  .wegpunkt.da i::after { animation: puls 1.1s var(--aus) both; }
  .wegpunkt.da b { opacity: 1; translate: 0 0; }
  .wegpunkt.da small { clip-path: inset(-6px -6px -6px -6px); }
  .wegpunkt.links { flex-direction: row-reverse; text-align: right; gap: 16px; }
  .wegpunkt.links i { margin-left: 0; margin-right: -6.5px; }
  .wegpunkt.oben { flex-direction: column-reverse; align-items: flex-end; gap: 10px; text-align: right; }
  .wegpunkt.oben i { margin: 0 -6.5px 0 0; }
  /* in der Tiefe: System ist der Punkt, an dem man ist (Zustand, deshalb Sonne) */
  .wegpunkt.betont i::before { background: var(--sonne); }
  .wegpunkt.betont.da i::after { animation: puls-tief 1.1s var(--aus) both; }
  .wegpunkt.betont small { color: var(--sand); }
  @keyframes puls { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 3.2; } }
  @keyframes puls-tief { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 3.2; } }
  /* Ziel: die Bucht, auf Höhe des Knopfs; die einzige gefüllte Sonne auf der Karte */
  .ziel { position: absolute; left: 0; top: 0; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
          box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .75); opacity: 0; scale: .5; transition: opacity .4s var(--aus), scale .6s var(--aus); }
  .ziel::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--sonne); }
  .ziel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 106 31 / .8); opacity: 0; }
  .ziel.da { opacity: var(--dim, 1); scale: 1; }
  .taucht .ziel { transition: none; }
  .ziel.da::after { animation: puls 1.3s var(--aus) .1s both; }
  /* der Knopf antwortet einmal, wenn der Kurs in der Bucht ankommt */
  .zum-knopf .knopf.ruft .pfeil { animation: ruf .9s var(--aus) 1; }
  @keyframes ruf { 0% { box-shadow: 0 0 0 0 rgb(255 106 31 / .55); } 35% { transform: translateX(3px); } 100% { box-shadow: 0 0 0 12px rgb(255 106 31 / 0); transform: none; } }

  /* ---------- Text ---------- */
  .inhalt { position: absolute; left: var(--rand); bottom: clamp(28px, 6vh, 60px); z-index: 3; max-width: min(760px, 62%); display: flex; flex-direction: column; gap: 28px; }
  .inhalt .titel { max-width: 16ch; }
  .js .titel { visibility: hidden; }
  .js .titel.geteilt, .js .titel.fertig { visibility: visible; }
  .titel .zeile { display: block; overflow: hidden; padding: 0 .08em .12em 0; margin: 0 -.08em -.12em 0; }   /* Platz für Unterlängen und Komma */
  .titel .zeile > span { display: block; transform: translateY(118%); transition: transform .9s var(--aus) calc(.12s + var(--i) * 75ms); }
  .los .titel .zeile > span { transform: none; }
  /* Pixel-Welle (28.10.2026, quelle/pixel.js): jedes Wort erscheint hinter der Welle, noch warm, und kühlt zu Sand ab */
  .titel.welle { position: relative; }
  .titel.welle .tw.auf { animation: tw-glut 1.2s cubic-bezier(.3, 0, .2, 1) both; }
  @keyframes tw-glut { 0%, 25% { color: var(--sonne); } 100% { color: var(--sand); } }
  .js .inhalt .satz, .js .inhalt .zum-knopf { opacity: 0; translate: 0 14px; transition: opacity .8s var(--aus), translate .8s var(--aus); }
  .los .inhalt .satz { opacity: 1; translate: 0 0; transition-delay: .5s; }
  .los .inhalt .zum-knopf { opacity: 1; translate: 0 0; transition-delay: .62s; }
  .satz span { transition: color .5s var(--aus); }
  .satz .aussen-satz, .satz .rest { color: var(--sand); }
  .satz .innen-satz, .tief .satz .aussen-satz { color: var(--gedimmt); }
  .tief .satz .innen-satz { color: var(--sand); }
  .nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Hinweis: außen folgt er dem Scrollen ohne Verzögerung, innen blendet er einmal ein */
  .weiter { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 3; opacity: var(--weg, 1); pointer-events: none; }
  .weiter > span { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--schrift); color: rgb(var(--vg-k) / .72); opacity: 0; transition: opacity .6s var(--aus); }
  .weiter svg { width: 14px; height: 14px; }
  .weiter.da > span { opacity: 1; }
  .weiter.da svg { animation: sinken 1.6s ease-in-out 3; }
  @keyframes sinken { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

  .danach { position: relative; min-height: 70vh; padding: 96px var(--rand); background: var(--nacht); border-top: 1px solid var(--linie); color: var(--gedimmt); }

  @media (max-width: 860px) {
    .js .tauchgang { height: 135svh; }
    .buehne { display: flex; flex-direction: column; padding: var(--kopf) var(--rand) 0; min-height: 520px; }
    .karte { position: relative; inset: auto; flex: 1 1 auto; min-height: 140px; margin: 0 calc(var(--rand) * -1); }
    .kartusche { background: linear-gradient(0deg, var(--nacht) 0%, rgb(var(--hg-k) / 0) 26%); }
    .inhalt { position: relative; left: auto; bottom: auto; flex: none; max-width: none; padding: 0 0 28px; gap: 22px; }
    .wegpunkt b { font-size: 14px; }
    /* auf dem Handy steht nur die Frage des Wegpunkts da, den der Kurs gerade erreicht hat; sie liegt außerhalb der Beschriftung,
       damit deren Breite gleich bleibt und nichts springt */
    .wegpunkt small { position: absolute; top: 100%; left: 0; width: max-content; max-width: 13.5rem; white-space: normal; opacity: 0;
                      transition: clip-path .55s cubic-bezier(.23, 1, .32, 1) .1s, opacity .3s var(--aus); }
    .wegpunkt small::before { content: ""; position: absolute; inset: -2px -6px; z-index: -1; border-radius: 8px; background: rgb(var(--hg-k) / .74); box-shadow: 0 0 12px 8px rgb(var(--hg-k) / .74); }
    .wegpunkt.links small, .wegpunkt.oben small { left: auto; right: 0; }
    .wegpunkt.oben small, .wegpunkt.frage-oben small { top: auto; bottom: 100%; margin: 0 0 3px; }
    .wegpunkt.aktiv small { opacity: 1; }
    .weiter { display: none; }
  }
  @media (max-width: 860px) and (max-height: 700px), (max-width: 370px) {
    .titel { font-size: 34px; }
    .inhalt { gap: 16px; }
  }
  /* ---------- Kurs-Strich in drei Lesarten (Jonah 20.10.: „das mit diesen Linien“ war der Kurs), ?kurs=fein|pfeile|punkte ----------
     fein: eine feine Linie in Sand, nur die Spitze in Sonne (Zustand: hier fährt der Kurs gerade); pfeile: dazu Kurspfeile wie auf
     der Seekarte; punkte: wie v7 */
  .kurs-spur { fill: none; stroke: var(--sand); stroke-opacity: .68; stroke-width: calc(1.4px * var(--k, 1)); stroke-linecap: round;
               stroke-dasharray: 1 2; stroke-dashoffset: 1; visibility: hidden; }
  .kurs-los .kurs-spur { visibility: visible; }
  /* darunter ein Band in Nacht: der Kurs liegt freigestellt über den Höhenlinien, wie auf der Seekarte */
  .kurs-grund { fill: none; stroke: var(--nacht); stroke-opacity: .9; stroke-width: calc(7px * var(--k, 1)); stroke-linecap: round;
                stroke-dasharray: 1 2; stroke-dashoffset: 1; visibility: hidden; }
  .kurs-los .kurs-grund { visibility: visible; }
  [data-kurs="punkte"] .kurs-spur, [data-kurs="punkte"] .kurs-grund, [data-kurs="punkte"] #kurs-pfeile { display: none; }
  html:not([data-kurs="punkte"]) .kurs { stroke-width: calc(2.5px * var(--k, 1)); stroke-dasharray: 0 2; }
  html:not([data-kurs="punkte"]) .kurs-gestrichelt { display: none; }
  .kurs-pfeil { fill: none; stroke: var(--sand); stroke-opacity: .72; stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round;
                opacity: 0; scale: .6; transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--aus), scale .24s var(--aus); }
  .kurs-pfeil.da { opacity: 1; scale: 1; }
  /* Umschalter (nur Entwurf): Lesart des Kurses neben den Fassungen */
  .varianten .kurs-wahl { display: inline-flex; align-items: center; min-height: 36px; padding: 0 6px 0 14px; margin-left: 4px;
                          border-left: 1px solid rgb(var(--vg-k) / .16); font: 500 13px/1 var(--schrift); color: rgb(var(--vg-k) / .5); }
  .varianten a[aria-current="true"] { background: rgb(var(--vg-k) / .16); color: var(--sand); }
  /* ---------- v12: Kielwasser ---------- */
  .wasser { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* ---------- Wegpunkte in drei Darstellungen (Jonah 20.10.: „ein bisschen lame … gehen ein bisschen unter“), ?wegpunkte= ----------
     Tafel: Kasten mit Kachelecken und Führungslinie wie eine Beschriftung in der Seekarte (Raster, Heron, Terminal);
     Groß: große Ziffer und größere Schrift an einer Haarlinie (Monolog); Boje: die Marke selbst wird groß und trägt die Nummer.
     Nur Desktop; am Handy bleibt die Beschriftung wie bisher (eine Frage am erreichten Punkt). */
  .wegpunkt .nr { display: none; font-style: normal; }
  @media (min-width: 861px) {
    /* Tafel + Boje (Jonah 20.10.: „eine Mischung aus Tafel und Boje … das Ganze dann noch einen Tick größer“): Kasten der Tafel, Marke als
       nummerierte Boje, Name 18 px, Frage 15 px; der Name steht 24 px unter der Oberkante, auf Höhe der Bojenmitte */
    [data-wegpunkte="tafelboje"] .wegpunkt { gap: 0; align-items: flex-start; }
    [data-wegpunkte="tafelboje"] .wegpunkt i { margin-top: 13.5px; }
    [data-wegpunkte="tafelboje"] .wegpunkt.links i { margin: 13.5px -6.5px 0 0; }
    [data-wegpunkte="tafelboje"] .wegpunkt.steht { align-items: flex-end; }
    [data-wegpunkte="tafelboje"] .wegpunkt.steht i { margin-top: 0; margin-bottom: 13.5px; }
    [data-wegpunkte="tafelboje"] .wegpunkt > span { --ecke: rgb(var(--vg-k) / .6); margin-left: 30px; padding: 11px 15px 13px 14px; border-radius: var(--radius);
        background: linear-gradient(var(--ecke), var(--ecke)) left top / 8px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) left top / 1px 8px no-repeat,
                    linear-gradient(var(--ecke), var(--ecke)) right bottom / 8px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) right bottom / 1px 8px no-repeat,
                    rgb(var(--hg2-k) / .86);
        box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .13);   /* ohne Weichzeichner dahinter: der Kasten deckt zu 86 %, das Wasser darunter zeichnet sich je Bild neu */
        clip-path: inset(0 100% 0 0); transition: clip-path .65s cubic-bezier(.23, 1, .32, 1); }
    [data-wegpunkte="tafelboje"] .wegpunkt.links > span { margin: 0 30px 0 0; }
    [data-wegpunkte="tafelboje"] .wegpunkt.links:not(.da) > span { clip-path: inset(0 0 0 100%); }   /* links öffnet sie vom Punkt aus */
    [data-wegpunkte="tafelboje"] .wegpunkt.da > span { clip-path: inset(-2px -36px -2px -36px); }
    [data-wegpunkte="tafelboje"] .wegpunkt > span::before { inset: 20px auto auto -30px; width: 30px; height: 1px; border-radius: 0; box-shadow: none; z-index: 0;
        background: rgb(var(--vg-k) / .5); opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--aus); }
    [data-wegpunkte="tafelboje"] .wegpunkt.links > span::before { left: auto; right: -30px; transform-origin: right; }
    [data-wegpunkte="tafelboje"] .wegpunkt.steht > span::before { top: auto; bottom: 20px; }
    [data-wegpunkte="tafelboje"] .wegpunkt.da > span::before { transform: none; }
    [data-wegpunkte="tafelboje"] .wegpunkt .nr { display: inline-block; margin-right: 8px; font: 500 12px/1 var(--schrift); color: rgb(var(--vg-k) / calc(.55 * var(--dim, 1))); font-variant-numeric: tabular-nums; }
    [data-wegpunkte="tafelboje"] .wegpunkt b { display: inline-block; font-size: 16px; }   /* Nummer und Name in einer Zeile: flacher Kasten */
    [data-wegpunkte="tafelboje"] .wegpunkt small { margin-top: 4px; font-size: 14px; }
    [data-wegpunkte="tafelboje"] .wegpunkt.aktiv > span { --ecke: var(--sand); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .24); }
    [data-wegpunkte="tafelboje"] .wegpunkt i { width: 36px; height: 36px; margin: 6px 0 0 -18px; display: grid; place-items: center; background: rgb(var(--hg-k) / .92);
        box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .78); }
    [data-wegpunkte="tafelboje"] .wegpunkt.links i { margin: 6px -18px 0 0; }
    [data-wegpunkte="tafelboje"] .wegpunkt.steht i { margin-top: 0; margin-bottom: 6px; }
    [data-wegpunkte="tafelboje"] .wegpunkt i::before { content: attr(data-nr); position: static; inset: auto; border-radius: 0; background: none !important; scale: 1;
        font: 500 15px/1 var(--schrift); font-style: normal; color: var(--sand); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .35s var(--aus) .1s; }
    [data-wegpunkte="tafelboje"] .wegpunkt.da i::before { opacity: 1; }
    [data-wegpunkte="tafelboje"] .wegpunkt.aktiv i { box-shadow: inset 0 0 0 1.5px var(--sand); }
    [data-wegpunkte="tafelboje"] .wegpunkt.betont i { box-shadow: inset 0 0 0 1.5px var(--sonne); }
    [data-wegpunkte="tafelboje"] .wegpunkt.da i::after, [data-wegpunkte="tafelboje"] .wegpunkt.betont.da i::after { animation-name: puls-boje; }
    [data-wegpunkte="tafelboje"] .wegpunkt > span { margin-left: 26px; padding: 13px 18px 15px 16px; }
    [data-wegpunkte="tafelboje"] .wegpunkt.links > span { margin: 0 26px 0 0; }
    [data-wegpunkte="tafelboje"] .wegpunkt.da > span { clip-path: inset(-2px -32px -2px -32px); }
    [data-wegpunkte="tafelboje"] .wegpunkt > span::before { top: 24px; left: -26px; width: 26px; }
    [data-wegpunkte="tafelboje"] .wegpunkt.links > span::before { left: auto; right: -26px; }
    [data-wegpunkte="tafelboje"] .wegpunkt.steht > span::before { top: auto; bottom: 24px; }
    [data-wegpunkte="tafelboje"] .wegpunkt .nr { display: none; }   /* die Nummer trägt die Boje */
    [data-wegpunkte="tafelboje"] .wegpunkt b { font-size: 18px; letter-spacing: -.008em; }
    [data-wegpunkte="tafelboje"] .wegpunkt small { margin-top: 5px; font-size: 15px; }
    /* Tafel */
    [data-wegpunkte="tafel"] .wegpunkt { gap: 0; align-items: flex-start; }
    [data-wegpunkte="tafel"] .wegpunkt i { margin-top: 13.5px; }
    [data-wegpunkte="tafel"] .wegpunkt.links i { margin: 13.5px -6.5px 0 0; }
    [data-wegpunkte="tafel"] .wegpunkt.steht { align-items: flex-end; }
    [data-wegpunkte="tafel"] .wegpunkt.steht i { margin-top: 0; margin-bottom: 13.5px; }
    [data-wegpunkte="tafel"] .wegpunkt > span { --ecke: rgb(var(--vg-k) / .6); margin-left: 30px; padding: 11px 15px 13px 14px; border-radius: var(--radius);
        background: linear-gradient(var(--ecke), var(--ecke)) left top / 8px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) left top / 1px 8px no-repeat,
                    linear-gradient(var(--ecke), var(--ecke)) right bottom / 8px 1px no-repeat, linear-gradient(var(--ecke), var(--ecke)) right bottom / 1px 8px no-repeat,
                    rgb(var(--hg2-k) / .86);
        box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .13);   /* ohne Weichzeichner dahinter: der Kasten deckt zu 86 %, das Wasser darunter zeichnet sich je Bild neu */
        clip-path: inset(0 100% 0 0); transition: clip-path .65s cubic-bezier(.23, 1, .32, 1); }
    [data-wegpunkte="tafel"] .wegpunkt.links > span { margin: 0 30px 0 0; }
    [data-wegpunkte="tafel"] .wegpunkt.links:not(.da) > span { clip-path: inset(0 0 0 100%); }   /* links öffnet sie vom Punkt aus */
    [data-wegpunkte="tafel"] .wegpunkt.da > span { clip-path: inset(-2px -36px -2px -36px); }
    [data-wegpunkte="tafel"] .wegpunkt > span::before { inset: 20px auto auto -30px; width: 30px; height: 1px; border-radius: 0; box-shadow: none; z-index: 0;
        background: rgb(var(--vg-k) / .5); opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--aus); }
    [data-wegpunkte="tafel"] .wegpunkt.links > span::before { left: auto; right: -30px; transform-origin: right; }
    [data-wegpunkte="tafel"] .wegpunkt.steht > span::before { top: auto; bottom: 20px; }
    [data-wegpunkte="tafel"] .wegpunkt.da > span::before { transform: none; }
    [data-wegpunkte="tafel"] .wegpunkt .nr { display: inline-block; margin-right: 8px; font: 500 12px/1 var(--schrift); color: rgb(var(--vg-k) / calc(.55 * var(--dim, 1))); font-variant-numeric: tabular-nums; }
    [data-wegpunkte="tafel"] .wegpunkt b { display: inline-block; font-size: 16px; }   /* Nummer und Name in einer Zeile: flacher Kasten */
    [data-wegpunkte="tafel"] .wegpunkt small { margin-top: 4px; font-size: 14px; }
    [data-wegpunkte="tafel"] .wegpunkt.aktiv > span { --ecke: var(--sand); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .24); }
    /* Groß */
    [data-wegpunkte="gross"] .wegpunkt { gap: 16px; }
    [data-wegpunkte="gross"] .wegpunkt > span { padding: 2px 0 4px 16px; border-left: 1px solid transparent; transition: border-color .4s var(--aus); }
    [data-wegpunkte="gross"] .wegpunkt.links > span { padding: 2px 16px 4px 0; border-left: 0; border-right: 1px solid transparent; }
    [data-wegpunkte="gross"] .wegpunkt.da > span { border-color: rgb(var(--vg-k) / calc(.32 * var(--dim, 1))); }   /* die Haarlinie erst, wenn der Kurs da ist */
    [data-wegpunkte="gross"] .wegpunkt > span::before { inset: -12px -14px; }
    [data-wegpunkte="gross"] .wegpunkt .nr { display: block; margin-bottom: 10px; font: 300 clamp(30px, 18px + 1.2vw, 40px)/.86 var(--schrift); letter-spacing: -.045em; color: rgb(var(--vg-k) / var(--dim, 1));
        font-variant-numeric: tabular-nums; clip-path: inset(0 0 100% 0); translate: 0 .35em; transition: clip-path .7s cubic-bezier(.23, 1, .32, 1), translate .7s cubic-bezier(.23, 1, .32, 1); }
    [data-wegpunkte="gross"] .wegpunkt.da .nr { clip-path: inset(-.1em -.1em -.15em -.1em); translate: 0 0; }
    [data-wegpunkte="gross"] .wegpunkt b { font-size: 20px; letter-spacing: -.012em; }
    [data-wegpunkte="gross"] .wegpunkt small { margin-top: 5px; font-size: 15px; }
    /* Boje */
    [data-wegpunkte="boje"] .wegpunkt { gap: 14px; }
    [data-wegpunkte="boje"] .wegpunkt i { width: 34px; height: 34px; margin-left: -17px; display: grid; place-items: center; background: rgb(var(--hg-k) / .92);
        box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .78); }
    [data-wegpunkte="boje"] .wegpunkt.links i { margin: 0 -17px 0 0; }
    [data-wegpunkte="boje"] .wegpunkt i::before { content: attr(data-nr); position: static; inset: auto; border-radius: 0; background: none !important; scale: 1;
        font: 500 14px/1 var(--schrift); font-style: normal; color: var(--sand); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .35s var(--aus) .1s; }
    [data-wegpunkte="boje"] .wegpunkt.da i::before { opacity: 1; }
    [data-wegpunkte="boje"] .wegpunkt.aktiv i { box-shadow: inset 0 0 0 1.5px var(--sand); }
    [data-wegpunkte="boje"] .wegpunkt.betont i { box-shadow: inset 0 0 0 1.5px var(--sonne); }
    [data-wegpunkte="boje"] .wegpunkt.da i::after, [data-wegpunkte="boje"] .wegpunkt.betont.da i::after { animation-name: puls-boje; }   /* 3,2-fach wäre ein 109-px-Ring */
    [data-wegpunkte="boje"] .wegpunkt b { font-size: 17px; }
    [data-wegpunkte="boje"] .wegpunkt small { margin-top: 4px; font-size: 14px; }
    /* links stehende Fragen öffnen sich vom Punkt aus (alle Lesarten) */
    .wegpunkt.links:not(.da) small { clip-path: inset(-6px -6px -6px 100%); }
  }
  @keyframes puls-boje { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.8; } }
  /* beim Abtauchen treten die Fragen nur halb so weit zurück: Kontrast bleibt über 7:1 (DESIGN.md) */
  .wegpunkt small { color: rgb(var(--vg-k) / calc(.8 * (.5 + .5 * var(--dim, 1)))); }
  /* Subline: beide Hälften gleich hell, damit Website und System gleich deutlich ankommen; beim Abtauchen tritt nur die Website zurück */
  .satz .innen-satz { color: var(--sand); }
  /* Antwort des Knopfs auf den Kurs: Ring um die Kachel, der Pfeil fährt rechts hinaus und kommt von links zurück; die Kachel bleibt stehen */
  .zum-knopf .knopf.ruft .pfeil { animation: ruf-ring .9s var(--aus) 1; }
  .zum-knopf .knopf.ruft .pfeil svg { animation: pfeil-durch .8s cubic-bezier(.65, 0, .35, 1) .05s 1; }
  @keyframes ruf-ring { from { box-shadow: 0 0 0 0 rgb(255 106 31 / .55); } to { box-shadow: 0 0 0 12px rgb(255 106 31 / 0); } }
  @keyframes pfeil-durch { 0% { transform: none; } 45% { transform: translateX(26px); } 45.01% { transform: translateX(-26px); } 100% { transform: none; } }
  /* ---------- v13: Kamerafahrt ----------
     Die Strecke ist länger als in v12 (Jonah: „darf … im minimalen Tick länger sein“): 280svh, Handy 220svh. Reduzierte Bewegung: keine Fahrt. */
  .js .tauchgang { height: 230svh; }   /* Kritik 21.10.: 280svh waren ab zwei Dritteln leer */
  @media (max-width: 860px) { .js .tauchgang { height: 200svh; } }
  /* Lesart „zwischen“ (Vorgabe). Runde 3 (Jonah 21.10. abends: Drehung und Fahrt „zu schnell“, der Halt „schwer zu treffen“): 740svh, also
     6,4 Bildschirmhöhen Fahrt statt 3; die Abschnitte stehen in Bildschirmhöhen im Skript (STRECKE) */
  @media (prefers-reduced-motion: no-preference) {   /* ohne Fahrt (reduzierte Bewegung) keine lange Strecke */
    .js[data-fahrt="zwischen"] .tauchgang { height: 770svh; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 860px) { .js[data-fahrt="zwischen"] .tauchgang { height: 670svh; } }
  .karte.faehrt .ziel { opacity: 0 !important; }   /* das Ziel zeichnet in der Fahrt die Leinwand, scharf in jeder Größe */
  /* Tag am Wegpunkt. Runde 3: In der Fahrt hat die Tafel feste Schriftgrößen; im Halt öffnet sich der Zusatz zeitgesteuert nach unten,
     die Zeilen des Satzes steigen aus ihren Masken, danach kommt die Grafik. Vorher wuchsen Schrift und Polsterung im Halt mit (Jonah:
     „noch zu hakelig“). Nachtrag: geöffnet wird über die Höhe des Zusatzes (--mehr misst das Skript) statt über einen Ausschnitt, der
     geschlossen keine Unterkante und keine Rundung hatte (Jonah: „bei der unteren Kante kein Strich und es ist nicht abgerundet“).
     Die Form der Fahrt (wp-fahrt) gilt erst, wenn die Tafeln des Heros ausgeblendet sind (Jonah: „sieht man ganz kurz die größere Card“). */
  .karte.wp-fahrt .wegpunkt { flex-direction: row !important; text-align: left !important; align-items: flex-start !important; }
  .karte.wp-fahrt .wegpunkt > span { padding: 16px 22px 20px 18px !important; background-color: rgb(var(--hg2-k) / .97);   /* deckend: der Kurs lief sichtbar durch die Tafel (Prüfrunde) */
      clip-path: none !important; transition: opacity .3s var(--aus) !important; }
  .karte.wp-fahrt .wegpunkt b { font-size: clamp(22px, 1.1vw + 7px, 38px) !important; letter-spacing: -.02em; }   /* auf großen Bildschirmen etwas größer (Jonah: großer Bildschirm) */
  .karte.wp-fahrt .wegpunkt small { white-space: normal; max-width: 30ch; text-wrap: balance; font-size: clamp(15px, .35vw + 10px, 19px) !important; }
  .wegpunkt .tag-mehr { display: none; }
  .karte.wp-fahrt .wegpunkt .tag-mehr { display: block; height: 0; overflow: hidden; transition: height .3s var(--aus); }
  .tag-innen { display: flow-root; }   /* hält die Ränder von Satz und Grafik innen, damit die gemessene Höhe stimmt */
  .karte.wp-fahrt .wegpunkt.halt .tag-mehr { height: var(--mehr, auto); transition: height 1s cubic-bezier(.25, 1, .5, 1); }   /* ease-out-quart: weicher Anlauf als expo (Jonah: „ploppt … nicht mehr smooth“) */
  .tag-satz { margin: 14px 0 0; max-width: 31ch; font: 400 clamp(16px, .55vw + 7.5px, 24px)/1.45 var(--schrift); letter-spacing: -.005em; color: rgb(var(--vg-k) / .82); white-space: normal; }
  .tag-satz .tz { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }   /* Maske je Zeile, Unterlängen bleiben drin */
  .tag-satz .tz > span { display: block; translate: 0 112%; transition: translate .22s var(--aus); }
  .wegpunkt.halt .tag-satz .tz > span { translate: 0 0; transition: translate .8s cubic-bezier(.16, 1, .3, 1) calc(.14s + var(--i, 0) * .05s); }
  .karte .tag-schema { position: static; inset: auto; display: block; width: clamp(270px, 17vw, 380px); max-width: 100%; height: auto; margin: 18px 0 2px; overflow: visible;
      opacity: 0; translate: 0 10px; transition: opacity .2s var(--aus), translate .2s var(--aus); }
  .wegpunkt.halt .tag-schema { opacity: 1; translate: 0 0; transition: opacity .6s var(--aus) .45s, translate .8s cubic-bezier(.16, 1, .3, 1) .45s; }
  @media (max-width: 860px) {
    .karte.wp-fahrt .wegpunkt > span { max-width: calc(100vw - 132px); padding: 12px 14px 14px !important; border-radius: var(--radius);
        background: rgb(var(--hg2-k) / .94); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .14); }   /* am Handy fehlt die Tafel der Desktop-Fassung */
    .karte.wp-fahrt .wegpunkt small { position: static; width: auto; max-width: none !important; margin-top: 3px; opacity: 1; font-size: 13px !important; }   /* Prüfrunde: die Frage gehört auch am Handy dazu, in der Tafel statt darunter */
    .karte.wp-fahrt .wegpunkt small::before { display: none; }
    .karte.wp-fahrt .wegpunkt b { font-size: 20px !important; }
    .tag-satz { margin-top: 8px; font-size: 14px; }
    .karte .tag-schema { width: 100%; max-width: 250px; margin-top: 12px; }
  }
  /* beim Abstieg nur die Bojen: die Tafeln wechseln dort unsichtbar auf die rechte Seite (sonst sprang „Sichtbarkeit“ beim ersten Scrollpixel) */
  .karte.wp-fahrt:not(.unten) .wegpunkt > span { opacity: 0 !important; }
  /* während der Fahrt zeigt nur der nächste Wegpunkt seine Tafel, die übrigen nur die Boje (Kritik: Tafeln überlappten und liefen aus dem Bild) */
  .karte.wp-fahrt .wegpunkt:not(.aktiv) > span { opacity: 0; }
  /* Grafiken der Tags: klein, Linien in Sand, Sonne nur für den Zustand; sie laufen nur im Halt, nur transform und opacity */
  .tag-schema .sl { fill: none; stroke: rgb(var(--vg-k) / .3); stroke-width: 1; stroke-dasharray: 2 5; }
  .tag-schema .kasten { fill: rgb(var(--vg-k) / .04); stroke: rgb(var(--vg-k) / .5); stroke-width: 1; stroke-linejoin: round; }
  .tag-schema .zeile { fill: rgb(var(--vg-k) / .12); }
  .tag-schema .balken { fill: rgb(var(--vg-k) / .6); transform-box: fill-box; transform-origin: left; scale: 0 1; }
  .tag-schema .pkt { fill: var(--sand); opacity: 0; }
  .tag-schema .haken-ring { fill: none; stroke: rgb(var(--vg-k) / .5); stroke-width: 1; }
  .tag-schema .haken { fill: none; stroke: var(--sonne); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .25; }
  /* System: Anfragen laufen ein, füllen das Dashboard, Haken in Sonne */
  .wegpunkt.halt .tag-system .pkt { animation: tag-pkt 2.7s cubic-bezier(.65, 0, .35, 1) infinite; }
  .wegpunkt.halt .tag-system .balken { animation: tag-balken 2.7s cubic-bezier(.65, 0, .35, 1) infinite; }
  .wegpunkt.halt .tag-system .haken { animation: tag-haken 2.7s var(--aus) infinite; }
  .tag-system .z2 { animation-delay: .45s !important; } .tag-system .z3 { animation-delay: .9s !important; }
  @keyframes tag-pkt { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 1; } 42% { opacity: 1; translate: 118px 0; } 50%, 100% { opacity: 0; translate: 118px 0; } }
  @keyframes tag-balken { 0%, 40% { scale: 0 1; } 62%, 88% { scale: 1 1; } 100% { scale: 0 1; } }
  @keyframes tag-haken { 0%, 60% { opacity: .25; } 68% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: .25; } }
  /* Sichtbarkeit: ein Leuchtfeuer streicht übers Wasser; wen der Strahl erfasst, der kommt zum Feuer, das Feuer geht in Sonne an */
  .tag-sicht .strahl { transform-box: view-box; transform-origin: 262px 48px; rotate: 15deg; opacity: 0; }
  .tag-sicht .such { fill: var(--sand); opacity: .35; }
  .tag-sicht .feuer-ring { fill: var(--nacht); stroke: rgb(var(--vg-k) / .55); stroke-width: 1; }
  .tag-sicht .feuer { fill: var(--sand); opacity: .45; }
  .tag-sicht .feuer-an { fill: var(--sonne); opacity: 0; }
  .wegpunkt.halt .tag-sicht .strahl { animation: tag-strahl 4s linear .5s infinite backwards; }
  .wegpunkt.halt .tag-sicht .such { animation: tag-such 4s linear infinite backwards; }
  .wegpunkt.halt .tag-sicht .feuer-an { animation: tag-feuer 4s linear .5s infinite backwards; }
  @keyframes tag-strahl { 0% { rotate: 15deg; opacity: 0; } 5% { opacity: 1; } 50% { opacity: 1; } 55% { rotate: -15deg; opacity: 0; } 100% { rotate: -15deg; opacity: 0; } }
  @keyframes tag-such { 0% { opacity: .35; translate: 0 0; } 3% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.5, 0, .25, 1); }
                        30% { opacity: 1; translate: var(--dx) var(--dy); } 34% { opacity: 0; translate: var(--dx) var(--dy); } 84% { opacity: 0; translate: 0 0; } 100% { opacity: .35; translate: 0 0; } }
  @keyframes tag-feuer { 0%, 33% { opacity: 0; } 37%, 86% { opacity: 1; } 95%, 100% { opacity: 0; } }
  /* Website: Besucher kommen von überall, das Fahrwasser führt sie zur Anfrage, der Brief leuchtet in Sonne auf */
  .tag-web .boje { fill: none; stroke: rgb(var(--vg-k) / .6); stroke-width: 1; stroke-linejoin: round; }
  .tag-web .besuch { fill: var(--sand); opacity: 0; }
  .tag-web .klappe { fill: none; stroke: rgb(var(--vg-k) / .5); stroke-width: 1; stroke-linejoin: round; }
  .tag-web .brief-an { fill: none; stroke: var(--sonne); stroke-width: 1.5; stroke-linejoin: round; opacity: 0; }
  .wegpunkt.halt .tag-web .besuch { animation: tag-besuch 3.6s linear infinite backwards; }
  .wegpunkt.halt .tag-web .brief-an { animation: tag-brief 3.6s linear infinite backwards; }
  @keyframes tag-besuch { 0% { opacity: 0; translate: 0 0; } 7% { opacity: 1; } 32% { translate: 74px calc(var(--y) * .3); } 56% { translate: 160px calc(var(--y) * .86); }
                          70% { opacity: 1; translate: 206px var(--y); } 80% { opacity: 0; translate: 240px var(--y); } 100% { opacity: 0; translate: 240px var(--y); } }
  @keyframes tag-brief { 0%, 72% { opacity: 0; } 77% { opacity: 1; } 90%, 100% { opacity: 0; } }
  /* Ankunft. Runde 3 (Jonah: „dieser Ball dann komplett mittig … dann öffnet sich der Kreis … der Text … mittig … cool animiert“): der
     Ball steht in der Bildmitte, der Kreis öffnet sich zeitgesteuert, die Zeilen der Überschrift steigen aus Masken, der Satz folgt.
     Erst danach geht es in die nächste Section. */
  .ankunft { position: absolute; inset: 0; z-index: 5; background: var(--nacht); clip-path: circle(0 at 50% 50%); display: flex; flex-direction: column;
             justify-content: center; align-items: center; text-align: center; padding: calc(var(--kopf) + 24px) var(--rand) clamp(40px, 7vh, 96px); }
  .ankunft-ring { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
  .ankunft-ring circle { fill: none; stroke: rgb(var(--vg-k) / .7); stroke-width: 1.5; }
  .ankunft-ring #ankunft-kern { fill: var(--sonne); stroke: none; }
  .ankunft-szene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .ankunft-titel, .ankunft-text { position: relative; z-index: 1; }
  .ankunft-titel .punkt { color: transparent; }   /* den Punkt zeichnet der Sonnenkern aus dem Ziel */
  .ankunft.statisch .ankunft-titel .punkt { color: var(--sonne); }
  .ankunft-titel { margin: 0; max-width: 19ch; font-weight: 320; font-size: clamp(36px, 18px + 3vw, 76px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
  .ankunft-text { margin: clamp(22px, 1.6vw + 10px, 38px) 0 0; max-width: 48ch; font-size: clamp(17px, 15px + .4vw, 22px); line-height: 1.5; letter-spacing: -.008em;
                  color: rgb(var(--vg-k) / .78); text-wrap: pretty; }
  .ankunft-titel .zeile { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
  .ankunft-titel .zeile > span { display: block; translate: 0 112%; transition: translate .3s var(--aus); }
  .ankunft.lesbar .ankunft-titel .zeile > span { translate: 0 0; transition: translate 1.05s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .06s); }
  .js .ankunft-text { opacity: 0; translate: 0 16px; transition: opacity .25s var(--aus), translate .25s var(--aus); }
  .ankunft.lesbar .ankunft-text { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus) .5s, translate 1s cubic-bezier(.16, 1, .3, 1) .5s; }
  .js .ankunft:not(.lesbar):not(.statisch) :is(.ankunft-titel, .ankunft-text) { visibility: hidden; }   /* Safari schneidet sie sonst nicht ab (28.10.) */
  .intro-offen .karte, .intro-offen .inhalt { visibility: hidden; }   /* Intro ganz offen: darunter wird nichts mehr gemalt (Safari, 28.10.) */
  .ankunft.statisch { position: relative; inset: auto; clip-path: none; min-height: 70svh; }
  .js .ankunft.statisch .ankunft-text { opacity: 1; translate: none; }
  html:not(.js) .ankunft, html:not(.js) .ankunft-ring { display: none; }
  .wegpunkt, .ziel { will-change: translate; }
  @media (prefers-reduced-motion: reduce) {   /* Absicherung: Schleifen und Masken stehen, falls die Fahrt doch läuft */
    .tag-schema *, .tag-schema { animation: none !important; transition: none !important; }
    .tag-satz .tz > span, .ankunft-titel .zeile > span { translate: none !important; transition: none !important; }
  }
  /* reduzierte Bewegung zuletzt, damit sie die Handy-Regeln schlägt */
  @media (prefers-reduced-motion: reduce) {
    .js .tauchgang { height: auto; }
    .js .buehne { position: relative; }
    .weiter { display: none; }
  }