/* ============================================================
   SCHNUPPERGOLF
   Vorne die Streichliste, die sich selbst durchstreicht; das
   Scharnier ist der ungestrichene Fazit-Satz mit den Kennzahlen;
   dahinter die Terminleiste als Werkzeug. Dazwischen das kleine
   Putting-Grün zum Ausprobieren.
   Basis (Header, Footer, Hero, Kapitel, Buttons): seite.css.
   Alle Farben, Größen und Kurven kommen aus tokens.css.
   ============================================================ */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------------- TERMIN-CHIP UNTER DEM HERO ----------------
   Wiederkehrer müssen nicht durch die Streichliste: Der nächste Termin
   steht serverseitig berechnet direkt unter der Bühne. */
.sg-chipzeile{position:relative;z-index:2;background:#fff;padding:22px var(--inset) 0;display:flex}
.sg-chip{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--gruen);border-radius:var(--r-pill);
  padding:11px 22px;font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:15px;color:var(--tinte);
  font-variant-numeric:tabular-nums;transition:background var(--t-schnell),transform var(--t-schnell) var(--ease)}
a.sg-chip:hover{background:var(--mint);transform:translateY(-2px)}
a.sg-chip .pfeil{transition:transform var(--t-schnell) var(--ease);color:var(--gruen)}
a.sg-chip:hover .pfeil{transform:translateX(5px)}
.sg-chip-leer{border-color:var(--linie-karte);color:var(--sekundaer);font-weight:400}
.sg-chip-punkt{width:8px;height:8px;border-radius:50%;background:var(--gruen);flex:none}
.js .sg-chip-punkt{animation:sg-puls 2.6s var(--ease) infinite}
@keyframes sg-puls{0%,72%,100%{box-shadow:0 0 0 0 rgba(31,132,70,.5)}36%{box-shadow:0 0 0 7px rgba(31,132,70,0)}}

/* ---------------- 02 — DIE STREICHLISTE ----------------
   Die Liste scrollt ungestrichen herein, bleibt stehen und streicht sich
   in dieser Haltezeit Zeile für Zeile durch; danach läuft die Seite
   normal weiter. Ohne JavaScript, auf zu kleinen Schirmen und bei
   reduzierter Bewegung bleibt die Bühne ein gewöhnlicher Container. */
/* Kein Abstand nach unten: Das Scharnier („Was du wirklich brauchst:
   einen Termin.") soll ohne weißen Streifen in die Terminleiste
   übergehen — die beiden sind ein Gedanke, kein Sektionswechsel. */
.sgliste{padding-bottom:0}
/* Etwas Luft zwischen Kapitelkopf und erster Zeile — der Kapitelkasten
   bringt unten keine mit, und ohne diese rückt die Liste direkt an den
   Lead heran. */
.sgl-buehne{position:relative;margin-top:22px}
/* Die Zusatzhöhe kommt aus CSS, NICHT aus dem Skript: Setzt JavaScript sie
   erst nach dem Laden, wächst die Seite nachträglich um zwei Bildschirm-
   höhen — und jeder Ankersprung (#termine aus dem Hero!) landet daneben.
   --zeilen liefert das Template, svh rechnet mit der Handy-Adressleiste.
   Gehalten wird auf jedem Gerät, das hoch genug ist — auch auf dem Handy;
   ausgenommen sind nur sehr flache Schirme (Querformat), auf die sechs
   Zeilen nicht passen. */
@media (min-height:600px) and (prefers-reduced-motion:no-preference){
  /* Der Kleber ist genau so hoch wie die Liste — KEIN bildschirmhoher
     Block: Der hätte die Liste mittig gesetzt und oben wie unten eine
     viertel Bildschirmhöhe Leere hinterlassen. Die Haltestrecke macht
     stattdessen der Nachlauf hinter ihm; die Bühne bleibt height:auto,
     also Kleber + Nachlauf. Ein padding-bottom an der Bühne taugt dafür
     nicht — damit bleibt sticky gar nicht erst stehen.
     top:100px hält die Liste unter der klebenden Kopfzeile (76 px). */
  /* top:190px — das Wappen hängt aus der 76 px hohen Kopfzeile heraus und
     reicht bis 176 px; bei einem kleineren Wert lag es über der ersten
     Zeile.
     max-height statt height (16.08.2026): Ein bildschirmhoher Kleber mit
     justify-content:center legte auf hohen Schirmen oben und unten je rund
     140 px Leere um die Liste — sichtbar als Loch zwischen Kapitelkopf und
     erster Zeile und noch einmal vor dem Scharnier. Jetzt ist der Kleber
     genau so hoch wie die Liste und nur nach oben gedeckelt; die Zentrierung
     greift erst, wenn die Liste den Deckel wirklich erreicht. */
  /* GEAENDERT 23.08.2026: min-height statt max-height, und die Zeilen
     verteilen sich statt zusammenzurücken. Vorher war der Kleber genau so
     hoch wie die Liste (rund 480 px) und hing oben fest — auf einem hohen
     Fenster stand darunter nichts als Weiss, und zwar immer mehr, je hoeher
     der Schirm: 331 px bei 850, 1015 px bei 1200 (Andreas: „hier ist viel
     zu viel Platz drunter"). Jetzt fuellt die Liste die Flaeche, die sie
     ohnehin belegt; passt sie einmal nicht hinein, waechst sie darueber
     hinaus — deshalb min-height und nicht height. */
  .js .sgl-klebe{position:sticky;top:190px;min-height:calc(100svh - 214px);
    display:flex;flex-direction:column}
  /* Verteilt werden die ZEILEN, nicht der Kleber: In ihm steckt nur ein
     einziges Kind (die Liste), und space-between an einem einzigen Kind
     tut nichts — der erste Anlauf am 23.08.2026 hat deshalb gar nichts
     geändert. */
  .js .sgl-klebe > .sgl-liste{flex:1;justify-content:space-between}
  .js .sgl-nachlauf{height:calc(var(--zeilen,6) * 30svh)}
  /* Die Zeilen atmen mit der Bildschirmhöhe: auf flachen Schirmen rücken sie
     zusammen, statt die Liste über den Deckel hinauswachsen zu lassen. */
  .js .sgl-klebe .sgl-zeile{padding:clamp(8px,1.7svh,20px) 0;flex:0 0 auto}
}
/* Auf schmalen Schirmen steht die Antwort unter der Frage — damit die
   sechs Zeilen trotzdem auf eine Bildschirmhöhe passen, rücken sie enger
   zusammen und die Schrift wird eine Spur kleiner. */
@media (max-width:699px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  /* Auf dem Handy ist die Kopfzeile 64 px hoch und das Wappen reicht bis
     130 px — der Kleber startet entsprechend höher. */
  .js .sgl-klebe{top:144px;min-height:calc(100svh - 168px)}
  .js .sgl-klebe .sgl-punkt{font-size:clamp(17px,5vw,23px)}
  .js .sgl-klebe .sgl-antwort{font-size:14.5px;line-height:1.45}
  .js .sgl-klebe .sgl-zeile{gap:3px}
}
.sgl-liste{list-style:none;padding:0 var(--inset);margin:0;display:flex;flex-direction:column}
.sgl-zeile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px 44px;align-items:baseline;
  padding:22px 0;border-top:1px solid var(--linie-karte)}
.sgl-zeile:first-child{border-top:0}

/* Die vermeintliche Voraussetzung — die SVG-Linie legt sich DARÜBER, der
   Text selbst bleibt ungestrichen (Semantik, Screenreader). justify-self:
   start, sonst streckt das Grid das Item auf die volle Spaltenbreite und
   die Streichung liefe weit hinter dem Wort weiter. */
.sgl-punkt{position:relative;display:inline-block;justify-self:start;color:var(--tinte);
  font-size:clamp(21px,2.2vw,30px);transition:color var(--t-mittel) var(--ease)}
.sgl-strich{position:absolute;left:-4px;right:-4px;top:50%;width:calc(100% + 8px);height:14px;
  margin-top:-7px;overflow:visible;pointer-events:none}
/* non-scaling-stroke: preserveAspectRatio="none" streckt die Linie in die
   Breite der Zeile — ohne das würde die Strichstärke mitgezerrt. */
.sgl-strich path{stroke:var(--gruen);stroke-width:2.4px;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Ohne Skript steht die Liste fertig gestrichen da (CSS/SVG-Endzustand).
   Mit Skript hängt die Streichung an der SCROLLBEWEGUNG: schnuppergolf.js
   setzt je Zeile --p (0…1), während sie durch den Viewport wandert — die
   Linie zeichnet sich also mit dem Daumen und geht beim Zurückscrollen
   wieder auf. Das Strichmuster steht bewusst in Pixeln (länger als jede
   Zeile) statt über pathLength normalisiert: non-scaling-stroke rechnet
   das Muster im Geräteraum, wodurch pathLength="1" die Linie zerlegte.
   Keine transition — der Wert kommt schon Bild für Bild aus dem Scroll. */
.js .sgl-zeile{--p:0}
.js .sgl-strich path{stroke-dasharray:2000;stroke-dashoffset:calc(2000 - 2000 * var(--p))}
/* Das Wort tritt zurück, sobald die Linie fast durch ist */
.js .sgl-punkt{color:color-mix(in srgb,var(--muted) calc(var(--p) * 100%),var(--tinte))}

/* Die Antwort rückt mit der Streichung heran, der grüne Gedankenstrich
   wächst ihr entgegen. Bewusst OHNE Deckkraft-Einblendung: Die Antwort
   ist die eigentliche Information der Seite und darf nie an einer
   laufenden Animation hängen — sie ist ab dem ersten Bild voll lesbar. */
.sgl-antwort{display:block;color:var(--text)}
.sgl-strichpunkt{display:inline-block;color:var(--gruen);font-weight:600}
.js .sgl-antwort{--a:clamp(0,calc((var(--p) - .25) * 2.2),1);
  transform:translateX(calc(10px * (1 - var(--a))))}
.js .sgl-strichpunkt{transform:scaleX(var(--a));transform-origin:left center}

/* Das Scharnier: der EINE Satz, der nicht gestrichen wird — Lime auf
   dunkler Fläche, daneben die drei Kennzahlen als Zähler. Dieser Block
   leitet ohne Zwischenüberschrift direkt in die Terminleiste über. */
/* Volle Breite statt eingerückter Karte: So stößt das Scharnier direkt an
   die Terminleiste — dunkel an dunkel, ohne weißen Trenner dazwischen. */
.sgl-fazit{margin:var(--luft-s) 0 0;background:var(--tanne);border-radius:var(--r-flaeche);
  padding:48px var(--inset) 44px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 44px;align-items:center}
.sgl-fazit-satz{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.035em;line-height:1.02;font-size:clamp(26px,3.4vw,46px);color:var(--lime)}
.sgl-kennzahlen{list-style:none;padding:0;margin:0;display:flex;gap:36px;flex-wrap:wrap;justify-content:flex-end}
.sgl-kennzahlen li{display:flex;flex-direction:column;gap:6px}
.sgl-k-wert{font-size:clamp(30px,3.4vw,46px);line-height:1;color:#fff}
.sgl-k-einheit{color:rgba(255,255,255,.6)}

@media (max-width:900px){
  .sgl-fazit{grid-template-columns:1fr;padding:36px var(--inset) 34px}
  .sgl-kennzahlen{justify-content:flex-start;gap:28px}
}
@media (max-width:560px){
  .sgl-zeile{grid-template-columns:1fr;gap:10px}
  .sgl-antwort{padding-left:2px}
}

/* ---------------- 03 — DIE TERMINLEISTE ---------------- */
/* Dieselbe Fläche wie das Scharnier darüber (--tanne), nicht --pine: Der
   Farbwechsel mitten im dunklen Block sah aus wie eine Naht oder ein
   verrutschter Kasten. Jetzt läuft die Fläche vom Scharnier bis unter die
   Leiste durch, und die große Karte hebt sich dunkler daraus ab.
   overflow:hidden fasst das Wischen der Leiste ein: Ohne das zog die
   Kartenreihe die ganze Seite in die Breite (1500 px auf einem Handy). */
.sgtermine{background:var(--tanne);color:#fff;padding:44px 0 var(--luft);overflow:hidden}
.sgt-intro{color:#fff;padding:0 var(--inset);margin:0 0 30px}

/* Die große Karte: der nächste (oder gewählte) Termin */
.sgt-gross-halter{padding:0 var(--inset);margin-bottom:34px}
/* Die große Karte liegt jetzt dunkler auf der Fläche (--pine), damit sie
   ohne Farbnaht als eigener Block liest. */
.sgt-gross{border:1px solid var(--hairline-dunkel);border-radius:var(--r-flaeche);background:var(--pine);
  padding:34px 38px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 44px;align-items:end;
  max-width:820px}
.sgt-g-relativ{grid-column:1/-1;display:inline-flex;align-items:center;gap:10px;color:var(--lime)}
.sgt-g-punkt{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.js .sgt-g-punkt{animation:sg-puls-lime 2.6s var(--ease) infinite}
@keyframes sg-puls-lime{0%,72%,100%{box-shadow:0 0 0 0 rgba(204,255,0,.55)}36%{box-shadow:0 0 0 8px rgba(204,255,0,0)}}
.sgt-g-datum{color:#fff;font-size:clamp(26px,3.4vw,44px);margin:0}
.sgt-g-zeit{color:rgba(255,255,255,.78);font-size:19px;margin-top:8px}
.sgt-g-buchen{grid-row:2/4;grid-column:2;align-self:end}
.sgt-leer{display:block;max-width:62ch}
.sgt-leer p{color:rgba(255,255,255,.78)}

/* Die Leiste: alle Termine des Jahres, vergangene bleiben gedimmt stehen */
.sgt-leiste{list-style:none;margin:0;padding:0 var(--inset);display:flex;gap:12px;flex-wrap:wrap}
/* Der Halter ist ein echtes Flex-Item, kein display:contents: Damit die
   Leiste unter 900 px wirklich intern wischt, statt die ganze Seite breit
   zu ziehen — mit display:contents dehnte der Scroll-Container das
   Dokument auf die volle Kartenbreite (1500 px auf einem 390-px-Handy). */
.sgt-karte-halter{display:flex}
.sgt-karte{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:88px;padding:14px 14px 13px;
  border:1px solid var(--hairline-dunkel);border-radius:var(--r-flaeche);background:rgba(255,255,255,.04);
  color:#fff;text-align:center;transition:background var(--t-schnell),border-color var(--t-schnell),transform var(--t-schnell) var(--ease)}
a.sgt-karte:hover{background:rgba(204,255,0,.14);border-color:var(--lime);transform:translateY(-3px)}
a.sgt-karte:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.sgt-karte[aria-current="true"]{border-color:var(--lime);background:rgba(204,255,0,.16)}
.sgt-k-wt{color:rgba(255,255,255,.68)}
.sgt-k-tag{font-size:26px;line-height:1.05}
.sgt-k-monat{color:rgba(255,255,255,.68)}
.sgt-k-zeit{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:12.5px;color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;margin-top:2px}
/* Vergangene Termine: gedimmt, ohne Interaktion — und mit Text-Label,
   nicht nur farblich unterschieden (Screenreader, Farbfehlsichtige). */
.sgt-karte.vorbei{border-style:dashed;border-color:rgba(255,255,255,.15);background:none;color:rgba(255,255,255,.52)}
.sgt-karte.vorbei .sgt-k-wt,.sgt-karte.vorbei .sgt-k-monat,.sgt-karte.vorbei .sgt-k-zeit{color:rgba(255,255,255,.42)}
.sgt-k-vorbei{color:rgba(255,255,255,.55);margin-top:4px;font-size:10.5px}

.sgt-hinweis{padding:26px var(--inset) 0;color:rgba(255,255,255,.62);max-width:72ch}
.sgt-hinweis a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sgt-hinweis a:hover{color:var(--lime)}

@media (max-width:900px){
  /* Schmaler Schirm: Die Überschrift darf die volle Breite nutzen und
     wird eine Spur kleiner, sonst bricht sie in drei kurze Stummel. */
  .sgt-intro{max-width:none;font-size:clamp(20px,5.6vw,26px);margin-bottom:24px}
  .sgt-gross{grid-template-columns:1fr;padding:28px var(--inset) 30px}
  .sgt-g-buchen{grid-row:auto;grid-column:auto;justify-self:start;margin-top:6px}
  .sgt-gross-halter{padding:0}
  .sgt-gross{border-left:0;border-right:0}
  /* Leiste einzeilig wischbar mit sichtbarem Anschnitt der nächsten Karte;
     senkrechtes Scrollen bleibt frei (touch-action). */
  /* position:relative ist hier PFLICHT, nicht Kosmetik: In jeder Karte
     steckt ein `.visually-hidden`-Span (position:absolute). Ohne einen
     Positionierungskontext am Scroll-Container hängen die Spans an einem
     Vorfahren AUSSERHALB und entkommen damit dem Zuschnitt — die Leiste
     wischt zwar intern, die ganze Seite ist am Telefon aber trotzdem
     1.467 px breit und scrollt waagrecht. */
  .sgt-leiste{position:relative;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
    scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:none}
  .sgt-leiste::-webkit-scrollbar{display:none}
  .sgt-karte,.sgt-karte-halter{flex:none;scroll-snap-align:start}
}

/* ---------------- 04 — DREI FORMATE ---------------- */
/* Kein doppelter Sektionsabstand: Das folgende Kapitel bringt seinen
   eigenen padding-top mit — zusammen waren das 168 px Leere. */
.sgformate{padding-bottom:0}
.sgf-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 var(--inset);align-items:stretch}
.sgf-karte{border:1px solid var(--linie-karte);border-radius:var(--r-flaeche);padding:30px 28px 28px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sgf-karte h3{color:var(--tinte)}
.sgf-preis{font-size:24px;color:var(--gruen)}
.sgf-fakten{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;width:100%}
.sgf-fakten li{font-size:15.5px;padding:10px 0;border-bottom:1px solid var(--linie-karte)}
.sgf-fakten li:last-child{border-bottom:0}
.sgf-fuer{color:var(--sekundaer);font-style:italic}
.sgf-karte .tlink{margin-top:auto;padding-top:12px}
@media (max-width:980px){ .sgf-karten{grid-template-columns:1fr} }

/* ---------------- 05 — DER NACHMITTAG ---------------- */
.sgablauf{padding-bottom:var(--luft-s)}
.sga-buehne{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;
  padding:0 var(--inset);align-items:start}
.sga-stationen{list-style:none;padding:0;margin:0;counter-reset:sga}
.sga-station{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:20px 0;
  border-top:1px solid var(--linie-karte)}
.sga-station:first-child{border-top:0;padding-top:0}
.sga-nr{color:var(--gruen);font-size:15px;padding-top:3px}
.sga-station h3{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:18px;color:var(--tinte);margin-bottom:5px}
.sga-bild{margin:0;border-radius:var(--r-flaeche);overflow:hidden;background:var(--mint);position:sticky;top:96px}
.sga-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

.sga-unten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;
  padding:var(--luft-s) var(--inset) 0;align-items:start}
.sga-leistungen h3,.sga-zusatz h3{color:var(--gruen);margin-bottom:14px}
.sga-leistungen ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.sga-leistungen li{position:relative;padding-left:20px}
.sga-leistungen li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--lime);border:1.5px solid var(--gruen)}
/* Panorama-Abschluss über beide Spalten statt eines Bildes in der rechten
   Spalte — dort wirkte es verrutscht, weil links Leere stand. */
.sga-panorama{margin:var(--luft-s) var(--inset) 0;border-radius:var(--r-flaeche);overflow:hidden}
.sga-panorama img{display:block;width:100%;height:auto;aspect-ratio:21/8;object-fit:cover}
@media (max-width:900px){ .sga-panorama img{aspect-ratio:16/9} }
@media (max-width:900px){
  .sga-buehne,.sga-unten{grid-template-columns:1fr;gap:30px}
  .sga-bild{position:static;order:-1}
}

/* ---------------- DER ERSTE PUTT (SPIEL) ----------------
   Reine Zugabe: Die Sektion erscheint nur mit JavaScript — ohne Skript
   bliebe sonst eine tote Fläche stehen, denn ein Canvas ohne Skript malt
   nichts. Bei reduzierter Bewegung nimmt schnuppergolf.js sie zusätzlich
   ganz aus dem DOM. */
.sgputt{display:none}
.js .sgputt{display:block;background:var(--tanne);color:#fff;padding:var(--luft) 0;overflow:hidden}
.sgp-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;
  padding:0 var(--inset);align-items:center}
.sgp-kicker{color:var(--lime);margin-bottom:16px}
.sgputt h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.04em;
  line-height:.95;font-size:clamp(32px,4.4vw,62px);color:#fff}
.sgp-lead{color:rgba(255,255,255,.75);margin-top:18px;max-width:44ch}
.sgp-status{color:var(--lime);margin-top:16px;min-height:1.5em}
.sgp-neu{margin-top:14px}
.sgp-erfolg{margin-top:22px;border-left:2px solid var(--lime);padding-left:18px}
.sgp-erfolg-satz{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.025em;line-height:1.08;font-size:clamp(19px,1.9vw,25px);color:var(--lime);max-width:22ch}
.sgp-erfolg-aktion{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.sgp-gruen{position:relative}
/* touch-action:pan-y — senkrecht scrollen bleibt über dem Grün möglich.
   Die Sperre der Wischgeste steht NICHT hier: Ein Klassenwechsel im
   pointerdown kommt zu spät, weil der Browser schon beim touchstart
   entscheidet, wem die Geste gehört. Am Handy übernahm er deshalb jeden
   Zug nach hinten als Scrollen, feuerte pointercancel — und der Zug war
   weg. Gesperrt wird jetzt allein der Griff (siehe unten). */
/* Ohne eigene Hintergrundfarbe: Sonst zeichnete sich das Rechteck des
   Canvas als Kasten in die Sektion — das Grün soll frei darauf liegen. */
.sgp-canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--r-flaeche);
  background:transparent;cursor:grab;touch-action:pan-y}
.sgp-canvas.zieht{cursor:grabbing;touch-action:none}
.sgp-canvas:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
/* Der Griff: unsichtbarer Kreis, den das Skript über den ruhenden Ball
   legt (Mitte auf dem Ball, Radius = Anfasszone). Nur hier steht
   touch-action:none — und zwar fest, also bevor der Finger aufsetzt.
   Der Rest des Grüns behält pan-y, die Seite scrollt dort normal. */
.sgp-griff{position:absolute;border-radius:50%;background:transparent;
  cursor:grab;touch-action:none;transform:translate(-50%,-50%)}
.sgp-griff.zieht{cursor:grabbing}
.sgp-hilfe{color:rgba(255,255,255,.62);margin-top:12px;text-align:center}
@media (max-width:900px){
  .sgp-buehne{grid-template-columns:1fr;gap:30px}
}

/* ---------------- 06 — UND DANACH? (mint) ---------------- */
.sgdanach{background:var(--mint);padding-bottom:var(--luft-s)}
/* Das Dokumente-Kapitel bringt sein padding-top als Inline-Stil aus dem
   gemeinsamen Template mit (auch die Platzregeln-Seite nutzt es) — hier
   wird es gezielt entschärft, sonst stapeln sich 168 px Leere auf die
   Mint-Fläche darüber. */
.prdokumente .kapitel{padding-top:var(--luft-s) !important}
.sgdanach .kapitel-marke{border-color:rgba(20,35,27,.18)}
.sgd-stufen{list-style:none;padding:0 var(--inset);margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sgd-stufe{background:#fff;border-radius:var(--r-flaeche);padding:28px 26px 26px;display:flex;
  flex-direction:column;gap:10px;align-items:flex-start;position:relative}
/* Die Stufen sind eine Folge: ein Pfeil führt von Karte zu Karte */
.sgd-stufe:not(:last-child)::after{content:"";position:absolute;right:-16px;top:50%;width:9px;height:9px;
  border-top:1.5px solid var(--gruen);border-right:1.5px solid var(--gruen);transform:translateY(-50%) rotate(45deg)}
.sgd-nr{color:var(--muted)}
.sgd-stufe h3{color:var(--tinte)}
.sgd-preis{color:var(--gruen);font-size:19px}
.sgd-stufe .tlink{margin-top:auto;padding-top:14px}
@media (max-width:980px){
  .sgd-stufen{grid-template-columns:1fr}
  .sgd-stufe:not(:last-child)::after{right:auto;top:auto;left:34px;bottom:-16px;transform:rotate(135deg)}
}

/* ---------------- DOKUMENTE & CTA ----------------
   Beides erbt aus der Platzregeln-Seite; hier nur die Sektionsabstände,
   damit die Seite ohne platzregeln.css auskommt. */
.prdokumente{padding-bottom:var(--luft-s)}
.prd-karten{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 var(--inset)}
.prd-karte{border:1px solid var(--linie-karte);border-radius:var(--r-flaeche);padding:28px 28px 26px;
  display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.prd-karte h3{color:var(--tinte)}
.prd-fakten{list-style:none;padding:0;display:flex;flex-direction:column}
.prd-fakten li{font-size:15.5px;padding:10px 0;border-bottom:1px solid var(--linie-karte)}
.prd-fakten li:last-child{border-bottom:0}
@media (max-width:860px){ .prd-karten{grid-template-columns:1fr} }

.prcta{background:var(--tanne);color:#fff;padding:var(--luft) var(--inset);display:flex;align-items:flex-end;
  justify-content:space-between;gap:44px;flex-wrap:wrap}
.prcta h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,5vw,76px);font-weight:700;
  text-transform:uppercase;letter-spacing:-.045em;line-height:.92;color:#fff}
.prc-text{color:rgba(255,255,255,.72);margin-top:18px;max-width:52ch}
.prc-aktion{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.prc-neben{color:rgba(255,255,255,.62)}
.prc-neben a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.prc-neben a:hover{color:var(--lime)}

/* ---------------- REDUZIERTE BEWEGUNG ----------------
   Streichungen und Antworten stehen fertig da, die Termin-Auswahl
   springt (kein FLIP — macht schnuppergolf.js), die Zähler zeigen sofort
   den Endwert (macht seite.js). Nichts blinkt, nichts fährt. */
@media (prefers-reduced-motion:reduce){
  .js .sgl-strich path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .sgl-punkt{color:var(--muted)}
  .js .sgl-antwort{--a:1;transform:none;transition:none}
  .js .sgl-strichpunkt{transform:none}
  .js .sg-chip-punkt,.js .sgt-g-punkt{animation:none}
  a.sg-chip:hover,a.sgt-karte:hover{transform:none}
}

/* ── Freie Plätze aus PC CADDIE (16.08.2026) ─────────────────────────────
   Die Zahl kommt aus der Anmeldeverwaltung und wird gezeigt, nicht
   verschwiegen — sie beantwortet die Frage hinter der Frage: „Komme ich
   da überhaupt noch rein?" Berechnet wird sie ausschließlich in
   kurs_plaetze(); hier steht nur, wie sie aussieht. --live trägt sie erst
   ab drei oder weniger freien Plätzen, und dann als Tatsache, nicht als
   Dekoration. */
.sgt-g-plaetze{display:inline-block;margin-top:12px;padding:6px 15px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;font-size:14px}
.sgt-g-plaetze.knapp{background:rgba(255,90,77,.16);color:#ff9d94}
.sgt-k-plaetze{display:block;margin-top:6px;font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;font-size:12px;line-height:1.25;color:rgba(255,255,255,.8)}
.sgt-k-plaetze.knapp{color:#ff9d94}
.sgt-karte.vorbei .sgt-k-plaetze{color:rgba(255,255,255,.42)}