/* ============================================================
   Boogie Bar Stade — Design-Tokens (Abschnitt 11 der Doku)
   Neon/Pop 80er-Disco auf dunklem Hintergrund
   ============================================================ */
:root {
  /* --- Farbwelt --- */
  --bg:            #0D0620;   /* fast schwarz, Blauton */
  --bg-2:          #120A2A;   /* leicht heller für Section-Wechsel */
  --card:          #1A1030;   /* Karten-Hintergrund */
  --card-2:        #221542;   /* Karten-Hover / erhöht */
  --line:          #2C1B52;   /* dezente Rahmen */
  --pink:          #FF2E9A;   /* Neon-Pink */
  --purple:        #9B30FF;   /* Neon-Lila */
  --turq:          #2EE6D6;   /* Neon-Türkis */
  --gold:          #FFC24B;   /* warmer Akzent (aus dem Logo) */
  --text:          #F5F0FA;   /* Off-White */
  --text-dim:      #B7ADD1;   /* gedämpfter Text */
  --text-faint:    #7C7099;   /* Captions / Meta */

  /* --- Verläufe --- */
  --grad-primary:  linear-gradient(100deg, var(--pink) 0%, var(--purple) 100%);
  --grad-cool:     linear-gradient(100deg, var(--purple) 0%, var(--turq) 100%);
  --grad-neon:     linear-gradient(100deg, var(--pink), var(--gold) 45%, var(--turq));
  --grad-glass:    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,0));

  /* --- Neon-Glow-Schatten (statt grauer Schlagschatten) --- */
  --glow-pink:     0 0 24px rgba(255,46,154,.45);
  --glow-purple:   0 0 24px rgba(155,48,255,.40);
  --glow-turq:     0 0 24px rgba(46,230,214,.40);
  --glow-soft:     0 8px 40px rgba(155,48,255,.18);
  --shadow-card:   0 18px 50px -20px rgba(0,0,0,.7);

  /* --- Typografie --- */
  --font-display:  'Monoton', system-ui, sans-serif;      /* Neonröhren-Akzent, sparsam */
  --font-body:     'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:       clamp(2.75rem, 8vw, 6rem);
  --fs-h1:         clamp(2.25rem, 5.2vw, 4rem);
  --fs-h2:         clamp(1.75rem, 3.6vw, 2.6rem);
  --fs-h3:         clamp(1.25rem, 2.2vw, 1.55rem);
  --fs-body:       clamp(1rem, 1.05vw, 1.125rem);
  --fs-small:      .875rem;
  --fs-eyebrow:    .8rem;

  /* --- Abstände: 8px-Grid --- */
  --sp-1: .5rem;   --sp-2: 1rem;    --sp-3: 1.5rem;
  --sp-4: 2rem;    --sp-6: 3rem;    --sp-8: 4rem;
  --sp-10: 6rem;   --sp-12: 8rem;

  --section-y:     clamp(3.5rem, 9vw, 7rem);
  --container:     1200px;
  --container-narrow: 820px;

  /* --- Radius --- */
  --r-btn:  999px;
  --r-card: 16px;
  --r-img:  12px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .5s;

  /* --- Header --- */
  --header-h: 74px;
}

@media (max-width: 640px) {
  :root { --header-h: 62px; }
}