/* Erzeugt aus resources/css durch "php artisan mpp:design-css".
   Nicht von Hand aendern - Aenderungen gehoeren in die Quelldateien. */

/* =========================================================================
   tokens.css — DESIGN_SYSTEM.md §3
   Der einzige Ort fuer Farben, Masse, Radien, Schatten und Schriftrollen.
   Steht ein Rohwert irgendwo sonst, ist das ein Fehler (§4.2.8).

   Zwei Abweichungen von der woertlichen Fassung in DESIGN_SYSTEM.md, beide
   ohne Wirkung auf das Ergebnis:

   1. Jede Farbe, die Filament braucht, steht als RGB-Tripel (--*-rgb) und
      wird daraus als Hex-Ersatz zusammengesetzt. Filament setzt seine
      Klassen als rgba(var(--primary-500), …) zusammen und kann mit Hex
      nichts anfangen. So bleibt trotzdem EIN Wert pro Farbe gepflegt.
   2. Die Zustands- und Markenskalen sind auf 50…950 ergaenzt. Die in §3.1
      genannten Stufen stehen unveraendert, die uebrigen sind daraus
      abgeleitet — Filament braucht die volle Leiter.
   ========================================================================= */

:root {
    /* ── MARKE ─────────────────────────────────────────────────────────
       Alpina-Blau. Einzige Aktionsfarbe der Anwendung.                  */
    --brand-050-rgb: 241, 245, 252;
    --brand-100-rgb: 227, 235, 248;
    --brand-200-rgb: 198, 222, 255;
    --brand-300-rgb: 159, 198, 255;
    --brand-400-rgb: 74, 128, 212;   /* nur auf dunklem Grund (Seitenleiste) */
    --brand-500-rgb: 27, 95, 196;    /* Primaer: Buttons, Links, aktive Zustaende */
    --brand-600-rgb: 21, 80, 163;    /* Hover */
    --brand-700-rgb: 16, 64, 127;    /* Active / gedrueckt */
    --brand-800-rgb: 12, 52, 104;
    --brand-900-rgb: 9, 40, 80;
    --brand-950-rgb: 6, 26, 53;

    --brand-050: rgb(var(--brand-050-rgb));
    --brand-100: rgb(var(--brand-100-rgb));
    --brand-200: rgb(var(--brand-200-rgb));
    --brand-300: rgb(var(--brand-300-rgb));
    --brand-400: rgb(var(--brand-400-rgb));
    --brand-500: rgb(var(--brand-500-rgb));
    --brand-600: rgb(var(--brand-600-rgb));
    --brand-700: rgb(var(--brand-700-rgb));
    --brand-contrast: #ffffff;

    /* ── AKZENT ────────────────────────────────────────────────────────
       Gedaempfte Bronze. Reserviert fuer Telefonie/Sprache (MediVoice-
       Bezug). Hoechstens ein Element pro Bildschirm. Nie fuer Aktionen.  */
    --accent-100-rgb: 242, 233, 225;
    --accent-500-rgb: 138, 87, 48;
    --accent-600-rgb: 110, 67, 36;

    --accent-100: rgb(var(--accent-100-rgb));
    --accent-500: rgb(var(--accent-500-rgb));
    --accent-600: rgb(var(--accent-600-rgb));

    /* ── PAPIER (warm) ─────────────────────────────────────────────────
       Traegt die Website-Anmutung in die Anwendung.                     */
    --paper-050: #fbf9f5;
    --paper-100: #f6f3ed;   /* Hintergrund des Arbeitsbereichs */
    --paper-200: #ebe6dc;   /* warme Trennlinien, Bergkontur   */

    /* ── TINTE (kuehl, marineschwarz) ──────────────────────────────────*/
    --ink-050-rgb: 246, 248, 249;
    --ink-100-rgb: 237, 240, 243;
    --ink-200-rgb: 223, 228, 234;
    --ink-300-rgb: 195, 202, 211;
    --ink-400-rgb: 148, 157, 169;
    --ink-500-rgb: 103, 113, 127;
    --ink-600-rgb: 70, 81, 95;
    --ink-700-rgb: 43, 52, 65;
    --ink-800-rgb: 26, 34, 44;
    --ink-900-rgb: 14, 20, 27;
    --ink-950-rgb: 7, 12, 17;

    --ink-050: rgb(var(--ink-050-rgb));
    --ink-100: rgb(var(--ink-100-rgb));
    --ink-200: rgb(var(--ink-200-rgb));
    --ink-300: rgb(var(--ink-300-rgb));
    --ink-400: rgb(var(--ink-400-rgb));
    --ink-500: rgb(var(--ink-500-rgb));
    --ink-600: rgb(var(--ink-600-rgb));
    --ink-700: rgb(var(--ink-700-rgb));
    --ink-800: rgb(var(--ink-800-rgb));
    --ink-900: rgb(var(--ink-900-rgb));
    --white: #ffffff;

    /* ── ZUSTAND (gedaempft, klinisch) ─────────────────────────────────*/
    --ok-050-rgb: 242, 248, 245;
    --ok-100-rgb: 230, 240, 234;
    --ok-200-rgb: 206, 226, 215;
    --ok-300-rgb: 173, 205, 187;
    --ok-400-rgb: 127, 176, 150;
    --ok-500-rgb: 47, 107, 79;
    --ok-600-rgb: 40, 92, 68;
    --ok-700-rgb: 32, 74, 55;
    --ok-800-rgb: 25, 58, 43;
    --ok-900-rgb: 19, 45, 33;
    --ok-950-rgb: 11, 28, 21;

    --warn-050-rgb: 250, 246, 239;
    --warn-100-rgb: 247, 239, 221;
    --warn-200-rgb: 232, 219, 196;
    --warn-300-rgb: 215, 193, 156;
    --warn-400-rgb: 190, 158, 101;
    --warn-500-rgb: 138, 101, 22;
    --warn-600-rgb: 122, 88, 20;
    --warn-700-rgb: 97, 70, 17;
    --warn-800-rgb: 77, 55, 14;
    --warn-900-rgb: 60, 43, 11;
    --warn-950-rgb: 37, 26, 7;

    --error-050-rgb: 255, 243, 241;
    --error-100-rgb: 247, 231, 228;
    --error-200-rgb: 251, 209, 202;
    --error-300-rgb: 244, 177, 166;
    --error-400-rgb: 228, 133, 118;
    --error-500-rgb: 168, 58, 46;
    --error-600-rgb: 149, 50, 40;
    --error-700-rgb: 120, 40, 33;
    --error-800-rgb: 95, 32, 26;
    --error-900-rgb: 75, 25, 20;
    --error-950-rgb: 46, 15, 12;

    --ok-500: rgb(var(--ok-500-rgb));
    --ok-100: rgb(var(--ok-100-rgb));
    --warn-500: rgb(var(--warn-500-rgb));
    --warn-100: rgb(var(--warn-100-rgb));
    --error-500: rgb(var(--error-500-rgb));
    --error-100: rgb(var(--error-100-rgb));
    /* §3.1 nennt zusaetzlich --info-500/--info-100 als Alias auf die Marke.
       Diese beiden Namen belegt Filament bereits mit seiner eigenen Skala
       (siehe Bruecke am Dateiende), und der Komponentenkatalog §6.7 greift
       fuer Hinweise ohnehin direkt auf --brand-100/--brand-500/--brand-700
       zurueck. Der Alias entfaellt deshalb, die Bedeutung bleibt: Hinweis
       ist Markenblau. */

    /* ── SEITENLEISTE (dunkel) ─────────────────────────────────────────*/
    --nav-bg: #121821;
    --nav-bg-elevated: #1a222c;
    --nav-text: #d7dde5;
    --nav-text-strong: #ffffff;
    --nav-text-faint: #97a2b1;
    --nav-hover: rgba(255, 255, 255, 0.055);
    --nav-active-bg: rgba(255, 255, 255, 0.085);
    --nav-marker: var(--brand-400);
    --nav-border: rgba(255, 255, 255, 0.08);

    /* ── SEMANTISCHE ZUWEISUNGEN (Komponenten nutzen nur diese) ────────*/
    --bg-app: var(--paper-100);
    --bg-surface: var(--white);
    --bg-surface-alt: var(--ink-050);
    --bg-sunken: var(--ink-100);

    --text-strong: var(--ink-900);
    --text-default: var(--ink-700);
    --text-muted: var(--ink-500);
    --text-faint: var(--ink-400);
    --text-on-brand: var(--brand-contrast);

    --border-default: var(--ink-200);
    --border-strong: var(--ink-300);
    --border-warm: var(--paper-200);
    --border-focus: var(--brand-500);

    --action-bg: var(--brand-500);
    --action-bg-hover: var(--brand-600);
    --action-bg-press: var(--brand-700);
    --action-tint: var(--brand-100);

    --focus-ring: 0 0 0 3px rgba(var(--brand-500-rgb), 0.25);

    /* ── TYPOGRAFIE (§3.2) ─────────────────────────────────────────────
       Rollen, keine Namen. Gemappt auf den vorhandenen Bestand: das
       Projekt bringt genau eine Familie mit (Filament laedt Inter und
       stellt sie als --font-family bereit). Display faellt deshalb mit
       UI zusammen — laut §3.2 der Normalfall. Fuer Zahlen die
       Systemschrift-Kette, die Filament ohnehin schon verwendet; keine
       neue Datei, keine zusaetzliche Einbindung (§4.2.13).             */
    --font-ui: var(--font-family, "Inter"), ui-sans-serif, system-ui, sans-serif;
    --font-display: var(--font-ui);
    --font-num: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --fs-2xs: 0.6875rem;  /* 11px – Badges, Meta, Gruppentitel      */
    --fs-xs: 0.75rem;     /* 12px – Tabellenkopf, Hilfetexte        */
    --fs-sm: 0.8125rem;   /* 13px – Labels, Buttons, Tabellenzellen */
    --fs-md: 0.875rem;    /* 14px – BASIS-SCHRIFTGROESSE der App    */
    --fs-lg: 1rem;        /* 16px – Kartentitel                     */
    --fs-xl: 1.25rem;     /* 20px – Seitentitel                     */
    --fs-2xl: 1.5rem;     /* 24px – Sektionstitel                   */
    --fs-3xl: 2rem;       /* 32px – Kennzahlen                      */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --lh-tight: 1.2;
    --lh-base: 1.55;
    --ls-tight: -0.011em;

    /* ── ABSTAENDE (§3.3) — 4-px-Raster, nur diese Werte ───────────────*/
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* ── RADIEN (§3.4) ─────────────────────────────────────────────────*/
    --r-xs: 4px;    /* Badges, Chips, Checkboxen    */
    --r-sm: 6px;    /* Inputs, Selects              */
    --r-md: 8px;    /* Buttons, Dropdowns           */
    --r-lg: 12px;   /* Karten, Modals, Panels       */
    --r-xl: 16px;   /* Leerzustaende, grosse Panels */
    --r-full: 999px; /* nur Avatare und Statuspunkte */

    /* ── SCHATTEN & RAENDER (§3.5) ─────────────────────────────────────*/
    --sh-1: 0 1px 2px rgba(14, 20, 27, 0.04), 0 1px 1px rgba(14, 20, 27, 0.03);
    --sh-2: 0 2px 4px -1px rgba(14, 20, 27, 0.05),
        0 6px 16px -6px rgba(14, 20, 27, 0.09);
    --sh-3: 0 4px 8px -2px rgba(14, 20, 27, 0.07),
        0 16px 32px -12px rgba(14, 20, 27, 0.13);
    --hairline: 1px solid var(--border-default);
    --hairline-warm: 1px solid var(--border-warm);

    /* ── LAYOUT & MOTION (§3.6) ────────────────────────────────────────*/
    --sidebar-w: 264px;
    --sidebar-w-mini: 72px;
    --topbar-h: 64px;
    --content-max: 1440px;
    --content-pad-x: var(--sp-6);
    --z-sidebar: 40;
    --z-topbar: 50;
    --z-dropdown: 60;
    --z-modal: 70;
    --z-toast: 80;
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* Das Alpenband (§1.2) — die Bleistiftzeichnung aus dem Projekt.
       Eingebunden als Maske: die Datei traegt nur die Deckung, die Farbe
       kommt aus den Tokens. Nur so funktioniert dieselbe Zeichnung auf
       Papier und auf der dunklen Seitenleiste.
       --ridge-schmal ist ein Ausschnitt daraus - das Hauptmassiv, damit
       es in der schmalen Seitenleiste nicht gestaucht erscheint. */
    --ridge: url("/bilder/alpenband.png");
    --ridge-schmal: url("/bilder/alpenband-schmal.png");
    /* Beide entstehen aus bilder/alpenband.jpg - der Zeichnung aus dem
       Projektordner. Nur die Deckung wird uebernommen, das Papierweiss
       faellt weg; das Schmale ist der Ausschnitt um das Hauptmassiv. */

    /* ── BRUECKE ZU FILAMENT ───────────────────────────────────────────
       Filament setzt seine Farben als rgba(var(--primary-500), …)
       zusammen. Diese Zuweisungen ueberschreiben die Werte, die der
       Panel-Provider in den Kopf schreibt — das Stylesheet wird nach
       ihnen geladen. Dadurch bleibt tokens.css die einzige Quelle.     */
    --primary-50: var(--brand-050-rgb);
    --primary-100: var(--brand-100-rgb);
    --primary-200: var(--brand-200-rgb);
    --primary-300: var(--brand-300-rgb);
    --primary-400: var(--brand-400-rgb);
    --primary-500: var(--brand-500-rgb);
    --primary-600: var(--brand-500-rgb);
    --primary-700: var(--brand-600-rgb);
    --primary-800: var(--brand-700-rgb);
    --primary-900: var(--brand-800-rgb);
    --primary-950: var(--brand-950-rgb);

    --gray-50: var(--ink-050-rgb);
    --gray-100: var(--ink-100-rgb);
    --gray-200: var(--ink-200-rgb);
    --gray-300: var(--ink-300-rgb);
    --gray-400: var(--ink-400-rgb);
    --gray-500: var(--ink-500-rgb);
    --gray-600: var(--ink-600-rgb);
    --gray-700: var(--ink-700-rgb);
    --gray-800: var(--ink-800-rgb);
    --gray-900: var(--ink-900-rgb);
    --gray-950: var(--ink-950-rgb);

    --success-50: var(--ok-050-rgb);
    --success-100: var(--ok-100-rgb);
    --success-200: var(--ok-200-rgb);
    --success-300: var(--ok-300-rgb);
    --success-400: var(--ok-400-rgb);
    --success-500: var(--ok-500-rgb);
    --success-600: var(--ok-500-rgb);
    --success-700: var(--ok-600-rgb);
    --success-800: var(--ok-700-rgb);
    --success-900: var(--ok-800-rgb);
    --success-950: var(--ok-950-rgb);

    --warning-50: var(--warn-050-rgb);
    --warning-100: var(--warn-100-rgb);
    --warning-200: var(--warn-200-rgb);
    --warning-300: var(--warn-300-rgb);
    --warning-400: var(--warn-400-rgb);
    --warning-500: var(--warn-500-rgb);
    --warning-600: var(--warn-500-rgb);
    --warning-700: var(--warn-600-rgb);
    --warning-800: var(--warn-700-rgb);
    --warning-900: var(--warn-800-rgb);
    --warning-950: var(--warn-950-rgb);

    --danger-50: var(--error-050-rgb);
    --danger-100: var(--error-100-rgb);
    --danger-200: var(--error-200-rgb);
    --danger-300: var(--error-300-rgb);
    --danger-400: var(--error-400-rgb);
    --danger-500: var(--error-500-rgb);
    --danger-600: var(--error-500-rgb);
    --danger-700: var(--error-600-rgb);
    --danger-800: var(--error-700-rgb);
    --danger-900: var(--error-800-rgb);
    --danger-950: var(--error-950-rgb);

    --info-50: var(--brand-050-rgb);
    --info-100: var(--brand-100-rgb);
    --info-200: var(--brand-200-rgb);
    --info-300: var(--brand-300-rgb);
    --info-400: var(--brand-400-rgb);
    --info-500: var(--brand-500-rgb);
    --info-600: var(--brand-500-rgb);
    --info-700: var(--brand-600-rgb);
    --info-800: var(--brand-700-rgb);
    --info-900: var(--brand-800-rgb);
    --info-950: var(--brand-950-rgb);
}

/* =========================================================================
   base.css — Grundlagen: Typografie, Fokus, Bewegung, Hilfsklassen
   Gilt fuer die eigenen Seiten (Anmeldung, Passwort, Willkommen) und legt
   die Grundlagen, auf denen filament.css aufsetzt.
   ========================================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
}

/* Basisgroesse ist 14 px, nicht 16 px — Dashboard-Dichte (§3.2). */
body {
    margin: 0;
    font: var(--fw-regular) var(--fs-md) / var(--lh-base) var(--font-ui);
    background: var(--bg-app);
    color: var(--text-default);
    -webkit-font-smoothing: antialiased;
}

/* Fokus ist immer sichtbar. outline: none ohne Ersatz ist verboten (§7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-xs);
}

/* Kursive wird in der Anwendung nicht verwendet (§3.2). */
:where(i, em) {
    font-style: normal;
}

/* Links nur dort einfaerben, wo diese Datei das Sagen hat. Innerhalb der
   Filament-Panels bringt jeder Baustein seine eigene Farbe mit — ein
   globales a{} wuerde dort die Navigation blau einfaerben. */
.ui-standalone a,
.ui-card a,
.ui-alert a {
    color: var(--brand-500);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.ui-standalone a:hover,
.ui-card a:hover,
.ui-alert a:hover {
    color: var(--brand-600);
}

.ui-standalone a.ui-btn,
.ui-card a.ui-btn {
    color: inherit;
    text-decoration: none;
}

.ui-standalone a.ui-btn--primary,
.ui-card a.ui-btn--primary {
    color: var(--text-on-brand);
}

/* Zahlen stehen sauber untereinander — auch wenn --font-num mit --font-ui
   zusammenfaellt, bleibt tabular-nums Pflicht (§3.2). */
.u-num,
.ui-table__num,
.ui-stat__value {
    font-variant-numeric: tabular-nums;
}

.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Sprung zum Inhalt: erstes Element der Seite, sichtbar sobald fokussiert. */
.ui-skiplink {
    position: absolute;
    top: var(--sp-2);
    inset-inline-start: var(--sp-2);
    z-index: var(--z-toast);
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-surface);
    color: var(--text-strong);
    border: var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
    font: var(--fw-semi) var(--fs-sm) / 1 var(--font-ui);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease);
}

.ui-skiplink:focus {
    transform: translateY(0);
}

/* Das Alpenband — §1.2. Immer leise, nie Blickfang.
   Die Zeichnung kommt als Maske; gefaerbt wird sie ueber currentColor,
   damit dieselbe Datei auf Papier und auf dunklem Grund funktioniert. */
.ui-ridge {
    display: block;
    width: 100%;
    aspect-ratio: 1240 / 217;
    background: currentColor;
    color: var(--border-warm);
    -webkit-mask: var(--ridge) no-repeat bottom center / 100% 100%;
    mask: var(--ridge) no-repeat bottom center / 100% 100%;
    pointer-events: none;
}

/* Der Ausschnitt fuer schmale Traeger. */
.ui-ridge--schmal {
    aspect-ratio: 528 / 302;
    -webkit-mask-image: var(--ridge-schmal);
    mask-image: var(--ridge-schmal);
}

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

/* =========================================================================
   layout.css — Seitengerueste der eigenen Seiten (DESIGN_SYSTEM.md §5, §6.12)
   Das Geruest der Filament-Panels steht in filament.css.
   ========================================================================= */

/* ── Arbeitsbereich ─────────────────────────────────────────────────────*/

.ui-page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-6) var(--content-pad-x);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.ui-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* ── 6.12 Anmeldung: die einzige Stelle mit Verlauf und Bild ────────────
   Zweispaltig ab lg: links das Formular auf Papier, rechts die
   Markenflaeche. Unter lg entfaellt die Markenflaeche ganz.            */

.ui-brandpanel {
    position: fixed;
    inset: 0 0 0 auto;
    width: 50vw;
    z-index: 0;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    /* Unten kein Polster: das Alpenband sitzt buendig auf der Kante. */
    padding: var(--sp-7) var(--sp-6) 0;
    background: linear-gradient(160deg, var(--ink-900), var(--brand-700));
    color: var(--white);
    overflow: hidden;
    pointer-events: none;
}

.ui-brandpanel__logo {
    position: relative;
    z-index: 1;
    width: 200px;
    max-width: 40%;
    /* Der Schriftzug ist dunkel gezeichnet und steht hier auf dunklem
       Grund — umkehren statt eine zweite Datei zu pflegen. */
    filter: invert(1) brightness(2);
}

/* Der Textblock wird nach unten geschoben und steht damit direkt ueber
   den Bergen - nicht auf ihnen. */
.ui-brandpanel__body {
    margin-top: auto;
}

.ui-brandpanel__titel {
    margin: 0 0 var(--sp-2);
    font: var(--fw-semi) var(--fs-2xl) / var(--lh-tight) var(--font-display);
    letter-spacing: var(--ls-tight);
}

.ui-brandpanel__claim {
    margin: 0;
    max-width: 32ch;
    font: var(--fw-medium) var(--fs-lg) / 1.35 var(--font-ui);
    color: rgba(255, 255, 255, 0.86);
}

.ui-brandpanel__text {
    margin-top: var(--sp-3);
    max-width: 46ch;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.72);
}

/* Das Band ist kein Hintergrund mehr, sondern das letzte Stueck der Spalte.
   Die negativen Seitenraender heben das Polster der Flaeche auf, damit es
   von Kante zu Kante laeuft. */
.ui-brandpanel__ridge {
    margin: var(--sp-6) calc(var(--sp-6) * -1) 0;
    color: rgba(255, 255, 255, 0.16);
}

@media (min-width: 1024px) {
    .ui-brandpanel {
        display: flex;
    }
}

/* ── Eigenstaendige Seiten ohne Panel (Passwort erneuern, Willkommen) ───*/

.ui-standalone {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
    background: var(--bg-app);
}

.ui-standalone__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 27rem;
}

.ui-standalone__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.ui-standalone__logo {
    width: 160px;
}

.ui-standalone__heading {
    margin: 0 0 var(--sp-2);
    font: var(--fw-semi) var(--fs-2xl) / var(--lh-tight) var(--font-display);
    color: var(--text-strong);
    letter-spacing: var(--ls-tight);
}

.ui-standalone__lead {
    margin: 0 0 var(--sp-5);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Das Alpenband am unteren Rand — hier steht es stellvertretend fuer den
   Anmeldehintergrund (§1.2). */
.ui-standalone__ridge {
    position: fixed;
    inset: auto 0 0 0;
    color: var(--border-warm);
    z-index: 0;
}

/* ── Fusszeile der Seitenleiste (§5) ────────────────────────────────────*/

.ui-foot {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    font-size: var(--fs-2xs);
    line-height: 1.6;
    color: var(--nav-text-faint);
    border-top: 1px solid var(--nav-border);
}

.ui-foot a {
    color: var(--nav-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ui-foot a:hover {
    color: var(--nav-text-strong);
}

.ui-foot__marke {
    margin-top: var(--sp-2);
    color: var(--nav-text);
}

/* ── Praxiskontext-Band (§6.7-Logik: getoent, Leiste, dunkler Text) ─────
   Fassung 1.4, Spezifikation 6.1: in der FEHLERFARBE, nicht mehr in der
   Warnfarbe. Beides zusammen - Band und Modusknopf - trug bis dahin dasselbe
   Gelb wie ein abgelaufener Termin, und der Unterschied zwischen «schau mal»
   und «du arbeitest gerade in fremden Daten» ging darin unter.

   Das BAND ist hell getoent mit kraeftiger roter Leiste; der KNOPF weiter
   unten ist satt gefuellt. Verschiedene Staerke, dieselbe Bedeutung: Das Band
   sagt, wo du bist, der Knopf sagt, was du tust.                          */

.ui-kontextband {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--error-100);
    border-bottom: 3px solid var(--error-500);
    color: var(--error-500);
    font: var(--fw-medium) var(--fs-sm) / 1.5 var(--font-ui);
    text-align: center;
}

.ui-kontextband strong {
    font-weight: var(--fw-semi);
}

/* ── Ansichts-/Aenderungsmodus in der Kopfzeile ─────────────────────────*/

.ui-modus {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--sp-2);
}

.ui-modus__knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: var(--fw-semi) var(--fs-xs) / 1 var(--font-ui);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease);
}

.ui-modus__punkt {
    width: 6px;
    height: 6px;
    border-radius: var(--r-full);
    background: currentColor;
}

.ui-modus__knopf--aus {
    background: var(--ink-100);
    color: var(--ink-600);
    border-color: var(--border-default);
}

.ui-modus__knopf--aus:hover {
    background: var(--ink-200);
}

/* Spezifikation 6.1: eingeschaltet ist der Knopf SATT ROT GEFUELLT mit weisser
   Schrift - er soll aus der Kopfzeile herausstechen, solange er an ist. Wer ihn
   uebersieht, aendert Daten, ohne es zu wollen. Ausgeschaltet bleibt er grau. */
.ui-modus__knopf--an {
    background: var(--error-500);
    color: var(--white);
    border-color: var(--error-500);
}

.ui-modus__knopf--an:hover {
    background: rgb(var(--error-600-rgb));
}

/* ── Der Puls beim Seitenaufruf (Aenderungsliste 5, Entscheid 31) ───────
   Zweimal gruen aufleuchtend ueber drei Sekunden, dann sieht der Knopf normal
   aus. Er sagt: «Hier drücken, wenn Sie etwas ändern möchten.»

   NUR im ausgeschalteten Zustand - deshalb haengt die Klasse an
   .ui-modus__knopf--aus. Ist Bearbeiten schon an, gibt es nichts mehr zu
   zeigen, und ein Knopf, der den ganzen Arbeitstag blinkt, wird zur Tapete.

   Zwei Pulse in drei Sekunden: 1.5s je Durchgang, zweimal, dann Schluss
   (animation-iteration-count: 2, kein infinite). 'forwards' laesst ihn danach
   im Endzustand stehen, also unauffaellig.

   Umrandung statt Fuellung: Ein box-shadow-Ring aendert die Farbe des Knopfes
   nicht - er bleibt grau und lesbar, und die Kopfzeile springt nicht.
   DESIGN_SYSTEM.md §4.2.10: Bewegung darf nichts verdecken.

   Die Regel fuer «reduzierte Bewegung» steht in base.css und kuerzt jede
   Animation auf .01ms - dieser Puls faellt automatisch darunter. */
@keyframes ui-modus-puls {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 163, 74, 0);
    }
    30% {
        box-shadow: 0 0 0 4px rgba(16, 163, 74, .55), 0 0 12px 2px rgba(16, 163, 74, .45);
        border-color: rgb(16, 163, 74);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 163, 74, 0);
    }
}

.ui-modus__knopf--aus.ui-modus__knopf--puls {
    animation: ui-modus-puls 1.5s var(--ease) 2 forwards;
}

/* ── Onboarding: Formular links, Leiste rechts (Befund 8) ───────────────
   Das Gitter steht hier und nicht als Hilfsklasse in der Ansicht: Filaments
   ausgeliefertes Stylesheet enthaelt nur, was Filament selbst braucht -
   «lg:grid-cols-3» ist nicht darin, und einen Build gibt es auf dem
   Zielserver nicht. Bis Fassung 1.1 stand die Schrittleiste deshalb
   unbemerkt UNTER dem Formular statt daneben.                             */

.ui-onboarding {
    display: grid;
    gap: var(--sp-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .ui-onboarding {
        /* Zwei Drittel Formular, ein Drittel Leiste. minmax(0,…) verhindert,
           dass eine breite Tabelle die Spalte aufblaeht.                    */
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.ui-onboarding__leiste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* ── Die Schrittliste ───────────────────────────────────────────────────*/

.ui-schritte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-schritte__eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ui-schritte__eintrag--offen {
    color: var(--brand-700);
    font-weight: var(--fw-semi);
}

.ui-schritte__eintrag--fertig {
    color: var(--ok-500);
}

.ui-schritte__marke {
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid currentColor;
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

/* ── Warteschritt: Alpina ist am Zug (Befund 17) ────────────────────────*/

.ui-warten {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--ink-100);
    font-size: var(--fs-sm);
    color: var(--text-default);
}

/* ── Der Abbruchlink im Hinweistext (Befund 11) ─────────────────────────*/

.ui-textlink {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--brand-700);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ui-textlink:hover {
    color: var(--brand-500);
}

/* =========================================================================
   components.css — Komponentenkatalog DESIGN_SYSTEM.md §6
   Alle Klassen tragen das Praefix ui-. Rohwerte gibt es hier nicht.
   ========================================================================= */

/* ── 6.1 Button ─────────────────────────────────────────────────────────*/

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 38px;
    padding: 0 var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: var(--fw-semi) var(--fs-sm) / 1 var(--font-ui);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.ui-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.ui-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
}

.ui-btn--primary {
    background: var(--action-bg);
    color: var(--text-on-brand);
}

.ui-btn--primary:hover {
    background: var(--action-bg-hover);
    color: var(--text-on-brand);
}

.ui-btn--primary:active {
    background: var(--action-bg-press);
}

.ui-btn--secondary {
    background: var(--bg-surface);
    color: var(--text-default);
    border-color: var(--border-strong);
}

.ui-btn--secondary:hover {
    background: var(--ink-050);
    color: var(--text-default);
}

.ui-btn--ghost {
    background: transparent;
    color: var(--text-default);
}

.ui-btn--ghost:hover {
    background: var(--ink-100);
    color: var(--text-default);
}

.ui-btn--danger {
    background: var(--error-500);
    color: var(--white);
}

.ui-btn--sm {
    height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-xs);
}

.ui-btn--lg {
    height: 44px;
    padding: 0 var(--sp-5);
    font-size: var(--fs-md);
}

.ui-btn--icon {
    width: 38px;
    padding: 0;
}

.ui-btn--block {
    width: 100%;
}

/* ── 6.2 Karte ──────────────────────────────────────────────────────────*/

.ui-card {
    background: var(--bg-surface);
    border: var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
}

.ui-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--hairline);
}

.ui-card__title {
    margin: 0;
    font: var(--fw-semi) var(--fs-lg) / var(--lh-tight) var(--font-ui);
    color: var(--text-strong);
    letter-spacing: var(--ls-tight);
}

.ui-card__desc {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ui-card__body {
    padding: var(--sp-5);
}

.ui-card__footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: var(--hairline);
    background: var(--bg-surface-alt);
}

.ui-card--flush .ui-card__body {
    padding: 0;
}

/* ── 6.3 Kennzahl-Kachel ────────────────────────────────────────────────*/

.ui-stat {
    position: relative;
    background: var(--bg-surface);
    border: var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: var(--sp-5);
}

.ui-stat__label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ui-stat__value {
    margin-top: var(--sp-2);
    font: var(--fw-medium) var(--fs-3xl) / 1.05 var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}

.ui-stat__unit {
    font-size: var(--fs-lg);
    color: var(--text-muted);
    margin-left: 2px;
}

.ui-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-3);
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    font: var(--fw-medium) var(--fs-2xs) / 1.6 var(--font-ui);
}

.ui-stat__trend--up {
    background: var(--ok-100);
    color: var(--ok-500);
}

.ui-stat__trend--down {
    background: var(--error-100);
    color: var(--error-500);
}

.ui-stat__trend--flat {
    background: var(--ink-100);
    color: var(--text-muted);
}

.ui-stat__icon {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--action-tint);
    color: var(--brand-600);
}

.ui-stat__icon--voice {
    background: var(--accent-100);
    color: var(--accent-600);
}

/* ── 6.4 Formularfeld ───────────────────────────────────────────────────*/

.ui-field {
    display: block;
    margin-bottom: var(--sp-4);
}

.ui-label {
    display: block;
    margin-bottom: var(--sp-2);
    font: var(--fw-medium) var(--fs-sm) / 1.4 var(--font-ui);
    color: var(--text-default);
}

.ui-label__req {
    color: var(--error-500);
    margin-left: 2px;
}

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    min-height: 38px;
    padding: 0 var(--sp-3);
    background: var(--bg-surface);
    color: var(--text-strong);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font: var(--fw-regular) var(--fs-md) / 1.5 var(--font-ui);
    transition:
        border-color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease);
}

.ui-select {
    padding-right: var(--sp-2);
}

.ui-textarea {
    min-height: 96px;
    padding: var(--sp-2) var(--sp-3);
    resize: vertical;
}

.ui-input::placeholder {
    color: var(--text-faint);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
}

.ui-input:disabled {
    background: var(--bg-sunken);
    color: var(--text-muted);
}

.ui-input--numeric {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ui-hint {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-error {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--error-500);
}

.ui-field--invalid .ui-input,
.ui-field--invalid .ui-select {
    border-color: var(--error-500);
}

/* ── 6.5 Tabelle ────────────────────────────────────────────────────────*/

.ui-table-scroll {
    overflow-x: auto;
}

.ui-table {
    width: 100%;
    border-collapse: collapse;
}

.ui-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    background: var(--bg-surface-alt);
    border-bottom: var(--hairline);
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    color: var(--text-muted);
    white-space: nowrap;
}

.ui-table tbody td {
    height: 48px;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--ink-100);
    font-size: var(--fs-sm);
    color: var(--text-default);
    vertical-align: middle;
}

.ui-table tbody tr:last-child td {
    border-bottom: 0;
}

.ui-table tbody tr:hover td {
    background: var(--ink-050);
}

.ui-table__num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    text-align: right;
    /* Ein Betrag wird nie umgebrochen - «CHF» und die Zahl gehoeren zusammen. */
    white-space: nowrap;
    color: var(--text-strong);
}

.ui-table__id {
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-table__actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ── 6.6 Badge ──────────────────────────────────────────────────────────*/

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    font: var(--fw-semi) var(--fs-2xs) / 1.7 var(--font-ui);
}

.ui-badge--neutral {
    background: var(--ink-100);
    color: var(--ink-600);
}

.ui-badge--ok {
    background: var(--ok-100);
    color: var(--ok-500);
}

.ui-badge--warn {
    background: var(--warn-100);
    color: var(--warn-500);
}

.ui-badge--error {
    background: var(--error-100);
    color: var(--error-500);
}

.ui-badge--brand {
    background: var(--brand-100);
    color: var(--brand-700);
}

.ui-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--r-full);
    background: currentColor;
}

/* ── 6.7 Alert ──────────────────────────────────────────────────────────*/

.ui-alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    border-left: 3px solid;
    font-size: var(--fs-sm);
}

.ui-alert svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.ui-alert--ok {
    background: var(--ok-100);
    border-color: var(--ok-500);
    color: var(--ok-500);
}

.ui-alert--warn {
    background: var(--warn-100);
    border-color: var(--warn-500);
    color: var(--warn-500);
}

.ui-alert--error {
    background: var(--error-100);
    border-color: var(--error-500);
    color: var(--error-500);
}

.ui-alert--info {
    background: var(--brand-100);
    border-color: var(--brand-500);
    color: var(--brand-700);
}

.ui-alert__title {
    font-weight: var(--fw-semi);
}

.ui-alert__text {
    color: var(--text-default);
    margin: 2px 0 0;
}

.ui-alert ul {
    margin: 0;
    padding-inline-start: var(--sp-4);
}

/* ── 6.10 Leerzustand ───────────────────────────────────────────────────*/

.ui-empty {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--sp-3);
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    border: 1px dashed var(--border-warm);
    border-radius: var(--r-xl);
    background: var(--paper-050);
    overflow: hidden;
}

.ui-empty__ridge {
    position: absolute;
    inset: auto 0 0 0;
    height: 72px;
    color: var(--paper-200);
    pointer-events: none;
}

.ui-empty__icon {
    width: 40px;
    height: 40px;
    color: var(--text-faint);
    stroke-width: 1.5;
}

.ui-empty__title {
    margin: 0;
    font: var(--fw-medium) var(--fs-2xl) / 1.2 var(--font-display);
    color: var(--text-strong);
}

.ui-empty__text {
    margin: 0;
    max-width: 42ch;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ── Eyebrow und Seitentitel (§3.2, §6.9) ───────────────────────────────
   Die einzige Stelle mit Grossbuchstaben in der ganzen Anwendung.       */

.ui-eyebrow {
    font: var(--fw-semi) var(--fs-2xs) / 1.3 var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ui-title {
    margin: 0;
    font: var(--fw-semi) var(--fs-xl) / 1.15 var(--font-display);
    color: var(--text-strong);
    letter-spacing: var(--ls-tight);
}

/* ── bexio-Seite (Fassung 1.5.0, §6) ────────────────────────────────────
   Eigene Klassen statt Tailwind-Hilfsklassen: Es gibt keinen Frontend-Bau,
   und ein frei gewaehltes Mass waere lautlos wirkungslos (§9.2). Die drei
   Zustandsfarben stehen hier, weil «text-success-600» im ausgelieferten
   Stylesheet von Filament gar nicht vorkommt — der Erfolgszustand waere sonst
   farblos, waehrend der Fehlerzustand rot leuchtet.                       */

.ui-bexio-ok {
    color: var(--ok-500);
}

.ui-bexio-warn {
    color: var(--warn-500);
}

.ui-bexio-fehler {
    color: var(--error-500);
}

/* Kopfzeile einer Karte: Titel links, Nebenangabe rechts, auf Grundlinie. */
.ui-bexio-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
}

.ui-bexio-karte {
    border: var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
}

/* Die Zeile mit Knopf, Nummernfeld und Loeschknopf — umbrechend, damit sie
   auf dem Telefon nicht zusammengedrueckt wird.                            */
.ui-bexio-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
}

.ui-bexio-feld {
    border: var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--sp-2) var(--sp-4);
}

/* Breite Tabellen scrollen IN SICH, nicht die Seite.
   Auf dem Telefon lief die Positionstabelle sonst rechts aus dem Bild - die
   Spalte «Total» war schlicht nicht zu sehen. */
.ui-bexio-tabellenrahmen {
    overflow-x: auto;
}

.ui-bexio-tabelle {
    width: 100%;
    min-width: 22rem;
    font-size: var(--fs-sm);
    border-collapse: collapse;
}

.ui-bexio-tabelle th,
.ui-bexio-tabelle td {
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    vertical-align: top;
}

.ui-bexio-tabelle thead th {
    border-bottom: var(--hairline);
}

/* Der Tabellenkopf traegt zusaetzlich .ui-eyebrow - die EINZIGE Stelle mit
   Grossbuchstaben (§4.2.1). Deshalb steht hier kein eigenes text-transform. */

.ui-bexio-tabelle tbody tr + tr td {
    border-top: var(--hairline);
}

.ui-bexio-tabelle tfoot td {
    border-top: var(--hairline);
    font-weight: var(--fw-semi);
}

/* Betraege und Zeiten rechtsbuendig und in der Ziffernschrift (§10). */
.ui-bexio-tabelle .ui-bexio-zahl {
    text-align: right;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Die schmale Spalte mit Haken, Kreuz oder Strich. */
.ui-bexio-tabelle .ui-bexio-zeichen {
    width: 2rem;
    text-align: center;
}

.ui-bexio-schritt {
    font-weight: var(--fw-medium);
}

.ui-bexio-meldung {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-bexio-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--brand-500);
}

.ui-bexio-link:hover {
    text-decoration: underline;
}

.ui-bexio-abstand {
    margin-top: var(--sp-4);
}

/* Die Merkliste «in bexio von Hand zu erledigen». */
.ui-bexio-liste {
    margin: 0;
    padding-left: var(--sp-5);
    list-style: disc;
    font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Startseite «Meine Praxis» — Änderungsliste 6, Punkt 1
   -------------------------------------------------------------------------- */

/*
   Die Begrüssungszeile steht zuoberst, vor allem anderen. Sie ist gross genug,
   um als Anrede gelesen zu werden, und leise genug, um der Seitenüberschrift
   nicht die Rolle streitig zu machen: Display-Schrift, aber nicht fett und in
   der gedämpften Textfarbe.
*/
.ui-begruessung {
    margin-bottom: var(--sp-5);
    font: var(--fw-regular) var(--fs-2xl) / var(--lh-tight) var(--font-display);
    letter-spacing: var(--ls-tight);
    color: var(--text-default);
}

/*
   Die Patientenaufnahmestopps. Sie müssen ins Auge fallen, ohne die halbe Seite
   rot einzufärben: ein schmaler Balken links wie beim Alert, der Inhalt in
   normaler Textfarbe. Und Standort und Betroffener stehen getrennt (Entscheid 9)
   — bei einer Gruppe sieht man sonst nicht, welcher Standort gemeint ist.
*/
.ui-stopps {
    border-left: 3px solid var(--error-500);
    background: var(--error-100);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
}

.ui-stopps__titel {
    font-weight: var(--fw-semi);
    color: var(--error-500);
}

.ui-stopps__liste {
    margin: var(--sp-3) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-3);
}

.ui-stopp {
    display: grid;
    gap: 2px;
    font-size: var(--fs-sm);
    color: var(--text-default);
}

/*
   Der Standort als leise Zeile über dem Betroffenen. BEWUSST NICHT in
   Grossbuchstaben: DESIGN_SYSTEM.md §4.2.1 lässt die nur beim Eyebrow über dem
   Seitentitel zu, und DesignSystemTest wacht darüber.
*/
.ui-stopp__standort {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.ui-stopp__wen {
    font-weight: var(--fw-semi);
    color: var(--text-strong);
}

.ui-stopp__wann {
    color: var(--text-muted);
}

/* Der Zustand als Marke am Ende der Zeile, nicht als eigene Spalte. */
.ui-stopp__zustand {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 1px var(--sp-2);
    border-radius: var(--r-xs);
    background: var(--bg-surface);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: var(--error-500);
}

/* Die Datenzeilen der Praxiskarte: Feldname links in fester Breite. */
.ui-daten {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-sm);
}

.ui-daten__zeile {
    display: flex;
    gap: var(--sp-4);
}

.ui-daten__name {
    flex: 0 0 7rem;
    color: var(--text-muted);
}

.ui-daten__wert {
    min-width: 0;
    color: var(--text-default);
}

/* =========================================================================
   Die Startseite des Kundenportals (Änderungsliste 7, Punkte 7 und 8)
   ========================================================================= */

/*
   Zwei Spalten: links, was IST — rechts, was man TUN kann.

   Fassung 1.8.0 hatte ein zweispaltiges Raster abgeschafft, weil es die Blöcke
   nach Platz verteilte statt nach Sinn: Vier Standortkarten füllten beide
   Spalten, Support und Rechnungen rutschten dazwischen. Hier ist die Teilung
   eine andere — sie folgt der Aufgabe, nicht dem Platz, und die Standorttabelle
   einer Gruppe steht darüber über die volle Breite.

   minmax(0, …) verhindert, dass die Rechnungstabelle die linke Spalte aufbläht.
*/
.ui-start {
    display: grid;
    gap: var(--sp-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .ui-start {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.ui-start__haupt,
.ui-start__seite {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
}

/* Die Überschrift eines Blocks, wenn sie zugleich das Sprungziel ist. */
.ui-start__link {
    color: inherit;
    text-decoration: none;
}

.ui-start__link:hover {
    text-decoration: underline;
}

.ui-start__pfeil {
    margin-left: var(--sp-2);
    color: var(--text-muted);
}

/* «Was ist heute zu tun?» — jede Zeile ein Formular, deshalb ein Knopf. */
.ui-tun {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-tun__knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-3);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    font-size: var(--fs-sm);
    color: var(--text-default);
    text-align: left;
    cursor: pointer;
}

.ui-tun__knopf:hover {
    border-color: var(--border-strong);
    background: var(--bg-surface-alt);
}

.ui-tun__pfeil {
    flex: 0 0 auto;
    color: var(--text-muted);
}

/* Anhänge an einer Support-Anfrage (Änderungsliste 7, Punkt 4) */
.ui-anhaenge {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 0;
    padding: 0;
    list-style: none;
}

.ui-anhang {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 2px var(--sp-2);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xs);
    background: var(--bg-surface);
    font-size: var(--fs-xs);
    color: var(--text-default);
    text-decoration: none;
}

a.ui-anhang:hover {
    border-color: var(--border-strong);
}

.ui-anhang__groesse {
    color: var(--text-muted);
}

.ui-anhang--fehlt {
    color: var(--text-muted);
    font-style: italic;
}

/* -------------------------------------------------------------------------
   Die zwei Tabellen der Startseite (Änderungsliste 7, eigener Prüfdurchgang)

   Sie standen bisher in Tailwind-Klassen, die es hier gar nicht gibt: `pr-4`,
   `pl-4`, `pb-1`, `tabular-nums`, `last:border-0`, `dark:divide-gray-700` und
   die ganze Rot-Skala fehlen in Filaments theme.css, und einen Tailwind-Bau
   gibt es nicht (DESIGN_SYSTEM.md §9.2). Die Spaltenabstände fehlten damit
   lautlos, die Beträge standen nicht untereinander, und die Marke für einen
   Aufnahmestopp in der Standorttabelle war farblos.

   Aufgefallen ist es erst, als die Rechnungstabelle mit dem zweispaltigen
   Raster in die schmalere linke Spalte wanderte.
   ------------------------------------------------------------------------- */

.ui-starttabelle {
    width: 100%;
    font-size: var(--fs-sm);
    border-collapse: collapse;
}

.ui-starttabelle th {
    padding-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    text-align: left;
}

.ui-starttabelle td {
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}

/* Spaltenabstand, ohne dass die letzte Spalte rechts einen Rand behält. */
.ui-starttabelle th:not(:last-child),
.ui-starttabelle td:not(:last-child) {
    padding-right: var(--sp-4);
}

.ui-starttabelle tbody tr {
    border-top: 1px solid var(--border-default);
}

.ui-starttabelle--kopflinie thead tr {
    border-bottom: 1px solid var(--border-default);
}

.ui-starttabelle__zahl {
    text-align: right;
    white-space: nowrap;
    /* Ziffern gleicher Breite: sonst stehen die Rappen nicht untereinander. */
    font-variant-numeric: tabular-nums;
}

.ui-starttabelle__zahl--leise {
    color: var(--text-muted);
}

.ui-starttabelle__zahl--stark {
    font-weight: var(--fw-medium);
}

.ui-starttabelle__leer {
    color: var(--text-faint);
}

/* Die Marke für laufende Aufnahmestopps in der Standorttabelle. Dieselben
   Tokens wie `.ui-stopps` — dort sind sie längst in Gebrauch. */
.ui-starttabelle__stopps {
    display: inline-block;
    padding: 1px var(--sp-2);
    border-radius: var(--r-xs);
    background: var(--error-100);
    font-size: var(--fs-xs);
    color: var(--error-500);
}

/* Die Liste offener Support-Anfragen. */
.ui-startliste {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.ui-startliste li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--border-default);
}

.ui-startliste li:first-child {
    border-top: 0;
}

.ui-startliste__nummer {
    color: var(--text-muted);
}

.ui-startliste__datum {
    flex: 0 0 auto;
    color: var(--text-muted);
}

/*
   Auf schmalen Bildschirmen fällt das Raster auf eine Spalte zurück. «Was ist
   heute zu tun?» stünde dann zuunterst, hinter den Rechnungen — genau der
   Kasten, den Punkt 8 prominent machen wollte. Also rutscht er dort nach oben.
*/
.ui-start__seite {
    order: -1;
}

@media (min-width: 1024px) {
    .ui-start__seite {
        order: 0;
    }
}

/* =========================================================================
   utilities.css — streng begrenzte Helfer (DESIGN_SYSTEM.md §8)
   Alles andere gehoert in eine Komponente.
   ========================================================================= */

.u-stack-2,
.u-stack-3,
.u-stack-4,
.u-stack-5,
.u-stack-6 {
    display: flex;
    flex-direction: column;
}

.u-stack-2 {
    gap: var(--sp-2);
}

.u-stack-3 {
    gap: var(--sp-3);
}

.u-stack-4 {
    gap: var(--sp-4);
}

.u-stack-5 {
    gap: var(--sp-5);
}

.u-stack-6 {
    gap: var(--sp-6);
}

.u-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.u-grid-2,
.u-grid-3,
.u-grid-4 {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .u-grid-2,
    .u-grid-3,
    .u-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .u-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .u-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.u-text-muted {
    color: var(--text-muted);
}

.u-num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   filament.css — Bruecke zwischen Filament und DESIGN_SYSTEM.md §4/§6

   Warum diese Datei ueber den in §8 genannten Bestand hinaus existiert:
   Das Portal ist eine Filament-Anwendung. Der Komponentenkatalog §6
   beschreibt, wie ein Button, eine Karte, eine Tabelle auszusehen haben —
   die Bausteine liefert aber Filament. Hier wird jeder Filament-Baustein
   auf die Festlegung aus §6 gezogen. Alle Werte kommen aus tokens.css.

   Das Stylesheet wird nach Filaments eigenem Stylesheet und nach dem
   :root-Block des Panels geladen. Bei gleicher Spezifitaet gewinnt damit
   diese Datei — deshalb kommt sie fast ohne !important aus.
   ========================================================================= */

/* ── Grundflaechen ──────────────────────────────────────────────────────*/

.fi-body {
    background: var(--bg-app);
    font-size: var(--fs-md);
    color: var(--text-default);
}

.fi-main-ctn {
    background: var(--bg-app);
}

.fi-main {
    max-width: var(--content-max);
    padding-inline: var(--content-pad-x);
}

@media (max-width: 767px) {
    .fi-main {
        padding-inline: var(--sp-4);
    }
}

/* Blockabstand im Arbeitsbereich ist immer --sp-5 (§5). */
.fi-page > section {
    gap: var(--sp-5);
    padding-block: var(--sp-6);
}

/* Steht das Eyebrow darueber, faengt es den oberen Abstand ab. */
.fi-page > .ui-kontext + section {
    padding-block-start: 0;
}

/* ── Kopfzeile (§6.9) — deckend weiss, kein Blur, kein Schatten ─────────*/

.fi-topbar > nav {
    height: var(--topbar-h);
    background: var(--bg-surface);
    border-bottom: var(--hairline);
    box-shadow: none;
    backdrop-filter: none;
    padding-inline: var(--content-pad-x);
}

.fi-topbar {
    background: transparent;
}

/* Eyebrow ueber dem Seitentitel — der Kontext, in dem gearbeitet wird.
   Sitzt im Seitenkopf und traegt dessen oberen Abstand. */
.ui-kontext {
    padding-top: var(--sp-6);
    padding-bottom: 2px;
}

/* ── Seitentitel ────────────────────────────────────────────────────────*/

.fi-header-heading {
    font: var(--fw-semi) var(--fs-xl) / 1.15 var(--font-display);
    color: var(--text-strong);
    letter-spacing: var(--ls-tight);
}

.fi-header-subheading {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ── Seitenleiste (§6.8) — dunkel, einfarbig, volle Hoehe ───────────────*/

.fi-sidebar {
    width: var(--sidebar-w);
    background: var(--nav-bg);
    border: 0;
    box-shadow: none;
    overflow: hidden;
}

/* Kopf und Navigation bleiben durchsichtig — sonst deckten sie das
   Alpenband zu, das am Fuss der Seitenleiste liegt. */
.fi-sidebar-header,
.fi-sidebar-nav {
    background: transparent;
    border: 0;
}

/* Das Alpenband hinter der Navigation (§1.2).
   Der schmale Ausschnitt statt des ganzen Bandes: auf 264 px waere die
   ganze Kette zu einem Zickzack gestaucht. Es liegt hinter allem und
   traegt nichts als Stimmung — deshalb 8 % Weiss. */
.fi-sidebar::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 0;
    aspect-ratio: 528 / 302;
    background: rgba(255, 255, 255, 0.08);
    -webkit-mask: var(--ridge-schmal) no-repeat bottom center / 100% 100%;
    mask: var(--ridge-schmal) no-repeat bottom center / 100% 100%;
    pointer-events: none;
}

.fi-sidebar-header,
.fi-sidebar-nav,
.fi-sidebar .ui-foot {
    position: relative;
    z-index: 1;
}

.fi-sidebar-header {
    height: var(--topbar-h);
    padding-inline: var(--sp-5);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: none;
}

.fi-sidebar-nav {
    padding: var(--sp-4) var(--sp-3);
    gap: 0;
}

.fi-sidebar-header .fi-logo {
    color: var(--nav-text-strong);
    font: var(--fw-semi) var(--fs-lg) / 1 var(--font-display);
    letter-spacing: var(--ls-tight);
}

/* Auf der Anmeldeseite steht derselbe Schriftzug auf Weiss. */
.fi-simple-page .fi-logo {
    color: var(--text-strong);
    font: var(--fw-semi) var(--fs-lg) / 1 var(--font-display);
    letter-spacing: var(--ls-tight);
}

/* Gruppentitel */
.fi-sidebar-group-label,
.fi-sidebar-group-button {
    padding: 0 var(--sp-3) var(--sp-2);
    font: var(--fw-semi) var(--fs-2xs) / 1.4 var(--font-ui);
    letter-spacing: 0.04em;
    color: var(--nav-text-faint);
}

.fi-sidebar-group {
    margin-bottom: var(--sp-5);
}

.fi-sidebar-group-items {
    gap: 2px;
}

/* Navigationseintrag */
.fi-sidebar-item-button {
    position: relative;
    height: 38px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    font: var(--fw-medium) var(--fs-sm) / 1 var(--font-ui);
    color: var(--nav-text);
    transition:
        background-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

/* Volle Deckkraft (Aenderungsliste 2 vom 27.08.2026): Die 0.8 legten sich auf
   eine ohnehin gedaempfte Farbe und liessen die Zeichen matt wirken. */
.fi-sidebar-item-icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
    color: var(--nav-text);
    opacity: 1;
}

.fi-sidebar-item-label {
    font: inherit;
    color: inherit;
}

.fi-sidebar-item-button:hover {
    background: var(--nav-hover);
    color: var(--nav-text-strong);
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--nav-text-strong);
    opacity: 1;
}

.fi-sidebar-item-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand-400);
}

/* Aktiv: 3-px-Leiste plus leichte Aufhellung — kein Verlaufs-Pill (§4.1). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: var(--nav-active-bg);
    color: var(--nav-text-strong);
    font-weight: var(--fw-semi);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: var(--brand-400);
    opacity: 1;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before,
.fi-sidebar-item-active > .fi-sidebar-item-button::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--sp-3) * -1);
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 2px 2px 0;
    background: var(--nav-marker);
}

/* Schmale Seitenleiste zwischen 768 und 1199 px (§5). */
@media (min-width: 768px) and (max-width: 1199px) {
    .fi-sidebar:not(.fi-sidebar-open) {
        width: var(--sidebar-w-mini);
    }
}

/* ── Karten und Sektionen (§6.2) ────────────────────────────────────────
   Jede Karte hat Haarlinie UND --sh-1. Kartenkopf innerhalb der Karte,
   flach, Haarlinie darunter — keine schwebende Flaeche (§4.1).         */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section {
    background: var(--bg-surface);
    border: var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
}

.fi-section-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--hairline);
}

.fi-section-header-heading {
    font: var(--fw-semi) var(--fs-lg) / var(--lh-tight) var(--font-ui);
    color: var(--text-strong);
    letter-spacing: var(--ls-tight);
}

.fi-section-header-description {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.fi-section-content {
    padding: var(--sp-5);
}

.fi-section-footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: var(--hairline);
    background: var(--bg-surface-alt);
}

/* ── Kennzahl-Kachel (§6.3) ─────────────────────────────────────────────
   Label oben, grosser Wert in mittlerer Strichstaerke, Trend darunter.
   Die Groesse traegt die Hierarchie, nicht das Gewicht (§1.2).         */

.fi-wi-stats-overview-stat {
    padding: var(--sp-5);
    gap: 0;
}

.fi-wi-stats-overview-stat-label {
    font: var(--fw-regular) var(--fs-sm) / var(--lh-base) var(--font-ui);
    color: var(--text-muted);
}

.fi-wi-stats-overview-stat-value {
    margin-top: var(--sp-2);
    font: var(--fw-medium) var(--fs-3xl) / 1.05 var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    letter-spacing: var(--ls-tight);
}

/* Der Trend-Chip fasst Zeichen und Text zusammen (§6.3). Filament setzt
   beide als Geschwister in eine Zeile — deshalb traegt die Zeile den Chip
   und die beiden Kinder nur noch die Schrift. */
.fi-wi-stats-overview-stat div:has(> .fi-wi-stats-overview-stat-description) {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    align-self: flex-start;
    justify-self: start;
    margin-top: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    background: var(--ink-100);
    color: var(--text-muted);
}

.fi-wi-stats-overview-stat-description {
    font: var(--fw-medium) var(--fs-2xs) / 1.6 var(--font-ui);
    color: inherit;
    background: transparent;
}

.fi-wi-stats-overview-stat-description-icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
    color: currentColor;
}

/* Zustandsfarbe: erledigt, offen, fehlgeschlagen, in Einrichtung (§6.6). */
.fi-wi-stats-overview-stat div:has(> .fi-wi-stats-overview-stat-description.fi-color-success) {
    background: var(--ok-100);
    color: var(--ok-500);
}

.fi-wi-stats-overview-stat div:has(> .fi-wi-stats-overview-stat-description.fi-color-warning) {
    background: var(--warn-100);
    color: var(--warn-500);
}

.fi-wi-stats-overview-stat div:has(> .fi-wi-stats-overview-stat-description.fi-color-danger) {
    background: var(--error-100);
    color: var(--error-500);
}

.fi-wi-stats-overview-stat div:has(> .fi-wi-stats-overview-stat-description.fi-color-info),
.fi-wi-stats-overview-stat div:has(> .fi-wi-stats-overview-stat-description.fi-color-primary) {
    background: var(--brand-100);
    color: var(--brand-700);
}

/* Das Zeichen oben rechts bleibt dezent (§6.3). */
.fi-wi-stats-overview-stat-icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
    color: var(--text-faint);
}

/* ── Buttons (§6.1) — Satzschreibweise, --fs-sm, --fw-semi ──────────────*/

.fi-btn {
    height: 38px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    font: var(--fw-semi) var(--fs-sm) / 1 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.fi-btn:hover {
    transform: none;
}

.fi-btn.fi-size-sm {
    height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-xs);
}

.fi-btn.fi-size-lg {
    height: 44px;
    padding: 0 var(--sp-5);
    font-size: var(--fs-md);
}

.fi-btn .fi-btn-icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
}

.fi-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.fi-icon-btn {
    border-radius: var(--r-md);
    box-shadow: none;
}

.fi-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Der Primaerknopf traegt die einzige Aktionsfarbe. */
.fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--action-bg);
    color: var(--text-on-brand);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    background: var(--action-bg-hover);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):active {
    background: var(--action-bg-press);
}

/* Link-Aktionen in Tabellen und Formularen. */
.fi-link {
    font-weight: var(--fw-medium);
    color: var(--brand-500);
}

.fi-link:hover {
    color: var(--brand-600);
}

/* ── Eingabefelder (§6.4) — umrandet, Fokus = Rahmen plus 3-px-Ring ─────*/

.fi-input-wrp {
    background: var(--bg-surface);
    border-radius: var(--r-sm);
    box-shadow: none;
    border: 1px solid var(--border-strong);
    transition:
        border-color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease);
}

.fi-input-wrp:focus-within {
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
    outline: none;
}

.fi-input-wrp.fi-invalid {
    border-color: var(--error-500);
}

.fi-input-wrp.fi-disabled {
    background: var(--bg-sunken);
}

.fi-input,
.fi-select-input,
.fi-fo-textarea {
    font: var(--fw-regular) var(--fs-md) / 1.5 var(--font-ui);
    color: var(--text-strong);
    min-height: 36px;
    padding-inline: var(--sp-3);
}

.fi-input::placeholder {
    color: var(--text-faint);
}

.fi-fo-field-wrp-label,
.fi-fo-field-wrp label {
    font: var(--fw-medium) var(--fs-sm) / 1.4 var(--font-ui);
    color: var(--text-default);
}

.fi-fo-field-wrp-hint,
.fi-fo-field-wrp-helper-text {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.fi-fo-field-wrp-error-message {
    font-size: var(--fs-xs);
    color: var(--error-500);
}

.fi-checkbox-input,
.fi-radio-input {
    border-radius: var(--r-xs);
    border-color: var(--border-strong);
}

.fi-checkbox-input:focus-visible,
.fi-radio-input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Tabellen (§6.5) — Zeilenhoehe 48, Zahlen rechts in Mono ────────────*/

.fi-ta-header-cell {
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface-alt);
    border-bottom: var(--hairline);
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    white-space: nowrap;
}

.fi-ta-header-cell-label {
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    color: var(--text-muted);
}

.fi-ta-cell {
    border-bottom: 1px solid var(--ink-100);
}

/* Die erste Spalte traegt den identifizierenden Wert (§6.5). */
.fi-ta-row .fi-ta-cell:first-of-type .fi-ta-text-item-label {
    font-weight: var(--fw-medium);
    color: var(--text-strong);
}

.fi-ta-row:last-child .fi-ta-cell {
    border-bottom: 0;
}

.fi-ta-row:hover {
    background: var(--ink-050);
}

.fi-ta-text-item-label,
.fi-ta-cell .fi-ta-text {
    font-size: var(--fs-sm);
    color: var(--text-default);
}

/* Zeilenhoehe 48 px (§6.5). Die Polsterung sitzt bei Filament in der
   Spalte, nicht in der Zelle — deshalb hier ueber die Mindesthoehe. */
.fi-ta-cell .fi-ta-text {
    min-height: 48px;
    padding-block: var(--sp-3);
}

/* Betraege, Mengen, Dauern und Daten: rechtsbuendig, Tabellenziffern. */
.fi-ta-text-item-label {
    font-variant-numeric: tabular-nums;
}

/* Betraege, Mengen, Dauern und Daten stehen rechtsbuendig in Mono (§6.5).
   Rechtsbuendig ist eine Entscheidung der Spalte (->alignEnd()); diese
   Ausrichtung ist der einzige verlaessliche Hinweis darauf, dass in der
   Spalte eine Zahl steht. Deshalb haengt die Monoschrift daran. */
.fi-ta-cell .text-end .fi-ta-text-item-label,
.fi-ta-cell .justify-end .fi-ta-text-item-label {
    font-family: var(--font-num);
    color: var(--text-strong);
}

.fi-ta-header-ctn {
    border-bottom: var(--hairline);
}

.fi-ta-header-toolbar {
    padding: var(--sp-3) var(--sp-4);
}

.fi-ta-pagination {
    border-top: var(--hairline);
    background: var(--bg-surface-alt);
    font-size: var(--fs-sm);
}

/* Leerzustand einer Tabelle (§6.10): eine Aufforderung, kein
   "Keine Daten vorhanden". Text und Knopf liefert Filament, die Haltung
   diese Regel — dazu die Bergkontur am unteren Rand.                  */
.fi-ta-empty-state {
    position: relative;
    margin: var(--sp-5);
    padding: var(--sp-7) var(--sp-5);
    border: 1px dashed var(--border-warm);
    border-radius: var(--r-xl);
    background: var(--paper-050);
    overflow: hidden;
}

.fi-ta-empty-state::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 110px;
    background: var(--border-warm);
    -webkit-mask: var(--ridge) no-repeat bottom center / cover;
    mask: var(--ridge) no-repeat bottom center / cover;
    pointer-events: none;
}

.fi-ta-empty-state-icon-ctn {
    background: transparent;
    box-shadow: none;
}

.fi-ta-empty-state-icon {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
    color: var(--text-faint);
}

.fi-ta-empty-state-heading {
    font: var(--fw-medium) var(--fs-2xl) / 1.2 var(--font-display);
    color: var(--text-strong);
}

.fi-ta-empty-state-description {
    max-width: 42ch;
    margin-inline: auto;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ── Badges (§6.6) — Radius 4 px, Satzschreibweise, getoente Flaeche ────*/

.fi-badge {
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    font: var(--fw-semi) var(--fs-2xs) / 1.7 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.fi-badge.fi-color-gray {
    background: var(--ink-100);
    color: var(--ink-600);
}

.fi-badge.fi-color-success {
    background: var(--ok-100);
    color: var(--ok-500);
}

.fi-badge.fi-color-warning {
    background: var(--warn-100);
    color: var(--warn-500);
}

.fi-badge.fi-color-danger {
    background: var(--error-100);
    color: var(--error-500);
}

.fi-badge.fi-color-primary,
.fi-badge.fi-color-info {
    background: var(--brand-100);
    color: var(--brand-700);
}

/* ── Hinweise und Meldungen (§6.7) — getoent plus 3-px-Leiste links ─────*/

.fi-no-notification {
    border-radius: var(--r-md);
    border-inline-start: 3px solid var(--border-default);
    box-shadow: var(--sh-2);
    font-size: var(--fs-sm);
}

.fi-no-notification.fi-color-success {
    background: var(--ok-100);
    border-inline-start-color: var(--ok-500);
}

.fi-no-notification.fi-color-warning {
    background: var(--warn-100);
    border-inline-start-color: var(--warn-500);
}

.fi-no-notification.fi-color-danger {
    background: var(--error-100);
    border-inline-start-color: var(--error-500);
}

.fi-no-notification.fi-color-info,
.fi-no-notification.fi-color-primary {
    background: var(--brand-100);
    border-inline-start-color: var(--brand-500);
}

.fi-no-title {
    font-weight: var(--fw-semi);
    font-size: var(--fs-sm);
    color: var(--text-strong);
}

.fi-no-body {
    font-size: var(--fs-sm);
    color: var(--text-default);
}

/* ── Modal (§6.11) ──────────────────────────────────────────────────────*/

.fi-modal-window {
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    border: var(--hairline);
}

.fi-modal-close-overlay {
    background: rgba(14, 20, 27, 0.45);
}

.fi-modal-heading {
    font: var(--fw-semi) var(--fs-lg) / var(--lh-tight) var(--font-ui);
    color: var(--text-strong);
}

.fi-modal-description {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.fi-modal-footer-actions {
    justify-content: flex-end;
}

/* ── Dropdown ───────────────────────────────────────────────────────────*/

.fi-dropdown-panel {
    border-radius: var(--r-md);
    border: var(--hairline);
    box-shadow: var(--sh-2);
}

.fi-dropdown-list-item {
    font-size: var(--fs-sm);
    border-radius: var(--r-xs);
}

/* ── Tabs, Wizard, Fortschritt ──────────────────────────────────────────*/

.fi-tabs {
    border-radius: var(--r-md);
    background: var(--bg-surface-alt);
    box-shadow: none;
    border: var(--hairline);
}

.fi-tabs-item {
    border-radius: var(--r-xs);
    font: var(--fw-medium) var(--fs-sm) / 1 var(--font-ui);
    text-transform: none;
    letter-spacing: 0;
}

.fi-tabs-item.fi-active {
    background: var(--bg-surface);
    color: var(--brand-600);
}

.fi-fo-wizard-header-step-label {
    font: var(--fw-semi) var(--fs-sm) / 1.3 var(--font-ui);
    color: var(--text-default);
}

.fi-fo-wizard-header-step-description {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ── Avatar und Statuspunkt: die einzigen runden Formen (§4.2.7) ────────*/

.fi-avatar {
    border-radius: var(--r-full);
}

/* Ein Formular ohne eigene Sektionen bekommt die Karte aus §6.2 — sonst
   staende es ohne Traeger auf dem Papier. Enthaelt es bereits Sektionen,
   bleibt es unberuehrt, sonst saessen Karten in einer Karte. */
.fi-page .fi-form:not(:has(.fi-section)) {
    background: var(--bg-surface);
    border: var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: var(--sp-5);
}

/* ── Anmeldeseite (§6.12) ───────────────────────────────────────────────
   Links das Formular auf Papier, rechts die Markenflaeche. Der Verlauf
   auf der Markenflaeche ist der einzige der Anwendung (§4.2.3).       */

.fi-simple-layout {
    background: var(--bg-app);
}

.fi-simple-main {
    background: var(--bg-surface);
    border: var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: var(--sp-7) var(--sp-6);
}

.fi-simple-header-heading {
    font: var(--fw-semi) var(--fs-2xl) / var(--lh-tight) var(--font-display);
    color: var(--text-strong);
    letter-spacing: var(--ls-tight);
}

.fi-simple-header-subheading {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.fi-simple-page,
.fi-simple-main-ctn {
    position: relative;
    z-index: 10;
}

@media (min-width: 1024px) {
    .fi-simple-main-ctn {
        width: 50vw;
        margin-inline-end: 50vw;
    }
}

/* ── Dunkles Erscheinungsbild: Phase 2 (§2) ─────────────────────────────
   Abgeschaltet wird es im Panel (->darkMode(false)); dort verschwindet
   auch der Umschalter. Hier bleibt nur der Hinweis an das Betriebssystem,
   damit Formularfelder und Bildlaufleisten hell bleiben. */

:root {
    color-scheme: light;
}