/* Lehrerlernen · Design-Variablen (Baunorm B-14: Farben, Schrift, Abstände, Radien nur von hier).
   Farbwelt über html[data-farbe], Hell/Dunkel über html[data-modus] (gesetzt von js/thema-start.js vor dem ersten Zeichnen).
   Farben in app.css nie fest eintragen, immer eine Variable nehmen. */

:root {
  /* Schrift: nur Systemschriften, keine Fonts von CDNs (DSGVO) */
  --schrift-titel: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: ui-serif, Georgia, serif;

  --gr-xs: 0.78rem;
  --gr-s: 0.875rem;
  --gr-m: 1rem;
  --gr-l: 1.125rem;
  --gr-xl: 1.375rem;
  --gr-2xl: 1.75rem;
  --gr-3xl: 2.25rem;
  --zeile: 1.5;

  /* Abstandsraster 4/8/12/16/24/32/48 */
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 24px;
  --a6: 32px;
  --a7: 48px;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-rund: 999px;

  --knopf-hoehe: 48px;
  --tipp: 44px;
  --strich: 1px;
  --icon-strich: 1.75;

  --breite-inhalt: 1080px;
  --breite-text: 680px;
  --leiste-unten: 64px;
  --leiste-oben: 64px;

  /* Bewegung (E-07: 150–300 ms) */
  --t-kurz: 160ms;
  --t-mittel: 240ms;
  --kurve: cubic-bezier(.2, .8, .2, 1);
  --kurve-raus: cubic-bezier(.4, 0, .2, 1);

  /* Rückmeldung: Farbe immer zusammen mit Symbol (R-01) */
  --gut: #2f7a4f;
  --gut-zart: #e1f0e6;
  --falsch: #b3412f;
  --falsch-zart: #f7e2dd;
  --hinweis: #9a6a12;
  --hinweis-zart: #f6ecd6;
  --auf-marke: #ffffff;
  --schatten-1: 0 1px 2px rgb(20 20 30 / .05), 0 1px 1px rgb(20 20 30 / .03);
  --schatten-2: 0 10px 30px rgb(20 20 30 / .10), 0 2px 6px rgb(20 20 30 / .06);
  --schleier: rgb(15 18 25 / .38);
}

/* ── Farbwelt Tinte (Standard): Nachtblau mit warmem Gold auf Papier ── */
:root, [data-farbe="tinte"] {
  --grund: #f7f5f0;
  --flaeche: #fffdf9;
  --flaeche-2: #efebe3;
  --linie: #e2ddd2;
  --linie-stark: #cdc6b8;
  --text: #1b2433;
  --text-2: #4a5568;
  --text-leise: #6f7889;
  --marke: #23395b;
  --marke-tief: #1a2b45;
  --marke-zart: #e6ebf2;
  --akzent: #a87a26;
  --akzent-zart: #f5ead3;
  --theme-farbe: #f7f5f0;
}
[data-farbe="tinte"][data-modus="dunkel"] {
  --grund: #0f141c;
  --flaeche: #161d28;
  --flaeche-2: #1d2633;
  --linie: #2a3442;
  --linie-stark: #3a4657;
  --text: #ece8df;
  --text-2: #b5bcc8;
  --text-leise: #8d97a7;
  --marke: #9db5dc;
  --marke-tief: #b9cbe8;
  --marke-zart: #1e2a3d;
  --akzent: #d9ac5a;
  --akzent-zart: #33291a;
  --theme-farbe: #0f141c;
}

/* ── Salbei: gedecktes Grün mit Kupfer ── */
[data-farbe="salbei"] {
  --grund: #f5f6f1;
  --flaeche: #fdfdfa;
  --flaeche-2: #e9ece3;
  --linie: #dde1d5;
  --linie-stark: #c6ccbd;
  --text: #1f2a22;
  --text-2: #4b574e;
  --text-leise: #6e7a71;
  --marke: #3f6650;
  --marke-tief: #30503e;
  --marke-zart: #e3ece5;
  --akzent: #a8652f;
  --akzent-zart: #f4e4d6;
  --theme-farbe: #f5f6f1;
}
[data-farbe="salbei"][data-modus="dunkel"] {
  --grund: #101511;
  --flaeche: #172019;
  --flaeche-2: #1e2a21;
  --linie: #2a382d;
  --linie-stark: #3a4b3e;
  --text: #e8ece5;
  --text-2: #b3bfb5;
  --text-leise: #8a978e;
  --marke: #9ccaae;
  --marke-tief: #b8dcc6;
  --marke-zart: #1e3125;
  --akzent: #dc9a66;
  --akzent-zart: #33261b;
  --theme-farbe: #101511;
}

/* ── Terrakotta: gebrannte Erde mit Petrol ── */
[data-farbe="terrakotta"] {
  --grund: #faf5f0;
  --flaeche: #fffcf8;
  --flaeche-2: #f1e8df;
  --linie: #e7dace;
  --linie-stark: #d4c3b3;
  --text: #2b1f1a;
  --text-2: #5d4b42;
  --text-leise: #84716a;
  --marke: #a34a2a;
  --marke-tief: #853b20;
  --marke-zart: #f5e3d9;
  --akzent: #2f6266;
  --akzent-zart: #dcebea;
  --theme-farbe: #faf5f0;
}
[data-farbe="terrakotta"][data-modus="dunkel"] {
  --grund: #18110e;
  --flaeche: #211814;
  --flaeche-2: #2b1f1a;
  --linie: #3a2b24;
  --linie-stark: #4d3a31;
  --text: #f0e6de;
  --text-2: #c7b4a8;
  --text-leise: #a08d82;
  --marke: #ec9a78;
  --marke-tief: #f4b69c;
  --marke-zart: #3a231a;
  --akzent: #7fbcbf;
  --akzent-zart: #1c2f30;
  --theme-farbe: #18110e;
}

/* ── Schiefer: kühles Grau mit Senf ── */
[data-farbe="schiefer"] {
  --grund: #f3f4f6;
  --flaeche: #fcfcfd;
  --flaeche-2: #e7e9ed;
  --linie: #d9dce2;
  --linie-stark: #c3c8d0;
  --text: #1d2329;
  --text-2: #4b545e;
  --text-leise: #6f7781;
  --marke: #3a4a5c;
  --marke-tief: #2b3846;
  --marke-zart: #e2e7ed;
  --akzent: #9a7520;
  --akzent-zart: #f1e8d2;
  --theme-farbe: #f3f4f6;
}
[data-farbe="schiefer"][data-modus="dunkel"] {
  --grund: #121417;
  --flaeche: #1a1d21;
  --flaeche-2: #22262b;
  --linie: #2f343a;
  --linie-stark: #3f454d;
  --text: #e6e8eb;
  --text-2: #b0b6be;
  --text-leise: #8a919a;
  --marke: #a9bacd;
  --marke-tief: #c3d0de;
  --marke-zart: #242c36;
  --akzent: #d6b25e;
  --akzent-zart: #2e2919;
  --theme-farbe: #121417;
}

/* ── Pflaume: Beere mit Messing ── */
[data-farbe="pflaume"] {
  --grund: #f8f4f6;
  --flaeche: #fffcfd;
  --flaeche-2: #efe6eb;
  --linie: #e3d7de;
  --linie-stark: #d0c0c9;
  --text: #2a1e27;
  --text-2: #5b4a56;
  --text-leise: #83717d;
  --marke: #6b3a62;
  --marke-tief: #552d4e;
  --marke-zart: #f0e2ec;
  --akzent: #9a6a2e;
  --akzent-zart: #f3e6d4;
  --theme-farbe: #f8f4f6;
}
[data-farbe="pflaume"][data-modus="dunkel"] {
  --grund: #161015;
  --flaeche: #1f171d;
  --flaeche-2: #291f27;
  --linie: #382b35;
  --linie-stark: #4a3946;
  --text: #efe5ec;
  --text-2: #c4b2be;
  --text-leise: #9d8b97;
  --marke: #d8a6cc;
  --marke-tief: #e6c0dc;
  --marke-zart: #35222f;
  --akzent: #ddb173;
  --akzent-zart: #30261a;
  --theme-farbe: #161015;
}

/* Gemeinsame Werte im Dunkelmodus */
[data-modus="dunkel"] {
  --gut: #7cc79a;
  --gut-zart: #183325;
  --falsch: #f08f7c;
  --falsch-zart: #3b1f1a;
  --hinweis: #e2b65c;
  --hinweis-zart: #33291a;
  --auf-marke: #10141a;
  --schatten-1: 0 1px 2px rgb(0 0 0 / .3);
  --schatten-2: 0 12px 32px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .3);
  --schleier: rgb(0 0 0 / .55);
  color-scheme: dark;
}
[data-modus="hell"] { color-scheme: light; }

/* Bewegung aus: Profil-Schalter oder Systemwunsch (E-01) */
[data-bewegung="aus"] {
  --t-kurz: 0ms;
  --t-mittel: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-kurz: 0ms;
    --t-mittel: 0ms;
  }
}