/* Farben und Maße. Hell ist Standard; Dunkel greift bei Darstellung „System“,
   wenn Windows dunkel eingestellt ist, oder wenn „Dunkel“ fest gewählt ist.
   Der Dunkel-Block steht deshalb zweimal — CSS kann ihn nicht teilen. */
:root {
  color-scheme: light;
  --bg: #f6f1e7;
  --surface: #fffaf1;
  --surface-2: #efe7d8;
  --line: #e2d7c3;
  --text: #2e2418;
  --text-muted: #6f604c;
  --moss: #4f6b2c;
  --moss-hover: #435b25;
  --on-moss: #ffffff;
  --moss-soft: #e4ebd5;
  --terra: #a84c28;
  --terra-soft: #f5e1d6;
  --aqua: #2f6f7a;
  --aqua-soft: #dcecee;
  --ochre: #8a6512;
  --ochre-soft: #f3e6c4;
  /* Kästchen auf dem Beleg — die Seite bleibt auch im Dunkelmodus weiß */
  --markierung: #2f6f7a;
  --chart-1: #5b7a33;
  --chart-2: #b9653f;
  --chart-3: #3f8794;
  --chart-4: #c49a3a;
  --chart-5: #86677f;
  --chart-6: #9a8f7a;
  --shadow: 0 1px 2px rgb(60 45 20 / 6%), 0 6px 20px rgb(60 45 20 / 7%);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-head: "Fraunces", Georgia, serif;
  --dauer: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --bg: #1b1d17;
    --surface: #24271f;
    --surface-2: #1f221b;
    --line: #363b2e;
    --text: #ece4d4;
    --text-muted: #b3a891;
    --moss: #a3c46f;
    --moss-hover: #b4d283;
    --on-moss: #1b1d17;
    --moss-soft: #2f3a22;
    --terra: #e5936c;
    --terra-soft: #3d2a20;
    --aqua: #79bcc6;
    --aqua-soft: #1f3336;
    --ochre: #dcb662;
    --ochre-soft: #3a311c;
    --chart-1: #9cbf6a;
    --chart-2: #e08a62;
    --chart-3: #6fb3bd;
    --chart-4: #d9b25a;
    --chart-5: #b394ab;
    --chart-6: #a39a86;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  }
}

:root[data-theme="dunkel"] {
  color-scheme: dark;
  --bg: #1b1d17;
  --surface: #24271f;
  --surface-2: #1f221b;
  --line: #363b2e;
  --text: #ece4d4;
  --text-muted: #b3a891;
  --moss: #a3c46f;
  --moss-hover: #b4d283;
  --on-moss: #1b1d17;
  --moss-soft: #2f3a22;
  --terra: #e5936c;
  --terra-soft: #3d2a20;
  --aqua: #79bcc6;
  --aqua-soft: #1f3336;
  --ochre: #dcb662;
  --ochre-soft: #3a311c;
  --chart-1: #9cbf6a;
  --chart-2: #e08a62;
  --chart-3: #6fb3bd;
  --chart-4: #d9b25a;
  --chart-5: #b394ab;
  --chart-6: #a39a86;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
}