/* Farbschemata hell und dunkel.
   ---------------------------------------------------------------------------
   Diese Datei haelt saemtliche farbabhaengigen Variablen. Die uebrigen
   Stylesheets definieren nur noch Masse, Schriften und Struktur - so gibt es
   fuer jede Farbe genau eine Stelle.

   Grundlage sind Farbtripel (--accent-rgb und so fort). Das restliche CSS
   arbeitet mit rgba(var(--x-rgb),alpha) und behaelt dadurch seine
   Abstufungen, egal welches Schema aktiv ist.

   Das dunkle Schema ist der Ausgangszustand und bleibt die Vorgabe. Das helle
   Schema setzt nur die Werte neu, die sich unterscheiden. */

:root{
  /* --- Farbtripel --- */
  --accent-rgb:0,220,255;
  --accent-secondary-rgb:0,136,255;
  --accent-warm-rgb:0,255,200;
  --bg-rgb:5,8,15;
  --surface-rgb:10,18,36;
  --surface-hover-rgb:14,24,48;
  --shadow-rgb:0,0,0;
  --danger-rgb:255,50,50;

  /* --- Flaechen --- */
  --bg-primary:rgb(var(--bg-rgb));
  --bg-secondary:#0a0f1a;
  --glass-bg:rgba(var(--surface-rgb),0.55);
  --glass-bg-hover:rgba(var(--surface-hover-rgb),0.7);
  --glass-border:rgba(var(--accent-rgb),0.12);
  --glass-border-hover:rgba(var(--accent-rgb),0.3);
  --glass-shadow:0 8px 32px rgba(var(--shadow-rgb),0.4);

  /* --- Akzente --- */
  --accent:rgb(var(--accent-rgb));
  --accent-dim:rgba(var(--accent-rgb),0.15);
  --accent-glow:0 0 20px rgba(var(--accent-rgb),0.3);
  --accent-secondary:rgb(var(--accent-secondary-rgb));
  --accent-warm:rgb(var(--accent-warm-rgb));
  --accent-warn:#ff6b3d;

  /* --- Schrift --- */
  --text-primary:#e8edf5;
  --text-secondary:#8899b4;
  --text-muted:#4a5a78;

  /* --- Kopfbereich mit Videohintergrund --- */
  --nav-bg:rgba(var(--bg-rgb),0.4);
  --nav-bg-scrolled:rgba(var(--bg-rgb),0.85);
  --hero-title-from:#fff;

  /* --- Schleier hinter dem Seiteninhalt --- */
  --bg-glow-rgb:0,30,60;
  --bg-glow-a:rgba(0,40,80,0.4);
  --bg-glow-b:rgba(0,30,90,0.3);
  --accent-warn-rgb:255,107,61;

  color-scheme:dark;
}

/* ---------------------------------------------------------------------------
   Helles Schema

   Kein Reinweiss: Ein kuehles Hellgrau nimmt der Flaeche die Haerte, laesst
   die weissen Glasflaechen hervortreten und passt zum technischen Charakter
   der Seite. Der Akzent wandert von #00dcff auf einen dunkleren Ton derselben
   Familie - das helle Cyan erreicht auf hellem Grund keinen ausreichenden
   Kontrast und waere als Textfarbe unlesbar.
   --------------------------------------------------------------------------- */
:root[data-theme="light"]{
  /* 0,116,146 statt eines helleren Tons: Damit erreicht der Akzent auch als
     kleine Schrift (Abschnittslabels, 0.7rem) die geforderten 4.5:1 - auf dem
     Grundton wie auf den weissen Glasflaechen. */
  --accent-rgb:0,116,146;
  --accent-secondary-rgb:0,92,168;
  --accent-warm-rgb:0,138,112;
  --bg-rgb:236,240,245;
  --surface-rgb:255,255,255;
  --surface-hover-rgb:255,255,255;
  --shadow-rgb:18,38,64;
  --danger-rgb:196,32,38;

  --bg-secondary:#e2e8f0;

  /* Glasflaechen tragen im Hellen mehr Deckung, sonst verschwinden sie im
     Untergrund. Schatten wird deutlich zurueckgenommen. */
  --glass-bg:rgba(var(--surface-rgb),0.72);
  --glass-bg-hover:rgba(var(--surface-rgb),0.92);
  --glass-border:rgba(var(--accent-rgb),0.22);
  --glass-border-hover:rgba(var(--accent-rgb),0.45);
  --glass-shadow:0 8px 28px rgba(var(--shadow-rgb),0.10);
  --accent-glow:0 0 18px rgba(var(--accent-rgb),0.18);
  --accent-dim:rgba(var(--accent-rgb),0.10);
  --accent-warn:#c2410c;

  --text-primary:#0c1621;
  --text-secondary:#46586d;
  --text-muted:#7a8ba0;

  /* Die Leiste steht ueber dem dunklen Videokopf und braucht mehr Deckung,
     damit die dunkle Schrift darauf lesbar bleibt. */
  --nav-bg:rgba(var(--bg-rgb),0.82);
  --nav-bg-scrolled:rgba(var(--bg-rgb),0.94);

  /* Die Schleier bleiben als Aufhellung erhalten, nur eben ins Helle
     gedreht - sonst legten sich dunkelblaue Flecken ueber die Seite. */
  --bg-glow-rgb:120,160,200;
  --bg-glow-a:rgba(var(--accent-rgb),0.07);
  --bg-glow-b:rgba(var(--accent-secondary-rgb),0.05);
  --accent-warn-rgb:194,65,12;

  color-scheme:light;
}

/* ---------------------------------------------------------------------------
   Kopfbereich als dunkle Insel

   Hinter dem Kopfbereich laeuft ein dunkles Video. Dunkle Schrift waere darauf
   nicht lesbar, ein Aufhellen des Videos wuerde es ausbleichen. Der Bereich
   behaelt deshalb in beiden Schemata seine dunklen Werte - das ist zugleich
   die gestalterisch klarere Loesung als ein halbheller Kompromiss.
   --------------------------------------------------------------------------- */
:root[data-theme="light"] #hero{
  --bg-rgb:5,8,15;
  --accent-rgb:0,220,255;
  --accent-secondary-rgb:0,136,255;
  --shadow-rgb:0,0,0;
  --text-primary:#e8edf5;
  --text-secondary:#8899b4;
  --text-muted:#4a5a78;
  --glass-border:rgba(var(--accent-rgb),0.12);
  --glass-bg:rgba(10,18,36,0.55);
  --accent-dim:rgba(var(--accent-rgb),0.15);
  --hero-title-from:#fff;
}

/* Der Umschalter selbst */
.nav-theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:10px;border:1px solid var(--glass-border);border-radius:8px;background:none;color:var(--text-secondary);cursor:pointer;transition:var(--transition);flex:none}
.nav-theme:hover{color:var(--accent);border-color:var(--accent)}
.nav-theme:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.nav-theme i{font-size:0.95rem;line-height:1}
/* Im dunklen Schema wird die Sonne angeboten, im hellen der Mond */
.nav-theme .icon-light{display:none}
:root[data-theme="light"] .nav-theme .icon-light{display:inline-block}
:root[data-theme="light"] .nav-theme .icon-dark{display:none}

.mobile-theme{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:0.95rem;color:var(--text-muted);background:none;border:0;cursor:pointer;letter-spacing:2px;padding:6px 12px;transition:var(--transition)}
.mobile-theme:hover{color:var(--accent)}

@media(max-width:768px){
  .nav-theme{display:none}
}