/* Erzeugt aus resources/css durch "php artisan app: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-Lila nach Design-Basis v1.1 (19.09.2026): #5B3CC4 ist der
       EINZIGE Lila-Wert fuer Schrift, Knoepfe und Akzente. Die Stufen der
       Leiter (Filament braucht 50…950) tragen ausschliesslich die erlaubten
       Flaechen- und Zustandswerte:
         050/100  Lila zart  #EDE8FB  – nur Flaechen
         200…400  Lila hell  #B9A8FF  – nur Flaechen, Balken, Statuspunkte
         500      Lila       #5B3CC4  – Schrift, Knoepfe, Akzente
         600/700  Lila dunkel #4A2FA6 – nur Zustaende (Hover, gedrueckt)
         800…950  Nacht      #3B2F7A  – nur Verlaeufe
       Auf dunklem Grund kommt kein Lila vor (Lila-Regel 3).             */
    --brand-050-rgb: 237, 232, 251;
    --brand-100-rgb: 237, 232, 251;
    --brand-200-rgb: 185, 168, 255;
    --brand-300-rgb: 185, 168, 255;
    --brand-400-rgb: 185, 168, 255;
    --brand-500-rgb: 91, 60, 196;
    --brand-600-rgb: 74, 47, 166;
    --brand-700-rgb: 74, 47, 166;
    --brand-800-rgb: 59, 47, 122;
    --brand-900-rgb: 59, 47, 122;
    --brand-950-rgb: 59, 47, 122;

    --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 ────────────────────────────────────────────────────────
       Telefonie/Sprache. Seit Fassung 2.0.0 Lila statt Bronze (Entscheid
       06.10.2026) - die Design-Basis kennt kein Bronze. Hoechstens ein
       Element pro Bildschirm.                                            */
    --accent-100-rgb: 237, 232, 251;
    --accent-500-rgb: 91, 60, 196;
    --accent-600-rgb: 74, 47, 166;

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

    /* ── GRUND ─────────────────────────────────────────────────────────
       Nebel und Linie aus der Design-Basis v1.1. Die Namen «paper» bleiben,
       damit nicht jede Komponente umgeschrieben werden muss.           */
    --paper-050: #f8f9fb;
    --paper-100: #f2f4f7;   /* Nebel (Design-Basis v1.1): Hintergrund des Arbeitsbereichs */
    --paper-200: #dde2e8;   /* Linie (Design-Basis): 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;
    --navy: #1d2b3a;   /* Design-Basis: Ueberschriften, dunkle Flaechen */

    /* ── 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 Markenlila. */

    /* ── TESTKATALOG (Fassung 2.0.0) ───────────────────────────────────
       Spezifikation 9: der dreigeteilte Balken - gruen bestanden, rot
       fehlgeschlagen, orange offen. Die Zustandsfarben sind gedaempft;
       fuer «offen» braucht es ein echtes Orange, sonst liest man es als
       Braun.                                                            */
    --fortschritt-ok: var(--status-ok-hell);
    --fortschritt-fehler: var(--status-fehler-hell);
    --fortschritt-offen: var(--status-offen-hell);
    --fortschritt-leer: var(--ink-200);

    /* Fassung 2.1.1: helle Statusfarben fuer Balken und Punkte im Testkatalog -
       gruen bestanden, orange offen, rot fehlgeschlagen; hell statt satt. */
    --status-ok-hell: #6cc28f;
    /* Fassung 2.2.0 (Punkt 9D): heller, damit Offen klar von Fehlgeschlagen absticht. */
    --status-offen-hell: #fad78f;
    --status-fehler-hell: #ec8a7a;
    --status-ok-zart: #e8f6ee;
    --status-offen-zart: #fdf3e2;
    --status-fehler-zart: #fdeeeb;
    --status-ok-text: #2f7a4f;
    --status-offen-text: #9a6212;
    --status-fehler-text: #b0452a;

    /* ── SEITENLEISTE (dunkel) ─────────────────────────────────────────*/
    --nav-bg: #1d2b3a;   /* Navy aus der Design-Basis */
    --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(--white);   /* kein Lila auf dunklem Grund */
    --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(--navy);
    --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: "Schibsted Grotesk", 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;
    --fw-bold: 700;   /* Ueberschriften nach Design-Basis v1.1 (Fassung 2.1.0) */
    --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: 10px;   /* Buttons, Dropdowns (Fassung 2.1.0: «Rund» aus der Design-Review) */
    --r-lg: 16px;   /* Karten, Modals, Panels (Fassung 2.1.0: «Rund»)    */
    --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;
    --dur-slow: 600ms;   /* Fortschrittsbalken (Fassung 2.1.0) */
    --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.
   ========================================================================= */

/* Hausschrift aus dem Alpina Brand Kit (Fassung 2.0.0). Eine variable Datei
   deckt alle Schnitte von 400 bis 900 ab; sie liegt im eigenen Haus, damit
   keine Anfrage an einen fremden Schriftdienst hinausgeht. Lizenz: SIL OFL,
   public/fonts/SchibstedGrotesk-OFL.txt. */
@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

*,
*::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 ────────────
   Fassung 2.1.0 (Vorschlag A3): ab lg links die Markenflaeche, rechts das
   Formular auf Papier. Darunter steht die Flaeche als Band ueber dem
   Formular - mit Logo und Anspruch, ohne Begleittext.                    */

.ui-brandpanel {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
    background: linear-gradient(120deg, var(--navy) 0%, rgb(var(--brand-800-rgb)) 100%);
    color: var(--white);
    overflow: hidden;
}

.ui-brandpanel__logo {
    position: relative;
    z-index: 1;
    width: 150px;
    max-width: 50%;
    /* Negativ-Fassung aus dem Brand Kit: vollstaendig weiss, kein Lila auf
       dunklem Grund (Design-Basis v1.1, Lila-Regel 3). */
}

.ui-brandpanel__body {
    position: relative;
    z-index: 1;
}

/* Der Anspruch traegt die Flaeche: gross, fett, das Schlusswort weiss, die
   uebrige Zeile gedimmt (Design-Basis v1.1, «Das lila Schlusswort»). */
.ui-brandpanel__claim {
    margin: 0;
    max-width: 18ch;
    font: var(--fw-bold) 1.875rem / 1.08 var(--font-display);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.ui-brandpanel__gedimmt {
    color: rgba(255, 255, 255, 0.72);
}

.ui-brandpanel__titel {
    margin: var(--sp-3) 0 0;
    font: var(--fw-medium) var(--fs-md) / var(--lh-base) var(--font-ui);
    color: var(--nav-text);
}

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

.ui-brandpanel__fuss {
    display: none;
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--nav-text-faint);
}

/* Das Alpenband liegt am unteren Rand, von Kante zu Kante. */
.ui-brandpanel__ridge {
    position: absolute;
    inset: auto 0 0 0;
    height: 140px;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

@media (min-width: 1024px) {
    .ui-brandpanel {
        position: fixed;
        inset: 0 auto 0 0;
        width: 50vw;
        justify-content: space-between;
        padding: var(--sp-7) var(--sp-7) var(--sp-6);
    }

    .ui-brandpanel__logo {
        width: 190px;
    }

    .ui-brandpanel__claim {
        font-size: clamp(2.5rem, 3.4vw, 3.25rem);
    }

    .ui-brandpanel__titel {
        margin-top: var(--sp-4);
        font-size: var(--fs-lg);
    }

    .ui-brandpanel__text,
    .ui-brandpanel__fuss {
        display: block;
    }

    .ui-brandpanel__ridge {
        height: 220px;
    }
}

/* Unter lg steht das Formular direkt unter dem Band, nicht mitten im
   uebrigen Bildschirm. */
@media (max-width: 1023px) {
    .ui-brandpanel ~ .fi-simple-layout {
        min-height: 0;
        padding-block: var(--sp-5) var(--sp-7);
    }
}

/* Sprachwahl unter dem Anmeldeformular */
.ui-sprachwahl {
    display: flex;
    justify-content: center;
    gap: var(--sp-1);
    margin-top: var(--sp-5);
}

.ui-sprachwahl__link {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    font: var(--fw-semi) var(--fs-xs) / 1 var(--font-ui);
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

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

.ui-sprachwahl__link--an {
    color: var(--text-strong);
    background: var(--bg-surface);
    box-shadow: var(--sh-1), inset 0 0 0 1px var(--border-default);
}

/* ── 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);
}

/* ── 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);
}

/* Der Testkatalog nimmt die ganze Breite: Liste und Test stehen nebeneinander
   (Fassung 2.1.0). Die Rechnungsvorschau rutscht darunter.                 */
@media (min-width: 1024px) {
    .ui-onboarding--breit {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Auf schmalen Bildschirmen liegt die Seitenleiste mit den Schritten hinter
   dem Menueknopf - der Stand steht dann knapp ueber dem Formular.          */
.ui-onboarding__stand {
    margin: 0;
    font: var(--fw-semi) var(--fs-sm) / var(--lh-base) var(--font-ui);
    color: var(--text-muted);
}

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

/* ── Die Onboarding-Strecke in der Seitenleiste (Fassung 2.1.0) ─────────
   Steht zuoberst in der dunklen Navigation, solange die Praxis im
   Onboarding ist. Kein Lila als Schrift auf dunklem Grund (Design-Basis
   v1.1, Lila-Regel 3) - nur der Balken traegt Lila hell als Flaeche.      */

.ui-navschritte {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--nav-border);
}

.ui-navschritte__kopf {
    padding: 0 var(--sp-3) var(--sp-3);
}

.ui-navschritte__titel {
    margin: 0;
    font: var(--fw-semi) var(--fs-2xs) / 1.4 var(--font-ui);
    letter-spacing: 0.04em;
    color: var(--nav-text-faint);
}

.ui-navschritte__stand {
    margin: var(--sp-1) 0 var(--sp-2);
    font-variant-numeric: tabular-nums;
    font: var(--fw-medium) var(--fs-sm) / 1.3 var(--font-ui);
    color: var(--nav-text-strong);
}

.ui-navschritte__balken {
    height: 4px;
    border-radius: var(--r-xs);
    background: var(--nav-active-bg);
    overflow: hidden;
}

.ui-navschritte__balken span {
    display: block;
    height: 100%;
    background: var(--brand-300);
    transition: width var(--dur-slow) var(--ease);
}

.ui-navschritte__liste {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-navschritt__knopf {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 38px;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-md);
    font: var(--fw-medium) var(--fs-sm) / 1.3 var(--font-ui);
    color: var(--nav-text);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.ui-navschritt__punkt {
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-full);
    font: var(--fw-semi) var(--fs-2xs) / 1 var(--font-ui);
    transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.ui-navschritt__zeichen {
    width: 14px;
    height: 14px;
}

.ui-navschritt__name {
    min-width: 0;
}

/* Erledigt: Haken auf heller Flaeche, Schrift gewohnt. */
.ui-navschritt--fertig .ui-navschritt__punkt {
    background: var(--nav-active-bg);
    color: var(--nav-text-strong);
}

/* Aktuell: weisser Punkt, aufgehellte Zeile, Leiste links wie ein aktiver
   Navigationspunkt (§4.1). Der einzige Link der Strecke. */
.ui-navschritt--aktiv .ui-navschritt__knopf {
    background: var(--nav-active-bg);
    color: var(--nav-text-strong);
    font-weight: var(--fw-semi);
}

.ui-navschritt--aktiv .ui-navschritt__knopf::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);
}

.ui-navschritt--aktiv .ui-navschritt__knopf:hover {
    background: var(--nav-hover);
}

.ui-navschritt--aktiv .ui-navschritt__punkt {
    background: var(--white);
    color: var(--navy);
}

/* Fassung 2.2.1 (Entscheid 9H): Die Seite zeigt einen erledigten Schritt
   (zurueck zum Testkatalog) - er traegt die Hervorhebung samt Haken, der offene
   Schritt bleibt Link, tritt aber zurueck. */
.ui-navschritt--angezeigt .ui-navschritt__knopf {
    background: var(--nav-active-bg);
    color: var(--nav-text-strong);
    font-weight: var(--fw-semi);
}

.ui-navschritt--angezeigt .ui-navschritt__knopf::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);
}

.ui-navschritt--im-hintergrund .ui-navschritt__knopf {
    background: transparent;
    color: var(--nav-text);
    font-weight: var(--fw-medium);
}

.ui-navschritt--im-hintergrund .ui-navschritt__knopf::before {
    content: none;
}

/* Noch nicht offen: nur Umriss, gedaempfte Schrift. */
.ui-navschritt--gesperrt .ui-navschritt__knopf {
    color: var(--nav-text-faint);
}

.ui-navschritt--gesperrt .ui-navschritt__punkt {
    box-shadow: inset 0 0 0 1px var(--nav-border);
}

.ui-navschritte__hinweis {
    margin: var(--sp-3) var(--sp-3) 0;
    font-size: var(--fs-xs);
    color: var(--nav-text-faint);
}

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

/* Schmale Seitenleiste zwischen 768 und 1199 px: nur die Punkte (§5). */
@media (min-width: 768px) and (max-width: 1199px) {
    .fi-sidebar:not(.fi-sidebar-open) .ui-navschritte__kopf,
    .fi-sidebar:not(.fi-sidebar-open) .ui-navschritt__name,
    .fi-sidebar:not(.fi-sidebar-open) .ui-navschritte__hinweis {
        display: none;
    }

    .fi-sidebar:not(.fi-sidebar-open) .ui-navschritt__knopf {
        justify-content: center;
        padding-inline: 0;
    }
}

/* ── 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);
}

/* Unter dem randlosen Testkatalog bleibt die linke Spalte meist leer. */
.ui-onboarding--unter-katalog > div:not(:has(*)) {
    display: none;
}

/* ── Kostenhinweis unten in der Navigation (Fassung 2.2.0, Punkt 1C) ────
   Klein und gekürzt; erst ein Klick öffnet das Fenster mit Kostenhinweis
   und Abbruch. Kein Lila als Schrift auf dunklem Grund. */

.ui-navkosten {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--nav-border);
}

.ui-navkosten__knopf {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-radius: var(--r-md);
    background: rgba(var(--ok-500-rgb), 0.18);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}

.ui-navkosten__knopf:hover,
.ui-navkosten__knopf:focus-visible {
    background: rgba(var(--ok-500-rgb), 0.3);
}

.ui-navkosten__punkt {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: var(--r-full);
    background: rgb(var(--ok-300-rgb));
}

.ui-navkosten__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ui-navkosten__titel {
    font: var(--fw-medium) var(--fs-xs) / 1.35 var(--font-ui);
    color: var(--nav-text-strong);
}

.ui-navkosten__unter {
    font: var(--fw-regular) var(--fs-2xs) / 1.3 var(--font-ui);
    color: var(--nav-text-faint);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Willkommen in Schritt 1 (Fassung 2.2.0, Punkt 1A) ────────────────── */

.ui-willkommen {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    border-inline-start: 4px solid var(--brand-500);
    background: var(--brand-050);
}

.ui-willkommen__titel {
    margin: 0;
    font: var(--fw-semi) var(--fs-md) / 1.4 var(--font-ui);
    color: var(--brand-600);
}

.ui-willkommen__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: var(--lh-base);
    color: var(--ink-700);
}

/* ── Behandler und Coaches erfassen, Variante C (Fassung 2.2.0, 7E) ───── */

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

/* Fassung 2.3.0 (1G, Entwurf box-v2): weisse Karte statt Nebel, mehr Luft. */
.ui-erfassung__neu {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
}

.ui-erfassung__neutitel {
    margin: 0;
    font: var(--fw-semi) var(--fs-sm) / 1.4 var(--font-ui);
    color: var(--text-strong);
}

.ui-erfassung__felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--sp-4);
}

/* Fassung 2.3.0 (1G): Funktion als zwei Auswahlkacheln mit Erklaerung. */
.ui-erfassung__kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-4);
}

.ui-erfassung__kachel {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
    padding-inline-end: var(--sp-6);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    text-align: start;
    cursor: pointer;
}

.ui-erfassung__kachel:hover {
    border-color: var(--ink-300);
}

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

/* Die Auswahl: zwei Pixel Lila, der Innenabstand gleicht den Rand aus. */
.ui-erfassung__kachel--an,
.ui-erfassung__kachel--an:hover {
    border: 2px solid var(--brand-500);
    padding: calc(var(--sp-4) - 1px);
    padding-inline-end: calc(var(--sp-6) - 1px);
    /* Ein Hauch Lila zart, wie im Entwurf. */
    background: rgba(var(--brand-050-rgb), 0.35);
}

.ui-erfassung__kachelpunkt {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-full);
    background: var(--bg-surface);
}

.ui-erfassung__kachel--an .ui-erfassung__kachelpunkt {
    top: calc(var(--sp-4) - 1px);
    right: calc(var(--sp-4) - 1px);
    border: 5px solid var(--brand-500);
}

.ui-erfassung__kachelzeichen {
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--brand-050);
    color: var(--brand-500);
}

.ui-erfassung__kachelzeichen svg {
    width: 18px;
    height: 18px;
}

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

.ui-erfassung__kacheltitel {
    font: var(--fw-semi) var(--fs-md) / 1.4 var(--font-ui);
    color: var(--text-strong);
}

.ui-erfassung__kachelerklaerung {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

.ui-erfassung__knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}

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

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

.ui-erfassung__personen {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-erfassung__person {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--ink-100);
}

.ui-erfassung__person--bearbeitet {
    background: var(--brand-050);
    border-radius: var(--r-md);
    padding-inline: var(--sp-2);
}

.ui-erfassung__avatar {
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    background: var(--brand-050);
    color: var(--brand-600);
    font: var(--fw-semi) var(--fs-xs) / 1 var(--font-ui);
}

.ui-erfassung__name {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--text-strong);
}

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

.ui-erfassung__entfernen {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink-400);
    cursor: pointer;
}

.ui-erfassung__entfernen:hover {
    background: var(--ink-100);
    color: var(--error-500);
}

/* ── Onboarding-Schritt im neuen Design (Fassung 2.1.1) ─────────────────
   Wie der Testkatalog: weisse Flaeche ohne Seitentitel. Links der Schritt
   mit «Schritt n von m», Name mit lila Schlusswort und dem Formular,
   rechts Kostenhinweis und Rechnungsvorschau als ruhige Nebel-Karten.    */

.ui-schritt {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    max-width: 74rem;
    margin: 0 auto;
    padding-block: var(--sp-6) var(--sp-7);
}

@media (min-width: 1180px) {
    .ui-schritt {
        grid-template-columns: minmax(0, 1fr) 21rem;
        gap: var(--sp-7);
    }
}

/* Fassung 2.2.0: ohne rechte Spalte (Punkt 1C) steht der Schritt einspaltig. */
.ui-schritt.ui-schritt--einspaltig {
    grid-template-columns: minmax(0, 1fr);
    max-width: 50rem;
}

.ui-schritt--einspaltig .ui-schritt__haupt {
    max-width: none;
}

.ui-schritt__haupt {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
    max-width: 46rem;
}

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

.ui-schritt__kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 40px;
}

.ui-schritt__eyebrow {
    margin: 0;
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-500);
}

.ui-schritt__titel {
    margin: 0;
    font: var(--fw-bold) 2rem / 1.1 var(--font-display);
    letter-spacing: -0.025em;
    color: var(--text-strong);
    text-wrap: balance;
}

.ui-schritt__text {
    margin: 0;
    max-width: 40rem;
    font-size: 0.9375rem;
    line-height: var(--lh-base);
    color: var(--ink-600);
}

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

.ui-schritt__aktion {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
}

.ui-schritt__seite {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}

@media (min-width: 1180px) {
    .ui-schritt__seite {
        position: sticky;
        top: calc(var(--topbar-h) + var(--sp-5));
        align-self: start;
        padding-top: 52px;
    }
}

.ui-schritt__karte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: 1.25rem;
    border-radius: var(--r-lg);
    background: var(--paper-100);
}

.ui-schritt__karte--ok {
    background: var(--status-ok-zart);
}

.ui-schritt__kartenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.ui-schritt__kartentitel {
    margin: 0;
    font: var(--fw-semi) var(--fs-md) / 1.4 var(--font-ui);
    color: var(--text-strong);
}

.ui-schritt__karte--ok .ui-schritt__kartentitel {
    color: var(--status-ok-text);
}

.ui-schritt__kartentext {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--ink-600);
}

.ui-schritt__kartenpfeil {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform var(--dur-base) var(--ease);
}

.ui-schritt__kartenpfeil--zu {
    transform: rotate(-90deg);
}

.ui-schritt__karte .ui-table {
    margin-top: var(--sp-2);
    background: transparent;
}

.ui-schritt__karte .ui-hint {
    margin: var(--sp-2) 0 0;
}

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

/* ── Schritt 10 «Produktivschaltung» (Fassung 2.2.1, Entwurf schritt10-v3) ─
   Links die Tabelle mit Teil 1 / Teil 2, rechts die Nebel-Karte
   «Zusammenfassung» mit Startdatum, Summen, Zustimmung und Knopf.        */

.ui-schritt.ui-schritt--produktiv {
    max-width: 72rem;
}

.ui-schritt__zurueckzeile {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.ui-schritt__zurueck {
    gap: var(--sp-2);
    font-weight: var(--fw-medium);
}

.ui-schritt__zurueckzeichen {
    width: 16px;
    height: 16px;
}

.ui-schritt__trenner {
    width: 1px;
    height: 16px;
    background: var(--border-warm);
}

.ui-produktiv {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
    margin-top: var(--sp-2);
}

@media (min-width: 1180px) {
    .ui-produktiv {
        grid-template-columns: minmax(0, 1fr) 19rem;
    }
}

.ui-produktiv__haupt {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}

.ui-produktiv__karte {
    padding: var(--sp-2) var(--sp-6);
    border: 1px solid var(--border-warm);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    overflow-x: auto;
}

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

.ui-produktiv__tabelle th.ui-produktiv__spalteneyebrow {
    padding: var(--sp-4) 0 var(--sp-2);
    border-bottom: 1px solid var(--border-warm);
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: start;
    color: var(--text-muted);
}

.ui-produktiv__tabelle td {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-warm);
    vertical-align: top;
    font-size: 0.9375rem;
    color: var(--text-default);
}

.ui-produktiv__tabelle .ui-produktiv__zeitraum {
    width: 13rem;
    padding-inline-end: var(--sp-4);
}

@media (max-width: 639px) {
    .ui-produktiv__karte {
        padding-inline: var(--sp-4);
    }

    .ui-produktiv__tabelle .ui-produktiv__zeitraum {
        width: auto;
        padding-inline: var(--sp-2);
    }

    .ui-produktiv__tabelle .ui-produktiv__betrag {
        width: auto;
    }
}

.ui-produktiv__tabelle td.ui-produktiv__zeitraum {
    font-size: var(--fs-md);
    color: var(--text-muted);
}

.ui-produktiv__tabelle .ui-produktiv__betrag {
    width: 9rem;
    text-align: end;
    white-space: nowrap;
    color: var(--text-strong);
}

/* Die Spaltenueberschrift «Betrag» steht rechts ueber den Zahlen - die Regel
   fuer th.ui-produktiv__spalteneyebrow (start) ist spezifischer als die obige. */
.ui-produktiv__tabelle th.ui-produktiv__betrag {
    text-align: end;
}

.ui-produktiv__tabelle td.ui-produktiv__betrag {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.ui-produktiv__tabelle td.ui-produktiv__verbrauch {
    font-family: var(--font-ui);
    color: var(--text-muted);
}

.ui-produktiv__abschnitt td {
    padding: var(--sp-5) 0 var(--sp-2);
}

.ui-produktiv__eyebrow {
    margin: 0;
    font: var(--fw-bold) var(--fs-xs) / 1.4 var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-500);
}

.ui-produktiv__teiltitel {
    margin: 2px 0 0;
    font: var(--fw-bold) 1.125rem / 1.3 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.ui-produktiv__zusatz {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ui-produktiv__tabelle .ui-produktiv__summe td {
    padding: var(--sp-3) 0 var(--sp-5);
    border-top: 2px solid var(--navy);
    border-bottom: 0;
    font-weight: var(--fw-semi);
    color: var(--text-strong);
}

.ui-produktiv__tabelle .ui-produktiv__summe td.ui-produktiv__betrag {
    font-weight: var(--fw-bold);
}

.ui-produktiv__plus {
    display: block;
    font: var(--fw-semi) var(--fs-sm) / 1.4 var(--font-ui);
    color: var(--text-muted);
}

.ui-produktiv__danach {
    padding: 0 var(--sp-1);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-muted);
}

.ui-produktiv__danach p {
    margin: 0;
}

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

.ui-produktiv__zusammenfassung {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--paper-100);
}

@media (min-width: 1180px) {
    .ui-produktiv__zusammenfassung {
        position: sticky;
        top: calc(var(--topbar-h) + var(--sp-5));
    }
}

.ui-produktiv__titel {
    margin: 0;
    font: var(--fw-bold) 1.125rem / 1.3 var(--font-display);
    color: var(--text-strong);
}

.ui-produktiv__zeilen {
    margin: 0;
}

.ui-produktiv__zeile {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    font-size: var(--fs-md);
}

.ui-produktiv__zeile dt {
    color: var(--text-default);
}

.ui-produktiv__zeile dd {
    margin: 0;
    font-family: var(--font-num);
    color: var(--text-strong);
}

.ui-produktiv__zeile--total {
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-warm);
    font-size: 0.9375rem;
    font-weight: var(--fw-bold);
}

.ui-produktiv__zeile--total dt {
    color: var(--text-strong);
}

.ui-produktiv__knopf {
    width: 100%;
}

/* Unter dem randlosen Testkatalog: Kostenhinweis und Vorschau nebeneinander. */
.ui-schritt__unter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    align-items: start;
    gap: var(--sp-4);
    padding-block: var(--sp-6);
}

.ui-schritt__standorte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    max-width: 74rem;
    margin: var(--sp-5) auto 0;
    width: 100%;
}

.ui-schritt__standortlabel {
    margin-inline-end: var(--sp-2);
    font: var(--fw-semi) var(--fs-sm) / 1 var(--font-ui);
    color: var(--text-muted);
}

.ui-schritt__standort {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--r-md);
    background: var(--paper-100);
    font: var(--fw-semi) var(--fs-sm) / 1 var(--font-ui);
    color: var(--ink-600);
    cursor: pointer;
}

.ui-schritt__standort--an {
    background: var(--navy);
    color: var(--white);
}

.ui-schritt__standortstand {
    font-weight: var(--fw-regular);
    opacity: 0.75;
}

/* Fassung 2.2.0: In Schritt 10 ist der Testkatalog über einen Link aufklappbar. */
.ui-schritt__katalogwahl > summary {
    width: max-content;
    font: var(--fw-medium) var(--fs-sm) / 1.4 var(--font-ui);
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ui-schritt__katalogwahl[open] > summary {
    margin-bottom: var(--sp-3);
}

/* =========================================================================
   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 (Fassung 2.1.0 «Basis») ───────────────────────────
   Zeichen auf zartem Lila, kurzer Titel, ein Satz zum naechsten Schritt.  */

.ui-empty {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
}

.ui-empty__ridge {
    display: none;
}

.ui-empty__icon {
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    margin-bottom: var(--sp-2);
    padding: 16px;
    border-radius: var(--r-xl);
    background: var(--brand-050);
    color: var(--brand-500);
    stroke-width: 1.75;
}

.ui-empty__title {
    margin: 0;
    font: var(--fw-semi) var(--fs-lg) / 1.3 var(--font-ui);
    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;
    }
}

/* ── 6.20 Testkatalog (Fassung 2.0.0) ─────────────────────────────────
   Onboarding-Testprozess: Fortschrittsbalken, Testliste, Regelsatz,
   Verlauf. Dieselben Klassen im Kundenportal und im Adminbereich.     */

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

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

.ui-testkatalog__stand {
    flex: 1 1 320px;
    min-width: 0;
}

.ui-testkatalog__zahl {
    margin: 0 0 var(--sp-2);
    font: var(--fw-semi) var(--fs-lg) / 1.3 var(--font-display);
    color: var(--text-strong);
}

.ui-testkatalog__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.ui-fortschritt {
    display: flex;
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: var(--r-xs);
    background: var(--fortschritt-leer);
}

.ui-fortschritt__leer {
    flex: 1 1 auto;
}

.ui-fortschritt__teil {
    display: block;
    height: 100%;
    transition: width 200ms ease;
}

.ui-fortschritt__teil--ok {
    background: var(--fortschritt-ok);
}

.ui-fortschritt__teil--error {
    background: var(--fortschritt-fehler);
}

.ui-fortschritt__teil--warn {
    background: var(--fortschritt-offen);
}

.ui-fortschritt__legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin: var(--sp-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ui-fortschritt__legende li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.ui-fortschritt__punkt--ok {
    background: var(--fortschritt-ok);
}

.ui-fortschritt__punkt--error {
    background: var(--fortschritt-fehler);
}

.ui-fortschritt__punkt--warn {
    background: var(--fortschritt-offen);
}

/* ── Liste links, Test rechts (Fassung 2.1.0, Vorschlag A4) ─────────────
   Die Flaeche misst sich selbst (Container-Abfrage): Im breiten Onboarding
   stehen Liste und Test nebeneinander, in einer schmalen Spalte oder auf dem
   Handy nacheinander - dann zeigt «Liste» den Rueckweg. Masse, Farben und
   Abstaende folgen dem Entwurf «Hausarztpraxis Seetal» aus der Review:
   bestanden Lila, fehlgeschlagen Signal, offen Schiefer hell.              */

.ui-katalog {
    --katalog-ok: var(--status-ok-hell);
    --katalog-fehler: var(--status-fehler-hell);
    --katalog-offen: var(--status-offen-hell);
    --katalog-linie: rgba(29, 43, 58, 0.06);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--bg-surface);
    border: var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ui-katalog__liste {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--katalog-linie);
}

.ui-katalog__listenkopf {
    padding: var(--sp-5) 1.25rem var(--sp-4);
}

.ui-katalog__listentitel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.ui-katalog__name {
    margin: 0;
    font: var(--fw-bold) var(--fs-xl) / 1.08 var(--font-display);
    letter-spacing: -0.025em;
    color: var(--text-strong);
}

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

.ui-katalog__zaehler {
    font: var(--fw-semi) var(--fs-md) / 1 var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}

.ui-katalog__balken {
    display: flex;
    width: 100%;
    height: 6px;
    margin-top: var(--sp-3);
    overflow: hidden;
    border-radius: var(--r-xs);
    background: var(--paper-200);
}

.ui-katalog__balkenteil--ok,
.ui-katalog__balkenteil--fehler,
.ui-katalog__balkenteil--offen {
    display: block;
    height: 100%;
    transition: width var(--dur-slow) var(--ease);
}

.ui-katalog__balkenteil--ok {
    background: var(--katalog-ok);
}

.ui-katalog__balkenteil--fehler {
    background: var(--katalog-fehler);
}

.ui-katalog__balkenteil--offen {
    background: var(--katalog-offen);
}

.ui-katalog__filter {
    display: flex;
    gap: var(--sp-1);
    margin-top: var(--sp-4);
    overflow-x: auto;
    scrollbar-width: none;
}

.ui-katalog__filterknopf {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 0.625rem;
    border: 0;
    border-radius: calc(var(--r-md) - 2px);
    background: transparent;
    font: var(--fw-semi) var(--fs-xs) / 1 var(--font-ui);
    white-space: nowrap;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.ui-katalog__filterknopf:hover {
    background: var(--paper-100);
    color: var(--text-strong);
}

.ui-katalog__filterknopf--an,
.ui-katalog__filterknopf--an:hover {
    background: var(--navy);
    color: var(--white);
}

.ui-katalog__listenrumpf {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 var(--sp-2) var(--sp-2);
}

.ui-katalog__eintraege {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-katalog__eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}

.ui-katalog__eintrag:hover {
    background: rgba(242, 244, 247, 0.7);
}

.ui-katalog__eintrag--an,
.ui-katalog__eintrag--an:hover {
    background: var(--brand-050);
}

.ui-katalog__punkt {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: var(--r-full);
    background: var(--katalog-offen);
}

.ui-katalog__punkt--bestanden {
    background: var(--katalog-ok);
}

.ui-katalog__punkt--fehlgeschlagen {
    background: var(--katalog-fehler);
}

.ui-katalog__eintragtext {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ui-katalog__eintragkopf {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
}

.ui-katalog__eintragtitel {
    overflow: hidden;
    font: var(--fw-medium) var(--fs-md) / 1.45 var(--font-ui);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-strong);
}

.ui-katalog__eintragzeile {
    overflow: hidden;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-katalog__nummer {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    line-height: 1.7;
    font-variant-numeric: tabular-nums;
    color: var(--ink-300);
}

.ui-katalog__leer {
    margin: 0;
    padding: var(--sp-6) var(--sp-4);
    font-size: var(--fs-sm);
    text-align: center;
    color: var(--text-muted);
}

.ui-katalog__listenfuss {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--katalog-linie);
}

.ui-katalog__listenfuss:empty {
    display: none;
}

.ui-katalog__fussknopf {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    font: var(--fw-semi) var(--fs-sm) / 1 var(--font-ui);
    white-space: nowrap;
    color: var(--ink-600);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.ui-katalog__fussknopf:hover {
    background: var(--paper-100);
    color: var(--text-strong);
}

.ui-katalog__fussknopf--rechts {
    margin-inline-start: auto;
}

/* ── Der gewaehlte Test ─────────────────────────────────────────────── */

.ui-katalog__detail {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    background: var(--bg-surface);
}

.ui-katalog__innen {
    display: flex;
    flex-direction: column;
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--sp-6) 1.25rem;
}

.ui-katalog__detailkopf {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.ui-katalog__position {
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.ui-katalog__blaettern {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-inline-start: auto;
}

.ui-katalog__symbolknopf {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink-600);
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.ui-katalog__symbolknopf:hover {
    background: var(--paper-100);
    color: var(--text-strong);
}

.ui-katalog__kleinzeichen {
    width: 16px;
    height: 16px;
    flex: none;
}

.ui-katalog__titel {
    margin: var(--sp-4) 0 0;
    font: var(--fw-bold) var(--fs-2xl) / var(--lh-tight) var(--font-display);
    letter-spacing: -0.025em;
    color: var(--text-strong);
    text-wrap: balance;
}

.ui-katalog__innen > div:has(> .ui-katalog__status) {
    margin-top: var(--sp-3);
}

.ui-katalog__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    font: var(--fw-semi) var(--fs-xs) / 1 var(--font-ui);
    white-space: nowrap;
}

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

.ui-katalog__status--offen {
    background: var(--status-offen-zart);
    color: var(--status-offen-text);
}

.ui-katalog__status--bestanden {
    background: var(--status-ok-zart);
    color: var(--status-ok-text);
}

.ui-katalog__status--fehlgeschlagen {
    background: var(--status-fehler-zart);
    color: var(--status-fehler-text);
}

.ui-katalog__status .ui-katalog__statuspunkt {
    background: var(--katalog-offen);
}

.ui-katalog__status--bestanden .ui-katalog__statuspunkt {
    background: var(--katalog-ok);
}

.ui-katalog__status--fehlgeschlagen .ui-katalog__statuspunkt {
    background: var(--katalog-fehler);
}

/* Alles unter dem Status: 24px Abstand wie im Entwurf. */
.ui-katalog__innen > :not(.ui-katalog__detailkopf, .ui-katalog__titel, div:has(> .ui-katalog__status)) {
    margin-top: var(--sp-5);
}

.ui-katalog__innen > div:has(> .ui-katalog__status) + * {
    margin-top: var(--sp-6);
}

.ui-katalog__text {
    margin-bottom: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text-default);
}

.ui-katalog__regel {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    background: var(--brand-050);
}

.ui-katalog__regelzeichen {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--brand-500);
}

.ui-katalog__regeltitel {
    margin: 0;
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    color: var(--brand-500);
}

.ui-katalog__regeltext {
    margin: 2px 0 0;
    font-size: var(--fs-md);
    line-height: 1.45;
    color: var(--text-strong);
}

.ui-katalog__notiz {
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    background: var(--paper-100);
}

.ui-katalog__notiztitel {
    margin: 0;
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    color: var(--text-muted);
}

.ui-katalog__notiztext {
    margin: 2px 0 0;
    font-size: var(--fs-md);
    color: var(--text-strong);
}

.ui-katalog__anruf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: 1.25rem;
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    box-shadow: 0 1px 2px rgba(29, 43, 58, 0.04), 0 2px 8px rgba(29, 43, 58, 0.04), 0 0 0 1px rgba(29, 43, 58, 0.05);
    transition: box-shadow var(--dur-slow) var(--ease);
}

.ui-katalog__anruf:hover {
    box-shadow: 0 8px 24px rgba(29, 43, 58, 0.07), 0 0 0 1px rgba(29, 43, 58, 0.05);
}

.ui-katalog__anrufkachel {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--paper-100);
    color: var(--text-strong);
}

.ui-katalog__anrufzeichen {
    width: 18px;
    height: 18px;
}

.ui-katalog__anruftext {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

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

.ui-katalog__anrufnummer {
    font: var(--fw-semi) var(--fs-lg) / 1.4 var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    user-select: all;
}

.ui-katalog__abschnitt {
    margin: 0 0 var(--sp-2);
    font: var(--fw-semi) var(--fs-md) / 1.4 var(--font-ui);
    color: var(--text-strong);
}

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

.ui-katalog__ergebnis > .ui-katalog__abschnitt {
    margin-bottom: calc(var(--sp-2) - var(--sp-5));
}

.ui-katalog__ergebnis .ui-error {
    margin: 0;
    font-size: var(--fs-sm);
}

.ui-katalog__wahl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}

.ui-katalog__kachel {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 0;
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    box-shadow: inset 0 0 0 1px var(--paper-200);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: box-shadow var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.ui-katalog__kachel:hover {
    box-shadow: inset 0 0 0 1px var(--ink-300);
}

.ui-katalog__kachel:active {
    transform: scale(0.98);
}

.ui-katalog__kachel:disabled {
    cursor: default;
    opacity: 0.5;
}

.ui-katalog__kachel--ok.ui-katalog__kachel--an {
    background: var(--status-ok-zart);
    box-shadow: inset 0 0 0 2px var(--katalog-ok);
}

.ui-katalog__kachel--fehler.ui-katalog__kachel--an {
    background: var(--status-fehler-zart);
    box-shadow: inset 0 0 0 2px var(--katalog-fehler);
}

.ui-katalog__kachelzeichen {
    width: 22px;
    height: 22px;
    flex: none;
}

.ui-katalog__kachel--ok .ui-katalog__kachelzeichen {
    color: var(--status-ok-text);
}

.ui-katalog__kachel--fehler .ui-katalog__kachelzeichen {
    color: var(--status-fehler-text);
}

.ui-katalog__kacheltitel {
    font: var(--fw-semi) var(--fs-md) / 1.3 var(--font-ui);
    color: var(--text-strong);
}

.ui-katalog__speichern {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.ui-katalog__loeschen {
    margin-inline-start: auto;
    color: var(--status-fehler-text);
}

.ui-katalog__verlauf {
    padding-top: var(--sp-2);
}

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

.ui-katalog__verlaufliste > li {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--fs-md);
}

.ui-katalog__verlaufpunkt {
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: var(--r-full);
    background: var(--ink-300);
}

.ui-katalog__verlauftext {
    margin: 0;
    color: var(--text-strong);
}

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

.ui-katalog__kuerzel {
    margin-bottom: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Schmal: Liste und Test nacheinander, «Liste» fuehrt zurueck. */
@container testkatalog (max-width: 759px) {
    .ui-katalog--detail .ui-katalog__liste {
        display: none;
    }

    .ui-katalog:not(.ui-katalog--detail) .ui-katalog__detail {
        display: none;
    }

    .ui-katalog__eintrag--an,
    .ui-katalog__eintrag--an:hover {
        background: transparent;
    }
}

/* Breit: Liste links mit fester Breite, Test rechts, beide immer sichtbar.
   Gemessen wird .ui-testkatalog - ein Container kann sich nicht selbst
   abfragen. */
.ui-testkatalog {
    container: testkatalog / inline-size;
}

/* Volle Flaeche im Onboarding: randlos, auch auf dem Handy. */
.ui-testkatalog--voll .ui-katalog {
    border: 0;
    border-radius: 0;
}

@container testkatalog (min-width: 760px) {
    .ui-katalog__zurueck {
        display: none;
    }

    .ui-katalog {
        grid-template-columns: minmax(16rem, 22.5rem) minmax(0, 1fr);
    }

    .ui-katalog__liste {
        border-bottom: 0;
        border-inline-end: 1px solid var(--katalog-linie);
    }

    .ui-katalog__innen {
        padding-inline: 2.5rem;
    }

    .ui-katalog__titel {
        font-size: 1.75rem;
    }

    /* Volle Flaeche im Onboarding: so hoch wie das Fenster unter der
       Kopfzeile, Liste und Test rollen je fuer sich. */
    .ui-testkatalog--voll .ui-katalog {
        height: calc(100vh - var(--topbar-h));
        height: calc(100dvh - var(--topbar-h));
    }
}

.ui-testfall__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
}

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

.ui-testfall__titel {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: var(--fw-semi);
    color: var(--text-strong);
}

.ui-testfall__text,
.ui-testfall__regel p,
.ui-testfall__notiz p {
    margin: var(--sp-2) 0 0;
    white-space: pre-line;
}

.ui-testfall__regel,
.ui-testfall__notiz {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-surface-alt);
    border-radius: var(--r-xs);
}

.ui-testfall__regel {
    background: var(--brand-050);
}

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

.ui-testfall__fehler {
    margin-top: var(--sp-3);
}

.ui-testfall__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.ui-regel {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-default);
}

.ui-regel p {
    margin: 0 0 var(--sp-1);
}

.ui-verlauf {
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    background: var(--bg-surface);
}

.ui-verlauf__titel {
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    font-weight: var(--fw-semi);
}

.ui-verlauf__liste {
    margin: 0;
    padding: 0 var(--sp-4) var(--sp-4);
    list-style: none;
    font-size: var(--fs-sm);
}

.ui-verlauf__liste li {
    display: grid;
    grid-template-columns: 9.5rem 7rem 1fr;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--border-default);
}

.ui-verlauf__zeit,
.ui-verlauf__wer {
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .ui-verlauf__liste li {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── 6.21 Termin mit Alpina (Fassung 2.0.0) ──────────────────────────
   Knopf oben rechts im Onboarding: beim Darueberfahren die Terminarten,
   nach dem Klick der Google-Kalender in einem Fenster.                */

.ui-seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.ui-termin {
    position: relative;
}

/* Knopf B5 (Fassung 2.1.1): lila, das Bergzeichen mit «?» im weissen
   Kaestchen. Weiss auf Lila - kein lila Text auf dunklem Grund. */
.ui-termin__knopf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 var(--sp-4) 0 6px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--brand-500);
    box-shadow: 0 1px 2px rgba(var(--ink-900-rgb), 0.12);
    font: var(--fw-semi) var(--fs-md) / 1 var(--font-ui);
    white-space: nowrap;
    color: var(--white);
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.ui-termin__knopf:hover {
    background: var(--brand-600);
}

.ui-termin__knopf:active {
    transform: scale(0.97);
}

.ui-termin__knopf:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.ui-termin__kachel {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--white);
    color: var(--brand-500);
}

.ui-termin__zeichen {
    width: 17px;
    height: 16px;
    font-family: var(--font-ui);
}

.ui-termin__knopf--symbol {
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
}

.ui-termin__knopf--symbol .ui-termin__zeichen {
    width: 20px;
    height: 19px;
}

/* Auswahl T5: Dauer umschalten, darunter die Erklaerung. */
.ui-termin__auswahl {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 27.5rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    padding: 22px;
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    box-shadow: 0 16px 40px rgba(var(--ink-900-rgb), 0.16), 0 0 0 1px rgba(var(--ink-900-rgb), 0.05);
    text-align: start;
    white-space: normal;
}

.ui-termin__titel {
    margin: 0;
    font: var(--fw-bold) 1.125rem / 1.2 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--text-strong);
}

.ui-termin__dauer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    gap: var(--sp-1);
    padding: var(--sp-1);
    border-radius: 12px;
    background: var(--paper-100);
}

.ui-termin__dauerknopf {
    height: 38px;
    padding: 0 var(--sp-2);
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: var(--fw-semi) var(--fs-md) / 1 var(--font-ui);
    white-space: nowrap;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.ui-termin__dauerknopf:hover {
    color: var(--text-strong);
}

.ui-termin__dauerknopf--an,
.ui-termin__dauerknopf--an:hover {
    background: var(--white);
    box-shadow: 0 1px 3px rgba(var(--ink-900-rgb), 0.12);
    color: var(--text-strong);
}

.ui-termin__vorschau {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--brand-050);
}

.ui-termin__vorschaukopf {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: 6px;
}

.ui-termin__ring {
    flex: none;
    width: 40px;
    height: 40px;
}

.ui-termin__ringgrund,
.ui-termin__ringteil {
    fill: none;
    stroke-width: 5;
}

.ui-termin__ringgrund {
    stroke: var(--white);
}

.ui-termin__ringteil {
    stroke: var(--brand-500);
    stroke-linecap: round;
}

.ui-termin__anlass {
    margin: 0;
    font: var(--fw-bold) var(--fs-lg) / 1.3 var(--font-ui);
    color: var(--text-strong);
}

.ui-termin__satz {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-600);
}

.ui-termin__passt {
    margin: 0;
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    color: var(--brand-500);
}

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

.ui-termin__punkte > li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--text-strong);
}

.ui-termin__haken {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--brand-500);
}

.ui-termin__los {
    justify-content: center;
    height: 44px;
}

.ui-termin__pfeil {
    width: 16px;
    height: 16px;
}

.ui-termin__fenster {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(var(--ink-900-rgb), 0.45);
}

.ui-termin__dialog {
    width: min(100%, 52rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--bg-surface);
    border-radius: var(--r-md);
}

.ui-termin__dialogkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-default);
}

.ui-termin__dialogtitel {
    margin: 0;
    font: var(--fw-semi) var(--fs-lg) / 1.3 var(--font-display);
}

.ui-termin__kalender iframe {
    display: block;
    width: 100%;
    min-height: 600px;
    border: 0;
}

.ui-onboarding__katalog {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border-default);
}

.ui-testfall__original {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-testfall__original summary {
    cursor: pointer;
}


/* ── Testbereich, Variante 4 (Fassung 2.2.0, Änderungsliste go1, 9I) ─────
   Lila Fläche, zwei weisse Karten: links der Test, rechts Testnummer und
   Ergebnis (9F). Der Weissraum zur Liste ist halbiert (9E): der Bereich
   steht links an der Liste statt mittig. */

.ui-katalog__innen.ui-testbereich {
    max-width: 62rem;
    margin: 0;
    padding: var(--sp-5) 1.25rem var(--sp-6);
    gap: var(--sp-4);
}

.ui-testbereich__kopf {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-testbereich__termin {
    margin-inline-start: auto;
}

.ui-testbereich__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-radius: var(--r-xl, 18px);
    background: var(--brand-050);
}

@container testkatalog (min-width: 1000px) {
    .ui-testbereich__raster {
        grid-template-columns: minmax(0, 1fr) 18.5rem;
        align-items: start;
    }
}

.ui-testbereich__karte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    padding: 1.375rem;
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: 0 1px 3px rgba(var(--brand-800-rgb), 0.08);
}

.ui-testbereich__karte--anruf {
    border-top: 4px solid var(--brand-500);
}

.ui-testbereich__marke {
    margin: 0;
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    color: var(--brand-600);
}

.ui-testbereich__nummer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--ink-100);
}

.ui-testbereich__telefon {
    margin: 0;
    font: var(--fw-bold) 1.375rem / 1.2 var(--font-display);
    letter-spacing: 0.01em;
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}

.ui-testbereich__hilfe {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--brand-600);
}

.ui-testbereich__ergebnis {
    display: grid;
    gap: var(--sp-2);
}

.ui-testbereich__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    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);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.ui-testbereich__knopf:disabled {
    opacity: 0.55;
    cursor: default;
}

.ui-testbereich__knopf--ok {
    background: var(--ok-500);
    color: var(--white);
}

.ui-testbereich__knopf--fehler {
    background: var(--white);
    border-color: rgb(var(--error-300-rgb));
    color: var(--error-500);
}

.ui-testbereich__knopf--an {
    box-shadow: 0 0 0 3px rgba(var(--brand-500-rgb), 0.35);
}

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

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

.ui-testbereich__link {
    padding: 0;
    border: 0;
    background: transparent;
    font: var(--fw-medium) var(--fs-sm) / 1.4 var(--font-ui);
    color: var(--ink-700);
    cursor: pointer;
}

.ui-testbereich__link:hover,
.ui-testbereich__link:focus-visible {
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ui-testbereich .ui-katalog__verlauf {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--ink-100);
}

/* Punkt 9K: «Eigenen Test anlegen» und «PDF-Report» direkt unter dem Balken. */
.ui-katalog__listenknoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.ui-katalog__listenknoepfe .ui-katalog__fussknopf {
    padding-inline: 0;
}

/* Punkt 9H: Rückfrage vor dem Löschen. */
.ui-rueckfrage {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(14, 20, 27, 0.45);
}

.ui-rueckfrage__fenster {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: min(28rem, 100%);
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: 0 20px 50px rgba(14, 20, 27, 0.25);
}

.ui-rueckfrage__titel {
    margin: 0;
    font: var(--fw-semi) var(--fs-md) / 1.4 var(--font-ui);
    color: var(--text-strong);
}

.ui-rueckfrage__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--ink-700);
}

.ui-rueckfrage__knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}

.ui-testbereich__speichern .ui-btn {
    justify-content: center;
    height: auto;
    min-height: 40px;
    padding-block: var(--sp-2);
    white-space: normal;
    text-align: center;
}

/* ── Fassung 2.2.1: Testkatalog Schritt 9 ──────────────────────────────── */

/* 9F/G: «Ich bin fertig mit Testen …» oben rechts im Testbereich, neben
   dem Stand. Grau und gesperrt, bis alle Tests bestanden sind. */
.ui-fertigleiste {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-3) 1.25rem;
    border-bottom: 1px solid var(--katalog-linie);
    background: var(--bg-surface);
}

@container testkatalog (min-width: 760px) {
    .ui-fertigleiste {
        padding-inline: 2.5rem;
    }
}

.ui-fertigleiste__stand {
    margin: 0;
    font: var(--fw-medium) var(--fs-sm) / 1.4 var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.ui-fertigknopf {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    border: 2px solid transparent;
    border-radius: var(--r-md);
    background: var(--ink-100);
    font: var(--fw-semi) var(--fs-sm) / 1.3 var(--font-ui);
    text-align: start;
    color: var(--text-faint);
    cursor: not-allowed;
}

.ui-fertigknopf--bereit {
    background: var(--ok-500);
    color: var(--white);
    cursor: pointer;
    animation: ui-fertig-puls 1.25s ease-in-out 4;
}

.ui-fertigknopf--bereit:hover,
.ui-fertigknopf--bereit:focus-visible {
    background: rgb(var(--ok-600-rgb));
}

/* Vier Takte à 1.25 s = 5 Sekunden, grüner Rahmen (Entscheid 9G). */
@keyframes ui-fertig-puls {
    0%, 100% {
        border-color: transparent;
        box-shadow: 0 0 0 0 rgba(var(--ok-400-rgb), 0);
    }

    50% {
        border-color: rgb(var(--ok-300-rgb));
        box-shadow: 0 0 0 6px rgba(var(--ok-400-rgb), 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-fertigknopf--bereit {
        animation: none;
        border-color: rgb(var(--ok-300-rgb));
    }
}

/* ── Fassung 2.3.0 (Entscheid 1K): Testrunden ──────────────────────────── */

/* Nach «Schritt 10 go» nur noch der Weg zurück - ohne Pulsieren. */
.ui-fertigknopf--ruhig {
    animation: none;
}

/* Testergebnis-Gespräch: der Satz links, der Knopf rechts daneben. */
.ui-fertigleiste__gespraech {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    flex: 1 1 22rem;
}

.ui-fertigleiste__text {
    flex: 1 1 16rem;
    max-width: 34rem;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--ink-700);
}

.ui-gespraech {
    display: inline-flex;
}

/* Korrektur T6 (Pruefung 2.3.0): Die Leiste steht zweimal im Katalog. Schmal
   (Handy) oberhalb des Katalogs - so auch in der Listenansicht -, breit oben
   im Testbereich. Oben steht sie im Seitenfluss, nicht «sticky»: Sonst glitte
   sie unter die Kopfzeile des Portals. */
.ui-fertigleiste--schmal {
    position: static;
}

@container testkatalog (max-width: 759px) {
    .ui-fertigleiste--breit {
        display: none;
    }
}

@container testkatalog (min-width: 760px) {
    .ui-fertigleiste--schmal {
        display: none;
    }
}

.ui-gespraech .ui-btn {
    gap: var(--sp-2);
}

/* 9B: Folgetests einer Kette eingerückt, mit Linie zum Vorgänger. */
.ui-katalog__kettenglied {
    position: relative;
    margin-inline-start: var(--sp-4);
}

.ui-katalog__kettenglied::before {
    content: "";
    position: absolute;
    inset-inline-start: -4px;
    top: -10px;
    bottom: 50%;
    width: 10px;
    border-inline-start: 1px solid var(--ink-300);
    border-bottom: 1px solid var(--ink-300);
    border-end-start-radius: 6px;
}

.ui-kette {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    margin: var(--sp-1) 0 0;
    padding: 0;
    list-style: none;
}

.ui-kette__glied {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.ui-kette__glied + .ui-kette__glied::before {
    content: "→";
    color: var(--text-faint);
}

.ui-kette__knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    background: var(--white);
    font: var(--fw-semi) var(--fs-xs) / 1 var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--text-default);
    cursor: pointer;
}

.ui-kette__knopf .ui-katalog__punkt {
    margin-top: 0;
}

.ui-kette__glied--hier .ui-kette__knopf {
    border-color: var(--brand-500);
    background: var(--brand-050);
    color: var(--brand-600);
}

/* 9D: Erwartetes Ergebnis, getrennt von der Beschreibung. */
.ui-katalog__erwartet {
    padding: var(--sp-3) var(--sp-4);
    border-inline-start: 3px solid var(--status-ok-hell);
    border-radius: var(--r-sm);
    background: var(--status-ok-zart);
}

.ui-katalog__erwartettitel {
    margin: 0;
    font: var(--fw-semi) var(--fs-xs) / 1.4 var(--font-ui);
    color: var(--status-ok-text);
}

.ui-katalog__erwartettext {
    margin: 2px 0 0;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text-strong);
}

/* 9E: Bearbeiten und Löschen als farbige Symbole, Bezeichnung als Tooltip. */
.ui-symbolknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}

.ui-symbolknopf__zeichen {
    width: 18px;
    height: 18px;
}

.ui-symbolknopf--bearbeiten {
    background: var(--brand-050);
    color: var(--brand-600);
}

.ui-symbolknopf--bearbeiten:hover,
.ui-symbolknopf--bearbeiten:focus-visible {
    background: var(--brand-100);
    border-color: var(--brand-200);
}

.ui-symbolknopf--loeschen {
    background: var(--status-fehler-zart);
    color: var(--status-fehler-text);
}

.ui-symbolknopf--loeschen:hover,
.ui-symbolknopf--loeschen:focus-visible {
    border-color: rgb(var(--error-300-rgb));
}

.ui-testbereich__links {
    gap: var(--sp-2);
}

/* Korrektur L1 (2.3.0): Testrunde fertig - Knöpfe der Praxis gesperrt. */
.ui-symbolknopf:disabled,
.ui-katalog__fussknopf:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 9A: Testpatienten unter der Rufnummer, 9B: Testpatient der Kette. */
.ui-testbereich__patienten,
.ui-testbereich__kettenpatient {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--ink-100);
}

.ui-testbereich__patientenliste {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: var(--paper-100);
    list-style: none;
}

.ui-testbereich__patientenliste li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-strong);
}

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

.ui-testbereich__kettentext {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-strong);
}

/* Das Auswahlfeld erbt das Pfeilbild des Formular-Plugins; ohne diese Angaben
   wiederholt es sich über die ganze Breite. */
.ui-testbereich__kettenpatient .ui-select {
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25em 1.25em;
}

/* ── Fragezeichen mit Hinweis (Fassung 2.2.1, Entscheid 2I, maske-v1) ──── */
.ui-hilfefrage {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: var(--sp-1);
    cursor: help;
}

.ui-hilfefrage__punkt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ink-500);
    border-radius: var(--r-full);
    font: var(--fw-bold) 11px / 1 var(--font-ui);
    color: var(--ink-500);
}

.ui-hilfefrage:hover .ui-hilfefrage__punkt,
.ui-hilfefrage:focus-visible .ui-hilfefrage__punkt {
    border-color: var(--brand-500);
    background: var(--brand-050);
    color: var(--brand-500);
}

.ui-hilfefrage:focus-visible {
    outline: none;
}

.ui-hilfefrage__text {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: -24px;
    z-index: 30;
    width: min(21rem, 80vw);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--navy);
    box-shadow: 0 8px 24px rgba(29, 43, 58, 0.18);
    font: var(--fw-regular) var(--fs-sm) / 1.5 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--white);
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}

.ui-hilfefrage__text::before {
    content: "";
    position: absolute;
    top: -6px;
    inset-inline-start: 27px;
    width: 12px;
    height: 12px;
    background: var(--navy);
    transform: rotate(45deg);
}

.ui-hilfefrage:hover .ui-hilfefrage__text,
.ui-hilfefrage:focus-visible .ui-hilfefrage__text {
    visibility: visible;
    opacity: 1;
}

/* =========================================================================
   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;
}

/* =========================================================================
   finanzen.css — Telefonminuten, Partner-Bereich und Sales-Ansicht
   (Fassung 2.2.1). Eigene Datei, damit die Bereiche der parallel gebauten
   Teile sich in layout.css und components.css nicht in die Quere kommen.
   ========================================================================= */

/* ── Filterleiste ───────────────────────────────────────────────────────*/

.ui-fin-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface-alt);
    border: var(--hairline);
    border-radius: var(--r-lg);
}

.ui-fin-filter__feld {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 11rem;
}

.ui-fin-filter .ui-select,
.ui-fin-filter .ui-input {
    width: auto;
    min-width: 11rem;
}

/* Filaments Formularstil legt einen eigenen Pfeil auf jedes select - einer genuegt. */
.ui-fin-filter .ui-select {
    background-image: none;
    appearance: auto;
    padding-right: var(--sp-2);
}

.ui-fin-filter__rechts {
    margin-left: auto;
}

.ui-fin-segment {
    display: inline-flex;
    padding: 2px;
    background: var(--bg-surface);
    border: var(--hairline);
    border-radius: var(--r-md);
}

.ui-fin-segment__knopf {
    padding: var(--sp-1) var(--sp-3);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    font: var(--fw-medium) var(--fs-sm) / 1.6 var(--font-ui);
    cursor: pointer;
}

.ui-fin-segment__knopf--an {
    background: var(--brand-100);
    color: var(--brand-600);
}

.ui-fin-minuten {
    width: 8.5rem;
    margin-left: auto;
}

.ui-fin-fuss {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* ── Kennzahlen ─────────────────────────────────────────────────────────*/

.ui-fin-kacheln {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

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

.ui-fin-kachel__waehrung {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-right: var(--sp-1);
}

.ui-fin-kachel__neben {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-fin-kachel__hinweis {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--warn-100);
    color: var(--warn-500);
    font-size: var(--fs-xs);
}

.ui-fin-kachel__warnung {
    color: var(--error-500);
}

/* ── Zweispaltig: Diagramm links, Seitenkarte rechts ────────────────────*/

.ui-fin-zweier {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}

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

/* ── Balkendiagramm (inline SVG) ────────────────────────────────────────*/

.ui-fin-diagramm {
    width: 100%;
    height: auto;
    display: block;
}

.ui-fin-diagramm__linie {
    stroke: var(--ink-100);
    stroke-dasharray: 2 3;
}

.ui-fin-diagramm__achse {
    fill: var(--text-muted);
    font: var(--fs-2xs) var(--font-num);
}

.ui-fin-diagramm__wert {
    fill: var(--text-default);
    font: var(--fs-2xs) var(--font-num);
}

.ui-fin-balken--leise {
    fill: var(--brand-200);
}

.ui-fin-balken--stark {
    fill: var(--brand-500);
}

.ui-fin-balken--grau {
    fill: var(--ink-200);
}

.ui-fin-legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-fin-legende__punkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: var(--sp-1);
    border-radius: var(--r-xs);
    vertical-align: -1px;
}

.ui-fin-legende__punkt--stark {
    background: var(--brand-500);
}

.ui-fin-legende__punkt--leise {
    background: var(--brand-200);
}

.ui-fin-legende__punkt--grau {
    background: var(--ink-200);
}

/* ── Status-Liste (Praxen nach Status) ──────────────────────────────────*/

.ui-fin-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
}

.ui-fin-status__spur {
    height: 6px;
    background: var(--ink-100);
    border-radius: var(--r-xs);
    overflow: hidden;
}

.ui-fin-status__fuellung {
    display: block;
    height: 100%;
    background: var(--brand-500);
}

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

.ui-fin-trenner {
    grid-column: 1 / -1;
    border-top: var(--hairline);
}

/* ── Kennzahlliste rechts (Sales: Kunden) ───────────────────────────────*/

.ui-fin-liste {
    display: flex;
    flex-direction: column;
}

.ui-fin-liste__zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: var(--hairline);
}

.ui-fin-liste__zeile:first-child {
    border-top: 0;
}

.ui-fin-liste__unter {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-fin-liste__zahl {
    font: var(--fw-medium) var(--fs-xl) / 1 var(--font-num);
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}

/* ── Aufklappbare Partner-Tabelle ───────────────────────────────────────*/

.ui-fin-zeile--gruppe td:first-child {
    padding-left: var(--sp-6);
}

.ui-fin-zeile--praxis td:first-child {
    padding-left: var(--sp-7);
    color: var(--text-muted);
}

.ui-fin-zeile--summe td {
    font-weight: var(--fw-semi);
    border-top: var(--hairline);
}

.ui-fin-aufklapper {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text-strong);
    font: inherit;
    font-weight: var(--fw-semi);
    cursor: pointer;
    text-align: left;
}

.ui-fin-abschnitt {
    margin-top: var(--sp-2);
    font: var(--fw-semi) var(--fs-lg) / var(--lh-tight) var(--font-ui);
    color: var(--text-strong);
}

/* ── Partner-Logo im Praxisportal ───────────────────────────────────────*/

.ui-partnerlogo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5) 0;
    border-top: 1px solid var(--nav-hover);
}

.ui-partnerlogo__text {
    font-size: var(--fs-2xs);
    color: var(--nav-text-faint);
}

.ui-partnerlogo__marke {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--nav-text-strong);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
}

.ui-partnerlogo__bild {
    max-height: 28px;
    max-width: 120px;
}

/* =========================================================================
   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: Tabellenziffern - nur in diesen
   Spalten (Korrektur T14, Pruefung 2.3.0). Auf jeder Textspalte bekamen mit
   Schibsted Grotesk auch Satzzeichen feste Breite («bestätigen .»).
   ui-ziffern setzt AppServiceProvider::zahlenspaltenKennzeichnen() an
   Datums-, Zeit-, Zahl- und Geldspalten; rechtsbuendige Spalten sind nach
   §6.5 ohnehin Zahlen. */
.fi-ta-cell .ui-ziffern .fi-ta-text-item-label,
.fi-ta-cell .text-end .fi-ta-text-item-label,
.fi-ta-cell .justify-end .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, Fassung 2.1.0 «Basis»): ruhig und
   mittig - Zeichen auf zartem Lila, kurzer Titel, ein Satz, der sagt, was
   als Naechstes kommt. Text und Knopf liefert Filament.                 */
.fi-ta-empty-state {
    padding: var(--sp-8) var(--sp-5);
}

.fi-ta-empty-state-icon-ctn {
    width: 56px;
    height: 56px;
    border-radius: var(--r-xl);
    background: var(--brand-050);
    box-shadow: none;
}

.fi-ta-empty-state-icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
    color: var(--brand-500);
}

.fi-ta-empty-state-heading {
    margin-top: var(--sp-2);
    font: var(--fw-semi) var(--fs-lg) / 1.3 var(--font-ui);
    color: var(--text-strong);
}

.fi-ta-empty-state-description {
    max-width: 42ch;
    margin-inline: auto;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    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);
}

/* Neben der Markenflaeche steht das Formular frei auf Weiss (Vorschlag A3). */
@media (min-width: 1024px) {
    .fi-simple-layout {
        background: var(--bg-surface);
    }

    .fi-simple-main {
        border: 0;
        box-shadow: none;
    }
}

.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;
}

/* Fassung 2.1.0 (Vorschlag A3): Das Formular steht rechts, die Markenflaeche
   links. Das Logo steht auf der Markenflaeche - ueber dem Formular nicht
   noch einmal. */
.fi-simple-layout:has(~ .ui-brandpanel) .fi-logo,
.ui-brandpanel ~ .fi-simple-layout .fi-logo,
.ui-brandpanel ~ * .fi-simple-layout .fi-logo {
    display: none;
}

@media (min-width: 1024px) {
    .fi-simple-main-ctn {
        width: 50vw;
        margin-inline-start: 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;
}

/* Das kompakte Alpina-Logo (Fassung 2.0.0): in der dunklen Seitenleiste die
   Negativ-Fassung, ueberall sonst die farbige. Siehe Erscheinungsbild::markenlogo(). */
.ui-markenlogo {
    display: block;
    height: 100%;
    width: auto;
}

.ui-markenlogo--dunkel {
    display: none;
}

.fi-sidebar .ui-markenlogo--dunkel {
    display: block;
}

.fi-sidebar .ui-markenlogo--hell {
    display: none;
}

/* ── Testkatalog ueber die ganze Flaeche (Fassung 2.1.0, Vorschlag A4) ──
   Im Onboarding-Schritt «Testkatalog» steht der Katalog randlos neben der
   Seitenleiste: kein Seitentitel, kein Eyebrow, kein Innenabstand. Was
   darunter folgt (Kostenhinweis, Vorschau), bekommt den Abstand zurueck. */

.fi-main:has(.ui-testkatalog--voll) {
    max-width: none;
    padding-inline: 0;
}

.fi-page:has(.ui-testkatalog--voll) > section {
    padding-block-start: 0;
}

.fi-page:has(.ui-testkatalog--voll) .fi-header,
.fi-page:has(.ui-testkatalog--voll) > .ui-kontext {
    display: none;
}

.ui-testkatalog--voll ~ * {
    margin-inline: var(--content-pad-x);
}

@media (max-width: 767px) {
    .ui-testkatalog--voll ~ * {
        margin-inline: var(--sp-4);
    }
}

/* ── Onboarding-Schritt im neuen Design (Fassung 2.1.1) ─────────────────
   Weisse Flaeche ohne Seitentitel und Eyebrow wie beim Testkatalog; die
   Filament-Bausteine im Formular bekommen die weichen Karten, die runden
   Felder und den grossen Primaerknopf aus dem Entwurf A4.               */

.fi-main-ctn:has(.ui-schritt),
.fi-main-ctn:has(.ui-testkatalog--voll) {
    background: var(--bg-surface);
}

.fi-page:has(.ui-schritt) .fi-header,
.fi-page:has(.ui-schritt) > .ui-kontext {
    display: none;
}

.fi-page:has(.ui-schritt) > section {
    padding-block-start: 0;
}

.ui-schritt .fi-section {
    border: 0;
    box-shadow: 0 1px 2px rgba(var(--ink-900-rgb), 0.04), 0 2px 8px rgba(var(--ink-900-rgb), 0.04), 0 0 0 1px rgba(var(--ink-900-rgb), 0.06);
}

.ui-schritt .fi-section-header {
    padding: 1.25rem var(--sp-5) 0;
    border-bottom: 0;
}

.ui-schritt .fi-section-header-heading {
    font: var(--fw-bold) var(--fs-lg) / 1.3 var(--font-display);
    letter-spacing: -0.01em;
}

.ui-schritt .fi-section-content-ctn {
    border-top: 0;
}

.ui-schritt .fi-section-content {
    padding: 1.25rem var(--sp-5) var(--sp-5);
}

.ui-schritt .fi-input-wrp {
    border-color: var(--paper-200);
    border-radius: var(--r-md);
}

.ui-schritt .fi-input-wrp:hover {
    border-color: var(--ink-300);
}

.ui-schritt .fi-input-wrp:focus-within {
    border-color: var(--border-focus);
}

.ui-schritt .fi-input,
.ui-schritt .fi-select-input {
    min-height: 42px;
}

.ui-schritt .fi-fo-field-wrp-label,
.ui-schritt .fi-fo-field-wrp label {
    font-weight: var(--fw-semi);
}

.ui-schritt__aktion .fi-btn.fi-color-primary {
    height: 44px;
    padding: 0 1.25rem;
    font-size: var(--fs-md);
    box-shadow: 0 1px 2px rgba(var(--ink-900-rgb), 0.12);
}

.ui-schritt .fi-fo-repeater-item,
.ui-schritt .fi-ta-ctn {
    border-radius: var(--r-lg);
}


/* ── Neues Design überall (Fassung 2.2.0, Änderungsliste go1, Variante B) ──
   Wie die Onboarding-Schritte: weisse Fläche statt Nebel-Grau, lila Eyebrow
   über dem Titel. Listen und Übersichten tragen den grossen Titel mit lila
   Schlusswort (Vorlage vendor/filament-panels/components/header). Karten und
   Tabellen bekommen statt Schatten eine feine Linie, damit sie sich auf Weiss
   abheben. Gilt im Praxisportal und im Adminbereich. */

.fi-body,
.fi-layout,
.fi-main-ctn,
.fi-topbar nav {
    background: var(--bg-surface);
}

.ui-kontext,
.ui-kontext * {
    color: var(--brand-500);
    font-weight: var(--fw-semi);
    letter-spacing: 0.06em;
}

.fi-header-heading.ui-titel-schluss {
    font: var(--fw-bold) 2rem / 1.1 var(--font-display);
    letter-spacing: -0.025em;
    color: var(--text-strong);
}

.fi-header-heading.ui-titel-schluss .ui-schlusswort {
    color: var(--brand-500);
}

.fi-ta-ctn,
.fi-section:not(.ui-schritt .fi-section),
.fi-wi-stats-overview-stat {
    box-shadow: none;
    border: 1px solid var(--ink-200);
}

/* ==========================================================================
   Fassung 2.2.1 — Abschnitt «Generell» (Entscheide vom 14.10.2026)

   Eine eigene Datei, nach filament.css eingebunden: Sie baut auf den Tokens
   und den Bausteinen davor auf und muss Filaments Kartenregeln dort, wo die
   Entwürfe es verlangen, überstimmen können.
   ========================================================================== */

/* ── Fragezeichen mit Hinweis (2I) ──────────────────────────────────────
   Hinter dem Seitentitel «Behandler» und «Coaches». Ohne Skript: Der Text
   erscheint bei :hover und wenn das Zeichen mit der Tastatur angesteuert
   wird (:focus-within).                                                   */

.ui-hinweis {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-inline-start: var(--sp-2);
    outline: none;
}

.ui-hinweis__zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--brand-500);
    /* r-lg auf 22px ist rund - --r-full bleibt Avataren vorbehalten (§4.2.7). */
    border-radius: var(--r-lg);
    background: var(--brand-050);
    color: var(--brand-500);
    font: var(--fw-bold) var(--fs-xs) / 1 var(--font-ui);
    letter-spacing: 0;
    cursor: help;
}

.ui-hinweis:focus-visible .ui-hinweis__zeichen {
    box-shadow: var(--focus-ring);
}

.ui-hinweis__text {
    position: absolute;
    top: calc(100% + var(--sp-2));
    left: 50%;
    z-index: var(--z-dropdown);
    width: max-content;
    max-width: min(22rem, 80vw);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--navy);
    color: var(--white);
    font: var(--fw-regular) var(--fs-sm) / var(--lh-base) var(--font-ui);
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    box-shadow: var(--sh-3);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}

.ui-hinweis:hover .ui-hinweis__text,
.ui-hinweis:focus-within .ui-hinweis__text {
    visibility: visible;
    opacity: 1;
}

/* ── Maske Behandler/Coach (2E, Entwurf «Maske v1») ─────────────────────
   Eine schmale Karte (rund 640px), darin die Gruppen «Person» und
   «Eintritt» untereinander, getrennt durch eine Linie. Die Gruppentitel
   klein und in Versalien. Die Breite haengt an .fi-main, weil filament.css
   dort --content-max setzt und Filaments eigene Breitenklasse ueberstimmt. */

.fi-main:has(.ui-maske) {
    max-width: calc(40rem + 2 * var(--content-pad-x));
}

.ui-maske {
    background: var(--bg-surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ui-maske .fi-section.ui-maskengruppe {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.ui-maske .fi-section.ui-maskengruppe + .fi-section.ui-maskengruppe,
.ui-maske .fi-fo-component-ctn > * + * .fi-section.ui-maskengruppe {
    border-top: 1px solid var(--ink-200);
}

.ui-maske .ui-maskengruppe .fi-section-header {
    padding: var(--sp-5) var(--sp-5) 0;
    border-bottom: 0;
}

.ui-maske .ui-maskengruppe .fi-section-header-heading .ui-eyebrow {
    color: var(--text-muted);
}

.ui-maske .ui-maskengruppe .fi-section-content-ctn {
    border-top: 0;
}

/* ── Aufnahmestopps (2B) ────────────────────────────────────────────────
   Je Standort eine Karte: die ganze Praxis, dann Behandler, dann Coaches.
   Jede Zeile ist ein Knopf, der die Maske öffnet.                        */

.ui-stopptafel {
    box-shadow: none;
    border-color: var(--ink-200);
}

.ui-stopptafel__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-stopptafel__liste > li + li {
    border-top: 1px solid var(--ink-200);
}

.ui-stopptafel__gruppe {
    padding: var(--sp-4) var(--sp-5) var(--sp-2);
    background: var(--bg-surface-alt);
}

/* Der Gruppentitel traegt .ui-eyebrow - dort sitzen die Versalien (§4.2.1). */
.ui-stopptafel__gruppe.ui-eyebrow {
    color: var(--text-muted);
}

.ui-stopptafel__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    width: 100%;
    padding: var(--sp-3) var(--sp-5);
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--text-default);
    text-align: left;
}

@media (min-width: 768px) {
    .ui-stopptafel__zeile {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    }
}

.ui-stopptafel__zeile--klick {
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}

.ui-stopptafel__zeile--klick:hover,
.ui-stopptafel__zeile--klick:focus-visible {
    background: var(--brand-050);
    outline: none;
}

.ui-stopptafel__wer {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.ui-stopptafel__zusatz {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

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

.ui-stopptafel__pfeil {
    color: var(--text-faint);
    font-size: var(--fs-lg);
}

.ui-stoppverlauf {
    box-shadow: none;
    border-color: var(--ink-200);
}

.ui-stoppverlauf__titel {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    font: var(--fw-semi) var(--fs-md) / var(--lh-tight) var(--font-ui);
    color: var(--text-strong);
    cursor: pointer;
}

.ui-stoppverlauf[open] .ui-stoppverlauf__titel {
    border-bottom: 1px solid var(--ink-200);
}

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

.ui-stoppverlauf__tabelle {
    margin: var(--sp-3) var(--sp-5) var(--sp-4);
    width: calc(100% - 2 * var(--sp-5));
}

/* ── Meine Praxis: Kopfband und Status (2D, Entwurf «Meine Praxis v1») ──*/

.ui-kopfband {
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--paper-100);
}

.ui-kopfband__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
}

.ui-kopfband__name {
    margin: 0;
    font: var(--fw-bold) 1.75rem / 1.2 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--text-strong);
}

.ui-kopfband__daten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
    margin: var(--sp-4) 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-700);
}

.ui-kopfband__daten li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.ui-kopfband__symbol {
    width: 18px;
    height: 18px;
    color: var(--ink-500);
}

/* Die Status-Pille. Nicht --r-full (§4.2.7) - r-lg auf 40px Hoehe wirkt
   ebenso weich. */
.ui-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: var(--sp-1) var(--sp-3) var(--sp-1) 14px;
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    font: var(--fw-semi) var(--fs-md) / 1.3 var(--font-ui);
    text-decoration: none;
}

.ui-status__punkt {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: currentColor;
}

.ui-status__zusatz {
    font-weight: var(--fw-medium);
    opacity: 0.85;
}

.ui-status__pfeil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-inline-start: var(--sp-1);
    border-radius: var(--r-lg);
    background: var(--white);
}

.ui-status--ok {
    background: var(--ok-100);
    border-color: rgba(var(--ok-500-rgb), 0.18);
    color: var(--ok-500);
}

.ui-status--warn {
    background: var(--warn-100);
    border-color: rgba(var(--warn-500-rgb), 0.2);
    color: var(--warn-500);
}

.ui-status--error {
    background: var(--error-100);
    border-color: rgba(var(--error-500-rgb), 0.18);
    color: var(--error-500);
}

a.ui-status:hover {
    border-color: currentColor;
}

/* Das Kartenraster darunter: zwei Spalten ab Tablet, sonst eine. */
.ui-kartenraster {
    display: grid;
    gap: var(--sp-5);
    align-items: stretch;
}

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

.ui-kartenraster:empty {
    display: none;
}

.ui-startkarte {
    box-shadow: none;
    border-color: var(--ink-200);
}

.ui-startkarte .ui-card__title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.ui-startkarte__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font: var(--fw-medium) var(--fs-sm) / 1 var(--font-ui);
    color: var(--brand-500);
    text-decoration: none;
}

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

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

.ui-startkarte__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-startkarte__liste > li + li {
    border-top: 1px solid var(--ink-200);
}

.ui-startkarte__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    color: var(--text-default);
    text-decoration: none;
}

a.ui-startkarte__zeile[href]:hover {
    background: var(--bg-surface-alt);
}

.ui-startkarte__nummer {
    font: var(--fs-sm) / 1.4 var(--font-num);
    color: var(--text-muted);
}

.ui-startkarte__haupt {
    flex: 1 1 8rem;
    min-width: 0;
    font-weight: var(--fw-medium);
    color: var(--text-strong);
}

.ui-startkarte__betrag {
    font: var(--fw-medium) var(--fs-sm) / 1.4 var(--font-num);
    color: var(--text-strong);
    white-space: nowrap;
}

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

/* Der runde Namenskreis mit Initialen - ein Avatar (§4.2.7). */
.ui-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    background: var(--brand-050);
    color: var(--brand-500);
    font: var(--fw-semi) var(--fs-sm) / 1 var(--font-ui);
}

.ui-avatar--grau {
    background: var(--paper-100);
    color: var(--ink-400);
}

.ui-avatar--gross {
    width: 56px;
    height: 56px;
    font-size: var(--fs-lg);
}

/* ── Benutzer und Rechte (2H, Entwurf «Benutzer v4») ────────────────────
   Liste links, Detail rechts. Unter 1024px untereinander - nie seitlich
   scrollen.                                                              */

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

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

.ui-benutzer__liste,
.ui-benutzer__detail {
    box-shadow: none;
    border-color: var(--ink-200);
    min-width: 0;
}

.ui-benutzer__suche {
    padding: var(--sp-4);
}

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

.ui-benutzer__eintrag {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    font: inherit;
    color: var(--text-default);
    text-align: left;
    cursor: pointer;
}

.ui-benutzer__eintrag:hover {
    background: var(--bg-surface-alt);
}

.ui-benutzer__eintrag--gewaehlt,
.ui-benutzer__eintrag--gewaehlt:hover {
    border-color: var(--brand-200);
    background: var(--brand-050);
}

.ui-benutzer__wer {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.ui-benutzer__name {
    margin: 0;
    font-weight: var(--fw-semi);
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.ui-benutzer__leise {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.ui-benutzer__stand {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.ui-benutzer__aktiv {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font: var(--fw-medium) var(--fs-xs) / 1.4 var(--font-ui);
    color: var(--ok-500);
}

.ui-benutzer__aktiv--aus {
    color: var(--ink-500);
}

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

.ui-benutzer__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-bottom: 1px solid var(--ink-200);
}

.ui-benutzer__titel {
    margin: 0;
    font: var(--fw-bold) var(--fs-xl) / var(--lh-tight) var(--font-display);
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.ui-benutzer__fakten {
    display: grid;
    gap: var(--sp-4);
    margin: 0;
    padding: var(--sp-5);
    border-bottom: 1px solid var(--ink-200);
}

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

.ui-benutzer__fakten dt {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ui-benutzer__fakten dd {
    margin: 0;
    color: var(--text-default);
    overflow-wrap: anywhere;
}

.ui-benutzer__zahl {
    font: var(--fs-xs) / 1.4 var(--font-num);
    color: var(--text-muted);
}

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

.ui-benutzer__block + .ui-benutzer__block {
    border-top: 1px solid var(--ink-200);
}

.ui-benutzer__fakten + .ui-benutzer__block {
    border-top: 0;
}

.ui-benutzer__blocktitel {
    margin: 0 0 var(--sp-3);
    font: var(--fw-semi) var(--fs-md) / var(--lh-tight) var(--font-ui);
    color: var(--text-strong);
}

.ui-benutzer__zeile {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.ui-benutzer__zeile--verteilt {
    flex-wrap: wrap;
    justify-content: space-between;
}

.ui-rechte {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-rechte__zeile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}

.ui-rechte__zeile + .ui-rechte__zeile {
    border-top: 1px solid var(--ink-200);
}

.ui-rechte__marke {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-sm);
}

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

.ui-rechte__marke--sehen {
    background: var(--brand-050);
    color: var(--brand-500);
}

.ui-rechte__marke--keine {
    background: var(--paper-100);
    color: var(--ink-400);
}

.ui-rechte__symbol {
    width: 14px;
    height: 14px;
}

.ui-rechte__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-default);
}

.ui-rechte__zeile--keine .ui-rechte__name {
    color: var(--text-muted);
}

.ui-rechte__stufe {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Der Schalter «Zugang aktiv». Die Spur traegt r-lg (auf 24px rund), der
   Knopf ist ein Punkt (§4.2.7). */
.ui-schalter {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: 44px;
    height: 24px;
    padding: 2px;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--ink-300);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}

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

.ui-schalter--an {
    background: var(--brand-500);
}

.ui-schalter--gesperrt {
    cursor: not-allowed;
    opacity: 0.55;
}

.ui-schalter__punkt {
    width: 20px;
    height: 20px;
    border-radius: var(--r-full);
    background: var(--white);
    box-shadow: var(--sh-1);
    transition: transform var(--dur-fast) var(--ease);
}

.ui-schalter--an .ui-schalter__punkt {
    transform: translateX(20px);
}

/* ══ Fassung 2.3.0, Abschnitt «Onboarding» (1A–1J) ═══════════════════════
   Eigene Datei, damit die parallel gebauten Abschnitte einander nicht in
   dieselben Zeilen schreiben. Steht zuletzt in DesignCssBauen::QUELLEN. */

/* 1C: Solange die Strecke in der Navigation steht, ist das Logo oben links
   doppelt so gross (Erscheinungsbild::logohoehe()). Der Kopf der Seitenleiste
   waechst mit, statt das Logo abzuschneiden. */
.fi-sidebar:has(.ui-navschritte) .fi-sidebar-header {
    height: auto;
    min-height: var(--topbar-h);
    padding-block: var(--sp-3);
}

/* Breite Logos (z. B. Variante «Breit») sind bei 5rem Hoehe breiter als die
   Seitenleiste. Statt sie zu stauchen, schrumpft das Bild im Seitenverhaeltnis
   und steht links buendig. */
.fi-sidebar-header .fi-logo {
    object-fit: contain;
    object-position: left center;
    max-width: 100%;
}

/* 1D: «Vertrag bei Mediform abschliessen ↗» als umrandeter Knopf. */
.ui-vertragsknopf {
    align-self: flex-start;
    text-decoration: none;
}

.ui-vertragsknopf__zeichen {
    width: 16px;
    height: 16px;
    flex: none;
}

/* 1A: Auswahl der Logovariante. Jede Karte zeigt die Variante auf der
   dunklen Seitenleiste, in der Hoehe des Logos dort (2.5rem). */
.ui-logowahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--sp-3);
}

.ui-logowahl__karte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    cursor: pointer;
}

.ui-logowahl__karte:has(.ui-logowahl__knopf:checked) {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 1px var(--brand-500);
}

.ui-logowahl__karte:has(.ui-logowahl__knopf:focus-visible) {
    box-shadow: var(--focus-ring);
}

.ui-logowahl__knopf {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    accent-color: var(--brand-500);
}

.ui-logowahl__navigation {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    padding-inline: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--nav-bg);
    overflow: hidden;
}

.ui-logowahl__bild {
    display: block;
    height: 2.5rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.ui-logowahl__name {
    font: var(--fw-medium) var(--fs-sm) / 1.4 var(--font-ui);
    color: var(--text-strong);
}