/* Klingelfrei · Markenwerte (Designsystem Version 1, Richtung A „Erledigt“, 30.09.2026)
   Eigene Kopie für die Webseite, damit sie ohne das Portal ausgeliefert werden kann. Gleiche Namen und Werte wie
   static/marke.css im Portal (Quelle: tokens.json des Designsystems). Hell ist die Vorgabe; Abschnitte mit
   data-thema="dunkel" bekommen die Werte des dunklen Themas. Kontraste nach WCAG 2.2 AA in beiden Themen.
   Regeln: Messing auf hellem Grund nie als Schrift (dafür akzent bzw. marke-messing-dunkel), notfall nur für
   Dringendes, Farbe nie allein als Signal. */

:root {
  /* Marke, in beiden Themen gleich */
  --marke-tinte: #16202E;
  --marke-tinte-tief: #0F1722;
  --marke-messing: #C9973F;
  --marke-messing-dunkel: #7A5716;
  --marke-messing-hell: #E3C58E;
  --marke-leinen: #F6F3EC;
  --marke-leinen-tief: #ECE7DC;

  /* Thema hell */
  --grund: #F6F3EC;
  --flaeche: #FFFFFF;
  --flaeche-2: #ECE7DC;
  --text: #16202E;
  --text-2: #4A5261;
  --linie: #E3DED2;
  --akzent: #7A5716;
  --knopf: #16202E;
  --knopf-text: #F6F3EC;
  --fokus: #7A5716;
  --notfall: #B42318;
  --notfall-text: #B42318;
  --notfall-grund: #FDECEA;
  --erledigt: #1F7A3E;
  --erledigt-text: #1F7A3E;
  --kat-termin: #2F5D8A;
  --kat-angebot: #6B4E9B;
  --kat-rechnung: #7A5716;
  --kat-sonstiges: #5B6472;
  --schatten-karte: 0 1px 2px rgba(22, 32, 46, 0.06), 0 8px 24px rgba(22, 32, 46, 0.08);
  --schatten-hoch: 0 12px 40px rgba(22, 32, 46, 0.18);

  /* Abstände (Grundschritt 4 px) */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --abstand-8: 64px;
  --abstand-9: 96px;

  /* Ecken */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-rund: 999px;
  --radius-symbol: 22%;

  /* Schriften (selbst gehostet, siehe seite.css); „… Ersatz“ ist Arial mit angeglichenen Maßen gegen Springen */
  --font-anzeige: "Schibsted Grotesk", "Schibsted Ersatz", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Ersatz", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Thema dunkel */
[data-thema="dunkel"] {
  --grund: #0F1722;
  --flaeche: #16202E;
  --flaeche-2: #1D2A3B;
  --text: #F6F3EC;
  --text-2: #C9D0DA;
  --linie: #2A3749;
  --akzent: #C9973F;
  --knopf: #C9973F;
  --knopf-text: #16202E;
  --fokus: #E3C58E;
  --notfall-text: #F97066;
  --notfall-grund: #3A1A1A;
  --erledigt-text: #5BC77E;
  --kat-termin: #7FA7D6;
  --kat-angebot: #B39DDB;
  --kat-rechnung: #E3C58E;
  --kat-sonstiges: #AEB6C2;
  --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35);
  --schatten-hoch: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* Helle Karten in dunklen Abschnitten (etwa die Anliegenkarte im Feierabend): wieder hell */
[data-thema="hell"] {
  --grund: #F6F3EC;
  --flaeche: #FFFFFF;
  --flaeche-2: #ECE7DC;
  --text: #16202E;
  --text-2: #4A5261;
  --linie: #E3DED2;
  --akzent: #7A5716;
  --knopf: #16202E;
  --knopf-text: #F6F3EC;
  --fokus: #7A5716;
  --notfall-text: #B42318;
  --notfall-grund: #FDECEA;
  --erledigt-text: #1F7A3E;
  --kat-termin: #2F5D8A;
  --kat-angebot: #6B4E9B;
  --kat-rechnung: #7A5716;
  --kat-sonstiges: #5B6472;
  --schatten-karte: 0 1px 2px rgba(22, 32, 46, 0.06), 0 8px 24px rgba(22, 32, 46, 0.08);
  --schatten-hoch: 0 12px 40px rgba(22, 32, 46, 0.18);
}