/* Talturnfest 2027 – zentrale Basis: Design-Tokens + geteilte Primitive.
   Wird in JEDEM <head> vor den seitenspezifischen Styles verlinkt (CSP-konform: style-src 'self').
   Einzige Quelle der Wahrheit fuer Farben, Radien, Schatten, Schrift, Buttons, Reveal & Reduced-Motion.
   Seitenspezifische <style>-Bloecke duerfen einzelne Werte bewusst ueberschreiben. */

:root{
  /* Marke */
  --pink:#F4AACC; --pink-soft:#FBEAF0; --pink-deep:#E2719F; --pink-text:#A82E62;
  --navy:#292574; --navy-2:#1c1958; --navy-grad:#352e92;
  --ink:#2a2748; --muted:#5a577a; --cream:#FFF8FB; --line:#efe6ef;
  /* Radien */
  --r:18px; --r-sm:14px;
  /* Schatten-Skala */
  --shadow:0 18px 50px -22px rgba(41,37,116,.4);
  --shadow-sm:0 8px 30px -20px rgba(41,37,116,.35);
  --shadow-btn:0 12px 24px -10px rgba(41,37,116,.55);
  --shadow-modal:0 30px 80px -30px rgba(41,37,116,.6);
  /* Schrift (alle Aliase, damit Subseiten & Startseite dieselben Tokens teilen) */
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:var(--font); --font-body:var(--font);
  /* Layout */
  --nav-h:74px; --ann-h:48px;
}

/* Geteilte Layout-Primitive */
.container{width:min(1140px,92vw);margin:0 auto}

/* Layout-Utilities – ersetzen inline style="…" (damit style-src 'self' ohne 'unsafe-inline' moeglich ist) */
.u-tac{text-align:center}
.u-mxa{margin-inline:auto}
.u-jcc{justify-content:center}
.u-mt26{margin-top:26px}
.u-mw34{max-width:34ch}

/* Fokus-Sichtbarkeit (Tastatur) */
:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px;border-radius:6px}

/* Skip-Link */
.skip{position:fixed;top:10px;left:10px;z-index:100;background:var(--navy);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;transform:translateY(-160%);transition:transform .2s}
.skip:focus{transform:none}

/* Nur fuer Screenreader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Button */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:1rem;font-weight:600;border-radius:999px;padding:13px 26px;background:var(--navy);color:#fff;border:2px solid var(--navy);cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s,color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-btn)}
.btn.pink{background:var(--pink);color:var(--navy);border-color:var(--pink)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn:disabled{opacity:.6;cursor:wait;transform:none}

/* Reveal-on-Scroll (Progressive Enhancement: .js wird per Script gesetzt) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* Gestaffelti Card-Einblendig: Container kriegt "reveal stagger", Kinder kommed in Welle (Motion-Konzept) */
.js .stagger.reveal{opacity:1;transform:none}
.js .stagger.reveal > *{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .stagger.reveal.in > *{opacity:1;transform:none}
.js .stagger.reveal.in > *:nth-child(2){transition-delay:.08s}
.js .stagger.reveal.in > *:nth-child(3){transition-delay:.16s}
.js .stagger.reveal.in > *:nth-child(4){transition-delay:.24s}
.js .stagger.reveal.in > *:nth-child(5){transition-delay:.32s}

/* Verlaufs-Orb-Drift: dezenti, langsami Bewegig der Kreisverlauf-Motive (nur transform -> GPU) */
@keyframes orbDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,16px)}}

/* Bewegung global zuruecknehmen, wenn der Nutzer das wuenscht */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.stagger.reveal > *{opacity:1;transform:none}
}
