/* === BrainHelmut Base === */
/* Variables, Reset, Typography */

:root, html[data-theme=dark] {
  --bg: #08080d;
  --surface: rgba(15,16,22,0.75);
  --elevated: rgba(28,28,42,0.8);
  --glass: rgba(18,18,30,0.55);
  --glass-border: rgba(255,255,255,0.06);
  --glass-highlight: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.08);
  --text: #ececf1;
  --text2: #9a9aaa;
  --dim: #5a5a6a;
  /* 02.10.2026 (Architekt: „Farbauswahl muss dynamisch sein — nicht jeder mag es so; immer nur 3, max. 4 Farben"):
     VIER Rollen — Grund (--bg) · Schrift (--text) · Akzent (--akzent, waehlbar in Einstellungen › Erscheinung) · Signal (--signal, rot).
     Ausnahmen nur fuer farbliche Bereiche (Areale --areal-*, Kalenderquellen, Helix-Wahl). --gold bleibt als Name, ist aber der Akzent.
     Bisher: --gold #d4a843 fest, --gold-soft/--gold-glow als feste rgba-Werte. */
  --akzent: #d4a843;
  --gold: var(--akzent);
  --gold-soft: color-mix(in srgb, var(--gold) 12%, transparent);
  --gold-glow: color-mix(in srgb, var(--gold) 25%, transparent);
  --signal: var(--red);
  --gold2: #f5e6b8;
  /* 02.10.2026 Vier-Rollen-Regel: Gruen/Blau/Lila waren Zusatzfarben (Status, Schalter, Badges). Sie zeigen jetzt auf den Akzent;
     Rot bleibt das Signal. Areal-Farben (--areal-*) sind eigene Token und bleiben farbig. Bisher: #4ade80 / #60a5fa / #a78bfa */
  --green: var(--gold);
  --red: #f87171;
  --blue: var(--gold);
  --purple: var(--gold);
  --user-bg: rgba(30,30,50,0.7);
  --bot-bg: rgba(20,20,35,0.6);
  --r: 16px;
  --r-lg: 24px;
  --blur: 20px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --nebula-opacity: 1;
  /* Areal colors */
  --areal-1: #d4a843; /* Sprache - Gold */
  --areal-2: #60a5fa; /* Gedaechtnis - Blau */
  --areal-3: #4ade80; /* Wissen - Gruen */
  --areal-4: #f472b6; /* Kreativitaet - Rosa */
  --areal-5: #a78bfa; /* Meta - Lila */
  --areal-6: #fb923c; /* Mathe - Orange */
  --areal-7: #2dd4bf; /* Motorik - Teal */
  --areal-8: #f87171; /* Homoeostase - Rot */
  /* LLM Teacher colors */
  --llm-helmut: var(--gold);
  --llm-claude: #a855f7;
  --llm-gpt: #22c55e;
  --llm-gemini: #3b82f6;
  --llm-deepseek: #06b6d4;
  /* 02.10.2026: WIDGET-FENSTER — EIN Baustein fuer alle Fenster (glass.css „Widget-Fenster"). Zeigen auf die Farb-Token,
     gelten darum in hell UND dunkel ohne zweite Fassung. Aendern = hier, nirgends sonst. */
  --fenster-bg: var(--elevated);
  --fenster-rand: var(--border);
  --fenster-radius: var(--r);
  --fenster-pad: 20px;
  --fenster-abstand: 16px;
  --fenster-schatten: var(--shadow);
  --kachel-bg: var(--bg);
  --knopf-h: 38px;
  --knopf-radius: 10px;
  --knopf-pad: 0 18px;
  --feld-max: 560px;
}

html[data-theme=light] {
  --bg: #f2f2f7;
  --surface: rgba(255,255,255,0.8);
  --elevated: rgba(240,240,245,0.85);
  --glass: rgba(255,255,255,0.6);
  --glass-border: rgba(0,0,0,0.06);
  --glass-highlight: rgba(255,255,255,0.5);
  --border: rgba(0,0,0,0.08);
  --text: #1a1a2e;
  --text2: #4a4a5a;
  --dim: #8a8a9a;
  --gold: color-mix(in srgb, var(--akzent) 78%, #000);
  --gold-soft: color-mix(in srgb, var(--gold) 10%, transparent);
  --gold-glow: color-mix(in srgb, var(--gold) 15%, transparent);
  --gold2: #8b6508;
  /* 02.10.2026 Vier-Rollen-Regel: Gruen/Blau/Lila waren Zusatzfarben (Status, Schalter, Badges). Sie zeigen jetzt auf den Akzent;
     Rot bleibt das Signal. Areal-Farben (--areal-*) sind eigene Token und bleiben farbig. Bisher: #16a34a / #2563eb / #7c3aed */
  --green: var(--gold);
  --red: #dc2626;
  --blue: var(--gold);
  --purple: var(--gold);
  --user-bg: rgba(220,222,230,0.7);
  --bot-bg: rgba(240,240,245,0.7);
  --shadow: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
  --nebula-opacity: 1;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, system-ui, 'SF Pro Display', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

.hidden { display: none !important; }

/* Typography */
.t-hero { font-size: clamp(24px, 5vw, 36px); font-weight: 700; letter-spacing: -0.5px; }
.t-title { font-size: 20px; font-weight: 600; }
.t-body { font-size: 15px; line-height: 1.6; }
.t-caption { font-size: 12px; color: var(--text2); }
.t-gold { color: var(--gold); }
.t-dim { color: var(--text2); }

/* Smooth transitions for theme toggle */
html, body { transition: background-color 0.4s ease, color 0.4s ease; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text2); }

/* Focus */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* Canvas */
canvas { pointer-events: none; }

/* Selection */
::selection { background: var(--gold-soft); color: var(--gold); }

/* Light-mode Login */
[data-theme=light] .login-card { background: rgba(255,255,255,0.85); }
[data-theme=light] .login-view { background: var(--bg); }

/* GPU-Beschleunigung fuer animierte Elemente */
/* 09.10.2026 (Pruefung CSS #4): .screen und .app-footer raus — dauerhafte Ebene je Seite, ihr Uebergang laeuft nie (display:none→flex),
   und will-change:opacity machte die Seite zur Backdrop-Wurzel (Glas zeichnete nur den Seiteninhalt weich, nicht die Helix) */
.helmut-orb, .nebula-bg, .splash { will-change: transform, opacity; }
/* Content-Visibility fuer nicht-sichtbare Screens */
.screen:not(.active) { content-visibility: hidden; }

/* 02.10.2026: HINTERGRUND waehlbar (Einstellungen › KI-Profil › Erscheinung) — html[data-grund]. Nur die Grund-Rolle und ihre
   Flaechen; Schrift/Akzent/Signal bleiben. „nacht" = Vorgabe oben (keine Regel). „akzent" toent den Grund mit der Akzentfarbe. */
html[data-grund=graphit]:not([data-theme=light]) { --bg: #16171c; --surface: rgba(24,25,30,0.78); --elevated: rgba(36,38,45,0.82); --glass: rgba(28,30,36,0.6); }
html[data-grund=marine]:not([data-theme=light]) { --bg: #0a1528; --surface: rgba(12,20,36,0.78); --elevated: rgba(22,34,58,0.82); --glass: rgba(16,26,46,0.6); }
html[data-grund=wald]:not([data-theme=light]) { --bg: #0a1912; --surface: rgba(12,26,20,0.78); --elevated: rgba(22,42,33,0.82); --glass: rgba(16,32,25,0.6); }
html[data-grund=aubergine]:not([data-theme=light]) { --bg: #170e1d; --surface: rgba(26,16,32,0.78); --elevated: rgba(42,27,51,0.82); --glass: rgba(32,20,40,0.6); }
html[data-grund=akzent]:not([data-theme=light]) { --bg: color-mix(in srgb, var(--akzent) 7%, #06060a); --surface: color-mix(in srgb, var(--akzent) 9%, rgba(15,16,22,0.8));
  --elevated: color-mix(in srgb, var(--akzent) 12%, rgba(28,28,40,0.84)); --glass: color-mix(in srgb, var(--akzent) 8%, rgba(18,18,28,0.6)); }
html[data-grund=graphit][data-theme=light] { --bg: #e9e9ec; --elevated: rgba(226,226,231,0.88); --surface: rgba(246,246,248,0.85); }
html[data-grund=marine][data-theme=light] { --bg: #eaf0f8; --elevated: rgba(223,231,243,0.9); --surface: rgba(246,249,253,0.86); }
html[data-grund=wald][data-theme=light] { --bg: #eaf3ed; --elevated: rgba(222,236,227,0.9); --surface: rgba(246,251,247,0.86); }
html[data-grund=aubergine][data-theme=light] { --bg: #f3edf5; --elevated: rgba(236,226,240,0.9); --surface: rgba(251,247,252,0.86); }
html[data-grund=akzent][data-theme=light] { --bg: color-mix(in srgb, var(--akzent) 9%, #f4f4f7); --elevated: color-mix(in srgb, var(--akzent) 12%, rgba(240,240,245,0.9));
  --surface: color-mix(in srgb, var(--akzent) 5%, rgba(255,255,255,0.86)); }
/* Metallic: EIN Verlauf aus der Akzentfarbe (Licht oben links, Tiefe in der Mitte, Glanzkante) — fuer glass.css „Metallic" */
:root { --metall: linear-gradient(135deg, color-mix(in srgb, var(--akzent) 45%, #fff) 0%, var(--akzent) 28%,
  color-mix(in srgb, var(--akzent) 62%, #000) 52%, var(--akzent) 72%, color-mix(in srgb, var(--akzent) 70%, #fff) 100%);
  --metall-weich: linear-gradient(135deg, color-mix(in srgb, var(--akzent) 26%, transparent), color-mix(in srgb, var(--akzent) 8%, transparent)); }
/* 02.10.2026: gewaehlter Hintergrund mit leichtem Verlauf von oben (Licht) — „nacht" bleibt flach wie bisher */
html[data-grund]:not([data-grund=nacht]) body { background: radial-gradient(130% 85% at 50% -10%, color-mix(in srgb, var(--bg) 82%, #ffffff) 0%, var(--bg) 60%) fixed, var(--bg); }
html[data-grund]:not([data-grund=nacht])[data-theme=light] body { background: radial-gradient(130% 85% at 50% -10%, #ffffff 0%, var(--bg) 60%) fixed, var(--bg); }