/* ════════════════════════════════════════════════════════════
   GETEILTES THEME - HIER aendern -> wirkt auf allen Unterseiten.
   Gold-Raster-Hintergrund + Inter-Font, passend zum Hub.
   Eingebunden via <link rel="stylesheet" href="../assets/hub-theme.css"> vor </head>.
   ════════════════════════════════════════════════════════════ */
/* Inter (selbst-gehostet, kein Google-Call) kommt aus fonts.css - die Unterseiten
   linken sie DIREKT im <head> vor dieser Datei. Frueher hier per @import eingebunden;
   das serialisierte die Downloads (fonts.css wurde erst nach Laden+Parsen dieser
   Datei entdeckt). Beim Anlegen neuer Seiten: beide <link>-Zeilen kopieren. */

/* ── Basis-Farb-Tokens - EINE Quelle fuer ALLE Unterseiten ──────────
   Frueher in jeder Unterseite einzeln dupliziert -> driftete
   (--text-faint war auf 4 Seiten zu dunkel/#6b665e). Jetzt zentral.
   Seiten-spezifische Tokens (--bg-input, --verify, --gold-soft, --error …)
   bleiben bewusst lokal im jeweiligen <style>. */
:root{
  --bg:#161513;
  --bg-card:#1f1d1a;
  --border:#3a3631;
  --border-soft:#2a2724;
  --text:#f0ece4;
  --text-dim:#b6afa4;
  --text-faint:#938c81;   /* von #6b665e angehoben -> >=4.5:1 (WCAG AA) auf Card/BG */
  --gold:#E6C338;
  --gold-dim:#b89a2c;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  background-color:#0f0e0c !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.4), transparent 300px),
    radial-gradient(720px 560px at 18% 0%, rgba(230,195,56,.13), transparent 60%),
    radial-gradient(680px 540px at 86% 5%, rgba(230,195,56,.11), transparent 58%),
    radial-gradient(640px 600px at 60% 30%, rgba(230,195,56,.06), transparent 60%),
    radial-gradient(680px 600px at 5% 68%, rgba(230,195,56,.06), transparent 60%),
    radial-gradient(720px 620px at 96% 74%, rgba(230,195,56,.06), transparent 60%),
    radial-gradient(820px 700px at 50% 106%, rgba(230,195,56,.05), transparent 62%),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px) !important;
  background-size:auto,auto,auto,auto,auto,auto,auto,44px 44px,44px 44px !important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat !important;
  background-attachment:fixed !important;
}

/* Mobil: fixed zwingt den Browser, den kompletten Hintergrund bei jedem Scroll-Frame
   neu zu zeichnen (Ruckeln auf schwacher Hardware). Am Handy scrollt der Glow mit -
   kaum sichtbar, weil die Rand-Lichter dort ohnehin den ganzen Screen fuellen.
   Desktop (ab 700px) behaelt fixed = stehender Glow. */
@media(max-width:699px){
  body{background-attachment:scroll !important;}
}

/* ── Scrollbalken: schmal + dunkel, UEBERALL (Davids Regel: Browser-Standard-Scrollbars
   sind tabu - gilt fuer den Seiten-Scroll UND alle inneren Scroll-Container wie die
   Warenkorb-Liste). Hub-index.html hat denselben Block lokal (linkt diese Datei nicht). ── */
*{scrollbar-width:thin;scrollbar-color:#4a453e transparent;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:#4a453e;border-radius:999px;}
*::-webkit-scrollbar-thumb:hover{background:#b89a2c;}
*::-webkit-scrollbar-corner{background:transparent;}

/* Gigas-Promo: Logo mittig statt linksbündig - gilt auf ALLEN Unterseiten.
   (!important nötig, weil peptid/supp das Logo inline stylen) */
.gigas-promo-brand-img,.gigas-promo-logo{margin-left:auto !important;margin-right:auto !important;}

/* Seiten-Hero: Rot-Gradient (Brand-Rot-Anker) wie die Hub-H1 (ueberall, auch mobil) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* Dunkles Verlaufsende #C62828 statt #B71C1C: clears die 3:1-Grosstext-Grenze (WCAG AA), optisch quasi identisch */
  header h1{background:linear-gradient(135deg,#F5564E,#C62828);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
}

/* Desktop: H1 groesser + zentraler Gold-Glow hinter dem Hero.
   (Am Handy fuellen die Rand-Lichter den Screen, am PC liegen sie zu weit
   aussen -> Hero wirkte nackt. Liste = Original oben + 1 Glow vorangestellt.) */
@media(min-width:700px){
  header h1{font-size:36px;letter-spacing:-1px;}
  body{
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.4), transparent 300px),
      radial-gradient(640px 360px at 50% -4%, rgba(230,195,56,.10), transparent 62%),
      radial-gradient(720px 560px at 18% 0%, rgba(230,195,56,.13), transparent 60%),
      radial-gradient(680px 540px at 86% 5%, rgba(230,195,56,.11), transparent 58%),
      radial-gradient(640px 600px at 60% 30%, rgba(230,195,56,.06), transparent 60%),
      radial-gradient(680px 600px at 5% 68%, rgba(230,195,56,.06), transparent 60%),
      radial-gradient(720px 620px at 96% 74%, rgba(230,195,56,.06), transparent 60%),
      radial-gradient(820px 700px at 50% 106%, rgba(230,195,56,.05), transparent 62%),
      linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px) !important;
    background-size:auto,auto,auto,auto,auto,auto,auto,auto,44px 44px,44px 44px !important;
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat !important;
  }
}

/* Desktop-only Zeilenumbruch (Gewinnspiel-Satz, CTA-Titel etc.) */
.br-desktop{display:none;}
@media(min-width:560px){.br-desktop{display:inline;}}

/* Mobile-only Zeilenumbruch + Desktop-only Separator
   (Footer-Rechtszeile: am Handy bricht "Gewinnspiel-Teilnahmebedingungen"
   in eine eigene Zeile, der Trennpunkt davor verschwindet dort) */
.br-mobile{display:inline;}
.sep-desktop{display:none;}
@media(min-width:560px){.br-mobile{display:none;}.sep-desktop{display:inline;}}

/* Einheitlicher Affiliate-/Werbe-Hinweis im Footer */
.werbe-hinweis{display:block;margin-top:8px;font-size:11px;color:#6e685f;letter-spacing:.4px;}
footer{text-align:center;} /* mittig wie auf dem Hub (Unterseiten waren links) */

/* Footer-Social-Icons (gleich wie Hub) */
.foot-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.foot-links a{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid #28241f;background:rgba(28,26,23,.5);color:#b89a2c;transition:all .15s;}
.foot-links a:hover{color:#E6C338;border-color:#b89a2c;background:rgba(230,195,56,.08);transform:translateY(-2px);}
.foot-links svg{width:20px;height:20px;}

/* Bewegung reduzieren, wenn der Nutzer das im System eingestellt hat (a11y, WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
