/* ============================================================
   RSG-Sport · THEME  (einzige Stelle zum Anpassen des Looks)
   ------------------------------------------------------------
   Hier liegen ALLE gestalterischen Stellschrauben.
   Layout/Struktur stehen in index.html (style-Block) und nutzen
   ausschließlich diese Variablen → Look ändern = nur diese Datei.

   So passt man das Theme an:
   • Markenfarbe:   --c-primary / --c-primary-2 / --grad-brand
   • Hell/Dunkel:   Werte unter :root (dark) bzw. [data-theme="light"]
   • Form:          --radius-*   (eckiger/runder)
   • Schrift:       --font, --font-heading
   • Default-Modus: data-theme im <html> (dark|light)

   Ein anderes Kundenprojekt erbt dasselbe Layout, nur diese Datei
   wird ausgetauscht.
   ============================================================ */

/* ---- 1) Markenidentität (modusunabhängig) ---------------- */
:root{
  /* RSG-Grün. Für ISN-Original: #00d4ff / #8b5cf6 eintragen. */
  --c-primary:      #7bbf5c;
  --c-primary-2:    #4f9c4a;
  --c-primary-deep: #2f7340;
  --c-primary-hover:#69ab4b;

  /* Akzent-Verläufe (Hero-CTA, Stat-Zahlen, gradient-text) */
  --grad-brand:  linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 50%, var(--c-primary-deep) 100%);
  --grad-brand-2:linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary) 100%);

  /* Textfarbe auf Markenflächen (Buttons): dunkel auf Grün */
  --on-brand:    #05210f;

  /* Form & Typo */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --font:        'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-heading: var(--font);

  --transition: all .3s cubic-bezier(.4,0,.2,1);
  --container:  1200px;
}

/* ---- 2) Dunkles Theme (Standard) ------------------------- */
:root,
[data-theme="dark"]{
  --bg:          #020617;
  --bg-muted:    #0a0f1e;
  --bg-card:     #111827;
  --bg-hover:    rgba(255,255,255,.04);
  --border:      rgba(255,255,255,.08);
  --text:        #f1f5f9;
  --text-muted:  #94a3b8;
  --text-dim:    #475569;
  --c-accent-text: var(--c-primary);   /* grüner Akzent-Text — auf dunklem Grund hell ok */
  --shadow-glow: 0 0 40px rgba(123,191,92,.18);
  /* Hero-Video-Overlay (oben/mitte/unten) */
  --hero-overlay: linear-gradient(to bottom,rgba(2,6,23,.74) 0%,rgba(2,6,23,.5) 50%,rgba(2,6,23,.82) 100%);
  --hero-glow:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(123,191,92,.18) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 82% 60%,rgba(79,115,64,.14) 0%,transparent 60%);
}

/* ---- 3) Helles Theme ------------------------------------- */
[data-theme="light"]{
  --bg:          #f6f9f3;
  --bg-muted:    #eef3e9;
  --bg-card:     #ffffff;
  --bg-hover:    rgba(0,0,0,.04);
  --border:      rgba(0,0,0,.10);
  --text:        #13233a;
  --text-muted:  #4a5b6e;
  --text-dim:    #94a3b8;
  --c-accent-text: #2f7340;   /* dunkleres Grün für Akzent-Text auf hellem Grund (WCAG-Kontrast) */
  --shadow-glow: 0 0 40px rgba(123,191,92,.14);
  --hero-overlay: linear-gradient(to bottom,rgba(8,20,12,.6) 0%,rgba(8,20,12,.4) 50%,rgba(8,20,12,.72) 100%);
  --hero-glow:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(123,191,92,.20) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 82% 60%,rgba(79,115,64,.12) 0%,transparent 60%);
}

/* ===== Layout & Komponenten (portiert aus preview/index.php) ===== */
/* ── Layout & Komponenten — nutzen NUR Theme-Variablen ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
:root{--note-h:0px}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.2;letter-spacing:-.02em;font-weight:800}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{padding:110px 0}
.gradient-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{color:var(--c-accent-text);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:.78rem;margin-bottom:12px}
.lead{color:var(--text-muted);font-size:1.1rem}

/* Nav */
.nav{position:fixed;top:var(--note-h);left:0;right:0;z-index:100;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:0 24px;height:84px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:14px}
/* Logos groß & ohne Badge — tragen sich selbst.
   Im Dark-Mode heller Glow, damit die dunkle Silhouette sich abhebt. */
.logo-main{height:62px;width:auto;display:block;transition:filter .3s}
.logo-side{height:54px;width:auto;display:block;transition:filter .3s}
/* SV-Halle-Logo ist ein farbiges Querformat (150×60) mit dunkler Schrift → über Höhe skalieren.
   Im Dark-Mode geht die dunkle Logo-Schrift auf dunklem Header unter → helle „Plakette"
   (weißer Pill-Hintergrund, wie die Sponsor-Kacheln), damit das Markenlogo sauber sitzt.
   Im Light-Mode trägt sich das Logo selbst → kein Hintergrund nötig. */
.logo-svhalle{height:40px;border-radius:8px}
.brand-right{display:inline-flex;align-items:center;border-radius:10px;transition:background .3s,transform .25s}
.brand-right:hover{transform:translateY(-1px)}
[data-theme="dark"] .brand-right{background:#fff;padding:5px 12px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
[data-theme="dark"] .logo-main{filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(255,255,255,.35))}
[data-theme="light"] .logo-main,[data-theme="light"] .logo-side{filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.nav-logo-text{font-size:19px;font-weight:800;letter-spacing:-.02em}
.nav-logo-text small{display:block;font-size:11px;font-weight:600;color:var(--c-accent-text);letter-spacing:1px;text-transform:uppercase}
.nav-links{display:flex;gap:6px;list-style:none;align-items:center}
.nav-links li{flex:none}
.nav-links a{color:var(--text-muted);font-size:14px;font-weight:500;padding:8px 15px;border-radius:var(--radius-sm);transition:var(--transition);white-space:nowrap}
.nav-links a:hover{color:var(--text);background:var(--bg-hover)}
.nav-actions{display:flex;align-items:center;gap:10px}
/* Probetraining-CTA als hervorgehobener letzter Menüpunkt (höhere Spezifität schlägt .nav-links a) */
.nav-li-cta{margin-left:8px}
.nav-links a.nav-cta{background:var(--grad-brand);color:var(--on-brand);font-weight:700;padding:9px 20px;border-radius:var(--radius-pill)}
.nav-links a.nav-cta:hover{background:var(--grad-brand);color:var(--on-brand);opacity:.92;transform:translateY(-1px)}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--bg-card);color:var(--text);cursor:pointer;transition:var(--transition);font-size:16px}
.icon-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
/* Kompakter Sprach-Umschalter: aktive Flagge + Caret als Trigger, Rest im Dropdown.
   Spart Breite gegenüber dem alten 3-Tasten-Switch → Nav bricht nicht mehr um. */
.lang{position:relative}
.lang-toggle{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);
  border-radius:var(--radius-pill);background:var(--bg-card);color:var(--text);font:inherit;
  font-size:13px;font-weight:600;padding:8px 10px;cursor:pointer;transition:var(--transition);white-space:nowrap}
.lang-toggle:hover{border-color:var(--c-primary)}
.lang-cur{line-height:1}
.lang-caret{opacity:.6;transition:transform .25s}
.lang.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:auto;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-glow);
  padding:6px;display:grid;gap:2px;z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-opt{display:flex;align-items:center;justify-content:center;gap:0;padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--text-muted);font-size:13px;font-weight:600;text-decoration:none;transition:var(--transition);white-space:nowrap}
.lang-opt:hover{background:var(--bg-hover);color:var(--text)}
@media(prefers-reduced-motion:reduce){.lang-caret,.lang-menu{transition:none}}
/* SVG-Flaggen (font-unabhängig, gestochen scharf) */
.flag{width:18px;height:12px;border-radius:2px;display:inline-block;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);object-fit:cover}
/* Smoother Sprach-/Seitenwechsel */
body{opacity:0;animation:fadein .45s ease forwards}
@keyframes fadein{to{opacity:1}}
body.fade-out{opacity:0;transition:opacity .28s ease}
@media(prefers-reduced-motion:reduce){body,body.fade-out{animation:none;opacity:1;transition:none}}

/* Burger (mobil) */
.burger{display:none;width:42px;height:42px;border:1px solid var(--border);background:var(--bg-card);
  border-radius:var(--radius-sm);cursor:pointer;place-items:center;color:var(--text)}
.burger svg{width:22px;height:22px}
@media(max-width:1023px){
  .nav-links{position:fixed;inset:calc(var(--note-h) + 84px) 0 auto 0;flex-direction:column;gap:0;
    background:var(--bg-card);border-bottom:1px solid var(--border);padding:8px 0;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .3s ease,opacity .25s ease,visibility .3s;box-shadow:var(--shadow-glow)}
  .nav-links.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .nav-links a{display:block;padding:14px 24px;font-size:1rem;border-radius:0}
  .brand-right{display:none}
  .burger{display:grid}
  /* Schmalere Ränder + kleinere Action-Lücken, damit Logo/Burger/Sprache/Theme
     auf dem Handy nebeneinander passen (vorher Überlappung + Overflow). */
  .nav-inner{padding:0 16px;gap:10px}
  .nav-actions{gap:8px}
  /* Sprach-Umschalter auf dem Handy nur als Flagge (Label + Caret aus) → schmaler */
  .lang-toggle{gap:0;padding:8px}
  .lang-toggle .lang-cur,.lang-toggle .lang-caret{display:none}
  /* Logo-Text darf schrumpfen/kürzen statt den Burger zu überlappen. */
  .nav-logo{min-width:0;flex:1 1 auto;gap:10px}
  .nav-logo-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
  .nav-logo-text small{white-space:nowrap}
  .logo-main{height:48px}
  /* Probetraining im aufgeklappten Mobile-Menü als vollbreiter, hervorgehobener Eintrag */
  .nav-li-cta{margin:8px 16px 4px}
  .nav-links a.nav-cta{text-align:center;border-radius:var(--radius-pill);padding:13px 20px}
}
/* Sehr schmale Phones (≤400px): Action-Buttons + Logo weiter verdichten,
   damit nichts mehr aus dem Viewport ragt. */
@media(max-width:400px){
  .nav-inner{padding:0 12px;gap:8px}
  .nav-actions{gap:6px}
  .burger{width:38px;height:38px}
  .icon-btn{width:36px;height:36px}
  .lang-toggle{padding:7px}
  .nav-logo-text{font-size:15px}
  .nav-logo-text small{font-size:10px}
  .logo-main{height:42px}
}

/* Hero */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:72px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;background:var(--hero-overlay)}
.hero-bg{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--hero-glow)}
.hero-inner{position:relative;z-index:3}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.stories{background:color-mix(in srgb,#000 28%,transparent);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:20px 22px;min-width:230px}
.stories-label{color:#fff;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.stories-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.story{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;transition:var(--transition)}
.story:hover .story-ring{transform:scale(1.06)}
.story-ring{transition:transform .2s}
.stories-hint{text-decoration:none}
.stories-hint:hover{color:var(--c-primary)}
.story-ring{width:54px;height:54px;border-radius:50%;padding:2.5px;
  background:var(--grad-brand);box-shadow:0 0 14px rgba(123,191,92,.4);display:block}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:2px solid #0a0f1e;display:block}
.story small{color:rgba(255,255,255,.82);font-size:.68rem}
.stories-hint{color:rgba(255,255,255,.6);font-size:.7rem;margin-top:14px;text-align:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.stories{display:none}}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:900;color:#f1f5f9;margin-bottom:18px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero-sub{font-size:clamp(1.05rem,2.2vw,1.4rem);color:rgba(226,232,240,.9);max-width:620px;margin-bottom:32px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.btn{display:inline-block;font-weight:700;padding:15px 30px;border-radius:var(--radius-pill);transition:var(--transition);cursor:pointer;border:0;font-size:1rem}
.btn-primary{background:var(--grad-brand);color:var(--on-brand);box-shadow:var(--shadow-glow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
/* Hero-CTAs: nebeneinander mit Abstand; auf dem Handy gestapelt + vollbreit
   (vorher per margin-left versetzt → beim Umbruch unsauber/„klebend"). */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
@media(max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;text-align:center}
}

/* Stats */
.stats{background:var(--bg-muted);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:46px 0}
.stat{text-align:center}
.stat b{display:block;font-size:2.1rem;font-weight:900;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{color:var(--text-muted);font-size:.92rem}
@media(max-width:680px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* About */
.about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:30px;box-shadow:var(--shadow-glow)}
.card h3{color:var(--c-accent-text);margin-bottom:12px;font-size:1.25rem}
/* „In den Medien"-Block: MDR-Beitrag (externer, rechtskonform gekennzeichneter Link) */
#medien{padding:56px 0}
.media-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-glow);max-width:760px;margin:0 auto;text-align:center}
.media-card h2{margin-top:4px}
.media-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;text-decoration:none;max-width:100%}
.media-link svg{flex:none}
.media-extnote{margin-top:12px;font-size:.82rem;color:var(--text-muted)}
.card .muted{color:var(--text-muted);font-size:.9rem;margin-top:14px}
.contact-line{margin-top:10px;font-weight:600}
.contact-line a{color:var(--c-accent-text)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}}

/* Sportbereiche */
.section-head{max-width:680px;margin-bottom:44px}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.areas{display:grid;gap:16px}
.area{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition)}
.area:hover{border-color:color-mix(in srgb,var(--c-primary) 50%,var(--border))}
.area>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:24px 26px;font-weight:700;font-size:1.2rem}
.area>summary::-webkit-details-marker{display:none}
.area .tag{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--c-accent-text);
  background:color-mix(in srgb,var(--c-primary) 14%,transparent);padding:6px 14px;border-radius:var(--radius-pill);white-space:nowrap}
.area .plus{width:24px;height:24px;flex:none;position:relative}
.area .plus::before,.area .plus::after{content:"";position:absolute;background:var(--c-primary);border-radius:2px;transition:.25s}
.area .plus::before{top:11px;left:3px;right:3px;height:2px}
.area .plus::after{left:11px;top:3px;bottom:3px;width:2px}
.area[open] .plus::after{transform:scaleY(0)}
.area-body{padding:2px 26px 28px;color:var(--text-muted)}
.area-body p{margin-bottom:14px}
.subgroup{border-left:3px solid var(--c-primary);padding-left:18px;margin-bottom:18px}
.subgroup h4{color:var(--text);margin-bottom:6px;font-size:1.05rem}
.leaders{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.leader{background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 15px;font-size:.88rem;color:var(--text)}
.leader b{color:var(--c-accent-text)}
/* Trainer-Karten (Bild + Beschreibung je Bereich) */
.coaches-label{margin:20px 0 12px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--c-accent-text)}
.coaches{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.coach{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:var(--bg-muted);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 18px}
.coach img{width:128px;height:128px;border-radius:50%;object-fit:cover;flex:none;margin-bottom:6px;
  border:3px solid var(--c-primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-primary) 16%,transparent)}
.coach .ph-avatar{width:128px;height:128px;border-radius:50%;flex:none;display:grid;place-items:center;margin-bottom:6px;
  background:var(--grad-brand);color:var(--on-brand);font-weight:800;font-size:2.4rem;
  border:3px solid var(--c-primary)}
.coach .c-name{font-weight:700;color:var(--text);font-size:1.05rem}
.coach .c-role{color:var(--c-accent-text);font-size:.82rem;font-weight:600;margin-bottom:4px}
.coach .c-desc{color:var(--text-muted);font-size:.85rem;line-height:1.5}
.coach .c-lic{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;color:var(--c-accent-text);
  background:color-mix(in srgb,var(--c-primary) 13%,transparent);padding:3px 10px;border-radius:var(--radius-pill)}
.ph{background:var(--bg-muted)}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.gcard{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);
  background:var(--bg-card);aspect-ratio:4/5}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gcard:hover img{transform:scale(1.05)}
.gcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 14px;
  background:linear-gradient(transparent,rgba(2,6,23,.86));color:#fff}
.gcard .g-tag{display:inline-block;background:var(--grad-brand);color:var(--on-brand);
  font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);margin-bottom:6px}
.gcard .g-title{font-weight:700;font-size:.98rem;line-height:1.25}
.gcard .g-meta{font-size:.78rem;color:rgba(255,255,255,.78);margin-top:2px}
.gallery-note{margin-top:18px;font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.ig-pill{text-decoration:none;transition:var(--transition)}
.ig-pill:hover{border-color:var(--c-primary);color:var(--c-primary)}
.ig-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--bg-card);
  border-radius:var(--radius-pill);padding:7px 14px;font-weight:600;font-size:.85rem;color:var(--text)}
/* Tablet 2-spaltig, Handy 1-spaltig (sonst saß die 3. Kachel allein in Reihe 2) */
@media(max-width:860px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gallery{grid-template-columns:1fr}}

/* Aktuelles / News — Wettkampfbericht (Karte auf getöntem Grund) */
.news{background:var(--bg-muted);padding:90px 0}
.news-meta{color:var(--c-accent-text);font-weight:600;margin-top:10px}
.news-article{max-width:820px;margin:0 auto;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-glow)}
.news-medals{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.medal{display:inline-flex;align-items:center;gap:8px;background:var(--bg-muted);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:7px 15px;font-size:.9rem;font-weight:700;color:var(--text)}
.medal b{font-size:1.1rem;line-height:1}
.news-lead{color:var(--text);font-size:1.15rem;line-height:1.65;margin-bottom:6px}
.news-sub{color:var(--c-accent-text);font-size:1.2rem;font-weight:800;margin:28px 0 12px}
.news-article p{color:var(--text-muted);line-height:1.7;margin-bottom:14px}
.news-close{color:var(--text)!important;font-weight:500;margin-top:20px;margin-bottom:0}
/* Mehrere Beiträge untereinander, neuester zuerst. Titel und Meta-Zeile
   stehen seit #7506 im Beitrag selbst, nicht mehr im Abschnittskopf. */
.news-article + .news-article{margin-top:26px}
.news-title{font-size:1.45rem;line-height:1.3;font-weight:800;color:var(--text);margin:0 0 6px}
.news-article .news-meta{margin:0 0 22px}
.news-body>*:first-child{margin-top:0}
.news-body>*:last-child{margin-bottom:0}
.news-body p{color:var(--text-muted);line-height:1.7;margin-bottom:14px}
.news-body>p:first-child{color:var(--text);font-size:1.15rem;line-height:1.65}
.news-body h3,.news-body h4{color:var(--c-accent-text);font-size:1.2rem;font-weight:800;margin:28px 0 12px}
.news-body ul,.news-body ol{color:var(--text-muted);line-height:1.7;margin:0 0 14px 1.2em}
/* Bilder kommen aus dem Beitrag, damit die Redaktion sie selbst setzen kann. */
.news-body img{display:block;width:100%;height:auto;border-radius:var(--radius-md);margin:4px 0 18px}
.news-body figure{margin:4px 0 18px}
.news-body figure img{margin:0}
.news-body figcaption{font-size:.82rem;color:var(--text-muted);margin-top:8px;text-align:center}
.news-body blockquote{margin:18px 0;padding:14px 20px;border-left:3px solid var(--c-primary);
  background:var(--bg-muted);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text)}
.news-body blockquote p{color:var(--text);margin-bottom:0}
.news-body blockquote footer{display:block;margin-top:10px;font-size:.84rem;font-weight:600;
  color:var(--text-muted);font-style:normal}
.news-body blockquote footer::before{content:"— "}
@media(max-width:600px){.news-article{padding:26px 20px}.news-title{font-size:1.25rem}}
@media(max-width:600px){.news{padding:64px 0}.news-article{padding:26px 20px}}

/* Archiv-Seite (/{locale}/archiv) — eigenständige Content-Seite (ohne legal.css) */
.arch-hero{padding:calc(84px + var(--note-h) + 46px) 0 40px;background:var(--bg-muted);border-bottom:1px solid var(--border)}
.arch-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:6px 0 12px}
.arch-hero .lead{max-width:680px}
.arch-section{padding:48px 0 90px}
.arch-empty{color:var(--text-muted);font-size:1.05rem;background:var(--bg-card);border:1px dashed var(--border);
  border-radius:var(--radius-md);padding:34px;text-align:center}
.arch-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.arch-chip{border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font:inherit;
  font-size:.9rem;font-weight:600;padding:9px 18px;border-radius:var(--radius-pill);cursor:pointer;transition:var(--transition)}
.arch-chip:hover{border-color:var(--c-primary);color:var(--text)}
.arch-chip.is-active{background:var(--grad-brand);color:var(--on-brand);border-color:transparent}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:22px}
.arch-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-glow);transition:transform .25s,border-color .25s}
.arch-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c-primary) 45%,var(--border))}
.arch-media{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center}
.arch-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.arch-card:hover .arch-media img{transform:scale(1.04)}
/* Farbverlauf-Platzhalter je Kategorie (falls kein Bild) */
.arch-media--foto{background:linear-gradient(135deg,#4f9c4a,#2f7340)}
.arch-media--programmheft{background:linear-gradient(135deg,#3b5bdb,#1e3a8a)}
.arch-media--termin{background:linear-gradient(135deg,#0ea5a4,#155e63)}
.arch-media--text{background:linear-gradient(135deg,#7c5cbf,#4c2f83)}
.arch-ph{color:rgba(255,255,255,.9);font-size:2rem;font-weight:900;letter-spacing:.5px}
.arch-badge{position:absolute;top:12px;left:12px;background:rgba(2,6,23,.62);color:#fff;backdrop-filter:blur(4px);
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:5px 11px;border-radius:var(--radius-pill)}
.arch-year{position:absolute;top:10px;right:14px;color:#fff;font-size:1.15rem;font-weight:900;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.arch-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.arch-cardmeta{color:var(--c-accent-text);font-weight:700;font-size:.82rem}
.arch-body h3{font-size:1.12rem;line-height:1.3}
.arch-text{color:var(--text-muted);font-size:.92rem;line-height:1.6}
.arch-doc{display:inline-flex;align-items:center;gap:8px;margin-top:auto;align-self:flex-start;
  background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:8px 15px;font-size:.85rem;font-weight:700;color:var(--c-accent-text);transition:var(--transition)}
.arch-doc:hover{border-color:var(--c-primary);transform:translateY(-1px)}
.arch-doc svg{flex:none}
.arch-back{margin-top:44px}
.arch-back a{color:var(--text-muted);font-weight:600}
.arch-back a:hover{color:var(--c-accent-text)}
@media(max-width:600px){.arch-section{padding:34px 0 64px}.arch-grid{grid-template-columns:1fr}}

/* Termine */
.dates-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:36px;align-items:start}
.date-list{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);column-gap:16px;row-gap:2px}
.date-list>.lead{grid-column:1/-1}
.date-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;padding:14px 4px;border-bottom:1px solid var(--border);align-items:baseline}
.date-row:hover{background:var(--bg-hover)}
.date-when{font-weight:800;color:var(--c-accent-text);font-size:.9rem;line-height:1.3;white-space:nowrap}
.date-what{color:var(--text);font-weight:600;font-size:.98rem}
.date-where{display:block;color:var(--text-muted);font-weight:400;font-size:.85rem;margin-top:2px}
.date-doc{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-weight:700;font-size:.84rem;
  color:var(--c-accent-text);text-decoration:none;
  background:color-mix(in srgb,var(--c-primary) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--c-primary) 35%,transparent);
  border-radius:var(--radius-pill);padding:6px 14px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.date-doc:hover{background:color-mix(in srgb,var(--c-primary) 24%,transparent);
  border-color:var(--c-primary);transform:translateY(-1px)}
.date-doc:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.date-doc svg{flex:none}
.date-row.hl .date-what{color:var(--c-primary)}
.date-row.hl .date-where{color:color-mix(in srgb,var(--c-primary) 75%,var(--text-muted))}
/* Trainingszeiten-Tabelle */
.tt-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.tt-head{background:var(--grad-brand);color:var(--on-brand);font-weight:800;padding:14px 18px;font-size:1rem}
.tt{width:100%;border-collapse:collapse;font-size:.86rem}
.tt th{text-align:left;color:var(--text-muted);font-weight:700;text-transform:uppercase;font-size:.7rem;
  letter-spacing:.5px;padding:10px 14px;border-bottom:1px solid var(--border)}
.tt td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text-muted);vertical-align:top}
.tt td.g{color:var(--text);font-weight:700}
.tt tr:last-child td{border-bottom:0}
.tt-note{color:var(--text-muted);font-size:.8rem;margin-top:10px}
@media(max-width:860px){.dates-grid{grid-template-columns:1fr}}

/* Kontakt & Probetraining */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;margin-top:36px;align-items:start}
.contact-info p{color:var(--text-muted);margin-bottom:14px}
.contact-info .ci-row{display:flex;gap:12px;align-items:center;margin-bottom:14px;color:var(--text)}
.contact-info .ci-row svg{width:20px;height:20px;color:var(--c-primary);flex:none}
.contact-info a{color:var(--c-primary)}
.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-glow)}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:6px}
.field input,.field textarea{width:100%;background:var(--bg-muted);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;color:var(--text);font:inherit;font-size:.95rem;transition:var(--transition)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--c-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 20%,transparent)}
.field textarea{resize:vertical;min-height:120px}
.field-check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--text-muted);margin-bottom:18px}
.field-check input{margin-top:3px;accent-color:var(--c-primary);width:16px;height:16px;flex:none}
.field-check a{color:var(--c-primary)}
.form-card .btn-primary{width:100%;text-align:center}
.form-note{margin-top:14px;font-size:.8rem;color:var(--text-dim);text-align:center}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:28px}}

/* Sponsoren-Laufleiste — zwei Tracks nebeneinander = lückenloses Endlosband */
.sponsors{background:var(--bg);border-top:1px solid var(--border);padding:28px 0 30px;overflow:hidden}
.sponsors-title{text-align:center;color:var(--text-muted);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:20px}
.marquee{display:flex;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;align-items:center;gap:28px;padding-left:14px;flex:0 0 auto;min-width:100%;
  justify-content:space-around;animation:scroll-x 40s linear infinite;will-change:transform}
.sponsors:hover .marquee-track,.sponsors:focus-within .marquee-track{animation-play-state:paused}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* "Bewegung reduzieren" im Betriebssystem: langsamer statt stehend (#7921).
   Bis dahin stand das Band dann still — auf Windows mit abgeschalteten
   Animationseffekten und in Remote-Sitzungen ist das häufig, und André sah
   es deshalb nie laufen. Halbes Tempo; Maus darüber oder Tastaturfokus auf
   einem Logo halten es weiter an. */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation-duration:80s}
}
.sponsor{flex:none;display:grid;place-items:center;background:#fff;border-radius:var(--radius-md);
  padding:14px 22px;height:84px;min-width:140px;box-shadow:0 2px 10px rgba(0,0,0,.10);transition:var(--transition)}
.sponsor img{max-height:54px;max-width:150px;width:auto;object-fit:contain;display:block}
/* animiertes ISN-Markenlogo (quadratisch) etwas größer als die Wortmarken */
.sponsor-isn img{height:46px;width:46px;max-height:46px;border-radius:11px}
.sponsor:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}
a.sponsor{text-decoration:none}

/* Footer */
.footer{background:var(--bg-muted);border-top:1px solid var(--border);padding:60px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.footer h4{margin-bottom:16px;font-size:1rem}
.footer ul{list-style:none;display:grid;gap:9px;font-size:.95rem}
/* Kontaktspalte exakt bündig zur ersten <li> der Nachbarspalten:
   erste .contact-line direkt unter h4, Folgezeilen mit gleichem Abstand wie ul-gap */
.footer .contact-line{margin-top:9px}
.footer .contact-line:first-of-type{margin-top:0}
.footer a{color:var(--text-muted)}
.footer a:hover{color:var(--c-primary)}
.foot-credit{display:inline-flex;align-items:center;gap:8px}
.isn-logo-link{display:inline-flex;line-height:0;border-radius:6px;transition:transform .25s ease}
.isn-logo-link:hover{transform:translateY(-1px) scale(1.06)}
.isn-logo-link img{display:block}
.footer-bottom{border-top:1px solid var(--border);margin-top:34px;padding-top:20px;color:var(--text-dim);
  font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:780px){.footer-grid{grid-template-columns:1fr}}

/* Hero beginnt unter der Nav (84px); --note-h=0 seit Entfernen der Preview-Leiste */
.hero{padding-top:calc(84px + var(--note-h))}
/* Rechtsseiten (Impressum/Datenschutz/404): Content unter den fixen Header
   (Nav 84px + Preview-Banner) schieben — sonst überlappt der Titel die Navigation. */
main.legal{padding-top:calc(84px + var(--note-h) + 36px)}
@media(max-width:680px){main.legal{padding-top:calc(84px + var(--note-h) + 20px)}}

/* Intelligentes Event-Popup */
.event-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(2,6,23,0);backdrop-filter:blur(0px);opacity:0;
  transition:opacity .7s ease, background .7s ease, backdrop-filter .7s ease}
.event-modal.show{display:flex;opacity:1;background:rgba(2,6,23,.74);backdrop-filter:blur(8px)}

/* Card-Auftritt: sanft, ruhig — zartes Hochgleiten + Fade, keine Drehung, kein Bounce. */
.event-card{position:relative;background:var(--bg-card);border-radius:var(--radius-lg);
  max-width:560px;width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;overflow-x:hidden;
  transform-origin:50% 100%;-webkit-overflow-scrolling:touch;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px var(--border), 0 8px 44px rgba(79,156,74,.22);
  transform:translateY(20px) scale(.985);opacity:0;
  transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .8s ease}
.event-modal.show .event-card{transform:none;opacity:1}
/* dezente Scrollbar, falls Inhalt höher als der Viewport (Mobile) */
.event-card::-webkit-scrollbar{width:6px}
.event-card::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--c-primary) 40%,transparent);border-radius:3px}

/* Gestaffeltes Einblenden der Inhalte (stagger) — sanft, ruhig, fließend */
.event-card .ec-img,.event-card .ec-badge,.event-card h3,
.event-card .ec-meta,.event-card .ec-text,.event-card .ec-actions{
  opacity:0;transform:translateY(8px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.event-modal.show .event-card .ec-img{opacity:1;transform:none;transition-delay:.25s}
.event-modal.show .event-card .ec-badge{opacity:1;transform:none;transition-delay:.40s}
.event-modal.show .event-card h3{opacity:1;transform:none;transition-delay:.50s}
.event-modal.show .event-card .ec-meta{opacity:1;transform:none;transition-delay:.60s}
.event-modal.show .event-card .ec-text{opacity:1;transform:none;transition-delay:.70s}
.event-modal.show .event-card .ec-actions{opacity:1;transform:none;transition-delay:.80s}

/* Inhalt-Layer (Bild, Body, Close) */
.event-card .ec-img,.event-card .ec-body{position:relative;z-index:1}
.event-card .ec-close{z-index:5}

/* weicher, schwebender Schatten mit zartem grünem Akzent (statisch, ruhig) */
.event-card{box-shadow:0 30px 80px rgba(0,0,0,.6), 0 10px 44px rgba(79,156,74,.24)}

@media(prefers-reduced-motion:reduce){
  .event-card{transform-origin:50% 50%;transition:opacity .3s ease}
  .event-modal.show .event-card::after{animation:none}
  /* kein Stagger/keine Slides bei reduzierter Bewegung */
  .event-card .ec-img,.event-card .ec-badge,.event-card h3,
  .event-card .ec-meta,.event-card .ec-text,.event-card .ec-actions{transition:opacity .3s ease;transform:none}
  .event-modal.show .event-card :where(.ec-img,.ec-badge,h3,.ec-meta,.ec-text,.ec-actions){transition-delay:0s}
}
.event-card .ec-img{width:100%;aspect-ratio:5/3;object-fit:cover;display:block}
.event-card .ec-body{padding:24px 26px 26px}
.event-card .ec-badge{display:inline-block;background:var(--grad-brand);color:var(--on-brand);
  font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:12px}
.event-card h3{font-size:1.5rem;margin-bottom:8px;line-height:1.2}
.event-card .ec-meta{color:var(--c-accent-text);font-weight:600;margin-bottom:12px}
.event-card .ec-text{color:var(--text-muted);font-size:.95rem;margin-bottom:20px}
.event-card .ec-actions{display:flex;gap:10px;flex-wrap:wrap}
.event-card .ec-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(2,6,23,.55);color:#fff;display:grid;place-items:center;font-size:20px;line-height:1;z-index:4}
.event-card .ec-close:hover{background:rgba(2,6,23,.8)}

/* ===== Mobile: Bottom-Sheet — gleitet von unten herein, dockt unten an ===== */
@media(max-width:520px){
  .event-modal{padding:0;align-items:flex-end}
  .event-card{max-width:100%;width:100%;max-height:92dvh;transform-origin:50% 100%;
    border-radius:22px 22px 0 0;
    /* von unten hereingleiten statt Dreh-Schwung (natürliches Sheet-Gefühl) */
    transform:translateY(100%);transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease}
  .event-modal.show .event-card{transform:translateY(0)}
  .event-card h3{font-size:1.25rem}
  .event-card .ec-body{padding:20px 20px 24px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .event-card .ec-img{aspect-ratio:16/9}            /* flacher → mehr Platz für Text/Buttons */
  .event-card .ec-actions{flex-direction:column}    /* Buttons untereinander, leichter tippbar */
  .event-card .ec-actions .btn{width:100%;justify-content:center}
  /* Griff-Indikator wie bei nativen Sheets */
  .event-card::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.5);
    z-index:5;opacity:0;box-shadow:none;inset:auto auto auto 50%;animation:none;
    transition:opacity .4s ease .3s}
  .event-modal.show .event-card::after{opacity:1;animation:none;box-shadow:none}
}
@media(max-width:520px) and (prefers-reduced-motion:reduce){
  .event-card{transition:opacity .3s ease}
  .event-modal.show .event-card{transform:none}
}

/* ------------------------------------------------------------------ *
 * Berichte: die Breite nutzen, die der Abschnitt ohnehin hat (#7546)
 *
 * Bis hierher begrenzte sich .news-article auf 820 px und zentrierte sich
 * im 1200-px-Container — demselben, den #galerie, #sportbereiche und
 * #termine voll ausnutzen. 380 px blieben leer, und der Abschnitt wurde
 * dadurch 3552 px hoch (gemessen bei zwei Berichten, 1920 px Fenster).
 *
 * Statt die Säule einfach zu verbreitern, stehen zwei Berichte nebeneinander.
 * Eine Textzeile von 1120 px wäre unlesbar — über rund 85 Zeichen verliert
 * das Auge beim Zeilenwechsel die Spur. Zwei Spalten geben je etwa 65
 * Zeichen, also genau den angenehmen Bereich, und halbieren zugleich die
 * Höhe.
 *
 * :has() sorgt dafür, dass ein EINZELNER Bericht seine 820 px behält. Ein
 * allein stehender Bericht über die halbe Seitenbreite sähe aus wie ein
 * Fehler, und sobald der Verein nur einen Wettkampf gemeldet hat, ist genau
 * das der Normalfall. Browser ohne :has() bleiben beim heutigen Verhalten —
 * der Rückfall ist der Ist-Zustand, nicht ein kaputter.
 * ------------------------------------------------------------------ */
@media(min-width:1100px){
  .news .container:has(.news-article + .news-article){
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:28px;
    align-items:start;
  }
  .news .container:has(.news-article + .news-article) .section-head{
    grid-column:1 / -1;
  }
  .news .container:has(.news-article + .news-article) .news-article{
    max-width:none;
    margin:0;
  }
  /* Hebt .news-article + .news-article{margin-top:26px} auf — im Raster
     sitzen die Berichte nebeneinander, nicht untereinander. */
  .news .container:has(.news-article + .news-article) .news-article + .news-article{
    margin-top:0;
  }
}

/* --- Aufmacher als Diaschau (#7519, UC-0692) ------------------------------
   Die Komponente bringt nur Struktur mit; Farben, Schrift und Höhe gehören
   dem Theme. Sie liest sie aus diesen Variablen, damit hier kein Kampf um
   Spezifität nötig ist: Der Stilblock der Komponente steht im Body und
   gewinnt gegen die theme.css im Head, sobald beide gleich spezifisch sind. */
.hero--aufmacher{min-height:0;display:block;padding-top:0;align-items:initial}
.hero--aufmacher .hero-slideshow{
  --isn-slideshow-full-height:100svh;
  --isn-slideshow-bg:#0b1220;
  --isn-slideshow-fg:#f1f5f9;
  --isn-slideshow-accent:var(--c-primary);
  --isn-slideshow-accent-fg:#0b1220;
}
/* Die Schrift der Folien folgt der des alten Hero, damit der Wechsel kein
   Stilbruch ist. */
.hero--aufmacher .isn-slideshow__title{font-weight:900;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero--aufmacher .isn-slideshow__lead{text-shadow:0 1px 14px rgba(0,0,0,.4)}

/* Story-Highlights als eigene Ebene: dieselbe Stelle wie vorher, ohne die
   Zwei-Spalten-Grid, die es im Vollbild-Aufmacher nicht mehr gibt.
   pointer-events bleibt aus, damit die Ebene die Diaschau nicht abdeckt. */
.hero-stories-layer{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;pointer-events:none;
  padding-bottom:clamp(72px,9vh,96px)}
.hero-stories-layer>.container{display:flex;justify-content:flex-end;width:100%}
.hero-stories-layer .stories{pointer-events:auto}
/* Unten rechts und kompakt statt rechts mittig (#7921): André am 21.10.2026 —
   mittig verdeckte der Kasten auf den Aufmacher-Fotos die Gesichter. Unten
   rechts liegen auf Gruppen- und Wettkampffotos Beine und Medaillen; Titel
   und Schaltflächen stehen links, die Folienpunkte mittig, der Pausenknopf
   außerhalb des Containers. */
.hero-stories-layer .stories{min-width:0;padding:12px 16px 10px}
.hero-stories-layer .stories-label{font-size:.72rem;margin-bottom:10px}
.hero-stories-layer .stories-row{gap:10px}
.hero-stories-layer .story-ring{width:44px;height:44px}
.hero-stories-layer .stories-hint{margin-top:8px}
/* Folientext und Kasten teilen sich die untere Zone: Titel und Untertitel
   enden vor der linken Kante des Kastens. Der Text spannt über die ganze
   Bildbreite, der Kasten hängt am zentrierten Container (1200 px) — daher
   zwei Grenzen: schmales Fenster 100vw − 400px, breites 50vw + 200px. */
@media(min-width:961px){
  .hero--aufmacher .isn-slideshow__title,.hero--aufmacher .isn-slideshow__lead{max-width:min(100vw - 400px,50vw + 200px)}
}
@media(max-width:960px){.hero-stories-layer{display:none}}


/* --- Detailseite eines Beitrags (#7519, UC-0692) --------------------------
   Der Abstand nach oben folgt dem Muster von .arch-hero: Die Navigation
   liegt fest über der Seite, und ohne ihn verschwindet die Kopfzeile
   dahinter. --note-h ist die Hinweisleiste, die zuweilen darüber steht. */
.post{padding:calc(84px + var(--note-h) + 32px) 0 64px}
/* Text und Bilder stehen in derselben Spalte (#7921).

   Bis dahin durften die Bilder bis 1120 px über die 832-px-Textspalte
   hinausragen (#7519). André am 21.10.2026: Bilder, die seitlich
   herausspringen, wirken nicht gut — eine gemeinsame Kante ist ruhiger.
   Die Spalte selbst bleibt schmal, denn breiter litte die Lesbarkeit
   (832 px sind bei dieser Schrift schon rund 95 Zeichen je Zeile). */
.post-layout{max-width:1168px}
/* legal.css (Rechtsseiten) setzt main{max-width:880px} auf jeder Seite außer
   Start und Archiv — auch hier. Das hielt das Raster auf 880 px. */
main.post{max-width:none}
/* Ab 1024 px Beitrag und Seitenleiste nebeneinander (#7921): André wollte
   den freien Platz genutzt, aber keine volle Breite. Die Textspalte bleibt
   bei rund 770 px (gut 85 Zeichen), die Leiste zeigt Erfolge, weitere
   Berichte und den Rückweg und bleibt beim Lesen stehen. Darunter steht
   sie unter dem Beitrag. */
@media(min-width:1024px){
  .post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:48px;align-items:start}
  .post-aside{position:sticky;top:calc(84px + var(--note-h) + 24px)}
}
.post-main{min-width:0}
.post-aside{display:flex;flex-direction:column;gap:20px;margin-top:40px}
@media(min-width:1024px){.post-aside{margin-top:6px}}
.post-aside-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 22px 18px}
.post-aside-title{font-size:.78rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--c-accent-text);margin:0 0 14px}
.post-medals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.post-medals .medal{width:100%;margin:0}
.post-more-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.post-more-list a{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;
  color:var(--text);text-decoration:none;font-weight:700;font-size:.95rem;line-height:1.35}
.post-more-list a:not(:has(img)){grid-template-columns:1fr}
.post-more-list img{width:88px;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius-md) * .6);display:block}
.post-more-list a:hover span,.post-more-list a:focus-visible span{color:var(--c-accent-text);text-decoration:underline}
.post-aside .post-back{margin:0}
.post-aside .post-back-link{display:block;text-align:center}
.post-figure,.post-gallery,.post-body>figure{width:100%;margin-left:0;margin-right:0}
.post-body>figure{margin-top:28px;margin-bottom:28px}
/* Breit ja, bildschirmfüllend nein: Ein Hochformat hätte sonst 93 % der
   Fensterhöhe eingenommen. Mit Höhengrenze nutzt ein Querformat die
   volle Breite, ein hohes Bild wird schmaler statt höher. */
.post-body>figure img{display:block;margin:0 auto;max-width:100%;
  max-height:72svh;width:auto;height:auto;border-radius:var(--radius,14px)}
.post-body>figure figcaption{margin-top:8px;font-size:.82rem;color:var(--text-muted);
  text-align:center}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 14px;
  font-size:.86rem;color:var(--text-muted)}
.post-category{display:inline-block;padding:.28em .8em;border-radius:999px;
  background:color-mix(in srgb,var(--c-primary) 16%,transparent);
  color:var(--c-primary);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:.74rem}
.post h1,.post-title{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.15;margin:0 0 16px;text-wrap:balance}
.post-teaser{font-size:clamp(1.02rem,2vw,1.18rem);line-height:1.6;color:var(--text-muted);
  margin:0 0 28px}

.post-figure{margin:0 0 32px}
.post-figure img{width:100%;height:auto;max-height:58svh;object-fit:cover;
  border-radius:var(--radius,14px)}
.post-figure figcaption,.post-gallery figcaption{margin-top:8px;font-size:.82rem;
  color:var(--text-muted)}

.post-body{font-size:1.08rem;line-height:1.72}
.post-body p{margin:0 0 18px}
/* Überschriften aus dem Fließtext: Im Beitrag steht bereits ein h1 über
   allem, also darf keine aus dem Inhalt größer wirken als dieses. */
.post-body h1,.post-body h2{font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.25;
  margin:32px 0 12px}
.post-body h3{font-size:1.15rem;margin:26px 0 10px}
.post-body h4,.post-body h5,.post-body h6{font-size:1.02rem;font-weight:700;
  margin:22px 0 8px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin:0 0 8px}
.post-body img{max-width:100%;height:auto;border-radius:var(--radius,14px);margin:8px 0}
.post-body blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--c-primary);
  background:var(--bg-muted);border-radius:0 var(--radius,14px) var(--radius,14px) 0}
.post-body a{color:var(--c-primary)}

.post-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin:32px 0}
.post-gallery figure{margin:0}
.post-gallery img{width:100%;height:220px;object-fit:cover;border-radius:var(--radius,14px)}

.post-downloads{margin:36px 0;padding:20px 24px;background:var(--bg-muted);
  border-radius:var(--radius,14px)}
.post-downloads h2{margin:0 0 12px;font-size:1.05rem}
.post-downloads ul{margin:0;padding:0;list-style:none}
.post-downloads li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 8px}
.post-downloads small{color:var(--text-muted)}

.post-back{margin:40px 0 0}
/* .btn-ghost ist weiße Schrift auf durchscheinendem Grund — gebaut für den
   dunklen Aufmacher der Startseite. Auf dem hellen Grund der Detailseite war
   der Verweis praktisch unsichtbar. */
.post-back-link{background:var(--bg-muted);color:var(--c-primary);
  border:1.5px solid color-mix(in srgb,var(--c-primary) 35%,transparent)}
.post-back-link:hover{background:color-mix(in srgb,var(--c-primary) 12%,var(--bg-muted))}

@media(max-width:600px){
  .post{padding-top:calc(84px + var(--note-h) + 20px)}
  .post-gallery img{height:180px}
  .post-figure img{max-height:46svh}
}

/* Sitemap (/de/sitemap) — #7840 */
main.sitemap h2{margin-top:34px;font-size:1.15rem}
.sitemap-list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--border)}
.sitemap-list>li{border-bottom:1px solid var(--border);padding:13px 0}
.sitemap-list a{color:var(--text);text-decoration:none;font-weight:600}
.sitemap-list a:hover,.sitemap-list a:focus-visible{color:var(--c-primary)}
.sitemap-list ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.sitemap-list ul a{font-weight:500;color:var(--text-dim)}

/* ------------------------------------------------------------------ *
 * Berichte als Teaser (#7921)
 *
 * Die Startseite zeigt je Bericht Bild, Titel, Wettkampf, Medaillen und
 * den ersten Absatz; der ganze Text steht auf der Detailseite
 * /<sprache>/beitrag/<slug>. Das Bild wird auf 16:9 zugeschnitten, damit
 * zwei Berichte nebeneinander gleich hoch beginnen — Hoch- und Querformat
 * sehen sonst wie zwei verschiedene Bausteine aus.
 * ------------------------------------------------------------------ */
.news-teaser{display:flex;flex-direction:column}
.news-thumb{display:block;margin:0 0 22px;border-radius:var(--radius-md);overflow:hidden}
.news-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
.news-thumb:hover img{transform:scale(1.03)}
.news-title a{color:inherit;text-decoration:none}
.news-title a:hover,.news-title a:focus-visible{color:var(--c-accent-text)}
.news-more{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-weight:700;color:var(--c-accent-text);text-decoration:none}
.news-more:hover,.news-more:focus-visible{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.news-thumb img{transition:none}.news-thumb:hover img{transform:none}}