/*
 * shared.css – Gemeinsame Styles fuer 6lab
 * --------------------------------------------------------------------------
 * Enthaelt die Teile, die index.html und trainer.html FRUEHER doppelt hatten:
 *   - Schrift-Variablen (--mono / --sans / --disp)
 *   - Farb-Themes (Dunkel / Hell / System-Automatik)
 *   - Basis-Resets (box-sizing, body, Hintergrund-Raster, Links, .hidden)
 *   - Theme-Schalter + Sprach-Auswahl (.theme-switch / .lang-sel)
 *
 * Die Farb-Variablen sind die VEREINIGUNG beider Seiten: Trainer braucht ein
 * paar zusaetzliche Variablen (--field-hot, --well, --ov-bg …), die Startseite
 * nutzt --shadow. Beide Saetze stehen hier zusammen – ungenutzte Variablen auf
 * einer Seite schaden nicht.
 *
 * Seitenspezifisches CSS (Login-Box, Footer-Abstaende, Landing, Trainer-UI)
 * bleibt bewusst im <style> der jeweiligen Seite, weil es sich unterscheidet.
 */

:root{
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --disp:"Bricolage Grotesque",var(--sans);
}

/* ---- DARK (Standard) ---- */
:root, :root[data-theme="dark"]{
  --bg:#0c1118; --panel:#121a24; --panel2:#0f1620;
  --line:#21303f; --line2:#2c3e50;
  --txt:#dce6f0; --muted:#8aa0b4; --faint:#5d7387;
  --accent:#34d399; --accent-dim:#0f3b30; --accent-line:#1f6b54;
  --red:#f4736a; --red-dim:#3a1a18; --red-line:#7a342f;
  --amber:#f5b948; --blue:#5aa0e6;
  --field:#0d1622; --field-hot:#13241f; --well:#0a1018;
  --on-accent:#04140e; --on-red:#1a0c0b; --shadow:#000;
  --accent-on-dim:#bdf3df; --red-on-dim:#fca5a5;
  --bar-bg:#0e1620cc; --ov-bg:#05080cdd;
  --grid-op:.35; --img-bg:#fff;
  --glow1:radial-gradient(1100px 600px at 85% -10%, #15314022, transparent 60%);
  --glow2:radial-gradient(900px 500px at -10% 110%, #1a2a3a33, transparent 55%);
}

/* ---- LIGHT ---- */
:root[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#f0f3f7;
  --line:#dce3ec; --line2:#c3cedb;
  --txt:#16202b; --muted:#5a6b7d; --faint:#6f8094;
  --accent:#0c7e55; --accent-dim:#d7efe5; --accent-line:#8fd0b8;
  --red:#d6453c; --red-dim:#fbe6e4; --red-line:#eaa9a3;
  --amber:#b9820f; --blue:#2f7fd1;
  --field:#f0f3f7; --field-hot:#e7eef5; --well:#e9eef4;
  --on-accent:#ffffff; --on-red:#ffffff; --shadow:#9aa7b540;
  --accent-on-dim:#0b6e4a; --red-on-dim:#a3302a;
  --bar-bg:#ffffffd9; --ov-bg:#1a2530cc;
  --grid-op:.5; --img-bg:#fff;
  --glow1:radial-gradient(1100px 600px at 85% -10%, #0f9d6b14, transparent 60%);
  --glow2:radial-gradient(900px 500px at -10% 110%, #2f7fd10f, transparent 55%);
}

/* ---- AUTO: Hell nur, wenn kein data-theme explizit gesetzt ist ---- */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f4f6f9; --panel:#ffffff; --panel2:#f0f3f7;
    --line:#dce3ec; --line2:#c3cedb;
    --txt:#16202b; --muted:#5a6b7d; --faint:#6f8094;
    --accent:#0c7e55; --accent-dim:#d7efe5; --accent-line:#8fd0b8;
    --red:#d6453c; --red-dim:#fbe6e4; --red-line:#eaa9a3;
    --amber:#b9820f; --blue:#2f7fd1;
    --field:#f0f3f7; --field-hot:#e7eef5; --well:#e9eef4;
    --on-accent:#ffffff; --on-red:#ffffff; --shadow:#9aa7b540;
    --accent-on-dim:#0b6e4a; --red-on-dim:#a3302a;
    --bar-bg:#ffffffd9; --ov-bg:#1a2530cc;
    --grid-op:.5; --img-bg:#fff;
    --glow1:radial-gradient(1100px 600px at 85% -10%, #0f9d6b14, transparent 60%);
    --glow2:radial-gradient(900px 500px at -10% 110%, #2f7fd10f, transparent 55%);
  }
}

/* ---- Basis-Resets ---- */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    var(--glow1),
    var(--glow2),
    var(--bg);
  color:var(--txt); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:var(--grid-op);z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;mask:radial-gradient(900px 600px at 50% 0,#000,transparent 80%);}
button{font-family:var(--sans);cursor:pointer}
a{color:var(--accent)}
.hidden{display:none !important}

/* ---- Theme-Steuerung (Dreifach-Schalter: Dunkel/System/Hell) + Sprach-Auswahl ---- */
.theme-switch{position:relative;width:174px;height:28px;border-radius:99px;border:1px solid var(--line2);
  background:var(--field);cursor:pointer;padding:0;display:inline-flex;align-items:stretch;flex:none;
  vertical-align:middle;transition:background .2s,border-color .2s;overflow:hidden}
.theme-switch:hover{border-color:var(--accent-line)}
.theme-switch .ts-knob{position:absolute;top:3px;left:3px;width:52px;height:20px;border-radius:99px;
  background:var(--accent);transition:left .22s cubic-bezier(.4,.1,.3,1.3)}
.theme-switch .ts-lbl{position:relative;z-index:1;flex:1 1 0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;font-family:var(--sans);line-height:1;letter-spacing:.02em;
  color:var(--muted);transition:color .2s;background:none;border:none;padding:0;margin:0;cursor:pointer}
.theme-switch[data-mode="dark"]   .ts-knob{left:3px}
.theme-switch[data-mode="system"] .ts-knob{left:61px}
.theme-switch[data-mode="light"]  .ts-knob{left:119px}
.theme-switch[data-mode="dark"]   .ts-dark{color:var(--on-accent)}
.theme-switch[data-mode="system"] .ts-system{color:var(--on-accent)}
.theme-switch[data-mode="light"]  .ts-light{color:var(--on-accent)}
.lang-sel{background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:99px;
  padding:5px 10px;font-size:12px;font-family:var(--sans);line-height:1;cursor:pointer;vertical-align:middle}
.lang-sel:hover{border-color:var(--line2);color:var(--txt)}
.lang-sel:focus{outline:none;border-color:var(--accent)}