/* GENERATED by tools/gen-theme.ts from design-system/bsg/tokens.json — DO NOT EDIT. Run `npm run gen-theme`.
   Vereins-Theme (Marken-Schicht): :root = hell, [data-theme="dark"] = dunkel. MUSS vor styles.css
   geladen werden. Legacy-Var-Namen (--night/--sand/…) bleiben für styles.css erhalten; ihre Werte
   stammen token-abgeleitet aus tokens.json oder sind explizite Nicht-Token-Extras (--ink/--mist/…). */

:root {
  --night: #1b1822;
  --night-2: #272431;
  --ink: #1a1620;
  --indigo: #2a2632;
  --indigo-2: #3c3540;
  --accent: #e3141b;
  --accent-dark: #ab0d12;
  --accent-on: #ffffff;
  --accent-bright: #ff4a4f;
  --gold: #f3b836;
  --gold-on: #2a210a;
  --success: #1f7a5a;
  --success-text: #14624a;
  --success-tint: rgba(31,122,90,.12);
  --success-border: rgba(31,122,90,.25);
  --mat: #e3141b;
  --sand: #f6f2e9;
  --paper: #ffffff;
  --mist: #f4f5fb;
  --line: #e6e7f1;
  --text: #1c2030;
  --text-soft: #565a72;
  --text-invert: #f3f4ff;
  --text-invert-soft: #b9bce0;
  --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", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16,.84,.44,1);
}

[data-theme="dark"] {
  --indigo: #f3f4ff;
  --indigo-2: #d7d9f0;
  --accent: #ff4a4f;
  --accent-on: #1b1822;
  --success: #58c39a;
  --success-text: #6bd6a6;
  --success-tint: rgba(88,195,154,.16);
  --success-border: rgba(88,195,154,.32);
  --mat: #ff4a4f;
  --sand: #272431;
  --paper: #1b1822;
  --mist: #211e2a;
  --line: #3a3744;
  --text: #f3f4ff;
  --text-soft: #b9bce0;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow: 0 14px 40px rgba(0,0,0,.50);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.60);
}

.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; } }