/* farben.css — Farbtafel von Kompass (Kopie aus dem Modul chat). Eigene Kopie, damit der
 * Trainingsraum ohne die anderen Module richtig aussieht. Dazu die Farbe des Trainingsraums. */
:root{
  --ground:#f6f3f4; --surface:#fff; --sunk:#ece5e7; --line:#ded2d6; --line-soft:#eae2e4;
  --ink:#221a1d; --ink-mid:#5b4a50; --ink-soft:#8a767c;
  --wein:#8b1d3f; --wein-soft:#f4e2e7; --gut:#2e7d5b; --gut-soft:#dbeee5;
  --warn:#b45a1c; --warn-soft:#f7e5d5; --arbeit:#9d7a12; --arbeit-soft:#f4ecd2; --gold:#b08316;
  --kopf-bg:#8b1d3f; --kopf-ink:#fff; --kopf-linie:rgba(255,255,255,.22);
  --schatten:0 1px 2px rgba(34,26,29,.06), 0 8px 24px -16px rgba(34,26,29,.35);
  --schatten-hoch:0 4px 12px rgba(34,26,29,.12), 0 24px 48px -24px rgba(34,26,29,.5);
  --sans:"IBM Plex Sans",system-ui,sans-serif; --serif:"IBM Plex Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace; --radius:12px;
  /* Zwillinge in Zahlen — siehe Kopf der Datei. */
  --kopf-bg-rgb:139,29,63; --gut-rgb:46,125,91; --warn-rgb:180,90,28;
}
@media (prefers-color-scheme: dark){ :root:not([data-thema="hell"]){
  --ground:#14100f; --surface:#1e1719; --sunk:#2a2024; --line:#3b2f34; --line-soft:#2e2429;
  --ink:#f0e7e9; --ink-mid:#c0abb1; --ink-soft:#96828a;
  --wein:#e08ba3; --wein-soft:#3a1c26; --gut:#5cbb8c; --gut-soft:#1b3a2c;
  --warn:#dd8b5c; --warn-soft:#3a2820; --arbeit:#cfa93f; --arbeit-soft:#322a14; --gold:#d9b04a;
  --kopf-bg:#6d1631; --kopf-ink:#f7eaee; --kopf-linie:rgba(255,255,255,.18);
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  --schatten-hoch:0 4px 12px rgba(0,0,0,.5), 0 28px 56px -28px rgba(0,0,0,.9);
  --kopf-bg-rgb:109,22,49; --gut-rgb:92,187,140; --warn-rgb:221,139,92;
}}
:root[data-thema="dunkel"]{
  --ground:#14100f; --surface:#1e1719; --sunk:#2a2024; --line:#3b2f34; --line-soft:#2e2429;
  --ink:#f0e7e9; --ink-mid:#c0abb1; --ink-soft:#96828a;
  --wein:#e08ba3; --wein-soft:#3a1c26; --gut:#5cbb8c; --gut-soft:#1b3a2c;
  --warn:#dd8b5c; --warn-soft:#3a2820; --arbeit:#cfa93f; --arbeit-soft:#322a14; --gold:#d9b04a;
  --kopf-bg:#6d1631; --kopf-ink:#f7eaee; --kopf-linie:rgba(255,255,255,.18);
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  --schatten-hoch:0 4px 12px rgba(0,0,0,.5), 0 28px 56px -28px rgba(0,0,0,.9);
  --kopf-bg-rgb:109,22,49; --gut-rgb:92,187,140; --warn-rgb:221,139,92;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);margin:0;text-wrap:balance}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--wein)}
:focus-visible{outline:2px solid var(--wein);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
[hidden]{display:none!important}
:root{ --tr:#c2570f; --tr-soft:#fbe8d9; --tr-ink:#fff; --rot:#b3202c; --rot-soft:#f9e1e3;
  --schatten-klein:0 1px 2px rgba(34,26,29,.08), 0 4px 10px -4px rgba(34,26,29,.14); }
@media (prefers-color-scheme: dark){ :root:not([data-thema="hell"]){ --tr:#f0914a; --tr-soft:#3a2517; --tr-ink:#1e1719; --rot:#f08a93; --rot-soft:#3a1c20;
  --schatten-klein:0 1px 2px rgba(0,0,0,.45), 0 4px 10px -4px rgba(0,0,0,.5); }}
:root[data-thema="dunkel"]{ --tr:#f0914a; --tr-soft:#3a2517; --tr-ink:#1e1719; --rot:#f08a93; --rot-soft:#3a1c20;
  --schatten-klein:0 1px 2px rgba(0,0,0,.45), 0 4px 10px -4px rgba(0,0,0,.5); }