/* ============================================================
   A/B Variante B — „Warm & klar"  (UN-Agenda Splittest)
   Warmes Dunkel + bessere Lesbarkeit. SCOPED via html.v-warm —
   überschreibt NUR diese Variante, ändert KEINE andere Seite.
   ============================================================ */
html.v-warm {
  --bg: #17120D;            /* kalt-schwarz #0E0E0C -> warmes Espresso */
  --bg-elevated: #1d160f00;
  --bg-card: #221B13;       /* warme Karte statt #1a1a17 */
  --bg-card-hover: #2A2118;
  --text: #F7F0DF;          /* etwas wärmeres Creme */
  --text-muted: #E4DAC2;
  --text-dim: #C6B99C;      /* heller/lesbarer als #B8B0A0 (Augen 45–65) */
  --text-faint: #8C8169;
  --gold: #D9A92A;          /* minimal wärmeres Gold (Marke bleibt) */
  --gold-dim: #B88F1F;
  --red: #C8861E;           /* Blutrot #B91C1C -> warmes Bernstein (kein Alarm) */
  --line: #322A1F;
  --line-strong: #463B2C;
}

/* Lesbarkeit: größerer, luftigerer Fließtext */
html.v-warm body { font-size: 17px; line-height: 1.72; }

/* Film-Grain weicher */
html.v-warm body::before { opacity: 0.03; }

/* Kalte schwarze Vignette -> warmer Licht-Schimmer oben + sanfte warme Kante */
html.v-warm body::after {
  background:
    radial-gradient(ellipse 90% 55% at 50% 6%, rgba(217, 169, 42, 0.05), transparent 50%),
    radial-gradient(ellipse at center, transparent 62%, rgba(26, 16, 6, 0.36) 100%);
}

/* ============================================================
   BANNER-GOLD-UPGRADE (warm) — Weich-Gold, Glow, Eckwinkel,
   gold-gerahmte Kacheln, Gradient-CTA. Rein additiv + scoped.
   Soft-Gold #c6a05a für Deko, Marken-Gold bleibt für Text.
   ============================================================ */

/* Hero: warmer Kerzen-Glow hinter dem Claim + diagonale Eckwinkel */
html.v-warm .hero { position: relative; }
html.v-warm .hero::before,
html.v-warm .hero::after {
  content: ""; position: absolute; width: 38px; height: 38px;
  border: 2.5px solid #c6a05a; opacity: 0.7; pointer-events: none; z-index: 2;
}
html.v-warm .hero::before { top: 26px; left: 26px; border-right: 0; border-bottom: 0; }
html.v-warm .hero::after { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }
html.v-warm .shell-hero { position: relative; }
html.v-warm .shell-hero::before {
  content: ""; position: absolute; inset: -8% -6% auto -6%; height: 360px; z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 30% 30%, rgba(214, 174, 92, 0.13), transparent 62%);
}
/* Mobile: dekorative Hero-Eckklammern aus — sie kollidieren mit der Warn-Pre-Header-Box */
@media (max-width: 880px) {
  html.v-warm .hero::before,
  html.v-warm .hero::after { display: none; }
}
html.v-warm .hero-grid { position: relative; z-index: 1; }

/* Hero-Claim: Cormorant-Italic-Akzent etwas größer + weich-gold */
html.v-warm .hero h1 em { color: #d8b56a; }

/* CTA: Soft-Gold-Gradient + warmer Glow (statt flachem Gold) */
html.v-warm .btn-gold {
  background: linear-gradient(180deg, #e3c06a 0%, #c6a05a 100%);
  border: none; box-shadow: 0 10px 34px rgba(198, 160, 90, 0.22);
  transition: filter 0.2s, box-shadow 0.2s, transform 0.05s;
}
html.v-warm .btn-gold:hover {
  filter: brightness(1.06); box-shadow: 0 12px 40px rgba(198, 160, 90, 0.32);
}

/* Hero-Pillars: gold-gerahmte Kacheln wie im Banner-Raster */
html.v-warm .hero-pillars .pill {
  border: 1.5px solid #5a4a2e; border-radius: 10px;
  background: linear-gradient(180deg, rgba(60, 48, 28, 0.30), rgba(30, 24, 15, 0.30));
  padding: 14px 8px; transition: border-color 0.2s, background 0.2s;
}
html.v-warm .hero-pillars .pill:hover {
  border-color: #c6a05a; background: linear-gradient(180deg, rgba(80, 64, 36, 0.40), rgba(40, 32, 20, 0.36));
}
html.v-warm .hero-pillars .pill .num { color: #d8b56a; }

/* Bonus-/Inhalts-Karten: weich-goldener Rahmen statt kalter Linie */
html.v-warm .bonus-card { border-color: #5a4a2e; }
html.v-warm .bonus-card:hover { border-color: #c6a05a; }

/* Sektions-Eyebrows: Soft-Gold-Punkt wärmer */
html.v-warm .eyebrow-s { color: #c6a05a; }