:root {
  --gruen: #368469;
  --gruen-hell: #e6f1ed;
  --gruppe: var(--gruen);
  --gruppe-text: #ffffff;
  --text: #1a1e20;
  --text-leise: #596360;
  --hintergrund: #dfe8e4;
  --flaeche: #ffffff;
  --rand: #d3deda;
  --radius: 10px;
  --abstand: 16px;

  /* 0.33.7: alle festen Farben als Variablen (Vorbereitung Dunkelmodus, Schritt 11.7). Werte wie vorher. */
  /* Flächen und Linien */
  --flaeche-leise: #f6f8f7;
  --flaeche-grau: #eceeed;
  --flaeche-zart: #fbfcfb;
  --spur: #e3ebe8;
  --spur-zart: #e7ece9;
  --linie-zart: #e2e7e4;
  --kaestchen: #e4e9e7;
  --kaestchen-voll: #b9c2bf;
  --grau-marke: #8a9490;
  --grau-hell: #b8c0bc;
  --tabellenkopf-grau: #5f6a66;
  --logo-grund: #ffffff;
  --auf-farbe: #ffffff;
  /* Dunkler Balken oben und Hinweis-Leiste unten */
  --balken: #1a1e20;
  --balken-text: #ffffff;
  /* Rot: Fehler, überfällig */
  --fehler: #b3261e;
  --fehler-flaeche: #fdecea;
  --fehler-rand: #e3b1ab;
  /* Orange: heute, Planung, Warnung */
  --warnung: #c77c00;
  --warn-flaeche: #fff7e8;
  --warn-rand: #e8c98a;
  --warnung-text: #6b4100;
  --planung-text: #8a5600;
  --hinweis-flaeche: #fff3dc;
  --hinweis-text: #8a5200;
  --hinweis-rand: #e0b25c;
  --kommentar-rand: #e0a030;
  /* Kachel „Für dich“ (gelb) */
  --fuer-dich-flaeche: #fff6d1;
  --fuer-dich-rand: #f0c64a;
  --fuer-dich-akzent: #e08a00;
  --fuer-dich-linie: #f0d98a;
  --fuer-dich-text: #5c4a14;
  /* Grün, Blau, Rosa */
  --gruen-text: #1f5e48;
  --gruen-aktion: #1b7340;
  --blau-text: #2f3f8f;
  --blau-flaeche: #eef1fb;
  --blau-flaeche-kraeftig: #e3e7f6;
  --pink: #d6249f;
  --pink-flaeche: #fbe4f3;
  --rosa-flaeche: #fde7ef;
  --frist-rosa: #d81b60;
  --frist-flaeche: #fbd5e3;
  --frist-text: #7a0b34;
  /* Wiki-Bereiche */
  --wiki-anleitung: #e8eef6;
  --wiki-entwicklung: #f3eee5;
  /* Team-Berg */
  --berg-hut: #4f5a56;
  --berg-frei: #5a96df;
  /* Schatten und Abdunkeln */
  --schatten: rgba(0, 0, 0, 0.18);
  --schatten-gross: rgba(0, 0, 0, 0.35);
  --schatten-ring: rgba(0, 0, 0, 0.15);
  --abdunkeln: rgba(0, 0, 0, 0.45);
  --lightbox-grund: rgba(0, 0, 0, 0.85);
  --hover-dunkel: rgba(0, 0, 0, 0.12);
  --hover-hell: rgba(255, 255, 255, 0.55);
  --link: #276650;
}

/* Dunkelmodus: Die Klasse „dunkel“ am <html> setzt js/darstellung-start.js (beim Öffnen) und js/ui/darstellung.js (Schalter).
   Nur am Bildschirm: Gedruckt wird immer hell. Gruppen- und Terminfarben bleiben, die App wählt die Schrift darauf selbst. */
@media screen {
  :root.dunkel {
    color-scheme: dark;
    --gruen: #6cc4a1;
    --gruen-hell: #1d3a30;
    --gruppe: #368469;
    --text: #e3e8e6;
    --text-leise: #a3aeaa;
    /* Hintergrund heller und grauer, damit sich die dunklen Kacheln abheben. Kacheln (--flaeche) bleiben. */
    --hintergrund: #343a38;
    --flaeche: #1b2220;
    --rand: #36423e;
    --flaeche-leise: #161c1a;
    --flaeche-grau: #2a312e;
    --flaeche-zart: #1e2523;
    --spur: #2b3532;
    --spur-zart: #27302d;
    --linie-zart: #2c3633;
    --kaestchen: #2c3633;
    --kaestchen-voll: #66726e;
    --grau-marke: #84908b;
    --grau-hell: #5d6864;
    --tabellenkopf-grau: #3c4643;
    --logo-grund: #f2f5f4;
    --auf-farbe: #ffffff;
    --balken: #0b0f0e;
    --balken-text: #ffffff;
    --fehler: #ff8a80;
    --fehler-flaeche: #3a1f1d;
    --fehler-rand: #6b3430;
    --warnung: #f0a840;
    --warn-flaeche: #33280f;
    --warn-rand: #6b5222;
    --warnung-text: #f3c77a;
    --planung-text: #f0b45a;
    --hinweis-flaeche: #33290f;
    --hinweis-text: #f0bf6a;
    --hinweis-rand: #7a5a1e;
    --kommentar-rand: #c8902a;
    --fuer-dich-flaeche: #3a3010;
    --fuer-dich-rand: #8a7020;
    --fuer-dich-akzent: #f0a020;
    --fuer-dich-linie: #5a4a18;
    --fuer-dich-text: #e8d9a0;
    --gruen-text: #8fd6b8;
    --gruen-aktion: #4cc27f;
    --blau-text: #b3beff;
    --blau-flaeche: #1f2540;
    --blau-flaeche-kraeftig: #262e52;
    --pink: #f060c0;
    --pink-flaeche: #3a1a32;
    --rosa-flaeche: #3a1c28;
    --frist-rosa: #f06292;
    --frist-flaeche: #4a1f30;
    --frist-text: #ffc2d6;
    --wiki-anleitung: #1e2838;
    --wiki-entwicklung: #2e2a22;
    --berg-hut: #a8b3af;
    --berg-frei: #6ea8ef;
    --schatten: rgba(0, 0, 0, 0.5);
    --schatten-gross: rgba(0, 0, 0, 0.6);
    --schatten-ring: rgba(255, 255, 255, 0.15);
    --abdunkeln: rgba(0, 0, 0, 0.6);
    --lightbox-grund: rgba(0, 0, 0, 0.9);
    --hover-dunkel: rgba(0, 0, 0, 0.18);
    --hover-hell: rgba(255, 255, 255, 0.08);
    --link: #6cc4a1;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--hintergrund);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--abstand); }

/* Ladebildschirm beim Start (seit 0.34.9): dunkelgrau mit Logo, bis die App ihre erste Seite zeigt */
.ladebild {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--balken);
}

.ladebild img { width: 160px; height: 160px; }

.laden {
  margin: 0;
  text-align: center;
  color: var(--balken-text);
}