/* =========================================================================
   Klaredo – Design-Tokens  ·  Richtung A „Werkbank“ in Brombeere
   Stand: 28.09.2026 (Entwurf) · ergänzt um Dunkelmodus-Regeln
   Alle Text-Farbkombinationen erfüllen WCAG 2.1 AA (Text ≥ 4,5 : 1,
   Rahmen von Bedienelementen ≥ 3 : 1) – hell und dunkel nachgerechnet.
   ========================================================================= */

/* ---------- Schriften: selbst gehostet (SIL Open Font License) ---------- */
@font-face { font-family: "Zilla Slab"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/zilla-slab-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/zilla-slab-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* ---------- Farben: hell (Standard) ---------- */
  --kl-text:          #2E2A24;  /* Leinöl – Fließtext, Überschriften (14 : 1)   */
  --kl-text-2:        #6B6255;  /* Nebentext, Hinweise (5,9 : 1)                */
  --kl-bg:            #FFFDF8;  /* Papier – Seitenhintergrund                   */
  --kl-surface:       #FFFFFF;  /* Karten, Formulare                            */
  --kl-surface-2:     #F7F3EC;  /* Dialoge, Menüs, hervorgehobene Bereiche     */
  --kl-border:        #8C8274;  /* Rahmen von Eingabefeldern (3,7 : 1)          */
  --kl-divider:       #E7E1D6;  /* Trennlinien (rein dekorativ)                 */

  --kl-brand:         #7A2F55;  /* Brombeere – Knöpfe, Links, Logo-Punkt        */
  --kl-brand-hover:   #652646;
  --kl-brand-fill:    #7A2F55;  /* Knöpfe, Kopfleiste (bei Kundenfarben ggf. ≠ brand) */
  --kl-brand-fill-hover: #652646;
  --kl-brand-fill-border: transparent; /* Rand bei sehr hellen Kundenfarben */
  --kl-brand-soft:    #F4E6EC;  /* Hinterlegung, aktiver Menüpunkt              */
  --kl-on-brand:      #FFFDF8;  /* Schrift auf Brombeere                        */
  --kl-mark-tile:     #7A2F55;  /* Kachel des Zeichens „k.“                     */
  --kl-mark-fg:       #FFFDF8;  /* „k.“ auf der Kachel                          */

  --kl-success:       #1F7A48;  --kl-success-soft: #E6F4EC;
  --kl-warning:       #8A5300;  --kl-warning-soft: #FFF3D6;
  --kl-danger:        #B3261E;  --kl-danger-soft:  #FDECEA;
  --kl-info:          #2563A6;  --kl-info-soft:    #E7EFF9;

  --kl-focus:         #7A2F55;  /* Fokusrahmen: 2 px + 2 px Abstand             */

  /* ---------- Produktakzente (nur dezent: Produktkopf, Kennzeichnung) ---- */
  --kl-acc-ferien:    #2563A6;
  --kl-acc-kunden:    #0E6A6B;
  --kl-acc-immo:      #A34A28;
  --kl-acc-belege:    #4A5A6B;
  --kl-acc-verein:    #55652F;
  --kl-accent:        var(--kl-brand);   /* wird je Produkt überschrieben     */

  /* ---------- Typografie ---------- */
  --kl-font-head: "Zilla Slab", Georgia, "Times New Roman", serif;
  --kl-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --kl-fs-xs:   0.875rem;  /* 14 px – Kleingedrucktes; nie kleiner            */
  --kl-fs-s:    0.9375rem; /* 15 px – Tabellen, Nebentext                     */
  --kl-fs-m:    1rem;      /* 16 px – Fließtext (Basis)                       */
  --kl-fs-l:    1.125rem;  /* 18 px – hervorgehobener Text                    */
  --kl-fs-h4:   1.25rem;   /* 20 px                                           */
  --kl-fs-h3:   1.5rem;    /* 24 px                                           */
  --kl-fs-h2:   1.875rem;  /* 30 px                                           */
  --kl-fs-h1:   2.375rem;  /* 38 px                                           */
  --kl-lh-text: 1.55;
  --kl-lh-head: 1.15;

  /* ---------- Abstände (4er-Raster) ---------- */
  --kl-space-1: 4px;   --kl-space-2: 8px;   --kl-space-3: 12px;  --kl-space-4: 16px;
  --kl-space-5: 24px;  --kl-space-6: 32px;  --kl-space-7: 48px;  --kl-space-8: 64px;

  /* ---------- Formen ---------- */
  --kl-radius-s: 4px;    /* Badges, kleine Marken                  */
  --kl-radius-m: 8px;    /* Knöpfe, Eingabefelder                  */
  --kl-radius-l: 12px;   /* Karten, Dialoge                        */
  --kl-shadow:   0 1px 2px rgba(46,42,36,.10), 0 2px 8px rgba(46,42,36,.06);
  --kl-tap:      44px;   /* Mindesthöhe klickbarer Elemente        */
}

/* ---------- Farben: dunkel ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kl-text: #F3EEE4; --kl-text-2: #B8AE9E; --kl-bg: #1E1B17; --kl-surface: #2A2620; --kl-surface-2: #353028; --kl-mark-tile: #E3A3C4; --kl-mark-fg: #1E1B17;
    --kl-border: #857B6D; --kl-divider: #3A352D;
    --kl-brand: #E3A3C4; --kl-brand-hover: #EDBBD4; --kl-brand-fill: #E3A3C4; --kl-brand-fill-hover: #EDBBD4; --kl-brand-soft: #3A2230; --kl-on-brand: #1E1B17;
    --kl-success: #7FD3A1; --kl-success-soft: #16301F;
    --kl-warning: #F2C069; --kl-warning-soft: #33280F;
    --kl-danger:  #FF9A8F; --kl-danger-soft:  #3A1B18;
    --kl-info:    #8DB8EC; --kl-info-soft:    #172536;
    --kl-focus:   #E3A3C4;
    --kl-acc-ferien: #8DB8EC; --kl-acc-kunden: #7FC8C4; --kl-acc-immo: #F0A078;
    --kl-acc-belege: #A9B7C6; --kl-acc-verein: #B5C98A;
    --kl-shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --kl-text: #F3EEE4; --kl-text-2: #B8AE9E; --kl-bg: #1E1B17; --kl-surface: #2A2620; --kl-surface-2: #353028; --kl-mark-tile: #E3A3C4; --kl-mark-fg: #1E1B17;
  --kl-border: #857B6D; --kl-divider: #3A352D;
  --kl-brand: #E3A3C4; --kl-brand-hover: #EDBBD4; --kl-brand-fill: #E3A3C4; --kl-brand-fill-hover: #EDBBD4; --kl-brand-soft: #3A2230; --kl-on-brand: #1E1B17;
  --kl-success: #7FD3A1; --kl-success-soft: #16301F;
  --kl-warning: #F2C069; --kl-warning-soft: #33280F;
  --kl-danger:  #FF9A8F; --kl-danger-soft:  #3A1B18;
  --kl-info:    #8DB8EC; --kl-info-soft:    #172536;
  --kl-focus:   #E3A3C4;
  --kl-acc-ferien: #8DB8EC; --kl-acc-kunden: #7FC8C4; --kl-acc-immo: #F0A078;
  --kl-acc-belege: #A9B7C6; --kl-acc-verein: #B5C98A;
  --kl-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* ---------- Produkt wählen: <html data-produkt="ferien"> ---------- */
[data-produkt="ferien"] { --kl-accent: var(--kl-acc-ferien); }
[data-produkt="kunden"] { --kl-accent: var(--kl-acc-kunden); }
[data-produkt="immo"]   { --kl-accent: var(--kl-acc-immo);   }
[data-produkt="belege"] { --kl-accent: var(--kl-acc-belege); }
[data-produkt="verein"] { --kl-accent: var(--kl-acc-verein); }

/* ---------- Kunden-Branding ----------
   Je Instanz wird beim Speichern der Einstellungen eine theme.css aus der Kundenfarbe
   erzeugt (klaredo-theme.ts → themeToCss) und NACH dieser Datei eingebunden.
   Sie überschreibt nur --kl-brand*, --kl-on-brand, --kl-focus, --kl-mark-*.
   In kundengebrandeten Bereichen: Überschriften in --kl-font-body (keine Zilla Slab). */
[data-kundenmarke] h1, [data-kundenmarke] h2, [data-kundenmarke] h3 { font-family: var(--kl-font-body); font-weight: 600; }

/* ---------- Grundstile (optional) ---------- */
body { margin: 0; background: var(--kl-bg); color: var(--kl-text);
  font: var(--kl-fs-m)/var(--kl-lh-text) var(--kl-font-body); }
h1, h2, h3 { font-family: var(--kl-font-head); font-weight: 700; line-height: var(--kl-lh-head); }
h1 { font-size: var(--kl-fs-h1); } h2 { font-size: var(--kl-fs-h2); } h3 { font-size: var(--kl-fs-h3); }
h4 { font-family: var(--kl-font-body); font-weight: 600; font-size: var(--kl-fs-h4); }
a { color: var(--kl-brand); text-underline-offset: 2px; }
.kl-num, td.kl-betrag { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--kl-focus); outline-offset: 2px; }

.kl-button { min-height: var(--kl-tap); padding: 0 var(--kl-space-5);
  border-radius: var(--kl-radius-m); background: var(--kl-brand-fill); color: var(--kl-on-brand);
  border: 1px solid var(--kl-brand-fill-border); font: 600 var(--kl-fs-m) var(--kl-font-body); cursor: pointer; }
.kl-button:hover { background: var(--kl-brand-fill-hover); }
.kl-input { min-height: var(--kl-tap); padding: 0 var(--kl-space-3); border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius-m); background: var(--kl-surface); color: var(--kl-text); font: inherit; }

/* Produktkopf: dezenter Akzent als 4-px-Linie oben + Produktname in Akzentfarbe */
.kl-produktkopf { border-top: 4px solid var(--kl-accent); background: var(--kl-surface); }
.kl-produktkopf .kl-produktname { color: var(--kl-accent); font-family: var(--kl-font-head); font-weight: 500; }