/* Wunderzwerg - Design-Tokens
   Farbwelt Wunderzwerg, Stand 27.10.2026 (DESIGN.md)
   Kontrast nach WCAG 2.2: Fließtext >= 4,5 : 1, große Schrift und Bedienelemente >= 3 : 1.
   Alle Werte unten sind gerechnet, nicht geschätzt. */

/* Eine Schrift für alles, selbst gehostet, variabel mit Gewichtsachse.
   Literata - TypeTogether für Google, SIL OFL 1.1, github.com/googlefonts/literata, beschnitten auf wght 400-700, opsz fest bei 36
   Zeichenbereich: Latin + Latin-1 Supplement + Latin Extended-A (U+0000-017F), dazu U+2013, U+2014, U+2019, U+201E, U+201C, U+2026, U+2009, U+202F, U+20AC, U+2212 */
@font-face {
  font-family: "NM Literata";
  src: url("../fonts/literata-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* Fraunces nur für Name und Untertitel der Marke. Undercase Type, SIL OFL 1.1, github.com/undercasetype/Fraunces
   Fest eingestellt (Name: wght 500, SOFT 50, opsz 144 · Untertitel kursiv: wght 400, SOFT 50, opsz 14) und auf U+0020-007E, Umlaute, ß und U+2013 beschnitten */
@font-face {
  font-family: "NM Fraunces Marke";
  src: url("../fonts/fraunces-marke.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NM Fraunces Marke";
  src: url("../fonts/fraunces-marke-kursiv.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Farben: Bedeutung statt Farbname. Steinbeige und Waldgrün aus der Marke, Erdbraun als Akzent, Farbe sonst nur aus den Daten */
  --nm-farbe-grund: #efebe3;
  --nm-farbe-flaeche: #e5dfd3;
  --nm-farbe-text: #232c20; /* 12.2 : 1 auf Grund, 10.9 : 1 auf Fläche */
  --nm-farbe-text-leise: #58594a; /* 6.0 : 1 auf Grund, 5.4 : 1 auf Fläche */
  --nm-farbe-akzent: #6b5440; /* 6.0 : 1 auf Grund, 5.3 : 1 auf Fläche · heute, aktuelle Seite */
  --nm-farbe-auf-akzent: #efebe3; /* 6.0 : 1 auf Akzent */
  --nm-farbe-linie: #d6cfc0; /* 1.3 : 1 - nur Trennlinien, nie für Bedienelemente */
  --nm-farbe-linie-stark: #7c7663; /* 3.8 : 1 auf Grund, 3.4 : 1 auf Fläche */
  --nm-farbe-frost: #2c5a82; /* 6.1 : 1 auf Grund, 5.5 : 1 auf Fläche */
  --nm-farbe-frei: #7fa05a; /* nur Flächen in Grafiken, Werte stehen immer auch als Text da */
  --nm-farbe-waerme: #94461f; /* 5.6 : 1 auf Grund, 5.0 : 1 auf Fläche */
  --nm-farbe-wasser: #2a6070; /* 5.9 : 1 auf Grund, 5.3 : 1 auf Fläche */
  --nm-farbe-mond: #6f5418; /* 6.0 : 1 auf Grund, 5.4 : 1 auf Fläche */
  --nm-farbe-wachstum: #45633a; /* 5.7 : 1 auf Grund, 5.1 : 1 auf Fläche */
  --nm-farbe-ernte: #715411; /* 5.9 : 1 auf Grund, 5.3 : 1 auf Fläche */
  --nm-farbe-warnung: #9c2a1c; /* 6.4 : 1 auf Grund, 5.7 : 1 auf Fläche */
  --nm-farbe-werbung: #5d4a85; /* 6.3 : 1 auf Grund, 5.7 : 1 auf Fläche */
  --nm-farbe-fokus: #6b5440; /* 6.0 : 1 auf Grund */

  /* Schrift: Literata für Text, Titel und Zahlen. Im Text Mediävalziffern, in Kennzahlen und Tabellen Versalziffern */
  --nm-schrift-ueberschrift: "NM Literata", "Literata", Georgia, "Times New Roman", serif;
  --nm-schrift-text: var(--nm-schrift-ueberschrift);
  --nm-gewicht-text: 400;
  --nm-gewicht-stark: 600;
  --nm-gewicht-ueberschrift: 500;
  --nm-groesse-0: 0.8125rem; /* 13 px · Kleine Beschriftung in Versalien */
  --nm-groesse-1: clamp(0.9375rem, 0.9155rem + 0.094vw, 1rem); /* 15-16 px · Meta, Quellen, Legenden */
  --nm-groesse-2: clamp(1.0625rem, 1.0405rem + 0.094vw, 1.125rem); /* 17-18 px · Fließtext, Bedienelemente */
  --nm-groesse-3: clamp(1.25rem, 1.1840rem + 0.282vw, 1.4375rem); /* 20-23 px · Zwischentitel h3 */
  --nm-groesse-4: clamp(1.625rem, 1.4489rem + 0.751vw, 2.125rem); /* 26-34 px · Abschnittstitel h2, Kennzahl */
  --nm-groesse-5: clamp(1.875rem, 1.6109rem + 1.127vw, 2.625rem); /* 30-42 px · Antwort */
  --nm-groesse-6: clamp(3.25rem, 2.2817rem + 4.131vw, 6.5rem); /* 52-104 px · Seitentitel h1 */
  --nm-zeilenhoehe-text: 1.6;
  --nm-zeilenhoehe-ueberschrift: 1.12;
  --nm-ziffern: oldstyle-nums proportional-nums;
  --nm-ziffern-wert: lining-nums proportional-nums;
  --nm-ziffern-tabelle: lining-nums tabular-nums;
  --nm-sperrung: 0.07em; /* nur für Beschriftungen in Versalien */

  /* Abstände (4er-Raster) */
  --nm-abstand-1: 0.25rem; /* 4 px */
  --nm-abstand-2: 0.5rem; /* 8 px */
  --nm-abstand-3: 0.75rem; /* 12 px */
  --nm-abstand-4: 1rem; /* 16 px */
  --nm-abstand-5: 1.5rem; /* 24 px */
  --nm-abstand-6: 2rem; /* 32 px */
  --nm-abstand-7: 3rem; /* 48 px */
  --nm-abstand-8: 4rem; /* 64 px */
  --nm-abstand-9: 6rem; /* 96 px */
  --nm-abstand-seite: clamp(1.25rem, 0.75rem + 2.2vw, 3.5rem); /* 20-56 px Seitenrand */
  --nm-abstand-abschnitt: clamp(3rem, 2.2rem + 3.4vw, 5.5rem); /* 48-88 px zwischen Kapiteln */

  /* Rundungen, Linien, Flächen */
  --nm-rundung: 6px; /* Felder und Buttons leicht gerundet, passend zum Federstrich */
  --nm-rundung-klein: 3px;
  --nm-linie: 1px;
  --nm-linie-stark: 1.5px;
  --nm-fokus-ring: 2px solid var(--nm-farbe-fokus);
  --nm-fokus-abstand: 3px;
  --nm-schatten-menue: 0 10px 30px rgb(35 44 32 / 0.14); /* nur aufgeklappte Menüs und Vorschlagslisten */
  --nm-ziel-min: 44px; /* kleinste Tippfläche */
  --nm-inhalt-breite: 77.5rem; /* 1240 px */
  --nm-text-breite: 64ch; /* 60-75 Zeichen */
  --nm-randspalte: 17.5rem; /* 280 px, Titelspalte der Kapitel */
  --nm-bild-aufklappen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358594a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); /* Pfeil der Auswahlliste in text-leise, currentColor wirkt in Hintergrundbildern nicht */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-nm-modus="hell"]) {
    color-scheme: dark;
    --nm-farbe-grund: #2f3b2a;
    --nm-farbe-flaeche: #35422f;
    --nm-farbe-text: #efebe3; /* 9.9 : 1 auf Grund, 9.0 : 1 auf Fläche */
    --nm-farbe-text-leise: #c3c4b1; /* 6.7 : 1 auf Grund, 6.0 : 1 auf Fläche */
    --nm-farbe-akzent: #d0ad62; /* 5.5 : 1 auf Grund, 5.0 : 1 auf Fläche */
    --nm-farbe-auf-akzent: #2f3b2a; /* 5.5 : 1 auf Akzent */
    --nm-farbe-linie: #48573f; /* 1.5 : 1 - nur Trennlinien, nie für Bedienelemente */
    --nm-farbe-linie-stark: #8f9a80; /* 4.0 : 1 auf Grund, 3.6 : 1 auf Fläche */
    --nm-farbe-frost: #a9c8e6; /* 6.8 : 1 auf Grund, 6.1 : 1 auf Fläche */
    --nm-farbe-frei: #7fa05a; /* 4.0 : 1 auf Grund */
    --nm-farbe-waerme: #e6a77a; /* 5.7 : 1 auf Grund, 5.2 : 1 auf Fläche */
    --nm-farbe-wasser: #93cbd6; /* 6.6 : 1 auf Grund, 6.0 : 1 auf Fläche */
    --nm-farbe-mond: #d9b96e; /* 6.2 : 1 auf Grund, 5.6 : 1 auf Fläche */
    --nm-farbe-wachstum: #b9d29b; /* 7.2 : 1 auf Grund, 6.5 : 1 auf Fläche */
    --nm-farbe-ernte: #e2c472; /* 7.0 : 1 auf Grund, 6.3 : 1 auf Fläche */
    --nm-farbe-warnung: #ffaa9c; /* 6.5 : 1 auf Grund, 5.8 : 1 auf Fläche */
    --nm-farbe-werbung: #d3c2f2; /* 7.2 : 1 auf Grund, 6.5 : 1 auf Fläche */
    --nm-farbe-fokus: #d0ad62; /* 5.5 : 1 auf Grund */
    --nm-schatten-menue: 0 10px 30px rgb(20 26 18 / 0.5);
    --nm-bild-aufklappen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3c4b1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* Wahl über den Button im Kopf, gespeichert nur im Browser */
[data-nm-modus="dunkel"] {
  color-scheme: dark;
  --nm-farbe-grund: #2f3b2a;
  --nm-farbe-flaeche: #35422f;
  --nm-farbe-text: #efebe3;
  --nm-farbe-text-leise: #c3c4b1;
  --nm-farbe-akzent: #d0ad62;
  --nm-farbe-auf-akzent: #2f3b2a;
  --nm-farbe-linie: #48573f;
  --nm-farbe-linie-stark: #8f9a80;
  --nm-farbe-frost: #a9c8e6;
  --nm-farbe-frei: #7fa05a;
  --nm-farbe-waerme: #e6a77a;
  --nm-farbe-wasser: #93cbd6;
  --nm-farbe-mond: #d9b96e;
  --nm-farbe-wachstum: #b9d29b;
  --nm-farbe-ernte: #e2c472;
  --nm-farbe-warnung: #ffaa9c;
  --nm-farbe-werbung: #d3c2f2;
  --nm-farbe-fokus: #d0ad62;
  --nm-schatten-menue: 0 10px 30px rgb(20 26 18 / 0.5);
  --nm-bild-aufklappen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3c4b1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}
[data-nm-modus="hell"] {
  color-scheme: light;
  --nm-farbe-grund: #efebe3;
  --nm-farbe-flaeche: #e5dfd3;
  --nm-farbe-text: #232c20;
  --nm-farbe-text-leise: #58594a;
  --nm-farbe-akzent: #6b5440;
  --nm-farbe-auf-akzent: #efebe3;
  --nm-farbe-linie: #d6cfc0;
  --nm-farbe-linie-stark: #7c7663;
  --nm-farbe-frost: #2c5a82;
  --nm-farbe-frei: #7fa05a;
  --nm-farbe-waerme: #94461f;
  --nm-farbe-wasser: #2a6070;
  --nm-farbe-mond: #6f5418;
  --nm-farbe-wachstum: #45633a;
  --nm-farbe-ernte: #715411;
  --nm-farbe-warnung: #9c2a1c;
  --nm-farbe-werbung: #5d4a85;
  --nm-farbe-fokus: #6b5440;
  --nm-schatten-menue: 0 10px 30px rgb(35 44 32 / 0.14);
  --nm-bild-aufklappen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358594a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

/* Wunderzwerg: Farben der Figur aus der Übergabe von Claude Design, nicht ändern. Gelten nur für die inline eingebundenen SVGs */
:root {
  --nm-schrift-marke: "NM Fraunces Marke", "NM Literata", Georgia, serif;
  --wz-line: #3a2e22;
  --wz-cloak: #949886;
  --wz-hood: #6c7561;
  --wz-hood-solid: #717965;
  --wz-face: #2f3b2a;
  --wz-beard: #f8f5ee;
  --wz-leather: #998775;
  --wz-glass: #bfb3a3;
  --wz-staff: #6b5440;
  --wz-stone: #bfb3a3;
  --wz-snow: #faf8f3;
  --wz-gold: #c9a55a;
  --wz-cloud: #ddd8cd;
  --wz-claim: #6b5440; /* 6.0 : 1 auf Grund */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-nm-modus="hell"]) {
    --wz-line: #efebe3;
    --wz-cloak: #4a5940;
    --wz-hood: #3f4d37;
    --wz-hood-solid: #5c6b4f;
    --wz-face: #1e271b;
    --wz-beard: #efebe3;
    --wz-leather: #8c7058;
    --wz-glass: #5a5040;
    --wz-staff: #8c7058;
    --wz-stone: #5a5040;
    --wz-snow: #d9d3c7;
    --wz-cloud: #46503f;
    --wz-claim: #c9a55a; /* 5.1 : 1 auf Grund */
  }
}
[data-nm-modus="dunkel"] {
  --wz-line: #efebe3;
  --wz-cloak: #4a5940;
  --wz-hood: #3f4d37;
  --wz-hood-solid: #5c6b4f;
  --wz-face: #1e271b;
  --wz-beard: #efebe3;
  --wz-leather: #8c7058;
  --wz-glass: #5a5040;
  --wz-staff: #8c7058;
  --wz-stone: #5a5040;
  --wz-snow: #d9d3c7;
  --wz-cloud: #46503f;
  --wz-claim: #c9a55a;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}