/* ============================================================
   Oberflaechen-Standard – Fassung 2.21.1, 19.10.2026
   In einem Projekt liegt genau EINE Form dieses Standards:
   entweder das Paket oder die losen Dateien, nie beides.
   ============================================================ */

/* ============================================================
   tokens.css – Grundwerte des Oberflaechen-Standards
   Keine Komponente definiert eigene Farben oder Abstaende.
   Alles laeuft ueber diese Variablen, sonst funktioniert
   weder der Dunkelmodus noch eine spaetere Anpassung.
   ============================================================ */

:root {
  /* --- Abstaende: Vierer-Basis, acht Stufen ---------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Typografie ------------------------------------------ */
  --font-family: "Source Sans 3", "Source Sans Pro", "Open Sans",
                 system-ui, sans-serif;
  /* Kennungsschrift: was man abliest und weitergibt (Nummern,
     IBAN, Referenzen, Dateinamen). Aus derselben Familie wie die
     Textschrift; lokal einbinden wie diese. */
  --font-mono: "Source Code Pro", ui-monospace, "Cascadia Mono",
               Menlo, Consolas, monospace;

  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-2xl: 32px;

  --line-body: 1.5;
  --line-heading: 1.25;

  --weight-normal: 400;
  --weight-bold: 600;

  /* --- Farben: Leitfarbe ----------------------------------- */
  --color-primary: #17203f;
  --color-primary-hover: #232e56;
  --color-primary-soft: #e9ebf2;
  --color-primary-text: #ffffff;

  /* --- Farben: Status (gedaempft, auf das Blau abgestimmt) -- */
  --color-success: #2f6b4f;
  --color-success-soft: #e7f1ec;
  --color-warning: #8a6520;
  --color-warning-soft: #f7efe0;
  --color-danger: #99342f;
  --color-danger-soft: #f8e9e8;

  /* --- Farben: Neutral ------------------------------------- */
  --color-bg: #ffffff;
  --color-bg-subtle: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  /* --color-border umrandet Trennlinien und Flaechen: 1.38:1
     gegen Weiss. Das ist ein aufgeschriebener Nichtbefund –
     Trennlinien sind keine Bedienelemente und fallen nicht
     unter SC 1.4.11. Nicht "mitkorrigieren". */
  --color-border: #d8dce3;
  /* --color-border-strong umrandet Bedienelemente
     (.field__input, .btn--secondary) und muss deshalb 3:1
     erreichen: 3.39:1 gegen die Karte, 3.14:1 gegen den
     gedaempften Grund. */
  --color-border-strong: #868c94;
  --color-text: #1c1f24;
  --color-text-muted: #5b626d;
  --color-text-inverse: #ffffff;

  /* --- Verweise --------------------------------------------
     Beide Zustaende gehoeren entschieden, sonst faerbt der
     Browser :visited violett – im Dunkelmodus auf Anthrazit.
     An :visited sind ohnehin nur Farbeigenschaften erlaubt. */
  --color-link: #1b4f9c;
  --color-link-visited: #5b3c8e;

  /* --- Fokus ----------------------------------------------- */
  --color-focus: #1b6bd4;
  --focus-ring: 0 0 0 3px rgba(27, 107, 212, 0.45);

  /* --- Radien und Schatten --------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.18);

  /* --- Layoutmasse ----------------------------------------- */
  --sidebar-width: 240px;
  /* Linke Kante der festen Leisten. Ohne Seitenleiste 0 – der
     Wert stellt sich unten selbst um, sobald eine da ist. */
  --bar-left: 0px;
  --sidebar-width-icons: 56px;
  --header-height: 56px;
  --row-height: 44px;          /* feste Tabellenzeilenhoehe, einzeilig */
  --row-height-2: 64px;        /* dieselbe, zweizeilig */
  /* Eigener Wert, damit eine Dichteschicht die Zeilenhoehe
     aendern kann, ohne den Skelettbalken mitzuziehen. */
  --skeleton-height: 16px;
  --touch-target: 40px;        /* Mindestgroesse Trefferflaeche */
  --main-action-height: 64px;  /* Haupthandlung, siehe .btn--main */
  --content-max-width: 1280px;
  /* Hoechstens so viele Zeilen zeigt ein .codeblock, dann rollt
     er. Dreissig Rahmen eines Aufrufstapels sagen nicht mehr als
     die ersten zehn. */
  --codeblock-lines: 10;

  /* Hoehe der eingeblendeten unteren Leiste (Mehrfachauswahl
     oder Speichern-Leiste). Wird zur Laufzeit gesetzt, Toasts
     legen sich darueber. */
  --bottombar-height: 0px;

  /* Hoehe der klebenden Filterzeile. Der Tabellenkopf klebt
     darunter, nicht darauf. Wird zur Laufzeit gesetzt. */
  --filterbar-height: 0px;

  /* --- Bewegung -------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* --- Ebenen ---------------------------------------------- */
  --z-sidebar: 30;
  --z-header: 40;
  --z-bottombar: 50;
  --z-modal: 60;
  --z-toast: 70;
}

/* ============================================================
   Dunkelmodus – nur Variablenwerte, keine Sonderregeln
   in den Komponenten. Flaechen werden dunkelgrau statt
   schwarz, Statusfarben werden aufgehellt.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #8fa1d8;
    --color-primary-hover: #a6b5e3;
    --color-primary-soft: #1c2540;
    --color-primary-text: #0f141b;

    --color-success: #6fb693;
    --color-success-soft: #1a2a24;
    --color-warning: #d3a760;
    --color-warning-soft: #2c2519;
    --color-danger: #e08b85;
    --color-danger-soft: #2e1d1c;

    --color-bg: #14181e;
    --color-bg-subtle: #1a1f26;
    --color-surface: #1e242c;
    --color-surface-raised: #262d36;
    --color-border: #333c47;         /* Nichtbefund, siehe hell */
    --color-border-strong: #6e7782;  /* 3.44:1 Karte, 3.92:1 Grund */
    --color-text: #e7eaee;
    --color-text-muted: #a2abb8;
    --color-text-inverse: #14181e;

    --color-link: #8ab4f0;
    --color-link-visited: #c0a6e8;

    --color-focus: #7fb2f0;
    --focus-ring: 0 0 0 3px rgba(127, 178, 240, 0.45);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

/* Manuelle Wahl im Nutzermenue setzt data-theme am <html>. */
:root[data-theme="dark"] {
  --color-primary: #8fa1d8;
  --color-primary-hover: #a6b5e3;
  --color-primary-soft: #1c2540;
  --color-primary-text: #0f141b;

  --color-success: #6fb693;
  --color-success-soft: #1a2a24;
  --color-warning: #d3a760;
  --color-warning-soft: #2c2519;
  --color-danger: #e08b85;
  --color-danger-soft: #2e1d1c;

  --color-bg: #14181e;
  --color-bg-subtle: #1a1f26;
  --color-surface: #1e242c;
  --color-surface-raised: #262d36;
  --color-border: #333c47;         /* Nichtbefund, siehe hell */
  --color-border-strong: #6e7782;  /* 3.44:1 Karte, 3.92:1 Grund */
  --color-text: #e7eaee;
  --color-text-muted: #a2abb8;
  --color-text-inverse: #14181e;

  --color-link: #8ab4f0;
  --color-link-visited: #c0a6e8;

  --color-focus: #7fb2f0;
  --focus-ring: 0 0 0 3px rgba(127, 178, 240, 0.45);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Grundlagen
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-base);
  line-height: var(--line-body);
}

h1 { font-size: var(--font-xl); line-height: var(--line-heading); margin: 0 0 var(--space-4); }
h2 { font-size: var(--font-lg); line-height: var(--line-heading); margin: 0 0 var(--space-3); }
h3 { font-size: var(--font-base); line-height: var(--line-heading); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); }

/* Die Browserregel fuer [hidden] hat die schwaechste
   Spezifizitaet und verliert gegen jede Komponente, die
   display setzt (.nav__overflow, .usermenu__menu,
   .modal-backdrop, .actionbar). Das ist die eine Stelle, an
   der !important nicht verdaechtig ist. */
[hidden] {
  display: none !important;
}

/* Verweise mit Spezifitaet 0: jedes Bauteil, das eine Farbe
   setzt, gewinnt. Als a:visited (0,1,1) schlug die Regel die
   Bauteile (0,1,0) – besuchte Knopf-Links und Eintraege der
   Seitenleiste wurden violett, auf dem dunklen Primaerknopf
   fast unlesbar. */
:where(a) {
  color: var(--color-link);
}

:where(a:visited) {
  color: var(--color-link-visited);
}

/* Sichtbarer Fokus auf allem Bedienbaren. Wird nie
   ersatzlos entfernt. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Variante "Theke"
   Fuer Bedienung im Stehen, mit Abstand zum Schirm, oft in
   Handschuhen: Wartemarken, Kassenplatz, Ausgabe. Gehoert in
   den Standard und nicht in ein einzelnes Produkt – sonst
   baut das naechste Projekt mit Thekenbezug sie neu.
   Anwenden ueber <html data-density="counter">.
   ============================================================ */

:root[data-density="counter"] {
  --touch-target: 56px;
  --row-height: 64px;
  --row-height-2: 88px;
  --skeleton-height: 20px;
  --header-height: 72px;

  --font-sm: 16px;
  --font-base: 18px;
  --font-lg: 24px;
  --font-xl: 32px;
  --font-2xl: 40px;

  --main-action-height: 88px;
}

/* Die Groesse der Haupthandlung steht als Variable (siehe
   --main-action-height oben und im Theken-Block), die Komponente
   .btn--main selbst in components.css – diese Datei enthaelt
   nur Werte. */