/* ============================================================
   LIONIST MEDIA — LIGHT THEME override
   Scoped to body.theme-light. Flips the dark sections to a
   friendly white/warm palette while keeping the gold identity.
   Load AFTER lionist.css.
   ============================================================ */

body.theme-light {
  background: #FBFAF7;
  color: var(--ink);
  /* redefine "on-dark" text/hairline tokens to dark-on-light values */
  --w-soft: rgba(10,10,10,0.74);
  --w-mute: rgba(10,10,10,0.54);
  --hr-d:   rgba(10,10,10,0.12);
  /* cards that sat on dark panels become white */
  --panel:   #FFFFFF;
  --panel-2: #F3F0E9;
  /* deeper metallic gold so accents stay legible on white */
  --gold-grad: linear-gradient(104deg, #9A7A22 0%, #C49B2E 38%, #D4AF37 58%, #A9842C 100%);
}

/* ---------- section backgrounds ---------- */
.theme-light .on-dark  { background: #FFFFFF; color: var(--ink); }
.theme-light .on-light { background: #F4F1E9; color: var(--ink); }
.theme-light .on-dark2 { background: #EFEBE1; color: var(--ink); }

/* ---------- nav ---------- */
.theme-light .nav { background: rgba(255,255,255,0.86); border-bottom-color: rgba(10,10,10,0.10); }
.theme-light .brand .wm { color: var(--ink); }
.theme-light .nav-links a { color: rgba(10,10,10,0.68); }
.theme-light .nav-links a:hover { color: var(--gold-deep); }
.theme-light .nav-cta { color: var(--gold-deep); border-color: rgba(176,141,76,0.5); }
.theme-light .nav-cta:hover { background: var(--gold); color: #1a1407; }

/* ---------- hero ---------- */
/* Hero explizit hell: jeder dunkle Hintergrund / Verlauf der Default-CSS
   wird hier per !important + background-image:none überschrieben — isoliert
   nur die Hero-Sektion, keine andere Sektion betroffen. */
.theme-light section.hero { background: #FFFFFF !important; background-image: none !important; }
.theme-light .hero .h-display { color: var(--ink); }
.theme-light .hero-glow { background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, transparent 62%); }
.theme-light .portrait { box-shadow: 0 50px 90px -46px rgba(20,16,6,0.45); }
.theme-light .portrait-frame { border-color: rgba(176,141,76,0.6); }
.theme-light .badge { background: #FFFFFF; border-color: rgba(176,141,76,0.45); box-shadow: 0 26px 54px -26px rgba(20,16,6,0.3); }
.theme-light .hero-trust { color: rgba(10,10,10,0.55); }
.theme-light .play-dot { color: var(--gold-deep); border-color: var(--gold-deep); }
.theme-light .txtlink[style] { color: var(--ink) !important; }

/* ---------- YouTube-Consent-Overlay (Stimmen-Karte, vor Marketing-Consent) ---------- */
.thumb-play .yt-consent-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 22px;
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(2px);
  color: #fff; text-align: center;
  font-family: 'Open Sans', system-ui, sans-serif;
  z-index: 2;
}
.thumb-play .yt-consent-text { margin: 0; font-size: 14.5px; line-height: 1.45; max-width: 30ch; }
.thumb-play .yt-consent-sub { font-size: 12px; opacity: 0.72; }
.thumb-play .yt-consent-btn {
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.4);
  background: transparent; color: #fff; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.thumb-play .yt-consent-btn:hover { background: var(--gold); color: #1a1407; border-color: var(--gold); }
/* Wenn YouTube-Consent erteilt ist: Overlay aus, Play-Button wieder dominant.
   main.js setzt aria-hidden + display:none direkt — diese Regel ist Fallback. */
.thumb-play .yt-consent-overlay[aria-hidden="true"] { display: none; }

/* ---------- cards / panels get separation on white ---------- */
.theme-light .pcard,
.theme-light .tl-card,
.theme-light .quote-block,
.theme-light .tcard,
.theme-light .dg-node { box-shadow: 0 24px 48px -30px rgba(20,16,6,0.22); }
.theme-light .on-dark .pcard,
.theme-light .on-dark2 .pcard,
.theme-light .on-dark .tl-card,
.theme-light .on-dark2 .tl-card,
.theme-light .on-dark .quote-block,
.theme-light .on-dark2 .quote-block,
.theme-light .on-dark .tcard,
.theme-light .on-dark2 .tcard { border-color: rgba(10,10,10,0.08); }

/* quote bold + author on previously-dark sections */
.theme-light .on-dark .quote-block .q b,
.theme-light .on-dark2 .quote-block .q b { color: var(--ink); }

/* ---------- system diagram ---------- */
.theme-light .dg-node { border-color: rgba(176,141,76,0.4); box-shadow: 0 26px 54px -30px rgba(176,141,76,0.35); }
.theme-light .chip { background: rgba(10,10,10,0.015); border-color: rgba(10,10,10,0.12); color: rgba(10,10,10,0.72); }
.theme-light .chip:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ---------- timeline ---------- */
.theme-light .tl-dot { box-shadow: 0 0 0 5px #EFEBE1; }
.theme-light .tl-card .ic { color: var(--gold-deep); }

/* ---------- about / founder ---------- */
.theme-light .about-collage .s1 { border-color: rgba(176,141,76,0.3); }
.theme-light .social-row a { border-color: rgba(10,10,10,0.18); color: rgba(10,10,10,0.7); }
.theme-light .social-row a:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.theme-light .btn-ghost-d { color: var(--ink); border-color: rgba(10,10,10,0.22); }
.theme-light .btn-ghost-d:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

/* ---------- final CTA ---------- */
.theme-light .cta-glow { background: radial-gradient(ellipse, rgba(212,175,55,0.2) 0%, transparent 64%); }
.theme-light .cta-scarcity { color: rgba(10,10,10,0.55); }

/* ---------- footer ---------- */
.theme-light .footer { border-top-color: rgba(10,10,10,0.1); }
.theme-light .foot-bottom { border-top-color: rgba(10,10,10,0.1); }

/* keep stat numbers / accents using the deeper gold (inherited via --gold-grad) */
/* video placeholders stay dark on purpose (they represent video) */

/* ============================================================
   UNIFIED CARD SHADOW — Schatten kommt jetzt ausschließlich aus lionist.css
   (.pcard/.tcard/.tl-card/.dg-node/.dg-hub/.chip per !important). Hier nur
   noch Border-/Background-Anpassungen, die das Light-Theme braucht — KEIN
   eigener box-shadow mehr.

   Hintergrund: Der vorherige warm-braune Schatten mit negativer Spread war
   auf cremefarbenem Hintergrund kaum sichtbar — daher die User-Wahrnehmung
   "Schatten lassen sich nicht zuverlässig anwenden". Lösung: einheitlicher
   neutraler Schatten in lionist.css, Light-Theme passt nur die Borders an.
   ============================================================ */

/* float, not outline — soften borders so the shadow does the lifting */
.theme-light .pcard,
.theme-light .tcard,
.theme-light .tl-card { border-color: transparent; }
.theme-light .dg-node { border-color: rgba(176,141,76,0.22); }
.theme-light .chip { border-color: rgba(74,54,26,0.08); background: #FFFFFF; }

/* highlighted hub + node borders bleiben als intentional accents auf Hover sichtbar */
.theme-light .pcard:hover,
.theme-light .tcard:hover,
.theme-light .tl-card:hover { border-color: transparent; }
.theme-light .dg-hub:hover { border-color: var(--gold); }
.theme-light .dg-node:hover { border-color: rgba(176,141,76,0.3); }
.theme-light .chip:hover { border-color: rgba(74,54,26,0.08); }

@media (prefers-reduced-motion: reduce){
  .pcard:hover, .tcard:hover, .tl-card:hover,
  .dg-node:hover, .dg-hub:hover, .chip:hover { transform: none; }
}