/* Schriften lokal — keine externen Requests, DSGVO-freundlich */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-800-normal.woff2') format('woff2')}

/* ============================================================
   GERHELM 2026 — Richtung 03 „Die Runde"
   Idee: Die Website spielt eine Runde. Kapitel 01 ist ein
   Scroll-Instrument über 18 Bahnen, die Platzkarte läuft mit,
   Par summiert sich wie auf der Scorekarte.
   Farben, Logo, Schriften, Navigationsstruktur: unverändert.
   Typografie neu: echte Sprünge (11 / 19 / 28 / 86 / 190).
   Layout neu: Kapitelmarken, Hairlines, Full-Bleed-Brüche,
   Überlappungen statt gleichförmiger Kartenraster.
   Technik: Video-Crossfade statt src-Tausch, Bahnfotos nur
   im Fenster ±1, Bildmaße gesetzt, Fokusfalle in der Lightbox,
   Bahn-Explorer auch per Klick/Touch, JSON-LD, OG-Bild.
   ============================================================ */

:root{
  --lime:#CCFF00; --gruen:#1F8446; --tanne:#0B412B; --pine:#07301F;
  --weiss:#fff; --mint:#E8EFE8; --tinte:#14231B; --text:#43504a;
  --sekundaer:#5d6a63; --nav:#3c473f;
  --muted:#616c65;              /* war #6b756e — 4,08:1 auf Mint (#E8EFE8), fiel durch */
  --linie-header:#e9ede7; --linie-karte:#e4e9e3; --live:#ff5a4d; --eagle:#6FB6FF;
  --inset:64px; --luft:84px; --luft-s:44px;
  /* Kopfleiste und (mobil) die feste Fußleiste als Maß, nicht als Zahl an
     drei Stellen: Die Bühnenhöhe rechnet mit beiden. */
  --kopf-h:76px; --leiste-h:56px;
  /* Mindesthöhe jeder Seitenbühne — EIN Maß, weil sonst jede Seite ihr
     eigenes hat und die Hälfte davon am Handy einen Reststreifen stehen
     lässt. Mobil wird daraus der ganze freie Platz (siehe unten). */
  --buehne-min:clamp(470px,66svh,700px);
  --hairline:rgba(20,35,27,.14);
  --hairline-dunkel:rgba(255,255,255,.16);
  --ease:cubic-bezier(.16,.84,.44,1);

  /* DIE ZWEI SCHRIFTEN ALS TOKEN.
     `aktuelles.css` und `markt.css` haben sie von Anfang an so benutzt —
     definiert waren sie NIRGENDS. `font-family:var(--anzeige)` fiel damit
     als ungültige Regel aus, und die Überschriften erbten still den
     Lauftext. Auf der Seite fiel das kaum auf; im Blatt, das über der
     Startseite aufgeht, stand die Schrift dann sichtbar neben der der
     Seite (Andreas, 24.08.2026). Dieselbe Falle wie bei den Radien
     darunter — deshalb stehen sie jetzt hier, wo jede Seite sie sieht. */
  --anzeige:'Space Grotesk',sans-serif;
  --lauf:'Hanken Grotesk',sans-serif;

  /* Radien, Zeiten und Schatten — Werte wortgleich aus tokens.css.
     Sie standen bisher NUR dort, und tokens.css hängt nur an einem Teil
     der Seiten. Auf allen anderen (Startseite, Startzeiten, Matchplay,
     Pins, Platzregeln, Range, Öffnungszeiten, Schnuppergolf …) war
     `var(--r-pill)` damit undefiniert: Die Regel fiel aus, Pillen und
     Karten standen eckig da und jede `transition` mit `var(--t-…)` war
     ungültig — Hover schaltete hart um. Hier gelten sie überall. */
  --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);
}

/* DIE NEUN TYPO-STUFEN — dritter Fall desselben Musters.
   Sie standen in tokens.css und in SECHS Handkopien (ea, einsteiger,
   fox-rabbit, mannschaften, platzreife, turniere). Wer eine neue Seite
   baute, musste ans Kopieren denken; wer es vergaß, bekam keine
   Fehlermeldung, sondern stillen Fließtext. Nachgemessen am 25.08.2026:
   Auf schnuppergolf.php und platzregeln.php fiel genau das aus — dort
   standen 49 bzw. 10 `.t-mikro` und 16 bzw. 8 `.t-titel` als gewöhnlicher
   Lauftext, weil die Kopie fehlte. Die sieben Fassungen waren außerdem
   schon auseinandergelaufen.

   Deshalb stehen die Stufen jetzt hier, wo jede Seite sie sieht — wie die
   Radien und die zwei Schriften darüber. Werte sind die Mehrheitsfassung
   aus tokens.css; `.t-zahl` bekommt zusätzlich `font-feature-settings`,
   weil fünf der sieben Kopien es hatten und tabulare Ziffern der ganze
   Zweck der Stufe sind (hochzählende Zahlen zappeln sonst).

   Eine Seite, die bewusst abweicht, überschreibt danach in ihrer eigenen
   CSS — die Seiten-CSS wird ohne Ausnahme NACH seite.css geladen. So hält
   fox-rabbit.css seine drei engeren Stufen.

   Die Regel dahinter (stand bisher in tokens.css): Alle Ziffern tabular.
   Uppercase nur für Display und Labels, niemals für Lauftext. Lauftext nie
   unter 15px, Labels nie unter 10,5px. */
.t-display{font-family:var(--anzeige);font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(36px,5.6vw,88px)}
.t-hero{font-family:var(--anzeige);font-weight:700;text-transform:uppercase;letter-spacing:-.055em;line-height:.84;font-size:min(clamp(48px,8.6vw,150px),18svh)}
.t-titel{font-family:var(--anzeige);font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(24px,2.8vw,38px)}
.t-lead{font-family:var(--lauf);font-weight:300;font-size:19px;line-height:1.55;color:var(--sekundaer)}
.t-text{font-family:var(--lauf);font-weight:400;font-size:16px;line-height:1.6;color:var(--text)}
.t-klein{font-family:var(--lauf);font-weight:300;font-size:15px;line-height:1.5;color:var(--sekundaer)}
.t-eyebrow{font-family:var(--anzeige);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.t-mikro{font-family:var(--anzeige);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.t-zahl{font-family:var(--anzeige);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:#fff;color:var(--text);font-family:'Hanken Grotesk',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty}
img,svg,video{display:block;max-width:100%}
a{color:var(--gruen);text-decoration:none}
a:hover{color:var(--tanne)}
ul{list-style:none}
::selection{background:var(--lime);color:var(--pine)}

:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tanne);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skiplink:focus{left:0}

/* ---------- Typografie-Bausteine ---------- */
.eyebrow{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.mikro{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.zahlen{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .25s var(--ease)}
.btn-gruen{background:var(--gruen);color:#fff}
.btn-gruen:hover{background:#166433;color:#fff;transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:var(--tanne)}
.btn-lime:hover{background:#a9e06d;color:var(--pine);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff;transform:translateY(-2px)}
.btn-weiss{background:#fff;color:var(--tanne)}
.btn-weiss:hover{color:var(--pine);transform:translateY(-2px)}
.btn-outline{background:#fff;border-color:var(--gruen);color:var(--gruen);gap:7px}
.btn-outline:hover{background:var(--mint);color:var(--tanne)}

.tlink{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;color:var(--gruen)}
.tlink .pfeil{transition:transform .3s var(--ease)}
.tlink:hover .pfeil{transform:translateX(6px)}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--tanne);z-index:120}

/* ---------------- HEADER (unverändert im Verhalten) ---------------- */
/* Das Wappen liegt absolut, der Schriftzug wird mit margin-left daneben
   geschoben. Diese Zahl war viermal von Hand gesetzt (gross, kompakt, schmal,
   schmal+kompakt) und aus keiner Wappenbreite abgeleitet — die Luft dazwischen
   war deshalb in jedem Zustand eine andere: 37,7 / 24,3 / 17,9 / 15,3 px, und
   sie sprang beim Scrollen um 13 px. Jetzt ist die Luft die Groesse, die
   gesetzt wird, und der Abstand das Ergebnis. .6994 ist das Seitenverhaeltnis
   des Wappen-SVG (viewBox 206,94 x 295,86) — die Tinte fuellt die viewBox
   randlos aus, gemessen am 27.08.2026. Wer das Wappen tauscht, prueft die
   Zahl nach; nur --wappen-h anfassen reicht sonst nicht. */
.header{position:sticky;top:0;z-index:100;height:var(--kopf-h);display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 var(--inset);border-bottom:1px solid var(--linie-header);background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);--wappen-h:172px;--wappen-luft:20px}
.header .logo{position:relative;flex:none;height:76px;display:flex;align-items:center;color:inherit}
.logo .wappen{position:absolute;top:4px;left:2px;height:var(--wappen-h);width:auto;z-index:5;filter:drop-shadow(0 16px 30px rgba(7,32,21,.5));transition:height .35s var(--ease)}
.header.kompakt{--wappen-h:134px}
.logo .lockup{display:flex;flex-direction:column;justify-content:center;margin-left:calc(2px + var(--wappen-h) * .6994 + var(--wappen-luft));transition:margin-left .35s var(--ease);white-space:nowrap}
.logo .z1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.015em;text-transform:uppercase;color:var(--tinte);line-height:1.05;transition:font-size .35s}
.header.kompakt .logo .z1{font-size:19px}
.logo .z2{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen);margin-top:4px;line-height:1}
.hauptnav>ul{display:flex;gap:16px}
.hauptnav>ul>li{position:relative;padding-bottom:9px;margin-bottom:-9px}
.hauptnav>ul>li>a{position:relative;display:inline-flex;align-items:center;gap:6px;font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--nav);padding:4px 0 6px;transition:color .25s;white-space:nowrap}
.hauptnav>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gruen);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.hauptnav>ul>li>a:hover,.hauptnav>ul>li:focus-within>a{color:var(--gruen)}
.hauptnav>ul>li>a:hover::after,.hauptnav>ul>li:focus-within>a::after{transform:scaleX(1);transform-origin:0 50%}
.hauptnav .caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.5;transition:transform .25s var(--ease)}
.hauptnav>ul>li:hover .caret,.hauptnav>ul>li:focus-within .caret{transform:rotate(225deg) translate(-2px,-2px);opacity:.9}
.sub{position:absolute;top:100%;left:-16px;z-index:60;min-width:252px;background:#fff;border:1px solid var(--linie-header);border-radius:14px;padding:10px;box-shadow:0 28px 60px -28px rgba(11,65,43,.45);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s,transform .22s var(--ease),visibility .22s}
.hauptnav>ul>li:hover .sub,.hauptnav>ul>li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--nav);transition:background .18s,color .18s}
.sub a:hover{background:var(--mint);color:var(--gruen)}
.sub .extern{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none}
.sub .teiler{height:1px;background:var(--linie-header);margin:7px 10px}
/* --- Website-Suche ---
   Ein Bauteil, zwei Umgebungen: Desktop im Panel unter der Lupe (neben
   „Mein Bereich"), mobil als Klon oben im dunklen Hamburger-Menü — die
   .mobilmenu-Regeln unten drehen nur die Farben. Die Trefferlinks sind
   eigenständig gestylt (zwei Zeilen: Titel + Schnipsel), sie erben nichts
   von .sub oder .mm-sub. */
/* Die Lupe hängt DIREKT an „Mein Bereich" (Andreas: „an diesen gekoppelt,
   ein paar px Abstand"): Beide stecken im .kopf-paar — für den Header EIN
   Flex-Kind, damit space-between die 8px dazwischen nie aufweiten kann
   (eine Negativ-Marge auf der Lupe tat genau das auf breiten Fenstern). */
.kopf-paar{display:flex;align-items:center;gap:8px;flex:none}
.such-knopf{padding:0 14px}
.such-knopf[hidden]{display:none}
.such-panel{position:absolute;top:calc(100% + 10px);right:var(--inset);z-index:120;width:min(430px,calc(100vw - 2*var(--inset)));background:#fff;border:1px solid var(--linie-header);border-radius:14px;padding:12px;box-shadow:0 28px 60px -28px rgba(11,65,43,.45)}
.such-panel[hidden]{display:none}
@media (max-width:1360px){.such-panel{display:none}}
.nav-suche{padding:2px 4px}
.ns-feld{width:100%;border:1px solid var(--linie-header);border-radius:9px;padding:8px 11px;font:inherit;font-size:13.5px;color:var(--nav);background:#fff}
.ns-feld::placeholder{color:var(--muted)}
.ns-feld:focus{outline:2px solid var(--gruen);outline-offset:1px}
.ns-status{margin:7px 6px 0;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ns-status:empty{display:none}
.ns-treffer{list-style:none;margin:4px 0 0;padding:0;max-height:min(50vh,400px);overflow:auto}
.ns-treffer a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--nav);text-align:left;transition:background .18s,color .18s}
.ns-treffer a:hover,.ns-treffer a:focus-visible{background:var(--mint);color:var(--gruen)}
.ns-treffer span{font-size:12px;font-weight:400;color:var(--muted);line-height:1.45}
.ns-treffer mark{background:transparent;color:var(--gruen);font-weight:700}
/* Mobil sitzt die Suche OBEN im Menü, direkt unter dem Menükopf (seite.js
   klont sie dorthin) — mit dem Seitenrand der Fußknöpfe (22px). */
.mobilmenu .nav-suche{padding:16px 22px 6px}
.mobilmenu .ns-feld{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.mobilmenu .ns-feld::placeholder{color:rgba(255,255,255,.45)}
.mobilmenu .ns-feld:focus{outline:2px solid var(--lime)}
.mobilmenu .ns-status{color:rgba(255,255,255,.5)}
.mobilmenu .ns-treffer a{padding:10px 0;border-radius:0;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.68)}
.mobilmenu .ns-treffer a:hover,.mobilmenu .ns-treffer a:focus-visible{background:none;color:#fff}
.mobilmenu .ns-treffer a:last-child{border-bottom:0}
.mobilmenu .ns-treffer strong{color:#fff}
.mobilmenu .ns-treffer span{color:rgba(255,255,255,.55)}
.mobilmenu .ns-treffer mark{color:var(--lime)}
.header>.btn,.kopf-paar>.btn{height:42px;padding:0 22px;font-size:12px;flex:none;white-space:nowrap}
/* Telefon und E-Mail im Kopf: Klartext statt Pillen — die Schnellleiste
   trägt ihre drei Wege, und Kontakt ist kein Weg, sondern ein Faktum
   (Andreas, 05.09.2026). Nur auf breiten Fenstern: darunter ist der Kopf
   mit Navigation und Knöpfen gemessen voll, dann tragen Fußzeile und
   /kontakt die Daten. */
.kopf-kontakt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.kopf-kontakt a{position:relative;display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1;color:var(--nav);white-space:nowrap;transition:color .2s,border-color .2s}
.kopf-kontakt a:hover{color:var(--gruen)}
.kopf-kontakt .kk-mail{font-size:12px;font-weight:500;letter-spacing:.03em;color:var(--muted)}
.kopf-kontakt .kk-icon{display:none}
@media (max-width:1599px){.kopf-kontakt{display:none}}
/* Die aktuelle Rubrik trägt den Unterstrich — gesetzt von seite.js aus den
   Untermenü-Links. Vorher hing er fest an „Mitglied werden" und las sich
   auf jeder Seite wie ein festgeklemmter Aktiv-Zustand (05.09.2026). */
.hauptnav>ul>li>a.nav-hier{color:var(--gruen)}
.hauptnav>ul>li>a.nav-hier::after{transform:scaleX(1);transform-origin:0 50%}
.sub a[aria-current]{background:var(--mint);color:var(--gruen)}
.burger{display:none;background:none;border:1px solid var(--linie-header);border-radius:999px;padding:11px 14px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--tinte);margin:4px 0}
@media (max-width:1600px){.mein-bereich span{display:none}.mein-bereich{padding:0 12px}}
/* EIN Umschaltpunkt, nicht zwei. Bis zum 22.08.2026 verschwand die
   Hauptnavigation bei 1280 px, der Burger kam aber erst bei 1180 px —
   dazwischen zeigte die Kopfzeile ueberhaupt kein Menue.

   1360 px ist gemessen, nicht geschaetzt: Logo, Navigation, „Mein
   Bereich" und die Sprachpille brauchen zusammen 1355 px. Darunter
   schob die Kopfzeile die Seite seitlich weg. */
@media (max-width:1360px){.hauptnav,.header>.btn,.kopf-paar{display:none}.burger{display:block}
  /* Sobald der Burger uebernimmt, steht zwischen Schriftzug und Burger
     nur noch Leere — die Sprachpille schwamm darin in der Mitte und sah
     aus, als gehoere sie nirgends hin (Andreas, 23.08.2026). Sie gehoert
     zur Steuerung rechts, also haengt sie sich an den Burger. */
  .header>.langtg{margin-left:auto}}
/* Schmale Telefone: Die Sprachpille schob den Burger aus dem Bild
   (gemessen: 483 px Inhalt bei 390 px Fenster). Sie steht im mobilen
   Menue gleich oben noch einmal — dort reicht sie. */
@media (max-width:620px){.header>.langtg{display:none}}
/* Ganz schmale Geraete (360 px): Wappen, Schriftzug und Burger brauchten
   376 px. Der Abstand dazwischen gibt die 16 px her, die fehlen. */
@media (max-width:420px){.header{gap:12px}}
/* Mobil gehören Telefon und E-Mail trotzdem in den Kopf (Andreas,
   05.09.2026) — aber in der Kopfzeile selbst ist kein Platz: Wappen,
   Schriftzug und Burger brauchen bei 360 px schon 376 px (siehe oben);
   zwei Knöpfe schoben den Burger nachweislich aus dem Bild. Deshalb eine
   schmale Kontaktzeile UNTER der Kopfzeile, im selben Milchglas. Sie
   klebt am Kopf und räumt beim Scrollen das Feld (.kompakt) — wer liest,
   braucht die Nummer nicht dauerhaft; oben angekommen ist sie wieder da.
   Nur bis 900 px: darüber säße sie den Schnell-Pillen (top:96px) im Weg. */
@media (max-width:900px){
  /* Rechtsbündig mit Schutzstreifen links: Das Wappen ragt unter die
     Kopfzeile und stand einer zentrierten Zeile auf der Nummer (390 px,
     gemessen). */
  .kopf-kontakt{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:row;justify-content:flex-end;align-items:center;gap:16px;
    padding:8px var(--inset) 9px;padding-left:140px;
    background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid var(--linie-header);transition:opacity .25s,visibility .25s}
  .kopf-kontakt a{padding:4px 0}
  .kopf-kontakt .kk-mail{font-size:12px}
  .kopf-kontakt .kk-icon{display:block;width:14px;height:14px;margin-right:6px;opacity:.65}
  .header.kompakt .kopf-kontakt{opacity:0;visibility:hidden}
}
/* Ganz schmal: Die Zeichen sagen nichts, was die Texte nicht sagen —
   ihr Platz gehört der Nummer. */
@media (max-width:390px){
  .kopf-kontakt{gap:12px}
  .kopf-kontakt .kk-icon{display:none}
}
/* ---------- Ehrliche Grenzen der englischen Fassung -------------------
   Kleine Marke an Links, die aus der englischen Fassung in die deutsche
   Insel fuehren (Vertragsweg, Mein Bereich, Kuendigung, Datenschutz).
   Optik wie .extern — dieselbe Aussage: "hier verlaesst du das Gewohnte".
   Kontrast --muted auf Weiss 5,5:1, auf Dunkel rgba(255,255,255,.55). */
.nurde{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
       color:var(--muted);flex:none;vertical-align:.15em}
.mobilmenu .nurde,.footer .nurde,footer .nurde{color:rgba(255,255,255,.55)}

/* ---------- Hinweisstreifen fuer englische Browser -------------------
   KEINE Sprachweiche (E5): kein Redirect nach Browsersprache, nur ein
   Angebot. Einmal wegklickbar, Bots sehen ihn nie. */
.langhinweis{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
             padding:9px 18px;background:var(--mint);border-bottom:1px solid var(--linie-karte);
             font-size:14px;color:var(--text)}
.langhinweis a{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
               letter-spacing:.05em;color:var(--gruen);border-bottom:1px solid currentColor;
               padding-bottom:1px}
.langhinweis a:hover{color:var(--tanne)}
.langhinweis button{background:none;border:none;cursor:pointer;font-size:19px;line-height:1;
                    color:var(--muted);padding:0 2px}
.langhinweis button:hover{color:var(--tinte)}
.langhinweis[hidden]{display:none}
@media (max-width:560px){.langhinweis{font-size:13px;gap:10px;padding:8px 14px}}

/* ---------- DE/EN-Pille -----------------------------------------------
   Optik nach dem Kundenbereich der Iventwerkstatt (dort Coral), hier in
   Gerhelm-Toenen. Der Mechanismus ist ein anderer: dort Buttons + Neuladen,
   hier ECHTE LINKS. Der Kundenbereich liegt hinter einem Magic-Link, dorthin
   kommt nie eine Suchmaschine; diese Seite lebt vom Gefundenwerden — Google
   verknuepft die beiden Fassungen ueber genau diesen Link, und der Rechtsklick
   "in neuem Tab oeffnen" tut das Erwartete.

   Gemessene Kontraste (Hausstandard AA 4,5:1, docs/Barrierefreiheit_*):
     aktiv    Weiss auf --gruen ............ 4,72:1
     ruhend   --sekundaer auf --mint ....... 4,84:1
     (--muted waere 4,08:1 gewesen und faellt bei 12px Fett durch)
     dunkel   --pine auf --lime ............ 8,44:1
     dunkel   Weiss 72 % auf --tanne ....... 5,12:1
   Die Pille bleibt auf JEDER Breite sichtbar — anders als bei der
   Iventwerkstatt, die sie unter 700 px ausblendet. Das koennen wir uns nicht
   leisten: Der Gast, der sie braucht, steht auf dem Platz am Handy. */
.langtg{display:inline-flex;align-items:center;gap:3px;height:34px;padding:0 4px;flex:none;box-sizing:border-box;
        border-radius:var(--r-pill,999px);background:var(--mint);border:1px solid var(--linie-karte)}
.langtg>a,.langtg>span{display:inline-flex;align-items:center;border-radius:999px;padding:5px 11px;
        font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;
        color:var(--sekundaer);transition:background .2s,color .2s}
.langtg>a:hover{color:var(--tanne)}
.langtg>a.an{background:var(--gruen);color:var(--weiss)}
.langtg>a.an:hover{color:var(--weiss)}
/* Seiten, die es auf Englisch nicht gibt (Vertragsweg, Rechtstexte, Mein
   Bereich): EN steht ruhend da statt zu verschwinden. Ein Versprechen, das
   nicht eingeloest wird, waere schlimmer als ein sichtbares "gibt es nicht". */
.langtg>span.aus{opacity:.42;cursor:default}
.langtg>a:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
@media (max-width:1180px){.langtg{height:32px}.langtg>a,.langtg>span{padding:5px 9px;font-size:11.5px}}
/* Auf Dunkel: Mobilmenue-Kopf und Fusszeile */
.langtg-mm,.langtg-fuss{background:rgba(255,255,255,.10);border-color:var(--hairline-dunkel)}
.langtg-mm>a,.langtg-mm>span{color:rgba(255,255,255,.72)}
.langtg-fuss>a,.langtg-fuss>span{color:rgba(255,255,255,.78)}
.langtg-mm>a:hover,.langtg-fuss>a:hover{color:#fff}
.langtg-mm>a.an,.langtg-fuss>a.an{background:var(--lime);color:var(--pine)}
.langtg-mm>a.an:hover,.langtg-fuss>a.an:hover{color:var(--pine)}
.langtg-mm>a:focus-visible,.langtg-fuss>a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.fuss-sprache{display:inline-flex;align-items:center}

@media (max-width:900px){:root{--kopf-h:64px}.header,.header .logo{height:var(--kopf-h)}.header{--wappen-h:126px}.header.kompakt{--wappen-h:104px}.logo .z1{font-size:16px}.header.kompakt .logo .z1{font-size:15px}.logo .z2{font-size:9px}}

.mobilmenu{position:fixed;inset:0;z-index:110;background:var(--tanne);color:#fff;padding:0 0 40px;display:none;flex-direction:column;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mobilmenu.offen{display:flex}
/* Kopfleiste wie in der Webapp: Wappen, zweizeiliger Titel, Aktion rechts */
.mm-app-kopf{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--pine)}
.mm-app-kopf img{width:34px;height:34px;flex:none}
.mm-app-titel{flex:1;min-width:0;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em}
.mm-app-titel small{display:block;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.mobilmenu .schliessen{background:none;border:0;color:rgba(255,255,255,.55);font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:12px 8px;cursor:pointer}
.mobilmenu .schliessen:hover{color:#fff}
/* Menü: die Typografie der Seite trägt, nicht der Rahmen. Jede Ebene hängt an
   einer senkrechten Kante — die der offenen Gruppe leuchtet lime, dazu ein
   zarter Verlauf nach rechts. Durchgehend Space Grotesk wie in der Webapp. */
.mm-app-kopf{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:16px 22px 14px;background:var(--tanne);border-bottom:1px solid rgba(255,255,255,.13)}
.mm-app-kopf img{width:34px;height:34px;flex:none}
.mm-app-titel{flex:1;min-width:0;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em}
.mm-app-titel small{display:block;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.mobilmenu .schliessen{background:none;border:0;color:rgba(255,255,255,.55);font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:12px 8px;cursor:pointer}
.mobilmenu .schliessen:hover{color:#fff}

.mm-liste{display:flex;flex-direction:column;gap:1px;padding:12px 22px 0;font-family:'Space Grotesk',sans-serif}
.mm-gruppe{border-left:2px solid rgba(255,255,255,.14);padding-left:16px;transition:border-color .25s var(--ease),background .25s var(--ease)}
.mm-gruppe.auf{border-left-color:var(--lime);background:linear-gradient(90deg,rgba(204,255,0,.12),rgba(204,255,0,0) 62%)}
/* Mit Untermenue ist die ganze Zeile der Schalter (seite.js baut sie dann
   als <button>) — deshalb muss sie aussehen wie vorher der Kasten mit Link
   und Pfeil: volle Breite, kein Knopfrahmen, linksbuendig. */
.mm-zeile{display:flex;align-items:center;gap:10px;padding:15px 0;width:100%;
  background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.mm-caret{flex:none;width:44px;height:44px;display:grid;place-items:center;
  color:rgba(255,255,255,.5);transition:color .2s}
.mm-zeile:hover .mm-caret,.mm-zeile:hover .mm-titel{color:#fff}
.mm-zeile[aria-expanded="true"] .mm-caret{color:var(--lime)}
.mm-zeile[aria-expanded="true"] .caret{transform:rotate(225deg) translate(-3px,-3px)}
.mm-titel.mm-hier{color:var(--lime)}
.mm-caret .caret{width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease)}
.mm-titel{flex:1;min-width:0;color:#fff;font-size:clamp(23px,6.2vw,29px);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1.04;transition:color .2s}
.mm-nr{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--lime);margin-bottom:6px;font-variant-numeric:tabular-nums}
.mm-zeile>a:hover{color:var(--lime)}
.mm-zeile>a[aria-current="page"]{color:var(--lime)}

/* Aufklapp-Knopf: sichtbar nur der Winkel, Trefferfläche trotzdem 44 px */

/* Zweite Ebene: schlichte Textliste, klappt auf ohne Sprung */
.mm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.mm-sub>div{overflow:hidden;min-height:0;padding:0}
.mm-gruppe.auf>.mm-sub{grid-template-rows:1fr}
.mm-gruppe.auf>.mm-sub>div{padding:0 0 14px}
.mm-sub a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.68);font-size:15px;font-weight:500;line-height:1.3;transition:color .18s}
.mm-sub a:hover,.mm-sub a:focus-visible{color:#fff}
.mm-sub a:last-child{border-bottom:0}
.mm-sub a[aria-current="page"]{color:var(--lime)}
.mm-sub .extern{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);flex:none}
/* Der Teiler aus der Hauptnavigation setzt hier nur eine Atempause */
.mm-sub .teiler{height:0;margin:7px 0}

.mm-fuss{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0 22px}
.mm-fuss a{flex:1 1 auto;white-space:nowrap;text-align:center;border-radius:var(--r-pill,999px);padding:15px 18px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.mm-fuss a:first-child{border:1px solid rgba(255,255,255,.28);color:#fff}
.mm-fuss a:first-child:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.mm-fuss .mm-cta{background:var(--lime);color:var(--tanne)}
.mm-fuss .mm-cta:hover{background:#a9e070}

/* Notnagel ohne Skript */
.mm-liste>a{display:block;padding:15px 0 15px 16px;border-left:2px solid rgba(255,255,255,.14);color:#fff;font-size:clamp(23px,6.2vw,29px);font-weight:700;text-transform:uppercase;letter-spacing:-.03em}
.mm-liste>a.mm-cta{color:var(--lime)}
.mm-liste>a[aria-current="page"]{color:var(--lime)}
@media (prefers-reduced-motion: reduce){.mm-sub,.mm-gruppe,.mm-caret .caret{transition:none}}

/* ---------------- HERO ---------------- */
.hero{position:sticky;top:0;z-index:0;height:auto;min-height:var(--buehne-min);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--pine)}
.hero-buehne{position:absolute;inset:0;will-change:transform}
.fluss{position:relative;z-index:1;background:#fff}
/* --zoom kommt aus dem Backend (Bildausschnitt je Clip) und multipliziert die
   Bühnen-Skalierung; ohne Angabe bleibt alles wie vorher. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;clip-path:inset(0 0 0 100%);transform:translateX(4%) scale(calc(1.06*var(--zoom,1)));transition:clip-path 1.15s var(--ease),transform 1.35s var(--ease)}
.hero-video.an{z-index:2;clip-path:inset(0 0 0 0);transform:translateX(0) scale(calc(1.02*var(--zoom,1)))}
.hero-video.raus{z-index:1;clip-path:inset(0 0 0 0);transform:translateX(-4%) scale(calc(1.02*var(--zoom,1)))}
/* Stehende Videos (Range-Karte, Range-Hero) kennen denselben Ausschnitt */
video[data-reel][style*="--zoom"]{transform:scale(var(--zoom,1))}
.wischkante{position:absolute;top:0;bottom:0;left:0;width:2px;z-index:4;background:var(--lime);box-shadow:0 0 26px 5px rgba(204,255,0,.55);opacity:0;pointer-events:none}
.wischkante.lauf{animation:kante 1.15s var(--ease)}
@keyframes kante{0%{left:100%;opacity:1}92%{opacity:1}100%{left:0;opacity:0}}
/* Kein Ganzflächen-Schleier mehr — das Video läuft oben in Originalfarbe.
   Nur unten bleibt der Verlauf, sonst säuft die weiße Schrift auf hellen
   Clips (Sonnenaufgang, Herbst) ab. */
/* --hero-schleier regelt, WIE STARK der Verlauf trägt — je Hero im Backend
   wählbar (Blockfeld „Abdunklung"). 1 = wie entworfen, 0 = gar kein Schleier.
   Der Regler sitzt an der Deckkraft, nicht in den Farbstopps: So gilt er auch
   für die Seiten, die sich ihren eigenen Verlauf schreiben (Greenfee,
   Startzeiten, Range, Platzstatus). */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--hero-schleier,1);background:linear-gradient(180deg,rgba(7,32,21,0) 0%,rgba(7,32,21,0) 46%,rgba(6,26,17,.42) 74%,rgba(6,26,17,.86) 100%)}
.schnell{position:fixed;top:96px;right:var(--inset);z-index:99;display:flex;gap:8px;transition:top .35s var(--ease)}
.schnell.mit{top:84px}
.schnell.mit a{background:rgba(7,48,31,.95);border-color:rgba(255,255,255,.22);box-shadow:0 10px 24px -14px rgba(6,26,17,.6)}
.schnell.mit a:hover{background:var(--lime);border-color:var(--lime);color:var(--pine)}
.schnell a{display:inline-flex;align-items:center;gap:9px;background:rgba(9,40,26,.42);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 16px;color:#fff;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:background .25s,border-color .25s,color .25s}
.schnell a:hover{background:var(--lime);border-color:var(--lime);color:var(--pine)}
.schnell .kette{font-size:13px;letter-spacing:-.05em;opacity:.75;transition:transform .3s var(--ease)}
.schnell a:hover .kette{transform:translateX(3px)}
.schnell .punkt{width:6px;height:6px;min-width:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(204,255,0,.25)}
.schnell a:hover .punkt{background:var(--pine);box-shadow:none}
/* Marktplatz: die einzige rote Plakette der Website. --live ist im
   Designsystem für „neu/live" reserviert — und genau das sagt sie. Sie
   steht nur da, solange etwas jünger als drei Tage am Brett hängt
   (markt_pille() in includes/markt.php); eine Pille, die immer da ist,
   sagt nichts mehr. */
/* Warum `nav.schnell a.schnell-neu` und nicht `.schnell .schnell-neu`:
   Die Regeln für die schmale Fußleiste stehen weiter unten in der Datei.
   `.schnell.mit a` wiegt genauso schwer wie `nav.schnell .schnell-neu` —
   bei Gleichstand gewinnt die spätere Regel, und die Pille wurde beim
   Hinunterscrollen (dann steht `.mit`) wieder grün wie ihre Nachbarn
   (mobil gemeldet, Andreas, 20.08.2026). Das `a` gibt der Farbe das
   nötige Übergewicht, in jeder Breite und in jedem Scrollzustand. */
nav.schnell a.schnell-neu{background:var(--live);border-color:var(--live);color:#fff;box-shadow:none}
/* Kein neuer Farbwert fürs Überfahren: dieselbe Fläche, eine Spur heller. */
nav.schnell a.schnell-neu:hover{background:var(--live);border-color:var(--live);color:#fff;
  filter:brightness(1.07)}
.schnell .punkt-neu{width:6px;height:6px;min-width:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.schnell .schnell-neu .kurz{display:none}
@media (max-width:900px){
  /* In der Fußleiste ist kein Platz für den ganzen Satz — dort trägt die
     rote Fläche allein die Nachricht „neu" (der weiße Punkt ist weiter
     unten mit abgeschaltet, er wiederholte sie nur). */
  .schnell .schnell-neu .lang{display:none}
  .schnell .schnell-neu .kurz{display:inline}
}
@media (max-width:900px){
  /* Mobil: feste Leiste am unteren Bildschirmrand statt Chips im Hero.
     Seit die Marktplatz-Pille dazugekommen ist, sind es vier Wege. In der
     alten Form brauchten sie 553 px (gemessen 20.08.2026) — auf einem
     390-px-Display scrollte die Hälfte aus dem Bild, „Aktuelles" sah
     niemand mehr. Der Platz kommt nicht aus kleinerer Schrift, sondern
     aus dem, was in einer festen Leiste ohnehin nichts sagt: die
     Ketten-Chevrons, der enge Buchstabenabstand, die breiten Polster.
     Vier Pillen brauchen so 364 px und stehen ab dem iPhone SE (375 px)
     nebeneinander. `overflow-x:auto` bleibt als Netz für Extremfälle. */
  .schnell{top:auto;bottom:0;left:0;right:0;z-index:105;justify-content:center;gap:6px;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,48,31,.94);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
    border-top:1px solid rgba(255,255,255,.14);overflow-x:auto}
  .schnell.mit{top:auto}
  .schnell a,.schnell.mit a{flex:none;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
    box-shadow:none;padding:8px 10px;font-size:10px;letter-spacing:.04em;gap:6px;white-space:nowrap}
  /* Das Chevron zeigt „hier geht es weiter" — in einer Leiste, die immer
     unten klebt, weiß das jeder auch so. */
  .schnell .kette{display:none}
  /* Die rote Fläche IST die Nachricht „neu"; der weiße Punkt darauf
     wiederholt sie nur und kostet 12 px, die das Wort braucht. */
  .schnell .punkt-neu{display:none}
  /* Letzte Inhalte nicht hinter der Leiste verstecken */
  body{padding-bottom:calc(var(--leiste-h) + env(safe-area-inset-bottom))}
  /* Die Bühne füllt genau den freien Platz zwischen Kopf- und Fußleiste.
     Vorher war ihr Maß eine feste Untergrenze (470 px): Auf einem Handy,
     dessen sichtbare Höhe mit ausgefahrener Browserleiste rund 660 px
     beträgt, blieb darunter eine weiße Fläche von gut 70 px ohne jeden
     Inhalt stehen — sie las sich wie ein Darstellungsfehler, weil dort
     weder Bild noch Text steht. Wo der Bühneninhalt selbst höher ist
     (Fox & Rabbit), wächst sie wie bisher darüber hinaus; das ist der
     Anblick, der gemeint war.
     Kopf UND Leiste müssen abgezogen werden: Der Kopf klebt oben und
     steht im Fluss über der Bühne, die Leiste liegt unten darüber. Ohne
     den Abzug lief die Schlusszeile des Bühnentextes hinter die Leiste.
     svh, nicht dvh: Frisch geladen steht die Browserleiste des Handys im
     Bild, und genau dann soll die Bühne passen — dvh ließe sie beim
     Scrollen nachwachsen und die klebende Bühne ruckeln. */
  :root{--buehne-min:calc(100svh - var(--kopf-h) - var(--leiste-h) - env(safe-area-inset-bottom))}
}

/* ---------- Seiten-Hero: Bühne der Unterseiten — stehendes Bild, gleiche Typo wie der Start-Hero ---------- */
.seitenhero .hero-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Jede Seiten-Buehne kann ein Video statt eines Bildes tragen (Blockfeld
   „Video statt Bild", 23.08.2026) — die Masse gelten deshalb generisch,
   nicht nur unter .seitenhero: bt-hero und gf-hero fuehren eigene Klassen.
   Ausschnitt und Zoom kommen je Clip als Inline-Stil aus dem Backend und
   schlagen diese Regel. */
.hero-buehne>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-kicker{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:10px;opacity:0;animation:sanft .9s .25s forwards;
  text-shadow:0 1px 3px rgba(6,26,17,.6)}

/* ---------- Zahlenband: große Kennzahlen auf Pine ---------- */
.zahlenband{background:var(--pine);color:#fff;padding:calc(var(--luft)*.8) var(--inset);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px}
.zb{border-left:1px solid var(--hairline-dunkel);padding-left:26px}
.zb-wert{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(46px,6vw,88px);font-variant-numeric:tabular-nums}
.zb-einheit{font-size:.4em;color:var(--lime);margin-left:8px;letter-spacing:0}
.zb-label{margin-top:12px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media (max-width:560px){.zahlenband{grid-template-columns:1fr 1fr;gap:26px}.zb{padding-left:18px}}

.hero-inhalt{position:relative;z-index:3;padding:112px var(--inset) 34px;color:#fff;will-change:transform,opacity}
@media (max-width:560px){.hero-inhalt{padding-top:160px}}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;font-size:min(clamp(48px,8.6vw,150px),15svh);letter-spacing:-.055em;line-height:.84;color:#fff;margin:18px 0 0}
/* `overflow:hidden` braucht die Einblend-Animation (die Zeile fährt von
   unten herein). Bei line-height:.84 ist die Zeilenbox aber niedriger als
   die Schrift hoch ist: Versalien passen knapp, die Punkte von Ä/Ö/Ü ragen
   rund .16em darüber hinaus und wurden abgeschnitten. Deshalb oben Luft
   schaffen — und sie mit demselben negativen Außenabstand wieder
   zurücknehmen, damit sich am Satzbild nichts verschiebt.
   .20em reichten knapp: Solange die Schrift noch nicht geladen ist,
   rendert die Ersatzschrift mit anderer Metrik und die Punkte standen
   höher. Der Puffer kostet nichts, weil ihn der Außenabstand aufhebt. */
/* Kopffreiheit .45em statt .30em: Bei Versal-Umlauten in der ERSTEN Zeile
   („NIEMAND FÄNGT", 31.08.2026) lagen die Ä-Punkte oberhalb des .30em-Fensters
   und wurden vom overflow:hidden der Einlauf-Animation gekappt. Der negative
   Außenabstand gleicht die Polsterung exakt aus — der Blocksitz bleibt. */
.h1-zeile{display:block;overflow:hidden;padding-top:.45em;margin-top:-.45em;padding-bottom:.04em}
/* Damit war nur der Beschnitt weg, nicht die Kollision: bei line-height:.84
   liegen die Punkte von Ä/Ö/Ü der zweiten Zeile genau auf der Grundlinie der
   ersten und verschwanden in deren Versalien — sichtbar bei „GEHÖRT" unter
   „AB DER 19. RUNDE". Jede Zeile ab der zweiten nimmt den negativen
   Außenabstand deshalb um .10em weniger weit zurück; das ist der einzige
   Zeilenabstand im Satzbild, die erste Zeile und damit der Blocksitz
   bleiben unverändert. */
.h1-zeile+.h1-zeile{margin-top:-.35em}  /* = -.45em Ausgleich + .10em Kollisionsabstand */
.h1-zeile>span{display:block;transform:translateY(105%);animation:zeileHoch 1s var(--ease) forwards}
.h1-zeile:nth-child(2)>span{animation-delay:.12s}
@keyframes zeileHoch{to{transform:translateY(0)}}
.h1-outline{color:transparent;-webkit-text-stroke:2px var(--lime)}
.hero-unten{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-top:30px}
/* Seit die Bühnen ohne Abdunklung laufen (31.08.2026) trägt der Text seinen
   Kontrast selbst: volles Weiß plus weicher dunkler Schein — lesbar auch auf
   hellen Bildern, ohne das Bild anzutasten. */
.hero-lead{font-size:19px;font-weight:400;line-height:1.5;color:#fff;max-width:36ch;opacity:0;animation:sanft .9s .55s forwards;
  text-shadow:0 1px 3px rgba(6,26,17,.65),0 2px 26px rgba(6,26,17,.6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;opacity:0;animation:sanft .9s .7s forwards}
@keyframes sanft{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:14px;opacity:0;animation:sanft .9s .85s forwards}
.fh-plakette{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:999px;padding:7px 16px 7px 14px;box-shadow:0 14px 30px -14px rgba(6,26,17,.6)}
.fh-plakette img{height:26px;width:auto;display:block}
.fh-plakette span{font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tanne);border-left:1px solid var(--linie-karte);padding-left:12px}
.fh-plakette{transition:transform .3s var(--ease),box-shadow .3s}
.fh-plakette:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(6,26,17,.7)}
.fh-plakette:hover span{color:var(--gruen)}
@media (max-width:560px){.fh-plakette span{display:none}}
.glas-status{display:inline-flex;align-items:center;gap:12px;background:rgba(9,40,26,.4);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;padding:10px 20px;font-size:14px}
.punkt{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(204,255,0,.25);flex:none}


.scrollhint{position:absolute;left:var(--inset);bottom:34px;z-index:5;display:none}
@media (min-width:901px){
  .scrollhint{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.65);font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;writing-mode:vertical-rl;bottom:auto;top:50%;transform:translateY(-50%);left:auto;right:22px}
  .scrollhint i{display:block;width:1px;height:52px;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent);animation:sink 2.4s infinite}
}
@keyframes sink{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------------- STATUS-BAND ---------------- */
.band{display:block;background:var(--pine);color:rgba(255,255,255,.86);padding:13px 0;overflow:hidden;position:relative;border-bottom:1px solid var(--hairline-dunkel)}
/* Als Link erbt das Band a:hover (Tanne) — auf Pine wäre das unlesbar. */
a.band:hover{color:rgba(255,255,255,.86)}
.band-spur{display:flex;gap:0;width:max-content;animation:lauf 44s linear infinite}
.band:hover .band-spur,.band:focus-within .band-spur{animation-play-state:paused}
.band-spur>span,.band-spur>a{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:11px;padding:0 30px;border-right:1px solid var(--hairline-dunkel)}
/* Die Zeilen sind seit 05.09.2026 EIGENE Links (Neu-Zeilen → Marktplatz/
   Lost & Found, Status-Zeilen → Platzstatus). Auf Pine wäre das grüne
   Link-Grün unlesbar — sie erben die Bandfarbe. */
.band-spur>a{color:inherit}
.band-spur>a:hover{color:#fff}
.band-spur>a.band-neu:hover{color:#ff7166}
.band-spur .dot{width:6px;height:6px;min-width:6px;flex:none;padding:0;border:0;border-radius:50%;background:var(--lime);display:inline-block;animation:livepulse 2s infinite}
/* Der Punkt traegt die Ampelfarbe, seit der Platzstatus live im Band steht
   (20.08.2026). Dieselben drei Farben wie die Ampel auf /platzstatus —
   gruen ist der Standard oben, gelb und rot ueberschreiben ihn. */
.band-spur .dot.f-gelb{background:#F2C14E}
.band-spur .dot.f-rot{background:#ff5a4d}
/* Neues im Marktplatz / bei Lost & Found: die ganze Zeile im Seitenrot —
   der Punkt pulst wie die Live-Punkte (Animation erbt er vom .dot). */
.band-spur .band-neu{color:#FF5A4D}
/* Haken / Verbotszeichen vor den Erlaubt-Zeilen (block_band.php) */
.band-ikon{width:15px;height:15px;flex:none}
.band-ikon .bi-haken{fill:none;stroke:var(--lime);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.band-ikon .bi-kreis{fill:none;stroke:#ff5a4d;stroke-width:1.8}
.band-ikon .bi-strich{stroke:#ff5a4d;stroke-width:1.8;stroke-linecap:round}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.65)}}

/* ---------------- KAPITEL-KOPF ---------------- */
.kapitel{padding:0 var(--inset)}
.kapitel-marke{display:flex;align-items:baseline;gap:18px;padding-top:20px;border-top:1px solid var(--hairline)}
.kapitel-marke .nr{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--gruen)}
.kapitel-marke .was{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.kapitel-kopf{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:end;padding:28px 0 var(--luft-s)}
.kapitel-kopf h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(36px,5.6vw,88px);letter-spacing:-.045em;line-height:.9;color:var(--tinte)}
.kapitel-kopf .lead{font-size:19px;font-weight:300;line-height:1.55;color:var(--sekundaer);max-width:46ch;padding-bottom:.5em}
.dunkel .kapitel-marke{border-color:var(--hairline-dunkel)}
.dunkel .kapitel-marke .nr{color:var(--lime)}
.dunkel .kapitel-marke .was{color:rgba(255,255,255,.5)}
.dunkel .kapitel-kopf h2{color:#fff}
.dunkel .kapitel-kopf .lead{color:rgba(255,255,255,.72)}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.reveal.sichtbar{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}

/* ============ KAPITEL 01 — EINSTIEG ============ */
.wege{padding:0 var(--inset) var(--luft);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hairline);overflow:hidden}
.weg-karte{padding:30px 40px;border-right:1px solid var(--hairline);display:flex;flex-direction:column;transition:background .35s}
.weg-karte:first-child{padding-left:var(--inset);margin-left:calc(var(--inset) * -1)}
.weg-karte:last-child{border-right:0;padding-right:var(--inset);margin-right:calc(var(--inset) * -1)}
.weg-karte:hover{background:var(--mint)}
.weg-karte .nr{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--gruen)}
.weg-karte h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,2.9vw,40px);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;color:var(--tinte);margin:16px 0 4px}
.weg-karte .ab{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--gruen);letter-spacing:-.01em}
.weg-karte p{font-size:16.5px;font-weight:300;line-height:1.55;color:var(--sekundaer);margin-top:14px}
.weg-karte .tlink{margin-top:auto;padding-top:26px}
@media (max-width:900px){
  .wege{grid-template-columns:1fr}
  .weg-karte{padding:26px 0;border-right:0;border-bottom:1px solid var(--hairline)}
  .weg-karte:first-child,.weg-karte:last-child{padding-left:0;padding-right:0;margin-left:0;margin-right:0}
  .weg-karte:hover{background:transparent}
}

/* ============ KAPITEL 02 — MITGLIEDSCHAFT ============ */
.tarife{background:var(--mint);padding-bottom:0}
.tarife .kapitel{padding-top:var(--luft)}
.zahlweise{display:inline-flex;border:1px solid rgba(20,35,27,.2);border-radius:999px;padding:3px;margin-bottom:26px;background:#fff}
.zahlweise button{background:none;border:0;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:11px 22px;border-radius:999px;color:var(--sekundaer);transition:background .25s,color .25s}
.zahlweise button[aria-pressed="true"]{background:var(--tanne);color:#fff}
.tarif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(20,35,27,.12)}
.tarif{background:#fff;padding:28px 26px 26px;display:flex;flex-direction:column;transition:transform .35s var(--ease)}
.tarif:hover{transform:translateY(-4px)}
.tarif.top{background:var(--tanne);color:#fff}
.tarif .marke{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gruen);min-height:1.4em}
.tarif.top .marke{color:var(--lime)}
.tarif h3{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:1.05;color:var(--tinte);margin:14px 0 18px}
.tarif.top h3{color:#fff}
.tarif .preis{display:flex;align-items:baseline;gap:7px;border-top:1px solid var(--hairline);padding-top:18px}
.tarif.top .preis{border-color:var(--hairline-dunkel)}
.tarif .preis .v{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,3.4vw,48px);font-weight:700;letter-spacing:-.045em;line-height:.9;color:var(--tinte)}
.tarif.top .preis .v{color:#fff}
.tarif .preis .e{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tarif.top .preis .e{color:rgba(255,255,255,.6)}
.tarif p{font-size:15px;font-weight:300;line-height:1.5;color:var(--sekundaer);margin-top:16px}
.tarif.top p{color:rgba(255,255,255,.82)}
.tarif .tlink{margin-top:auto;padding-top:24px}
.tarif.top .tlink{color:var(--lime)}
@media (max-width:1100px){.tarif-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.tarif-grid{grid-template-columns:1fr}}

.tarif-mehr{margin-top:2px;background:#fff}
.tarif-zeile{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;gap:24px;align-items:baseline;padding:18px 26px;border-bottom:1px solid var(--linie-karte)}
.tarif-zeile:last-child{border-bottom:0}
.tarif-zeile .n{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:var(--tinte)}
.tarif-zeile .d{font-size:15px;font-weight:300;color:var(--sekundaer)}
.tarif-zeile .p{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;color:var(--tanne);white-space:nowrap;letter-spacing:-.02em}
@media (max-width:900px){.tarif-zeile{grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;padding:16px 20px}.tarif-zeile .d{grid-column:1/-1}}

.vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--luft-s);border-top:1px solid rgba(20,35,27,.18)}
.vorteil{padding:22px 32px 22px 0;border-right:1px solid rgba(20,35,27,.12);display:flex;gap:14px;align-items:flex-start}
.vorteil+.vorteil{padding-left:32px}
.vorteil:last-child{border-right:0;padding-right:0}
.vorteil .hk{color:var(--gruen);font-family:'Space Grotesk',sans-serif;font-weight:700;flex:none;line-height:1.4}
.vorteil p{font-size:15.5px;font-weight:300;line-height:1.5;color:var(--tanne)}
.vorteil strong{font-weight:600}
@media (max-width:900px){.vorteile{grid-template-columns:1fr}.vorteil,.vorteil+.vorteil{border-right:0;border-bottom:1px solid rgba(20,35,27,.12);padding:16px 0}}
.tarif-fuss{margin-top:28px;color:var(--sekundaer);font-size:13.5px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline}

/* ---- 500%Golf ---- */
.fuenfhundert{margin-top:var(--luft);background:var(--pine);background-image:radial-gradient(720px 420px at 88% 0%,rgba(31,132,70,.42),transparent 66%);color:#fff;padding:var(--luft) var(--inset);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.fh-marke{color:var(--lime);display:flex;align-items:center;gap:14px}
.fh-marke::after{content:"";height:1px;flex:1;max-width:120px;background:rgba(204,255,0,.4)}
.fh-zahl{font-family:'Space Grotesk',sans-serif;font-size:clamp(88px,12vw,190px);font-weight:700;line-height:.8;letter-spacing:-.06em;color:var(--lime);margin:18px 0 0;font-variant-numeric:tabular-nums}
.fh-zahl span{font-size:.42em;letter-spacing:-.02em;vertical-align:baseline}
/* Ohne weisse Platte (Andreas, 20.08.2026): Das Logo hat einen
   transparenten Grund und steht direkt auf dem Pine des Kapitels — die
   weisse Schrift darin bleibt weiss, der orange Block traegt den Rest.
   Die max-width ist um die alten 2x22 px Polster kleiner, damit das Logo
   optisch genauso gross bleibt wie vorher auf der Platte.
   Den Abstand nach oben trug frueher das Polster der Platte; ohne sie
   klebte das Logo an der Kickerzeile. 22 px ist derselbe Abstand, den
   auch die Ueberschrift darunter haelt. */
.fh-logo{display:inline-block;margin-top:22px;max-width:min(386px,100%);transition:transform .3s var(--ease)}
.fh-logo:hover{transform:translateY(-2px)}
.fh-logo img{width:100%;height:auto;display:block}
.fuenfhundert h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3.2vw,46px);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;color:#fff;margin:22px 0 0}
.fh-text{font-size:17px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.82);max-width:48ch;margin-top:18px}
.fuenfhundert .btn{margin-top:24px}
.fh-clubs{border-top:1px solid var(--hairline-dunkel);margin-top:6px}
.fh-club{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--hairline-dunkel);transition:padding-left .3s var(--ease)}
.fh-club:hover{padding-left:8px}
.fh-club .i{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--lime);min-width:2.4em}
.fh-club .n{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.25}
.fh-club .o{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:300;color:rgba(255,255,255,.55);margin-top:3px}
.fh-club .l{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
.fh-club.hier .n{color:var(--lime)}
.fh-fuss{margin-top:18px;color:rgba(255,255,255,.45);font-size:13px;max-width:60ch}
@media (max-width:1000px){.fuenfhundert{grid-template-columns:1fr;gap:36px;padding:var(--luft-s) var(--inset)}}

/* ============ KAPITEL — PLATZPLAN (interaktive Karte) ============
   Kartenfarben: Klassen aus assets/platzplan_karte.svg (generiert aus dem
   Platzplan-PDF; m-* = Gelände, pp-* = interaktive Ebenen). */
.platzplan{background:var(--tanne);color:#fff;overflow:hidden}
.pp-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.56fr);gap:clamp(24px,4vw,72px);padding:var(--luft-s) var(--inset) var(--luft-s);align-items:start}
.pp-karte{min-width:0}
.pp-svg{display:block;width:100%;height:auto;max-height:94svh}
.pp-tafel{position:sticky;top:110px;display:flex;flex-direction:column}
.pp-t-name{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.2vw,52px);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:.92;color:#fff;margin:14px 0 0;min-height:1.9em}
.pp-t-text{font-size:16.5px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.82);margin-top:14px;max-width:38ch;min-height:5.8em}
.pp-tafel .bw-link{margin-top:26px}
.pp-tafel .bw-link+.bw-link{margin-top:14px}
.pp-wink{margin-top:28px;font-size:13px;color:rgba(255,255,255,.45)}
.pp-tip{position:fixed;z-index:90;pointer-events:none;background:var(--pine);color:#fff;border:1px solid rgba(204,255,0,.35);border-radius:10px;padding:9px 13px;font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.02em;box-shadow:0 10px 30px rgba(4,18,12,.45);white-space:nowrap}
.pp-tip .z{color:var(--lime);font-weight:700}
.pp-tip .w{color:rgba(255,255,255,.65);font-weight:500}
@media (max-width:980px){
  .pp-buehne{grid-template-columns:1fr;gap:30px}
  .pp-tafel{position:static}
  .pp-t-text{min-height:0}
  .pp-tip{display:none}
}
/* Gelände */
.pp-svg .m-rg{fill:#1D5C39}
.pp-svg .m-fw{fill:#35814F}
.pp-svg .m-f2{fill:#48945F}
.pp-svg .m-hl{fill:#5CA872}
.pp-svg .m-t1{fill:#2A7247}
.pp-svg .m-t2{fill:#123F28}
.pp-svg .m-bk{fill:#E7DCB6}
.pp-svg .m-sd{fill:#CDBD96;fill-opacity:.8}
.pp-svg .m-wt{fill:#4F8FBF}
.pp-svg .m-ye{fill:#C9BF63}
.pp-svg .m-r1{fill:#A84A3E}
.pp-svg .m-r2{fill:#C95F4F}
.pp-svg .m-wh{fill:#EFEBDC}
.pp-svg .m-gy{fill:#93A399;stroke:#0A331F;stroke-width:.4}
.pp-svg .m-bl{fill:#0A2C1C}
.pp-svg .m-ln{fill:none;stroke:#0A331F;stroke-width:.45;stroke-opacity:.55}
.pp-svg .m-wg{fill:none;stroke:#5E7A6A;stroke-opacity:.8}
.pp-svg .m-gn{fill:none;stroke:#2C5A3E}
.pp-svg .m-fp{fill:none;stroke:#EFEBDC;stroke-width:.8}
/* Aktive Bahn */
.pp-svg .m-rg,.pp-svg .m-fw,.pp-svg .m-f2,.pp-svg .m-hl,.pp-svg .m-bk{transition:fill .3s}
.pp-svg .m-rg.an{fill:#2A744A}
.pp-svg .m-fw.an{fill:#469C63}
.pp-svg .m-f2.an{fill:#57AB70}
.pp-svg .m-hl.an{fill:#6FBE85}
.pp-svg .m-bk.an{fill:#F6ECC7}
.pp-svg .pp-glow{fill:none;stroke:var(--lime);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s;pointer-events:none;filter:drop-shadow(0 0 5px rgba(204,255,0,.65))}
.pp-svg .pp-gruen{fill:var(--lime);opacity:0;transition:opacity .3s;pointer-events:none}
.pp-svg .pp-glow.an,.pp-svg .pp-gruen.an{opacity:.95}
/* Bedienung */
.pp-svg .pp-hit{fill:none;stroke:transparent;stroke-width:17;stroke-linecap:round;stroke-linejoin:round;cursor:pointer;pointer-events:stroke}
.pp-svg .pp-nr{cursor:pointer}
.pp-svg .pp-nr circle{fill:#F4F7F2;stroke:#14231B;stroke-width:1.6;transition:fill .25s;filter:drop-shadow(0 1px 2px rgba(6,26,17,.35))}
.pp-svg .pp-nr text{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;fill:#14231B;pointer-events:none}
.pp-svg .pp-nr.an circle,.pp-svg .pp-nr:hover circle{fill:var(--lime);stroke:#07301F}
/* Orte + Nordpfeil */
.pp-svg .pp-ort{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:rgba(255,255,255,.66)}
.pp-svg .pp-chip{fill:rgba(232,239,232,.16)}
.pp-svg .pp-chiptext{font-family:'Space Grotesk',sans-serif;font-size:5.6px;font-weight:700;fill:rgba(255,255,255,.75)}
.pp-svg .pp-nord line{stroke:rgba(255,255,255,.55);stroke-width:1.2}
.pp-svg .pp-nord path{fill:rgba(255,255,255,.75)}
.pp-svg .pp-nord text{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;fill:rgba(255,255,255,.66)}

/* ============ KAPITEL — SCOREKARTE ============ */
.scorekap{background:#fff}
.sk-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.44fr);gap:clamp(24px,3.5vw,64px);padding:var(--luft-s) var(--inset) var(--luft);align-items:start}
.sk-druckkopf{display:none}
.sk-tabelle{width:100%;border-collapse:collapse;font-family:'Space Grotesk',sans-serif}
.sk-tabelle th{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right;padding:0 12px 10px;border-bottom:2px solid var(--tinte);white-space:nowrap}
.sk-tabelle th.t-bahn{text-align:left;padding-left:0}
.sk-tabelle td{text-align:right;padding:8px 12px;border-bottom:1px solid var(--linie-karte);font-size:15.5px;color:var(--tinte)}
.sk-tabelle td.t-bahn{text-align:left;padding-left:0;font-weight:700}
.sk-tabelle td.t-bahn a{color:var(--gruen);text-decoration:none}
.sk-tabelle td.t-bahn a:hover{color:var(--tanne);text-decoration:underline}
.sk-tabelle .t-hcp{color:var(--muted)}
.sk-tabelle .t-score{border-left:1px solid var(--linie-karte);min-width:44px}
.sk-tabelle .chip{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px}
.chip-gelb{background:#E5C33C;box-shadow:inset 0 0 0 1px rgba(20,35,27,.25)}
.chip-rot{background:#C0392B}
.sk-tabelle.ab-g .t-gelb,.sk-tabelle.ab-r .t-rot{background:rgba(204,255,0,.14);font-weight:700}
.sk-zeile{cursor:default;transition:background .2s}
.sk-zeile:hover,.sk-zeile.an{background:var(--mint)}
.sk-zeile.an td{border-bottom-color:rgba(20,35,27,.25)}
.sk-summe td{font-weight:700;border-bottom:2px solid var(--tinte);background:#fafbf9}
.sk-gesamt td{border-bottom:0;font-size:17px}
.sk-vorgabe{color:var(--gruen);font-weight:700;letter-spacing:.08em;white-space:nowrap}
.sk-ndb{color:var(--sekundaer)}
.sk-score{width:52px;border:0;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie-karte);padding:6px 8px;font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:700;color:var(--tinte);text-align:right}
.sk-score:focus{outline:2.5px solid var(--lime);outline-offset:1px}
.sk-zeile:hover .sk-score,.sk-zeile.an .sk-score{box-shadow:inset 0 0 0 1px rgba(20,35,27,.3)}
.sk-pkt{font-weight:700;color:var(--tanne)}
.sk-pkt-summe{font-weight:700;color:var(--gruen)}
.sk-bilanz{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;background:var(--mint);border-radius:12px;padding:13px 18px}
.sk-b-text{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--tanne)}
.sk-score-weg{border:0;background:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:0}
.sk-score-weg:hover{color:var(--tinte)}
.sk-runde-link{display:block;margin-top:18px;background:var(--tanne);color:rgba(255,255,255,.85);border-radius:12px;padding:13px 16px;font-size:13.5px;line-height:1.5;text-decoration:none;transition:background .25s}
.sk-runde-link strong{color:#fff}
.sk-runde-link:hover{background:var(--pine);color:rgba(255,255,255,.85)}
.sk-stand{margin-top:16px;font-size:13px;color:var(--muted);max-width:70ch}
/* Rechner-Panel */
.sk-seite{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.sk-rechner{background:var(--mint);border-radius:18px;padding:24px 26px}
.sk-r-titel{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gruen)}
.sk-wahl{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.sk-schalter{display:inline-flex;background:#fff;border-radius:999px;padding:3px;box-shadow:inset 0 0 0 1px var(--linie-karte)}
.sk-schalter button{border:0;background:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--sekundaer);padding:7px 14px;border-radius:999px;transition:background .25s,color .25s}
.sk-schalter button[aria-pressed="true"]{background:var(--tanne);color:#fff}
.sk-schalter .chip{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
.sk-hcpi-label{display:block;margin-top:18px;font-size:13px;color:var(--sekundaer)}
.sk-hcpi-zeile{display:flex;align-items:center;gap:8px;margin-top:8px}
.sk-hcpi{width:110px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie-karte);padding:10px 14px;font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--tinte)}
.sk-hcpi:focus{outline:3px solid var(--lime);outline-offset:1px}
.sk-hcpi-weg{border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--linie-karte);border-radius:50%;width:30px;height:30px;cursor:pointer;color:var(--muted);font-size:16px;line-height:1}
.sk-hcpi-weg:hover{color:var(--tinte)}
.sk-ergebnis{margin-top:16px;border-top:1px solid rgba(20,35,27,.18);padding-top:14px}
.sk-ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sk-ch .l,.sk-rating .l{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sk-ch .w{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;letter-spacing:-.04em;color:var(--tanne);line-height:1}
.sk-erklaer{font-size:13.5px;font-weight:300;line-height:1.5;color:var(--sekundaer);margin-top:10px}
.sk-rating{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px}
.sk-rating .w{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--tinte)}
.sk-rechner .btn{margin-top:18px;width:100%;justify-content:center}
.sk-r-fuss{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
/* Mini-Platzplan als dunkle Kachel */
.sk-karte{background:var(--tanne);border-radius:18px;padding:18px 14px;overflow:hidden}
.sk-karte .pp-svg{display:block;width:100%;height:auto}
@media (max-width:1060px){
  .sk-buehne{grid-template-columns:1fr}
  .sk-seite{display:contents}
  .sk-rechner{order:-1}
  .sk-karte{order:1;max-width:520px}
  .sk-links{min-width:0;overflow-x:auto}
}
@media (max-width:700px){
  .sk-buehne{padding-top:24px}
  .sk-rechner,.sk-karte{min-width:0}
  .sk-tabelle td{padding:8px 5px;font-size:13.5px}
  .sk-tabelle th{padding:0 5px 8px;font-size:9.5px;letter-spacing:.06em}
  .sk-tabelle .chip{width:7px;height:7px;margin-right:4px}
  .sk-tabelle .t-ndb{display:none}
  .sk-score{width:40px;padding:5px 6px;font-size:14px}
  .sk-rating{flex-wrap:wrap}
  /* schmal: nur die gewählte Abschlagsfarbe zeigen */
  .sk-tabelle.ab-g .t-rot,.sk-tabelle.ab-r .t-gelb{display:none}
}
/* Druckversion: nur die Karte, mit Kopf und Score-Spalte */
@media print{
  .header,.progress,.schnell,.mobilmenu,.footer,.cta,.kapitel,.sk-seite,.sk-stand,.eb-leiste{display:none !important}
  body{background:#fff}
  .fluss{padding-top:0 !important}
  .scorekap{background:#fff}
  .sk-buehne{display:block;padding:0}
  .sk-druckkopf{display:grid;grid-template-columns:auto 1fr auto;gap:10px 16px;align-items:center;margin-bottom:14px;border-bottom:2px solid #000;padding-bottom:12px}
  .dk-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px}
  .dk-meta{font-size:12px;color:#333;margin-top:2px}
  .dk-felder{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#333}
  .sk-tabelle{font-size:12px}
  .sk-tabelle td,.sk-tabelle th{padding:5px 8px}
  .sk-tabelle .t-score{display:table-cell;border-left:1.5px solid #000;min-width:60px}
  .sk-tabelle.ab-g .t-gelb,.sk-tabelle.ab-r .t-rot{background:#eef3e7 !important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .sk-zeile:hover,.sk-zeile.an{background:none}
  .sk-vorgabe{color:#000}
  .sk-score{box-shadow:none;background:none;width:100%}
  .sk-bilanz,.sk-runde-link{display:none !important}
  .sk-pkt,.sk-pkt-summe{color:#000}
}

/* ============ KAPITEL 03 — BAHN FÜR BAHN ============ */
.runde{background:var(--tanne);color:#fff}
.bahnwahl{display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(300px,.52fr);height:min(80svh,760px);min-height:520px;background:var(--tanne);overflow:hidden}
.bw-bild{position:relative;overflow:hidden;background:var(--pine)}
.bw-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s ease,transform 8s linear}
.bw-bild img.aktiv{opacity:1;transform:scale(1)}
.bw-ghost{position:absolute;top:2%;right:3%;z-index:2;font-family:'Space Grotesk',sans-serif;font-size:clamp(120px,17vw,260px);font-weight:700;line-height:.8;letter-spacing:-.06em;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 6px 40px rgba(6,26,17,.3)}
.bw-fuss{position:absolute;left:26px;bottom:22px;z-index:2;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 10px rgba(0,0,0,.5)}

.bw-wisch{display:none;position:absolute;right:22px;bottom:22px;z-index:2;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);text-shadow:0 1px 10px rgba(0,0,0,.55)}
.bw-rail{display:flex;flex-direction:column;background:var(--pine);border-left:1px solid var(--hairline-dunkel);border-right:1px solid var(--hairline-dunkel)}
.bw-nr{flex:1;background:none;border:0;border-bottom:1px solid var(--hairline-dunkel);cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;transition:background .3s,color .3s;padding:0}
.bw-nr:last-child{border-bottom:0}
.bw-nr:hover{background:rgba(204,255,0,.14);color:#fff}
.bw-nr[aria-selected="true"]{background:var(--lime);color:var(--pine)}

.bw-info{padding:34px 34px 34px 40px;display:flex;flex-direction:column;justify-content:center;color:#fff}
.bw-kicker{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.bw-info h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.6vw,58px);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:.92;color:#fff;margin:14px 0 0}
.bw-text{font-size:17px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.82);margin-top:16px;max-width:34ch;min-height:4.6em}
.bw-werte{display:flex;margin-top:28px;border-top:1px solid rgba(255,255,255,.28)}
.bw-werte>div{padding:14px 20px 0;border-right:1px solid rgba(255,255,255,.16);flex:1}
.bw-werte>div:first-child{padding-left:0}
.bw-werte>div:last-child{border-right:0}
.bw-werte .l{font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.bw-werte .w{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.03em;color:#fff;margin-top:8px;line-height:1;font-variant-numeric:tabular-nums}
.bw-link{margin-top:30px;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding-bottom:7px;position:relative}
.bw-link+.bw-link{margin-top:14px}
.bw-link[hidden]{display:none}
.bw-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.4);transform-origin:0 50%;transition:transform .4s var(--ease),background .3s}
.bw-link:hover{color:var(--lime)}
.bw-link:hover::after{background:var(--lime);transform:scaleX(1.06)}
.bw-hinweis{padding:20px var(--inset) var(--luft);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;border-top:1px solid var(--hairline-dunkel)}
.bw-hinweis p{color:rgba(255,255,255,.5);font-size:13.5px;max-width:62ch}
.bw-hinweis .tlink{color:var(--lime)}
@media (max-width:1000px){
  .bahnwahl{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto;height:auto;min-height:0}
  .bw-bild{height:min(48svh,420px)}
  .bw-rail{flex-direction:row;border-left:0;border-right:0;border-top:1px solid var(--hairline-dunkel);overflow-x:auto}
  .bw-nr{flex:0 0 54px;border-bottom:0;border-right:1px solid var(--hairline-dunkel);padding:14px 0}
  .bw-wisch{display:block}
  .bw-info{padding:30px var(--inset) 36px}
  .bw-text{min-height:0}
}

/* ============ KAPITEL 04 — REEL ============ */
.momente{padding:var(--luft) 0 0;background:#fff}
.momente .kapitel-kopf{padding-left:var(--inset);padding-right:var(--inset)}
.momente .kapitel-marke{margin:0 var(--inset)}
.reel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--inset) 28px;align-items:flex-end;scrollbar-width:thin;scrollbar-color:var(--gruen) var(--mint)}
.reel::-webkit-scrollbar{height:6px}
.reel::-webkit-scrollbar-track{background:var(--mint)}
.reel::-webkit-scrollbar-thumb{background:var(--gruen)}
.reel-karte{position:relative;flex:0 0 auto;width:min(304px,72vw);aspect-ratio:9/16;overflow:hidden;scroll-snap-align:start;background:var(--tanne);border-radius:2px}
.reel-karte:nth-child(even){margin-bottom:44px}
.reel-karte video{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.reel-karte:hover video{transform:scale(1.04)}
.reel-karte::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,26,17,.28) 0%,transparent 40%,rgba(6,26,17,.78) 100%);pointer-events:none}
.reel-karte .tag{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;color:#fff;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:-.01em}
.reel-karte .chip{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;color:#fff;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.reel-hint{padding:0 var(--inset) var(--luft);color:var(--muted);font-size:13px}

/* ============ KAPITEL 05 — RANGE + TURNIERE ============ */
.duo{padding:0 var(--inset) var(--luft);display:grid;grid-template-columns:1.3fr 1fr;gap:0}
.rangecard{position:relative;overflow:hidden;min-height:520px;background:var(--tanne)}
.rangecard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rangecard::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(7,32,21,.06) 0%,rgba(7,32,21,.24) 46%,rgba(6,26,17,.86) 100%)}
.chip-live{position:absolute;top:22px;left:22px;z-index:3;display:inline-flex;align-items:center;gap:9px;color:#fff;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--live);animation:livepulse 1.6s infinite}
.rangecard-text{position:absolute;left:28px;right:28px;bottom:26px;z-index:3;color:#fff}
.rangecard-text h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,2.6vw,34px);font-weight:700;text-transform:uppercase;letter-spacing:-.03em}
.rangecard-text p{font-size:16px;font-weight:300;color:rgba(255,255,255,.9);margin-top:8px;max-width:50ch}
.turniere{background:var(--pine);padding:30px 32px;display:flex;flex-direction:column}
.turniere .kopf{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);padding-bottom:18px;border-bottom:1px solid var(--hairline-dunkel)}
.turnier{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:19px 0;border-bottom:1px solid var(--hairline-dunkel);transition:padding-left .3s var(--ease)}
.turnier:hover{padding-left:7px}
.turnier .datum{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);padding-top:3px}
.turnier .titel{color:#fff;font-size:17px;font-weight:600;line-height:1.25}
.turnier .modus{color:rgba(255,255,255,.58);font-size:14px;margin-top:3px}
.turniere .tlink{color:var(--lime);margin-top:auto;padding-top:24px}
@media (max-width:900px){.duo{grid-template-columns:1fr}}

/* ============ KAPITEL 06 — EINKEHR ============ */
.gastro{background:var(--mint);padding-bottom:var(--luft)}
.gastro-bild{position:relative;height:min(62svh,560px);overflow:hidden}
.gastro-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.gastro-unter{padding:0 var(--inset);margin-top:-108px;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:start}
.gastro-text{background:#fff;padding:34px 38px}
.gastro-text h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,2.8vw,38px);font-weight:700;text-transform:uppercase;letter-spacing:-.035em;color:var(--tinte);margin:14px 0 12px;line-height:1}
.gastro-text p{color:var(--sekundaer);font-size:17px;font-weight:300;max-width:52ch}
.gastro-text .zeiten{margin-top:20px;display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hairline)}
.gastro-text .zeit{padding:12px 18px 0;border-right:1px solid var(--hairline);font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tanne)}
.gastro-text .zeit:first-child{padding-left:0}
.gastro-text .zeit:last-child{border-right:0}
.gastro-text .tlink{margin-top:24px}
.gastro-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:108px}
.gastro-mini figure{position:relative;overflow:hidden;aspect-ratio:1/1}
.gastro-mini img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gastro-mini figure:hover img{transform:scale(1.07)}
@media (max-width:900px){.gastro-unter{grid-template-columns:1fr;margin-top:-60px}.gastro-mini{margin-top:8px}.gastro-text{padding:28px 24px}}

/* ============ KAPITEL 07 — MEHR ALS GOLF (Index mit Bildvorschau) ============ */
.mehr{padding:0 var(--inset) var(--luft);position:relative}
.index{border-top:1px solid var(--hairline)}
.index-zeile{display:grid;grid-template-columns:15ch minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--hairline);color:var(--tinte);transition:color .3s,padding-left .35s var(--ease)}
.index-zeile:hover,.index-zeile:focus-visible{color:var(--gruen);padding-left:14px}
.index-zeile .ort{grid-column:1;grid-row:1;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:.5em}
.index-zeile h3{grid-column:2;grid-row:1;font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3.4vw,50px);font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:1}
.index-zeile .pfeil{grid-column:3;grid-row:1;font-family:'Space Grotesk',sans-serif;font-size:20px;transition:transform .35s var(--ease)}
.index-zeile:hover .pfeil{transform:translateX(8px)}
.index-zeile p{grid-column:2;grid-row:2;font-size:16px;font-weight:300;color:var(--sekundaer);max-width:60ch;margin-top:8px}
.vorschau{position:fixed;top:0;left:0;width:280px;height:186px;overflow:hidden;pointer-events:none;z-index:90;opacity:0;transform-origin:50% 0;transition:opacity .35s;box-shadow:0 26px 50px -22px rgba(6,26,17,.55)}
.vorschau.an{opacity:1}
.vorschau img{width:100%;height:100%;object-fit:cover}
.vorschau-schnur{position:fixed;top:0;left:0;width:1px;height:0;transform-origin:0 0;pointer-events:none;z-index:89;opacity:0;transition:opacity .35s;background:linear-gradient(180deg,rgba(20,35,27,.55),rgba(20,35,27,.14))}
.vorschau-schnur.an{opacity:1}
.vorschau-schnur::before{content:"";position:absolute;top:-2px;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--gruen)}
@media (max-width:1000px){
  .vorschau,.vorschau-schnur{display:none}
  .index-zeile{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto}
  .index-zeile .ort{grid-column:1;grid-row:1;padding-top:0}
  .index-zeile h3{grid-column:1;grid-row:2}
  .index-zeile .pfeil{grid-column:2;grid-row:2}
  .index-zeile p{grid-column:1;grid-row:3}
}

/* ============ ZITAT ============ */
.zitat{position:relative;padding:110px var(--inset);overflow:hidden;background:var(--tanne)}
.zitat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.zitat::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 32% 50%,rgba(6,26,17,.2),rgba(6,26,17,.82))}
.zitat blockquote{position:relative;z-index:2;max-width:940px;margin:0 auto;text-align:center;color:#fff}
.zitat blockquote p{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3.6vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.1;text-transform:uppercase}
.zitat blockquote p em{font-style:normal;color:var(--lime)}
.zitat cite{display:block;margin-top:26px;font-style:normal;color:rgba(255,255,255,.65);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-family:'Space Grotesk',sans-serif;font-weight:600}

/* ============ KAPITEL 08 — GALERIE ============ */
.galerie{padding:var(--luft) var(--inset)}
.galerie-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:8px}
.kachelbild{position:relative;overflow:hidden;cursor:zoom-in;border:none;padding:0;background:var(--mint);text-align:left}
.kachelbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.kachelbild:hover img,.kachelbild:focus-visible img{transform:scale(1.06)}
.kachelbild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,26,17,.7) 100%);opacity:0;transition:opacity .4s}
.kachelbild:hover::after,.kachelbild:focus-visible::after{opacity:1}
.kachelbild .bu{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
.kachelbild:hover .bu,.kachelbild:focus-visible .bu{opacity:1;transform:none}
.gross{grid-column:span 2;grid-row:span 2}
.breit{grid-column:span 2}

.lightbox{position:fixed;inset:0;z-index:150;background:rgba(6,26,17,.95);display:none;align-items:center;justify-content:center;padding:70px 40px}
.lightbox.offen{display:flex}
.lightbox img{max-width:min(1280px,92vw);max-height:82svh}
.lb-knopf{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);color:#fff;padding:12px 18px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;cursor:pointer}
.lb-knopf:hover{background:rgba(255,255,255,.2)}
#lb-schliessen{top:24px;right:26px}
#lb-zurueck{left:26px;top:50%;transform:translateY(-50%)}
#lb-vor{right:26px;top:50%;transform:translateY(-50%)}
.lb-bu{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:rgba(255,255,255,.75);font-family:'Space Grotesk',sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}

/* ============ CTA + FOOTER ============ */
.cta{background:var(--gruen);padding:var(--luft) var(--inset);display:flex;align-items:flex-end;justify-content:space-between;gap:44px;flex-wrap:wrap}
.cta h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,5.2vw,80px);font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;color:#fff}
.cta p{color:rgba(255,255,255,.88);font-size:18px;font-weight:300;margin-top:18px}

.footer{background:var(--pine);color:rgba(255,255,255,.68);padding:var(--luft) var(--inset) 0}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;padding-bottom:var(--luft-s)}
.footer a{color:inherit}
.footer .logo img{height:52px;width:auto}
.footer .claim{margin-top:22px;font-size:15px;font-weight:300;line-height:1.6;max-width:34ch}
.footer h2{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin:0 0 18px}
.footer li{margin-bottom:11px;font-size:15px}
.footer a:hover{color:#fff}
.fuss-social{display:inline-flex;align-items:center;gap:9px}
.fuss-social svg{width:16px;height:16px;flex:none;opacity:.8;transition:opacity .18s}
.fuss-social:hover svg{opacity:1}
.footer-unten{border-top:1px solid var(--hairline-dunkel);padding:24px 0 30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px}

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){:root{--inset:40px}.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media (max-height:700px){.runde-seite{display:none}}
@media (max-width:900px){
  .hero-inhalt{padding-top:74px}
  .hero-unten{grid-template-columns:1fr;gap:28px}
  .hero-rechts{align-items:flex-start;width:100%}
  .kapitel-kopf{grid-template-columns:1fr;gap:20px;align-items:start;padding:22px 0 32px}
  .runde-lage{grid-template-columns:1fr;align-content:end;padding-bottom:34px}
  .runde-seite{display:none}
  .bahn-text{min-height:6.6em;font-size:16.5px}
  .galerie-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:172px}
  .gastro-mini{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  :root{--inset:22px}
  .runde-step{height:30svh}
  .galerie-grid{grid-auto-rows:148px}
  .gross{grid-column:span 2;grid-row:span 1}
  .footer-grid{grid-template-columns:1fr}
  .bahn-werte>div{padding:12px 16px 0;min-width:0;flex:1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .h1-zeile>span{transform:none}
  .hero-lead,.hero-cta,.hero-rechts{opacity:1}
}

/* ============ Mobil: Hero nur Überschrift, Lead, Statuszeile ============
   Steht bewusst am Dateiende — die Grundregeln (.hero-cta{display:flex} usw.)
   kommen weiter oben und würden eine frühere Regel gleicher Spezifität schlagen. */
@media (max-width:900px){
  .hero .hero-cta{display:none}
  .hero-rechts .fh-plakette{display:none}
}

/* ============ BILD + TEXT (Baukasten) ============ */
.bildtext{padding:var(--luft) var(--inset)}
.bildtext.bt-flaeche-mint{background:var(--mint)}
.bildtext.bt-flaeche-dunkel{background:var(--tanne)}
.bildtext .kapitel-marke{margin-bottom:34px}
.bt-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.bt-bild-links .bt-text{order:2}
.bt-bild-links .bt-bilder{order:1}
.bt-bild-oben .bt-inhalt,.bt-inhalt.bt-nur-bilder{display:block}
.bt-bild-oben .bt-bilder{margin-bottom:40px}
.bt-text h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(30px,4vw,56px);letter-spacing:-.04em;line-height:.92;color:var(--tinte);margin-bottom:22px}
.bt-fliess{font-size:17px;font-weight:300;line-height:1.6;color:var(--sekundaer);max-width:58ch}
.bt-fliess p{margin-bottom:14px}
.bt-fliess p:last-child{margin-bottom:0}
.bt-flaeche-dunkel .bt-text h2{color:#fff}
.bt-flaeche-dunkel .bt-fliess{color:rgba(255,255,255,.75)}
.bt-flaeche-dunkel .bt-fliess a{color:var(--lime)}
.bt-bilder{display:grid;gap:10px;grid-template-columns:1fr}
.bt-bilder.bt-anzahl-2,.bt-bilder.bt-anzahl-4{grid-template-columns:1fr 1fr}
.bt-bilder.bt-anzahl-3{grid-template-columns:repeat(3,1fr)}
.bt-bild-oben .bt-bilder,.bt-nur-bilder .bt-bilder{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bt-bilder figure{margin:0;min-width:0}
.bt-bilder img{width:100%;height:auto;border-radius:14px}
.bt-bilder.bt-anzahl-2 img,.bt-bilder.bt-anzahl-3 img,.bt-bilder.bt-anzahl-4 img,
.bt-bild-oben .bt-bilder img,.bt-nur-bilder .bt-bilder img{aspect-ratio:4/3;object-fit:cover}
.bt-bilder a{display:block;border-radius:14px;overflow:hidden}
.bt-bilder a img{transition:transform .5s var(--ease)}
.bt-bilder a:hover img{transform:scale(1.04)}
.bt-bilder figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.bt-flaeche-dunkel .bt-bilder figcaption{color:rgba(255,255,255,.55)}
@media (max-width:900px){
  .bt-inhalt{grid-template-columns:1fr;gap:30px}
  .bt-bild-links .bt-text{order:0}
  .bt-bild-links .bt-bilder{order:1}
  .bt-bilder.bt-anzahl-3{grid-template-columns:1fr 1fr}
}


/* Sehr schmale Geraete (360 px und darunter): Auch die enge Fassung von
   oben braucht dort noch 364 px. Eine halbe Schriftgroesse weniger und
   engere Polster bringen sie auf 315 px — sie sollen eine Zeile bleiben,
   nicht umbrechen und nicht scrollen. */
@media(max-width:389px){
  .schnell{gap:4px;padding-left:6px;padding-right:6px}
  .schnell .btn,.schnell a,.schnell.mit a{font-size:9.5px;letter-spacing:.02em;padding:8px 8px}
}


/* Die Schnellleiste bleibt beim Lesen stehen (frueher wich sie mit .weg
   nach oben aus — zurueckgenommen am 20.08.2026): Webcam, Marktplatz,
   Startzeiten und Aktuelles sind die vier Wege, die immer offen stehen
   sollen. Nur wo eine andere klebende Zeile denselben Platz braucht,
   weicht sie noch aus — die Summenleisten in greenfee/konditionen. Im
   Turnierkalender weicht seit dem 23.08.2026 umgekehrt die Steuerzeile
   aus, die Pillen werden dort nur schmal (turniere.css .tu-eng). */


/* ============================================================
   Passwort vergessen / Konto anlegen — die Hilfe-Zeile unter
   jedem Feld, das PC-CADDIE-Zugangsdaten verlangt (25.08.2026)
   ============================================================
   Sie steht in ganz verschiedenen Umgebungen: im dunklen Buchungsdialog der
   Startzeiten, in der Turnieranmeldung, auf hellen Karten. Deshalb rechnet
   sie ihre Farben aus `currentColor` statt aus festen Werten — sie nimmt die
   Farbe an, die an ihrem Platz gilt. Nur der Rahmen des Aufklappers braucht
   eine eigene Linie, und die ist ebenfalls durchscheinend. */
.pcc-hilfe{margin-top:12px;font-family:'Hanken Grotesk',sans-serif}
.pcc-hilfe-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0;
  font-size:12.5px;font-weight:600;line-height:1.5}
.pcc-hilfe-punkt{opacity:.35}
.pcc-hilfe-link{color:inherit;opacity:.72;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;cursor:pointer;transition:opacity .18s var(--ease)}
.pcc-hilfe-link:hover,.pcc-hilfe-link:focus-visible{opacity:1;color:inherit}
/* Wenn PC CADDIE sagt „zu dieser Adresse gibt es kein Konto", ist Anlegen der
   naechste Schritt — dann tritt der zweite Link aus der Zeile heraus. */
.pcc-hilfe.ist-ohne-konto [data-pcc-reg]{opacity:1;font-weight:700;color:var(--lime);
  text-decoration-thickness:2px}

.pcc-pw{margin-top:10px;padding:12px;border-radius:12px;
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  background:color-mix(in srgb, currentColor 6%, transparent);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.pcc-pw-feld{flex:1 1 200px;display:block;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;opacity:.66}
.pcc-pw-feld input{display:block;width:100%;margin-top:6px;font:inherit;font-size:15px;
  font-weight:600;letter-spacing:0;text-transform:none;padding:10px 12px;border-radius:10px;
  border:1px solid color-mix(in srgb, currentColor 26%, transparent);
  background:color-mix(in srgb, currentColor 8%, transparent);color:inherit}
.pcc-pw-feld input:focus{outline:2.5px solid var(--lime);outline-offset:1px}
.pcc-pw-senden{flex:0 0 auto;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  padding:11px 16px;border:0;border-radius:10px;cursor:pointer;
  background:var(--lime);color:var(--pine);transition:background .18s var(--ease)}
.pcc-pw-senden:hover{background:#a9e06d}
.pcc-pw-senden[disabled]{opacity:.55;cursor:default}
.pcc-pw-meldung{flex:1 1 100%;margin:2px 0 0;font-size:12.5px;font-weight:600;line-height:1.45;opacity:.8}
.pcc-pw-meldung.ist-ok{opacity:1;color:var(--lime)}
/* „Zu dieser Adresse gibt es kein Konto" ist kein Fehler, sondern der
   Hinweis, dass jetzt Anlegen dran ist — deshalb ruhig, nicht rot. */
.pcc-pw-meldung.ist-hinweis{opacity:1}
.pcc-pw-meldung.ist-fehler{opacity:1;color:#f0a79b}
/* Auf hellem Grund traegt das Lime als Schriftfarbe nicht — dort dieselbe
   Aussage in den Hausfarben. */
.pcc-hilfe-hell .pcc-pw-meldung.ist-ok{color:var(--gruen)}
.pcc-hilfe-hell .pcc-pw-meldung.ist-fehler{color:#a8382a}
.pcc-hilfe-hell.ist-ohne-konto [data-pcc-reg]{color:var(--gruen)}
@media(max-width:479px){
  .pcc-pw-senden{flex:1 1 100%}
  /* Schmal stehen die beiden Wege untereinander — dann haengt der Trenner
     als Waise am Ende der ersten Zeile. */
  .pcc-hilfe-punkt{display:none}
  .pcc-hilfe-links{gap:4px 8px}
}