/* =====================================================================
   theme.css · Vereins-Theme (Design-Tokens) — austauschbare Marken-Schicht.
   MUSS vor styles.css geladen werden. styles.css enthält nur noch Struktur
   und referenziert ausschließlich diese Custom Properties.

   White-Label: Ein Verein tauscht NUR diese Datei (bzw. liefert sie pro
   Domain aus), um Farben/Schrift zu ändern — ohne styles.css anzufassen.
   theme.example.css ist die neutrale Vorlage für neue Vereine.

   Dieses Theme = BSG Benninghausen (Anlehnung an Judo-Gürtel & Tatami).
   ===================================================================== */
:root {
  /* Farben – Anlehnung an Judo-Gürtel & Tatami */
  --night: #1b1822;         /* dunkles Anthrazit (weniger reines Schwarz) */
  --night-2: #272431;
  --ink: #1a1620;
  --indigo: #2a2632;        /* dunkles Slate (Text-Akzent) */
  --indigo-2: #3c3540;

  --accent: #e3141b;        /* Drachen-Rot (Flamme) */
  --accent-dark: #ab0d12;
  --accent-bright: #ff4a4f; /* helles Rot für dunkle Flächen */
  --gold: #f3b836;          /* Gold-Akzent (warm) */
  --mat: #e3141b;           /* einheitliches Rot */

  --sand: #f6f2e9;          /* helle Tatami-Fläche */
  --paper: #ffffff;
  --mist: #f4f5fb;
  --line: #e6e7f1;

  --text: #1c2030;
  --text-soft: #565a72;
  --text-invert: #f3f4ff;
  --text-invert-soft: #b9bce0;

  /* Maße */
  --maxw: 1180px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 8px rgba(13, 16, 48, .06);
  --shadow: 0 14px 40px rgba(13, 16, 48, .12);
  --shadow-lg: 0 30px 70px rgba(13, 16, 48, .22);

  --gradient: linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
  --gradient-night: radial-gradient(125% 125% at 80% -10%, #3a2030 0%, var(--night) 60%);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", var(--font-body);

  --ease: cubic-bezier(.16, .84, .44, 1);
}

/* Dekoratives Drachen-Ornament — Design-Schicht. Das geteilte Markup enthält nur
   einen leeren <span class="hero__dragon"/"page-hero__dragon">; das Bild kommt
   hier aus dem Theme (ein anderer Verein lässt diese Regeln einfach weg). Größe/
   Position/Filter setzt styles.css; hier nur Box + Hintergrundbild. */
.hero__dragon,
.page-hero__dragon {
  display: block;
  background: center / contain no-repeat url("../img/drache-light.png");
}
.hero__dragon { height: min(30vw, 280px); }
.page-hero__dragon { height: min(20vw, 170px); }
@media (max-width: 700px) { .hero__dragon { height: 46vw; } }