/*
Theme Name: SC Greven 09
Theme URI: https://scgreven09.peterlakenbrink.com
Author: Peter Lakenbrink
Description: Individuelles Theme fuer den SC Greven 09 - Abteilungen, Spielberichte,
Mannschaftsfotos pro Saison und Live-Daten von FUSSBALL.DE.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: scgreven09

Copyright (c) 2026 Peter Lakenbrink. Alle Rechte vorbehalten.
Erstellt fuer den SC Greven 09 e. V., Greven/Westfalen.

Dieses Theme ist eine Auftragsarbeit und steht unter keiner freien Lizenz.
Weitergabe, Verkauf oder Einsatz fuer andere Vereine nur mit schriftlicher
Zustimmung des Urhebers. Der Urhebervermerk in der Fusszeile
(scg_urheber_html() in functions.php) gehoert zum Lieferumfang und darf
nicht entfernt werden.
*/


/* ============================================================
   SC GREVEN 09 · Tokens (aus dem Original-Logo gesampelt)
   Vereinsgrün  #00673F   Schwarz #201D18   Weiß #FFFFFF
   ============================================================ */
:root{
  --gruen:#00673F; --gruen-l:#0E9B5E; --gruen-d:#04331F;
  --flut:#23E08A;
  --ink:#16130F; --ink2:#201D18;
  --kreide:#F4F6F2; --weiss:#FFFFFF;
  --grau:#69716A; --grau-l:#9aa39c;
  --linie:rgba(255,255,255,.12); --linie-d:rgba(22,19,15,.10);
  --maxw:1200px; --r:14px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--kreide);color:var(--ink2);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Anton',sans-serif;font-weight:400;line-height:.92;letter-spacing:.01em;text-transform:uppercase}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:'Space Mono',monospace}
.sec-num{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--gruen);display:block;margin-bottom:12px}

/* ---------- LAUFBAND ---------- */
.ticker{background:var(--ink);color:var(--weiss);border-bottom:1px solid var(--linie);overflow:hidden;white-space:nowrap;height:38px}
.ticker__track{display:inline-flex;align-items:center;height:38px;gap:42px;padding-left:100%;animation:slide 34s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:10px}
.ticker b{color:var(--flut);font-weight:700}
.ticker .dot{width:7px;height:7px;border-radius:50%;background:var(--flut);animation:pulse 1.8s infinite}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(35,224,138,.6)}70%{box-shadow:0 0 0 8px rgba(35,224,138,0)}100%{box-shadow:0 0 0 0 rgba(35,224,138,0)}}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(22,19,15,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
.brand{display:flex;align-items:center;gap:13px;color:var(--weiss);white-space:nowrap;flex:none}
.brand img{height:48px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.brand .brand__t{font-family:'Anton',sans-serif;font-size:19px;line-height:.9;letter-spacing:.02em;color:#fff;display:block}
.brand .brand__s{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.16em;color:var(--flut);text-transform:uppercase}
nav.links{display:flex;gap:26px;align-items:center}
nav.links a{color:#cfd6d0;font-size:13.5px;font-weight:600;letter-spacing:.02em;position:relative;padding:4px 0;transition:color .2s}
nav.links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--flut);transition:width .25s var(--ease)}
nav.links a:hover{color:#fff}nav.links a:hover::after{width:100%}
.nav__cta{background:var(--gruen);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:13px;white-space:nowrap;transition:transform .2s,background .2s}
.nav__cta:hover{background:var(--gruen-l);transform:translateY(-1px)}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px auto;transition:.25s}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:84px 0 130px}
.hero::before{content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:1000px;height:600px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(35,224,138,.18),rgba(0,103,63,.07) 45%,transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:linear-gradient(transparent 0 49.5%,rgba(255,255,255,.05) 49.5% 50.5%,transparent 50.5%) center/100% 120px,repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.04) 119px 120px);-webkit-mask:radial-gradient(120% 90% at 50% 8%,#000,transparent 75%);mask:radial-gradient(120% 90% at 50% 8%,#000,transparent 75%)}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.45fr .55fr;gap:40px;align-items:center}
.hero__tag{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--linie);border-radius:999px;padding:7px 15px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#cfd6d0;margin-bottom:26px}
/* Pulsiert wie der LIVE-Punkt weiter unten. Frueher stand hier das
   Zeichen "●" als Text - darauf laesst sich kein sauberer Puls legen,
   weil der box-shadow die ganze Zeilenhoehe umfasst statt nur den Punkt. */
.hero__tag .lv{flex:none;width:7px;height:7px;border-radius:50%;background:var(--flut);animation:pulse 1.8s infinite}
/* Das Jahr ist ein eigenes Element, damit es auf dem Handy als GANZES in die
   zweite Zeile rutschen kann. Der Trenner haengt als ::before daran und
   verschwindet dort mit. */
.hero__tag-jahr::before{content:"·";margin-right:.6em;opacity:.5}
/* line-height 1.08 statt global .92: sonst ragen die Umlaut-Punkte von "FUENF" in die Zeile "EIN VEREIN." darueber (bei 1280px 16px Ueberlappung). Minimum 1.059 - nicht enger setzen. */
.hero h1{font-size:clamp(50px,9vw,128px);color:#fff;margin:0;line-height:1.08}
.hero h1 .stroke{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.5)}
.hero__sub{max-width:560px;margin-top:20px}
.hero__sub p{color:#c2cbc4;font-size:17px;line-height:1.6}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:#dfe5e0;border:1px solid var(--linie);border-radius:999px;padding:7px 13px}
.chip b{color:var(--flut)}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
/* --- Wappen im Hero -------------------------------------------------
   EINE Animation: der Glanz, der alle 4 s darueberzieht. Kein Puls,
   keine Eingangsanimation - das Wappen steht ruhig und ist sofort da.
   Die Groesse ist dafuer dauerhaft 1,2x der urspruenglichen (230 -> 276px
   am Desktop, 160 -> 192px auf dem Handy).

   --wappen ist die EINE Groessenangabe: Bild und Glanzflaeche muessen exakt
   gleich breit sein, sonst sitzt die Maske daneben. Fuer Handybreite wird
   nur diese Variable umgesetzt.

   ⚠️ background-repeat:no-repeat ist PFLICHT. Der Verlauf ist 260% breit;
   ohne das kachelt er, und waehrend der Pause steht die naechste Kachel mit
   ihrem hellen Kern bei 94% der Wappenbreite - sichtbar rechts im Wappen. */
.hero__logo{--wappen:min(276px,72vw);position:relative;display:flex;justify-content:center}
.hero__logo img{position:relative;z-index:1;width:var(--wappen);height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.hero__logo::after{content:"";position:absolute;top:50%;left:50%;z-index:2;width:var(--wappen);aspect-ratio:440/570;transform:translate(-50%,-50%);background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.35) 48%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.35) 52%,transparent 56%) no-repeat;background-size:260% 100%;background-position:185% 0;-webkit-mask:url(bilder/logo.png) center/contain no-repeat;mask:url(bilder/logo.png) center/contain no-repeat;mix-blend-mode:screen;pointer-events:none;animation:wappenglanz 4s infinite}
/* Die Zeitfunktion steht IM Keyframe: sie gilt nur fuer den Abschnitt ab 55%,
   also fuer den eigentlichen Zug. An der animation-Kurzform wuerde sie auch
   die Pause verbiegen. */
@keyframes wappenglanz{0%,55%{background-position:185% 0;animation-timing-function:ease-in-out}100%{background-position:-85% 0}}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:999px;transition:transform .2s var(--ease),background .2s,box-shadow .2s;cursor:pointer;border:0}
.btn--p{background:var(--gruen);color:#fff;box-shadow:0 12px 30px -12px rgba(0,103,63,.9)}
.btn--p:hover{background:var(--gruen-l);transform:translateY(-2px)}
.btn--g{border:1px solid rgba(255,255,255,.22);color:#fff;background:transparent}
.btn--g:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)}
/* Umriss-Variante fuer HELLE Abschnitte. btn--g ist weiss auf weiss und
   nur fuer dunkle Bereiche (Hero) gedacht. */
.btn--o{background:#2a2724;color:#fff;border:1px solid #3a3632}
.btn--o:hover{background:#332f2b;transform:translateY(-2px)}

/* ---------- ABTEILUNGEN ---------- */
.abt{background:var(--kreide)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(34px,5.4vw,62px)}
.sec-head p{max-width:440px;color:var(--grau);font-size:16px}
section{padding:96px 0}
.abt__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.acard{background:#fff;border:1px solid var(--linie-d);border-radius:var(--r);padding:28px 24px;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;display:flex;flex-direction:column;min-height:260px}
.acard:hover{transform:translateY(-6px);box-shadow:0 26px 54px -28px rgba(4,51,31,.55)}
.acard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.acard:hover::after{transform:scaleX(1)}
/* ⚠️ KEIN margin-bottom:auto auf dem Symbol.
   Das stand hier bis zum 04.09.2026 und schob in jeder Karte alles
   darunter an den unteren Rand - je nach Laenge des Beschreibungstextes
   verschieden weit. Die fuenf Ueberschriften standen dadurch auf fuenf
   verschiedenen Hoehen. Den Hoehenunterschied faengt jetzt der
   Beschreibungstext ab (flex unten). */
.acard .ic{width:46px;height:46px;color:var(--gruen);flex:0 0 auto}
.acard .ic svg{width:46px;height:46px;display:block;color:var(--gruen)}
.acard h3{font-size:28px;margin:22px 0 8px;color:var(--ink2)}
/* Der Text dehnt sich - damit sitzt der Link in JEDER Karte unten
   und alle fuenf stehen auf einer Linie. */
.acard p{font-size:13.5px;color:var(--grau);line-height:1.5;flex:1 1 auto}
.acard .go{margin-top:16px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--gruen);display:inline-flex;align-items:center;gap:7px}
.acard .go svg{width:14px;height:14px;transition:transform .2s}
.acard:hover .go svg{transform:translateX(4px)}

/* ---------- LIVE / FUSSBALL ---------- */
.live{background:var(--ink);color:#fff}
.live .sec-head h2{color:#fff}.live .sec-head p{color:var(--grau-l)}
.board__card{background:linear-gradient(180deg,#1c1812,#16130f);border:1px solid var(--linie);border-radius:var(--r);box-shadow:0 40px 80px -34px rgba(0,0,0,.8);overflow:hidden;margin-bottom:30px}
.board__head{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--linie);background:repeating-linear-gradient(135deg,rgba(0,103,63,.16) 0 12px,transparent 12px 24px)}
.board__head .l{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#cfd6d0}
.board__head .l1{font-weight:400}
.board__head .l2::before{content:"· "}
@media(max-width:600px){.board__head .l{display:flex;flex-direction:column;gap:2px;line-height:1.25}.board__head .l2::before{content:""}.board__head .l2{opacity:.85;font-size:10.5px}}
.board__live{display:inline-flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--flut)}
.board__live .dot{width:7px;height:7px;border-radius:50%;background:var(--flut);animation:pulse 1.8s infinite}
.board__body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:30px 22px}
.team{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.team img{height:64px;width:auto}
.team .alt{width:54px;height:62px}
.team__name{font-family:'Anton';font-size:clamp(18px,2.5vw,26px);color:#fff}
.team__meta{font-family:'Space Mono',monospace;font-size:11px;color:var(--grau-l);letter-spacing:.08em;text-transform:uppercase}
.vs{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px}
.vs__time{font-family:'Anton';font-size:38px;color:var(--flut);line-height:1}
.vs__date{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;color:#cfd6d0;text-transform:uppercase}
.vs__vs{font-family:'Space Mono',monospace;font-size:13px;color:var(--grau-l);letter-spacing:.3em}
.board__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:13px 22px;border-top:1px solid var(--linie);font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--grau-l)}
.board__foot a{color:var(--flut)}
/* Widget-Slot */
.embed__box{background:#1c1812;border:1.5px dashed var(--gruen-l);border-radius:var(--r);min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:38px;color:var(--grau-l)}
.embed__box .pill{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(35,224,138,.12);color:var(--flut);padding:6px 12px;border-radius:999px}
.embed__box h4{font-family:'Anton';font-size:24px;color:#fff}
.embed__box code{font-family:'Space Mono',monospace;font-size:12.5px;background:#000;color:var(--flut);padding:3px 8px;border-radius:6px}
.embed__box ol{text-align:left;max-width:540px;font-size:13.5px;line-height:1.7;color:#c2cbc4;margin-top:4px;padding-left:18px}
.embed__box ol b{color:#fff}

/* Live-Widget-Panels */
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wpanel{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--linie);box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.wpanel__head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:var(--ink2);border-bottom:1px solid var(--linie)}
.wsrc{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--grau-l)}
.wpanel__body{padding:14px}
.wloading{padding:42px 16px;text-align:center;color:#69716a;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.04em;line-height:1.7}
/* Dunkle Scoreboard-Frames für die Live-Widgets (gestapelt) */
.board__stack{display:flex;flex-direction:column;gap:22px}
.board__widget{padding:16px;background:#16130f;position:relative}
/* Eigene dunkle "Nächstes Spiel"-Anzeigetafel (Daten aus dem Widget gezogen) */
.nm{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:30px 18px}
.nm__team{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.nm__crest{height:64px;width:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.nm__name{font-family:'Anton',sans-serif;font-size:clamp(18px,2.6vw,27px);color:#fff;letter-spacing:.01em;line-height:1;text-transform:uppercase}
.nm__side{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau-l)}
.nm__mid{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:118px}
.nm__date{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;color:#cfd6d0;text-transform:uppercase;white-space:nowrap}
.nm__time{font-family:'Anton',sans-serif;font-size:40px;color:var(--flut);line-height:1}
.nm__comp{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--grau);text-align:center}
@media(max-width:600px){.nm{gap:6px;padding:22px 8px}.nm__crest{height:42px}.nm__name{font-size:14px;line-height:1.05}.nm__side{font-size:9px;letter-spacing:.08em}.nm__mid{min-width:0;gap:3px}.nm__time{font-size:28px}.nm__date{font-size:10px;letter-spacing:.04em}.nm__comp{font-size:8.5px}.nm__mono{width:42px;height:42px;font-size:16px}}
.nm__mono{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#1c1a16,#0d0b08);border:1px solid rgba(255,255,255,.14);font-family:'Anton',sans-serif;font-size:23px;color:var(--flut);box-shadow:0 6px 14px rgba(0,0,0,.5)}
@media(max-width:600px){.board__widget{padding:5px}.live .wrap,.live .container{padding-left:10px;padding-right:10px}}
.board__screen{background:transparent;border-radius:10px;overflow:hidden;min-height:96px}
.board__screen .fussballde_widget{width:100%}
.board__screen .wloading b{color:var(--gruen);display:block;font-size:13px;margin-bottom:4px}
.wnote{font-family:'Space Mono',monospace;font-size:11px;color:var(--grau);text-align:center;margin-top:18px}
.wnote a{color:var(--gruen)}
@media(max-width:1000px){.wgrid{grid-template-columns:1fr}}

/* ---------- FEATURE-SECTION (Handball/KungFu/Laufen) ---------- */
.feat__row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.feat__row.rev{direction:rtl}.feat__row.rev>*{direction:ltr}
.feat__media{aspect-ratio:4/3;border-radius:var(--r);position:relative;overflow:hidden;border:1px solid var(--linie-d);background:linear-gradient(135deg,var(--gruen-d),var(--ink2))}
.feat__media::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 10px,transparent 10px 20px)}
.feat__media .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,.6)}
.feat__media .ph svg{width:74px;height:74px;color:rgba(255,255,255,.9);display:block}
.feat__media .ph span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.feat h2{font-size:clamp(30px,4.6vw,52px);margin:14px 0 18px}
.feat p{color:var(--grau);font-size:16px;line-height:1.65;margin-bottom:14px}
.feat .lead{font-size:18px;color:#2a322c}
.feat .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.feat .tags span{font-family:'Space Mono',monospace;font-size:11.5px;color:var(--gruen);border:1px solid rgba(0,103,63,.25);border-radius:999px;padding:6px 12px}
.feat--dark{background:var(--ink);color:#fff}
.feat--dark h2{color:#fff}.feat--dark p{color:var(--grau-l)}.feat--dark .lead{color:#e6ebe7}
.feat--dark .tags span{color:var(--flut);border-color:rgba(35,224,138,.3)}
.heritage{display:inline-flex;flex-direction:column;gap:2px;background:var(--gruen);color:#fff;border-radius:12px;padding:16px 20px;margin-bottom:22px}
.heritage .y{font-family:'Anton';font-size:34px;line-height:.9}
.heritage .t{font-size:12.5px;opacity:.9}

/* ---------- AMELAND ---------- */
.ameland{background:linear-gradient(160deg,var(--gruen-d),var(--ink));color:#fff;position:relative;overflow:hidden}
.ameland::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:repeating-linear-gradient(90deg,transparent 0 40px,rgba(255,255,255,.04) 40px 41px);-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000)}
.ameland__in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ameland .stamp{display:inline-block;border:2px dashed rgba(255,255,255,.4);border-radius:10px;padding:8px 14px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--flut);transform:rotate(-3deg);margin-bottom:20px}
.ameland h2{font-size:clamp(34px,5.4vw,60px);color:#fff;margin-bottom:18px}
.ameland p{color:#cdd6cf;font-size:16.5px;line-height:1.65;margin-bottom:14px;max-width:520px}
.ameland__cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.acard2{background:rgba(255,255,255,.05);border:1px solid var(--linie);border-radius:var(--r);padding:22px;backdrop-filter:blur(4px)}
.acard2 .n{font-family:'Anton';font-size:30px;color:var(--flut);line-height:.9}
.acard2 .l{font-size:13px;color:#cdd6cf;margin-top:8px}
.ameland__photo{aspect-ratio:16/9;background-position:center;border-radius:var(--r);border:1px solid var(--linie);box-shadow:0 34px 70px -30px rgba(0,0,0,.7)}
.sponsor{height:auto;min-height:78px}
.sponsor img.ksst{max-height:78px;max-width:215px}

/* ---------- INSTAGRAM ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.ig{aspect-ratio:1;border-radius:var(--r);overflow:hidden;position:relative;background:linear-gradient(135deg,var(--gruen-d),var(--ink2));border:1px solid var(--linie-d)}
.ig::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 8px,transparent 8px 16px)}
.ig .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-size:26px}
.ig .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:12px;font-weight:600;z-index:2}
/* Verlinkte Kacheln (seit 09.09.2026 alle vier).
   ⚠️ background-size/position gehoeren hierher, nicht ins style-Attribut:
   Dort steht nur die Adresse des Bildes, damit die Vorgaben an EINER
   Stelle liegen. "top center" wie ueberall sonst - mittig zentriert
   schneidet auf einem Mannschaftsfoto die Koepfe ab. */
.ig--link{display:block;background-size:cover;background-position:top center;text-decoration:none}
.ig--link:hover{transform:translateY(-3px);border-color:var(--gruen)}
.ig--link{transition:transform .2s var(--ease),border-color .2s}
/* ⚠️ Der Pfeil steht IM Text, nicht nur beim Ueberfahren: Auf dem Handy
   gibt es kein Hover - ohne ihn saehe niemand, dass die Kachel nach
   draussen fuehrt. Dieselbe Ueberlegung wie bei "Visitenkarte →". */
.ig__pfeil{margin-left:6px;display:inline-block}
.ig--link:hover .ig__pfeil{transform:translate(2px,-2px)}
.ig__pfeil{transition:transform .2s var(--ease)}
.ig-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- VEREIN / STATS ---------- */
.about__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.about p.lead{font-size:18px;line-height:1.7;margin-bottom:18px}

/* ---------- "MEHR ALS EIN VEREIN" AUF DUNKEL ----------
   Peter, 04.09.2026: Instagram wieder hell, dafuer dieser Abschnitt
   dunkel. Er steht zwischen "Neues aus dem Verein" (hell) und dem
   Fanshop (hell) - also ein dunkler Block als Zaesur mittendrin.

   ⚠️ Auf dunklem Grund reicht es NICHT, nur Hintergrund und Textfarbe zu
   drehen. Jede Farbe, die auf Weiss gerechnet war, muss mit: die
   Kleinschrift (--gruen ist auf --ink praktisch unlesbar), die
   Trennlinien der Zahlenkacheln (--linie-d ist dunkel auf dunkel, also
   unsichtbar) und die Kachelflaechen selbst. */
.about{background:var(--ink);color:#fff}
.about .sec-num{color:var(--flut)}
.about h2{color:#fff}
.about p.lead{color:#e3e9e4}
.about p{color:var(--grau-l)}
/* Die Haarlinien zwischen den Kacheln entstehen aus dem gap - auf dunklem
   Grund braucht der Hintergrund darunter die helle Linienfarbe. */
.about .stats{background:var(--linie)}
.about .stat{background:rgba(255,255,255,.05)}
.about .stat .n{color:var(--flut)}
.about .stat .l{color:var(--grau-l)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linie-d);border-radius:var(--r);overflow:hidden}
.stat{background:#fff;padding:30px 26px}
.stat .n{font-family:'Anton';font-size:52px;color:var(--gruen);line-height:.9}
.stat .l{font-size:13.5px;color:var(--grau);margin-top:8px}

/* ---------- MITMACHEN ---------- */
.join{background:var(--ink);color:#fff;text-align:center}
.join h2{font-size:clamp(34px,6vw,72px);color:#fff;margin-bottom:18px}
.join p{color:var(--grau-l);max-width:560px;margin:0 auto 30px;font-size:17px}
.join__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- SPONSOREN ---------- */
.sponsors{background:#fff;padding:60px 0;border-top:1px solid var(--linie-d);border-bottom:1px solid var(--linie-d)}
.sponsors h3{text-align:center;font-size:13px;font-family:'Space Mono',monospace;letter-spacing:.2em;color:var(--grau);text-transform:uppercase;margin-bottom:28px;font-weight:400}
.sponsor-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}
.sponsor{height:74px;display:flex;align-items:center;justify-content:center;padding:8px 20px;transition:transform .2s var(--ease)}
.sponsor img{max-height:48px;max-width:155px;width:auto;object-fit:contain}
.sponsor:hover{transform:translateY(-3px)}
/* Stil wie die "Mitglied werden"-Knoepfe (Pillenform, Umriss) - aber in
   Vereinsgruen, weil der Sponsorenbereich weissen Hintergrund hat. */
.sponsor--cta{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gruen);border-radius:999px;background:transparent;color:var(--gruen);font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:15px;letter-spacing:0;padding:14px 26px;min-width:150px;height:auto;min-height:0;align-self:center;transition:transform .2s var(--ease),background .2s,color .2s}
.sponsor--cta:hover{background:var(--gruen);color:#fff;transform:translateY(-2px)}

/* ---------- SPONSOREN-LAUFBAND ----------
   Ab acht Logos laeuft das Band durch (scg_sponsoren_band()).

   Die Reihe steht ZWEIMAL im Streifen, verschoben wird um genau -50%:
   Ist die erste Haelfte durchgelaufen, steht die zweite exakt dort, wo
   die erste begann - die Schleife schliesst ohne Sprung. Deshalb darf
   hier nirgends eine gerade Prozentzahl gegen eine feste Pixelbreite
   getauscht werden.

   Die Dauer liefert PHP als --lauf, damit das Tempo unabhaengig von der
   Zahl der Partner gleich bleibt. */
.sponsor-lauf{position:relative;overflow:hidden;
  /* Weiche Kanten links und rechts: Die Logos sollen aus dem Weiss
     auftauchen, nicht an einer harten Kante abgeschnitten werden. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
.sponsor-lauf__spur{display:flex;width:max-content;animation:scg-lauf var(--lauf,60s) linear infinite}
.sponsor-lauf__reihe{display:flex;align-items:center;flex:0 0 auto}
.sponsor-lauf__reihe .sponsor{flex:0 0 auto}
/* Anhalten, solange die Maus darauf liegt - wer ein Logo lesen oder
   anklicken will, soll es nicht jagen muessen. */
.sponsor-lauf:hover .sponsor-lauf__spur{animation-play-state:paused}
/* Dasselbe fuer die Tastatur: Sobald ein verlinktes Logo den Fokus hat,
   steht das Band. Ohne das waere es per Tab nicht bedienbar. */
/* ⚠️ :has(:focus-visible), NICHT :focus-within.
   Mit :focus-within blieb das Band nach einem Mausklick auf ein Logo
   dauerhaft stehen: Der Link behaelt den Fokus, auch wenn das Ziel in
   einem neuen Tab aufgeht - kommt man zurueck, steht das Band still und
   niemand versteht, warum (Peter, 09.09.2026).
   :focus-visible setzt der Browser nur bei TASTATURfokus. Damit bleibt
   der eigentliche Zweck erhalten - wer sich durchtabbt, kann das Logo
   lesen und treffen -, ohne dass ein Klick die Animation einfriert. */
.sponsor-lauf__spur:has(:focus-visible){animation-play-state:paused}
@keyframes scg-lauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Ohne Bewegung: ruhige, umbrechende Reihe statt Laufband. Die Kopie
   waere sonst doppelt sichtbar. */
@media(prefers-reduced-motion:reduce){
  .sponsor-lauf{-webkit-mask-image:none;mask-image:none}
  .sponsor-lauf__spur{width:auto;flex-wrap:wrap;justify-content:center}
  .sponsor-lauf__reihe{flex-wrap:wrap;justify-content:center}
  .sponsor-lauf__reihe[aria-hidden="true"]{display:none}}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#cfd6d0;padding:76px 0 34px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--linie)}
.foot__brand img{height:64px;width:auto;margin-bottom:16px}
.foot__grid h4{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:400}
.foot__grid a{display:block;color:var(--grau-l);font-size:14px;padding:5px 0;transition:color .2s}
.foot__grid a:hover{color:var(--flut)}
.foot__grid p{color:var(--grau-l);font-size:14px;line-height:1.7}
.social{display:flex;gap:12px;margin-top:16px}
.social a{width:42px;height:42px;border:1px solid var(--linie);border-radius:12px;display:flex;align-items:center;justify-content:center;transition:.2s}
.social a:hover{background:var(--gruen);border-color:var(--gruen);transform:translateY(-2px)}
.social svg{width:19px;height:19px;fill:#fff}
.foot__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:26px;font-size:12.5px;color:#6f786f;font-family:'Space Mono',monospace}
.foot__bottom a{color:#6f786f}.foot__bottom a:hover{color:var(--flut)}

/* ---------- REVEAL ---------- */
.reveal{opacity:1}
html.reveal-on .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.reveal-on .reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  /* Wappen bleibt sichtbar - es wandert aus der zweiten Spalte oben rechts
     in die Ecke. Das Etikett wird schmaler (Jahr in Zeile 2) und die
     Headline bekommt eine Hoechstbreite; zusammen entsteht rechts genau der
     Platz, in dem das Wappen steht. */
  .hero__in{grid-template-columns:1fr}
  /* right:24px = buendig mit dem Textrand. Der Puls waechst um 0,15x der
     Breite nach jeder Seite; die 24px fangen das ab, sonst schneidet
     .hero{overflow:hidden} das Wappen rechts an.
     Die Headline bekommt KEINE Hoechstbreite - schon 132px weniger haben
     "EIN VEREIN. FUENF WELTEN." in vier Zeilen zerlegt. Stattdessen ist das
     Wappen so bemessen, dass es auch beim groessten Puls neben der Schrift
     bleibt (gemessen bei 390px: Zeile 1 endet bei 210px, Wappen beginnt
     bei 234px). */
  .hero__logo{--wappen:min(192px,29vw);position:absolute;top:-6px;right:24px;z-index:1}
  .hero__tag{flex-wrap:wrap;max-width:calc(100% - 120px);row-gap:2px}
  .hero__tag-jahr{flex-basis:100%}
  .hero__tag-jahr::before{display:none}
  .abt__grid{grid-template-columns:repeat(2,1fr)}
  .feat__row,.ameland__in,.about__grid{grid-template-columns:1fr;gap:34px}
  .feat__row.rev{direction:ltr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
/* Unter ~360px reicht der Platz rechts der Headline nicht mehr fuer die
   24vw - dort muss das Wappen deutlich kleiner werden. */
@media(max-width:359px){
  /* Unter 360px braucht die Headline fast die ganze Breite. Damit rechts
     ueberhaupt Platz fuer das Wappen bleibt, wird sie hier etwas kleiner,
     das Etikett schmaler und das Wappen deutlich kompakter. */
  .hero h1{font-size:42px}
  /* Das Wappen ist hier nur ~15vw breit, also darf das Etikett wieder
     breiter werden - sonst zerfaellt 'GREVEN · WESTFALEN' in zwei Zeilen. */
  .hero__tag{font-size:10.5px;padding:6px 12px;max-width:calc(100% - 84px)}
  .hero__logo{--wappen:18vw}
}
/* ⚠️ Umschaltpunkt fuer die Navigation: 1000px, NICHT 760px.
   Bei 820px brach die Wortmarke auf 126px Hoehe um und das Dokument wurde
   849px breit - die ganze Seite liess sich seitlich schieben. Sieben
   Menuepunkte plus Knopf passen schlicht nicht neben die Wortmarke.
   Bei 970px brach sie immer noch (84px). Der Wert steht AUCH in
   js/site.js (MOB) - beide muessen zusammenpassen,
   sonst navigiert "Abteilungen" dazwischen, statt aufzuklappen. */
@media(max-width:1000px){
  nav.links,.nav__cta{display:none}.burger{display:block}
  nav.links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--ink);padding:16px 24px;gap:4px;border-bottom:1px solid var(--linie)}
  nav.links.open a{padding:12px 0;border-bottom:1px solid var(--linie)}
}
@media(max-width:760px){
  .board__body{grid-template-columns:1fr;gap:22px}.vs{order:-1}
  section{padding:68px 0}
}
@media(max-width:480px){
  .abt__grid,.foot__grid,.ameland__cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}html.reveal-on .reveal{opacity:1;transform:none;transition:none}.hero__logo::after{display:none}}
/* === v3-Anpassungen === */
.fb-banner{position:relative;height:300px;border-radius:var(--r);overflow:hidden;background:#0c0a08 center/cover no-repeat;margin-bottom:30px;border:1px solid var(--linie)}
.fb-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,9,.88),transparent 55%)}
.fb-banner__cap{position:absolute;left:22px;bottom:18px;z-index:2;font-family:'Anton',sans-serif;font-size:clamp(20px,3.5vw,28px);color:#fff;letter-spacing:.02em;text-transform:uppercase}
.board__screen{background:transparent;border-radius:10px;overflow:hidden}
.board__screen .fussballde_widget{width:100%}
.board__screen iframe{width:100%!important;border:0;display:block}
/* ---------- Vorlaeufige Hoehe der FUSSBALL.DE-Widgets ----------
   Kein Eingriff ins Widget: widgets.js legt das iframe OHNE Hoehe an, der
   Browser gibt ihm dann seine Standardhoehe von 150 px, und erst eine
   postMessage-Nachricht setzt spaeter die echte Hoehe als Inline-Stil -
   der gewinnt gegen jede Regel hier.

   ZWECK: Die Seite sprang. 150 px -> ~1300 px schiebt alles darunter nach
   unten, mitten im Lesen. Diese Regeln halten den Platz von Anfang an frei.

   ⚠️ Zuerst stand hier, das behebe auch die FEHLENDEN VEREINSWAPPEN (ueber
   ein groesseres inneres Sichtfeld fuer die loading="lazy"-Bilder). Das war
   falsch und ist widerlegt: Die Wappen fehlen, weil FUSSBALL.DE ihre
   Bildadresse zeitweise mit next.fussball.de statt www.fussball.de baut -
   und dort antwortet der Server mit 404. Nachweisbar auch ohne jedes
   iframe, indem man das Widget als eigene Seite aufruft. Siehe CLAUDE.md,
   Abschnitt "KORREKTUR: die fehlenden Wappen liegen an FUSSBALL.DE", und
   tests/widget-logos-pruefen.js.

   Die Werte sind gemessene Naeherungen (Tabelle mit 16 Mannschaften). Sie
   muessen nicht genau stimmen - sie ersetzen nur die 150 px, bis die echte
   Hoehe kommt. js/site.js gibt die Reservierung danach wieder frei.

   min-height am CONTAINER haelt den Platz, BEVOR es das iframe gibt
   (widgets.js laeuft mit defer erst nach dem Seitenaufbau); die Hoehe am
   IFRAME verhindert, dass es zwischendurch als 150-px-Streifen aufblitzt. */
.board__screen .fussballde_widget{min-height:640px}
.board__screen .fussballde_widget iframe{height:640px}
.board__screen .fussballde_widget[data-type="table"]{min-height:1280px}
.board__screen .fussballde_widget[data-type="table"] iframe{height:1280px}
.board__screen .fussballde_widget[data-type="club-matches"]{min-height:900px}
.board__screen .fussballde_widget[data-type="club-matches"] iframe{height:900px}
.board__screen .fussballde_widget[data-type="next-match"]{min-height:320px}
.board__screen .fussballde_widget[data-type="next-match"] iframe{height:320px}
@media(max-width:700px){
  .board__screen .fussballde_widget{min-height:820px}
  .board__screen .fussballde_widget iframe{height:820px}
  .board__screen .fussballde_widget[data-type="table"]{min-height:1500px}
  .board__screen .fussballde_widget[data-type="table"] iframe{height:1500px}
  .board__screen .fussballde_widget[data-type="club-matches"]{min-height:1200px}
  .board__screen .fussballde_widget[data-type="club-matches"] iframe{height:1200px}
  .board__screen .fussballde_widget[data-type="next-match"]{min-height:360px}
  .board__screen .fussballde_widget[data-type="next-match"] iframe{height:360px}
}
/* ⚠️ Sobald die echte Hoehe per postMessage da ist, setzt js/site.js
   min-height auf 0 - sonst bliebe der Kasten zu hoch, wenn die Tabelle
   kuerzer ausfaellt als der Schaetzwert. */
.fd-hide{display:none!important}
/* Tabelle wird VOLLSTAENDIG gezeigt.
   Frueher auf ~4 Plaetze geklippt - dabei war der eigene Verein unsichtbar,
   sobald er nicht vorne stand (Stand 08/2026: Platz 6). Ein besserer Pixelwert
   hilft nicht: Das fussball.de-Widget ist ein abgeschottetes iframe, in dem
   sich weder scrollen noch die eigene Zeile finden laesst - und die Position
   aendert sich ohnehin jede Woche. */
.js-bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.feat__media.js-bg{background-color:var(--ink2);border:0}
.feat__media.js-bg::after{opacity:.45}
.ig.js-bg .ph{display:none}
/* Next-Match: Quelle full-size hinter der Karte rendern (lädt + auslesbar), unsichtbar */
.nm-source{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;z-index:0}
.nm{position:relative;z-index:2;background:#16130f}
.shop{background:var(--kreide)}
.shop__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.scard{background:#fff;border:1px solid var(--linie-d);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-height:250px;transition:transform .25s var(--ease),box-shadow .25s}
.scard:hover{transform:translateY(-6px);box-shadow:0 26px 54px -28px rgba(4,51,31,.5)}
.scard__img{height:240px;background:#edefed center/contain no-repeat;border-bottom:1px solid var(--linie-d)}
.scard__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.scard__tag{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);margin-bottom:6px}
.scard h3{font-size:24px;color:var(--ink2);margin-bottom:8px}
.scard p{font-size:13px;color:var(--grau);flex:1;line-height:1.5}
.scard__go{margin-top:14px;font-family:'Space Mono',monospace;font-size:12px;color:var(--gruen);letter-spacing:.06em}
.shop__cta{text-align:center;margin-top:34px}
.sincestrip{background:#0a0c09;display:flex;justify-content:center;align-items:center;padding:50px 24px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.sincestrip img{max-width:640px;width:100%;height:auto;display:block}
@media(max-width:1000px){.shop__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.shop__grid{grid-template-columns:repeat(2,1fr);gap:12px}.fb-banner{height:210px}}

/* ---------- HAUPTMENÜ / DROPDOWNS ---------- */
.menu{display:flex;gap:19px;align-items:center;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
/* ⚠️ Zwischen Link und Klappmenue liegen 14 px Luft - und der gruene
 * Unterstrich (nav.links a::after) wird mit bottom:-2px ZWEI PIXEL
 * UNTERHALB des Linkfeldes gezeichnet. Wer den Strich anvisiert, steht
 * damit ausserhalb der Hover-Flaeche: Das Menue klappt zu, die Bruecke
 * des offenen Klappmenues faengt den Zeiger wieder ein, es klappt auf -
 * und flackert, solange der Zeiger auf dieser Kante steht.
 *
 * Gemessen am 16.09.2026 auf der Live-Demo: Der Hover haelt bis y=88,
 * das Linkfeld endet bei 89, der Unterstrich liegt bei 89-91.
 *
 * ⚠️ Die Bruecke haengt am <li> und NICHT am Klappmenue. .drop::before
 * gibt es zwar schon, aber .drop hat im geschlossenen Zustand
 * visibility:hidden - und ein unsichtbares Element bekommt ueberhaupt
 * keine Zeigerereignisse. Es kann den Zeiger also erst auffangen, wenn
 * das Menue bereits offen ist; genau daraus entsteht das Pendeln.
 *
 * 💡 Optisch aendert sich nichts: Die Flaeche ist leer und deckt nur die
 * Luecke zwischen Linkunterkante und Klappmenue ab. */
.menu>li.has::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:18px}
.menu>li>a{display:inline-flex;align-items:center;gap:5px}
.menu>li.has>a::before{content:"";order:2;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.6;margin-left:1px}
.drop{position:absolute;top:calc(100% + 14px);left:-16px;min-width:250px;background:#16130f;border:1px solid var(--linie);border-radius:14px;padding:10px;opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .14s var(--ease) .18s,transform .14s var(--ease) .18s,visibility 0s linear .32s;box-shadow:0 34px 70px -22px rgba(0,0,0,.85);z-index:70}
.drop::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
/* Aufklappen per HOVER oder per KLICK.
   Der Klick ist kein Luxus: Auf Tablets und Touch-Notebooks gibt es kein
   Hover, und seit die Oberpunkte nicht mehr navigieren, waere das
   Untermenue dort sonst gar nicht zu oeffnen. */
/* ⚠️ Zwischen zwei Menuepunkten liegt eine 13 px breite tote Zone: Dort
 * gehoert der Zeiger dem <ul>, keinem Punkt. Gemessen am 16.09.2026 auf
 * der Live-Seite (x 532-542 zwischen "Abteilungen" und "Fanshops").
 * Wer von einem Punkt zum naechsten faehrt, verliert den Hover also
 * zwangslaeufig fuer einen Moment - und mit einer Ausblendzeit von 0,2 s
 * blendete das 890 px breite Mega-Menue dabei halbtransparent aus,
 * waehrend das naechste schon aufging. Das war das Flackern im Video.
 *
 * 💡 Die Loesung ist kein Zumauern der Luecke - ein Element ueber der
 * Linkzeile wuerde das Anklicken der Menuepunkte schlucken -, sondern
 * eine kurze NACHLAUFZEIT beim Schliessen: 0,18 s. Eine Luecke von 13 px
 * ueberfaehrt man in deutlich weniger; das Menue merkt davon nichts mehr.
 * Wer wirklich weggeht, sieht es trotzdem sofort zugehen. */
.menu>li:hover>.drop,.menu>li.open>.drop{opacity:1;visibility:visible;transform:none;transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s}
/* ⚠️ Die Nachlaufzeit oben hat einen Nebeneffekt, den sie allein nicht
 * loesen kann: Beim Wechsel von einem Menuepunkt zum naechsten bleibt das
 * alte Klappmenue noch 0,18 s stehen, waehrend das neue schon aufgeht -
 * fuer einen Moment liegen zwei uebereinander, und das 780 px breite
 * Mega-Menue loest sich dabei hinter dem kleinen auf. Genau das war der
 * Rest des Flackerns, den Peter nach dem ersten Nachbessern noch sah.
 *
 * 💡 Deshalb die Unterscheidung: Der Nachlauf gilt nur, solange der Zeiger
 * NIRGENDWO im Menue ist - also in der 13-px-Luecke zwischen zwei Punkten.
 * Sobald er auf einem anderen Punkt angekommen ist, schliesst dieses hier
 * sofort. Dann gibt es keine Ueberlappung mehr.
 *
 * ⚠️ Zwei Schreibweisen fuer dieselbe Sache: Die erste erreicht nur die
 * Punkte RECHTS vom gehoverten (Geschwisterwahl kennt keine Rueckrichtung),
 * die zweite ueber :has() alle. Faellt :has() in einem alten Browser aus,
 * bleibt die erste Regel - und schlimmstenfalls das Verhalten von vorher. */
.menu>li:hover~li>.drop,
.menu:has(>li:hover)>li:not(:hover)>.drop{transition:opacity .1s var(--ease),transform .1s var(--ease),visibility 0s linear .1s}
.drop a{display:block;padding:8px 11px;border-radius:9px;font-size:13.5px;font-weight:500;color:#cfd6d0;white-space:nowrap}
.drop a::after{display:none!important}
.drop a:hover{background:rgba(255,255,255,.07);color:#fff}
.drop .grp{margin-top:5px;padding-top:6px;border-top:1px solid var(--linie)}
.grp__t{display:block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);padding:7px 11px 3px}
.drop .grp a{padding-left:20px}
.drop__note{display:block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.09em;color:var(--grau);padding:9px 11px 3px;margin-top:5px;border-top:1px solid var(--linie)}
/* ⚠️ Die Spalten sind seit dem 05.10.2026 UNTERSCHIEDLICH breit: Fussball
   fuehrt 29 Mannschaften, Kung Fu zwei Eintraege. Gleich breite Spalten
   hiessen entweder eine endlose Fussballspalte oder viel Leerraum rechts.
   Die Gesamtbreite bleibt bei 890px - das Menue ist am Menuepunkt
   zentriert (left:50%), ein breiteres liefe auf schmalen Fenstern aus dem
   Bild. */
.mega{left:50%;transform:translateX(-50%) translateY(-7px);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.35fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.9fr);gap:0 14px;min-width:890px;padding:16px;max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
.menu>li:hover>.mega,.menu>li.open>.mega{transform:translateX(-50%)}
.mega .col__t{display:block;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--flut)!important;text-transform:uppercase;padding:4px 10px 9px;border-bottom:1px solid var(--linie);border-radius:0;margin-bottom:7px}
.mega .col__t:hover{background:transparent;color:#fff!important}
.mega a{font-size:12.6px;padding:6px 10px;white-space:normal;line-height:1.35}
.mega .grp__t{padding:7px 10px 2px}
/* Lange Gruppen (Junioren, Juniorinnen) laufen zweispaltig - sonst ist
   das Menue hoeher als der Bildschirm. Die Ueberschrift laeuft ueber
   beide Spalten, ein Eintrag wird nie umgebrochen. */
.mega .grp.viele{columns:2;column-gap:8px}
.mega .grp.viele .grp__t{column-span:all}
.mega .grp.viele a{break-inside:avoid;padding-top:4px;padding-bottom:4px}

@media(max-width:1060px){
  .menu{gap:13px}
  .menu>li>a{font-size:12.6px}
  .mega{min-width:0;width:min(94vw,780px);grid-template-columns:repeat(3,1fr);gap:0 8px}
  .mega .mcol{margin-bottom:6px}
}
@media(max-width:1000px){
  nav.links.open{max-height:calc(100vh - 74px);overflow-y:auto;overflow-x:hidden;padding-bottom:24px}
  .menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .menu>li>a{justify-content:space-between;padding:13px 0!important;border-bottom:1px solid var(--linie)}
  .menu>li.has>a::before{border-left-width:4.5px;border-right-width:4.5px;border-top-width:5px;transition:transform .2s}
  .menu>li.open>a::before{transform:rotate(180deg)}
  /* Im Handy-Menue stapeln sich die Punkte - die Bruecke wuerde dort ueber
     dem naechsten Punkt liegen und dessen Antippen schlucken. */
  .menu>li.has::after{display:none}
  /* Im Handy-Menue behalten .drop/.mega sonst die width:min(94vw,780px) aus
     der 1060px-Regel - zusammen mit dem Einzug links ragten sie ueber den
     Rand hinaus und die Seite liess sich quer schieben. width:auto raeumt
     das ab; box-sizing faengt den Einzug ab. */
  .drop,.mega{position:static;display:none;opacity:1;visibility:visible;transform:none!important;min-width:0;width:auto;max-width:100%;box-sizing:border-box;background:transparent;border:0;box-shadow:none;padding:2px 0 10px 12px;grid-template-columns:1fr;max-height:none;overflow:visible}
  .drop::before{display:none}
  .menu>li.open>.drop{display:block}
  .menu>li.open>.mega{display:grid}
  .drop a{padding:9px 4px!important;border-bottom:0!important;font-size:13px;white-space:normal}
  .mega .col__t{padding:12px 4px 7px!important;margin-bottom:0;font-size:14px}
  .grp__t{padding:8px 4px 2px}
  .drop .grp a{padding-left:14px!important}
  .drop__note{padding:8px 4px 2px}
}

/* ---------- AKTUELLES / BEITRAEGE ---------- */
.news{background:var(--kreide)}
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ncard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie-d);border-radius:var(--r);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ncard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(0,0,0,.35)}
/* Dieselbe Sache wie bei den Mannschafts- und Abteilungsbildern:
   Ein 16:10-Ausschnitt aus einem Sportfoto schneidet mittig gesetzt
   genau die Koepfe ab. */
.ncard__img{aspect-ratio:16/10;background:var(--ink2) top center/cover no-repeat}
.ncard__b{padding:20px 20px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.ncard__cat{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.ncard h3{font-family:'Anton',sans-serif;font-size:20px;line-height:1.14;color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.ncard__x{color:var(--grau-d);font-size:14px;line-height:1.6}
.ncard__d{margin-top:auto;font-family:'Space Mono',monospace;font-size:11px;color:var(--grau);letter-spacing:.06em}
/* Einleitung ueber der Beitragsliste. Breite begrenzt, damit die Zeilen
   lesbar bleiben - ueber die volle Breite waeren es weit ueber 100
   Zeichen. */
.news__intro{max-width:760px;margin:0 0 42px}
.news__intro p{color:var(--grau-d);font-size:16.5px;line-height:1.7;margin:0 0 14px}
.news__intro p:last-child{margin-bottom:0}
.news__empty{color:var(--grau-d);font-size:15px;grid-column:1/-1;padding:26px;border:1px dashed var(--linie-d);border-radius:var(--r);text-align:center}
.news__more{margin-top:34px;text-align:center}
/* Der Knopf unter "Mehr als ein Verein" steht mittig in SEINER Spalte -
   der Fliesstext darueber bleibt linksbuendig. */
.about__cta{margin-top:26px;text-align:center}
/* ---------- ARTIKEL / ARCHIV ---------- */
/* Rueckweg zur Startseite - steht oben IM Inhaltsbereich, nicht ueber der
   Ueberschrift. Die Bereiche sind alle hell (--kreide), deshalb Vereinsgruen
   statt der hellen Schrift von vorher: auf Weiss kommt #00673F auf 6,4:1 und
   besteht damit WCAG AA. */
.zurueck{margin:0 0 26px}
p.zurueck a{display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:color .18s,border-color .18s}
p.zurueck a span{transition:transform .18s}
p.zurueck a:hover{color:var(--gruen-l);border-bottom-color:var(--gruen-l)}
p.zurueck a:hover span{transform:translateX(-3px)}
.phead{background:var(--ink);color:#fff;padding:76px 0 54px;border-bottom:1px solid var(--linie)}
.phead .sec-num{color:var(--flut)}
.phead h1{font-family:'Anton',sans-serif;font-size:clamp(30px,5vw,58px);line-height:1.02;text-transform:uppercase;letter-spacing:.005em;margin:10px 0 14px}
.phead__meta{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--grau-l);display:flex;gap:16px;flex-wrap:wrap}
.pbody{padding:56px 0 84px}
.pbody .inner{max-width:760px;margin:0 auto}
.pbody p{color:var(--grau-d);font-size:16.5px;line-height:1.78;margin-bottom:18px}
.pbody h2{font-family:'Anton',sans-serif;font-size:27px;text-transform:uppercase;margin:34px 0 12px;color:var(--ink)}
.pbody h3{font-size:19px;font-weight:700;margin:26px 0 10px;color:var(--ink)}
.pbody img{max-width:100%;height:auto;border-radius:var(--r);margin:22px 0}
/* Bild der Fehlerseite: ueber die volle Inhaltsspalte. Die mitgelieferte
   Zeichnung ist eine SVG - ohne width:100% bliebe sie bei ihrer
   Eigengroesse stehen, sobald die Spalte breiter ist. */
.f404__img{width:100%}
/* Die einheitliche Bildbreite auf den Info-Seiten: die volle Textspalte.
   Peter, 04.09.2026: "die Größe der Bilder vereinheitlichen, am besten
   irgendwo dazwischen." Vorher lief das Luftbild ueber die ganze Sektion
   (1152 px), das Foto der Geschaeftsstelle stand mit seiner Eigengroesse
   von 500 px daneben - dazwischen liegt die Spalte mit 760 px.
   ⚠️ Der Klassenname bleibt "breit", obwohl die Klasse jetzt weniger
   breit macht als vorher. Er steht im gespeicherten Seiteninhalt der
   Sportstaetten-Seite; ihn umzubenennen hiesse, diesen Inhalt auf jeder
   laufenden Installation nachziehen zu muessen - Aufwand und Risiko ohne
   Gegenwert. */
/* Vorschau der beiden Logofassungen auf der Downloadseite.
   Weisser Karton, weil beide Dateien einen weissen Hintergrund haben -
   ohne den Karton stuenden zwei weisse Rechtecke auf dem hellen Grund
   der Seite und saehen aus wie ein Darstellungsfehler. */
.logovorschau{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:22px 0 30px}
.logovorschau figure{margin:0;background:#fff;border:1px solid var(--linie-d);border-radius:var(--r);padding:26px 18px 0;text-align:center}
.logovorschau img{width:auto;max-height:190px;margin:0 auto;border-radius:0}
.logovorschau figcaption{font-size:13.5px;line-height:1.5;color:var(--grau-d);padding:16px 2px 18px}
.logovorschau figcaption strong{color:var(--ink)}
@media(max-width:560px){.logovorschau{grid-template-columns:1fr}}
.pbody .breit{margin:26px 0 30px}
.pbody .breit img{display:block;width:100%;margin:0}
.pbody ul,.pbody ol{margin:0 0 20px 20px;color:var(--grau-d);line-height:1.75}
.pbody li{margin-bottom:7px}
.pbody a{color:var(--gruen);text-decoration:underline}
.pbody blockquote{border-left:3px solid var(--gruen);padding:6px 0 6px 20px;margin:24px 0;font-size:19px;color:var(--ink);font-style:italic}
.scorebox{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:var(--r);padding:20px 24px;margin-bottom:26px}
.scorebox .sb__l{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-l)}
.scorebox .sb__v{font-family:'Anton',sans-serif;font-size:26px;color:var(--flut);line-height:1}
.scorebox .sb__i{display:flex;flex-direction:column;gap:4px}
.pnav{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--linie-d);margin-top:44px;padding-top:24px;font-size:14px}
.pnav a{color:var(--gruen);font-weight:600}
/* ---------- MANNSCHAFTEN ---------- */
.teams{padding:20px 0 0}
/* Drei nebeneinander (Peter, 04.09.2026). Darunter zwei, auf dem Handy
   eine - bei drei Spalten waere der Sprung von 3 auf 1 zu grob. */
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Zweite Kategorie: kompakt, ohne Foto, zwei Spalten (Peter, 04.09.2026).
   Steht direkt unter den grossen Kacheln - deshalb nur ein kleiner
   Abstand, damit es als derselbe Abschnitt lesbar bleibt. */
/* Drei Spalten wie oben - so stehen beide Kategorien im selben Raster
   und die Seite bekommt eine durchgehende Kante (Peter, 04.09.2026).
   Der zusaetzliche Abstand nach unten trennt den Block vom naechsten
   Abschnitt; oben genuegen 22px, weil es derselbe Abschnitt ist. */
.team__grid--kompakt{grid-template-columns:repeat(3,1fr);margin-top:22px;margin-bottom:34px}
/* Ohne Bild wirkt der Kasten sonst oben angeschnitten. */
.team--kompakt .team__b{padding:20px 22px 22px}
/* Seit beide Formen in EINEM Raster stehen (05.10.2026): die kompakte
   Kachel behaelt ihre eigene Hoehe, statt sich auf die Hoehe der
   Fotokachel daneben zu strecken - sonst stuenden drei Zeilen Text in
   einem 330px hohen weissen Kasten. */
.team__grid .team--kompakt{align-self:start}
/* Die Kachel ist ein <a> - deshalb display:block und keine Unterlinie.
   Ohne das erbte sie im .pbody-Kontext die Linkfarbe samt Unterstreichung. */
.team{display:block;background:#fff;border:1px solid var(--linie-d);border-radius:var(--r);overflow:hidden;
  text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.team:hover{transform:translateY(-4px);border-color:var(--gruen);box-shadow:0 26px 54px -30px rgba(4,51,31,.5)}
.team:hover h3{color:var(--gruen)}
/* Auch hier oben Mitte: Mannschaftsfotos im 16:9-Ausschnitt verlieren
   sonst die Koepfe der hinteren Reihe. */
.team__img{aspect-ratio:16/9;background:var(--ink2) top center/cover no-repeat}
.team__b{padding:18px 20px 22px}
.team__s{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.team h3{font-family:'Anton',sans-serif;font-size:21px;text-transform:uppercase;color:var(--ink);margin:6px 0 8px}
/* Die Liga ist die wichtigste Angabe unter dem Namen - etwas dunkler
   und halbfett, damit sie sich vom Trainernamen darunter abhebt. */
.team__liga{color:var(--ink2);font-weight:600;margin-bottom:2px}
.team p{color:var(--grau-d);font-size:14px;line-height:1.6}
@media(max-width:1000px){.news__grid{grid-template-columns:repeat(2,1fr)}.team__grid,.team__grid--kompakt{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.news__grid{grid-template-columns:1fr}.team__grid,.team__grid--kompakt{grid-template-columns:1fr}}

/* ============================================================
   ANSPRECHPARTNER  ([ansprechpartner] - siehe inc/personen.php)
   ============================================================ */
/* ⚠️ [hidden] MUSS hier explizit sein.
   Die Suche blendet Karten ueber das hidden-Attribut aus. Die
   Browser-Regel [hidden]{display:none} hat aber nur Spezifitaet 0,1,0 -
   und .ap__grid--text .ap__karte{display:grid} (0,2,0) schlaegt sie.
   Ergebnis waere: Die Karte gilt im DOM als versteckt und steht trotzdem
   sichtbar da. Genau so aufgeschlagen am 08.09.2026 - im Screenshot
   gesehen, nachdem die JS-Messung "7 Treffer" gemeldet hatte.
   Deshalb ein Selektor, der jede dieser Regeln ueberbietet. */
.ap [hidden],.ap__karte[hidden],.ap__grid[hidden],.ap__gruppe[hidden],
.ap__grid--text .ap__karte[hidden]{display:none !important}

.ap__gruppe{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gruen);font-weight:700;
  margin:44px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--linie-d);
}
.ap__gruppe:first-child{margin-top:0}
.ap__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;margin-bottom:8px;
}
/* Ohne Fotos: schmalere Spalten und weniger Abstand - die Karte traegt nur
   noch Funktion, Name und Adresse und saehe auf 210px leer gezogen aus. */
.ap__grid--text{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}

/* Funktion, Name und "Visitenkarte" auf gleicher Hoehe - ueber SUBGRID.
   Die drei Zeilen der Kachel klinken sich in die Zeilen des Rasters ein;
   damit beginnt der Name in einer Reihe ueberall gleich, egal ob die
   Funktion darueber eine, zwei oder drei Zeilen braucht.

   ⚠️ Nur im Raster OHNE Fotos. Mit Foto hat die Kachel ein Kind mehr, die
   Zeilenzahl stimmt dann nicht - dort sorgt schon das gleiche Bildformat
   fuer eine gemeinsame Kante.

   💡 Kennt ein Browser subgrid nicht, greift die Regel einfach nicht: Dann
   bleibt es bei den zwei Zeilen, die .ap__funktion ueber min-height
   freihaelt. Kein Bruch, nur weniger genau. */
.ap__grid--text .ap__karte{display:grid;grid-template-rows:subgrid;grid-row:span 3}
.ap__grid--text .ap__text{display:grid;grid-template-rows:subgrid;grid-row:span 3}
.ap__karte{
  background:#fff;border:1px solid var(--linie-d);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.ap__karte:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(4,51,31,.5)}
/* Die ganze Kachel ist ein Link.
   ⚠️ text-decoration ausdruecklich weg: .pbody a{text-decoration:underline}
   steht spaeter im Stylesheet - dieselbe Falle wie damals bei den Knoepfen. */
a.ap__karte--link{color:inherit;text-decoration:none}
.pbody a.ap__karte--link{text-decoration:none}
.ap__mehr{
  margin-top:auto;padding-top:10px;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);font-weight:700;
}
.ap__mehr span{display:inline-block;transition:transform .2s var(--ease)}
a.ap__karte--link:hover .ap__mehr span{transform:translateX(3px)}
.dunkel .ap__mehr{color:var(--flut)}
/* Gleiches Format wie auf der Visitenkarte - es sind dieselben Fotos. */
.ap__bild{aspect-ratio:2/3;background:var(--kreide);overflow:hidden}
.ap__bild img{width:100%;height:100%;object-fit:cover;object-position:center top}
.ap__bild--leer{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--gruen-d),var(--gruen));
}
.ap__bild--leer span{
  font-family:'Anton',sans-serif;font-size:44px;color:rgba(255,255,255,.9);
  letter-spacing:.04em;
}
.ap__text{padding:15px 16px 17px;display:flex;flex-direction:column;gap:3px;flex:1}
.ap__funktion{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gruen);font-weight:700;line-height:1.35;
  /* ⚠️ Trennung nach Silben. "ÖFFENTLICHKEITSARBEIT" ist ein Wort ohne
     Trennstelle und ragte auf dem Handy rechts aus der Kachel heraus;
     mit hyphens:auto wird daraus "ÖFFENTLICHKEITS-ARBEIT". Braucht das
     lang-Attribut am <html> - das setzt language_attributes() in
     header.php und in single-person.php.
     overflow-wrap ist das Sicherheitsnetz, falls ein Browser keine
     deutschen Trennmuster mitbringt: dann bricht es ohne Bindestrich,
     aber es bricht. */
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  /* Platz fuer ZWEI Zeilen freihalten, damit der Name in jeder Kachel auf
     derselben Hoehe beginnt - egal ob die Funktion eine oder zwei Zeilen
     braucht (Peters Vorgabe vom 07.09.2026). */
  min-height:calc(2 * 1.35em);
}
/* ⚠️ Zeilenhoehe 1.16, nicht 1.1. Seit der Nachname IMMER in der zweiten
   Zeile steht, trifft der Fall "Umlaut in Zeile 2" jede zweite Karte:
   "RÜSCHENSCHULTE" braucht bei 16 px genau 18 px Oberlaenge, 1.1 gibt aber
   nur 17,6 - die Ü-Punkte ragten um 0,4 px in die Zeile darueber. Gemessen
   ueber TextMetrics.actualBoundingBoxAscent, nicht geschaetzt. */
.ap__name{
  font-family:'Anton',sans-serif;font-size:19px;line-height:1.16;
  text-transform:uppercase;color:var(--ink2);margin-top:3px;
}
.ap__mail{
  font-size:12.5px;color:var(--grau);margin-top:7px;overflow-wrap:anywhere;
  border-bottom:1px solid transparent;align-self:flex-start;transition:color .2s,border-color .2s;
}
.ap__mail:hover{color:var(--gruen);border-bottom-color:var(--gruen)}
/* Der Name fuehrt auf die Visitenkarte.
   ⚠️ text-decoration ausdruecklich weg: .pbody a{text-decoration:underline}
   steht spaeter im Stylesheet und traefe ihn sonst - dieselbe Falle wie
   damals bei den Knoepfen und beim Zurueck-Link. */
a.ap__name--link{color:var(--ink2);text-decoration:none;transition:color .2s}
.pbody a.ap__name--link{text-decoration:none}
a.ap__name--link:hover{color:var(--gruen)}
.dunkel a.ap__name--link:hover{color:var(--flut)}
.scg-hinweis{color:var(--grau);font-style:italic}

/* ---------- Digitale Visitenkarte (single-person.php) ----------
   Bewusst NICHT der Standardaufbau der Unterseiten: Peter wollte "eben wie
   richtige Visitenkarten des SC Greven 09". Kartenobjekt auf dunklem Grund,
   Flutlichtschein und Rasenlinien wie im Hero der Startseite. */
.vkseite{position:relative;background:var(--ink);overflow:hidden;padding:52px 0 72px}
/* Eigenstaendige Seite: kein Laufband, keine Navigation, keine Fusszeile.
   Der dunkle Grund muss deshalb bis zum Fensterrand reichen - sonst blitzt
   unter der Karte das helle body-Kreide durch. */
body.nurkarte{background:var(--ink)}
/* ⚠️ Senkrecht mittig ueber margin-block:auto, NICHT ueber
   align-items:center. Ist die Karte hoeher als das Fenster - Frank hat sechs
   Aemter, das sind 876 px -, schneidet zentriertes Ausrichten oben ab und
   der Anfang ist nicht mehr erreichbar. Automatische Aussenabstaende
   schrumpfen dagegen nie unter den Inhalt. */
/* ⚠️ 100svh, nicht 100vh.
     Auf dem Handy meint 100vh die Hoehe OHNE eingeblendete Adressleiste -
     die Seite ist damit immer ein Stueck hoeher als das, was man sieht, und
     laesst sich ins Leere scrollen. Genau das hat Peter gemeldet. 100svh
     ist die kleine Ansichtshoehe, also das, was wirklich sichtbar ist.
     Die 100vh-Zeile davor bleibt als Rueckfall fuer aeltere Browser. */
.vkseite--solo{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:40px 0 48px}
.vkseite--solo .wrap{width:100%;margin-block:auto}
/* Flutlichtschein - dieselbe Machart wie .hero::before, nur enger gefasst. */
.vkseite::before{
  content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);
  width:900px;height:560px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(35,224,138,.16),rgba(0,103,63,.06) 45%,transparent 70%);
}
/* Rasenlinien. Die Maske laesst sie nach unten auslaufen, sonst schneiden
   sie hart an der Sektionskante ab. */
.vkseite::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:linear-gradient(transparent 0 49.5%,rgba(255,255,255,.05) 49.5% 50.5%,transparent 50.5%) center/100% 120px,
             repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.04) 119px 120px);
  -webkit-mask:radial-gradient(120% 90% at 50% 10%,#000,transparent 78%);
          mask:radial-gradient(120% 90% at 50% 10%,#000,transparent 78%);
}
.vkseite .wrap{position:relative;z-index:1}
/* Der Zurueck-Link ist auf hellem Grund gebaut - hier waere Vereinsgruen
   auf --ink praktisch unlesbar (1,9:1). Spezifitaet 0,2,1 schlaegt die
   Grundregel ohne !important. */
.vkseite p.zurueck a{color:var(--flut)}
.vkseite p.zurueck a:hover{color:#fff;border-bottom-color:#fff}

.vk{
  max-width:520px;margin:26px auto 0;background:#fff;border-radius:20px;
  overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);
}

/* Kopfband mit Wappen und Wortmarke - der "gedruckte" Teil der Karte. */
.vk__band{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 24px 52px;
  /* Dunkel oben, gruen unten - dieselbe Reihenfolge wie im Wappen
     (Peters Wunsch vom 08.09.2026). Damit liest die Karte sich von oben
     nach unten wie das Vereinszeichen: schwarz, weiss, gruen.
     💡 Nebeneffekt: "Sport seit 1909" in --flut steht jetzt auf dunklem
     Grund und kommt auf ueber 10:1 statt der 8,08:1 von vorher.
     ⚠️ Verlaufsrichtung wie im Fuss: LINKS heller, RECHTS dunkler. Vorher
     lief er andersherum und die beiden Baender wirkten gegeneinander. */
  background:linear-gradient(135deg,#2a241d 0%,var(--ink2) 48%,var(--ink) 100%);
}
.vk__band::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 63px,rgba(255,255,255,.05) 63px 64px);
}
.vk__marke{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
/* Wappen frei auf dem Gruen - Peters Wunsch vom 07.09.2026: nicht in eine
   weisse Flaeche eingebettet. Der Schlagschatten loest es vom Verlauf ab,
   ohne ihm einen Kasten zu geben. */
.vk__marke .vk__wappen{display:flex;align-items:center}
.vk__marke img{height:48px;width:auto;display:block;filter:drop-shadow(0 5px 12px rgba(0,0,0,.45))}
.vk__marke-t{font-family:'Anton',sans-serif;font-size:19px;line-height:.95;letter-spacing:.02em;color:#fff;display:block;text-transform:uppercase}
.vk__marke-s{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.16em;color:var(--flut);text-transform:uppercase}
.vk__etikett{
  position:relative;z-index:1;font-family:'Space Mono',monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 11px;white-space:nowrap;
}

/* Portraet ueberlappt das Band - so sitzt es wie aufgeklebt auf der Karte. */
/* ⚠️ Die Ueberlappung darf NIE groesser sein als das untere Polster des
   Bandes - sonst schiebt sich das Portraet ueber die Wortmarke. Auf 375px
   war genau das passiert: "Sport seit 1909" verschwand dahinter. Regel:
   Ueberlappung <= padding-bottom des Bandes, mit ein paar Pixeln Luft. */
.vk__portrait{
  /* ⚠️ 2:3, nicht 3:4 - Peters Vorgabe vom 07.09.2026: In dem Format
     werden die Fotos kuenftig angelegt (die Spieler- und Betreuerbilder
     der 1. Mannschaft sind es schon: 520x780 und 400x600). Ein 3:4-Rahmen
     wuerde sie oben und unten beschneiden. */
  position:relative;z-index:2;width:118px;aspect-ratio:2/3;margin:-46px auto 0;
  border-radius:14px;overflow:hidden;background:var(--kreide);
  border:4px solid #fff;box-shadow:0 14px 30px -14px rgba(4,51,31,.6);
}
.vk__portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.vk__portrait--ini{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--gruen-d),var(--gruen))}
.vk__portrait--ini span{font-family:'Anton',sans-serif;font-size:40px;color:rgba(255,255,255,.92);letter-spacing:.04em}

.vk__body{padding:14px 30px 26px;text-align:center}
/* ⚠️ Zeilenhoehe nicht unter 1.06: "RÜSCHENSCHULTE" bricht auf schmalen
   Geraeten um, und dann schneidet die globale .92 die Ü-Punkte ab. */
.vk__name{
  font-family:'Anton',sans-serif;font-size:clamp(25px,5.2vw,33px);line-height:1.08;
  text-transform:uppercase;color:var(--ink2);margin:12px 0 7px;
}
.vk__rollen{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gruen);font-weight:700;line-height:1.65;margin:0 0 18px;
}
/* Einordnung bei genau einem Amt - dort entfaellt die Aemterliste. */
.vk__ort{font-size:13px;color:var(--grau);margin:-12px 0 18px}
.vk__kontakt{display:flex;flex-direction:column;align-items:center;gap:8px}
/* Rufnummer und Webseite stehen nebeneinander - nur die Adresse braucht die
   volle Breite. Spart auf dem Handy eine ganze Zeile. */
.vk__paar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.vk__zeile{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;
  background:var(--kreide);border-radius:999px;padding:9px 17px;
  font-size:14px;color:var(--ink2);overflow-wrap:anywhere;
  transition:background .2s,color .2s;
}
.vk__zeile:hover{background:#e3ede6;color:var(--gruen-d)}
.vk__ikon{width:17px;height:17px;flex:none;color:var(--gruen)}
/* ⚠️ Im gruenen Knopf waere das Symbol sonst gruen auf gruen - also
   unsichtbar. Es erbt dort die Schriftfarbe des Knopfes. */
.btn .vk__ikon{color:inherit;width:18px;height:18px}
.vk__aktion{margin:20px 0 0}

/* Gruener Fuss - der Abschluss des Wappen-Dreiklangs. Er traegt seit dem
   08.09.2026 auch die beiden Wege; vorher standen sie lose unter der Karte. */
.vk__fuss{
  background:linear-gradient(135deg,var(--gruen) 0%,var(--gruen-d) 100%);
  /* ⚠️ Polster so gewaehlt, dass der gruene Fuss GENAU so hoch ist wie
     das dunkle Kopfband (118 px): 29 + Anschrift + Wege + 30. Peters Wunsch
     nach gleichen Baendern gilt auf beiden Breiten - die Mobilwerte stehen
     im Media-Block. Wer am Fuss etwas ergaenzt, muss beide nachrechnen. */
  text-align:center;padding:29px 20px 30px;
}
.vk__anschrift{
  margin:0;color:rgba(255,255,255,.82);
  font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;line-height:1.6;
}
.vk__fuss-name{white-space:nowrap}
.vk__wege{
  margin:9px 0 0;padding-top:9px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;justify-content:center;gap:9px;flex-wrap:wrap;color:rgba(255,255,255,.35);
}
.vk__wege a{font-size:12.5px;color:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
.vk__wege a:hover{border-bottom-color:#fff}

/* ⚠️ Alle Werte hier sind darauf gerechnet, dass die Karte auf einem
   375-px-Handy OHNE Scrollen passt. Gemessen, nicht geschaetzt - der
   laengste Fall ist Frank Rüschenschulte mit sechs Funktionen, die
   laengste Adresse annette.wilbers-noetzel@scgreven09.de (37 Zeichen).
   Wer hier eine Groesse anhebt, sollte beides gegenpruefen. */
@media(max-width:600px){
  .vkseite{padding:26px 0 34px}
  .vkseite--solo{padding:10px 0 12px}
  /* ⚠️ Kopfpolster 35 px, damit das dunkle Band GENAU so hoch ist wie der
     gruene Fuss (Peters Wunsch): 35 + 42 Wappen + 34 = 111 px, und der Fuss
     misst mit zwei Zeilen Anschrift und den beiden Wegen ebenfalls 111.
     Wer am Fuss etwas aendert, muss diesen Wert nachrechnen. */
  .vk__band{padding:35px 16px 34px;gap:10px}
  .vk__marke img{height:42px}
  .vk__marke-t{font-size:17px}
  .vk__etikett{font-size:9px;padding:4px 9px}
  .vk__portrait{width:86px;margin-top:-28px;border-width:3px}
  .vk__portrait--ini span{font-size:30px}
  .vk__body{padding:10px 16px 14px}
  .vk__name{margin:9px 0 5px}
  /* Enger gesetzt: Frank braucht sonst vier Zeilen fuer seine Aemter. */
  .vk__rollen{font-size:9.5px;letter-spacing:.08em;line-height:1.5;margin-bottom:11px}
  .vk__ort{font-size:12px;margin:-9px 0 13px}
  /* ⚠️ 12,5 px ist der groesste Wert, bei dem die laengste Adresse in EINE
     Zeile passt: 224 px Text auf 236 px Platz. Bei 13 px sind es 233 - das
     reicht rechnerisch, bricht aber je nach Schriftrendering doch um. */
  .vk__zeile{font-size:12.5px;padding:8px 14px;gap:8px}
  .vk__ikon{width:15px;height:15px}
  .vk__aktion{margin-top:11px}
  .btn{padding:12px 20px;font-size:14px}
  .vk__fuss{padding:11px 14px 12px}
  .vk__anschrift{font-size:9px;letter-spacing:.06em}
  /* Vereinsname oben, Anschrift darunter - statt eines Umbruchs mitten in
     der Strasse (Peters Wunsch vom 07.09.2026). */
  .vk__fuss-name{display:block}
  .vk__fuss-trenner{display:none}
  .vk__wege{margin-top:7px;padding-top:7px;gap:7px}
  .vk__wege a{font-size:12px}
  /* Untereinander statt nebeneinander - sonst haengt der Trennpunkt am Ende
     der ersten Zeile in der Luft. */
  .vk__wege{flex-direction:column;gap:5px}
  .vk__wege span{display:none}
}
/* Ganz schmal wird das Etikett zur Last - das Band traegt die Marke. */
@media(max-width:380px){ .vk__etikett{display:none} }

/* Auf dunklem Abschnitt (falls der Baustein dort steht) */
.dunkel .ap__gruppe{color:var(--flut);border-bottom-color:var(--linie)}
.dunkel .ap__karte{background:rgba(255,255,255,.04);border-color:var(--linie)}
.dunkel .ap__name{color:#fff}
.dunkel .ap__funktion{color:var(--flut)}
.dunkel .ap__mail{color:var(--grau-l)}
.dunkel .ap__mail:hover{color:var(--flut);border-bottom-color:var(--flut)}

@media(max-width:600px){
  .ap__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ap__text{padding:12px 12px 14px}
  .ap__name{font-size:16px}
  .ap__mail{font-size:11.5px}
  .ap__bild--leer span{font-size:34px}
}

/* ============================================================
   DOWNLOADS  ([downloads] - siehe inc/downloads.php)
   ============================================================ */
.dl__gruppe{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gruen);font-weight:700;
  margin:42px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--linie-d);
}
.dl__gruppe:first-child{margin-top:0}
.dl__liste{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px}
.dl__eintrag{margin:0}
.dl__link{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--linie-d);border-radius:var(--r);
  padding:14px 18px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.dl__link:hover{
  transform:translateY(-2px);border-color:var(--gruen);
  box-shadow:0 16px 32px -22px rgba(4,51,31,.5);
}
.dl__typ{
  flex:0 0 auto;min-width:52px;text-align:center;
  font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;color:#fff;background:var(--gruen);
  padding:7px 9px;border-radius:6px;
}
.dl__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.dl__titel{
  font-family:'Anton',sans-serif;font-size:19px;line-height:1.15;
  text-transform:uppercase;color:var(--ink2);
}
.dl__info{font-size:13.5px;color:var(--grau);line-height:1.45}
.dl__meta{
  flex:0 0 auto;font-family:'Space Mono',monospace;font-size:11.5px;
  color:var(--grau);white-space:nowrap;
}
.dl__link::after{
  content:"↓";flex:0 0 auto;font-size:17px;color:var(--gruen);
  transition:transform .2s var(--ease);
}
.dl__link:hover::after{transform:translateY(3px)}

/* Auf dunklem Abschnitt */
.dunkel .dl__gruppe{color:var(--flut);border-bottom-color:var(--linie)}
.dunkel .dl__link{background:rgba(255,255,255,.04);border-color:var(--linie)}
.dunkel .dl__link:hover{border-color:var(--flut)}
.dunkel .dl__titel{color:#fff}
.dunkel .dl__info,.dunkel .dl__meta{color:var(--grau-l)}
.dunkel .dl__link::after{color:var(--flut)}

@media(max-width:600px){
  .dl__link{gap:12px;padding:12px 14px}
  .dl__typ{min-width:44px;font-size:9.5px;padding:6px 7px}
  .dl__titel{font-size:16px}
  .dl__info{font-size:12.5px}
  .dl__meta{display:none}   /* Dateigroesse spart auf dem Handy Platz */
}

/* ============================================================
   TERMINE  ([termine] - siehe inc/termine.php)
   ============================================================ */
.tm{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tm__eintrag{
  display:flex;align-items:flex-start;gap:18px;
  background:#fff;border:1px solid var(--linie-d);border-radius:var(--r);
  padding:16px 20px;transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.tm__eintrag:hover{transform:translateY(-2px);box-shadow:0 18px 36px -24px rgba(4,51,31,.5)}
.tm__datum{
  flex:0 0 auto;width:62px;text-align:center;
  background:var(--gruen);color:#fff;border-radius:10px;padding:9px 4px;
  display:flex;flex-direction:column;line-height:1;
}
.tm__tag{font-family:'Anton',sans-serif;font-size:27px}
.tm__monat{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;margin-top:4px;opacity:.9;
}
.tm__text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.tm__titel{
  font-family:'Anton',sans-serif;font-size:21px;line-height:1.15;
  text-transform:uppercase;color:var(--ink2);
}
.tm__wann{
  font-family:'Space Mono',monospace;font-size:12px;color:var(--gruen);
  letter-spacing:.03em;
}
.tm__ort{font-size:13.5px;color:var(--grau)}
.tm__ort::before{content:"⌖ ";opacity:.7}
.tm__info{font-size:13.5px;color:var(--grau);line-height:1.5;margin-top:4px}
.tm__bereich{
  flex:0 0 auto;align-self:flex-start;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gruen);
  border:1px solid var(--gruen);border-radius:999px;padding:4px 10px;white-space:nowrap;
}

/* Auf dunklem Abschnitt */
.dunkel .tm__eintrag{background:rgba(255,255,255,.04);border-color:var(--linie)}
.dunkel .tm__titel{color:#fff}
.dunkel .tm__wann{color:var(--flut)}
.dunkel .tm__ort,.dunkel .tm__info{color:var(--grau-l)}
.dunkel .tm__bereich{color:var(--flut);border-color:var(--flut)}

@media(max-width:600px){
  .tm__eintrag{gap:13px;padding:13px 15px;flex-wrap:wrap}
  .tm__datum{width:52px;padding:7px 3px}
  .tm__tag{font-size:22px}
  .tm__titel{font-size:17px}
  .tm__bereich{order:3;margin-left:65px}   /* unter den Text, buendig mit ihm */
}

/* ============================================================
   HANDBALL: Links zu Spielplan & Tabelle
   Ersatz fuer die Widgets, solange handball.net umgebaut wird
   (siehe Kommentar in front-page.php)
   ============================================================ */
.hblinks{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.hblinks__btn{
  display:flex;flex-direction:column;gap:2px;position:relative;
  padding:14px 44px 14px 18px;border-radius:var(--r);
  border:1px solid var(--linie-d);background:#fff;min-width:210px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.hblinks__btn:hover{transform:translateY(-2px);border-color:var(--gruen);box-shadow:0 18px 34px -24px rgba(4,51,31,.55)}
.hblinks__btn--stark{background:var(--gruen);border-color:var(--gruen)}
.hblinks__btn--stark:hover{background:var(--gruen-l);border-color:var(--gruen-l)}
.hblinks__label{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gruen);
}
.hblinks__btn--stark .hblinks__label{color:rgba(255,255,255,.85)}
.hblinks__text{font-family:'Anton',sans-serif;font-size:19px;line-height:1.1;text-transform:uppercase;color:var(--ink2)}
.hblinks__btn--stark .hblinks__text{color:#fff}
.hblinks__pfeil{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:17px;color:var(--gruen);transition:transform .2s var(--ease);
}
.hblinks__btn--stark .hblinks__pfeil{color:#fff}
.hblinks__btn:hover .hblinks__pfeil{transform:translateY(-50%) translate(2px,-2px)}
/* Interner Weg (zur eigenen Abteilungsseite): Der Pfeil zeigt nach rechts
   und wandert beim Zeigen auch nur nach rechts. Die schraege Bewegung ist
   die Geste fuer "verlaesst die Seite" und gehoert den Verbandslinks. */
.hblinks__btn--intern:hover .hblinks__pfeil{transform:translateY(-50%) translate(3px,0)}
.hblinks__note{
  width:100%;margin:2px 0 0;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.06em;color:var(--grau);
}

@media(max-width:600px){
  .hblinks__btn{min-width:0;flex:1 1 100%;padding:12px 40px 12px 15px}
  .hblinks__text{font-size:17px}
}

/* Variante im dunklen Live-Bereich (Fussball) */
.hblinks--live{margin-top:22px}
.hblinks--live .hblinks__btn{background:rgba(255,255,255,.05);border-color:var(--linie)}
.hblinks--live .hblinks__btn:hover{border-color:var(--flut);background:rgba(255,255,255,.08)}
.hblinks--live .hblinks__btn--stark{background:var(--gruen);border-color:var(--gruen)}
.hblinks--live .hblinks__btn--stark:hover{background:var(--gruen-l);border-color:var(--gruen-l)}
.hblinks--live .hblinks__label{color:var(--flut)}
.hblinks--live .hblinks__btn--stark .hblinks__label{color:rgba(255,255,255,.85)}
.hblinks--live .hblinks__text{color:#fff}
.hblinks--live .hblinks__pfeil{color:var(--flut)}
.hblinks--live .hblinks__btn--stark .hblinks__pfeil{color:#fff}
.hblinks--live .hblinks__note{color:var(--grau-l)}


/* Dunkle Knopf-Variante fuer HELLE Abschnitte (z. B. Handball) */
.hblinks__btn--dunkel{background:#2a2724;border-color:#3a3632}
.hblinks__btn--dunkel:hover{background:#332f2b;border-color:var(--flut)}
.hblinks__btn--dunkel .hblinks__label{color:var(--flut)}
.hblinks__btn--dunkel .hblinks__text{color:#fff}
.hblinks__btn--dunkel .hblinks__pfeil{color:var(--flut)}

/* Trainingszeiten auf den Abteilungsseiten
   ----------------------------------------
   Bis zum 09.09.2026 standen die Zeiten von Kung Fu und Lauftreff als
   .traintimes-Block auf der STARTSEITE. Peter hat sie dort herausgenommen:
   Wer Trainingszeiten sucht, geht in die Abteilung - und die Startseite
   musste jede Aenderung mitschleppen.

   ⚠️ Die Klassen tragen den Abstand doppelt (.trainzeiten .trainzeit__wer
   statt nur .trainzeit__wer). Grund: Der Abteilungstext steht in
   .abtkopf__text, und ".abtkopf__text p" hat die Spezifitaet (0,1,1) -
   eine einzelne Klasse (0,1,0) verliert dagegen, die Abstaende kaemen
   nicht an. Dieselbe Falle wie bei [hidden] in der Ansprechpartnerliste. */
.trainzeiten{
  display:grid;gap:14px;margin:16px 0 26px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.trainzeit{
  background:var(--weiss);border:1px solid var(--linie-d);border-left:3px solid var(--gruen);
  border-radius:var(--r);padding:17px 19px;
}
.trainzeiten .trainzeit__wer{
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gruen);margin:0 0 9px;
}
.trainzeiten .trainzeit__wann{font-size:16.5px;font-weight:600;color:var(--ink2);margin:0 0 6px;line-height:1.35}
.trainzeiten .trainzeit__wo{font-size:13.5px;color:var(--grau);margin:0;line-height:1.5}

/* ==============================================================
   MANNSCHAFTSSEITEN
   Kopf -> Foto + Eckdaten (hell) -> Widgets (dunkel) ->
   Training + Trainer (Kreide) -> Kader (dunkel) -> Berichte (Kreide) ->
   Aufruf (gruen). Der Hell-Dunkel-Rhythmus der Startseite wird
   fortgesetzt; jeder Abschnitt entfaellt, wenn seine Daten fehlen.
   ============================================================== */

/* Kopfbereich bekommt die Rasenlinien des Heros - dezenter. */
.phead--team{position:relative;overflow:hidden}
.phead--team::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;background:repeating-linear-gradient(90deg,transparent 0 95px,rgba(255,255,255,.05) 95px 96px);-webkit-mask:radial-gradient(120% 100% at 80% 0%,#000,transparent 70%);mask:radial-gradient(120% 100% at 80% 0%,#000,transparent 70%)}
.phead--team .wrap{position:relative;z-index:1}

/* ---------- Mannschaftsfoto ---------- */
.team__foto{margin:0 0 34px}
/* ⚠️ Festes 16:9 fuer ALLE Mannschaftsfotos (Peter, 07.09.2026).
   Die gelieferten Dateien haben unterschiedliche Seitenverhaeltnisse
   (890x500, 890x594, 890x622) - ohne feste Vorgabe ist jede
   Mannschaftsseite anders hoch. Zugeschnitten wird im Browser statt in
   den Dateien: So gilt die Vorgabe auch fuer jedes Foto, das der Verein
   spaeter selbst hochlaedt, und es geht kein Bildmaterial verloren.
   Dasselbe Verfahren wie bei den Kacheln (.team__img).

   ⚠️ Angeschnitten wird UNTEN ("top center"). Mittig zentriert kostete
   den Handballerinnen der hinteren Reihe die Koepfe - gemessen am
   890x622-Foto der 1. Damen. Unten liegen Bank und Rasen; oben stehen
   Gesichter. Beim Foto der 1. Herren wird dafuer der Ball am unteren
   Rand angeschnitten - das ist der guenstigere Tausch. */
.team__foto img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;border-radius:var(--r);border:1px solid var(--linie-d);box-shadow:0 34px 70px -34px rgba(22,19,15,.45)}
.team__foto figcaption{margin-top:10px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.08em;color:var(--grau)}

/* ---------- KOPF DER ABTEILUNGSSEITE ----------
   Bild und Einleitung ueber den Mannschaften. Das Bild ist dasselbe wie
   im Abteilungsabschnitt der Startseite, deshalb dasselbe Seitenverhaeltnis
   wie dort (feat__media) statt der freien Hoehe eines Mannschaftsfotos. */
/* ⚠️ Unten 56px statt 0 (Peter, 09.09.2026: "nach dem ersten hellen
   Bereich nach unten etwas zu wenig Platz"). Der Text stiess vorher
   direkt an den dunklen Abschnitt darunter - oben 56px, unten nichts.
   Jetzt symmetrisch; die 84px von .pbody waeren hier zu viel, weil
   direkt darunter ein eigener Abschnitt mit eigenem Innenabstand folgt. */
.abtkopf{padding:56px 0 56px}
.abtkopf__bild{margin:0 0 34px}
/* ⚠️ object-position: oben Mitte, nicht Mitte Mitte.
   Das Bild ist breiter als hoch zugeschnitten. Bei mittigem Ausschnitt
   schneidet die Oberkante genau dort ab, wo auf einem Sportfoto die
   Gesichter stehen (Peter, 04.09.2026). Dieselbe Wahl wie bei den
   Ansprechpartnern und im Kader. */
.abtkopf__bild img{display:block;width:100%;height:clamp(220px,38vw,420px);object-fit:cover;object-position:top center;border-radius:var(--r);border:1px solid var(--linie-d);box-shadow:0 34px 70px -34px rgba(22,19,15,.45)}
/* Der Text ist ein Fliesstext wie auf einer Unterseite - die Breite
   begrenzen, damit die Zeilen lesbar bleiben. Ueber die volle Spalte
   waeren es bei Kung Fu weit ueber 100 Zeichen pro Zeile. */
/* ⚠️ margin-inline:auto - der Text steht MITTIG, genau wie ".pbody .inner"
   auf jeder normalen Unterseite. Ohne das begann er an der linken Kante
   der Sektion, waehrend Geschaeftsstelle, Sportstaetten und Impressum
   ihre Textspalte zentriert haben. Nebeneinander sah das aus, als waere
   auf einer der beiden Seiten etwas verrutscht (Peter, 09.09.2026).
   Das Kopfbild darueber bleibt bewusst ueber die volle Breite - es ist
   ein Banner, kein Inhaltsbild. */
.abtkopf__text{max-width:760px;margin-inline:auto}
.abtkopf__text h2{font-size:clamp(21px,2.6vw,29px);margin:34px 0 12px}
.abtkopf__text h2:first-child{margin-top:0}
.abtkopf__text p{margin:0 0 15px}

/* ---------- ALLE MANNSCHAFTEN (Liste beim Verband) ----------
   Bis zu 33 Eintraege - deshalb eine schlichte, mehrspaltige Liste und
   keine Kacheln. Kacheln waeren hier eine Wand. */
/* ⚠️ Dunkel gesetzt (Peter, 04.09.2026). Damit ist es mehr als ein
   Farbtausch - jede auf Weiss gerechnete Farbe muss mit:
     Kleinschrift  --gruen -> --flut  (#00673F auf #16130F ist unlesbar)
     Gitterlinien  --linie-d -> --linie (die Haarlinien entstehen aus dem
                   gap; dunkel auf dunkel waere unsichtbar)
     Kachelflaeche #fff -> aufgehellte Transparenz
   Gleiche Machart wie .live und der Verein-Abschnitt der Startseite. */
.teamliste{background:var(--ink);color:#fff;padding:64px 0}
.teamliste .sec-head h2{color:#fff}
.teamliste .sec-head p{color:var(--grau-l)}
.teamliste .sec-num{color:var(--flut)}
.teamliste__gruppe{margin-bottom:30px}
.teamliste__gruppe:last-child{margin-bottom:0}
.teamliste__t{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--flut);margin:0 0 10px;font-weight:400}
/* ⚠️ DREI Spalten, nicht auto-fill (Peter, 06.10.2026: "nur 3 Spalten
   statt 4 nebeneinander"). Mit auto-fill und 240px Mindestbreite wurden es
   auf der vollen Inhaltsbreite vier, und die Namen standen verloren in
   ihren Kaesten.
   ⚠️ minmax(0,1fr), nicht 1fr: Sonst bekommt jede Spalte min-width:auto,
   und der laengste Eintrag drueckt die anderen aus der Form - dieselbe
   Falle wie im Mega-Menue am 05.10.2026. */
.teamliste__l{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
  background:var(--linie);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.teamliste__l li{background:rgba(255,255,255,.05)}
.teamliste__l a{display:block;padding:13px 16px;color:#e7ece8;text-decoration:none;
  font-size:15px;transition:background .15s,color .15s}
.teamliste__l a:hover{background:var(--gruen);color:#fff}
/* Der Pfeil zeigt an, dass es zum Verband geht. Die Liste steht NICHT in
   .pbody - die automatische Pfeil-Regel (.pbody a.btn.extern::before) greift
   hier also nicht, deshalb das eigene span. */
.teamliste__p{color:var(--flut);margin-left:4px;font-size:13px}
.teamliste__l a:hover .teamliste__p{color:#fff}
@media(max-width:900px){
  .teamliste__l{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .teamliste{padding:48px 0}
  .teamliste__l{grid-template-columns:1fr}
}

/* ---------- Eckdaten: Scoreboard-Optik ---------- */
.team__fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--linie-d);border:1px solid var(--linie-d);border-radius:var(--r);overflow:hidden;margin-bottom:38px}
.team__fakt{background:var(--weiss);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.team__fakt-l{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.team__fakt-w{font-family:'Anton',sans-serif;font-size:20px;line-height:1.15;letter-spacing:.005em;color:var(--ink)}
.team__text{margin-left:0}

/* ---------- Nur der Verbandslink statt Widgets (Handball) ---------- */
.live--link{padding-bottom:80px}

/* ---------- Ansprechpartner: Filterleiste + Suche ----------
   Die Knoepfe sind LINKS (jede Ansicht ist verlinkbar), das Suchfeld
   kommt erst durch js/site.js dazu - ohne JS bleibt es verborgen. */
.filterleiste{margin:0 0 30px}
.filterleiste__reihe{display:flex;flex-wrap:wrap;gap:8px}
.filterleiste__knopf{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--linie-d);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;transition:border-color .18s,background .18s,color .18s}
.filterleiste__knopf:hover{border-color:var(--gruen);color:var(--gruen)}
/* ⚠️ Der aktive Knopf ist gruen gefuellt mit weisser Schrift - 6,41:1.
   Nicht auf helles Gruen umstellen: Weiss auf --gruen-l kaeme nur auf
   3,1:1 und faellt unter die Schwelle. */
.filterleiste__knopf.is-aktiv{background:var(--gruen);border-color:var(--gruen);color:#fff}
/* Rubriken ohne Beitraege: sichtbar, aber gedaempft. Anklickbar bleiben sie -
   der Menuepunkt "News" einer Abteilung zeigt dorthin, und die Seite erklaert
   dann, dass dort noch nichts steht.
   ⚠️ Nicht unter 4,5:1 druecken: --grau auf Weiss sind 4,63:1, das traegt
   gerade noch. Eine hellere Schrift waere unlesbar statt nur zurueckhaltend. */
.filterleiste__knopf.is-leer{color:var(--grau);border-style:dashed;background:transparent}
.filterleiste__knopf.is-leer:hover{color:var(--gruen);border-color:var(--gruen)}
.filterleiste__knopf.is-leer.is-aktiv{background:var(--gruen);border-color:var(--gruen);color:#fff;border-style:solid}
.filterleiste__n{font-family:"Space Mono",monospace;font-size:11px;opacity:.7}
.filterleiste__suche{margin-top:14px}
/* 16px, sonst zoomt iOS beim Antippen in das Feld hinein und verschiebt
   die ganze Seite - dieselbe Regel wie im Kontaktformular. */
.filterleiste__feld{width:100%;max-width:420px;min-height:46px;padding:11px 14px;border:1px solid var(--linie-d);border-radius:var(--r);background:#fff;color:var(--ink);font:16px/1.3 "Archivo",system-ui,sans-serif}
.filterleiste__feld:focus{outline:2px solid var(--gruen);outline-offset:1px;border-color:var(--gruen)}
.filterleiste__treffer{margin:9px 0 0;font-size:13px;color:var(--grau)}
@media(max-width:600px){
  .filterleiste__knopf{padding:8px 13px;font-size:13px}
  .filterleiste__feld{max-width:100%}
}

/* Blocktitel ueber den Knopfreihen ("Gesamtverein", "Abteilungen").
   Mono und klein wie die uebrigen Etiketten der Seite. */
.filterleiste__block{margin:0 0 7px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.filterleiste__reihe + .filterleiste__block{margin-top:16px}

/* Allgemeine Adressen auf der Ansprechpartnerseite */
.adressliste{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.adressliste li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#fff;border:1px solid var(--linie-d);border-radius:var(--r)}
.adressliste a{font-weight:600;word-break:break-word}
.adressliste__w{font-size:13.5px;color:var(--grau)}

/* ---------- "Diese Woche": Vereinswidget auf der Abteilungsseite ----------
   Eigenstaendiger dunkler Block zwischen Einleitung (hell) und
   "Auf dieser Seite" (hell).
   ⚠️ Den Abschnitt NICHT hell faerben: Das Widget ist im
   FUSSBALL.DE-Widget-Center dunkel eingestellt (#15120e) und stuende auf
   hellem Grund wie ein Fremdkoerper. */
.live--woche{padding:64px 0 70px}
.live__hinweis{margin:26px 0 0;font-size:14px;color:var(--grau-l)}
.live__hinweis a{color:var(--flut);text-decoration:underline;text-underline-offset:3px}
.live__hinweis a:hover{text-decoration:none}
.live--woche .btn{margin-top:4px}
@media(max-width:700px){.live--woche{padding:48px 0 54px}}

/* ---------- Training + Trainer nebeneinander ---------- */
.team-block{background:var(--kreide);padding:74px 0}
.team-block__grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
/* Fehlt einer der beiden Bloecke (z. B. noch keine Trainingszeiten), soll der
   verbliebene nicht in der linken Haelfte kleben und rechts ein Loch lassen.
   Er nimmt dann die volle Breite, wird aber begrenzt - sonst werden die
   Karten unangenehm lang. */
.team-block__grid > *:only-child{grid-column:1/-1;max-width:620px}
.team-block__h{font-family:'Anton',sans-serif;font-size:clamp(26px,3.4vw,40px);line-height:.98;text-transform:uppercase;margin:12px 0 24px}

.traintable{list-style:none;border-top:1px solid var(--linie-d)}
.traintable li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--linie-d)}
.traintable__tag{font-weight:700;font-size:16px;color:var(--ink)}
.traintable__zeit{font-family:'Space Mono',monospace;font-size:14px;color:var(--gruen);text-align:right;white-space:nowrap}
.traintable__ort{grid-column:1/-1;font-size:14.5px;color:var(--grau)}
.traintable__note{margin-top:16px;font-size:14.5px;color:var(--grau)}

.staff{display:flex;flex-direction:column;gap:12px}
.staff__k{display:flex;align-items:center;gap:16px;background:var(--weiss);border:1px solid var(--linie-d);border-radius:var(--r);padding:14px 18px}
.staff__ini{flex:none;width:48px;height:48px;border-radius:50%;background:var(--gruen);color:#fff;display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:17px;letter-spacing:.03em}
/* Betreuerkarte mit Foto. Hochformat wie bei den Spielern, nur kleiner -
   ein Portraet in einem 48-px-Kreis waere nur noch ein Punkt. */
.staff__k--foto{padding:12px 18px 12px 12px}
.staff__bild{flex:none;width:58px;height:76px;border-radius:10px;overflow:hidden;background:#e7eae5;display:block}
.staff__bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.staff__f{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gruen)}
.staff__n{display:block;font-size:16.5px;line-height:1.3;color:var(--ink)}
.staff__m{display:inline-block;margin-top:2px;font-size:13.5px;color:var(--grau);word-break:break-all}
.staff__m:hover{color:var(--gruen)}
/* Mannschaftsadresse unter dem Trainerteam. Der Aufruf zum Probetraining
   weiter unten fuehrt bewusst zum VEREIN - hier steht die Stelle fuer
   Fragen, die diese eine Mannschaft betreffen. */

/* ---------- Kader ---------- */
.kader{background:var(--ink);color:#fff;padding:78px 0}
.kader .sec-head h2{color:#fff}
.kader .sec-head p{color:var(--grau-l)}
.kader .sec-num{color:var(--flut)}
.kader__gruppe{margin-bottom:34px}
.kader__pos{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--flut);padding-bottom:9px;margin-bottom:16px;border-bottom:1px solid var(--linie)}
.kader__grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.kader__k{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#1c1812,#16130f);border:1px solid var(--linie);border-radius:12px;padding:12px 14px;transition:border-color .2s,transform .2s var(--ease)}
/* --- Spielerkarte mit Foto und Steckbrief ---------------------------
   Karten OHNE Foto bleiben unveraendert - der Verein kann Spieler nach
   und nach ergaenzen, ohne dass der Kader dazwischen unfertig aussieht.
   Die Karte mit Foto ist etwas hoeher; im Raster gleichen sich die
   Zeilenhoehen ohnehin an. */
/* Zwei Rasterspalten: Sonst quetscht sich der Steckbrief neben dem Foto in
   zwei Zeilen. Bei schmalen Ansichten klemmt das Raster den Wert von selbst
   auf eine Spalte - deshalb ist span 2 gefahrlos. */
.kader__k--foto{align-items:stretch;padding:12px;grid-column:span 2;min-height:104px}
/* Portraetraster: greift, sobald die Mehrheit der Mannschaft ein Foto hat.
   Bild oben ueber die volle Kachelbreite, Name und Steckbrief darunter -
   die Kacheln sind dann alle gleich breit und das Raster geht auf. Die
   Variante --foto oben bleibt fuer Mannschaften mit einzelnen Fotos. */
.kader__grid.kader__grid--p{grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:14px}
.kader__k--p{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.kader__k--p .kader__bild{width:100%;height:auto;aspect-ratio:3/4;border-radius:0;align-self:auto}
.kader__k--p .kader__text{padding:11px 13px 13px}
.kader__k--p .kader__name{font-size:15.5px}
.kader__k--p .kader__tore{margin:0 13px 12px}
.kader__bild-ini{position:absolute;inset:0;display:grid;place-items:center;background:#221f1b;color:var(--flut);font-family:'Anton',sans-serif;font-size:30px;letter-spacing:.04em}
.kader__bild{position:relative;flex:none;width:84px;border-radius:9px;overflow:hidden;background:#2a2724;align-self:stretch}
.kader__bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
/* Rueckennummer sitzt auf dem Foto - sonst braeuchte die Karte eine
   zweite Spalte und wuerde neben den schmalen Karten aus dem Raster fallen. */
.kader__bild-nr{position:absolute;left:0;bottom:0;min-width:26px;padding:2px 6px;background:var(--gruen);color:#fff;font-family:'Anton',sans-serif;font-size:14px;line-height:1.35;text-align:center;border-radius:0 9px 0 0}
.kader__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.kader__steck{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.04em;line-height:1.5;color:var(--grau-l)}
.kader__k--foto .kader__name{font-size:16px}
.kader__k--foto .kader__tore{align-self:flex-start;margin-top:2px}
.kader__k:hover{border-color:rgba(35,224,138,.45);transform:translateY(-2px)}
/* Rueckennummer im Trikot-Look: Vereinsgruen, Anton, mittig. */
.kader__nr{flex:none;width:42px;height:42px;border-radius:9px;background:var(--gruen);color:#fff;display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:18px;letter-spacing:.02em}
.kader__nr--leer{background:#2a2724;color:var(--flut);font-size:14px}
.kader__name{font-weight:600;font-size:15.5px;line-height:1.25;color:#fff}
.kader__jg{margin-left:auto;font-family:'Space Mono',monospace;font-size:11px;color:var(--grau-l);white-space:nowrap}
/* Saisontore: bewusst auffaelliger als der Jahrgang - das ist die Zahl,
   nach der auf so einer Seite tatsaechlich jemand sucht. */
.kader__tore{margin-left:auto;display:inline-flex;align-items:baseline;gap:4px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--flut);white-space:nowrap}
.kader__tore b{font-family:'Anton',sans-serif;font-size:16px;letter-spacing:.02em;line-height:1}
.kader__quelle{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--grau-l);max-width:640px}

/* ---------- Berichte der Abteilung ---------- */
.news--team{padding:74px 0}

/* ---------- Abschluss: Probetraining ---------- */
.team-kontakt{background:linear-gradient(135deg,var(--gruen-d),var(--gruen));color:#fff;padding:66px 0}
.team-kontakt__in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.team-kontakt .sec-num{color:var(--flut)}
.team-kontakt h2{color:#fff}
.team-kontakt p{color:rgba(255,255,255,.86);max-width:460px;margin-top:8px}
.team-kontakt__btns{display:flex;gap:12px;flex-wrap:wrap}
/* Weiss gefuellt - auf dem gruenen Band der einzige Knopf mit genug Kontrast
   (auf --gruen-d ergibt Weiss 15,9:1; btn--p waere gruen auf gruen). */
.btn--w{background:#fff;color:var(--gruen-d)}
.btn--w:hover{background:var(--kreide);transform:translateY(-2px)}

@media(max-width:900px){
  .team-block__grid{grid-template-columns:1fr;gap:40px}
  .team-block{padding:58px 0}
  .kader{padding:58px 0}
  .news--team{padding:58px 0}
}
@media(max-width:600px){
  .team__fakten{grid-template-columns:1fr 1fr}
  .kader__grid{grid-template-columns:1fr}
  /* ⚠️ Das Portraetraster bleibt auch schmal MEHRSPALTIG. Eine Spalte
     hiesse bei 24 Spielern ein ueber 10.000 px langer Turm aus
     Portraets - zwei nebeneinander sind auf dem Handy richtig. Die
     Regel steht hinter der Zeile darueber und ist eine Stufe
     spezifischer, sonst gewinnt 1fr. */
  .kader__grid.kader__grid--p{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}
  .kader__k--p .kader__text{padding:9px 10px 11px}
  .kader__k--p .kader__name{font-size:14.5px}
  .team-kontakt__in{flex-direction:column;align-items:flex-start}
}

/* ---------- Sportstätten (Shortcode [sportstaetten]) ----------
   Karten statt Fließtext: Jede Halle trägt Anschrift, eine kurze
   Beschreibung und die Mannschaften, die dort spielen. Die grüne
   Kante links bindet die Liste optisch an die Ergebniskästen und
   den Blockzitat-Stil an, ohne einen weiteren Kasten zu bauen. */
.orte{display:grid;gap:16px;margin:26px 0 34px}
.ort{
  background:var(--weiss);border:1px solid var(--linie-d);border-left:3px solid var(--gruen);
  border-radius:var(--r);padding:20px 22px 18px;
}
/* Überschriften im .pbody haben 34px Abstand nach oben - innerhalb der
   Karte wäre das ein Loch. */
.ort .ort__name{margin:0 0 6px;font-size:23px}
.ort__name a{color:inherit;text-decoration:none}
.ort__name a:hover{color:var(--gruen)}
.ort__karte{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gruen);vertical-align:middle;white-space:nowrap;
}
.ort__adr{
  font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.03em;
  color:var(--grau);margin:0 0 10px;
}
.ort__weg{margin:0 0 12px}
/* ⚠️ ".ort ." statt nur "." - im Inhaltsbereich gilt ".pbody a"
   (Spezifitaet 0,1,1) mit gruener Schrift UND Unterstreichung. Eine
   einzelne Klasse (0,1,0) verliert dagegen, der Knopf saehe aus wie ein
   Fliesstextlink. Dieselbe Falle wie damals bei ".btn" im .pbody. */
.ort .ort__route{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;
  color:var(--gruen);background:transparent;
  border:1px solid var(--gruen);border-radius:999px;padding:7px 14px;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.ort .ort__route:hover,
.ort .ort__route:focus-visible{background:var(--gruen);color:#fff}
.ort__text p{margin:0 0 10px;font-size:15.5px;line-height:1.65}
.ort__text p:last-child{margin-bottom:0}
.ort__teams{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--linie-d);
  font-size:14.5px;line-height:1.7;
}
.ort__teams-l{
  display:block;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);margin-bottom:3px;
}
.ort__teams a{color:var(--gruen);text-decoration:none;font-weight:600}
.ort__teams a:hover{text-decoration:underline}
@media(max-width:620px){
  .ort{padding:17px 18px 15px}
  .ort .ort__name{font-size:20px}
}

/* ---------- Rubrikpfad auf den Beitragskarten ----------
   Seit dem 03.09.2026 steht dort der volle Pfad
   ("Fußball · Senioren · 1. Herren") statt nur der Rubrik.
   Gemessen bei 375px: 233px im 285px breiten Kasten - passt.
   Der laengste moegliche Pfad ist "Handball · Juniorinnen · A-Juniorinnen"
   mit 286px und liefe um 1px ueber. Deshalb auf schmalen Schirmen etwas
   weniger Sperrung; bricht es doch um, sorgt die Zeilenhoehe dafuer, dass
   es nach Absicht aussieht statt nach Unfall. */
.ncard__cat{line-height:1.45}
@media(max-width:640px){
  .ncard__cat{letter-spacing:.09em}
}

/* ---------- Kontaktformular ([kontaktformular]) ----------
   Steht immer im hellen .pbody-Bereich. Bewusst schlicht: Ein Formular
   soll man ausfuellen, nicht bestaunen. Fokusrahmen in Vereinsgruen,
   damit die Tastaturbedienung sichtbar bleibt. */
.kform{margin:22px 0 8px;max-width:640px}
.kform__reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:560px){.kform__reihe{grid-template-columns:1fr}}
.kform__feld{margin:0 0 16px}
.kform__feld label{
  display:block;margin-bottom:6px;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau-d);
}
.kform__opt{text-transform:none;letter-spacing:0;color:var(--grau)}
/* ⚠️ NICHT nach Typ aufzaehlen.
   Genau das war der Fehler: text/email/tel waren erfasst, date und number
   nicht - die standen mit 19-21px Hoehe, Systemschrift und Innenrahmen
   zwischen 43px hohen Feldern. Deshalb ALLE Eingaben ausser Kaestchen und
   versteckten Feldern; ein neuer Typ ist damit automatisch dabei. */
.kform input:not([type=checkbox]):not([type=hidden]),
.kform select,
.kform textarea{
  width:100%;padding:12px 14px;font-family:'Archivo',system-ui,sans-serif;font-size:16px;
  line-height:1.2;color:var(--ink);background:var(--weiss);
  border:1px solid var(--linie-d);border-radius:10px;
  -webkit-appearance:none;appearance:none;
  /* ⚠️ Gemeinsame Mindesthoehe, damit nebeneinanderstehende Felder
     wirklich gleich hoch sind. Das Datumsfeld laesst sich nicht unter
     46px druecken (Chrome rechnet seine Innenteile eigenstaendig), also
     bekommen ALLE diese Untergrenze - statt einem Feld eine Sonderhoehe
     zu geben, die beim naechsten Schriftwechsel wieder nicht passt. */
  min-height:46px;
}
/* Das Auswahlfeld braucht seinen Pfeil zurueck - appearance:none nimmt ihn
   mit. Als Hintergrundbild statt Systemsteuerung, damit er zur Seite passt. */
.kform select{
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300673F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
/* Zahlenfelder ohne Pfeilchen: Jahrgang und Personenzahl tippt man, und die
   Systempfeile sind in jedem Browser anders hoch. */
.kform input[type=number]{-moz-appearance:textfield}
.kform input[type=number]::-webkit-outer-spin-button,
.kform input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Datumsfeld: iOS/Safari zentrieren den Text sonst vertikal anders als bei
   Textfeldern, und der Kalenderknopf klebt am Rand. */
/* Das Datumsfeld baut seinen Inhalt aus eigenen Teilen zusammen und wird
   dadurch 2px hoeher als ein Textfeld - direkt daneben faellt das auf.
   Die Innenteile auf dieselbe Zeilenhoehe bringen statt eine feste Hoehe
   zu setzen: Aendert sich spaeter Schrift oder Innenabstand, passt es
   weiterhin von selbst. */
.kform input[type=date]::-webkit-datetime-edit{padding:0;line-height:1.2}
.kform input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0}
.kform input[type=date]::-webkit-calendar-picker-indicator{
  opacity:.55;cursor:pointer;margin-right:2px;
}
.kform input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
/* 16px Schriftgroesse ist Absicht: Darunter zoomt iOS beim Antippen in das
   Feld hinein und der Rest der Seite verrutscht. */
.kform textarea{resize:vertical;line-height:1.6}
.kform input:focus,.kform textarea:focus{
  outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(0,103,63,.15);
}
.kform [aria-invalid=true]{border-color:#B3261E;background:#FFF6F5}
.kform__zustimmung{margin:4px 0 18px;font-size:14.5px;line-height:1.6;color:var(--grau-d)}
.kform__zustimmung label{display:flex;gap:10px;align-items:flex-start}
.kform__zustimmung input{margin-top:4px;flex:none}
.kform__zustimmung a{color:var(--gruen)}
.kform__hinweis{
  margin:0 0 18px;padding:12px 16px;border-left:3px solid #B3261E;background:#FFF6F5;
  border-radius:0 10px 10px 0;font-size:15px;color:var(--ink);
}
/* Erfolgsmeldung ersetzt das ganze Formular - der Besucher soll nicht
   raten muessen, ob es geklappt hat. */
.kform--ok{
  padding:18px 22px;border-left:3px solid var(--gruen);background:#EEF6F1;
  border-radius:0 10px 10px 0;
}
.kform--ok p{margin:0}
/* Honigtopf: fuer Menschen unsichtbar, fuer Roboter ein Feld wie jedes
   andere. NICHT display:none - manche Roboter erkennen das und lassen es
   dann in Ruhe. */
.kform__topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Ein einzelnes Zusatzfeld soll nicht auf halber Breite verhungern. */
.kform__reihe--eins{grid-template-columns:1fr}
.kform select:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(0,103,63,.15)}

/* ---------- Interner Fanshop ([fanartikel]) ----------
   Eigene Kacheln statt der Shop-Kacheln der Startseite: Dort sind es
   formatfuellende Modefotos, hier freigestellte Produktbilder aus dem
   alten Shop mit nur 150px Breite. */
.fanartikel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 34px}
.fartikel{
  background:var(--weiss);border:1px solid var(--linie-d);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
/* ⚠️ "contain", nicht "cover". Die Fotos sind nur 150px breit -
   formatfuellend gezogen waeren sie matschig. So bleiben sie scharf und
   stehen mittig auf hellem Grund. */
.fartikel__bild{
  aspect-ratio:4/3;background:var(--kreide);display:grid;place-items:center;padding:14px;
  border-bottom:1px solid var(--linie-d);
}
.fartikel__bild img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.fartikel__bild--leer{background:repeating-linear-gradient(45deg,#F4F6F2,#F4F6F2 8px,#EDF0EB 8px,#EDF0EB 16px)}
.fartikel__b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.fartikel .fartikel__t{margin:0;font-size:19px;font-weight:700;color:var(--ink)}
.fartikel__x{margin:0;font-size:14.5px;line-height:1.6;color:var(--grau-d);flex:1}
.fartikel__p{
  margin:4px 0 0;font-family:'Anton',sans-serif;font-size:23px;color:var(--gruen);line-height:1;
}
.fartikel__z{
  margin:0;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau);
}
@media(max-width:820px){.fanartikel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fanartikel{grid-template-columns:1fr;gap:14px}}
/* Ohne Preis kleiner und zurückhaltender - es ist ja keine Zahl. */
.fartikel__p--offen{font-family:'Space Mono',monospace;font-size:13px;color:var(--grau)}

/* ---------- Knöpfe im Inhaltsbereich ----------
   ⚠️ `.pbody a{color:var(--gruen);text-decoration:underline}` steht weiter
   oben und traf auch Knöpfe: grüne, unterstrichene Schrift auf grünem
   Grund - praktisch unlesbar (Peter am 03.09.2026: "grün mit grüner
   Schrift"). Dieselbe Falle wie beim Zurück-Link.

   `.pbody a.btn` hat die Spezifität (0,2,1) und gewinnt gegen
   `.pbody a` (0,1,1) - ohne !important. */
.pbody a.btn{color:#fff;text-decoration:none}
.pbody a.btn--w{color:var(--ink)}
/* ⚠️ btn--o ist im Grundzustand ein DUNKLER Knopf (#2a2724, weisse
   Schrift) - er stammt aus den dunklen Abschnitten der Startseite. Im
   hellen Inhaltsbereich wurde bisher nur die Schriftfarbe auf Gruen
   gesetzt; der Hintergrund blieb schwarz, und damit stand Vereinsgruen
   auf Fast-Schwarz: Kontrast 1,9 : 1.

   Peter am 05.10.2026: "der Button Platzbelegung ist schwarz mit gruener
   Schrift. das kann man schlecht lesen." Richtig - im .pbody gehoert der
   Umriss-Knopf des Design-Systems hin: weisser Grund, gruener Rand,
   gruene Schrift (6,41 : 1). */
.pbody a.btn--o{background:#2a2724;border-color:#3a3632;color:#fff}
.pbody a.btn--o:hover{background:#332f2b;border-color:#3a3632;color:#fff}
.pbody a.btn:hover{text-decoration:none}

/* Externe Ziele bekommen einen Pfeil VOR den Text - man soll vorher sehen,
   dass die Seite verlassen wird. Die Klasse setzt der Inhaltsfilter
   (scg_externe_links_neuer_tab) automatisch, sie muss niemand tippen. */
.pbody a.btn.extern::before{
  content:"↗";font-size:1.05em;line-height:1;margin-right:-2px;
}

/* Wortmarke im Inhalt (Clubheim-Logo): klein, ohne Rahmenrundung und
   ohne Schatten - es ist ein Logo auf Weiß, kein Foto. */
.pbody img.marke{max-width:240px;border-radius:0;box-shadow:none;margin:0 0 6px}

/* Aufruf unter den Sponsorenlogos - der einzige Weg von dort zum Verein. */
.sponsors__cta{margin-top:30px;text-align:center}
.sponsors__cta p{margin:0 0 14px;color:var(--grau-d);font-size:15.5px}

/* Bereichswechsel ohne Seitenneuaufbau (js/site.js)
   Waehrend die neue Liste geholt wird, tritt der Abschnitt einen Schritt
   zurueck - sonst wirkt ein Klick auf einer langsamen Verbindung, als
   waere nichts passiert. Kein Spinner: Der Austausch dauert in der Regel
   weniger lang, als ein Spinner zum Erscheinen braucht. */
[data-filterbereich]{transition:opacity .18s var(--ease)}
[data-filterbereich].is-laedt{opacity:.45}
@media (prefers-reduced-motion:reduce){
  [data-filterbereich]{transition:none}
}

/* Beitragsbild im Artikel - alle Berichte gleich groß
   ⚠️ 16:9 mit object-fit:cover, damit ein Hochformat neben einem
   Querformat nicht doppelt so hoch steht. "top center" wie überall
   sonst: Bei einem Mannschaftsfoto stehen oben die Gesichter. */
.pbody img.beitragsbild{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;
}

/* ==========================================================================
   PLATZBELEGUNG
   ==========================================================================
   Die alte Seite zeigt 7 Tage x 5 Plaetze = 35 Spalten und 53
   Viertelstundenzeilen. Hier ist der TAG die Einheit; die Woche steht als
   Leiste darueber.

   EIN Markup fuer beide Breiten: Ab 760px liegen die Bloecke absolut auf
   einer Zeitachse, darunter stehen sie als Liste im Fluss. Zwei getrennte
   DOM-Baeume waeren beim naechsten Umbau auseinandergelaufen.
   ========================================================================== */

:root{ --sperr:#B32D2E; --sperr-l:#FCEDED; }

/* ---------- Das rote Band ---------- */
.pb-band{
  display:flex;gap:12px;align-items:flex-start;
  border-radius:var(--r);padding:14px 18px;margin:0 0 22px;
  font-size:15px;line-height:1.5;
}
.pb-band__punkt{
  flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:7px;
}
.pb-band--sperre{background:var(--sperr-l);border:1px solid rgba(179,45,46,.28);color:#5d1516}
.pb-band--sperre .pb-band__punkt{background:var(--sperr)}
.pb-band--frei{background:rgba(0,103,63,.08);border:1px solid rgba(0,103,63,.20);color:var(--gruen-d)}
.pb-band--frei .pb-band__punkt{background:var(--gruen)}
.pbody .pb-band__liste,.pb-band__liste{list-style:none;margin:0;padding:0}
.pbody .pb-band__liste li,.pb-band__liste li{margin:0}
.pb-band__liste li + li{margin-top:4px}
.pb-band__zusatz{font-family:'Space Mono',monospace;font-size:12.5px;opacity:.85}
.pb-band__fuss{margin-top:8px;font-size:13px;opacity:.85}
.pb-band__fuss a{text-decoration:underline;font-weight:600}
.pb-start{margin:28px auto}

/* ---------- Tagesleiste ---------- */
.pb-leiste{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 20px;
}
.pb-tage{display:flex;gap:6px;flex:1 1 auto;min-width:0}
/* ⚠️ Alle Tag-Regeln tragen `.pbody` als Praefix. Die Leiste steht im
   Inhaltsbereich, und dort gilt `.pbody a{color:var(--gruen)}` (0,1,1) -
   das schlaegt `.pb-tag--aktiv` (0,1,0). Der markierte Tag war dadurch
   gruen auf gruen, das Datum schlicht nicht lesbar. Dieselbe Falle wie
   bei den Knoepfen und beim Zurueck-Link. */
.pbody .pb-tag,.pb-tag{
  flex:1 1 0;min-width:0;text-align:center;
  padding:8px 4px 7px;border:1px solid var(--linie-d);border-radius:10px;
  background:var(--weiss);color:var(--ink);position:relative;
  text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.pbody .pb-tag:hover,.pb-tag:hover{border-color:var(--gruen);text-decoration:none}
.pb-tag__wt{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--grau)}
.pb-tag__d{display:block;font-weight:600;font-size:14px;color:inherit}
.pbody .pb-tag--aktiv,.pb-tag--aktiv{background:var(--gruen);border-color:var(--gruen);color:var(--weiss)}
.pbody .pb-tag--aktiv .pb-tag__wt,.pb-tag--aktiv .pb-tag__wt{color:rgba(255,255,255,.82)}
.pb-tag--heute:not(.pb-tag--aktiv){border-color:var(--gruen)}
/* Der Punkt sagt VOR dem Klick, an welchem Tag etwas gesperrt ist -
   genau die Frage, wegen der taeglich nachgeschaut wird. */
.pb-tag--sperre::after{
  content:"";position:absolute;top:5px;right:6px;
  width:7px;height:7px;border-radius:50%;background:var(--sperr);
}
.pb-tag--aktiv.pb-tag--sperre::after{background:#fff}
.pb-woche{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;
  color:var(--gruen);white-space:nowrap;padding:6px 2px;
}
.pb-woche:hover{text-decoration:underline}
/* ⚠️ Auf dem Handy ist die Beschriftung ausgeblendet - uebrig bleibt der
   Pfeil, und der war gemessen 12 px breit. Das ist keine Flaeche, die ein
   Finger trifft. Mindestens 44 px, wie es die Barrierefreiheitsrichtlinien
   fuer Bedienelemente vorsehen. Gilt fuer beide Leisten: Platzbelegung und
   Spiele & Ergebnisse. */
@media(max-width:560px){
  .pb-woche{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:6px 2px;
  }
}

/* ---------- Kopf der Tagesansicht ---------- */
.pb-datum{font-weight:700;font-size:19px;margin:0 0 10px}
.pb-heute{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;
  background:var(--gruen);color:var(--weiss);border-radius:20px;
  padding:3px 9px;vertical-align:2px;margin-left:6px;
}
.pbody .pb-legende,.pb-legende{list-style:none;display:flex;gap:16px;flex-wrap:wrap;margin:0 0 14px;padding:0;
  font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.08em;color:var(--grau)}
.pbody .pb-legende li,.pb-legende li{display:flex;align-items:center;gap:7px;margin:0}
.pb-legende__f{width:14px;height:14px;border-radius:4px;display:inline-block}
.pb-leermeldung{color:var(--grau);margin:0 0 14px}

/* ---------- Das Raster ---------- */
.pb-raster{
  display:grid;
  /* PHP liefert die Anteile: "54px 5fr 5fr 4fr 2fr 2fr" - so breit, wie
     der Platz Belegungen nebeneinander tragen kann. Damit ist eine Saeule
     ueberall gleich breit; nur passen auf Platz 1 fuenf davon und auf die
     Emswiese zwei. */
  grid-template-columns:var(--spalten,54px repeat(5,minmax(0,1fr)));
  gap:0 8px;

  /* ---- Wie breit eine einzelne Belegungssaeule ist ----

     Der Fussballplan ist der groesste und fuellt den Plan-Bereich aus:
     13 Einheiten in 5 Spalten. Daraus ergibt sich die Breite EINER
     Einheit - und damit, wie breit die Roennehalle sein darf. Peter am
     06.10.2026: "die gesamtbreite der Spalten in Roennehalle bitte nur
     so breit wie beim Fussball zB 'Platz 1 · Hauptplatz'".

     ⚠️ Gerechnet, nicht als Pixelzahl eingetragen: Die Inhaltsbreite
     haengt an --maxw und an 100vw (siehe .pbody .pb weiter unten), und
     schrumpft der Fussballplan auf einem schmaleren Bildschirm, muss die
     Halle mitschrumpfen. 54px ist die Zeitachse, 8px der Abstand je
     Spalte.

     💡 Der Fussballplan selbst trifft damit auf die Breite, die er auch
     ohne Obergrenze haette - fuer ihn aendert sich nichts. Legt der
     Verein einen sechsten Platz an, ist die Grenze groesser als der
     Bereich und greift ebenfalls nicht. */
  --pb-inhalt:min(calc(var(--maxw) - 48px),calc(100vw - 48px));
  --pb-einheit:calc((var(--pb-inhalt) - 54px - 5*8px) / 13);
  max-width:calc(54px + var(--pb-spalten-n,0)*8px + var(--pb-einheiten,0)*var(--pb-einheit));
}
.pb-achse{position:relative;height:var(--achse,300px);margin-top:52px}
.pb-stunde{position:absolute;left:0;right:0;transform:translateY(-50%)}
.pb-stunde span{
  font-family:'Space Mono',monospace;font-size:11px;color:var(--grau);
  background:var(--kreide);padding-right:6px;
}
.pb-spalte{min-width:0}
/* ⚠️ NICHT in Anton. Global gilt `h1,h2,h3{font-family:'Anton';
   text-transform:uppercase}` - Anton ist eine sehr enge Display-Schrift,
   und bei 13px in Versalien wird daraus ein Klumpen ("zu fett oder so",
   Peter am 10.09.2026). Ueber einer Tabelle steht kein Plakat, sondern
   eine Spaltenbeschriftung: Archivo, gemischte Schreibweise.

   ⚠️ Gewicht 500, nicht 600: Peter am 10.09.2026 - "Problem war nur dass
   die Buchstaben so fett waren". Dafuer 15px statt 13.5px; groesser und
   leichter liest sich besser als kleiner und fetter. */
.pbody .pb-spalte__t,.pb-spalte__t{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:500;font-size:15px;line-height:1.3;
  letter-spacing:0;text-transform:none;
  margin:0 0 8px;
  /* Eine Rinne zwischen zwei Ueberschriften - ohne sie stossen zwei lange
     Namen aneinander (Bild vom 11.11.2026: "Soccerhalle 1Soccerhalle 2").

     ⚠️ Sie hilft nur, solange der Name in seine Spalte passt. "Soccerhalle"
     ist bei 15px 89px breit, die Spalte 73px - das Wort laeuft ueber den
     Rand hinaus, und zwar trotz overflow-wrap:break-word (das aendert die
     min-content-Breite nicht). Gemessen bleiben die beiden Koepfe damit auf
     Tuchfuehlung. Die zwei Auswege waeren overflow-wrap:anywhere (bricht
     mitten im Wort, Kopfzeile 33px hoeher) oder eine kleinere Schrift fuer
     schmale Spalten - beides aendert das Bild fuer ALLE Flaechen, deshalb
     erst nach Ruecksprache. Der einfachste Weg ist ein kuerzerer Name. */
  padding-right:8px;
  hyphens:auto;overflow-wrap:break-word;
}
.pb-spalte__belag{
  display:block;font-family:'Space Mono',monospace;font-weight:400;
  font-size:10.5px;letter-spacing:.1em;color:var(--grau);text-transform:none;
  margin-top:2px;
}
.pb-bahn{
  position:relative;height:var(--achse,300px);
  border-left:1px solid var(--linie-d);
  /* Die Stundenlinien als Hintergrund - eine Linie je 46px, genau der
     Wert, mit dem PHP die Achsenhoehe rechnet. Aendert sich der eine,
     muss der andere mit. */
  background-image:repeating-linear-gradient(
    to bottom, var(--linie-d) 0 1px, transparent 1px 46px);
}
/* ⚠️ font-size:11px kommt hier NICHT an - ".pbody p" (0,2,0) schlaegt
   ".pb-frei" (0,1,0), gemessen werden 16.5px. Mit "frei" (4 Zeichen,
   46px) faellt das nicht auf, "unbesetzt" lief damit 109px breit aus
   einer 81px schmalen Bahn (11.11.2026). Die Groesse bleibt wie sie ist -
   sie sieht so seit Monaten aus und steht nicht zur Debatte -, aber
   overflow:hidden sorgt dafuer, dass kein Wort mehr in die Nachbarspalte
   ragen kann, egal wie lang es wird. */
.pb-frei{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--grau-l);overflow:hidden;
}
/* Der Schraegstrich ist die Kurzfassung von "unbesetzt" - nur dort, wo
   die Flaechen als Spalten nebeneinander stehen. */
.pb-frei__z{display:none}
@media(min-width:761px){
  .pb-frei--kurz .pb-frei__z{display:inline}
  /* ⚠️ Nicht display:none - das Wort soll vorgelesen werden. Links aus
     dem Bild geschoben erzeugt in Leserichtung auch keinen Querlauf;
     derselbe Kniff wie beim Honigtopf im Kontaktformular. */
  .pb-frei--kurz .pb-frei__w{position:absolute;left:-9999px;top:0}
}

/* Subgrid richtet Kopfzeile und Bahn auf EINER Linie mit der Zeitachse aus.
   Ohne subgrid greift der Rueckfall oben (margin-top:52px am .pb-achse) -
   dann kann die Achse um die Hoehe einer zweizeiligen Ueberschrift
   verrutschen. Kein Bruch, nur weniger genau; dieselbe Abwaegung wie bei
   den Ansprechpartner-Kacheln. */
@supports (grid-template-rows:subgrid){
  /* DREI Zeilen seit den Platzteilen (05.10.2026): Ueberschrift,
     Teilzeile, Bahn. Die mittlere faellt auf 0 zusammen, solange keine
     Flaeche geteilt ist. */
  .pb-raster{grid-template-rows:auto auto auto}
  .pb-spalte{grid-row:1/4;display:grid;grid-template-rows:subgrid}
  .pb-achse{grid-row:3;margin-top:0}
}

/* ---------- Ein Block ---------- */
.pb-block{
  position:absolute;
  top:var(--o,0);height:var(--h,10%);
  left:var(--l,0);width:calc(var(--b,100%) - 3px);
  border-radius:7px;padding:4px 5px;overflow:hidden;
  /* ⚠️ Klein halten: Die Saeule soll wirklich von der Anfangs- bis zur
     Endzeit reichen - jede Mindesthoehe laesst sie laenger aussehen, als
     sie ist. 20px sind knapp eine Viertelstunde; darunter waere auch das
     Kuerzel nicht mehr lesbar. Trainings sind ohnehin mindestens 60 Min. */
  min-height:20px;
  font-size:11.5px;line-height:1.2;
}
.pb-block__in{display:block;color:inherit}
.pb-block__in:hover .pb-block__t{text-decoration:underline}
.pb-block__t{display:block;font-weight:700}
/* Drei Zeilen: Kuerzel, Anfangszeit, Endzeit (Peter, 10.09.2026). Neben-
   einander passt "16:30-18:00" nicht in eine 58px breite Saeule. */
.pb-block__z{display:block;font-family:'Space Mono',monospace;font-size:9.5px;opacity:.78;margin-top:1px}
.pb-z1,.pb-z2{display:block;line-height:1.15}
/* ⚠️ Ein Viertelstunden-Block ist bei 46px je Stunde nur 11px hoch - da
   passt keine Zeile Text hinein, geschweige denn drei. Solche Bloecke
   entstehen an Spieltagen, wenn ein Training kurz vor dem Anpfiff endet.
   Dann steht nur noch das Kuerzel da; die Zeit nennt der title, und die
   Achse zeigt sie ohnehin. Die Klasse setzt PHP anhand der Dauer. */
.pb-block--kurz{padding:1px 4px;font-size:9.5px;line-height:1.1}
.pb-block--kurz .pb-block__z{display:none}

/* Gelb = Training, Gruen = Spiel steht so auf der alten Seite. Uebersetzt
   in die Vereinsfarben: Training ruhig getoent, Spiel gefuellt (es ist die
   Angabe, die zaehlt), Sperre rot. */
.pb-block--training{background:rgba(0,103,63,.10);color:var(--ink);border-left:3px solid var(--gruen)}
.pb-block--veranstaltung{background:rgba(22,19,15,.08);color:var(--ink);border-left:3px solid var(--grau)}
.pb-block--spiel{background:var(--gruen);color:var(--weiss)}
.pb-block--sperre{background:var(--sperr);color:var(--weiss)}


/* ---------- Umschalter Tag · Woche ---------- */
.pb-um{display:inline-flex;gap:0;margin:0 0 14px;border:1px solid rgba(22,19,15,.18);border-radius:999px;overflow:hidden}
.pbody .pb-um__k,.pb-um__k{
  font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding:7px 18px;line-height:1;min-height:38px;display:flex;align-items:center;
}
.pbody .pb-um__k--aktiv,.pb-um__k--aktiv{background:var(--gruen);color:var(--weiss)}
.pbody .pb-um__k:hover,.pb-um__k:hover{background:rgba(0,103,63,.10)}
.pbody .pb-um__k--aktiv:hover,.pb-um__k--aktiv:hover{background:var(--gruen-l);color:var(--weiss)}

/* ---------- Wochenraster: Tage untereinander, Flaechen als Spalten ----------
   Bewusst OHNE Zeitachse - die hat die Tagesansicht. Hier steht je Flaeche
   und Tag, wer wann anfaengt (Peter, 10.11.2026).
   ⚠️ Ein Raster, kein <table>: Die Zellen muessen am Handy zu Bloecken
   umbrechen koennen, und genau das kann eine Tabelle nicht. */
.pbw{
  display:grid;
  grid-template-columns:var(--pbw-raster,5.5rem repeat(5,minmax(0,1fr)));
  border:1px solid rgba(22,19,15,.14);border-radius:10px;overflow:hidden;
  background:var(--weiss);
}
.pbw__z{display:contents}
.pbw__kopfzelle,.pbw__tag,.pbw__zelle{border-top:1px solid rgba(22,19,15,.10);padding:7px 8px;min-width:0}
.pbw__z--kopf .pbw__kopfzelle,.pbw__tag--kopf{border-top:0;background:var(--ink);color:var(--weiss)}
.pbw__pname{
  font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.25;display:block;
}
.pbw__kw{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;color:var(--flut)}
.pbw__tag{background:var(--kreide);border-right:1px solid rgba(22,19,15,.10)}
.pbw__tag a{
  font-family:'Space Mono',ui-monospace,monospace;font-size:12px;color:var(--ink);
  text-decoration:none;display:block;line-height:1.35;
}
.pbody .pbw__tag a{text-decoration:none}
.pbw__tag a:hover .pbw__wt{color:var(--gruen)}
.pbw__wt{font-weight:700}
.pbw__d{color:var(--grau)}
.pbw__z--heute .pbw__tag{background:rgba(35,224,138,.16)}
.pbw__zelle{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.pbw__zelle--sperre{background:rgba(199,44,44,.10)}
.pbw__frei{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;color:rgba(22,19,15,.28)}
/* Welche Flaechen die ganze Woche frei sind - sie haben oben keine
   Spalte mehr, und das waere sonst nicht zu sehen. */
.pbw__ganzfrei{font-size:13px;color:var(--grau);margin:10px 0 0;font-style:italic}

/* Die Plaettchen - Anfangszeit und Kuerzel, Farben wie im Tagesplan. */
.pbody .pbw-e,.pbw-e{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:5px;
  font-family:'Space Mono',ui-monospace,monospace;font-size:11.5px;line-height:1.3;
  padding:3px 7px;border-radius:4px;text-decoration:none;max-width:100%;
}
.pbw-e__b{font-size:10.5px;opacity:.85;white-space:nowrap}
.pbw-e__t{font-weight:700;white-space:nowrap}
.pbody .pbw-e--training,.pbw-e--training{background:rgba(0,103,63,.10);color:var(--ink);box-shadow:inset 3px 0 0 var(--gruen)}
.pbody .pbw-e--spiel,.pbw-e--spiel{background:var(--gruen);color:var(--weiss)}
.pbody .pbw-e--veranstaltung,.pbw-e--veranstaltung{background:rgba(22,19,15,.08);color:var(--ink);box-shadow:inset 3px 0 0 var(--grau)}
.pbody .pbw-e--sperre,.pbw-e--sperre{background:var(--sperr);color:var(--weiss)}
a.pbw-e:hover{filter:brightness(1.08)}
a.pbw-e:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* ⚠️ Unter 760px bricht das Raster in TAGESBLOECKE um: Fuenf Spalten plus
   Tagesspalte sind auf einem Telefon nicht lesbar, und ein seitlich
   scrollender Plan wird nicht gescrollt, sondern weggewischt. Leere
   Flaechen entfallen dann ganz - am Handy zaehlt, was stattfindet. */
@media(max-width:760px){
  .pbw{display:block;border:0;border-radius:0;background:transparent}
  .pbw__z{display:block;margin:0 0 18px}
  .pbw__z--kopf{display:none}
  .pbw__tag{
    background:transparent;border:0;border-bottom:2px solid var(--gruen);
    padding:0 0 5px;margin:0 0 8px;
  }
  .pbw__tag a{font-size:14px}
  .pbw__z--heute .pbw__tag{background:transparent}
  /* ⚠️ Der Flaechenname steht als eigene Zeile ÜBER den Plaettchen, nicht
     daneben: Nebeneinander bricht die zweite Reihe unter das Etikett und
     fluchtet dann mit nichts mehr. */
  .pbw__zelle{
    border:0;padding:0;margin:0 0 10px;display:block;
  }
  .pbw__zelle--leer{display:none}
  .pbw__zelle--sperre{background:transparent}
  .pbw__zelle::before{
    content:attr(data-platz);display:block;margin:0 0 4px;
    font-family:'Space Mono',ui-monospace,monospace;font-size:11px;
    text-transform:uppercase;letter-spacing:.04em;color:var(--grau);
  }
  .pbw__zelle > .pbw-e{margin:0 4px 4px 0}
  /* Am Handy sind die Plaettchen groesser - die Spanne steht auf jeder
     Breite da (seit 10.11.2026 auch am Desktop). */
  .pbody .pbw-e,.pbw-e{font-size:13px;padding:5px 9px}
  .pbw-e__b{opacity:.8}
}

/* ---------- Sperrenuebersicht ---------- */
.pb-sperren{margin-top:34px}
.pb-sperren h2{font-size:24px;margin:0 0 12px}
.pb-tabelle{overflow-x:auto}
.pb-tabelle table{width:100%;border-collapse:collapse;font-size:14.5px}
.pb-tabelle th,.pb-tabelle td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linie-d)}
.pb-tabelle thead th{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--grau);text-transform:uppercase;
}
.pb-tabelle tbody th{font-weight:700}
.pb-sp--gesperrt td strong{color:var(--sperr)}
/* Stille Sperre: derselbe Satz, nur ohne Rotlicht. Ein Rasenplatz, der
   jeden Winter ruht, ist kein Alarm - siehe scg_pb_sperre_still(). */
.pb-sp--still td strong{color:var(--grau)}
.pb-sp--frei td{color:var(--grau)}
.pb-hinweis,.pb-vorbehalt{font-size:13px;color:var(--grau);margin-top:12px}
.pb-vorbehalt{margin-top:18px;font-style:italic}

/* ---------- Handy: aus der Zeitachse wird eine Liste ---------- */
@media(max-width:760px){
  /* Aus dem Raster wird eine Liste - eine Obergrenze in "Einheiten"
     bedeutet hier nichts mehr und wuerde die Liste nur einschnueren. */
  .pb-raster{display:block;max-width:none}
  .pb-achse{display:none}
  .pb-spalte{margin-bottom:20px}
  .pbody .pb-spalte__t,.pb-spalte__t{font-size:16px;margin-bottom:6px}
  .pb-bahn{
    height:auto;border-left:0;background-image:none;
    display:flex;flex-direction:column;gap:6px;
  }
  .pb-block{
    /* ⚠️ height:auto ist PFLICHT. position:static allein reicht nicht -
       die prozentuale Hoehe aus --h bleibt sonst stehen und drueckt den
       Block auf 18px zusammen; mit overflow:hidden ist der Text dann weg.
       Gemessen am 10.09.2026 bei 375px. */
    position:static;width:auto;height:auto;min-height:0;
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    padding:9px 12px;
  }
  .pb-block__in{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%}
  .pb-block__z{margin-top:0;white-space:nowrap}
  .pb-frei{position:static;justify-content:flex-start;padding:6px 0}
  /* ⚠️ Die Wochenwechsel stehen auf einer EIGENEN Zeile ueber den Tagen
     (Peter, 10.09.2026: die Knoepfe muessen breiter, "bald steht da
     29.11.").

     Gemessen bei 375px in der alten Fassung: im Knopf waren 17 px Platz,
     "29.11." braucht 36 px - der Text lief also seitlich aus dem Knopf
     heraus. Und das war kein Novemberproblem: schon "12.9." passte nicht.

     Die beiden Pfeile kosteten in der Zeile 104 px von 327 - fast ein
     Drittel der Breite fuer zwei Zeichen. Eine Zeile tiefer bekommen die
     sieben Tage die volle Breite, und die Beschriftung "Woche vorher"
     kann zurueckkommen: ein Wort trifft der Finger besser als ein Pfeil,
     und man weiss, was passiert. */
  .pb-leiste{
    display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:10px 8px;
  }
  /* ⚠️ Der Umbruch kommt aus flex-basis:100%, NICHT aus einem Raster.
     Der erste Versuch war ein Grid mit "grid-column:1 / -1" auf den Tagen -
     und weil im HTML Pfeil, Tage, Pfeil in dieser Reihenfolge stehen,
     bekam jedes ein eigenes Feld: Der zweite Pfeil landete in Zeile DREI,
     die Leiste war 155 px hoch. Mit order stehen beide Pfeile oben. */
  .pb-woche{order:1}
  .pb-tage{order:2;flex:0 0 100%;gap:3px}
  /* ⚠️ Die Beschriftung kommt NUR in der Platzbelegung zurueck. Die
     Leiste bei "Spiele & Ergebnisse" traegt in der Mitte schon den
     Zeitraum ("Mo, 07.09. – So, 13.09.") - dort haben drei Textbloecke
     nebeneinander bei 375 px keinen Platz, der Zeitraum brach auf zwei
     Zeilen um. Und noetig ist sie da auch nicht: Wer den Zeitraum liest,
     weiss, was der Pfeil daneben tut. */
  .pb-woche__t{display:none}
  .pb-leiste .pb-woche__t{display:inline}
  /* ⚠️ In der WOCHENANSICHT kommt sie ebenfalls zurueck (Peter,
     10.11.2026: *„Woche vorher links und nächste Woche kann man in der
     Woche-Ansicht genauso schreiben wie in der Tag-Ansicht"*).

     Der Grund, warum sie dort fehlte, bleibt richtig: Drei Textbloecke
     nebeneinander haben bei 375px keinen Platz. Deshalb bricht die
     Leiste jetzt um - Pfeile oben, der Zeitraum darunter -, genau wie
     die Tagesleiste darueber. Die Leiste bei "Spiele & Ergebnisse"
     behaelt ihr Raster: Sie traegt .pb-wleiste nicht.

     ⚠️ MIT .spiele__leiste davor (0,2,0). Ein blankes ".pb-wleiste"
     (0,1,0) verliert gegen ".spiele__leiste{display:grid}" - gleiche
     Spezifitaet, aber 120 Zeilen spaeter im Stylesheet, und bei
     Gleichstand gewinnt das Spaetere. Eine Media-Query erhoeht die
     Spezifitaet nicht. Gemessen am 10.11.2026: Der Zeitraum lag mit
     199px Breite ueber dem rechten Pfeil, der auf 44px gequetscht war.
     Dieselbe Falle wie bei ".pbody a" und ".pbody .pb-tag". */
  .spiele__leiste.pb-wleiste{
    display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:8px;
  }
  .pb-wleiste .pb-woche__t{display:inline}
  .pb-wleiste .pb-woche{gap:5px}
  .pbody .pb-wleiste .pb-woche{text-decoration:none}
  /* ⚠️ flex-basis:100% und order - NICHT ein Raster mit grid-column.
     Dieselbe Falle wie bei der Tagesleiste: Im HTML stehen Pfeil,
     Zeitraum, Pfeil in dieser Reihenfolge, und der zweite Pfeil landete
     damit in Zeile drei. */
  .pb-wleiste .pb-woche{order:1}
  .pb-wleiste .spiele__span{order:2;flex:0 0 100%;margin-top:2px}
  /* ⚠️ gap statt des Leerzeichens aus dem HTML. Zwischen Pfeil und Wort
     steht dort eines - aber .pb-woche ist ein Flex-Kasten, und der wirft
     Leerraum zwischen seinen Kindern weg. Im Bild klebte "←Woche vorher"
     zusammen. */
  .pb-leiste .pb-woche{gap:5px}
  /* ⚠️ MIT .pbody: ".pbody a" (0,1,1) unterstreicht jeden Link im
     Inhaltsbereich und schlaegt ein blankes ".pb-woche" (0,1,0). Solange
     nur der Pfeil zu sehen war, fiel der Strich nicht auf - unter einem
     ganzen Wort schon. Beim Zeigen kommt er zurueck (Regel weiter oben). */
  .pbody .pb-leiste .pb-woche{text-decoration:none}
  /* ⚠️ MIT .pbody davor. Eine Media-Query erhoeht die Spezifitaet nicht -
     die Grundregel heisst ".pbody .pb-tag" (0,2,0) und schlaegt ein
     blankes ".pb-tag" (0,1,0). Der erste Versuch setzte 1 px und bekam
     weiter 4 px: gemessen 34 statt 39 px nutzbare Breite, und damit fehlte
     genau der Platz, um den es hier geht. Dieselbe Falle steht 40 Zeilen
     weiter oben schon einmal beschrieben - diesmal beim Innenabstand. */
  .pbody .pb-tag,.pb-tag{padding:7px 0}
  /* ⚠️ Die Schrift waechst mit der Breite mit, statt fest zu stehen. Auf
     einem 320-px-Geraet ist ein Siebtel der Zeile nun einmal schmaler -
     eine feste Groesse muesste sich am kleinsten Geraet ausrichten und
     waere auf allen anderen unnoetig klein. tabular-nums haelt dabei alle
     Ziffern gleich breit, sonst springen die Knoepfe von Tag zu Tag. */
  .pb-tag__d{
    font-size:clamp(11px,3.4vw,14px);
    font-variant-numeric:tabular-nums;
  }
  .pb-tag__wt{font-size:clamp(9.5px,2.9vw,11px);letter-spacing:.08em}
}

/* ---------- Mehrere Mannschaften gleichzeitig ----------
   Eine Saeule je Mannschaft, nebeneinander, jede genau von ihrer Anfangs-
   bis zu ihrer Endzeit (Peter, 10.09.2026). In den echten Plaenen sind es
   hoechstens vier - Mittwoch, Platz 1, ab 17:00. */

/* ⚠️ Ein Kuerzel im Block ist fuer den Browser erst mal ein Link und
   erbt .pbody a - gruen und unterstrichen mitten im gruenen Block.
   Dieselbe Falle wie damals bei den Knoepfen und beim Zurueck-Link.
   .pb-block a (0,2,0) schlaegt .pbody a (0,1,1) nicht - deshalb der
   Elternselektor davor. */
.pbody .pb-block a,.pbody .pb-block span{color:inherit;text-decoration:none}
.pbody .pb-block__in:hover .pb-block__t{text-decoration:underline}

/* ---------- Der Plan bekommt die volle Breite ----------
   ⚠️ Der Shortcode steht im Seiteninhalt, und der ist 760px schmal
   (.pbody .inner). Fuer fuenf Plaetze bleiben davon je 133px - bei vier
   gleichzeitigen Mannschaften also 30px je Saeule. Gemessen am
   10.09.2026: Das Kuerzel passte gerade noch, die Uhrzeit nicht mehr.

   Auf der vollen Sektionsbreite sind es 213px je Platz und rund 50px je
   Saeule. Dieselbe Ausbruch-Rechnung wie frueher bei der Klasse .breit:
   var(--maxw) ist die AUSSENkante von .wrap, die 24px Innenabstand je
   Seite hat - ohne die -48px stuende der Plan ueber jede andere Kante
   der Seite hinaus. Und 100vw zaehlt die Bildlaufleiste mit, .wrap nicht;
   deshalb das overflow-x:clip am .pbody (clip statt hidden, sonst
   entsteht ein Scrollcontainer). */
@media(min-width:761px){
  .pbody{overflow-x:clip}
  .pbody .pb{
    width:min(calc(var(--maxw) - 48px),calc(100vw - 48px));
    margin-left:50%;transform:translateX(-50%);
  }
  /* Fliesstext bleibt schmal - 1150px lange Zeilen liest niemand gern. */
  .pb-vorbehalt,.pb-kz__vor,.pb-leermeldung{max-width:760px}
}
/* ---------- Spiele & Ergebnisse ----------
   Der eigene Spielplan: alle Spiele einer Woche, nach Tagen gegliedert.
   Fuenf Spalten - Zeit, Mannschaft, Begegnung, wo, Ergebnis. */
.spiele{margin:6px 0 0}
.spiele__leiste{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;align-items:center;margin:0 0 18px;
}
.spiele__span{
  margin:0;text-align:center;
  font-family:'Space Mono',ui-monospace,monospace;font-size:13px;color:var(--grau);
}

/* Zwei Wochen am Stueck (09.11.2026): Ueberschrift je Woche.
   Das Etikett ("Vergangene Woche") kommt von scg_spiele_wochen_etikett()
   und fehlt beim Blaettern weiter weg - dann steht nur der Zeitraum da.
   ⚠️ line-height hier NICHT auf die globalen .92 lassen: "NÄCHSTE WOCHE"
   braucht Luft fuer das Ä (Lehre vom 24.08.2026, Anton + Umlaut). */
/* ⚠️ padding UND margin ausdruecklich auf 0: Ein <section> erbt sonst
   section{padding:96px 0} aus dem Seitenraster - zwischen Wochenleiste und
   Ueberschrift klafften dadurch 130px (Peter, 09.11.2026). Und .pbody h2
   (0,1,1) schlaegt .spiele__wt (0,1,0), deshalb steht die Ueberschrift
   zusaetzlich mit .pbody davor - dieselbe Spezifitaetsfalle wie beim
   Zurueck-Link und bei .pbody a.btn. */
.spiele__woche{margin:0;padding:0}
.spiele__woche + .spiele__woche{
  margin-top:30px;padding-top:26px;border-top:1px solid rgba(22,19,15,.14);
}
.pbody .spiele__wt,.spiele__wt{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
  font-size:22px;line-height:1.12;margin:0 0 14px;padding:0;
}
.spiele__wt-n{
  font-family:'Anton',Impact,sans-serif;font-size:22px;line-height:1.08;
  text-transform:uppercase;letter-spacing:.01em;color:var(--gruen);
}
.spiele__wt-z{
  font-family:'Space Mono',ui-monospace,monospace;font-size:13px;font-weight:400;
  letter-spacing:.02em;color:var(--grau);
}

/* Die vergangene Woche ist eingeklappt (Peter, 09.11.2026) - <details>.
   ⚠️ list-style:none UND ::-webkit-details-marker: Safari und aeltere
   Chrome-Staende zeigen ihr Dreieck sonst trotzdem. */
.pbody summary.spiele__wt,summary.spiele__wt{
  cursor:pointer;list-style:none;margin:0;padding:8px 0;
}
/* ⚠️ Die Linie NUR im aufgeklappten Zustand: Zugeklappt steht direkt
   darunter schon die Trennlinie der naechsten Woche - zwei Striche im
   Abstand von 30px sehen aus wie ein Fehler. */
details[open] summary.spiele__wt{border-bottom:1px solid rgba(22,19,15,.14)}
summary.spiele__wt::-webkit-details-marker{display:none}
.pbody details[open] summary.spiele__wt,details[open] summary.spiele__wt{margin:0 0 14px}
summary.spiele__wt:hover .spiele__wt-n{color:var(--gruen-l)}
summary.spiele__wt:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}
.spiele__wt-pfeil{
  font-family:'Archivo',system-ui,sans-serif;font-size:20px;line-height:1;
  color:var(--gruen);transition:transform .15s ease;transform-origin:50% 55%;
}
details[open] .spiele__wt-pfeil{transform:rotate(90deg)}
.spiele__wt-zahl{
  font-family:'Space Mono',ui-monospace,monospace;font-size:12px;color:var(--grau);
  margin-left:auto;
}
@media(max-width:560px){
  .spiele__wt-zahl{margin-left:0}
}
.spiele__tag{margin:0 0 22px}
.spiele__d{
  font-family:'Archivo',system-ui,sans-serif;font-size:16px;font-weight:600;
  text-transform:none;letter-spacing:0;line-height:1.3;
  margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--gruen);
}
.pbody .spiele__l,.spiele__l{list-style:none;margin:0;padding:0}

.pbody .spiel,.spiel{
  display:grid;
  /* Zeit · Mannschaft · Art · Begegnung · wo · Ergebnis
     Die Art hat eine EIGENE Spalte (Peter, 10.09.2026): So fluchten alle
     Zeilen, und ein Pokalspiel faellt auf, statt die Begegnung zu
     verschieben. Bei regulaeren Spielen bleibt sie leer. */
  grid-template-columns:56px 124px 74px minmax(0,1fr) 150px 84px;
  gap:2px 12px;align-items:baseline;
  margin:0;padding:8px 0;border-bottom:1px solid var(--linie-d);
}
.spiel__z{font-family:'Space Mono',ui-monospace,monospace;font-size:13px;color:var(--gruen)}
.spiel__m{font-size:14.5px;font-weight:600}
.spiel__p{font-size:14.5px}
.spiel__o{font-size:13px;color:var(--grau)}
.spiel__e{
  font-family:'Space Mono',ui-monospace,monospace;font-size:13.5px;font-weight:700;
  text-align:right;
}
/* ⚠️ Heimspiele deutlich abgesetzt (Peter, 10.09.2026: "Heimspiele bitte
   optisch noch mehr abgrenzen"). Der duenne Anschnitt von vorher war zu
   leise - auf einer Seite mit dreissig Zeilen sah man ihn schlicht nicht.
   Jetzt: gruener Balken, heller Grund, kraeftigerer Platzname. */
.pbody .spiel--heim,.spiel--heim{
  border-left:4px solid var(--gruen);
  background:rgba(0,103,63,.05);
  padding-left:12px;padding-right:10px;
  margin-left:-16px;margin-right:-10px;
  border-radius:0 6px 6px 0;
}
.spiel--heim .spiel__o{color:var(--gruen);font-weight:600}
.spiel--heim .spiel__z{font-weight:700}

/* Die Art als eigene Spalte - Versalien in Mono, damit sie als Etikett
   liest und nicht als Teil der Begegnung. */
.spiel__art{
  font-family:'Space Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--grau);white-space:nowrap;
}
.spiel--heim .spiel__art{color:var(--gruen-d)}

@media(max-width:860px){
  .pbody .spiel,.spiel{grid-template-columns:56px minmax(0,1fr) 84px}
  .spiel__m{grid-column:2}
  .spiel__art{grid-column:2;grid-row:2}
  .spiel__p{grid-column:2}
  .spiel__o{grid-column:2}
  .spiel__e{grid-column:3;grid-row:1;text-align:right}
  /* Ohne Inhalt keine Zeile - sonst klafft bei jedem regulaeren Spiel
     eine leere Zeile im Stapel. */
  .spiel__art:empty{display:none}
}
/* ⚠️ Auf dem Handy NICHT umbrechen lassen. Der erste Versuch stellte die
   Zeitspanne ueber die Pfeile - dabei schrumpften die Pfeile auf 12 px
   (ihre Beschriftung ist schmal ausgeblendet) und der rechte stand bei
   x=339 halb ausserhalb der 375-px-Breite. Dieselbe Falle wie bei der
   Tagesleiste der Platzbelegung am 10.09.2026: Ein Raster kann nicht
   umbrechen - genau deshalb ist es hier eines. */
@media(max-width:560px){
  .spiele__leiste{gap:6px}
  .spiele__span{font-size:12px}
}
/* ---------- Heimspiele des Tages ----------
   Die Verbindung zwischen Belegungsplan und Spielplan: Der Plan sagt WO,
   diese Liste sagt zusaetzlich GEGEN WEN. In der 56px schmalen Saeule
   haette ein Vereinsname keinen Platz - hier hat er ihn. */
.pb-spiele{margin-top:26px;max-width:760px}
.pb-spiele__t{font-family:'Archivo',system-ui,sans-serif;font-size:16px;font-weight:600;
  text-transform:none;letter-spacing:0;margin:0 0 10px}
.pbody .pb-spiele__l,.pb-spiele__l{list-style:none;margin:0;padding:0}
.pbody .pb-spiel,.pb-spiel{
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;
  gap:4px 12px;align-items:baseline;
  padding:7px 0;margin:0;border-top:1px solid var(--linie-d);
}
.pbody .pb-spiel:first-child,.pb-spiel:first-child{border-top:0}
.pb-spiel__z{font-family:'Space Mono',ui-monospace,monospace;font-size:13px;color:var(--gruen)}
.pb-spiel__w{font-size:14.5px}
.pb-spiel__g{color:var(--grau)}
.pb-spiel__p{font-size:13px;color:var(--grau);white-space:nowrap}
.pb-spiele__hinweis{font-size:13px;color:var(--grau);margin:12px 0 0;font-style:italic}

/* Auf dem Handy passt der Platz nicht mehr in dieselbe Zeile - er rutscht
   unter die Begegnung, die Uhrzeit bleibt als Anker links stehen. */
@media(max-width:560px){
  .pbody .pb-spiel,.pb-spiel{grid-template-columns:58px minmax(0,1fr)}
  .pb-spiel__p{grid-column:2}
}

/* Der Gegner IM Block - nur dort, wo die Bloecke als Liste im Fluss
   stehen (bis 760px). In der Saeule waere dafuer kein Platz. */
.pb-block__g{display:none}
@media(max-width:760px){
  .pb-block__g{display:block;font-size:12px;opacity:.85;margin-top:2px}
}

/* ---------- Der Gegner steht auch am Desktop im Block ----------------
   Peter, 06.10.2026: "am Handy sieht man immer bei den Spielen in der
   Platzbelegung schoen, gegen wen die Teams spielen. Beim PC sieht man das
   nur beim Hovern. kannst du den Gegner beim PC auch dauerhaft in das Feld
   schreiben?"

   ⚠️ Nicht pauschal: Eine Saeule auf einem Platzviertel ist rund 81px
   breit, und "DJK Wacker Mecklenbeck U 11 I" hat dort keine Chance. Ob der
   Platz reicht, weiss nur der Browser - deshalb eine CONTAINER-Abfrage am
   Block selbst statt einer Regel am Fenster. Ein Spiel ueber eine
   Platzhaelfte (159px) zeigt den Gegner, eines auf einem Viertel nicht.

   ⚠️ container-type:size NUR am Desktop. Auf dem Handy steht der Block im
   Fluss mit height:auto - groessenbasierte Containment setzt die Hoehe dann
   auf 0, und der Block waere weg. Dort zeigt die Regel oben den Gegner
   ohnehin schon.

   💡 Damit der Gegner auch in einen 60-Minuten-Block passt (46px), ruecken
   Kuerzel und Zeit bei einem Spiel in EINE Zeile zusammen - Platz ist bei
   140px ja da. Trainings bleiben dreizeilig: :has(.pb-block__g) trifft nur
   Bloecke, die ueberhaupt einen Gegner fuehren. */
@media(min-width:761px){
  .pb-block{container-type:size;container-name:pbblock}

  /* ⚠️ Die Abfrage misst die INHALTSBOX, nicht die Aussenkante: Ein
     60-Minuten-Block ist 46px hoch, abzueglich 2x4px Polster bleiben 38px.
     Mit 40px als Schwelle fiel genau er durch - gemessen am 06.10.2026. */
  @container pbblock (min-width:140px) and (min-height:34px){
    .pbody .pb-block:has(.pb-block__g) .pb-block__in{
      display:flex;flex-wrap:wrap;justify-content:space-between;
      align-items:baseline;gap:0 10px;
    }
    .pbody .pb-block:has(.pb-block__g) .pb-block__z{margin-top:0;white-space:nowrap}
    .pbody .pb-block:has(.pb-block__g) .pb-z1,
    .pbody .pb-block:has(.pb-block__g) .pb-z2{display:inline}
    .pbody .pb-block:has(.pb-block__g) .pb-z2::before{content:"–"}

    /* Hoechstens zwei Zeilen: Ein 60-Minuten-Block hat 38px Inhalt, davon
       nimmt die Zeile mit Kuerzel und Zeit 16px - zwei Gegnerzeilen passen
       (gemessen 40px, die 2px laufen in das 4px-Polster). Eine dritte waere
       abgeschnitten, deshalb endet der Name dann mit Auslassungspunkten. */
    .pbody .pb-block__g{
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
      flex:1 0 100%;
      font-size:10px;line-height:1.2;opacity:.9;margin-top:2px;
      overflow:hidden;
    }
  }
}
/* ---------- Mannschaftskuerzel ----------
   Die Tabelle, die der alten Seite fehlt: Im Plan steht das Kuerzel,
   hier steht, wer damit gemeint ist. */
.pb-kz{margin-top:32px}
.pb-kz h2{font-size:24px;margin:0 0 8px}
.pb-kz__vor{font-size:14.5px;color:var(--grau);margin:0 0 14px}
.pbody .pb-kz__liste,.pb-kz__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:0 22px;
}
.pbody .pb-kz__liste li,.pb-kz__liste li{
  display:flex;gap:12px;align-items:baseline;margin:0;
  padding:6px 0;border-bottom:1px solid var(--linie-d);
}
.pb-kz__k{
  font-family:'Space Mono',monospace;font-weight:700;font-size:13px;
  color:var(--gruen);min-width:46px;flex:0 0 auto;
}
.pb-kz__n{font-size:14.5px}
.pb-kz__n a{text-decoration:underline;color:var(--gruen)}

@media(max-width:760px){
  /* Im Fluss ist wieder Platz: volle Breite, groessere Schrift - und die
     Zeit steht in EINER Zeile. Den Gedankenstrich setzt das Stylesheet,
     damit das Markup fuer beide Breiten dasselbe bleibt. */
  .pb-block,.pb-block--kurz{padding:8px 12px;font-size:14px;line-height:1.3}
  /* Im Fluss ist auch fuer die kurzen Bloecke Platz - die Zeit kommt
     zurueck. Die Klasse gilt der Blockhoehe, und die gibt es hier nicht. */
  .pb-block__z,.pb-block--kurz .pb-block__z{display:block;font-size:11.5px}
  .pb-z1,.pb-z2{display:inline;line-height:inherit}
  .pb-z2::before{content:"–"}

  /* Peter, 06.10.2026: Eine Zeile mit drei Spalten - Kuerzel links, Gegner
     daneben, Uhrzeit rechts. Sie steht damit bei Training und Spiel an
     derselben Stelle. Geaendert wird nur die Reihenfolge der Anzeige; im
     Markup bleibt die Zeit vorn, wo sie am Desktop hingehoert. */
  .pbody .pb-block__in{flex-wrap:wrap}
  .pbody .pb-block__g{order:1;flex:1 1 0;min-width:0;margin-top:0}
  .pbody .pb-block__z{order:3;margin-left:auto}
}

/* Der Plan holt gerade einen anderen Tag - kurz abblenden, damit der
   Wechsel sichtbar ist. Kein Spinner: Die Anfrage ist klein, ein Ladekringel
   waere laenger zu sehen als der Vorgang dauert. */
/* ⚠️ Beim Nachladen wird der GANZE Planinhalt getauscht, nicht mehr nur
   die Tagesansicht - seit dem 10.11.2026 wechselt derselbe Abruf auch die
   Ansicht. Gedimmt wird deshalb alles ausser dem Umschalter: Der Knopf, den
   man gerade gedrueckt hat, soll nicht ausgrauen. */
/* ⚠️ Die Leiste der Wochenansicht traegt BEIDE Klassen (.spiele__leiste
   .pb-wleiste) - sie steht deshalb schon in der Zeile darueber mit drin. */
.pb.is-laedt .pb-tagesansicht,
.pb.is-laedt .pbw{opacity:.55;transition:opacity .12s}
.pb.is-laedt .pb-leiste,
.pb.is-laedt .spiele__leiste,
.pb.is-laedt .pb-um{pointer-events:none}

/* ---------- Wege von der Abteilungsseite ----------
   Spielplan und Platzbelegung als Knoepfe im Text: Wer schon auf der
   Abteilungsseite ist, hat das Menue gerade zugeklappt. */
/* ⚠️ margin-inline:auto - der Block steht in derselben 760px-Spalte wie
   der Einleitungstext. Ohne das klebt er links an der Sektionskante,
   waehrend der Text daneben zentriert ist (Peter, 05.10.2026). Dieselbe
   Falle wie bei .abtkopf__text am 09.09.2026. */
.abtwege{margin:26px auto 0;max-width:760px}
.abtwege__t{
  font-family:'Space Mono',ui-monospace,monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grau);
  margin:0 0 10px;
}
.abtwege__b{display:flex;flex-wrap:wrap;gap:10px}

/* Der Weg zur Mannschaft beim Verband, unter den Widgets (05.10.2026).
   Abgesetzt und mittig - er gehoert zum Widgetblock, ist aber nicht Teil
   der Kaesten darueber. */
.live__mehr{margin-top:26px;text-align:center}


/* ---- Platzteile (05.10.2026) ----------------------------------------
   Eine Zeile unter dem Platznamen, ein Feld je Teil - genau ueber der
   Saeule, in der dieser Teil liegt. Wie im Belegungsplan des Vereins
   ("Li Re", darunter "Vo Hi").

   ⚠️ Dieselbe Spaltenzahl wie die Bahn darunter (--n), sonst stuende die
   Beschriftung neben ihrer Spalte statt darueber. */
.pbody .pb-teile{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;margin:0 0 4px}
/* ⚠️ Die Namen duerfen UMBRECHEN, nicht abschneiden: "Rechts hinten"
   braucht bei 1400px 81px, die Spalte hat 74 - und ein anderer Verein
   schreibt womoeglich "Nebenplatz Sued". Abgeschnitten waere der Kopf
   schlimmer als zweizeilig. */
.pbody .pb-teile__t{font-family:'Space Mono',monospace;font-size:9.5px;line-height:1.22;letter-spacing:.02em;
  text-transform:uppercase;color:var(--grau-d);text-align:center;
  overflow-wrap:anywhere;hyphens:auto}
/* ⚠️ Am Desktop steht der Platzteil in der Spaltenueberschrift, nicht im
   Block - dort traegt die Saeule ihre Position schon durch ihre Lage. */
.pbody .pb-block__teil{display:none}
@media(max-width:760px){
  /* In der Liste gibt es keine Spalten mehr - die Kopfzeile entfaellt. */
  .pbody .pb-teile{display:none}
  /* ⚠️ Und genau deshalb steht der Platzteil hier IM Block (Peter,
     10.11.2026: *„kannst du in der Tag-Ansicht zu jeder Trainingseinheit
     noch schreiben wo genau? also links vo, rechts usw?"*). Ohne die
     Kopfzeile ist am Handy sonst nicht zu sehen, auf welchem Viertel
     eine Mannschaft steht.

     ⚠️ NUR beim Training, und das ist Peters eigene Abgrenzung von
     06.10.2026: *„links vo etc am Handy gar nicht darstellen bei den
     Spielen oder den Trainings bitte"*. Beim Spiel steht an derselben
     Stelle der Gegner - zwei Angaben in einer Zeile, und der Vereinsname
     verliert den Platz, um den es damals ging. Die Zeile bleibt damit
     einzeilig: Kuerzel - wo/gegen wen - Uhrzeit.

     Gleiche Stelle wie der Gegner (order:1), gleiche Groesse - so steht
     bei Training und Spiel dieselbe Information an derselben Position. */
  .pbody .pb-block--training .pb-block__teil{
    display:block;order:1;flex:1 1 0;min-width:0;
    font-size:12px;opacity:.85;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}

/* ---- Abstand unter dem Mannschaftskopf (05.10.2026) ------------------
   Peter: "der Abstand zwischen 'vom SC Greven 09 / Voller Fokus /
   Trainingszeiten' ist zu gross. das sieht komisch aus."

   Gemessen waren es 160px: 18px Aussenabstand des letzten Absatzes,
   84px Polster des hellen Kopfblocks, 58px Polster des naechsten
   Abschnitts. Jetzt rund 85px - genug Luft, damit es auch dort gut
   aussieht, wo direkt ein dunkler Block folgt (Kader der 1. Herren).

   ⚠️ Der letzte Absatz verliert zusaetzlich seinen Aussenabstand. Ohne
   das waere der Abstand je nach Mannschaft verschieden: mit Text 18px
   mehr als ohne. */
.pbody.mannschaftskopf{padding-bottom:26px}
.pbody.mannschaftskopf .wrap > :last-child,
.pbody.mannschaftskopf .team__text > :last-child{margin-bottom:0}