/* ==========================================================================
   AEX Klientenportal — Fundament (Tokens)

   Die EINE Quelle für Schrift, Farben und Maße. portal.css, shell.css und die
   Seiten verwenden nur diese Namen: keine Hex-Werte, keine freien Pixelwerte
   für Schriftgrade, Radien, Abstände oder Schatten.

   Leitlinien (docs/klientenportal-clean-look-brief.md, Emil 15.10.2026):
   • Eine Schrift — Inter, selbst gehostet, gleich auf Windows, Mac, iPhone und
     Android. Stärken 400 / 500 / 600.
   • Schriftgrade 12 · 14 · 16 · 20 · 24, dazu 32 nur für Kennzahlen.
     Bedienelemente und Listen 14, Lesetext 16, nichts unter 12.
   • Abstände aus 4 · 8 · 12 · 16 · 24 · 32 · 48.
   • Radien 6 (Feld, Knopf) · 8 (Karte) · 12 (Popover, Dialog);
     rund nur für Status-Pillen und Avatare.
   • Flächen mit Haarlinie, Schatten nur für Schwebendes.
   • Primärblau für Aktionen und Links, Sekundärblau nur als Akzent,
     Orange nur Warnung, Rot nur Fehler und Löschen.
   • Text mindestens 4,5:1, Feldrahmen und Symbole mindestens 3:1
     (die Werte stehen neben den Farben).
   ========================================================================== */

/* ---------- Schrift: Inter (SIL Open Font License 1.1, assets/fonts/Inter-OFL.txt) ----------
   Variable Schrift in zwei Teilen wie bei Google Fonts: „latin“ deckt Deutsch samt €, „ “ und
   Gedankenstrich ab; „latin-ext“ lädt der Browser nur, wenn ein Name č, ř, ő … enthält. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Palette (Rohwerte — in Seiten-CSS nur über die Rollen weiter unten) ---------- */
:root {
  /* Marke (Corporate Design 14.04.2026) */
  --aex-blue-950: #012a57;   /* Primär, gedrückt */
  --aex-blue-900: #01346B;   /* Primär — Aktionen, Links (12,3:1 auf Weiß) */
  --aex-blue-800: #024a8f;   /* Primär, Hover (8,8:1) */
  --aex-blue-500: #018DB0;   /* Sekundär — nur Akzent: als Schrift auf Weiß zu hell (3,9:1) */
  --aex-blue-300: #7ABED3;   /* Tertiär — zweite Diagrammreihe */
  --aex-blue-100: #d6e9f1;
  --aex-blue-050: #eef5f9;

  /* Neutral: fast reines Grau mit einem Hauch Kühle — kein Blaustich in Tabellen (Emil 23.09.2026) */
  --aex-neutral-000: #ffffff;
  --aex-neutral-025: #fafafb;
  --aex-neutral-050: #f4f5f7;
  --aex-neutral-100: #eceef1;
  --aex-neutral-200: #e1e4e8;
  --aex-neutral-300: #c9cdd3;
  --aex-neutral-400: #868b92;  /* 3,4:1 — Feldrahmen, Symbole */
  --aex-neutral-500: #5f646b;  /* 6,0:1 — gedämpfter Text (5,5:1 auf dem Seitengrund) */
  --aex-neutral-600: #42464d;  /* 9,5:1 */
  --aex-neutral-700: #33363c;
  --aex-neutral-800: #24272c;  /* 15,0:1 — Lesetext */
  --aex-neutral-900: #17191d;  /* 17,6:1 — Überschriften, starke Schrift */

  /* Status — je Ton Schrift, Fläche, Linie; die Schrift erreicht auf ihrer Fläche mindestens 5:1 */
  --aex-green-700: #1c6e4a;  --aex-green-200: #bfe0cd;  --aex-green-050: #e7f4ed;
  --aex-yellow-700: #7a5d00; --aex-yellow-200: #ecdca3; --aex-yellow-050: #fbf3d9;
  --aex-orange-500: #FC700B;  /* Warnung (CD) — nur Balken, Rand, Symbol: als Schrift 2,8:1 */
  --aex-orange-700: #a8470a; --aex-orange-200: #f6caa7; --aex-orange-050: #fff1e6;
  --aex-red-800: #93190f;    --aex-red-700: #b42318;    --aex-red-200: #f3c3be;    --aex-red-050: #fdecea;
  /* Kanzlei-Gelb: was die Kanzlei schreibt oder vorbereitet (Emil 24.09.2026: „Kanzlei gelb, Klient blau“) */
  --aex-gold-800: #6b4a00;   --aex-gold-700: #7a5a12;   --aex-gold-500: #d4a017;   --aex-gold-200: #ecd9a8;   --aex-gold-050: #fdf6e3;

  /* Das Band aus dem AEX-Zeichen (rundes Logo): Primär-, Sekundär- und Tertiärblau — Kante der Seitenleiste und der Anmeldung */
  --marke-band: linear-gradient(90deg, var(--aex-blue-900) 0 62%, var(--aex-blue-500) 62% 84%, var(--aex-blue-300) 84%);
}

/* ---------- Rollen (Hellmodus) ----------
   Das Rechnungsblatt trägt sie selbst: es bleibt auch im Dunkelmodus Papier. */
:root, .kp-rg-papier {
  /* Flächen */
  --bg-app: var(--aex-neutral-050);        /* Seitengrund */
  --bg-surface: var(--aex-neutral-000);    /* Karte, Feld, Leiste */
  --bg-subtle: var(--aex-neutral-025);     /* Kopf, Gruppe und Fuß einer Liste */
  --bg-muted: var(--aex-neutral-100);      /* Spur eines Umschalters, gedeckte Fläche */
  --bg-hover: var(--aex-neutral-050);      /* Zeile unter dem Zeiger */
  --bg-selected: var(--aex-blue-050);      /* gewählte Zeile, aktueller Eintrag */
  --bg-overlay: rgba(23, 25, 29, 0.32);    /* Abdeckung hinter einem Blatt */

  /* Linien */
  --border-subtle: var(--aex-neutral-200);   /* Haarlinie: Karte, Zeile, Trenner */
  --border-default: var(--aex-neutral-300);  /* Zweitknopf, Ablagefläche, kräftiger Trenner */
  --border-control: var(--aex-neutral-400);  /* Eingabefeld, Auswahl, Häkchen (≥ 3:1) */

  /* Schrift */
  --text-strong: var(--aex-neutral-900);
  --text-body: var(--aex-neutral-800);
  --text-secondary: var(--aex-neutral-600);
  --text-muted: var(--aex-neutral-500);
  --text-placeholder: var(--aex-neutral-400);  /* nur Formatbeispiele in leeren Feldern */
  --text-on-action: var(--aex-neutral-000);
  --text-link: var(--aex-blue-900);

  /* Aktion und Akzent */
  --action: var(--aex-blue-900);
  --action-hover: var(--aex-blue-800);
  --action-press: var(--aex-blue-950);
  --action-zahl: rgba(255, 255, 255, 0.25);   /* Zahl auf einem gefüllten Knopf (Vorbereitete freigeben 1) */
  --accent: var(--aex-blue-500);         /* Fortschritt, Diagramm, aktive Markierung — nie Schrift */
  --accent-soft: var(--aex-blue-050);
  --focus: var(--aex-blue-500);          /* Fokusring, 3,9:1 gegen Weiß */
  --danger: var(--aex-red-700);
  --danger-hover: var(--aex-red-800);
  --action-text: var(--aex-blue-900);  /* Schrift in Aktionsfarbe: Zweitknopf, aktiver Eintrag — im Dunkeln heller als die Fläche */
  --danger-text: var(--aex-red-700);   /* Schrift in Gefahrfarbe: „Entwurf löschen“, Entfernen */
  --selection: var(--aex-blue-100);    /* markierter Text */

  /* Status: Pille und Meldung tragen immer Text, nie nur Farbe */
  --status-ok-fg: var(--aex-green-700);       --status-ok-bg: var(--aex-green-050);       --status-ok-line: var(--aex-green-200);
  --status-pruefen-fg: var(--aex-yellow-700); --status-pruefen-bg: var(--aex-yellow-050); --status-pruefen-line: var(--aex-yellow-200);
  --status-warn-fg: var(--aex-orange-700);    --status-warn-bg: var(--aex-orange-050);    --status-warn-line: var(--aex-orange-200);
  --status-warn-mark: var(--aex-orange-500);
  --status-fehler-fg: var(--aex-red-700);     --status-fehler-bg: var(--aex-red-050);     --status-fehler-line: var(--aex-red-200);
  --status-info-fg: var(--aex-blue-900);      --status-info-bg: var(--aex-blue-050);      --status-info-line: var(--aex-blue-100);
  --status-neutral-fg: var(--aex-neutral-600); --status-neutral-bg: var(--aex-neutral-100);
  --status-kanzlei-fg: var(--aex-gold-800);   --status-kanzlei-bg: var(--aex-gold-050);   --status-kanzlei-line: var(--aex-gold-200);
  --status-kanzlei-meta: var(--aex-gold-700); --status-kanzlei-mark: var(--aex-gold-500);

  /* Diagramme (portal.js liest sie beim Zeichnen) — Reihen aus dem Corporate Design: Erlöse Sekundärblau, Aufwand
     Tertiärblau, Ergebnis Primärblau, Vorjahr neutral gestrichelt. Die beiden Balken unterscheiden sich in der Helligkeit,
     das trägt auch bei Farbsehschwäche. Bewusst ohne Orange- und Bronzetöne: die sind Warnungen vorbehalten. */
  --chart-erloese: var(--aex-blue-500);
  --chart-aufwand: var(--aex-blue-300);
  --chart-ergebnis: var(--aex-blue-900);
  --chart-vorjahr: #9aa2ac;
  --chart-schrift: #4d5560;
  --chart-achse: rgba(18, 21, 26, 0.12);
  --chart-gitter: rgba(18, 21, 26, 0.06);
  --chart-null: rgba(18, 21, 26, 0.28);
  --chart-tooltip: #12151a;
  --chart-punkt: #ffffff;
  --chart-spark: rgba(1, 52, 107, 0.35);   /* frühere Monate: Primärblau zurückgenommen, der jüngste in --chart-ergebnis */

  /* Schrift */
  --font-sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;  /* nur Codes und Schlüssel */
  --text-xs: 12px;       /* Spaltenkopf, Meta, Pille */
  --text-sm: 14px;       /* Bedienelemente, Listen, Beschriftungen */
  --text-md: 16px;       /* Lesetext, Kartentitel */
  --text-lg: 20px;       /* Abschnittstitel, große Beträge */
  --text-xl: 24px;       /* Seitentitel */
  --text-display: 32px;  /* nur Kennzahlen */
  --lh-tight: 1.25;
  --lh-text: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radien */
  --radius-sm: 6px;      /* Feld, Knopf, Etikett */
  --radius-md: 8px;      /* Karte */
  --radius-lg: 12px;     /* Popover, Dialog, Blatt */
  --radius-pill: 999px;  /* nur Status-Pille und Avatar */

  /* Schatten — nur für Schwebendes */
  --shadow-pop: 0 8px 24px rgba(23, 25, 29, 0.12), 0 2px 6px rgba(23, 25, 29, 0.06);
  --shadow-paper: 0 1px 3px rgba(23, 25, 29, 0.08), 0 8px 24px rgba(1, 52, 107, 0.08);  /* Rechnungsblatt */

  /* Bedienelemente: Knopf und Feld einer Zeile sind gleich hoch */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-font: var(--text-sm);  /* Schrift in Eingabefeldern; am Handy 16 px — darunter zoomt das iPhone hinein */

  /* Rahmen */
  --side-width: 248px;
  --content-max: 1440px;
  --page-pad: var(--space-6);
  --card-pad: var(--space-5);

  /* Bewegung — ruhig, kurz, ohne Federn */
  --dur-fast: 120ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Handy und schmales Fenster: Daumengröße (≥ 44 px), weniger Rand */
@media (max-width: 900px) {
  :root {
    --control-h: 44px;
    --control-h-sm: 40px;
    --control-font: var(--text-md);
    --page-pad: var(--space-4);
    --card-pad: var(--space-4);
  }
}

/* ---------- Dunkelmodus — folgt der Einstellung des Geräts ----------
   Emil 15.10.2026: „implement dark mode for ALL pages“. Nur am Bildschirm: gedruckt wird immer hell (Statusbericht,
   Auswertungen). Nur Rollen werden umgefärbt; Bausteine und Seiten brauchen keine eigenen Dunkel-Regeln. Das
   Rechnungsblatt bleibt Papier (es trägt die Hell-Rollen selbst, siehe oben). */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg-app: #0b0d11;
    --bg-surface: #12151a;
    --bg-subtle: #1a1e25;
    --bg-muted: #1f242c;
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-selected: rgba(1, 141, 176, 0.16);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.14);
    --border-control: rgba(255, 255, 255, 0.32);
    --text-strong: #f3f5f7;
    --text-body: #d7dce2;
    --text-secondary: #b6bdc6;
    --text-muted: #9aa2ac;
    --text-placeholder: #6b7077;
    --text-link: var(--aex-blue-300);
    --action: #1c6ea8;
    --action-hover: #2a7fbb;
    --action-press: #155a8a;
    /* Abdunkeln statt aufhellen: Weiß auf dem aufgehellten Knopf hatte nur 3,4 : 1, so 8,3 : 1 */
    --action-zahl: rgba(0, 0, 0, 0.25);
    --action-text: var(--aex-blue-300);
    --accent-soft: rgba(1, 141, 176, 0.14);
    --focus: var(--aex-blue-300);
    --danger-text: #f97066;
    --selection: rgba(122, 190, 211, 0.35);
    --status-ok-fg: #5cc596;      --status-ok-bg: rgba(47, 158, 110, 0.16);   --status-ok-line: rgba(47, 158, 110, 0.4);
    --status-pruefen-fg: #e6c14d; --status-pruefen-bg: rgba(217, 163, 0, 0.16); --status-pruefen-line: rgba(217, 163, 0, 0.4);
    --status-warn-fg: #ff9a52;    --status-warn-bg: rgba(252, 112, 11, 0.16); --status-warn-line: rgba(252, 112, 11, 0.4);
    --status-fehler-fg: #f97066;  --status-fehler-bg: rgba(180, 35, 24, 0.2); --status-fehler-line: rgba(249, 112, 102, 0.4);
    --status-info-fg: var(--aex-blue-300); --status-info-bg: rgba(1, 141, 176, 0.14); --status-info-line: rgba(1, 141, 176, 0.3);
    --status-neutral-fg: #b6bdc6; --status-neutral-bg: rgba(255, 255, 255, 0.06);
    --status-kanzlei-fg: #e0b94e; --status-kanzlei-bg: rgba(212, 160, 23, 0.12); --status-kanzlei-line: rgba(212, 160, 23, 0.35);
    --status-kanzlei-meta: #e0b94e;
    /* Wie hell: Erlöse kräftig, Aufwand zurückgenommen, das Ergebnis als hellste Linie darüber */
    --chart-erloese: #22b8de;
    --chart-aufwand: #3f7e99;
    --chart-ergebnis: #dce9f7;
    --chart-vorjahr: #8a929c;
    --chart-schrift: #b6bdc6;
    --chart-achse: rgba(255, 255, 255, 0.14);
    --chart-gitter: rgba(255, 255, 255, 0.06);
    --chart-null: rgba(255, 255, 255, 0.3);
    --chart-tooltip: #2a2f37;
    --chart-punkt: #12151a;
    --chart-spark: rgba(220, 233, 247, 0.3);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}