/* ============================================================
   EINSTEIGERPROGRAMME — „Niemand fängt allein an."
   Drei tragende Effekte, sonst nichts:
   1) Das Jahresband klebt, während die sieben Stationen daran
      vorbeilaufen; die Bildfläche wechselt die Jahreszeit
   2) Der Rollen-Umschalter dreht jede Karte auf ihre andere
      Seite (FLIP), ohne je Inhalt zu verstecken
   3) Die drei Prämienbeträge zählen einmal hoch
   Alle Farben, Abstände und Kurven aus tokens.css. Bewegt
   werden ausschließlich transform und opacity.
   ============================================================ */

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

/* ============================================================
   FEHLENDE TOKENS AUS tokens.css
   seite.css bringt Farben, Abstände und die Bewegungskurve mit —
   aber NICHT die Radien, die Übergangsdauern und die Schatten.
   Ohne diese Zeilen fällt jedes border-radius auf 0 zurück und
   jede `transition: … var(--t-mittel) …` ist ungültig, der
   Zustand springt also hart. Werte wortgleich aus tokens.css,
   wie auf der Platzreife-Seite; global gehören sie nach
   seite.css, sobald jemand alle Seiten mitprüfen kann.
   ============================================================ */
:root{
  --r-pill:999px;
  --r-karte:14px;
  --r-flaeche:0px;
  --t-schnell:.25s;
  --t-mittel:.35s;
  --t-lang:.8s;
  --schatten-karte:0 28px 60px -28px rgba(11,65,43,.45);
  --schatten-plakette:0 14px 30px -14px rgba(6,26,17,.6);
}

/* Typografie-Stufen: stehen seit 25.08.2026 zentral in seite.css.
   Sie lagen hier als Handkopie, weil seite.css sie nicht mitbrachte —
   dieselbe Falle wie bei den Radien und den zwei Schriften. */
[hidden]{display:none !important}

/* ============ DER HERO DIESER SEITE ============
   Das Bild ist das hellste der Website — heller Himmel über heller
   Wiese, und genau dort steht die Überschrift (gemessen: 1,3:1 an der
   hellsten Stelle der ersten Zeile).

   Das Bild wird deshalb NICHT abgedunkelt (Entscheidung Andreas,
   20.08.2026): keine Schleierfläche, kein Verlauf über die Bühne — es
   soll in seiner Farbe stehen. Der Halt sitzt stattdessen direkt an
   den Buchstaben: zwei Schattenlagen je Zeile, eine harte für die
   Kante und eine weite, weiche als Hof. Der Himmel bleibt Himmel, die
   Wiese bleibt grün, und der Text steht trotzdem drauf.

   Die Backend-Stufe „Abdunklung des Bildes" bleibt davon unberührt —
   sie steht für diese Seite bewusst auf „ohne". */
/* Eng und dicht statt weit und weich: Ein großer Blur legt sich als
   grauer Fleck über den Himmel — was den Buchstaben Halt gibt, ist die
   dunkle Kante direkt an ihrer Flanke.

   Zurückgenommen am 25.08.2026 (Andreas: „zu extrem", dann „die leiseste
   Variante ohne Abdunklung"): Die erste Fassung hatte die Schatten so
   hart gesetzt, dass die Überschrift wie erhaben auf dem Bild lag — ein
   Effekt, den man sieht, statt eine Hilfe, die man nicht bemerkt. Die
   Deckkraft ist mehr als halbiert und der Versatz auf 1–2 px verkürzt;
   was bleibt, ist eine schmale dunkle Flanke, sonst nichts. Auch die
   Konturzeile bekommt keinen Zuschlag mehr — leiser geht es nicht, ohne
   das Bild abzudunkeln, und abgedunkelt wird es nicht. */
.hero .sh-kicker{text-shadow:0 1px 2px rgba(6,26,17,.45),0 2px 6px rgba(6,26,17,.3)}
.hero h1 span{text-shadow:0 1px 2px rgba(6,26,17,.3),0 2px 9px rgba(6,26,17,.26)}
.hero .hero-lead{text-shadow:0 1px 2px rgba(6,26,17,.4),0 2px 8px rgba(6,26,17,.28)}
/* Kein Schatten um die Konturzeile: Die dunklen drop-shadows ließen den
   Lime-Strich auf hellem Himmel dunkelgrün wirken (Andreas, 31.08.2026:
   „nimm das dunkle raus wie sonst auch") — die Kontur steht jetzt wie auf
   allen anderen Seiten nackt. */

/* ============ DIE STANDZEILE UNTER DEM HERO ============ */
.ep-standzeile{display:flex;align-items:center;gap:10px;margin:0;padding:18px var(--inset);
  border-bottom:1px solid var(--hairline);font-family:'Space Grotesk',sans-serif;font-size:12.5px;
  font-weight:600;letter-spacing:.04em;color:var(--sekundaer)}
.ep-stand-punkt{width:8px;height:8px;border-radius:var(--r-pill);background:var(--gruen);flex:none}

/* ============================================================
   01 — DAS JAHRESBAND
   Das Band klebt links, die Stationen laufen daran vorbei. KEIN
   align-items:start auf dem Grid — das staucht die linke Spalte
   auf ihre Inhaltshöhe, und position:sticky hätte dann fast
   keinen Weg mehr.
   ============================================================ */
.epjahr{padding-bottom:var(--luft)}
/* Die Bandspalte braucht eine MINDESTbreite, keine reine Obergrenze: Die
   Bildfläche enthält nur absolut positionierte Bilder und hat damit keine
   eigene Inhaltsbreite. Mit `minmax(0,420px)` plus `justify-content:start`
   fiel die Spalte auf wenige Pixel zusammen — das Bild war briefmarken-
   groß und die Achse stand allein in der Landschaft. Untergrenze setzen
   und das Strecken der Tracks NICHT abschalten. */
.epj-buehne{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:64px;
  padding:0 var(--inset)}
.epj-band{position:sticky;top:96px;align-self:start;display:grid;
  grid-template-columns:1fr 28px;gap:14px;align-items:stretch}
.epj-bilder{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-flaeche);
  background:var(--mint)}
.epj-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity var(--t-lang) var(--ease)}
.epj-bild.an{opacity:1}
.epj-achse{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;padding:6px 0}
.epj-achse::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hairline)}
.epj-punkt{position:relative;width:9px;height:9px;border-radius:var(--r-pill);background:#fff;
  border:1.5px solid var(--gruen);opacity:.35;transition:opacity var(--t-mittel) var(--ease),
  transform var(--t-mittel) var(--ease)}
.epj-punkt.an{opacity:1;transform:scale(1.45);background:var(--gruen)}
.epj-punkt-offen{border-style:dashed}
.epj-bandzeile{grid-column:1/-1;color:var(--muted);margin-top:12px;min-height:1.2em}

.epj-stationen{list-style:none;margin:0;padding:0;counter-reset:epj}
.epj-station{position:relative;padding:34px 0 34px 46px;border-top:1px solid var(--hairline)}
.epj-station:first-child{border-top:0;padding-top:6px}
.epj-station::before{counter-increment:epj;content:counter(epj,decimal-leading-zero);
  position:absolute;left:0;top:38px;font-family:'Space Grotesk',sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.14em;color:var(--gruen);font-variant-numeric:tabular-nums}
.epj-station:first-child::before{top:10px}
.epj-wann{color:var(--muted)}
.epj-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;font-size:clamp(20px,2.2vw,29px);line-height:1.05;color:var(--tinte);
  margin:8px 0 12px}
.epj-text{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:16.5px;line-height:1.6;
  color:var(--text);max-width:60ch;margin-bottom:10px}
.epj-rolle{display:block;color:var(--gruen);margin-bottom:5px}
.epj-gilt{color:var(--muted)}

/* Der Rollenwechsel: Reihenfolge und Gewichtung, nie Sichtbarkeit.
   Die zweite Seite bleibt lesbar (--sekundaer statt --muted, damit
   der Kontrast über 4,5:1 bleibt) und ist weiter fokussierbar. */
.epj-station{display:flex;flex-direction:column}
.epj-wann{order:1}.epj-titel{order:2}
.epj-neu{order:3}.epj-dabei{order:4}.epj-beide{order:3}.epj-gilt{order:5}
[data-rolle="dabei"] .epj-neu{order:4}
[data-rolle="dabei"] .epj-dabei{order:3}
/* Der Weg aus der Station heraus: eigene Zeile unter dem Satz, damit er
   nicht im Fließtext untergeht — und in der Nebenrolle schwächer wie ihr
   Text, aber weiter lesbar und fokussierbar (wie bei den Programmkarten). */
/* display:block statt des geerbten inline-flex: Im Flexkasten wird der
   Text zu einem eigenen Element, und auf dem Handy stand der Pfeil dann
   NEBEN dem umgebrochenen Text statt hinter dem letzten Wort. Als Block
   fließen beide zusammen — der Pfeil braucht dafür inline-block, sonst
   greift seine Hover-Bewegung nicht mehr. */
.epj-tlink{display:block;margin-top:10px;font-size:11.5px}
.epj-tlink .pfeil{display:inline-block}
[data-rolle="neu"] .epj-dabei .epj-tlink,
[data-rolle="dabei"] .epj-neu .epj-tlink{font-size:11px;color:var(--sekundaer)}
.epj-station .epj-text{transition:opacity var(--t-mittel) var(--ease)}
[data-rolle="neu"] .epj-dabei,[data-rolle="dabei"] .epj-neu{font-size:15px;color:var(--sekundaer)}
[data-rolle="neu"] .epj-dabei .epj-rolle,[data-rolle="dabei"] .epj-neu .epj-rolle{color:var(--muted)}

.epj-offen{background:var(--mint);margin-top:20px;padding:30px 28px;border-top:0}
.epj-offen::before{display:none}
.epj-offen-btn{order:6;align-self:start;margin-top:14px}

@media (max-width:900px){
  .epj-buehne{grid-template-columns:1fr;gap:24px}
  /* Unter 900 px liegt das Band quer über dem Text, nicht daneben. */
  .epj-band{position:sticky;top:64px;grid-template-columns:1fr;z-index:2;background:#fff;
    padding-bottom:10px}
  .epj-bilder{aspect-ratio:16/7}
  .epj-achse{flex-direction:row;justify-content:space-between;padding:10px 2px 0}
  .epj-achse::before{top:auto;bottom:4px;left:0;right:0;width:auto;height:1px}
  .epj-bandzeile{margin-top:6px}
}
@media (max-width:560px){
  .epj-station{padding-left:34px}
  .epj-offen{padding:24px 20px}
}

/* ============================================================
   02 — DAS SCHARNIER UND DER UMSCHALTER
   ============================================================ */
.ep-scharnier{background:var(--tanne);color:#fff;padding:var(--luft) var(--inset)}
.ep-scharnier-inhalt{max-width:920px}
.ep-scharnier-satz{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.035em;line-height:1.02;font-size:clamp(26px,4vw,52px);color:var(--lime)}
.ep-scharnier-sub{color:rgba(255,255,255,.72);margin-top:16px}

.ep-schalter{display:inline-flex;gap:8px;margin-top:30px;padding:6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.ep-schalter-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border-radius:var(--r-pill);
  padding:12px 22px;font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72);cursor:pointer;
  transition:background var(--t-schnell) var(--ease),color var(--t-schnell) var(--ease)}
.ep-schalter-btn:hover{color:#fff}
.ep-schalter-btn.an{background:var(--lime);color:var(--pine)}
.ep-schalter-btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.ep-haken{font-size:12px;line-height:1;min-width:9px}

/* Die klebende Leiste: Duplikat für Maus und Finger. Für Tastatur
   und Screenreader zählt die Gruppe im Scharnier — sonst stünde
   derselbe Umschalter zweimal im Tab-Lauf. */
/* Die Leiste klebt am UNTEREN Rand — auf jeder Breite. Oben lag sie
   unter der Kopfzeile (die klebt selbst, z-index 100) und schob sich
   zwischen Wappen und Startzeiten-Knopf; unten stört sie nichts und
   liegt auf dem Handy im Daumenbereich. */
/* `width:max-content` ist Pflicht: Ein festes Element mit `left:50%`
   darf nur die HALBE Fensterbreite breit werden — die Beschriftungen
   brachen deshalb am Telefon auf drei Zeilen um, und aus der aktiven
   Pille wurde ein Kreis. */
.ep-schalter-klebend{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:40;
  width:max-content;max-width:calc(100vw - 24px);
  background:rgba(11,65,43,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.22);margin:0;box-shadow:var(--schatten-plakette);
  opacity:0;transition:opacity var(--t-mittel) var(--ease)}
.ep-schalter-klebend.sichtbar{opacity:1}
.ep-schalter-klebend.weg{opacity:0;pointer-events:none}
/* Unter 900 px klebt die Schnellansicht (Webcam / Startzeiten /
   Aktuelles) selbst am unteren Rand — 56 px hoch plus Safe-Area,
   und mit z-index 105 LIEGT SIE OBEN. Der Umschalter verschwand
   deshalb halb dahinter. Er muss über ihr stehen; dasselbe Maß
   nutzt schon `--ko-schnell` in kooperationen.css. */
@media (max-width:900px){
  .ep-schalter-klebend{bottom:calc(56px + env(safe-area-inset-bottom) + 12px)}
}
@media (max-width:560px){
  .ep-schalter-klebend{bottom:calc(56px + env(safe-area-inset-bottom) + 10px)}
  .ep-schalter-btn{padding:11px 16px;font-size:11.5px}
}

/* ============================================================
   03 — DIE VIER PROGRAMMKARTEN
   Beide Rollen immer im DOM; der Umschalter dreht die Ordnung.
   ============================================================ */
.eprollen{padding-bottom:var(--luft)}
.epr-karten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:0 var(--inset)}
.epr-karte{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--linie-karte);
  border-radius:var(--r-flaeche);padding:26px 24px 28px}
.epr-karte h3{order:1}
.epr-karte h3 a{color:var(--tinte)}
.epr-karte h3 a:hover{color:var(--gruen)}
.epr-neu{order:2}.epr-dabei{order:3}
[data-rolle="dabei"] .epr-neu{order:3}
[data-rolle="dabei"] .epr-dabei{order:2}
.epr-seite{display:flex;flex-direction:column;gap:8px}
.epr-rolle{color:var(--gruen)}
.epr-text{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:16px;line-height:1.55;
  color:var(--text)}
/* Die hintere Seite bleibt lesbar: kleinere Stufe, --sekundaer statt
   --muted (4,5:1 bleibt gewahrt), aber kein display:none. */
[data-rolle="neu"] .epr-dabei,[data-rolle="dabei"] .epr-neu{padding-top:14px;border-top:1px solid var(--hairline)}
[data-rolle="neu"] .epr-dabei .epr-text,[data-rolle="dabei"] .epr-neu .epr-text{font-size:14.5px;color:var(--sekundaer)}
[data-rolle="neu"] .epr-dabei .epr-rolle,[data-rolle="dabei"] .epr-neu .epr-rolle{color:var(--muted)}
[data-rolle="neu"] .epr-dabei .tlink,[data-rolle="dabei"] .epr-neu .tlink{font-size:11px;color:var(--sekundaer)}

@media (max-width:1100px){.epr-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.epr-karten{grid-template-columns:1fr}}

/* ============================================================
   04 — PATENSCHAFT
   ============================================================ */
.eppate{padding-bottom:var(--luft)}
.epp-zeile{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;
  padding:0 var(--inset) var(--luft-s)}
.epp-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.epp-liste li{position:relative;padding-left:22px}
.epp-liste li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;
  background:var(--gruen)}
.epp-abschluss{margin-top:22px}
.epp-zahlen{display:flex;flex-direction:column;gap:26px;align-self:start}
.epp-zahl{border-top:1px solid var(--hairline);padding-top:14px}
.epp-zahl .t-zahl{display:block;font-size:clamp(52px,7vw,96px);line-height:.9;color:var(--tinte)}
.epp-zahl-label{display:block;color:var(--muted);margin-top:8px}
@media (max-width:900px){
  .epp-zeile{grid-template-columns:1fr;gap:32px}
  .epp-zahlen{flex-direction:row;gap:40px}
  .epp-zahl{flex:1}
}

/* ============================================================
   05 — MEMBER´S & FRIEND´S (die einzige Mint-Sektion)
   ============================================================ */
.epfreunde{background:var(--mint);padding-bottom:var(--luft)}
.epf-zeile{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;
  padding:0 var(--inset)}
.epf-modal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.epf-modal li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.epf-nr{font-size:15px;color:var(--gruen);padding-top:2px}
.epf-kasten{background:#fff;border:1px solid var(--linie-karte);border-radius:var(--r-flaeche);
  padding:24px 24px 26px;align-self:start;display:flex;flex-direction:column;gap:10px}
.epf-kasten-titel{color:var(--gruen)}
.epf-gutschein{padding:var(--luft-s) var(--inset) 0;max-width:76ch}
@media (max-width:900px){.epf-zeile{grid-template-columns:1fr;gap:28px}}

/* ============================================================
   06 — MITGLIEDER WERBEN MITGLIEDER (dunkel)
   ============================================================ */
.epwerben{background:var(--tanne);color:#fff;padding-bottom:var(--luft)}
.epwerben .kapitel-kopf h2{color:#fff}
.epw-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0 var(--inset)}
.epw-karte{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-flaeche);padding:28px 26px 30px}
.epw-betrag{display:flex;align-items:baseline;gap:6px;font-size:clamp(40px,5vw,68px);line-height:1;
  color:var(--lime)}
.epw-einheit{font-size:.42em;letter-spacing:0}
.epw-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-size:19px;color:#fff;margin:16px 0 8px}
.epw-text{color:rgba(255,255,255,.72)}
.epw-exklusiv{padding:var(--luft-s) var(--inset) 0;font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--lime);max-width:70ch}
.epw-unten{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;
  padding:var(--luft-s) var(--inset) 0}
.epw-bedingungen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.epw-bedingungen li{position:relative;padding-left:22px;color:rgba(255,255,255,.8)}
.epw-bedingungen li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;
  background:var(--lime)}
.epw-pdf{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:24px;
  align-self:start;display:flex;flex-direction:column;gap:16px;align-items:start}
.epw-pdf .t-text{color:rgba(255,255,255,.82)}
@media (max-width:900px){
  .epw-karten{grid-template-columns:1fr}
  .epw-unten{grid-template-columns:1fr;gap:28px}
}

/* ============================================================
   07 — ROOKIE DES JAHRES
   ============================================================ */
.eprookie{padding-bottom:var(--luft)}
.epk-kopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;padding:0 var(--inset) var(--luft-s)}
.epk-person{display:flex;align-items:center;gap:14px}
.epk-portrait{width:56px;height:56px;object-fit:cover;border-radius:var(--r-pill)}
.epk-plakette{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;color:var(--gruen)}
.epk-plakette svg{position:absolute;inset:0;width:100%;height:100%}
.epk-init{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:.02em;
  color:var(--tinte)}
.epk-person-text{display:flex;flex-direction:column;gap:3px}
.epk-person-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--tinte)}
.epk-person-rolle{color:var(--muted)}
.epk-voraussetzung{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.01em;color:var(--gruen)}
.epk-hcpi{font-size:15px;font-weight:300;color:var(--sekundaer);flex-basis:100%;max-width:70ch}
.epk-angebote{list-style:none;margin:0;padding:0 var(--inset);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.epk-angebot{padding:24px 0;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px;
  align-items:start}
.epk-angebot-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-size:19px;color:var(--tinte)}
.epk-punkte{padding:var(--luft-s) var(--inset) 0;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:15px;color:var(--gruen)}
@media (max-width:760px){.epk-angebote{grid-template-columns:1fr}}

/* ============================================================
   DIE FORMULARE — Eigendesign, keine nativen Controls
   Chip-Reihen sind echte <fieldset> mit <legend>; die Radios und
   Checkboxen sind visuell versteckt, aber bedienbar und tragen
   ihren Fokusring aufs Label. outline:none gibt es hier nirgends.
   ============================================================ */
.ep-form-wrap{margin:var(--luft-s) var(--inset) 0;padding:34px 34px 38px;background:var(--mint);
  border-radius:var(--r-flaeche)}
.ep-form-hell{background:#fff;border:1px solid var(--linie-karte)}
.ep-form-dunkel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.ep-form-dunkel .t-titel,.ep-form-dunkel .ep-label,.ep-form-dunkel .ep-check span{color:#fff}
.ep-form-dunkel .ep-form-lead,.ep-form-dunkel .ep-form-hinweis,.ep-form-dunkel .ep-form-fuss,
.ep-form-dunkel .ep-feld-hinweis{color:rgba(255,255,255,.72)}
.ep-form-dunkel .ep-input{background:rgba(7,48,31,.55);border-color:rgba(255,255,255,.22);color:#fff}
.ep-form-dunkel .ep-chip span,.ep-form-dunkel .ep-wahl-karte span{background:rgba(7,48,31,.45);
  border-color:rgba(255,255,255,.22);color:#fff}
.ep-form-dunkel .ep-chip input:checked+span,.ep-form-dunkel .ep-wahl-karte input:checked+span{
  background:var(--lime);border-color:var(--lime);color:var(--pine)}
.ep-form-dunkel .ep-wahl-karte strong{color:#fff}
.ep-form-dunkel .ep-wahl-karte em{color:var(--lime)}
.ep-form-dunkel .ep-wahl-karte small{color:rgba(255,255,255,.72)}
.ep-form-dunkel .ep-wahl-karte input:checked+span strong,
.ep-form-dunkel .ep-wahl-karte input:checked+span em{color:var(--pine)}
.ep-form-dunkel .ep-wahl-karte input:checked+span small{color:rgba(7,48,31,.82)}
.ep-form-dunkel .ep-halb{color:var(--lime)}
.ep-form-dunkel .ep-pflicht{color:var(--lime)}
.ep-form-dunkel .ep-optional{color:rgba(255,255,255,.6)}
.ep-form-dunkel .ep-check input{accent-color:var(--lime)}
.ep-form-dunkel a{color:var(--lime)}

.ep-form-lead{margin:8px 0 0;max-width:62ch}
.ep-form-hinweis{margin:14px 0 0;font-size:13.5px;color:var(--sekundaer)}
.ep-form-hinweis a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}
.ep-form-fuss{margin-top:14px;max-width:62ch}
.ep-feld-hinweis{margin-top:10px}

.ep-flash{margin-top:18px;padding:14px 17px;border-radius:var(--r-karte);font-size:15px;line-height:1.5}
.ep-flash.ok{background:#dff0e2;color:#17542c;border-left:4px solid var(--gruen)}
.ep-flash.err{background:#fbe4e2;color:#8c2f28;border-left:4px solid #c0483c}

.ep-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;max-width:900px}
.ep-breit{grid-column:1/-1}
.ep-feld{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0;min-width:0}
.ep-label{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nav);padding:0}
.ep-pflicht{color:var(--gruen)}
.ep-optional{color:var(--muted);letter-spacing:.08em}
.ep-input{width:100%;padding:13px 15px;font-family:'Hanken Grotesk',sans-serif;font-size:16px;
  font-weight:400;color:var(--tinte);background:#fff;border:1.5px solid #cdd8cf;
  border-radius:var(--r-karte);transition:border-color var(--t-schnell) var(--ease)}
.ep-input:focus-visible{outline:3px solid var(--gruen);outline-offset:2px;border-color:var(--gruen)}
textarea.ep-input{resize:vertical;min-height:96px}

/* Große Schaltflächen im Kartenstil statt eines Pulldowns */
.ep-wahl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ep-wahl-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.ep-wahl-karte{position:relative;display:block}
.ep-wahl-karte input{position:absolute;opacity:0;width:1px;height:1px}
.ep-wahl-karte span{display:flex;flex-direction:column;gap:5px;height:100%;padding:16px 18px;
  background:#fff;border:1.5px solid #cdd8cf;border-radius:var(--r-karte);cursor:pointer;
  transition:border-color var(--t-schnell) var(--ease),background var(--t-schnell) var(--ease)}
.ep-wahl-karte strong{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:-.01em;color:var(--tinte)}
.ep-wahl-karte em{font-family:'Space Grotesk',sans-serif;font-style:normal;font-size:12px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gruen)}
.ep-wahl-karte small{font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;font-weight:300;
  line-height:1.45;color:var(--sekundaer)}
.ep-wahl-karte input:checked+span{border-color:var(--gruen);background:#f2f8f3}
.ep-wahl-karte input:checked+span strong{color:var(--gruen)}
.ep-wahl-karte input:focus-visible+span{outline:3px solid var(--gruen);outline-offset:2px}
@media (max-width:700px){.ep-wahl,.ep-wahl-drei{grid-template-columns:1fr}}

/* Chip-Reihen (echte Checkbox-/Radio-Gruppen im Eigendesign) */
.ep-chips{display:flex;flex-wrap:wrap;gap:9px}
.ep-chip{position:relative;display:inline-flex}
.ep-chip input{position:absolute;opacity:0;width:1px;height:1px}
.ep-chip span{display:inline-flex;align-items:center;padding:10px 18px;background:#fff;
  border:1.5px solid #cdd8cf;border-radius:var(--r-pill);cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:var(--nav);transition:background var(--t-schnell) var(--ease),border-color var(--t-schnell) var(--ease),color var(--t-schnell) var(--ease)}
.ep-chip input:checked+span{background:var(--gruen);border-color:var(--gruen);color:#fff}
.ep-chip input:focus-visible+span{outline:3px solid var(--gruen);outline-offset:2px}

.ep-check{display:flex;gap:12px;align-items:start;font-family:'Hanken Grotesk',sans-serif;
  font-size:14.5px;font-weight:300;line-height:1.5;color:var(--text);cursor:pointer}
.ep-check input{width:20px;height:20px;flex:none;accent-color:var(--gruen);margin-top:2px}
.ep-check input:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}
.ep-check a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}
.ep-submit{justify-self:start;grid-column:1/-1}
.ep-hp{position:absolute;left:-9999px;top:-9999px}
.ep-halb{color:var(--gruen);font-weight:600}

@media (max-width:700px){
  .ep-form{grid-template-columns:1fr}
  .ep-form-wrap{margin:var(--luft-s) 0 0;padding:28px var(--inset) 32px;border-radius:0}
}

/* ============================================================
   DIE GEERBTEN BLÖCKE: prdokumente und prcta
   Beide Blocktypen werden hier wiederverwendet, ihre Stile stehen
   aber je Seite in deren eigener CSS-Datei (platzregeln.css,
   schnuppergolf.css, platzreife.css). Ohne diese Zeilen liefen die
   Dokumentenkarten als randloser Fließtext am linken Rand entlang und
   der Abschluss-CTA verlor seine dunkle Fläche. Wortgleich übernommen,
   nur das Kartenraster ist auto-fit statt zweispaltig — hier sind es
   drei Karten.
   ============================================================ */
.prdokumente{padding-bottom:var(--luft-s)}
.prd-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
  padding:0 var(--inset)}
.prd-karte{border:1px solid var(--linie-karte);border-radius:var(--r-flaeche);padding:28px 28px 26px;
  display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.prd-karte h3{color:var(--tinte);font-family:'Space Grotesk',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(20px,2vw,27px);line-height:1}
.prd-fakten{list-style:none;padding:0;display:flex;flex-direction:column}
.prd-fakten li{font-size:15.5px;padding:10px 0;border-bottom:1px solid var(--linie-karte)}
.prd-fakten li:last-child{border-bottom:0}
@media (max-width:860px){ .prd-karten{grid-template-columns:1fr} }

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

/* ============================================================
   FOKUS
   seite.css setzt global einen Lime-Fokusring. Auf den dunklen
   Flächen (Scharnier, Werbeprämien) ist das richtig; auf Weiß hat
   Lime nur rund 1,9:1 gegen den Grund und wäre kaum zu sehen. Die
   hellen Bedienteile bekommen deshalb Grün — kein outline:none, nur
   eine andere Farbe.
   ============================================================ */
.epr-karte h3 a:focus-visible,.epk-angebot .tlink:focus-visible,
.epp-abschluss .tlink:focus-visible,.epf-kasten .tlink:focus-visible,
.epj-offen-btn:focus-visible,.ep-form-hinweis a:focus-visible{
  outline:3px solid var(--gruen);outline-offset:3px}

/* ============================================================
   MEIN BEREICH — Patenschafts-Kachel und Patenboard
   Dieselben Regeln: Fortschritt als Text, jeder Zustand mit
   einem Wort, echte Formular-Buttons ohne JavaScript.
   ============================================================ */
.ep-board-karte{display:flex;flex-direction:column;gap:14px}
.ep-fortschritt{display:flex;align-items:baseline;gap:10px}
.ep-fortschritt .t-zahl{font-size:30px;color:var(--gruen)}
.ep-fortschritt-balken{flex:1;height:6px;border-radius:var(--r-pill);background:var(--linie-karte);
  overflow:hidden}
.ep-fortschritt-balken i{display:block;height:100%;background:var(--gruen)}
.ep-gesuch{border-top:1px solid var(--hairline);padding:16px 0;display:flex;flex-direction:column;gap:8px}
.ep-gesuch:first-of-type{border-top:0}
.ep-gesuch-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--tinte)}
.ep-gesuch-meta{font-size:13.5px;color:var(--muted)}
.ep-gesuch form{margin-top:4px}
.ep-zustand{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);padding:5px 13px;
  background:#eef1ee;color:var(--sekundaer);font-family:'Space Grotesk',sans-serif;font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;align-self:start}
.ep-zustand.an{background:#e6f4e8;color:#17542c}

/* ============================================================
   BEWEGUNG — und ihr vollständiger Ersatz
   Bei prefers-reduce-motion steht das Jahresband als Liste mit
   einem festen Bild, der Rollenwechsel springt, die Zähler
   zeigen sofort ihren Endwert.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .epj-band{position:static}
  .epj-bild{opacity:0;transition:none}
  .epj-bild:first-child{opacity:1}
  .epj-punkt{transition:none}
  .epr-karte,.epj-station .epj-text{transition:none}
  .ep-schalter-klebend{display:none !important}
}