/* Die drei Designs. Umschalten über <html data-design="natuerlich|hell|dunkel">. */

/* Variante 1 – Natürlich: Moosgrün, Erdbraun, Pergament. Ruhig, Revier-Charakter. */
html[data-design="natuerlich"] {
  --bg: #f1ece0;
  --flaeche: #fbf8f1;
  --flaeche2: #e8e1d0;
  --text: #2a2a1f;
  --text2: #6d6650;
  --linie: #ddd3bd;
  --akzent: #3e5e2b;
  --akzent-text: #f6f2e6;
  --akzent2: #9a6331;
  --link: #3e5e2b;
  --ok: #4f7a28;
  --warn: #c48a1a;
  --gefahr: #a8362a;
  --radius: 12px;
  --radius-klein: 8px;
  --radius-knopf: 10px;
  --schatten: 0 1px 0 rgba(60,45,20,.06);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-titel: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --kopf-bg: #2f4721;
  --kopf-text: #f3eedf;
  --kopf-schatten: 0 2px 0 #24371a;
  --nav-bg: #fbf8f1;
  --nav-aktiv: #3e5e2b;
  --avatar-bg: #c9a46a;
  --avatar-text: #2a2a1f;
  --zahl-farbe: #3e5e2b;
  --nav-desk-aktiv-bg: rgba(243,238,223,.16);
  --login-bg:
    radial-gradient(ellipse at 20% 0%, rgba(201,164,106,.35), transparent 55%),
    linear-gradient(170deg, #2f4721 0%, #3f5a2c 45%, #5b4a2e 100%);
  --login-fuss: #e9e2cf;
  --logo-bg: #f3eedf;
  --logo-fg: #2f4721;
}
html[data-design="natuerlich"] .kopf .marke svg rect { fill: #f3eedf; }
html[data-design="natuerlich"] .kopf .marke svg path { fill: #2f4721; }
html[data-design="natuerlich"] .kachel h2, html[data-design="natuerlich"] .panel-kopf h2 { color: #2f4721; }
html[data-design="natuerlich"] .knopf.primaer { box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
html[data-design="natuerlich"] .zahl { border-left: 4px solid #c9a46a; }

/* Variante 2 – Modern und hell: viel Weiß, klare Karten, sachlich. */
html[data-design="hell"] {
  --bg: #f4f6f8;
  --flaeche: #ffffff;
  --flaeche2: #eef1f4;
  --text: #121a24;
  --text2: #5c6776;
  --linie: #e4e8ee;
  --akzent: #127a55;
  --akzent-text: #ffffff;
  --akzent2: #e08a12;
  --ok: #138a5a;
  --warn: #d98a0b;
  --gefahr: #d23b30;
  --radius: 16px;
  --radius-klein: 10px;
  --radius-knopf: 12px;
  --schatten: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.05);
  --kachel-rand: 1px solid transparent;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-titel: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --titel-gewicht: 750;
  --kopf-bg: rgba(255,255,255,.92);
  --kopf-text: #121a24;
  --kopf-linie: 1px solid #e4e8ee;
  --nav-bg: #ffffff;
  --avatar-bg: #e6f3ee;
  --avatar-text: #127a55;
  --nav-desk-aktiv-bg: #e6f3ee;
  --nav-desk-aktiv: #127a55;
  --login-bg: linear-gradient(180deg, #ffffff 0%, #eef3f1 100%);
  --login-schatten: 0 1px 2px rgba(16,24,40,.05), 0 20px 50px rgba(16,24,40,.08);
}
html[data-design="hell"] .kopf { backdrop-filter: saturate(1.4) blur(10px); }
html[data-design="hell"] .kopf .marke svg rect { fill: #127a55; }
html[data-design="hell"] .kopf .marke svg path { fill: #fff; }
html[data-design="hell"] .login-marke svg rect { fill: #127a55; }
html[data-design="hell"] .login-marke svg path { fill: #fff; }
html[data-design="hell"] h1 { letter-spacing: -.02em; }
html[data-design="hell"] .knopf:not(.primaer):not(.gefahr) { background: #fff; }
html[data-design="hell"] .zahl b { font-weight: 800; }
html[data-design="hell"] nav.unten .aktiv svg.i { background: #e6f3ee; border-radius: 99px; width: 52px; padding: 2px 13px; box-sizing: content-box; }

/* Variante 3 – Dunkel: für Dämmerung und Ansitz. Warmes Bernstein statt grellem Weiß,
   hoher Kontrast, etwas größere Schrift. Zusätzlich Rotlicht-Schalter (schont das Nachtsehen). */
html[data-design="dunkel"] {
  color-scheme: dark;
  --schrift: 17px;
  --bg: #0d100f;
  --flaeche: #161b19;
  --flaeche2: #1f2623;
  --text: #e7e9e3;
  --text2: #9ba59f;
  --linie: #29322e;
  --akzent: #e3a63b;
  --akzent-text: #1b1305;
  --akzent2: #e3a63b;
  --link: #f0b955;
  --ok: #7fbf6a;
  --warn: #e3a63b;
  --gefahr: #ff6b5b;
  --radius: 14px;
  --radius-klein: 10px;
  --radius-knopf: 12px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-titel: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --kopf-bg: #0d100f;
  --kopf-text: #e7e9e3;
  --kopf-linie: 1px solid #1f2623;
  --nav-bg: #111513;
  --avatar-bg: #2b2414;
  --avatar-text: #e3a63b;
  --eingabe-bg: #0f1311;
  --eingabe-rand: #333d38;
  --karte-filter: brightness(.62) contrast(1.1) saturate(.75);
  --nav-desk-aktiv-bg: #2b2414;
  --nav-desk-aktiv: #e3a63b;
  --login-bg: radial-gradient(ellipse at 50% -10%, #1d2621 0%, #0d100f 60%);
  --login-schatten: 0 0 0 1px #222a26, 0 30px 80px rgba(0,0,0,.6);
}
html[data-design="dunkel"] .kopf .marke svg rect, html[data-design="dunkel"] .login-marke svg rect { fill: #e3a63b; }
html[data-design="dunkel"] .kopf .marke svg path, html[data-design="dunkel"] .login-marke svg path { fill: #0d100f; }
html[data-design="dunkel"] .knopf.stern-an { background: #e3a63b; border-color: #e3a63b; color: #1b1305; }
html[data-design="dunkel"] .toast { background: #e3a63b; color: #1b1305; }
html[data-design="dunkel"] .auswahl-leiste { background: #e7e9e3; }
html[data-design="dunkel"] .leaflet-control-attribution { background: rgba(13,16,15,.75) !important; color: #9ba59f !important; }
html[data-design="dunkel"] .leaflet-control-attribution a { color: #c9a35a !important; }
html[data-design="dunkel"] .leaflet-bar a { background: #161b19 !important; color: #e7e9e3 !important; border-color: #29322e !important; }