/* assets/startseite.css - oeffentliche Startseite index.php
 * ---------------------------------------------------------------------------
 * START-01, Umsetzungsphase 1 (29.09.2026): Navigation, Hero, Vertrauensleiste
 * und Trainingsablauf neu; Phase 2 (04.10.2026): Turnierbereich mit Live-
 * Buehne und Anmeldung; Phase 3 (04.10.2026): Vereinsleben, Verein, Kasse,
 * QR am Tisch und Vereinsseite; Phase 4 (04.10.2026): der untere Bereich -
 * offene Anmeldungen, Live-Turniere, Vereinsfinder, Schlussaufruf, Fusszeile -
 * ersetzt den alten Erklaer-Katalog samt seinem CSS-Bestand (.lp-*).
 *
 * Diese Datei ersetzt fuer index.php die Stylesheets assets/admin.css und
 * assets/auth.css (START-01, Entscheid E1). Sie setzt deshalb alle
 * Grundwerte selbst: box-sizing, Schrift, Groesse, Zeilenhoehe, Farben,
 * Ueberschriften, Links, Buttons, Fokus. Die graue Grossschreibung der
 * Ueberschriften aus admin.css (Befund B4) wird ausdruecklich NICHT
 * uebernommen.
 *
 * Keine externen Schriften, kein JavaScript, keine Frameworks.
 * Eingebunden ohne Versionsparameter wie alle Stylesheets im Repo;
 * Frische regelt die .htaccess im Repo-Root (no-cache fuer .css).
 * ------------------------------------------------------------------------- */

:root{
  --st-ink:#0f172a;          /* Anthrazit-Dunkelblau: Text, dunkle Flaechen */
  --st-ink-2:#1e293b;
  --st-tief:#0b1220;         /* Hero-Grund, eine Stufe tiefer */
  --st-orange:#ff7a00;       /* DartHub-Orange: Akzent und Hauptaktion */
  --st-orange-d:#e96d00;
  --st-orange-text:#c2410c;  /* Orange als Schrift auf hellem Grund (5.2:1) */
  --st-bg:#f4f6f9;
  --st-papier:#ffffff;
  --st-linie:#e3e8ef;
  --st-text:#0f172a;
  --st-leise:#475569;        /* Nebentext auf hell, 7:1 */
  --st-hell:#f1f5f9;         /* Text auf dunkel */
  --st-hell-2:#cbd5e1;       /* Nebentext auf dunkel, 12:1 */
  --st-hell-3:#94a3b8;       /* Hinweise auf dunkel, 7:1 */
  --st-schrift:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --st-breite:1180px;
  --st-rand:clamp(16px,4vw,32px);
  --st-radius:14px;
}

/* ---------------------------------------------------------------- Basis --- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--st-bg);color:var(--st-text);
  font-family:var(--st-schrift);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3{margin:0;color:inherit;line-height:1.15;font-weight:800;
  text-transform:none;letter-spacing:-.015em;text-wrap:balance;}
p{margin:0;}
a{color:var(--st-orange-text);text-underline-offset:.18em;}
/* Aus dem frueheren Bestand uebernommen (Phase 4): Links sind nur dort unterstrichen,
   wo eine Regel es sagt (Hero-Zeile, Sprunglinks). */
.lp a{text-decoration:none;}
img{max-width:100%;}
::selection{background:rgba(255,122,0,.28);color:inherit;}
:focus-visible{outline:3px solid var(--st-orange-text);outline-offset:3px;border-radius:6px;}
.st-dunkel :focus-visible{outline-color:var(--st-orange);}
.st-nur-vorleser{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.st-weiter{position:absolute;left:var(--st-rand);top:-60px;z-index:60;background:var(--st-orange);
  color:var(--st-ink);font-weight:700;padding:10px 16px;border-radius:10px;text-decoration:none;}
.st-weiter:focus{top:10px;}

/* Sprungziele nicht unter der festen Kopfzeile verstecken */
[id]{scroll-margin-top:84px;}

.st-wrap{width:100%;max-width:calc(var(--st-breite) + 2 * var(--st-rand));margin:0 auto;padding:0 var(--st-rand);}

/* -------------------------------------------------------------- Buttons --- */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:0 26px;border-radius:12px;border:2px solid transparent;font:inherit;font-size:17px;
  font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.st-btn svg{flex:0 0 auto;width:18px;height:18px;}
/* Dunkle Schrift auf Orange: 6.8:1. Weiss auf Orange kaeme nur auf 2.6:1. */
.st-btn--haupt{background:var(--st-orange);color:var(--st-ink);}
.st-btn--haupt:hover{background:#ff8f26;}
.st-btn--neben{background:transparent;color:var(--st-hell);border-color:rgba(241,245,249,.42);}
.st-btn--neben:hover{background:rgba(241,245,249,.08);border-color:rgba(241,245,249,.75);}
/* Phase 4: dunkler Rahmenknopf auf hellem Grund, kleine Groesse fuer Listenzeilen */
.st-btn--rahmen{background:transparent;color:var(--st-ink);border-color:rgba(15,23,42,.28);}
.st-btn--rahmen:hover{background:rgba(15,23,42,.05);border-color:var(--st-ink);}
.st-btn--klein{min-height:44px;padding:0 18px;font-size:15px;border-radius:10px;white-space:nowrap;}

/* ------------------------------------------------------- Konto-Einstieg --- */
.st-einstieg{background:#fff;padding:clamp(44px,6vw,76px) 0;border-bottom:1px solid var(--st-linie);}
.st-einstieg__kopf{max-width:770px;margin:0 auto 30px;text-align:center;}
.st-einstieg__eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--st-orange-text);margin-bottom:12px;}
.st-einstieg__kopf h2{font-size:clamp(1.8rem,3.3vw,2.7rem);margin-bottom:14px;}
.st-einstieg__kopf>p:last-child{color:var(--st-leise);font-size:clamp(1rem,1.5vw,1.125rem);}
.st-einstieg__karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.st-einstieg__karte{border:1px solid var(--st-linie);border-radius:var(--st-radius);padding:26px;background:var(--st-bg);}
.st-einstieg__nummer{display:inline-block;color:var(--st-orange-text);font-weight:800;font-size:14px;letter-spacing:.07em;margin-bottom:15px;}
.st-einstieg__karte h3{font-size:clamp(1.1rem,1.6vw,1.35rem);margin-bottom:9px;}
.st-einstieg__karte p{color:var(--st-leise);font-size:15px;}
.st-einstieg__aktion{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:28px;}
.st-einstieg__aktion>span{font-size:14px;color:var(--st-leise);}
@media(max-width:720px){
  .st-einstieg__karten{grid-template-columns:1fr;gap:12px;}
  .st-einstieg__karte{padding:19px 21px;}
  .st-einstieg__nummer{margin-bottom:8px;}
  .st-einstieg__aktion{flex-direction:column;text-align:center;gap:12px;}
  .st-einstieg__aktion .st-btn{width:100%;}
}

/* ------------------------------------------------------------ Kopfzeile --- */
.st-kopf{position:sticky;top:0;z-index:40;background:var(--st-ink);
  border-bottom:1px solid rgba(148,163,184,.16);padding-top:env(safe-area-inset-top);}
.st-kopf .st-wrap{display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:68px;}
.st-logo{display:inline-flex;align-items:center;flex:0 0 auto;border-radius:8px;}
/* Korrektur 29.09.2026: Logo rund 19 % groesser (42 -> 50 px), Kopfzeile bleibt 68 px */
.st-logo img{display:block;height:50px;width:auto;}
.st-nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.st-nav__inhalt{display:flex;align-items:center;gap:2px;margin-right:clamp(4px,1.4vw,18px);}
.st-nav a{color:var(--st-hell);text-decoration:none;font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:9px;white-space:nowrap;}
.st-nav a:hover{background:rgba(241,245,249,.08);}
.st-nav__inhalt a:hover{text-decoration:underline;text-decoration-color:var(--st-orange);
  text-decoration-thickness:2px;background:none;}
.st-nav__wer{color:var(--st-hell-3);font-size:14px;margin-right:6px;white-space:nowrap;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;}
.st-nav__wer strong{color:var(--st-hell-2);font-weight:600;}
.st-nav a.st-nav__knopf{background:var(--st-orange);color:var(--st-ink);font-weight:700;
  padding:0 16px;margin-left:6px;border-radius:10px;}
.st-nav a.st-nav__knopf:hover{background:#ff8f26;}

/* ----------------------------------------------------------------- Hero --- */
.st-hero{position:relative;overflow:hidden;color:var(--st-hell);
  background:
    radial-gradient(900px 520px at 82% 0%,rgba(42,56,82,.95) 0%,transparent 62%),
    linear-gradient(170deg,var(--st-ink) 0%,var(--st-tief) 100%);}
/* Die Zielscheibe aus der bisherigen Startseite - leise, hinter der Buehne */
.st-hero::before{content:"";position:absolute;right:-220px;top:50%;width:760px;height:760px;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;opacity:.55;
  background:repeating-radial-gradient(circle,transparent 0 34px,rgba(148,163,184,.12) 34px 35px);}
.st-hero .st-wrap{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(36px,5vw,72px);align-items:center;
  padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(56px,8vw,112px);}
.st-hero h1{font-size:clamp(1.875rem,.55rem + 3.7vw,3.625rem);line-height:1.04;
  letter-spacing:-.03em;font-weight:850;color:#fff;margin-bottom:22px;}
.st-hero h1 span{display:block;}
.st-hero h1 .st-akzent{color:var(--st-orange);}
.st-hero__unter{font-size:clamp(1.0625rem,.95rem + .45vw,1.25rem);line-height:1.55;
  color:var(--st-hell-2);max-width:34em;margin-bottom:32px;}
.st-hero__aktionen{display:flex;flex-wrap:wrap;gap:12px;}
.st-hero__lokal{margin-top:22px;font-size:15px;color:var(--st-hell-3);}
.st-hero__lokal a,.lp .st-hero__lokal a{color:#ffd9b0;font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(255,217,176,.55);}
.st-hero__lokal a:hover{color:#fff;}

/* -------------------------------------------------------- Bildplaetze --- *
 * Jeder Bildplatz (.st-ph) bekommt sein Seitenverhaeltnis vom Rahmen; das
 * Bild fuellt ihn mit object-fit:cover, der Ausschnitt haengt an
 * --st-bild-pos (object-position) je Bildplatz. Die Platzhalter aus Phase 1
 * sind seit dem 01.10.2026 alle durch echtes Material ersetzt und entfernt. */
.st-ph{margin:0;position:relative;}
.st-ph picture{display:block;width:100%;height:100%;border-radius:inherit;}
.st-ph img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--st-bild-pos,50% 50%);border-radius:inherit;}
/* Echtes Trainingsfoto im Hero (01.10.2026): Foto und Rahmen sind beide 3:2,
   es wird nichts beschnitten. Der Ausschnitt liegt trotzdem fest - Boards und
   Fernseher stehen im oberen Drittel, der Boden unten ist entbehrlich. */
.st-ph--hero-foto{--st-bild-pos:50% 35%;overflow:hidden;background:#131d30;}
/* Echte Screenshots (01.10.2026) - Ausschnitte je Bildplatz:
   hero-tv       Scoreboard 1.80 im 16:9-Rahmen, mittig (1 % Beschnitt)
   hero-tablet   Eingabemaske hochkant im 4:3-Rahmen: oben - Namen, 501, Aufnahmen
   ablauf-tablet dieselbe Maske, unten - Eingabefeld und Tastatur
   ablauf-tv     Aufruf 1.85 im 16:9-Rahmen, leicht links, damit Titel und QR-Code bleiben
   handy-live    echter Handybildschirm 786x1285 - der Rahmen uebernimmt dessen
                 Verhaeltnis, damit die Restpunkte am rechten Rand nicht abgeschnitten werden */
.st-ph--bild{overflow:hidden;background:#131d30;}
.st-ph--hero-tv{--st-bild-pos:50% 50%;}
.st-ph--hero-tablet{--st-bild-pos:50% 7%;}
.st-ph--ablauf-tablet{--st-bild-pos:50% 92%;}
.st-ph--ablauf-tv{--st-bild-pos:40% 50%;}
.st-ph--ablauf-admin{--st-bild-pos:50% 50%;background:#f8fafc;} /* Ausschnitte sind exakt 16:10, kein CSS-Beschnitt */
.st-geraet--handy .st-ph.st-ph--handy-live{aspect-ratio:786/1285;--st-bild-pos:50% 0%;}

/* Rahmen: echtes Foto, Fernseher, Tablet, Notebook, Smartphone */
.st-ph--foto{aspect-ratio:3/2;border-radius:var(--st-radius);
  box-shadow:0 24px 60px rgba(2,6,23,.55);}
.st-geraet{margin:0;background:#05080f;border:1px solid #2b3647;
  box-shadow:0 18px 44px rgba(2,6,23,.6),0 2px 0 rgba(255,255,255,.04) inset;}
.st-geraet .st-ph{border-radius:4px;}
.st-geraet--tv{padding:2.4%;border-radius:12px;}
.st-geraet--tv .st-ph{aspect-ratio:16/9;}
.st-geraet--tablet{padding:5%;border-radius:20px;}
.st-geraet--tablet .st-ph{aspect-ratio:4/3;border-radius:6px;}
.st-geraet--notebook{padding:2.6% 2.6% 0;border-radius:14px 14px 0 0;border-bottom:0;}
.st-geraet--notebook .st-ph{aspect-ratio:16/10;border-radius:4px 4px 0 0;}
.st-geraet__fuss{display:block;height:14px;margin:0 -7%;border-radius:0 0 14px 14px;
  background:linear-gradient(#2b3647,#141c2b);}
.st-geraet--handy{padding:9px;border-radius:30px;max-width:230px;margin-inline:auto;}
.st-geraet--handy .st-ph{aspect-ratio:9/17;border-radius:22px;}

/* Die Hero-Buehne: Foto aus dem Lokal, davor Fernseher und Tablet */
/* Echtes Foto (01.10.2026): Fernseher und Tablet sitzen so, dass beide Boards
   und beide Spieler frei bleiben - der Fernseher-Rahmen ragt nur noch ueber
   die rechte obere Ecke (Decke und rechter Original-Fernseher), das Tablet
   nur ueber den Boden. Bühnenhoehe praktisch unveraendert (83 -> 84 % der Breite). */
.st-buehne{position:relative;padding:14% 0 14% 0;}
.st-buehne .st-ph--foto{width:84%;}
.st-buehne .st-geraet--tv{position:absolute;top:0;right:0;width:44%;}
.st-buehne .st-geraet--tablet{position:absolute;bottom:0;left:6%;width:34%;}

/* ----------------------------------------------------- Vertrauensleiste --- */
.st-vertrauen{background:var(--st-bg);border-bottom:1px solid var(--st-linie);}
.st-vertrauen ul{list-style:none;margin:0;padding:22px 0;display:grid;
  grid-template-columns:repeat(4,auto);justify-content:space-between;gap:14px 28px;}
.st-vertrauen li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--st-text);}
.st-vertrauen svg{flex:0 0 auto;width:22px;height:22px;color:var(--st-orange-text);}

/* -------------------------------------------------------- Trainingsabend --- */
/* Korrektur 29.09.2026: der Abschnitt wird 15-20 % kompakter - engere Abstaende,
   kleinere Geraete; Mittellinie, Nummern und Seitenwechsel bleiben. */
.st-ablauf{background:var(--st-papier);padding:clamp(48px,6vw,88px) 0;}
.st-ablauf__kopf{max-width:720px;margin-bottom:clamp(28px,4vw,52px);}
.st-ablauf__kopf h2{font-size:clamp(1.75rem,1rem + 2.6vw,2.875rem);letter-spacing:-.025em;margin-bottom:16px;}
.st-ablauf__kopf p{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:var(--st-leise);max-width:44ch;}

.st-schritte{list-style:none;margin:0;padding:0;position:relative;}
.st-schritt{position:relative;display:grid;grid-template-columns:52px 1fr;column-gap:20px;
  padding-bottom:32px;}
.st-schritt:last-child{padding-bottom:0;}
/* Die durchgehende Linie verbindet die Schritte zu einem Ablauf */
.st-schritt::before{content:"";position:absolute;left:25px;top:52px;bottom:0;width:2px;background:var(--st-linie);}
.st-schritt:last-child::before{display:none;}
.st-schritt__nr{grid-column:1;grid-row:1 / span 2;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:var(--st-papier);border:2px solid var(--st-orange);
  font-size:20px;font-weight:800;color:var(--st-ink);font-variant-numeric:tabular-nums;position:relative;z-index:1;}
.st-schritt__text{grid-column:2;padding-top:10px;}
.st-schritt__text h3{font-size:clamp(1.1875rem,1.05rem + .5vw,1.4375rem);margin-bottom:6px;}
.st-schritt__text p{color:var(--st-leise);font-size:17px;max-width:46ch;}
.st-schritt__bild{grid-column:2;margin-top:16px;max-width:440px;}
.st-schritt__bild .st-geraet--handy{max-width:220px;margin-inline:0;}
.st-schritt__bild .st-ph--foto,.st-schritt__bild .st-geraet{box-shadow:0 14px 36px rgba(15,23,42,.16);}

.st-leitsatz{margin-top:clamp(36px,5vw,64px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--st-linie);text-align:center;
  font-size:clamp(1.5rem,1rem + 2.1vw,2.5rem);font-weight:800;line-height:1.2;letter-spacing:-.02em;
  color:var(--st-ink);text-wrap:balance;}
.st-leitsatz span{display:block;}
.st-leitsatz span + span{color:var(--st-orange-text);}

/* ------------------------------------------------------------- Turniere --- */
/* Phase 2 (04.10.2026). Aufbau: Kopf mit Eyebrow, zwei Wege (Trainingsturnier /
   Vereinsturnier), vier Schritte in einem grosszuegigen Raster, danach die
   dunkle Live-Buehne (Fernseher, Handy, kleiner zweiter Fernseher) und der
   Anmeldeblock. Rahmen, Farben, Rundungen und Schatten wie in Phase 1. */
.st-eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--st-orange-text);margin-bottom:14px;}
.st-dunkel .st-eyebrow,.st-dunkel .st-weg__art{color:var(--st-orange);}
.st-sprung{margin-top:14px;font-size:15.5px;font-weight:600;}
.st-sprung a{text-decoration:underline;text-decoration-color:rgba(194,65,12,.45);text-underline-offset:.2em;}
.st-sprung a:hover{text-decoration-color:currentColor;}
.st-sprung a::after{content:" \2192";}
/* Karte: Screenshot eines Dialogs oder einer Seite, ohne Geraeterahmen */
.st-karte{margin:0;background:var(--st-papier);border:1px solid var(--st-linie);border-radius:var(--st-radius);
  overflow:hidden;box-shadow:0 18px 44px rgba(15,23,42,.14);}
.st-karte .st-ph{border-radius:0;}

.st-turnier{background:var(--st-bg);padding:clamp(56px,7vw,104px) 0;}
.st-turnier__kopf{max-width:780px;margin-bottom:clamp(32px,4vw,56px);}
.st-turnier__kopf h2{font-size:clamp(1.875rem,1rem + 3vw,3.25rem);letter-spacing:-.03em;margin-bottom:18px;}
.st-turnier__kopf p{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);color:var(--st-leise);max-width:54ch;}

/* Zwei Wege */
.st-wege{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:clamp(48px,6vw,88px);}
.st-weg{background:var(--st-papier);border:1px solid var(--st-linie);border-radius:var(--st-radius);
  padding:28px 30px 30px;}
.st-weg__art{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--st-orange-text);margin-bottom:8px;}
.st-weg h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);margin-bottom:10px;}
.st-weg > p{color:var(--st-leise);font-size:17px;margin-bottom:18px;}
.st-weg ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.st-weg li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;font-weight:600;line-height:1.4;}
.st-weg li svg{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--st-orange-text);}
.st-weg--cup{background:linear-gradient(165deg,var(--st-ink),var(--st-ink-2));color:var(--st-hell);border-color:#28344a;}
.st-weg--cup > p{color:var(--st-hell-2);}
.st-weg--cup li svg{color:var(--st-orange);}

/* Vier Schritte: 1 und 2 nebeneinander mit ihren Dialogen, 3 ueber die ganze
   Breite mit dem grossen Adminscreen, 4 daneben darunter mit dem KO-Baum, der
   den Adminscreen unten rechts ueberlappt. */
.st-turnier__zwischen{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);letter-spacing:-.02em;
  margin-bottom:clamp(24px,3vw,40px);}
.st-tschritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,4vw,56px);row-gap:clamp(44px,6vw,80px);}
.st-tschritt{min-width:0;}
.st-tschritt__kopf{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.st-tschritt__nr{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:var(--st-papier);border:2px solid var(--st-orange);font-size:18px;font-weight:800;
  color:var(--st-ink);font-variant-numeric:tabular-nums;}
.st-tschritt h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);}
.st-tschritt__text p{color:var(--st-leise);font-size:17px;max-width:46ch;}
.st-tschritt__bild{margin-top:22px;}
.st-tschritt--1 .st-karte,.st-tschritt--2 .st-karte{max-width:460px;}
.st-ph--erstellen{aspect-ratio:698/982;}
.st-ph--anmeldeformular{aspect-ratio:808/1112;}
.st-tschritt--3,.st-tschritt--4{grid-column:1 / -1;}
.st-tschritt--3 .st-tschritt__bild{margin-top:26px;position:relative;z-index:1;}
/* drei Klassen, damit die 16:10-Regel des Notebook-Rahmens nicht gewinnt */
.st-geraet--notebook .st-ph.st-ph--gruppenphase{aspect-ratio:16/9;background:#f8fafc;}
/* Korrektur 04.10.2026: Text von Schritt 4 rueckt an die KO-Karte heran -
   rechtsbuendig direkt links daneben, auf Hoehe ihres sichtbaren unteren Teils,
   damit Nummer, Titel, Text und Screenshot als eine Einheit gelesen werden. */
.st-tschritt--4{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,36px);align-items:end;}
.st-tschritt--4 .st-tschritt__text{grid-column:1;justify-self:end;text-align:right;padding-bottom:clamp(20px,5%,56px);}
.st-tschritt--4 .st-tschritt__kopf{justify-content:flex-end;}
.st-tschritt--4 .st-tschritt__text p{max-width:34ch;margin-left:auto;}
.st-tschritt--4 .st-tschritt__bild{grid-column:2;margin-top:-34%;position:relative;z-index:2;}
.st-ph--kobaum{aspect-ratio:1160/700;background:#f8fafc;}

/* Live-Buehne: grosser Fernseher links, Handy rechts daneben (unten buendig,
   direkt neben dem QR-Code der Anzeige), kleiner Fernseher mit der KO-Phase
   ueber der linken unteren Ecke des grossen. */
.st-live{position:relative;overflow:hidden;color:var(--st-hell);
  padding:clamp(56px,7vw,104px) 0 clamp(64px,8vw,120px);
  background:
    radial-gradient(900px 520px at 18% 0%,rgba(42,56,82,.95) 0%,transparent 62%),
    linear-gradient(170deg,var(--st-tief) 0%,var(--st-ink) 100%);}
.st-live__kopf{max-width:780px;margin:0 auto clamp(36px,5vw,64px);text-align:center;}
.st-live__kopf h2{font-size:clamp(1.875rem,1rem + 3.2vw,3.5rem);color:#fff;letter-spacing:-.03em;margin-bottom:18px;}
.st-live__kopf p{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);color:var(--st-hell-2);max-width:50ch;margin:0 auto;}
.st-live__buehne{display:grid;grid-template-columns:76fr 22fr;column-gap:2%;align-items:end;}
.st-live__tv{grid-column:1;grid-row:1;}
.st-live__handy{grid-column:2;grid-row:1;max-width:none;margin:0;}
.st-geraet--handy.st-live__handy .st-ph{aspect-ratio:972/1852;}
.st-live__tv-ko{grid-column:1;grid-row:2;width:36%;margin-top:-13%;position:relative;z-index:2;}
.st-geraet--tv .st-ph.st-ph--tv-turnier{aspect-ratio:5/3;--st-bild-pos:50% 50%;}
.st-live__hinweis{margin-top:clamp(28px,4vw,48px);text-align:center;color:var(--st-hell-3);font-size:15px;}

/* Anmeldung und API */
.st-anmeldung{background:var(--st-papier);padding:clamp(56px,7vw,96px) 0;border-bottom:1px solid var(--st-linie);}
.st-anmeldung .st-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;}
.st-anmeldung h2{font-size:clamp(1.625rem,1rem + 2.2vw,2.5rem);letter-spacing:-.025em;margin-bottom:16px;}
.st-anmeldung p{color:var(--st-leise);font-size:17px;max-width:52ch;}
.st-anmeldung__api{margin-top:14px;font-size:15.5px;}
.st-ph--anmeldelink{aspect-ratio:975/340;width:100%;max-width:520px;justify-self:end;background:#f8fafc;}

/* ------------------------------------------- Verein und Vereinsabend --- */
/* Phase 3 (04.10.2026). Fuenf Teile hinter dem Anmeldeblock: A Vereinsleben
   (hell, Notebook mit Statistik und zwei ueberlappende Karten), B Verein
   organisieren (weiss, kompakt), C Kasse (dunkle Buehne mit zwei Tablets und
   dem Zahlungsdialog), D QR am Tisch (hell, A4-Blatt und Handy-Ansichten),
   E Vereinsseite (weiss). Rahmen, Karten, Eyebrows und Nummern wie Phase 1/2. */
.st-karte--hell{background:#f8fafc;}
.st-bildtitel{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--st-leise);max-width:60ch;}
.st-dunkel .st-bildtitel{color:var(--st-hell-3);}

/* A - Vereinsstatistik und Vereinsleben */
.st-leben{background:var(--st-bg);padding:clamp(56px,7vw,104px) 0;border-top:1px solid var(--st-linie);}
.st-leben__kopf{max-width:800px;margin-bottom:clamp(28px,4vw,44px);}
.st-leben__kopf h2{font-size:clamp(1.75rem,.9rem + 2.9vw,3.125rem);letter-spacing:-.03em;margin-bottom:18px;}
.st-leben__kopf p{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);color:var(--st-leise);max-width:58ch;}
.st-nutzen{list-style:none;margin:0 0 clamp(36px,5vw,60px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,36px);}
.st-nutzen__punkt{display:flex;gap:12px;align-items:flex-start;}
.st-nutzen__punkt svg{flex:0 0 auto;width:26px;height:26px;margin-top:2px;color:var(--st-orange-text);}
.st-nutzen__punkt h3{font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem);margin-bottom:6px;}
.st-nutzen__punkt p{color:var(--st-leise);font-size:16px;}
.st-leben__statistik{position:relative;z-index:1;}
.st-geraet--notebook .st-ph.st-ph--statistik{aspect-ratio:1580/895;background:#f8fafc;}
/* Die zwei Karten des Vereinslebens ueberlappen die Unterkante des Notebooks */
.st-leben__karten{display:grid;grid-template-columns:52fr 46fr;column-gap:2%;align-items:start;
  margin-top:-7%;position:relative;z-index:2;padding:0 2%;}
.st-leben__karte--wall{margin-top:6%;}
.st-ph--highlights{aspect-ratio:1320/665;}
.st-ph--wall{aspect-ratio:1335/605;}

/* B - Verein organisieren */
.st-orga{background:var(--st-papier);padding:clamp(56px,7vw,96px) 0;}
.st-orga .st-wrap{display:grid;grid-template-columns:40fr 56fr;gap:clamp(28px,5vw,72px);align-items:start;}
.st-orga h2{font-size:clamp(1.625rem,1rem + 2.2vw,2.5rem);letter-spacing:-.025em;margin-bottom:16px;}
.st-orga__text > p:not(.st-bildtitel){color:var(--st-leise);font-size:17px;max-width:48ch;margin-bottom:26px;}
.st-ph--kacheln{aspect-ratio:1348/560;}
.st-ph--trainingsorte{aspect-ratio:1348/947;}

/* C - Kasse (dunkle Buehne) */
.st-kasse{position:relative;overflow:hidden;color:var(--st-hell);
  padding:clamp(56px,7vw,104px) 0 clamp(56px,7vw,96px);
  background:
    radial-gradient(900px 520px at 82% 100%,rgba(42,56,82,.95) 0%,transparent 62%),
    linear-gradient(170deg,var(--st-ink) 0%,var(--st-tief) 100%);}
.st-kasse__kopf{max-width:800px;margin:0 auto clamp(36px,5vw,64px);text-align:center;}
.st-kasse__kopf h2{font-size:clamp(1.875rem,1rem + 3.2vw,3.5rem);color:#fff;letter-spacing:-.03em;margin-bottom:18px;}
.st-kasse__kopf p{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);color:var(--st-hell-2);max-width:54ch;margin:0 auto;}
/* Zwei Tablets, das zweite vorne und nach unten versetzt; der Zahlungsdialog
   liegt als Karte ueber der linken unteren Ecke */
.st-kasse__buehne{display:grid;grid-template-columns:repeat(12,1fr);align-items:start;}
.st-kasse__tablet{margin:0;}
.st-kasse__tablet--personen{grid-column:1 / span 8;grid-row:1;z-index:1;}
.st-kasse__tablet--buchung{grid-column:5 / span 8;grid-row:1;margin-top:16%;position:relative;z-index:2;}
.st-kasse__zahlung{grid-column:1 / span 6;grid-row:2;margin-top:-6%;position:relative;z-index:3;
  box-shadow:0 24px 60px rgba(2,6,23,.6);}
.st-geraet--tablet .st-ph.st-ph--kasse-tablet{aspect-ratio:4/3;background:#f8fafc;}
.st-ph--zahlung{aspect-ratio:1290/864;}
.st-kasse__satz{margin:clamp(32px,4vw,56px) 0 clamp(28px,3vw,40px);text-align:center;
  font-size:clamp(1.375rem,1rem + 1.6vw,2.125rem);font-weight:800;line-height:1.25;letter-spacing:-.02em;color:#fff;text-wrap:balance;}
.st-kasse__satz span:last-child{color:var(--st-orange);}
.st-kschritte{list-style:none;margin:0 0 clamp(32px,4vw,52px);padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,32px);}
.st-kschritt h3{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:#fff;}
.st-kschritt .st-tschritt__nr{width:38px;height:38px;font-size:16px;}
.st-kschritt p{color:var(--st-hell-2);font-size:15.5px;}
.st-kasse__admin{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.5vw,28px);}
.st-kasse__adminkarte{margin:0;}
.st-kasse__adminkarte figcaption{margin-top:10px;font-size:14px;line-height:1.4;color:var(--st-hell-3);}
.st-ph--admin-kasse{box-shadow:0 14px 36px rgba(2,6,23,.5);}
[data-bildplatz="kasse-eroeffnen"]{aspect-ratio:1355/925;}
[data-bildplatz="kasse-artikel"]{aspect-ratio:1360/795;}
[data-bildplatz="kasse-gastmannschaft"]{aspect-ratio:1355/1100;}

/* D - QR am Tisch */
.st-qr{background:var(--st-bg);padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--st-linie);}
.st-qr__kopf{max-width:800px;margin-bottom:clamp(28px,4vw,48px);}
.st-qr__kopf h2{font-size:clamp(1.75rem,.9rem + 2.9vw,3.125rem);letter-spacing:-.03em;margin-bottom:18px;}
.st-qr__kopf p{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);color:var(--st-leise);max-width:58ch;}
.st-qr__raster{display:grid;grid-template-columns:46fr 54fr;gap:clamp(24px,4vw,56px);align-items:start;}
.st-ph--a4{aspect-ratio:1195/1682;box-shadow:0 24px 60px rgba(15,23,42,.18);}
.st-qr__online{display:grid;gap:0;}
.st-qr__online .st-ph{border-radius:0;}
.st-ph--online-kopf{aspect-ratio:1262/720;}
.st-ph--online-knoepfe{aspect-ratio:1262/185;box-shadow:0 -1px 0 var(--st-linie);} /* Trennlinie ohne Layouthoehe, sonst stimmt das Seitenverhaeltnis um 1 px nicht */
.st-qr__paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.5vw,28px);margin-top:clamp(20px,3vw,32px);}
.st-ph--rechnung{aspect-ratio:1/1;}
.st-ph--spiele{aspect-ratio:846/750;}

/* E - Vereinsseite */
.st-vereinsseite{background:var(--st-papier);padding:clamp(56px,7vw,96px) 0;border-bottom:1px solid var(--st-linie);}
.st-vereinsseite .st-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;}
.st-vereinsseite h2{font-size:clamp(1.75rem,.9rem + 2.9vw,3.125rem);letter-spacing:-.03em;margin-bottom:16px;}
.st-vereinsseite p{color:var(--st-leise);font-size:17px;max-width:52ch;}
.st-vereinsseite p + p{margin-top:12px;}
.st-vereinsseite__hinweis{margin-top:14px;font-size:15.5px;}
.st-ph--vereinsseite{aspect-ratio:1135/1630;width:100%;max-width:460px;justify-self:end;margin-inline:auto;}

/* ------------------------------------------------------------ Groessen --- */
/* Breiter Bildschirm: der Ablauf wird zur Mittellinie mit Wechselseiten */
@media (min-width:1024px){
  .st-schritte::before{content:"";position:absolute;left:50%;top:26px;bottom:26px;width:2px;
    margin-left:-1px;background:var(--st-linie);}
  .st-schritt{grid-template-columns:1fr 104px 1fr;column-gap:0;align-items:center;
    padding-bottom:clamp(28px,3vw,40px);}
  .st-schritt::before{display:none;}
  .st-schritt__nr{grid-column:2;grid-row:1;justify-self:center;}
  .st-schritt__text{grid-column:1;grid-row:1;padding:0 8px 0 0;justify-self:end;text-align:right;}
  .st-schritt__text p{margin-left:auto;}
  .st-schritt__bild{grid-column:3;grid-row:1;margin:0;justify-self:start;width:100%;max-width:380px;}
  /* Der Aufruf-Screenshot traegt viel Text - der Fernseher in Schritt 5 darf breiter sein */
  .st-schritt__bild--breit{max-width:460px;}
  .st-schritt:nth-child(even) .st-schritt__text{grid-column:3;padding:0 0 0 8px;justify-self:start;text-align:left;}
  .st-schritt:nth-child(even) .st-schritt__text p{margin-left:0;}
  .st-schritt:nth-child(even) .st-schritt__bild{grid-column:1;justify-self:end;}
  .st-schritt:nth-child(even) .st-schritt__bild .st-geraet--handy{margin-left:auto;}
}

/* Unter 1024: der Hero stapelt, die Buehne kommt unter den Text */
@media (max-width:1023.98px){
  .st-hero .st-wrap{grid-template-columns:1fr;}
  .st-hero__text{max-width:720px;}
  .st-buehne{max-width:720px;}
  .st-hero::before{top:auto;bottom:-300px;transform:none;}
  .st-nav__inhalt{display:none;}
}
@media (max-width:1199.98px){ .st-nav__wer{display:none;} }
/* Live-Buehne unter 1024: Fernseher in voller Breite, darunter links der kleine
   KO-Fernseher und rechts das Handy - direkt unter dem QR-Code der Anzeige. */
@media (max-width:1023.98px){
  .st-live__buehne{grid-template-columns:1fr auto;column-gap:20px;row-gap:18px;align-items:start;}
  .st-live__tv{grid-column:1 / -1;}
  .st-live__tv-ko{grid-column:1;grid-row:2;width:min(100%,360px);margin:6px 0 0;}
  .st-live__handy{grid-column:2;grid-row:2;width:230px;}
  /* Anmeldeblock: unter 1024 untereinander, sonst wird der QR-Code zu klein */
  .st-anmeldung .st-wrap{grid-template-columns:1fr;}
  .st-ph--anmeldelink{justify-self:start;}
  /* Phase 3 unter 1024: Kassenschritte zu zweit, Vereinsseite und Orga untereinander */
  .st-kschritte{grid-template-columns:1fr 1fr;}
  .st-orga .st-wrap,.st-vereinsseite .st-wrap{grid-template-columns:1fr;}
  .st-ph--vereinsseite{justify-self:start;margin-inline:0;}
}
@media (max-width:860px){
  .st-vertrauen ul{grid-template-columns:repeat(2,auto);justify-content:start;}
}
/* Schmal: Fernseher und Tablet nebeneinander unter dem Foto statt darauf */
@media (max-width:640px){
  .st-buehne{padding:0;display:grid;grid-template-columns:1.45fr 1fr;gap:12px;align-items:end;}
  .st-buehne .st-ph--foto{grid-column:1 / -1;width:100%;}
  .st-buehne .st-geraet--tv,.st-buehne .st-geraet--tablet{position:static;width:auto;margin-top:-10%;}
  .st-buehne .st-geraet--tv{margin-left:4%;}
  .st-buehne .st-geraet--tablet{margin-right:4%;}
  .st-hero__aktionen .st-btn{flex:1 1 100%;}
  /* Korrektur 29.09.2026: Geraete im Ablauf deutlich kompakter, Seitenverhaeltnis bleibt */
  .st-schritt{padding-bottom:28px;}
  .st-schritt__bild{margin-top:14px;max-width:240px;}
  .st-schritt__bild .st-geraet--handy{max-width:175px;}
  .st-schritt__bild--breit{max-width:none;}
  .st-schritt__bild .st-geraet--notebook .st-geraet__fuss{height:10px;}
  .st-vertrauen ul{grid-template-columns:1fr 1fr;gap:12px 16px;padding:18px 0;}
  .st-vertrauen li{font-size:15px;align-items:flex-start;}
  .st-nav a{padding:0 8px;font-size:14.5px;}
  .st-nav a.st-nav__knopf{padding:0 12px;margin-left:2px;}
  .st-logo img{height:42px;}
  /* Turniere (Phase 2): einspaltig, eigene Mobil-Ausschnitte fuer Adminscreen
     und KO-Baum (Seitenverhaeltnis wechselt mit der <source media>), kein
     Ueberlappen, kleiner KO-Fernseher entfaellt, Handy rechts unter dem QR-Code. */
  .st-wege{grid-template-columns:1fr;gap:14px;}
  .st-weg{padding:22px 20px 24px;}
  .st-tschritte{grid-template-columns:1fr;row-gap:40px;}
  .st-tschritt--1 .st-karte,.st-tschritt--2 .st-karte{max-width:none;}
  .st-tschritt__bild{margin-top:18px;}
  .st-geraet--notebook .st-ph.st-ph--gruppenphase{aspect-ratio:920/518;}
  .st-tschritt--4{grid-template-columns:1fr;}
  .st-tschritt--4 .st-tschritt__text,.st-tschritt--4 .st-tschritt__bild{grid-column:1;}
  .st-tschritt--4 .st-tschritt__text{justify-self:start;text-align:left;padding-bottom:0;}
  .st-tschritt--4 .st-tschritt__kopf{justify-content:flex-start;}
  .st-tschritt--4 .st-tschritt__text p{margin-left:0;}
  .st-tschritt--4 .st-tschritt__bild{margin-top:18px;}
  .st-ph--kobaum{aspect-ratio:770/700;}
  .st-live__tv-ko{display:none;}
  .st-live__handy{grid-column:1 / -1;justify-self:end;width:230px;}
  /* Phase 3: einspaltig, Mobil-Ausschnitte (Seitenverhaeltnis wechselt mit der
     <source media>), keine Ueberlappung, Online-Kopf der Karte entfaellt */
  .st-nutzen{grid-template-columns:1fr;gap:16px;}
  .st-geraet--notebook .st-ph.st-ph--statistik{aspect-ratio:785/655;}
  .st-leben__karten{grid-template-columns:1fr;row-gap:22px;margin-top:22px;padding:0;}
  .st-leben__karte--wall{margin-top:0;}
  .st-ph--highlights{aspect-ratio:880/665;}
  .st-ph--wall{aspect-ratio:440/490;max-width:300px;}
  .st-orga .st-wrap{gap:24px;}
  .st-ph--kacheln{aspect-ratio:668/560;}
  .st-ph--trainingsorte{aspect-ratio:738/947;}
  .st-kasse__buehne{grid-template-columns:1fr;row-gap:18px;}
  .st-kasse__tablet--personen,.st-kasse__tablet--buchung,.st-kasse__zahlung{grid-column:1;grid-row:auto;margin-top:0;}
  .st-geraet--tablet .st-ph.st-ph--kasse-tablet{aspect-ratio:1000/720;}
  .st-kasse__tablet--buchung .st-ph.st-ph--kasse-tablet{aspect-ratio:1000/730;}
  .st-ph--zahlung{aspect-ratio:835/864;max-width:300px;margin-inline:auto;}
  .st-kschritte{grid-template-columns:1fr;gap:18px;}
  .st-kasse__admin{grid-template-columns:1fr;gap:18px;}
  .st-qr__raster{grid-template-columns:1fr;gap:24px;}
  .st-ph--online-kopf{display:none;}
  .st-ph--online-knoepfe{box-shadow:none;}
  /* Korrektur 04.10.2026: Knopfzeile, Meine Rechnung und Spiele stehen auf Mobil in
     einem gemeinsamen weissen Rahmen - was nach dem Scannen auf dem Handy passiert,
     ist so vom A4-Blatt getrennt und als Einheit lesbar. Nur CSS, keine Komponente. */
  .st-qr__handy{background:var(--st-papier);border:1px solid var(--st-linie);border-radius:var(--st-radius);padding:14px 14px 18px;}
  .st-qr__handy .st-karte{box-shadow:0 8px 22px rgba(15,23,42,.10);}
  .st-qr__handy .st-bildtitel{margin-top:10px;}
  .st-qr__paar{grid-template-columns:1fr;gap:16px;margin-top:16px;}
  .st-ph--rechnung,.st-ph--spiele{max-width:none;}
  .st-vereinsseite .st-wrap{gap:24px;}
  .st-ph--anmeldelink{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .st-btn{transition:none;}
}

/* ------------------------------------------------- Unterer Bereich --- */
/* Phase 4 (04.10.2026): nach der Produktgeschichte das, was Besucher jetzt tun
   koennen - anmelden, zuschauen, einen Verein finden - und der Schlussaufruf.
   Ruhige Listen und Karten, keine Screenshots. Die Regeln des alten Katalogs
   (.lp-*) sind entfernt; einzig ".lp a" (keine Unterstreichung) lebt oben weiter. */
.st-jetzt{background:var(--st-bg);padding:clamp(56px,7vw,96px) 0;}
.st-jetzt__kopf{max-width:760px;margin-bottom:clamp(28px,4vw,44px);}
.st-jetzt__kopf h2,.st-finder__kopf h2{font-size:clamp(1.75rem,.9rem + 2.9vw,3.125rem);letter-spacing:-.03em;margin-bottom:16px;}
.st-jetzt__kopf p,.st-finder__kopf p{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);color:var(--st-leise);max-width:56ch;}
.st-jetzt__block + .st-jetzt__block{margin-top:clamp(36px,5vw,56px);}
.st-jetzt__block h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);margin-bottom:6px;}
.st-jetzt__hinweis{color:var(--st-leise);font-size:16px;margin-bottom:16px;max-width:60ch;}
.st-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.st-zeile{display:flex;align-items:center;gap:16px;background:var(--st-papier);border:1px solid var(--st-linie);
  border-radius:var(--st-radius);padding:16px 20px;}
.st-zeile__info{flex:1 1 auto;min-width:0;}
.st-zeile__name{font-weight:800;font-size:17px;letter-spacing:-.01em;}
.st-zeile__meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:4px;font-size:14.5px;color:var(--st-leise);}
.st-pille{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:#eef2f7;color:#475569;border:1px solid var(--st-linie);}
.st-pille--live{background:#ecfdf5;color:#0f766e;border-color:#a7f3d0;}
.st-pille--frei{background:#fff7ed;color:var(--st-orange-text);border-color:#fed7aa;}
.st-leer{background:var(--st-papier);border:1px dashed #cbd5e1;border-radius:var(--st-radius);
  padding:22px 20px;color:var(--st-leise);font-size:16px;}

.st-finder{background:var(--st-papier);padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--st-linie);}
.st-finder__kopf{max-width:760px;margin-bottom:clamp(24px,3vw,36px);}
.st-vereine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.st-verein{display:flex;align-items:center;gap:14px;height:100%;background:var(--st-bg);border:1px solid var(--st-linie);
  border-radius:var(--st-radius);padding:18px 20px;color:var(--st-text);text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease;}
a.st-verein:hover{border-color:#ffd0a3;box-shadow:0 10px 26px rgba(15,23,42,.08);}
a.st-verein:hover .st-verein__weiter{color:var(--st-orange-text);}
.st-verein__logo{flex:0 0 auto;width:56px;height:56px;border-radius:12px;background:var(--st-papier);border:1px solid var(--st-linie);
  display:grid;place-items:center;overflow:hidden;}
.st-verein__logo img{max-width:48px;max-height:48px;object-fit:contain;}
/* Korrektur 04.10.2026: Logoplatz nur mit vorhandener Datei; die ganze Karte ist der Link,
   Fokus ueber die globale :focus-visible-Regel, hier nur der Abstand zum Rand */
a.st-verein:focus-visible{outline-offset:2px;}
.st-verein__text{flex:1 1 auto;min-width:0;display:grid;gap:2px;}
.st-verein__name{font-weight:800;font-size:17px;letter-spacing:-.01em;}
.st-verein__ort{font-size:14.5px;color:var(--st-leise);}
.st-verein__zahlen{font-size:13.5px;color:var(--st-leise);}
.st-verein__weiter{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--st-ink);white-space:nowrap;}
.st-verein__weiter svg{width:18px;height:18px;}
.st-finder__hinweis{margin-top:18px;font-size:14.5px;color:var(--st-leise);max-width:70ch;}

.st-schluss{background:var(--st-bg);padding:clamp(40px,5vw,64px) 0 clamp(36px,4vw,48px);}
.st-schluss__karte{position:relative;overflow:hidden;color:var(--st-hell);text-align:center;border-radius:22px;
  padding:clamp(40px,5vw,56px) clamp(18px,4vw,32px);
  background:
    radial-gradient(340px 340px at 100% 100%,rgba(255,122,0,.32) 0%,transparent 62%),
    linear-gradient(160deg,var(--st-ink) 0%,var(--st-ink-2) 100%);}
.st-schluss__karte h2{font-size:clamp(1.625rem,1rem + 2.2vw,2.25rem);color:#fff;letter-spacing:-.025em;margin-bottom:12px;}
.st-schluss__karte p{color:var(--st-hell-2);font-size:17px;max-width:52ch;margin:0 auto 24px;}
.st-schluss__aktionen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.st-fuss{padding:30px 0 0;color:var(--st-leise);font-size:13.5px;text-align:center;}

@media (max-width:1023.98px){
  .st-vereine{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .st-zeile{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px;}
  .st-zeile .st-btn{width:100%;}
  .st-vereine{grid-template-columns:1fr;}
  .st-verein{flex-wrap:wrap;}
  .st-verein__weiter{width:100%;justify-content:flex-end;}
  .st-schluss__aktionen .st-btn{flex:1 1 100%;}
}