/* ============================================================
   PARTNERCLUBS & KOOPERATIONEN
   Erste Hälfte „Der Radius": eine klebende SVG-Karte zoomt in
   vier Stufen von Gerhelm auf Europa heraus (viewBox-Lerp über
   den nativen Scroll — Pins-Muster, läuft auf ALLEN Größen).
   Zweite Hälfte „Wo darf ich morgen spielen?": Rollen/Tag-Filter
   mit FLIP, Wochenmatrix, volle Listen als Klartext.
   Basis (Header, Footer, Hero, Kapitel, Buttons): seite.css.
   ============================================================ */

:root{
  /* Ergänzende Tokens (Werte aus dem Designset 2026) */
  --r-pill:999px; --r-karte:14px;
  --t-schnell:.25s; --t-mittel:.35s; --t-lang:.8s;
}

/* ---------------- STATUSZEICHEN — das Zeichensystem der Seite.
   Vier Marken, einfarbig, ab dem Übergabe-Band überall gleich:
   ● enthalten · ⇄ Gegenseitigkeit · ○ kostenpflichtig · ◇ Urlaub */
.zeichen{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.zeichen svg{width:11px;height:11px;flex:none}
.z-inkl{color:var(--gruen)}
.z-gegen{color:var(--tanne)}
.z-kauf{color:var(--muted)}
.z-urlaub{color:var(--tanne)}
.dunkelz .z-inkl,.z-inkl.dunkelz{color:var(--lime)}
.dunkelz .z-gegen,.z-gegen.dunkelz{color:#fff}
.dunkelz .z-kauf,.z-kauf.dunkelz{color:rgba(255,255,255,.72)}
.dunkelz .z-urlaub,.z-urlaub.dunkelz{color:#fff}

.plakette-neu{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--live);color:var(--live);border-radius:var(--r-pill);padding:5px 12px;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.plakette-neu i{width:6px;height:6px;border-radius:50%;background:var(--live);animation:ko-neupuls 2s infinite}
@keyframes ko-neupuls{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------------- ZAHLENLEITER (unter dem Hero) ---------------- */
.ko-leiter{background:var(--pine);color:#fff;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--hairline-dunkel)}
.ko-leiter a{display:flex;flex-direction:column;gap:6px;padding:26px;border-right:1px solid var(--hairline-dunkel);color:#fff;transition:background var(--t-schnell)}
.ko-leiter a:last-child{border-right:0}
.ko-leiter a:hover{background:rgba(204,255,0,.1);color:#fff}
.ko-leiter .z{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(30px,3.6vw,54px);line-height:.9}
.ko-leiter a:nth-child(4) .z{color:var(--lime)}
.ko-leiter .l{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ko-leiter .pfeil{font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--lime);opacity:0;transform:translateY(-4px);transition:opacity var(--t-schnell),transform var(--t-schnell) var(--ease)}
.ko-leiter a:hover .pfeil{opacity:1;transform:none}
@media (max-width:760px){
  .ko-leiter{grid-template-columns:1fr 1fr}
  .ko-leiter a{border-bottom:1px solid var(--hairline-dunkel);padding:16px 18px 20px}
  .ko-leiter a:nth-child(2n){border-right:0}
}

/* ---------------- KAPITEL „DER RADIUS" ---------------- */
.radius{position:relative;background:var(--tanne);color:#fff}
.radius-klebt{position:sticky;top:0;height:100svh;overflow:hidden}
.radius-klebt svg{width:100%;height:100%}
.radius-hud{position:absolute;left:var(--inset);bottom:40px;z-index:3;pointer-events:none}
.radius-hud .stufe-nr{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--lime);text-transform:uppercase}
.radius-hud .wert{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(64px,9vw,150px);line-height:.85;color:#fff;min-width:5ch}
.radius-hud .einheit{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:10px}
.radius-legende{position:absolute;right:var(--inset);bottom:40px;z-index:3;flex-direction:column;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);pointer-events:none;opacity:0;transition:opacity var(--t-lang)}
.radius-legende.an{opacity:1}
.radius-legende span{display:flex;align-items:center;gap:9px}
.radius-legende i{width:8px;height:8px;border-radius:50%;flex:none}
.radius-legende .lw{background:#fff}
.radius-legende .ll{background:var(--lime)}
/* Textspalte: scrollt über der klebenden Karte vorbei. Sie ist
   klickdurchlässig — sonst erreicht kein Tipp die Karte darunter
   (Umkreis-Picker); nur die Tafeln selbst fangen Zeigerereignisse. */
.radius-text{position:relative;z-index:2;margin-top:-100svh;pointer-events:none}
.radius-tafel{pointer-events:auto}
/* Tafeln fast am rechten Rand und kompakt — die Karte bekommt die Bühne */
.radius-block{min-height:112svh;display:flex;align-items:center;justify-content:flex-end;padding:0 clamp(14px,1.6vw,24px) 0 var(--inset)}
.radius-block:last-child{padding-bottom:8svh}
.radius-tafel{width:min(410px,100%);background:rgba(6,26,17,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--hairline-dunkel);padding:24px 26px 26px}
.radius-tafel .kapnr{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--lime);text-transform:uppercase}
.radius-tafel h2,.radius-tafel h3{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(21px,2.2vw,30px);color:#fff;margin:12px 0 0}
.radius-tafel .rt-lead{font-size:15px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.85);margin-top:12px}
.radius-tafel .rt-status{margin-top:18px}
.radius-liste{margin-top:20px;border-top:1px solid var(--hairline-dunkel)}
.radius-liste li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hairline-dunkel);font-size:15px}
.radius-liste .i{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--lime);min-width:2.2em}
.radius-liste .n{font-weight:500;color:#fff}
.radius-liste .o{display:block;font-size:13.5px;font-weight:300;color:rgba(255,255,255,.55);margin-top:2px}
.radius-liste .hier .n{color:var(--lime)}
.radius-tafel .rt-fuss{margin-top:16px;font-size:13px;font-weight:300;color:rgba(255,255,255,.55)}
.radius-tafel .rt-fuss a{color:var(--lime)}
.radius-tafel .regeln{margin-top:16px;display:grid;gap:8px}
.radius-tafel .regeln li{display:flex;gap:10px;font-size:14px;font-weight:300;color:rgba(255,255,255,.8)}
.radius-tafel .regeln li::before{content:"—";color:var(--lime);flex:none}
/* SVG-Karte: echte Landkarte, Zustände über data-stufe am svg-Element.
   Meer = Pine mit leichtem Licht, Land dunkel abgesetzt. */
#karte{background:
  radial-gradient(1200px 800px at 50% 52%,rgba(31,132,70,.22),transparent 70%),
  var(--pine)}
.kartesvg .land{fill:#0c3826;stroke:rgba(255,255,255,.10);stroke-width:.6;vector-effect:non-scaling-stroke;transition:fill var(--t-lang),stroke var(--t-lang)}
/* Stufe 4: die spielberechtigten Länder heben sich als Flächen ab */
#karte[data-stufe="4"] .land.donau{fill:#14532f}
#karte[data-stufe="4"] .land.amore{fill:#125230;stroke:rgba(204,255,0,.35)}
#karte[data-stufe="4"] .land.donau.amore{fill:#1a6238}
/* Linien: Strichstärke in Kartenkoordinaten — beim Herauszoomen
   werden sie von selbst feiner (bewusst KEIN non-scaling-stroke) */
.kartesvg .linie{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.kartesvg .linie2{fill:none;stroke:rgba(204,255,0,.45);stroke-width:.45;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease)}
.kartesvg .regio circle{fill:rgba(255,255,255,.85)}
.kartesvg .guf circle{fill:var(--lime);transition:fill .5s var(--ease),r .5s var(--ease)}
/* GuF im Fokus: während die „Golfen unter Freunden"-Tafel vorbeizieht,
   glühen ihre zehn Punkte korallenrot und etwas größer — dieselbe Farbe
   wie die Neu-2026-Plakette auf der Tafel, damit beides zusammengehört. */
#karte.guf-fokus .guf circle{fill:var(--live);r:1.6}
#karte.guf-fokus~.radius-legende .ll{background:var(--live)}
.kartesvg .logokarte image{filter:drop-shadow(0 .6px 1.4px rgba(3,15,10,.6))}
/* Anfassen & verschieben (setzt kooperationen.js nur an Maus-Geräten).
   user-select:none auf dem GANZEN Klebe-Container (Karte + HUD + Legende) —
   sonst markiert der Zug Text darin und die Lime-Selektionsfarbe
   (seite.css ::selection) färbt den Screen hellgrün. */
.radius-klebt,.radius-klebt *{user-select:none;-webkit-user-select:none}
.kartesvg.greifbar{cursor:grab}
.kartesvg.greifbar.zieht{cursor:grabbing}
.radius-legende .nur-maus,.radius-legende .nur-touch{display:none}
@media (hover:hover) and (pointer:fine){.radius-legende .nur-maus{display:inline}}
@media (hover:none){.radius-legende .nur-touch{display:inline}}
.kartesvg a.logokarte{cursor:pointer;outline:none}
.kartesvg a.logokarte:focus-visible image{outline:3px solid var(--lime);outline-offset:3px}
/* Die Golfwolke: Punkte leuchten gestaffelt auf.
   Golfamore (echte Plätze) und Donau-Streuung beide ab Stufe 3. */
.kartesvg .wolke-donau circle{fill:rgba(255,255,255,.7);opacity:0;transition:opacity .9s var(--ease);transition-delay:var(--d,0s)}
.kartesvg .wolke-amore circle{fill:rgba(190,228,150,.75);opacity:0;transition:opacity .9s var(--ease);transition-delay:var(--d,0s)}
#karte[data-stufe="3"] .wolke-donau circle,#karte[data-stufe="4"] .wolke-donau circle{opacity:1}
#karte[data-stufe="3"] .wolke-amore circle,#karte[data-stufe="4"] .wolke-amore circle{opacity:1}
/* Funkeln wie Sterne, dauerhaft und flächendeckend: JEDER Punkt glitzert.
   Zwei Rhythmen (gerade/ungerade) + gestaffelte Delays aus --d, damit es
   wie ein lebendiger Sternenhimmel wirkt statt im Takt zu pulsieren. */
#karte[data-stufe="3"] .wolke-donau circle{animation:ko-funkeln 3.4s infinite;animation-delay:var(--d,0s)}
#karte[data-stufe="3"] .wolke-amore circle,
#karte[data-stufe="4"] .wolke-amore circle{animation:ko-funkeln 4.2s infinite;animation-delay:calc(var(--d,0s)*2.6)}
#karte[data-stufe="3"] .wolke-amore circle:nth-child(2n+1),
#karte[data-stufe="4"] .wolke-amore circle:nth-child(2n+1){animation-duration:5.6s;animation-delay:calc(var(--d,0s)*3.4)}
@keyframes ko-funkeln{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #karte .wolke-donau circle,#karte .wolke-amore circle{animation:none!important}
}
/* Die Karte ist auf jeder Stufe antippbar (Umkreis-Picker) */
#karte{cursor:pointer}

/* ---------------- UMKREIS-PICKER (Modal) ---------------- */
.ko-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;justify-content:center}
.ko-modal[hidden]{display:none}
.ko-modal-schleier{position:absolute;inset:0;background:rgba(3,15,10,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ko-modal-karte{position:relative;width:min(560px,100%);max-height:min(72svh,640px);overflow:auto;background:var(--pine);color:#fff;border:1px solid var(--hairline-dunkel);border-bottom:0;padding:22px 26px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -30px 80px -30px rgba(0,0,0,.8)}
@media (min-width:700px){
  .ko-modal{align-items:center;padding:24px}
  .ko-modal-karte{border-bottom:1px solid var(--hairline-dunkel);padding-bottom:22px}
}
.ko-modal-karte header{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:start;border-bottom:1px solid var(--hairline-dunkel);padding-bottom:14px}
.ko-modal-karte h3{grid-row:2;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:20px;color:#fff}
.ko-modal-zu{grid-row:1/3;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;width:38px;height:38px;cursor:pointer;font-size:15px}
.ko-modal-zu:hover{background:rgba(255,255,255,.12)}
#ko-modal-liste{list-style:none;margin:0;padding:0}
#ko-modal-liste a,#ko-modal-liste .ohne-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--hairline-dunkel);color:#fff;transition:background var(--t-schnell),padding-left var(--t-schnell)}
#ko-modal-liste a:hover{background:rgba(204,255,0,.08);padding-left:8px;color:#fff}
#ko-modal-liste .n{font-weight:500;font-size:15.5px}
#ko-modal-liste .o{grid-column:1;font-size:13px;font-weight:300;color:rgba(255,255,255,.55)}
#ko-modal-liste .km{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--lime);white-space:nowrap;font-variant-numeric:tabular-nums}
#ko-modal-liste .leer{padding:16px 2px;font-weight:300;color:rgba(255,255,255,.7)}
.ko-modal-fuss{margin-top:12px;font-size:12px;font-weight:300;color:rgba(255,255,255,.5)}
.radius-legende .tipp{color:var(--lime)}
/* Zustände — kumulatives Zünden über die Stufe */
#karte .dotG,#karte .gufG,#karte .logokarte{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .7s var(--ease);transition-delay:var(--d,0s)}
#karte[data-stufe="2"] .linie,#karte[data-stufe="3"] .linie,#karte[data-stufe="4"] .linie{stroke-dashoffset:0}
#karte[data-stufe="3"] .linie2,#karte[data-stufe="4"] .linie2{stroke-dashoffset:0}
#karte[data-stufe="2"] .logokarte,#karte[data-stufe="3"] .logokarte,#karte[data-stufe="4"] .logokarte,
#karte[data-stufe="2"] .dotG,#karte[data-stufe="3"] .dotG,#karte[data-stufe="4"] .dotG{transform:scale(1)}
#karte[data-stufe="3"] .gufG,#karte[data-stufe="4"] .gufG{transform:scale(1)}
/* Legende: Donau-/Golfamore-Zeilen, sobald ihre Wolken leuchten (ab Stufe 3) */
.radius-legende .nur4{display:none}
#karte[data-stufe="3"]~.radius-legende .nur4,
#karte[data-stufe="4"]~.radius-legende .nur4{display:flex}
.radius-legende .ld{background:#1a6238;border-radius:2px}
.radius-legende .la{background:#125230;border:1px solid rgba(204,255,0,.6);border-radius:2px}

/* ---------------- ÜBERGABE-BAND „WAS KOSTET WAS" ---------------- */
.kostet{background:var(--pine);color:#fff;padding:var(--luft-s) var(--inset)}
.kostet-zeilen{border-top:1px solid var(--hairline-dunkel)}
.kostet-zeile{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr);gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hairline-dunkel)}
.kostet-zeile .n{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.kostet-zeile .d{font-size:14.5px;font-weight:300;color:rgba(255,255,255,.6);text-align:right}
.kostet-schluss{margin-top:34px;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(26px,4vw,54px);color:#fff}
.kostet-schluss em{font-style:normal;color:var(--lime)}
@media (max-width:760px){
  .kostet-zeile{grid-template-columns:minmax(0,1fr) auto;gap:8px 18px}
  .kostet-zeile .d{grid-column:1/-1;text-align:left}
}

/* ---------------- KAPITEL „WO DARF ICH MORGEN SPIELEN?" ---------------- */
.werkzeug{background:#fff;padding-bottom:var(--luft)}
.werkzeug .kapitel{padding-top:var(--luft)}
/* Steuerzeile: Formular in Schlagzeilengröße. Unterstreichung = Ortsmarkierung. */
.steuerzeile{padding:0 var(--inset) 34px;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1.25;font-size:clamp(21px,3.4vw,44px);color:var(--tinte)}
.steuerzeile .wahl{position:relative;display:inline-block}
.steuerzeile select{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:4px solid var(--gruen);border-radius:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--gruen);padding:0 1.15em .06em .08em;cursor:pointer;max-width:100%}
.steuerzeile select:hover{color:var(--tanne);border-color:var(--tanne)}
.steuerzeile .wahl::after{content:"";position:absolute;right:.28em;top:50%;width:.32em;height:.32em;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-70%) rotate(45deg);color:var(--gruen);pointer-events:none}
.steuer-fuss{padding:0 var(--inset) 26px;font-size:13.5px;color:var(--muted)}
html:not(.js) .steuerzeile,html:not(.js) .steuer-fuss{display:none}

/* Ergebnis-Raster: Kacheln scharfkantig (Tarifkarten-Regel) */
.raster{padding:0 var(--inset);display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hairline)}
.kachel{background:#fff;padding:20px 20px 18px;display:flex;flex-direction:column;gap:6px;min-height:172px;position:relative}
.kachel h3{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:700;text-transform:uppercase;letter-spacing:-.015em;line-height:1.1;color:var(--tinte)}
.kachel .k-ort{font-size:13.5px;font-weight:300;color:var(--muted)}
.kachel .k-preis{font-family:'Space Grotesk',sans-serif;font-size:clamp(19px,1.6vw,24px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tanne);margin-top:auto;padding-top:12px}
.kachel .k-tage{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kachel .k-hinweis{font-size:13px;font-weight:300;color:var(--sekundaer)}
.kachel .k-grund{font-size:13px;font-weight:400;color:var(--muted)}
.kachel .k-tel{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gruen)}
.kachel .k-tel svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
/* Gast-Rollen: Mitglieder-Angebote sind hier kein Thema und verschwinden ganz */
.kachel.weg{display:none}
.kachel.matt{background:var(--mint)}
.kachel.matt h3{color:var(--sekundaer)}
.kachel.matt .k-preis{color:var(--muted)}
/* Scharnier: jede Kachel beginnt als Punkt und setzt sich ins Raster —
   die optische Fortsetzung der Kartenpunkte in die zweite Seitenhälfte. */
.kachel::before{content:"";position:absolute;left:20px;top:22px;width:8px;height:8px;border-radius:50%;background:var(--gruen);opacity:0;transform:scale(0)}
.js .kachel.vor-punkt{opacity:0}
.js .kachel.vor-punkt::before{opacity:1;transform:scale(1)}
.js .kachel.landet{opacity:1;transition:opacity .55s var(--ease);transition-delay:var(--d,0s)}
.raster.im-flug .kachel{transition:transform .5s var(--ease),opacity .4s}
@media (max-width:1200px){.raster{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.raster{grid-template-columns:1fr}.kachel{min-height:0}}

/* ---------------- WOCHENMATRIX ---------------- */
.matrix{background:var(--mint);padding:var(--luft) 0}
.matrix .kapitel-marke,.matrix .matrix-kopf{margin:0 var(--inset)}
.matrix-kopf{padding:26px 0 26px}
.matrix-kopf h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(24px,2.8vw,38px);color:var(--tinte)}
.matrix-kopf p{margin-top:12px;max-width:60ch;font-weight:300;color:var(--sekundaer)}
.matrix-rollcontainer{overflow-x:auto;padding:0 var(--inset) 6px;scrollbar-width:thin;scrollbar-color:var(--gruen) transparent}
table.wochen{border-collapse:collapse;width:100%;min-width:860px;background:#fff}
.wochen caption{text-align:left;padding:14px 18px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:#fff;border-bottom:1px solid var(--linie-karte)}
.wochen th,.wochen td{border:1px solid var(--linie-karte);padding:10px 12px;font-size:14px;text-align:center}
.wochen thead th{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte);background:#fff;padding:13px 12px}
.wochen tbody th{text-align:left;font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--tinte);white-space:nowrap;padding-right:18px}
.wochen tbody th small{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:300;letter-spacing:0;color:var(--muted)}
.wochen td.ja{background:var(--gruen);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums}
.wochen td.frei{background:var(--tanne);color:var(--lime);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px}
.wochen td.nein{color:var(--linie-karte);background:#fff}
.wochen td.nein.we{background:var(--mint)}
/* Spaltenweiser Aufbau + Zeilen-/Spaltenfokus */
.js .wochen td{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--d,0s)}
.js .wochen.auf td{opacity:1;transform:none}
.wochen tbody tr:hover th,.wochen tbody tr:focus-within th{color:var(--gruen)}
.wochen tbody tr:hover td.nein{background:var(--mint)}
.wochen.spalte-1 thead th:nth-child(2),.wochen.spalte-2 thead th:nth-child(3),.wochen.spalte-3 thead th:nth-child(4),.wochen.spalte-4 thead th:nth-child(5),.wochen.spalte-5 thead th:nth-child(6),.wochen.spalte-6 thead th:nth-child(7),.wochen.spalte-7 thead th:nth-child(8){background:var(--mint);color:var(--gruen)}
.matrix-stand{margin:14px var(--inset) 0;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------------- PROGRAMME IM DETAIL ---------------- */
.programme{padding:var(--luft) 0 0}
.programm{padding:0 var(--inset) var(--luft);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;border-top:1px solid var(--hairline)}
.programm .p-links{position:sticky;top:106px;padding-top:30px}
.programm .p-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums;font-size:clamp(64px,8vw,140px);line-height:.85;color:var(--gruen)}
.programm .p-zahl small{font-size:.4em;letter-spacing:-.02em}
.programm .p-einheit{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.programm .p-status{margin-top:18px}
.programm .p-status-reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.programm .p-rechts{padding-top:34px}
.programm h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(24px,2.8vw,38px);color:var(--tinte)}
.programm .p-text{margin-top:16px;max-width:62ch;font-weight:300;color:var(--text)}
.programm .p-liste{margin-top:22px;border-top:1px solid var(--hairline)}
.programm .p-liste li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hairline);font-size:15.5px}
.programm .p-liste .i{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--gruen);min-width:2.2em}
.programm .p-liste .n{font-weight:500;color:var(--tinte)}
.programm .p-liste .o{display:block;font-size:13.5px;font-weight:300;color:var(--muted);margin-top:2px}
.programm .p-liste .r{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sekundaer);white-space:nowrap;font-variant-numeric:tabular-nums}
.programm .p-liste .hier .n{color:var(--gruen)}
.programm .regeln-kasten{margin-top:22px;border:1px solid var(--hairline);padding:22px 24px}
.programm .regeln-kasten h3{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte);margin-bottom:14px}
.programm .regeln-kasten li{display:flex;gap:10px;font-size:14.5px;font-weight:300;color:var(--text);padding:4px 0}
.programm .regeln-kasten li::before{content:"—";color:var(--gruen);flex:none}
.programm .p-fuss{margin-top:18px;font-size:13.5px;color:var(--muted)}
.programm .ko-logo{display:inline-block;background:#fff;border:1px solid var(--linie-karte);padding:14px 20px;margin-top:22px;max-width:min(360px,100%)}
.programm .ko-logo img{width:100%;height:auto}
.programm .ablauf{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hairline);list-style:none;counter-reset:none}
.programm .ablauf li{padding:14px 18px 0 0;border-right:1px solid var(--hairline);font-size:14px;font-weight:300;color:var(--text)}
.programm .ablauf li+li{padding-left:18px}
.programm .ablauf li:last-child{border-right:0}
.programm .ablauf .s{display:block;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--gruen);margin-bottom:8px;text-transform:uppercase}
@media (max-width:980px){
  .programm{grid-template-columns:1fr;gap:10px}
  .programm .p-links{position:static;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-top:26px}
  .programm .p-einheit,.programm .p-status{margin-top:0}
  .programm .p-rechts{padding-top:6px}
  .programm .ablauf{grid-template-columns:1fr 1fr}
  .programm .ablauf li{border-right:0;border-bottom:1px solid var(--hairline);padding:12px 0}
  .programm .ablauf li+li{padding-left:0}
}

/* ---------------- KÄRNTEN ---------------- */
.kaernten{background:var(--tanne);color:#fff}
.kaernten-bild{position:relative;height:min(56svh,520px);overflow:hidden}
.kaernten-bild img{width:100%;height:100%;object-fit:cover}
.kaernten-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,32,21,.16) 0%,rgba(11,65,43,.88) 100%)}
.kaernten-bild .bildzeile{position:absolute;left:var(--inset);bottom:26px;z-index:2;color:#fff}
.kaernten .bildzeile-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(24px,2.8vw,38px);color:#fff;margin-top:10px}
/* Das Regionslogo klebt als Schild in der Bildecke — Schatten und die leichte
   Drehung bringt das PNG selbst mit. */
.kaernten-marke{position:absolute;right:var(--inset);bottom:26px;z-index:2;display:block;width:clamp(112px,13vw,176px);transition:transform var(--t-schnell) var(--ease)}
.kaernten-marke img{width:100%;height:auto;display:block}
.kaernten-marke:hover,.kaernten-marke:focus-visible{transform:translateY(-3px)}
.kaernten-inhalt{padding:var(--luft-s) var(--inset) var(--luft);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.kaernten h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(24px,2.8vw,38px);color:#fff}
.kaernten .k-text{margin-top:16px;font-size:16.5px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.82);max-width:52ch}
.kaernten .hotelliste{margin-top:22px;border-top:1px solid var(--hairline-dunkel)}
.kaernten .hotelliste li{border-bottom:1px solid var(--hairline-dunkel);font-size:15.5px}
/* Die Zeile ist ganz Link — das Raster sitzt deshalb auf dem <a>, nicht auf
   dem <li>, sonst wäre nur der Name klickbar. */
.kaernten .hotelliste a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:13px 0;color:inherit;text-decoration:none}
.kaernten .hotelliste .n{font-weight:500;color:#fff;transition:color var(--t-schnell)}
.kaernten .hotelliste .o{display:block;font-size:13.5px;font-weight:300;color:rgba(255,255,255,.55);margin-top:2px}
.kaernten .hotelliste .r{display:inline-flex;align-items:baseline;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);white-space:nowrap}
.kaernten .pfeil{font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--lime);opacity:.55;transition:opacity var(--t-schnell),transform var(--t-schnell) var(--ease)}
.kaernten a:hover .n,.kaernten a:focus-visible .n{color:var(--lime)}
.kaernten a:hover .pfeil,.kaernten a:focus-visible .pfeil{opacity:1;transform:translateX(3px)}
.kaernten .code{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.06em;background:rgba(204,255,0,.14);color:var(--lime);border:1px solid rgba(204,255,0,.4);border-radius:var(--r-pill);padding:2px 12px;font-size:.82em;white-space:nowrap}
.kaernten .aktion{border:1px solid var(--hairline-dunkel);padding:24px 26px;margin-top:34px}
.kaernten .aktion h3{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:#fff;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kaernten .aktion h3 a{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none;transition:color var(--t-schnell)}
.kaernten .aktion h3 a:hover,.kaernten .aktion h3 a:focus-visible{color:var(--lime)}
.kaernten .aktion p{font-size:14.5px;font-weight:300;color:rgba(255,255,255,.75);margin-top:10px}
.kaernten .aktion+.aktion{margin-top:14px}
@media (max-width:980px){.kaernten-inhalt{grid-template-columns:1fr;gap:24px}.kaernten .aktion{margin-top:20px}}
/* Schmal wandert das Schild nach oben rechts — unten stünde es sonst auf der
   Kapitelmarke und dem Bildtitel. Der Abstand nach oben hält es frei vom
   klebenden Kopf (64 px), der beim Scrollen über das Bild wandert. */
@media (max-width:700px){.kaernten-marke{bottom:auto;top:78px;right:16px;width:96px}}

/* ---------------- GÄSTE ANDERER CLUBS ---------------- */
.gaeste{background:#fff;padding:var(--luft) var(--inset)}
.gaeste-kasten{background:var(--mint);padding:clamp(30px,5vw,60px);display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:40px;align-items:center}
.gaeste h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;font-size:clamp(28px,4vw,56px);color:var(--tinte);margin-top:16px}
.gaeste h2 em{font-style:normal;color:var(--gruen)}
.gaeste .g-lead{margin-top:16px;max-width:56ch;font-size:19px;font-weight:300;line-height:1.55;color:var(--sekundaer)}
.gaeste .g-preis{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(44px,5vw,84px);line-height:.9;color:var(--tinte);text-align:right}
.gaeste .g-preis small{display:block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.gaeste .g-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:820px){.gaeste-kasten{grid-template-columns:1fr}.gaeste .g-preis{text-align:left}}

/* ---------------- RESPONSIV: DER RADIUS AUF KLEINEN GERÄTEN ----------------
   Kein Ersatzmodus — dieselbe Kamerafahrt über den nativen Scroll. Die Karte
   klebt in der oberen Hälfte unter dem Header, der Textkasten PINNT statisch
   darunter; beim Weiterscrollen schiebt sich der nächste Kasten darüber
   (Stapel-Sticky). Karte und Text stehen nie übereinander. */
@media (max-width:700px){
  /* Die Karte dominiert (~70 % des Schirms); darunter pinnt nur eine
     schlanke Untertitel-Leiste: Kapitelnummer, Überschrift, zwei Zeilen
     Lead. Listen und Regeln stehen unten in „Programme im Detail" —
     nichts fährt mehr über die Animation. */
  /* Platzrechnung: Header oben, Schnellzugriff-Leiste unten (seite.css,
     56px + safe-area), dazwischen Karte + Untertitel-Leiste */
  .radius{--ko-kopf:64px;--ko-leiste:172px;--ko-schnell:calc(56px + env(safe-area-inset-bottom))}
  /* Der Klebe-Container füllt alles unterhalb des Headers. WICHTIG: 100vh,
     nicht 100svh — auf iOS ist vh die GROSSE Viewport-Höhe; mit svh blieb
     bei eingezogener Safari-Leiste ein Tanne-Streifen zwischen Karte und
     Kasten sichtbar (die Differenz svh↔dynamischer Viewport). Der Container
     darf lieber unten unter Leiste/Schnellzugriff verschwinden als je eine
     Lücke zu lassen. Das SVG endet über der Leiste (Kamera zentriert im
     sichtbaren Bereich), darunter läuft derselbe Hintergrund weiter. */
  .radius-klebt{top:var(--ko-kopf);height:calc(100vh - var(--ko-kopf));background:radial-gradient(1200px 800px at 50% 40%,rgba(31,132,70,.22),transparent 70%),var(--pine)}
  .radius-klebt svg{height:calc(100% - var(--ko-leiste) - var(--ko-schnell))}
  .radius-text{margin-top:0}
  .radius-block{min-height:88svh;display:block;padding:0}
  .radius-block:last-child{padding-bottom:16svh}
  /* Die Leiste rutscht NICHT über die Karte: Sie sitzt fix am unteren
     Rand, und nur ihr Inhalt wechselt per Überblendung (Klasse .aktiv
     setzt kooperationen.js; .ko-buehne = Radius-Kapitel ist im Bild). */
  .radius-tafel{position:fixed;left:0;right:0;bottom:var(--ko-schnell);z-index:5;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);min-height:var(--ko-leiste);width:100%;background:var(--pine);backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-top:1px solid var(--hairline-dunkel);padding:14px var(--inset) 16px}
  .radius.ko-buehne .radius-block.aktiv .radius-tafel{opacity:1;pointer-events:auto}
  .radius-tafel .kapnr{font-size:10px;letter-spacing:.16em}
  .radius-tafel h2,.radius-tafel h3{font-size:19px;margin-top:8px}
  .radius-tafel .rt-lead{font-size:14px;line-height:1.45;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .radius-tafel .rt-status{margin-top:10px}
  .radius-tafel .rt-status .zeichen{font-size:9px}
  .plakette-neu{font-size:9px;padding:3px 9px}
  /* Listen, Regeln und Fußnoten mobil ausblenden — sie stehen vollständig
     im Kapitel „Die Programme im Detail" weiter unten */
  .radius-tafel .radius-liste,.radius-tafel .regeln,.radius-tafel .rt-fuss{display:none}
  .radius-hud{left:14px;bottom:calc(var(--ko-leiste) + var(--ko-schnell) + 12px)}
  .radius-hud .stufe-nr{font-size:9.5px;letter-spacing:.16em}
  .radius-hud .wert{font-size:clamp(34px,10vw,54px);min-width:0}
  .radius-hud .einheit{font-size:9.5px;margin-top:4px}
  .radius-legende{right:14px;bottom:calc(var(--ko-leiste) + var(--ko-schnell) + 12px);gap:5px;font-size:8.5px;letter-spacing:.1em}
  .radius-legende i{width:7px;height:7px}
}
@media (max-width:560px){
  /* Die Steuerzeile klebt unter dem Header, damit man beim
     Durchscrollen des Rasters die Auswahl ändern kann */
  .steuerzeile{position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-top:12px;padding-bottom:14px;border-bottom:1px solid var(--linie-header)}
}

/* ---------------- REDUZIERTE BEWEGUNG / OHNE JS ---------------- */
@media (prefers-reduced-motion:reduce){
  .js .wochen td{opacity:1;transform:none;transition:none}
  .js .kachel.vor-punkt{opacity:1}
  .kartesvg .linie,#karte .p500 circle,#karte .pguf circle,#karte .pdonau circle,#karte .pamore circle,#karte .p500 text{transition:none}
  .plakette-neu i{animation:none}
}
/* Ohne JavaScript: alles sichtbar, Karte zeigt den Vollzustand */
html:not(.js) #karte .linie,html:not(.js) #karte .linie2{stroke-dashoffset:0}
html:not(.js) #karte .dotG,html:not(.js) #karte .gufG,html:not(.js) #karte .logokarte{transform:scale(1)}
html:not(.js) #karte .wolke-donau circle,html:not(.js) #karte .wolke-amore circle{opacity:1}
html:not(.js) .radius-klebt{position:relative;height:70svh}
html:not(.js) .radius-text{margin-top:0}
html:not(.js) .radius-block{min-height:0;padding-top:30px;padding-bottom:30px}
.ko-modal-karte:focus{outline:none}
.ko-modal-karte:focus-visible{outline:2px solid var(--gruen,#1F8446);outline-offset:-2px}