:root{
  --stage-blue:#14213D; --stage-blue-deep:#0B1526;
  --chalk:#F4EFE6; --chalk-dim:#E7DFCF;
  --ink:#1B1B1B; --ink-soft:#4A4640;
  --accent:#F1ED43; --accent-soft:#F2EE4C; --accent-btn:#F1ED43;
  --font-display:'Fraunces', serif; --font-body:'Work Sans', sans-serif; --font-mono:'JetBrains Mono', monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--chalk); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--font-display); margin:0; line-height:1.1; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* Skip-Link: fuer Maus/Touch unsichtbar, erscheint erst bei Tastatur-Fokus.
   So koennen Tastatur- und Screenreader-Nutzer:innen die Navigation
   ueberspringen, ohne dass sehende Maus-Nutzer:innen etwas davon merken. */
.skip-link{
  position:absolute; left:0; top:-60px; z-index:100;
  background:var(--stage-blue-deep); color:var(--chalk);
  padding:12px 20px; text-decoration:none;
  font-family:var(--font-mono); font-size:0.85rem;
  border-radius:0 0 4px 0; transition:top .15s ease;
}
.skip-link:focus{ top:0; }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(20,33,61,0.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(241,237,67,0.2); transition:box-shadow .3s ease; }
.nav.is-scrolled{ box-shadow:0 8px 24px rgba(0,0,0,0.25); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand{ display:flex; flex-direction:column; color:var(--chalk); text-decoration:none; gap:2px; flex-shrink:0; min-width:0; }
.brand .name{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; white-space:nowrap; }
.brand .tag{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--accent-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-links{ display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.nav-links a{ display:inline-flex; align-items:center; gap:7px; color:var(--chalk-dim); text-decoration:none; font-size:0.88rem; font-weight:500; }
.nav-links a:hover{ color:var(--chalk); }
.nav-links a.is-active{ color:var(--chalk); }
.nav-links .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.nav-links .dot.is-neutral{ background:transparent; border:1.3px solid rgba(244,239,230,0.4); }
.nav-cta-desktop{ flex-shrink:0; }

/* Hamburger */
.nav-toggle{
  display:none; flex-shrink:0; width:40px; height:40px; border-radius:2px;
  background:transparent; border:1px solid rgba(244,239,230,0.25);
  align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.nav-toggle:hover{ border-color:var(--accent); }
.nav-toggle .bars{ position:relative; width:18px; height:13px; }
.nav-toggle .bars span{
  position:absolute; left:0; width:100%; height:2px; background:var(--chalk);
  border-radius:1px; transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:5.5px; }
.nav-toggle .bars span:nth-child(3){ top:11px; }
.nav.is-open .nav-toggle .bars span:nth-child(1){ top:5.5px; transform:rotate(45deg); }
.nav.is-open .nav-toggle .bars span:nth-child(2){ opacity:0; }
.nav.is-open .nav-toggle .bars span:nth-child(3){ top:5.5px; transform:rotate(-45deg); }

/* Mobiles Menü-Panel */
.nav-mobile-panel{
  display:none; position:fixed; inset:64px 0 0 0; z-index:49;
  background:rgba(11,21,38,0.98); backdrop-filter:blur(10px);
  overflow-y:auto; padding:8px 0 32px;
}
.nav-mobile-panel.is-open{ display:block; }
.nav-mobile-panel ul{ list-style:none; margin:0; padding:0; }
.nav-mobile-panel li{ border-bottom:1px solid rgba(244,239,230,0.08); }
.nav-mobile-panel a{
  display:flex; align-items:center; gap:12px; padding:18px 24px;
  color:var(--chalk-dim); text-decoration:none; font-family:var(--font-display);
  font-size:1.15rem; font-weight:500;
}
.nav-mobile-panel a.is-active{ color:var(--chalk); }
.nav-mobile-panel .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.nav-mobile-panel .dot.is-neutral{ background:transparent; border:1.5px solid rgba(244,239,230,0.4); }
.nav-mobile-panel .nav-mobile-cta{ padding:24px 24px 0; }
body.nav-open{ overflow:hidden; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
}
/* Der CTA-Button verschwindet frueher als das Menue: zwischen 901px und
   1100px sind alle sieben Menuepunkte sichtbar (der Hamburger greift erst
   darunter), zusammen mit dem Button passen sie aber nicht in eine Zeile --
   die Leiste brach zweizeilig um und "Kontakt" ragte unten heraus (u. a.
   iPad quer, 1024px). Ohne den Button bleibt der Spielplan in diesem
   Bereich ueber den Menuepunkt "Termine" erreichbar. */
@media (max-width:1100px){
  .nav .nav-cta-desktop{ display:none; }
}
@media (min-width:901px){
  .nav-mobile-panel{ display:none !important; }
}
@media (max-width:420px){
  .brand .tag{ display:none; }
  .nav .wrap{ padding:0 16px; }
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:2px; font-weight:600; font-size:0.92rem; text-decoration:none; border:1px solid transparent; transition:transform .2s ease, background .2s ease; }
.btn:hover{ transform:translateY(-2px); }
/* Textfarbe wird pro Rubrik aus der Helligkeit der Akzentfarbe berechnet
   (--on-accent), sonst stünde auf den dunklen Rubrikfarben dunkler Text.
   Hintergrund ist --accent-btn statt roher --accent: bei hellem Button-Text
   (chalk) reicht die rohe Rubrikfarbe bei Termine/Über uns nicht für 4,5:1
   (WCAG AA) — text_akzent_btn() liefert dort stattdessen --accent-ink,
   sonst unverändert die Rubrikfarbe (s. Kommentar bei text_akzent_btn()).
   Hover hellt nur leicht auf, statt auf accent-soft zu wechseln — ein
   Wechsel der Flächenhelligkeit würde den Textkontrast kippen. */
.btn-primary{ background:var(--accent-btn); color:var(--on-accent); }
.btn-primary:hover{ filter:brightness(1.12); }
.btn-ghost{ border-color:rgba(244,239,230,0.35); color:var(--chalk); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-soft); }
.btn-outline{ border-color:rgba(27,27,27,0.25); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }

/* Hero */
.hero{ position:relative; overflow:hidden; background:linear-gradient(165deg, var(--accent-ink) 0%, var(--stage-blue-deep) 130%); color:var(--chalk); padding:64px 0 72px; }
.hero::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg, rgba(244,239,230,0.05) 0px, rgba(244,239,230,0.05) 2px, transparent 2px, transparent 42px); pointer-events:none; }
.hero-inner{ position:relative; z-index:1; }
.badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.13em; text-transform:uppercase; color:rgba(244,239,230,0.9); margin-bottom:18px; }
.badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--chalk); }
.hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.2rem); font-weight:700; max-width:20ch; }
.hero p.lede{ margin-top:18px; max-width:56ch; color:rgba(244,239,230,0.85); font-size:1.05rem; }
.hero-actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

/* Sections */
section{ padding:72px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-eyebrow{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px; display:block; }
.section-head h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:600; }
.section-head p{ margin-top:14px; color:var(--ink-soft); font-size:1rem; max-width:56ch; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.9,.3,1), transform .7s cubic-bezier(.16,.9,.3,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Footer */
footer{ background:var(--stage-blue-deep); color:rgba(244,239,230,0.62); padding:48px 0 30px; }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px; padding-bottom:26px; border-bottom:1px solid rgba(244,239,230,0.12); }
.footer-brand .name{ font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--chalk); }
.footer-brand p{ margin-top:6px; font-size:0.84rem; max-width:38ch; }
.footer-links{ display:flex; gap:42px; flex-wrap:wrap; }
.footer-links h2{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:10px; }
.footer-links a{ display:block; text-decoration:none; font-size:0.86rem; color:rgba(244,239,230,0.72); margin-bottom:7px; }
.footer-links a:hover{ color:var(--chalk); }
.footer-bottom{ margin-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.76rem; }

.callout{ padding:18px 20px; background:var(--chalk-dim); border-left:3px solid var(--accent); border-radius:2px; font-size:0.92rem; color:var(--ink-soft); }
.callout.warn{ background:#FBEAE7; border-left-color:#B23A2E; color:#6E241C; }
.callout.warn strong{ color:#B23A2E; }

/* Kategorie-Hervorhebung (s. KATEGORIE_FAMILIEN oben).
   Farben stehen als Inline-Style am Element, weil sie pro Termin
   verschieden sind — hier nur Form und Groesse. */
.kat-chip{ display:inline-block; padding:3px 9px; border-radius:2px; font-family:var(--font-mono); font-size:0.68rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }
.kat-punkt{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; vertical-align:0.06em; flex:none; }

/* Blaetterleiste unter dem Spielplan.
   Standardmaessig ausgeblendet und erst von assets/js/site.js eingeschaltet:
   ohne JavaScript stehen alle Termine untereinander in der Seite (so wie
   vorher), dann waere eine Blaetterleiste ohne Funktion. Deshalb hier kein
   noscript-Fallback noetig — die Leiste erscheint schlicht nie. */
/* Ohne diese Zeile bleibt eine ausgeblendete Zeile sichtbar: das
   display:grid der Zeile selbst (in SPIELPLAN_CSS) gewinnt gegen die
   Browser-Regel [hidden]{display:none}, weil eine Klassenregel staerker
   waehlt als das Standard-Stylesheet. */
.spielplan-row[hidden]{ display:none !important; }
.spielplan-nav{ display:none; margin-top:26px; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.spielplan-nav.is-aktiv{ display:flex; }
.spielplan-nav .btn{ padding:10px 18px; font-size:0.82rem; cursor:pointer; background:none; font-family:inherit; }
.spielplan-nav .btn[disabled]{ opacity:0.32; pointer-events:none; }
.spielplan-stand{ font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft); text-align:center; flex:1 1 auto; }
@media (max-width:520px){
  .spielplan-nav{ justify-content:center; }
  .spielplan-stand{ order:-1; flex:1 0 100%; }
}

/* Responsive Grid-Hilfsklassen */
.rgrid-2{ display:grid; grid-template-columns:1fr 1fr; }
.rgrid-3{ display:grid; grid-template-columns:repeat(3, 1fr); }
.rgrid-12{ display:grid; grid-template-columns:1.2fr 0.8fr; }
@media (max-width:900px){ .rgrid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:780px){ .rgrid-2, .rgrid-12{ grid-template-columns:1fr !important; } }
@media (max-width:560px){ .rgrid-3{ grid-template-columns:1fr !important; } }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1 !important; transform:none !important; } }