/* ==========================================================================
   Korvia V2 — Luxus-Theme (Dunkel + Gold)
   Überschreibt die Tokens aus styles.css; HeroGeometric-Stil (zentriert).
   Wird ZUSÄTZLICH zu styles.css geladen.
   ========================================================================== */

:root {
  --bg: #0a0908;
  --bg-elev: #151210;
  --surface: #1b1713;
  --surface-2: #221d18;
  --border: rgba(214, 183, 90, 0.14);
  --border-strong: rgba(214, 183, 90, 0.30);
  --text: #f5efe3;
  --text-2: #bcb3a1;
  --muted: #8c8474;
  --accent: #d4af37;
  --accent-2: #f0d98a;
  --accent-soft: rgba(212, 175, 55, 0.12);
  --grad: linear-gradient(120deg, #b8860b 0%, #f6e3a1 100%);
  --grad-text: linear-gradient(120deg, #f6e3a1 0%, #d4af37 100%);
}

/* Ab 768px läuft das Hero-Video statt des Posters — dort sass der Verlauf oben (120°,
   Messing-Stopp am Ende) exakt auf dem wärmsten, hellsten Teil des Videos (Nebel/Himmel)
   fest und wurde nach unten hin dunkler, während das Video genau dort heller wird
   ("Ohne Agenturpreis." verschwand). Auf Mobil (< 768px, nur Poster) bleibt der oben
   definierte, bereits geprüfte Grundwert unverändert — hier nur die Desktop/Video-Variante:
   beide Stopps deutlich heller (Champagner statt Messing), Richtung fast horizontal
   (100° statt 120°), damit keine Zeile des zweizeilig umbrechenden Titels systematisch
   dunkler ausfällt als die andere. */
@media (min-width: 768px) {
  :root {
    --grad-text: linear-gradient(100deg, #fff6e0 0%, #ffe9ab 55%, #f5d787 100%);
  }
}

/* Body etwas wärmer */
body { background: var(--bg); }

/* Buttons: goldener statt blauer Glow (behebt den "hellblauen Schimmer") */
.btn--primary {
  color: #1a1206;
  box-shadow: 0 10px 30px -14px rgba(214, 175, 55, 0.5);
}
.btn--primary:hover { box-shadow: 0 16px 40px -14px rgba(246, 227, 161, 0.45); }

/* Nav-Glass leicht wärmer */
.nav.is-scrolled { background: rgba(10, 9, 8, 0.72); }

/* ---- Hero: zentriert (HeroGeometric-Stil) ----------------------------- */
.hero-inner { margin-inline: auto; text-align: center; }
.hero .lead { margin-left: auto; margin-right: auto; }
.hero-cta { justify-content: center; }

/* Aurora hinter dem Hero -> gold */
.hero-bg::before { background: radial-gradient(50% 50% at 50% 50%, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0.06) 45%, transparent 72%); }
.hero-bg::after  { background: radial-gradient(50% 50% at 50% 50%, rgba(246, 227, 161, 0.15) 0%, rgba(246, 227, 161, 0.05) 48%, transparent 74%); }

/* Seitenweite Atmosphäre -> gold */
.atmosphere .g1 { background: radial-gradient(circle, rgba(212, 175, 55, 0.14), transparent 70%); }
.atmosphere .g2 { background: radial-gradient(circle, rgba(246, 227, 161, 0.10), transparent 70%); }
.atmosphere .g3 { background: radial-gradient(circle, rgba(184, 134, 11, 0.12), transparent 70%); }

/* Headings: warme Elfenbein-Gradienten
   background-image statt background verwenden: die Kurzform "background" würde
   background-clip beim Überschreiben auf border-box zurücksetzen (unsichtbarer Text). */
.section-head h2 { background-image: linear-gradient(180deg, #fbf7ec 0%, rgba(251, 247, 236, 0.68) 100%); }

/* KPI-Zahlen: goldener Akzent bleibt über --accent-2 automatisch */

/* Karten/Flächen minimal wärmer schon über Tokens; feiner Gold-Rand on hover */
.card:hover, .plan:hover { border-color: var(--border-strong); }

/* Step-Nummern & Preis-Badges nutzen --grad automatisch (jetzt gold) */