/* =========================================================================
   theme.css  --  PER-CLIENT THEME LAYER
   Fuer eine neue Kunden-Site: NUR diese Datei + data/site.js anpassen.
   Struktur/Komponenten (styles.css) bleiben unangetastet.
   Theme: "Fussball Verrueckt" -- HELL, Farben aus dem Logo:
   Blau #0B8EDC / Violett #3B2065 / Schwarz / Weiss (Logo hat weissen Grund).
   ========================================================================= */

/* Self-hosted Archivo (Variable Font, latin). Ersetzt den Google-Fonts-CDN:
   schneller (kein render-blocking Dritt-Request) UND revDSG-konform (kein IP-Abfluss). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
}

:root {
  /* --- STANDARD = DARK (Kunden-Feedback 2026-07-25: "Standard sollte Dark sein").
     Brand nach bw-juniors-Vorbild: VOLLE Logo-Palette auf dunklem Grund.
     Blau ist DIE Farbe, das Logo-Violett ist ZURUECK als Zweitakzent. --- */
  --brand:        #0b8edc;   /* exaktes Logo-Blau */
  --brand-700:    #10121c;
  --brand-300:    #5fb2e8;
  --violet:       #8f6fe0;   /* Violett hell genug fuer dunklen Grund */
  --violet-700:   #53309f;
  --violet-300:   #b39af0;
  --accent:       #a58ae8;   /* Eyebrows/Labels: helles Logo-Violett */

  /* --- Neutrals (dunkle Skala, Logo-Schwarz als Basis) --- */
  --bg:           #0b0c10;
  --surface:      #13151d;
  --surface-2:    #1a1d29;
  --ink:          #f2f5f9;
  --muted:        #9aa3b2;
  --line:         #262a38;

  /* --- Typografie (sportlich-clean, keine Serifen) --- */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* fluide Type-Scale */
  --t--1:  clamp(0.83rem, 0.80rem + 0.12vw, 0.90rem);
  --t-0:   clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --t-1:   clamp(1.25rem, 1.14rem + 0.55vw, 1.55rem);
  --t-2:   clamp(1.66rem, 1.40rem + 1.10vw, 2.30rem);
  --t-3:   clamp(2.20rem, 1.70rem + 2.20vw, 3.40rem);
  --t-4:   clamp(2.85rem, 2.00rem + 3.60vw, 4.75rem);

  /* --- Form / Rhythmus: grosszuegige Radien + weiche Tiefe (bw-juniors-Muster) --- */
  --maxw:       74rem;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --radius:     12px;
  --radius-lg:  22px;
  --shadow:     0 2px 6px rgba(0,0,0,.35), 0 18px 44px -14px rgba(0,0,0,.6);
  --ring:       0 0 0 3px rgba(11,142,220,.5);  /* focus im Logo-Blau */
}

/* ---------- Heller Modus (Toggle im Header; Wahl in localStorage) ---------- */
:root[data-theme="light"] {
  --brand:        #0a76ba;   /* Logo-Blau, leicht abgedunkelt (AA auf Weiss) */
  --brand-700:    #131722;
  --brand-300:    #0b8edc;
  --violet:       #53309f;   /* Logo-Violett (auf Weiss AA fuer fette Labels) */
  --violet-700:   #3b2065;
  --violet-300:   #8f6fe0;
  --accent:       #53309f;

  --bg:           #f7f8fa;
  --surface:      #ffffff;
  --surface-2:    #eef1f5;
  --ink:          #14161c;
  --muted:        #5b6472;
  --line:         #e2e6ec;

  --shadow:       0 2px 6px rgba(19,23,34,.06), 0 18px 44px -16px rgba(19,23,34,.22);
  --ring:         0 0 0 3px rgba(11,142,220,.45);
}

/* ---------- Body-Atmosphaere: "Stadion bei Flutlicht", rein in CSS gezeichnet.
   Inspiration bw-juniors (fixes Stadion-NACHTFOTO) -- bewusst NICHT uebernommen,
   sondern eigene Interpretation in der Logo-Palette: zwei Flutlicht-Kegel von
   oben, angeschnittene Spielfeld-Geometrie (Mittellinie + Mittelkreis rechts,
   Corner-Arc unten links), Blau-/Violett-Glows, Vignette. Dazu body::after
   als feines Film-Grain (SVG-Noise, data-URI).
   PERF: beides position:fixed-Layer OHNE Animation -- einmal gemalt, danach
   nur composited (kein Scroll-Repaint, Lektion vom Perf-Pass 2026-08-09). ---------- */
body { background: var(--bg); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Vignette: Raender sacken ab, Blick bleibt in der Mitte */
    radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(2, 4, 9, .55) 100%),
    /* Struktur-Layer: diagonale Speed-Bands + Outline-Ball + LED-Dots (SVG) */
    url("/images/bg-pitch.svg") center / cover no-repeat,
    /* Marken-Glows (Blau primaer, Violett als Zweitakzent) */
    radial-gradient(60rem 42rem at 85% -12%, rgba(11, 142, 220, .16), transparent 60%),
    radial-gradient(52rem 38rem at -12% 38%, rgba(83, 48, 159, .14), transparent 60%),
    radial-gradient(48rem 42rem at 72% 112%, rgba(11, 142, 220, .10), transparent 60%),
    /* Grundverlauf: Nachthimmel oben, Rasen-Navy unten */
    linear-gradient(180deg, #07080d 0%, #0b0c10 45%, #0c1118 100%);
}
/* Film-Grain: statisches SVG-Noise-Tile, sehr dezent (Stadion-Nacht-Textur) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after { display: none; }

/* Theme-Toggle-Button (im Header) */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--brand); }
/* Default = dark -> Sonne anbieten; im hellen Modus -> Mond anbieten */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }