/* lebenszeichen – Design-Tokens (Redesign 2026-10)
   Einbinden VOR lz-ui.css und VOR der bisherigen styles.css.
   Modus: <html data-theme="light|dark">. Ohne Attribut folgt die Seite dem System (prefers-color-scheme).
   Markenfarben (Indigo, Mint, Koralle, Ink) sind unverändert aus styles.css / logo.svg übernommen.
   Standard: Desktop startet HELL, Mobilgeräte folgen dem System (gesetzt im Head-Snippet + theme.js). */

/* Inter selbst gehostet (DSGVO – keine Anfragen an Google). Dateien: siehe README §4.3 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
}

:root,
:root[data-theme="light"] {
  /* Flächen */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --surface-sunken: #f9fafc;
  --line: #dfe4ed;
  --line-soft: #eef1f6;
  --line-strong: #cfd6e3;

  /* Text */
  --ink: #18233f;          /* Titel, starke Texte */
  --text: #39445d;         /* Fließtext */
  --text-2: #4b5670;       /* Sekundär, auf getönten Flächen */
  --muted: #6f7890;        /* Hilfetexte, Meta */

  /* Marke */
  --brand-bg: #18233f;     /* dunkle Markenflächen (Statuskarte, dunkle Buttons) */
  --nav-bg: #18233f;       /* Admin-Seitenleiste */
  --primary: #4255d4;      /* Primäraktion, in beiden Modi gleich */
  --primary-hover: #2f3eaa;
  --link: #4255d4;
  --primary-soft: #edf0ff;
  --primary-soft-2: #f7f8ff;
  --primary-text: #2f3eaa;
  --primary-line: #c9d0f5;

  /* Status – *-dot sind in beiden Modi gleich, *-text/*-soft wechseln */
  --ok-dot: #19a974;       --ok-soft: #e7f8f1;      --ok-text: #0b7a52;      --ok-text-strong: #0b5a3d;
  --warning-dot: #d99222;  --warning-soft: #fff7e5; --warning-text: #8a5a00; --warning-text-strong: #6b4600;
  --danger-dot: #d84d5e;   --danger-soft: #fff0f2;  --danger-text: #b3283c;  --danger-text-strong: #8f1f30; --danger-line: #e7a3ad;
  --neutral-dot: #8d98b4;
  --coral: #f06f55;        --coral-soft: #fff0ed;   --coral-text: #b8432c;
  --mint-logo: #6ee7b7;    /* nur auf dunklen Flächen */
  --track: #e3e8f1;        /* leere Ablaufstufe */

  /* Form */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow-sm: 0 1px 3px rgba(24, 35, 63, .12);
  --shadow: 0 10px 24px rgba(24, 35, 63, .08);
  --shadow-lg: 0 30px 70px rgba(24, 35, 63, .12);
  --shadow-primary: 0 8px 20px rgba(66, 85, 212, .22);

  /* Typo */
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-xs: .75rem;   /* 12 */
  --fs-sm: .8125rem; /* 13 */
  --fs-base: .875rem;/* 14 – Admin */
  --fs-md: 1rem;     /* 16 – Kundenbereich */
  --fs-lg: 1.0625rem;/* 17 – Kartentitel */
  --fs-xl: 1.75rem;  /* 28 – Seitentitel Admin */
  --fs-2xl: 2rem;    /* 32 – Seitentitel Portal */

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

  --touch: 44px;     /* Mindestgröße klickbarer Elemente */
  --sidebar-w: 248px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d1322;
  --surface: #151d33;
  --surface-2: #1c2640;
  --surface-sunken: #121a2e;
  --line: #2a3553;
  --line-soft: #222c47;
  --line-strong: #3a4669;
  --ink: #eef1f8;
  --text: #c4cbdc;
  --text-2: #a9b2c8;
  --muted: #8f99b3;
  --brand-bg: #1f2b4f;
  --nav-bg: #0a0f1c;
  --link: #9aa6ff;
  --primary-soft: #1f2a5a;
  --primary-soft-2: #1a2350;
  --primary-text: #aab4ff;
  --primary-line: #3b4aa8;
  --ok-soft: #0f2e26;      --ok-text: #5fd6a6;      --ok-text-strong: #7ee2b8;
  --warning-soft: #33270d; --warning-text: #f0b85a; --warning-text-strong: #f5c879;
  --danger-soft: #3a1720;  --danger-text: #ff9aa8;  --danger-text-strong: #ffb3bd; --danger-line: #6b2a36;
  --coral-soft: #3a1f19;   --coral-text: #ffa58f;
  --track: #26304b;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow: 0 10px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Systemeinstellung – greift nur, wenn kein data-theme gesetzt ist (Mobilgeräte ohne eigene Wahl) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1322;
    --surface: #151d33;
    --surface-2: #1c2640;
    --surface-sunken: #121a2e;
    --line: #2a3553;
    --line-soft: #222c47;
    --line-strong: #3a4669;
    --ink: #eef1f8;
    --text: #c4cbdc;
    --text-2: #a9b2c8;
    --muted: #8f99b3;
    --brand-bg: #1f2b4f;
    --nav-bg: #0a0f1c;
    --link: #9aa6ff;
    --primary-soft: #1f2a5a;
    --primary-soft-2: #1a2350;
    --primary-text: #aab4ff;
    --primary-line: #3b4aa8;
    --ok-soft: #0f2e26;      --ok-text: #5fd6a6;      --ok-text-strong: #7ee2b8;
    --warning-soft: #33270d; --warning-text: #f0b85a; --warning-text-strong: #f5c879;
    --danger-soft: #3a1720;  --danger-text: #ff9aa8;  --danger-text-strong: #ffb3bd; --danger-line: #6b2a36;
    --coral-soft: #3a1f19;   --coral-text: #ffa58f;
    --track: #26304b;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow: 0 10px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

/* Mein Bereich 2.0 */
:root, :root[data-theme="light"] {
  /* ruhige Flächen ohne Zustand: Tarif, Vorschau, leere Zustände, „Erwartet“ */
  --tint-bg: #eff3ff;
  --tint-line: #d3dbfa;
  --tint-blob: #e2e8fe;

  /* Heute-Karte je Zustand; Hintergrundform = jeweiliges *-soft mit opacity .7 */
  --ok-tint: #e9f7ef;       --ok-tint-line: #b5e0c8;
  --warning-tint: #fff4da;  --warning-tint-line: #ebcd85;
  --danger-tint: #fdeef1;   --danger-tint-line: #eebcc6;
  --pause-tint: #eff2f7;    --pause-tint-line: #d3dae6;

  --sim-soft: #f2eeff;    /* Testmodus / simulierte Ereignisse */
  --sim-text: #5636b0;
  --sim-line: #c9bcf3;
  --focus: #d9542f;       /* Fokusring 3 px, Abstand 3 px */

  /* geändert für Lesbarkeit (bisher in Klammern) */
  --muted: #5d6782;       /* (#6f7890) */
  --line-strong: #b9c2d3; /* (#cfd6e3) */
  --ok-dot: #16875c;      /* (#19a974) – auch mit weißem Haken lesbar */
  --warning-dot: #b77700; /* (#d99222) */
  --danger-dot: #c4374b;  /* (#d84d5e) */
}
:root[data-theme="dark"] {
  --tint-bg: #18224a;
  --tint-line: #33418a;
  --tint-blob: #1f2b5c;
  --ok-tint: #0f2a21;       --ok-tint-line: #25593f;
  --warning-tint: #2a200b;  --warning-tint-line: #5e4818;
  --danger-tint: #2e1520;   --danger-tint-line: #6b2c3c;
  --pause-tint: #19233c;    --pause-tint-line: #34405f;
  --sim-soft: #251d45;
  --sim-text: #cbbcff;
  --sim-line: #4a3b8a;
  --focus: #ff9a7d;
  --muted: #9aa3bb;       /* (#8f99b3) */
  --line-strong: #46537a; /* (#3a4669) */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --tint-bg: #18224a;
  --tint-line: #33418a;
  --tint-blob: #1f2b5c;
  --ok-tint: #0f2a21;       --ok-tint-line: #25593f;
  --warning-tint: #2a200b;  --warning-tint-line: #5e4818;
  --danger-tint: #2e1520;   --danger-tint-line: #6b2c3c;
  --pause-tint: #19233c;    --pause-tint-line: #34405f;
  --sim-soft: #251d45;
  --sim-text: #cbbcff;
  --sim-line: #4a3b8a;
  --focus: #ff9a7d;
  --muted: #9aa3bb;       /* (#8f99b3) */
  --line-strong: #46537a; /* (#3a4669) */
} }