/* ============================================================
   HELLERMANN.VC — Zentrale Theming-Schicht (Hell / Dunkel)
   Einbindung auf JEDER Seite direkt nach /assets/fonts.css:
     <link rel="stylesheet" href="/assets/theme.css" />   (Unterseiten, root-absolut)
     <link rel="stylesheet" href="assets/theme.css" />    (Start-/Rechtsseiten, relativ)

   Diese Datei ist die EINZIGE Quelle der Farb-Tokens.
   Jede Seite darf in ihrem eigenen :root NUR noch
   --font-*, --maxw und --ease definieren — keine Farb-Tokens mehr.

   Default = HELL. Dunkel wird per html[data-theme="dark"] aktiviert
   (vom Umschalter / assets/theme.js gesetzt, in localStorage 'hv-theme').
   ============================================================ */

:root{
  /* ---------- HELLE Palette (Default) ---------- */
  --bg:        #f7f5f0;
  --bg-2:      #f1ede5;
  --surface:   #ffffff;
  --surface-2: #faf8f3;
  --line:      rgba(24,20,12,.13);
  --line-soft: rgba(24,20,12,.07);

  --text:      #2a2d34;
  --text-2:    #565b64;
  --text-3:    #8a8f99;

  --gold:      #9a7627;                     /* tiefer als Dunkel-Gold → lesbar auf Weiß */
  --gold-soft: rgba(154,118,39,.13);
  --gold-line: rgba(154,118,39,.40);

  /* Semantische Tokens (Theme-abhängig) */
  --text-strong:    #14161b;                /* stärkster Text: Überschriften, Marke */
  --btn-primary-bg: #16181d;                /* Primär-Button: dunkler Block auf hellem Grund */
  --btn-primary-fg: #ffffff;
  --header-bg:      rgba(247,245,240,.85);  /* Header beim Scrollen */
  --grid-line:      rgba(24,20,12,.045);    /* Hero-Rasterlinien */
  --watermark:      rgba(24,20,12,.03);     /* große Ziffern-Wasserzeichen */
  --vignette:       rgba(24,20,12,.05);     /* Hero-Vignette */
  --soon-bg:        #f2eee6;                /* „Kommt bald"-Kacheln */
  --modal-backdrop: rgba(20,17,10,.42);     /* Abdunklung hinter Popups/Modals */
  --logo-filter:    brightness(0) opacity(.82); /* weißes Logo-PNG → dunkles Logo */
  --theme-color:    #f7f5f0;                /* Browser-UI-Farbe (mobil) */

  /* Fallback, falls eine Seite --ease nicht selbst definiert */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- DUNKLE Palette (optional per Schalter) ---------- */
:root[data-theme="dark"]{
  --bg:        #0a0c10;
  --bg-2:      #0c0f15;
  --surface:   #10131a;
  --surface-2: #141821;
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.055);

  --text:      #f1f2f4;
  --text-2:    #aeb4bf;
  --text-3:    #757b87;

  --gold:      #c2a266;
  --gold-soft: rgba(194,162,102,.16);
  --gold-line: rgba(194,162,102,.42);

  --text-strong:    #ffffff;
  --btn-primary-bg: #f1f2f4;
  --btn-primary-fg: #0a0c10;
  --header-bg:      rgba(10,12,16,.78);
  --grid-line:      rgba(255,255,255,.025);
  --watermark:      rgba(255,255,255,.022);
  --vignette:       rgba(0,0,0,.55);
  --soon-bg:        #0d1016;
  --modal-backdrop: rgba(5,7,10,.74);
  --logo-filter:    none;
  --theme-color:    #0a0c10;
}

/* Sanfter Übergang beim Umschalten (nicht auf * → Performance) */
body{ transition:background-color .4s var(--ease), color .4s var(--ease); }

/* ============================================================
   Umschalter (Hell / Dunkel) — identisches Markup auf allen Seiten:

   <button class="theme-toggle" type="button" role="switch"
           aria-checked="false" aria-label="Zwischen heller und dunkler Ansicht wechseln"
           title="Hell / Dunkel">
     <svg class="tt-ic tt-moon" ...>…</svg>
     <svg class="tt-ic tt-sun"  ...>…</svg>
     <span class="tt-thumb"></span>
   </button>
   ============================================================ */
.theme-toggle{
  position:relative; width:60px; height:30px; flex:none; padding:0; margin:0;
  border:1px solid var(--line); border-radius:999px; background:var(--surface-2);
  cursor:pointer; transition:border-color .35s var(--ease), background .35s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:hover{ border-color:var(--gold-line); }
.theme-toggle:focus-visible{ outline:none; border-color:var(--gold-line); box-shadow:0 0 0 3px var(--gold-soft); }
.theme-toggle .tt-ic{
  position:absolute; top:50%; transform:translateY(-50%); width:15px; height:15px;
  color:var(--text-3); transition:color .35s var(--ease); pointer-events:none;
}
.theme-toggle .tt-moon{ left:8px; }
.theme-toggle .tt-sun{ right:8px; }
.theme-toggle .tt-thumb{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--gold); box-shadow:0 2px 6px -1px rgba(0,0,0,.35);
  transition:transform .4s var(--ease), background .35s var(--ease);
}
/* Default (HELL): Knopf rechts über der Sonne, Sonne aktiv */
.theme-toggle .tt-thumb{ transform:translateX(30px); }
.theme-toggle .tt-sun{ color:var(--gold); }
/* DUNKEL: Knopf links über dem Mond, Mond aktiv */
:root[data-theme="dark"] .theme-toggle .tt-thumb{ transform:translateX(0); }
:root[data-theme="dark"] .theme-toggle .tt-sun{ color:var(--text-3); }
:root[data-theme="dark"] .theme-toggle .tt-moon{ color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  body{ transition:none; }
  .theme-toggle, .theme-toggle .tt-thumb, .theme-toggle .tt-ic{ transition:none; }
}