/* ============================================================
   PLATZREIFE — „Ein Wochenende, dann eine Woche."
   Drei tragende Effekte, sonst nichts:
   1) Die Kursuhr klebt, während der Stundenplan an ihr vorbeiläuft
   2) Am Scharnier springt dieselbe Scheibe auf die Sieben-Tage-Frist
   3) Der Rechner stellt die Zahlen um, Zustand steht in der Adresse
   Alle Farben, Abstände und Kurven aus tokens.css. Bewegt werden
   ausschließlich transform und opacity.
   ============================================================ */

.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}

/* ============================================================
   FEHLENDE TOKENS AUS tokens.css
   seite.css bringt die Farben, Abstände und die Bewegungskurve mit —
   aber NICHT die Radien, die Übergangsdauern und die Schatten. Im
   Browser nachgemessen: --r-pill, --r-karte, --r-flaeche,
   --t-schnell, --t-mittel, --t-lang, --schatten-karte und
   --schatten-plakette sind auf keiner Seite gesetzt.
   Die Folgen sind still, aber sichtbar: Jedes border-radius fiel auf
   0 zurück (der Termin-Chip war ein Rechteck neben lauter runden
   Knöpfen), und jede `transition: … var(--t-lang) …` war ungültig —
   also gab es überhaupt keinen Übergang, die Zustände sprangen hart.
   Werte wortgleich aus gerhelm-2026/tokens.css. Wie bei den
   Typo-Stufen nur für diese Seite; global gehören sie nach seite.css,
   sobald jemand die anderen Seiten mitprüfen kann — dort fehlen sie
   genauso.
   ============================================================ */
:root{
  --r-pill:999px;      /* Buttons, Chips, Plaketten */
  --r-karte:14px;      /* Dropdowns, Glaskarten */
  --r-flaeche:0px;     /* Bildflächen und Tarifkarten: scharfe Kante */
  --t-schnell:.25s;    /* Farbe, Deckkraft */
  --t-mittel:.35s;     /* Position, Größe */
  --t-lang:.8s;        /* Reveals, Bildwechsel */
  --schatten-karte:0 28px 60px -28px rgba(11,65,43,.45);
  --schatten-plakette:0 14px 30px -14px rgba(6,26,17,.6);
}

/* Typografie-Stufen: stehen seit 25.08.2026 zentral in seite.css.
   Sie lagen hier als Handkopie, weil seite.css sie nicht mitbrachte —
   dieselbe Falle wie bei den Radien und den zwei Schriften. */
/* Muss ganz oben stehen und muss !important sein: Auf dieser Seite werden
   Zeilen und Karten per hidden-Attribut aus- und eingeblendet (Rechner,
   Terminfilter), und jede eigene display-Regel — hier gibt es reichlich
   display:flex — schlägt das Attribut sonst still. Ohne diese Zeile stand
   „Leihschläger 0 €" in der Rechnung, obwohl niemand welche geliehen hat. */
[hidden]{display:none !important}

/* ============ 01 — DIE KURSUHR ============ */
.pfuhr{padding-bottom:var(--luft)}
.pfuhr .kapitel{padding-top:var(--luft)}

/* KEIN align-items:start — das staucht die linke Spalte auf die Höhe der
   Scheibe, und position:sticky kann dann nur innerhalb dieser 320 px
   wirken, also praktisch gar nicht. Die Spalte muss die volle Höhe der
   Grid-Zeile behalten (stretch), damit die Uhr über den ganzen
   Stundenplan hinweg stehen bleibt. */
.pfu-buehne{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:0 clamp(40px,6vw,88px);padding:0 var(--inset)}

/* Der Kleber. Wie bei der Streichliste hält top Abstand zur Kopfzeile UND
   zum Wappen, das aus ihr herausragt (bis 176 px) — bei einem kleineren
   Wert läge das Wappen über der Scheibe. */
.pfu-klebe{position:relative}
@media (min-width:901px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  .js .pfu-klebe{position:sticky;top:194px;align-self:start}
}

.pfu-uhr{position:relative;width:min(100%,320px);aspect-ratio:1;margin:0 auto}
.pfu-scheibe{width:100%;height:100%;display:block;overflow:visible}
.pfu-ring{fill:none;stroke:var(--linie-karte);stroke-width:11}
/* Die Unterrichtsblöcke: erst blass, dann voll — das Aufleuchten folgt
   dem Scroll und ist die einzige Bewegung auf der Scheibe außer dem
   Zeiger. */
.pfu-bogen{fill:none;stroke:var(--gruen);stroke-width:11;stroke-linecap:butt;opacity:.2;
  transition:opacity var(--t-lang) var(--ease)}
.pfu-bogen.an{opacity:1}
/* Die Übungszeit auf der inneren Spur: schmaler, mit eigenem Grundring
   darunter — so ist auch die Lücke (Nacht) als Aussage lesbar und nicht
   bloß als Nichts. */
/* EIGENE FARBE, nicht dasselbe Grün in anderer Deckkraft (16.08.2026,
   Andreas: „das versteht man nicht, weil selbe Farbe"). Zwei Töne
   desselben Grüns liest niemand als zwei Dinge — schon gar nicht auf zwei
   Ringen, die sich berühren. Der Ton wird aus den beiden vorhandenen
   Marken-Tokens gemischt, damit kein dritter Farbwert entsteht: hell genug
   für den Unterschied, dunkel genug, um auf Weiß noch zu stehen.
   Der Wert steht EINMAL hier — Ring, Legende und schmale Ersatzanzeige
   holen ihn von hier, sonst laufen sie beim nächsten Anfassen auseinander. */
.pfuhr{--pfu-ueben:color-mix(in srgb,var(--lime) 78%,var(--gruen))}
.pfu-innenring{fill:none;stroke:var(--linie-karte);stroke-width:8}
.pfu-ueben{fill:none;stroke:var(--pfu-ueben);stroke-width:8;stroke-linecap:butt;opacity:.3;
  transition:opacity var(--t-lang) var(--ease)}
.pfu-ueben.an{opacity:1}

/* Die Mitternachtsmarken: zwei Striche, die den Ring in drei Tage teilen.
   Ohne sie wäre die Scheibe eine hübsche Form; mit ihnen ist sie eine
   Aussage — zweimal schlafen, dann Zertifikat. */
.pfu-nacht{fill:none;stroke:var(--tinte);stroke-width:17;opacity:.34}
/* Der gelaufene Weg — dünn, dunkel, liegt auf den Bögen. */
.pfu-weg{fill:none;stroke:var(--tinte);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:calc(var(--p,0) * 1) 1}
.pfu-zeiger-g{transform:rotate(calc(var(--p,0) * 360deg));transform-origin:100px 100px;
  transition:transform .12s linear}
.pfu-zeiger{stroke:var(--tinte);stroke-width:3;stroke-linecap:round}

.pfu-mitte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;pointer-events:none;gap:2px}
.pfu-jetzt{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pfu-zeit{font-size:clamp(38px,4.4vw,54px);color:var(--tinte);letter-spacing:-.04em;line-height:1}
.pfu-sub{color:var(--muted);max-width:15ch;line-height:1.4}

/* Die Legende unter der Scheibe — sie macht aus der Grafik eine
   lesbare Aussage und trägt zugleich die Zahlen, die die Bögen zeigen. */
.pfu-legende{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.pfu-legende li{display:flex;align-items:center;gap:12px}
.pfu-lg-strich{flex:none;width:26px;border-radius:2px}
.pfu-lg-unterricht{height:9px;background:var(--gruen)}
.pfu-lg-ueben{height:8px;background:var(--pfu-ueben);width:20px;margin-left:6px}
.pfu-lg-nacht{height:9px;background:repeating-linear-gradient(90deg,
  var(--linie-karte) 0 5px,transparent 5px 9px)}
.pfu-lg-text{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:14px;
  color:var(--tinte);display:flex;flex-direction:column;line-height:1.3}
.pfu-lg-wert{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:13px;
  color:var(--muted)}

/* Die schmale Ersatzanzeige für kleine Fenster — kein geschrumpfter
   Ring, sondern dieselbe Zeitachse auf einer Linie abgewickelt. */
.pfu-leiste{display:none}
/* Zwei Spuren wie auf der Scheibe: oben der Unterricht, darunter die
   Übungszeit. Auf 6 px Höhe unterschied sie nur die Deckkraft — das las
   sich als „schwächer", nicht als „etwas anderes". */
.pfu-l-spur{position:relative;height:11px;border-radius:3px;background:var(--linie-karte);
  overflow:hidden}
.pfu-l-block{position:absolute;top:0;height:6px;left:calc(var(--von) * 100%);
  width:calc((var(--bis) - var(--von)) * 100%);background:var(--gruen);opacity:.28;
  transition:opacity var(--t-lang) var(--ease)}
.pfu-l-block.an{opacity:1}
.pfu-l-ueben{position:absolute;bottom:0;height:4px;left:calc(var(--von) * 100%);
  width:calc((var(--bis) - var(--von)) * 100%);background:var(--pfu-ueben);opacity:.3;
  transition:opacity var(--t-lang) var(--ease)}
.pfu-l-ueben.an{opacity:1}
.pfu-l-nacht{position:absolute;top:0;bottom:0;left:calc(var(--von) * 100%);width:2px;
  background:var(--tinte);opacity:.34}
.pfu-l-weg{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--tinte);
  transform:translateX(calc(var(--p,0) * (100vw - 2 * var(--inset))))}

/* Der Stundenplan rechts. Das padding unten ist die Haltestrecke: Ohne
   sie endet die Grid-Zeile mit der letzten Station, und sticky schiebt
   die Scheibe genau dann nach oben aus dem Bild — mitten in die
   Kopfzeile, unter das herausragende Wappen —, während man die
   Prüfungsstation noch liest. Mit ihr steht die Uhr, bis der Text
   durch ist, und verlässt das Bild erst danach. */
.pfu-stationen{list-style:none;margin:0;padding:0 0 min(20vh,190px);max-width:680px}
.pfu-station{padding:34px 0;border-top:1px solid var(--linie-karte);
  opacity:.42;transition:opacity var(--t-lang) var(--ease)}
.pfu-station:first-child{border-top:0;padding-top:0}
.pfu-station.an{opacity:1}
.pfu-s-zeit{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pfu-s-tag{color:var(--gruen)}
.pfu-s-uhr{font-size:13px;letter-spacing:.02em;color:var(--muted);text-transform:none;
  font-variant-numeric:tabular-nums}
.pfu-s-titel{color:var(--tinte);margin-bottom:12px;font-size:clamp(20px,2vw,27px)}
.pfu-s-text{max-width:52ch}

/* Die Zwischenzeiten: die Nächte, in denen nichts passiert — und genau
   deshalb der Grund, warum ein Wochenende reicht. Bewusst ruhig gesetzt,
   eingerückt, kleiner. */
.pfu-pause{margin:6px 0 6px 0;padding:22px 26px;background:var(--mint);
  border-radius:var(--r-karte);opacity:.42;transition:opacity var(--t-lang) var(--ease)}
.pfu-pause.an{opacity:1}
.pfu-p-dauer{color:var(--gruen)}
.pfu-p-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--tinte);margin:8px 0 6px}
.pfu-p-text{max-width:46ch}

/* auto-fit statt fester Spaltenzahl: Die Bilanz trägt mal drei, mal
   vier Kennzahlen — je nachdem, was im Backend gepflegt ist. */
.pfu-bilanz{list-style:none;margin:var(--luft-s) 0 0;padding:32px var(--inset) 0;
  border-top:1px solid var(--hairline);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:34px}
.pfu-b-wert{font-size:clamp(34px,4.4vw,58px);color:var(--tinte);line-height:1;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pfu-b-einheit{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gruen)}
.pfu-b-label{margin-top:10px;max-width:30ch}
.pfu-fuss{padding:26px var(--inset) 0;max-width:70ch;color:var(--muted)}

/* ============ SCHARNIER — DIE FRIST ============
   Der Kipp ins Dunkle ist der Übergang: Bis hierher wird erzählt,
   ab hier wird gerechnet. */
.pffrist{background:var(--tanne);color:#fff;padding:var(--luft) 0}
/* Nur Spaltenabstand: Ein gap wirkt auch zwischen den Zeilen, und da die
   rechte Spalte aus mehreren gestapelten Blöcken besteht (Text, Posten,
   Gutscheine, Summe), riss er dort 72 px Löcher zwischen Absätze, die
   zusammengehören. Den vertikalen Abstand macht unten die Media-Query,
   wo das Raster wirklich einspaltig wird. */
.pff-raster{padding:0 var(--inset);display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:0 clamp(34px,5vw,72px);
  align-items:start}

/* Die Frist-Scheibe klebt wie die Kursuhr — und zwar über ALLE Zeilen
   der rechten Spalte (grid-row 1/-1). Ohne das reicht ihre Grid-Zelle
   nur bis zum Ende des Textabsatzes, und sticky hätte fast keine
   Strecke: Die Sieben Tage wären eingelaufen, bevor man die Scheibe
   überhaupt richtig sieht. Jetzt steht sie oben, während Prämien,
   Gutscheine und Summe an ihr vorbeilaufen, und füllt sich genau in
   dieser Zeit. */
.pff-uhr-halter{position:relative;width:min(100%,260px);aspect-ratio:1;margin:0 auto;
  grid-row:1 / -1}
@media (min-width:901px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  .js .pff-uhr-halter{position:sticky;top:194px;align-self:start}
}
.pff-scheibe{width:100%;height:100%;display:block}
.pff-ring{fill:none;stroke:rgba(255,255,255,.07);stroke-width:11}
/* Sieben Segmente, die beim Sichtbarwerden nacheinander einlaufen.
   Kein Dauerlauf: Die Animation läuft genau einmal, ausgelöst vom
   IntersectionObserver über die Klasse .an am Abschnitt. */
/* Die sieben Tage sind IMMER da, nur blass — wie die Unterrichtsbögen
   der Kursuhr. So ist die Sieben von Anfang an ablesbar und die
   Scheibe füllt ein sichtbares Raster, statt aus dem Nichts zu
   wachsen. Kein transition-delay: Die Segmente folgen dem Scroll, der
   Versatz kommt aus der Scrollposition selbst; ein Delay ließe die
   Scheibe beim Zurückscrollen nachhinken. */
.pff-tag{fill:none;stroke:var(--lime);stroke-width:11;opacity:.17;
  transition:opacity var(--t-schnell) var(--ease)}
.pff-tag.an{opacity:1}
.pff-uhr-mitte{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
.pff-uhr-zahl{font-size:clamp(52px,7vw,76px);color:#fff;line-height:1;letter-spacing:-.05em}
.pff-uhr-label{color:var(--lime)}

.pff-text{grid-column:2}
.pff-kicker{color:var(--lime);margin-bottom:16px}
.pff-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,80px);letter-spacing:-.045em;line-height:.9;color:#fff}
.pff-lead{color:rgba(255,255,255,.78);margin-top:20px;max-width:52ch}

.pff-posten{grid-column:2;list-style:none;margin:38px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hairline-dunkel)}
.pff-p{padding:26px 26px 26px 0;border-right:1px solid var(--hairline-dunkel)}
.pff-p:last-child{border-right:0}
.pff-p:not(:first-child){padding-left:26px}
.pff-p-wert{font-size:clamp(28px,3.4vw,44px);color:var(--lime);line-height:1;letter-spacing:-.04em}
.pff-p-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.04em;color:#fff;margin:12px 0 5px}
.pff-p-text{color:rgba(255,255,255,.62)}

.pff-gutscheine{grid-column:2;margin-top:30px;padding:24px 26px;background:var(--pine);
  border-radius:var(--r-karte)}
.pff-g-kopf{color:var(--lime);margin-bottom:14px}
.pff-g-liste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px 30px}
.pff-g-liste li{display:flex;align-items:baseline;gap:11px;font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.86)}
.pff-g-marke{width:5px;height:5px;border-radius:50%;background:var(--lime);flex:none;
  transform:translateY(-3px)}

.pff-summe{grid-column:2;margin-top:36px;padding-top:26px;border-top:1px solid var(--hairline-dunkel);
  display:flex;align-items:baseline;justify-content:space-between;gap:26px;flex-wrap:wrap}
.pff-s-label{color:rgba(255,255,255,.6);max-width:24ch}
.pff-s-wert{font-size:clamp(46px,7vw,92px);color:var(--lime);line-height:.9;letter-spacing:-.05em}

/* Die Bedingung steht gleich groß neben der Summe, nicht als Sternchen
   darunter: Die Prämie hängt an einer Mitgliedschaft, und wer das erst
   im Kleingedruckten liest, fühlt sich zu Recht getäuscht. */
.pff-bedingung{grid-column:2;margin-top:22px;max-width:64ch;color:rgba(255,255,255,.76)}
.pff-cta{grid-column:2;margin-top:30px}

/* ============ 02 — DER RECHNER ============ */
.pfrechner{padding-bottom:var(--luft)}
.pfrechner .kapitel{padding-top:var(--luft)}
.pfr-werkzeug{padding:0 var(--inset)}

.pfr-fragen{display:flex;flex-wrap:wrap;gap:30px 52px;padding-bottom:34px;
  border-bottom:1px solid var(--hairline)}
.pfr-frage{border:0;padding:0;margin:0;min-width:0}
.pfr-frage legend{color:var(--muted);padding:0;margin-bottom:13px}
.pfr-chips{display:flex;flex-wrap:wrap;gap:9px}
.pfr-chip{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--linie-karte);
  border-radius:var(--r-pill);padding:11px 20px;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:13.5px;letter-spacing:.02em;color:var(--text);background:#fff;
  cursor:pointer;transition:border-color var(--t-schnell),background var(--t-schnell),color var(--t-schnell)}
.pfr-chip:hover{border-color:var(--gruen);color:var(--gruen)}
.pfr-chip.an{background:var(--gruen);border-color:var(--gruen);color:#fff}
.pfr-chip-sub{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:12.5px;opacity:.72}
.pfr-leih-inklusive{color:var(--muted);flex-basis:100%}

.pfr-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:0}
.pfr-weg{padding:38px 44px 38px 0;border-right:1px solid var(--hairline);display:flex;
  flex-direction:column}
.pfr-weg:last-child{border-right:0;padding-right:0;padding-left:44px}
.pfr-w-titel{color:var(--tinte);font-size:clamp(20px,2vw,27px)}
.pfr-w-text{margin-top:12px;max-width:38ch;min-height:3.2em}

.pfr-posten{margin:26px 0 0}
.pfr-posten-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:12px 0;border-top:1px solid var(--linie-karte)}
.pfr-posten-zeile dt{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:16px;
  color:var(--text)}
.pfr-posten-zeile dd{font-size:17px;color:var(--tinte);white-space:nowrap}
.pfr-posten-sub{color:var(--muted);font-weight:300}
.pfr-posten-abzug dt,.pfr-posten-abzug dd{color:var(--gruen)}

.pfr-w-summe{margin-top:auto;padding-top:26px;display:flex;align-items:baseline;
  justify-content:space-between;gap:18px;flex-wrap:wrap}
.pfr-w-s-label{color:var(--muted)}
.pfr-w-s-wert{font-size:clamp(38px,4.6vw,62px);color:var(--tinte);line-height:1;letter-spacing:-.045em}
/* Der Satz, der die Rechnung ausspricht — auf Mint, damit er als
   Ergebnis gelesen wird und nicht als weitere Zeile. */
.pfr-w-satz{margin-top:20px;padding:16px 20px;background:var(--mint);border-radius:var(--r-karte);
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:16px;line-height:1.5;
  color:var(--tanne)}

.pfr-mitglied{margin-top:var(--luft-s);padding:30px 34px;border:1px solid var(--linie-karte);
  border-radius:var(--r-karte)}
.pfr-m-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pfr-m-name{color:var(--tinte);font-size:clamp(19px,1.9vw,25px)}
.pfr-m-preis{font-size:clamp(24px,2.6vw,34px);color:var(--gruen);letter-spacing:-.03em}
.pfr-m-preis-sub{color:var(--muted)}
.pfr-m-text{margin:16px 0 18px;max-width:74ch}
/* Die übrigen Beitragsmodelle: eine schlichte Liste unter der Erklärung —
   sie soll die Schnuppermitgliedschaft ergänzen, nicht mit ihr wetteifern. */
.pfr-m-andere{margin:0 0 18px;padding-top:16px;border-top:1px solid var(--linie-karte)}
.pfr-m-andere-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.pfr-m-andere-liste li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:2px 18px;align-items:baseline;max-width:52ch}
.pfr-m-a-name{color:var(--tinte)}
.pfr-m-a-preis{color:var(--gruen)}
.pfr-m-a-sub{color:var(--muted);font-family:inherit;letter-spacing:normal}
.pfr-hinweis{margin-top:24px;max-width:78ch;color:var(--muted)}

/* ============ 03 — DIE VIER KURSE ============ */
.pfkurse{padding-bottom:var(--luft)}
.pfk-raster{padding:0 var(--inset);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--hairline)}
/* Tarifkarten scharfkantig — das ist Marke, nicht Versehen. */
.pfk-karte{padding:32px 28px 34px;border-right:1px solid var(--hairline);
  border-radius:var(--r-flaeche);display:flex;flex-direction:column;
  transition:background var(--t-mittel) var(--ease)}
.pfk-karte:first-child{padding-left:0}
.pfk-karte:last-child{border-right:0;padding-right:0}
.pfk-karte:hover{background:var(--mint)}
.pfk-name{color:var(--tinte);font-size:clamp(22px,2.1vw,29px)}
.pfk-unter{color:var(--gruen);margin-top:7px}
.pfk-preis{margin-top:20px}
.pfk-p-wert{display:block;font-size:clamp(28px,3vw,40px);color:var(--tinte);line-height:1;
  letter-spacing:-.04em}
.pfk-p-ab{font-size:.5em;letter-spacing:.04em;color:var(--muted)}
.pfk-p-zusatz{display:block;margin-top:7px;color:var(--muted)}
.pfk-staffel{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--linie-karte)}
.pfk-staffel li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
  font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:14.5px;color:var(--sekundaer)}
.pfk-st-p{color:var(--tinte)}
.pfk-fuerwen{margin-top:20px}
.pfk-eck{list-style:none;margin:20px 0 0;padding:0}
.pfk-eck li{display:flex;align-items:baseline;gap:10px;padding:6px 0;
  font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:15px;line-height:1.5;
  color:var(--text)}
.pfk-eck-marke{width:4px;height:4px;border-radius:50%;background:var(--gruen);flex:none;
  transform:translateY(-3px)}
.pfk-leih{margin-top:16px;color:var(--muted)}
.pfk-leih strong{color:var(--tinte);font-weight:600}
.pfk-termin{margin-top:20px;padding-top:16px;border-top:1px solid var(--linie-karte)}
.pfk-t-label{display:block;color:var(--muted);margin-bottom:5px}
.pfk-t-wert{font-size:19px;color:var(--gruen)}
a.pfk-t-wert:hover{color:var(--tanne);text-decoration:underline;text-underline-offset:4px}
.pfk-t-frei{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:15px;
  color:var(--sekundaer)}

.pfk-mehr{margin-top:20px}
.pfk-mehr summary{cursor:pointer;list-style:none;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);
  padding:8px 0}
.pfk-mehr summary::-webkit-details-marker{display:none}
.pfk-mehr summary::after{content:"+";margin-left:8px;font-size:15px}
.pfk-mehr[open] summary::after{content:"–"}
.pfk-mehr .pfk-mehr-zu{display:none}
.pfk-mehr[open] .pfk-mehr-auf{display:none}
.pfk-mehr[open] .pfk-mehr-zu{display:inline}
.pfk-d-kopf{color:var(--muted);margin:14px 0 9px}
.pfk-ablauf,.pfk-leistungen{list-style:none;margin:0;padding:0}
.pfk-ablauf li{padding:8px 0;border-top:1px solid var(--linie-karte)}
.pfk-a-zeit{display:block;color:var(--gruen);margin-bottom:4px}
.pfk-a-text{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:14.5px;
  line-height:1.5;color:var(--text)}
.pfk-leistungen li{display:flex;align-items:baseline;gap:9px;padding:4px 0;
  font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:14.5px;line-height:1.5;
  color:var(--text)}
.pfk-l-haken{width:9px;height:5px;border-left:1.5px solid var(--gruen);
  border-bottom:1.5px solid var(--gruen);transform:rotate(-45deg) translateY(-2px);flex:none}
.pfk-cta{margin-top:auto;padding-top:26px}
.pfk-hinweis{padding:26px var(--inset) 0;max-width:78ch;color:var(--muted)}

/* ============ DIE TERMINLEISTE ============ */
.pftermine{background:var(--tanne);color:#fff;padding:var(--luft) 0}
.pft-intro{padding:0 var(--inset);color:#fff}
.pft-lead{padding:16px var(--inset) 0;color:rgba(255,255,255,.74);max-width:60ch}

.pft-filter{display:flex;flex-wrap:wrap;gap:9px;padding:30px var(--inset) 0}
.pft-f-chip{display:inline-flex;align-items:center;border:1px solid var(--hairline-dunkel);
  border-radius:var(--r-pill);padding:10px 19px;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.8);cursor:pointer;
  transition:border-color var(--t-schnell),background var(--t-schnell),color var(--t-schnell)}
.pft-f-chip:hover{border-color:var(--lime);color:#fff}
.pft-f-chip.an{background:var(--lime);border-color:var(--lime);color:var(--tanne)}

.pft-gross-halter{padding:30px var(--inset) 0;margin-bottom:32px}
.pft-gross{border:1px solid var(--hairline-dunkel);border-radius:var(--r-flaeche);
  background:var(--pine);padding:32px 36px;display:inline-flex;flex-direction:column;
  align-items:flex-start;gap:8px;min-width:min(100%,340px)}
.pft-g-relativ{display:flex;align-items:center;gap:9px;color:var(--lime)}
.pft-g-punkt{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.pft-g-datum{color:#fff;margin-top:4px}
.pft-g-kurs{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:6px}
.pft-g-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.02em;color:rgba(255,255,255,.9)}
.pft-g-preis{font-size:19px;color:var(--lime)}
.pft-g-tage{color:rgba(255,255,255,.6)}
.pft-g-buchen{margin-top:18px}
.pft-leer{color:rgba(255,255,255,.8)}
/* Der Leerzustand ist ein Zustand derselben Karte, kein zweiter Aufbau:
   Alle Teile stehen immer im Quelltext, sichtbar ist entweder der Termin
   oder der Satz „gerade kein Termin". */
.pft-gross>.pft-g-leer{display:none}
.pft-gross.pft-leer>:not(.pft-g-leer){display:none}
.pft-gross.pft-leer>.pft-g-leer{display:block}

.pft-leiste{list-style:none;margin:0;padding:0 var(--inset);display:flex;gap:11px;flex-wrap:wrap}
.pft-karte-halter{display:flex}
.pft-karte{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:96px;
  padding:14px 15px 13px;border:1px solid var(--hairline-dunkel);border-radius:var(--r-flaeche);
  color:#fff;transition:border-color var(--t-schnell),background var(--t-schnell),
  transform var(--t-mittel) var(--ease)}
a.pft-karte:hover{border-color:var(--lime);transform:translateY(-3px)}
.pft-karte[aria-current="true"]{border-color:var(--lime);background:rgba(204,255,0,.16)}
.pft-k-tag{font-size:21px;letter-spacing:-.02em}
.pft-k-monat{color:rgba(255,255,255,.6)}
.pft-k-kurs{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:13px;
  color:rgba(255,255,255,.72);margin-top:3px}
.pft-karte.vorbei{border-style:dashed;border-color:rgba(255,255,255,.15);
  color:rgba(255,255,255,.5)}
.pft-karte.vorbei .pft-k-monat,.pft-karte.vorbei .pft-k-kurs{color:rgba(255,255,255,.4)}
.pft-k-vorbei{color:rgba(255,255,255,.4);margin-top:3px}
.pft-ohne{padding:26px var(--inset) 0;color:rgba(255,255,255,.66);display:flex;
  flex-direction:column;gap:5px;max-width:78ch}
.pft-ohne strong{color:#fff;font-weight:600}
.pft-hinweis{padding:22px var(--inset) 0;color:rgba(255,255,255,.6);max-width:78ch}
.pft-hinweis a,.pft-ohne a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}

/* ============ DIE GOLFLEHRERIN ============ */
.pflehrerin{background:var(--mint);padding:var(--luft) 0}
/* 330 px statt 250: Das Logo ist ein breiter Schriftzug mit Claim
   („Rückenschonender Golfunterricht") — in einer schmalen Spalte war
   die Unterzeile nicht mehr zu lesen. */
.pfl-raster{padding:0 var(--inset);display:grid;
  grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(34px,5vw,64px);align-items:start}
/* Die Logokarte: weiße Fläche, weil der Schriftzug des Logos dunkel ist
   und auf der Mint-Sektion sonst absäuft. Scharfe Kante wie alle
   Bildflächen. Das Logo ist sehr breit (760:97), die Karte richtet sich
   danach — ein hochkantes Format hätte es auf Briefmarkengröße
   geschrumpft. */
.pfl-logokarte{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:#fff;border-radius:var(--r-flaeche);padding:30px 30px 24px;
  box-shadow:var(--schatten-karte);transition:transform var(--t-mittel) var(--ease)}
.pfl-logokarte:hover{transform:translateY(-3px)}
.pfl-logo{width:100%;height:auto}
.pfl-logokarte .pfl-ornament{width:38%;stroke:var(--gruen);opacity:.45}

/* Ersatz, solange kein Logo hinterlegt ist: eine typografische Plakette. */
.pfl-plakette{background:var(--pine);border-radius:var(--r-flaeche);aspect-ratio:3/4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  box-shadow:var(--schatten-karte)}
.pfl-init{font-size:clamp(56px,6vw,82px);color:var(--lime);letter-spacing:-.05em;line-height:1}
.pfl-ornament{width:60%;height:auto;stroke:rgba(255,255,255,.4);stroke-width:2;fill:none}
.pfl-ornament circle{fill:var(--lime);stroke:none}
.pfl-kicker{color:var(--gruen)}
.pfl-zitat{margin:18px 0 0}
.pfl-zitat p{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,46px);letter-spacing:-.04em;line-height:1.02;color:var(--tinte)}
.pfl-name{margin-top:22px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.pfl-n-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.01em;color:var(--tinte)}
.pfl-n-rolle{color:var(--muted)}
.pfl-lauf{margin-top:16px;max-width:64ch}
.pfl-punkte{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:9px 34px}
.pfl-punkte li{display:flex;align-items:baseline;gap:11px;font-family:'Hanken Grotesk',sans-serif;
  font-weight:300;font-size:15.5px;line-height:1.5;color:var(--text)}
.pfl-p-marke{width:5px;height:5px;border-radius:50%;background:var(--gruen);flex:none;
  transform:translateY(-3px)}
.pfl-kontakt{margin-top:22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pfl-kontakt a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}
.pfl-trenner{color:var(--muted)}
.pflehrerin .btn-ghost{background:var(--tanne);border-color:var(--tanne);color:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;margin-top:22px}
.pflehrerin .btn-ghost:hover{background:var(--pine);border-color:var(--pine)}

/* ============ 05 — HÄUFIGE FRAGEN ============ */
.pffaq{padding-bottom:var(--luft)}
.pffaq .kapitel{padding-top:var(--luft)}
.pfq-raster{padding:0 var(--inset);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--hairline)}
.pfq-paar{padding:26px 40px 26px 0;border-bottom:1px solid var(--linie-karte)}
.pfq-paar:nth-child(even){padding-right:0;padding-left:40px;border-left:1px solid var(--linie-karte)}
.pfq-frage{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;
  letter-spacing:-.01em;line-height:1.25;color:var(--tinte);margin-bottom:11px}
.pfq-antwort{max-width:52ch}

/* ============ DOKUMENTE & ABSCHLUSS-CTA ============
   Beide Blöcke stammen von der Platzregeln-Seite und werden hier
   wiederverwendet — ihr Aussehen steckt aber in platzregeln.css, die
   diese Seite nicht lädt. Ohne diesen Abschnitt stand der Abschluss
   ungestylt auf Weiß, samt Lime-Button auf hellem Grund (1,9:1). Die
   Schnuppergolf-Seite trägt dieselbe Kopie aus demselben Grund. */
.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);font-family:'Space Grotesk',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(20px,2vw,27px);line-height:1}
.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)}

/* ============ FOKUS ============
   seite.css setzt global einen Lime-Fokusring. Auf den dunklen Flächen
   (Terminleiste, Scharnier) ist das richtig; auf Weiß hat Lime nur rund
   1,9:1 gegen den Grund und wäre kaum zu sehen. Die hellen Bedienteile
   bekommen deshalb Grün — kein outline:none, nur eine andere Farbe. */
.pfr-chip:focus-visible,.pfk-mehr summary:focus-visible,.pfk-t-wert:focus-visible,
.pfl-kontakt a:focus-visible,.pfr-mitglied a:focus-visible{
  outline:3px solid var(--gruen);outline-offset:3px}

/* ============ BEWEGUNG BEIM SICHTBARWERDEN ============
   Nur transform und opacity, alles über IntersectionObserver. */
.pff-p,.pff-summe{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-lang) var(--ease),transform var(--t-lang) var(--ease)}
.pffrist.an .pff-p{opacity:1;transform:none;transition-delay:calc(var(--i) * .09s + .25s)}
.pffrist.an .pff-summe{opacity:1;transform:none;transition-delay:.62s}

/* ============ RESPONSIVE ============
   Unter 900 px wird aus der Scheibe die Leiste — ein anderes Bild,
   kein geschrumpftes. Unter 700 px stehen alle Raster einspaltig. */
@media (max-width:1200px){
  .pfk-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfk-karte:nth-child(2n){border-right:0;padding-right:0}
  .pfk-karte:nth-child(2n+1){padding-left:0}
  .pfk-karte:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
}
@media (max-width:900px){
  .pfu-buehne{grid-template-columns:minmax(0,1fr);gap:0}
  .pfu-uhr,.pfu-legende{display:none}
  .pfu-leiste{display:block;padding:12px 0 16px;background:#fff}
  .pfu-l-zeit{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;flex-wrap:wrap}
  .pfu-l-tag{color:var(--gruen)}
  .pfu-l-uhr{font-size:20px;color:var(--tinte)}
  .pfu-l-was{color:var(--muted);margin-left:auto;text-align:right;max-width:52%}
  /* top:134px — auf schmalen Fenstern ist die Kopfzeile 64 px hoch, das
     Wappen hängt aber bis rund 130 px heraus. Bei top:64px lag es über
     der Leiste (im Test nachgemessen), deshalb beginnt sie darunter. */
  .js .pfu-klebe{position:sticky;top:134px;z-index:4;background:#fff;
    box-shadow:0 10px 20px -18px rgba(11,65,43,.6)}
  .pfu-bilanz{grid-template-columns:minmax(0,1fr);gap:26px}
  .pff-raster{grid-template-columns:minmax(0,1fr);gap:0}
  .pff-text,.pff-posten,.pff-gutscheine,.pff-summe,.pff-bedingung,.pff-cta{grid-column:1}
  .pff-uhr-halter{width:min(100%,190px);margin:0 0 26px;grid-row:auto}
  .pff-posten{grid-template-columns:minmax(0,1fr)}
  .pff-p{border-right:0;border-bottom:1px solid var(--hairline-dunkel);padding:20px 0}
  .pff-p:not(:first-child){padding-left:0}
  .pff-p:last-child{border-bottom:0}
  .pfr-wege{grid-template-columns:minmax(0,1fr)}
  .pfr-weg{border-right:0;padding:30px 0;border-bottom:1px solid var(--hairline)}
  .pfr-weg:last-child{padding-left:0;border-bottom:0}
  .pfr-w-text{min-height:0}
  .pfl-raster{grid-template-columns:minmax(0,1fr)}
  .pfl-plakette{aspect-ratio:16/7;max-width:340px}
  .pfl-logokarte{max-width:380px;padding:24px 22px 20px}
  .pfq-raster{grid-template-columns:minmax(0,1fr)}
  .pfq-paar,.pfq-paar:nth-child(even){padding:24px 0;border-left:0}
}
@media (max-width:700px){
  .pfk-raster{grid-template-columns:minmax(0,1fr)}
  .pfk-karte{border-right:0;border-bottom:1px solid var(--hairline);padding:28px 0}
  .pfk-karte:last-child{border-bottom:0}
  .pfu-station{padding:26px 0}
  .pfu-pause{padding:18px 20px}
}
@media (max-width:560px){
  /* Am Telefon reicht die Breite nicht für zwei Spalten — Name über
     Betrag, sonst schiebt die Zeile die ganze Seite nach rechts. */
  .pfr-m-andere-liste li{grid-template-columns:minmax(0,1fr)}

  .pf-chipzeile{padding:0 var(--inset)}
  .pf-chip{font-size:14px;padding:12px 18px}
  .pft-gross{padding:26px 22px}
  .pft-karte{min-width:calc(50% - 6px);flex:1}
  .pfr-fragen{gap:24px 32px}
  .pfr-mitglied{padding:24px 22px}
  .pff-g-liste{grid-template-columns:minmax(0,1fr)}
}

/* ============ REDUZIERTE BEWEGUNG ============
   Kein Interpolieren, nur Zustände: Die Scheibe steht fertig
   gezeichnet da, alle Stationen sind gleich präsent, die Frist ist
   voll ausgefüllt. Es geht keine Information verloren. */
@media (prefers-reduced-motion:reduce){
  .pfu-bogen,.pfu-l-block{opacity:1}
  .pfu-ueben{opacity:1}
  .pfu-l-ueben{opacity:1}
  .pfu-station,.pfu-pause{opacity:1}
  .pfu-zeiger-g{transition:none}
  .pff-tag,.pff-tag.an{opacity:1;transition:none}
  .pff-p,.pff-summe{opacity:1;transform:none;transition:none}
  .pfk-karte,.pf-chip,.pft-karte{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Ohne JavaScript zeigt die Scheibe alle Bögen und den vollen Weg — sie
   ist dann ein Diagramm statt einer Uhr, und das ist in Ordnung: Der
   Stundenplan daneben trägt jede Uhrzeit im Klartext.
   Wichtig ist die einspaltige Bühne: Ohne Skript klebt nichts, die
   Scheibe stünde also oben in einer Spalte, die über den ganzen
   Stundenplan hinweg leer bleibt. Einspaltig steht sie schlicht davor.
   Aus demselben Grund fällt die Haltestrecke weg — sie hält nichts. */
html:not(.js) .pfu-buehne{grid-template-columns:minmax(0,1fr)}
html:not(.js) .pfu-uhr{margin:0 0 var(--luft-s)}
html:not(.js) .pfu-stationen{padding-bottom:0}
html:not(.js) .pfu-bogen,html:not(.js) .pfu-l-block{opacity:1}
html:not(.js) .pfu-ueben{opacity:1}
html:not(.js) .pfu-l-ueben{opacity:1}
html:not(.js) .pfu-station,html:not(.js) .pfu-pause{opacity:1}
html:not(.js) .pfu-weg{stroke-dasharray:1 1}
html:not(.js) .pfu-zeiger-g{display:none}
/* Die Mitte behält Tag und Uhrzeit: Ohne Skript zeigt sie schlicht den
   Kursbeginn — „Freitag 15:00, 52,5 Stunden insgesamt". Auch das ist
   eine wahre Aussage, nur eben eine stehende. */
html:not(.js) .pff-tag{opacity:1}
html:not(.js) .pff-p,html:not(.js) .pff-summe{opacity:1;transform:none}

/* ── Freie Plätze aus PC CADDIE (16.08.2026) ─────────────────────────────
   Gleiche Regel wie auf der Schnuppergolf-Seite: Die Zahl kommt aus der
   Anmeldeverwaltung, wird ausschließlich in kurs_plaetze() berechnet und
   hier nur dargestellt. --live erst ab drei oder weniger freien Plätzen. */
.pft-g-plaetze{display:inline-block;margin-top:12px;padding:6px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);color:#fff;font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;font-size:14px}
.pft-g-plaetze.knapp{background:rgba(255,90,77,.16);color:#ff9d94}
.pft-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,.78)}
.pft-k-plaetze.knapp{color:#ff9d94}
.pft-karte.vorbei .pft-k-plaetze{color:rgba(255,255,255,.4)}