/* Design 1 – Klar: hell, sachlich, viel Luft. Der Standard. */

html[data-modus="hell"]{
  --grund:#F6F7F9; --flaeche:#FFFFFF; --flaeche-2:#F1F2F6; --flaeche-3:#E5E6ED;
  --leiste:#FFFFFF; --leiste-text:#5B5B6B; --kopf:rgba(255,255,255,.85);
  --linie:#E8E8EF; --linie-2:#D7D8E2;
  --text:#16161D; --text-2:#55556A; --text-3:#8B8B9E;
  --akzent:#4F46E5; --akzent-2:#4338CA; --akzent-sanft:#EEEDFE; --auf-akzent:#FFFFFF;

  --gruen:#0F9D6E;  --gruen-sanft:#E3F6EF;
  --blau:#2563EB;   --blau-sanft:#E6EEFE;
  --bernstein:#B87500; --bernstein-sanft:#FCF0DA;
  --rot:#DC2E45;    --rot-sanft:#FDE7EA;
  --rosa:#DB2777;   --rosa-sanft:#FCE7F1;
  --violett:#7C3AED;--violett-sanft:#F1E9FE;
  --tuerkis:#0E9AA7;--tuerkis-sanft:#DFF4F6;
  --grau:#6B7280;   --grau-sanft:#EEEFF3;

  --schatten-1:0 1px 2px rgba(16,16,32,.05);
  --schatten-2:0 6px 20px -8px rgba(16,16,32,.14);
  --schatten-3:0 22px 50px -18px rgba(16,16,32,.24);
}

html[data-modus="dunkel"]{
  --grund:#111116; --flaeche:#191920; --flaeche-2:#22222B; --flaeche-3:#2C2C37;
  --leiste:#151519; --leiste-text:#A2A2B4; --kopf:rgba(21,21,25,.85);
  --linie:#2A2A34; --linie-2:#3A3A47;
  --text:#F1F1F6; --text-2:#B4B4C4; --text-3:#82829A;
  --akzent:#8B85FF; --akzent-2:#A19CFF; --akzent-sanft:#232041; --auf-akzent:#12121A;

  --gruen:#3DDCA0;  --gruen-sanft:#12312A;
  --blau:#6BA1FF;   --blau-sanft:#152340;
  --bernstein:#F4B740; --bernstein-sanft:#38290F;
  --rot:#FF7285;    --rot-sanft:#3B1620;
  --rosa:#FF7FB8;   --rosa-sanft:#3A1729;
  --violett:#B18AFF;--violett-sanft:#291C42;
  --tuerkis:#48D6E0;--tuerkis-sanft:#0F2E33;
  --grau:#9AA0AE;   --grau-sanft:#252530;

  --schatten-1:0 1px 2px rgba(0,0,0,.4);
  --schatten-2:0 8px 24px -10px rgba(0,0,0,.6);
  --schatten-3:0 24px 56px -20px rgba(0,0,0,.75);
}

html[data-modus="dunkel"] kbd{background:var(--flaeche-3);border-color:var(--linie-2)}
html[data-modus="dunkel"] .ob-schalter-bahn::after{background:#E6E6F0}