/* NEMESIS-DESIGN (08.10.2026, Vorgabe Bastian: "gleiche das Design mehr an die Desktop an")
   -------------------------------------------------------------------------------------
   Eine Quelle fuer die Hausfarben der WebApp. Die Werte sind 1:1 die Pinsel des Desktops aus
   intranet3 R5.View/Design/Farben.Hell.xaml bzw. Farben.Dunkel.xaml - wer dort eine Farbe
   aendert, aendert sie hier mit.

   Aufbau:
     1. Palette als --nem-*  (hell = Vorgabe, dunkel ueberschreibt)
     2. Graustufen von Radzen auf die Palette legen (--rz-base-*) - damit ziehen hunderte
        Radzen-Regeln mit, ohne dass wir sie einzeln anfassen
     3. die benannten Radzen-Variablen (Gitter, Eingaben, Knoepfe, Reiter, Dialoge)
     4. unsere eigenen Flaechen (Shortcut-Leiste, Tableiste, Fusszeile)

   Reihenfolge ist wichtig: Diese Datei wird in index.html NACH den Radzen-Stylesheets und nach
   dark.css geladen, sonst gewinnen deren :root-Bloecke. */

/* ============================== 1. Palette ============================== */

:root,
html[data-theme="hell"] {
    /* Akzent (NemesisAkzent / NemesisKnopfFlaecheHover) */
    --nem-akzent: #528EC2;
    --nem-akzent-dunkel: #3F76A6;
    --nem-akzent-tiefer: #33608A;
    --nem-akzent-hell: #6FA3D0;
    --nem-akzent-schleier: rgba(82, 142, 194, .16);

    /* Flaechen */
    --nem-flaeche: #FFFFFF;
    --nem-eingabe-flaeche: #FFFFFF;
    --nem-rahmen: #528EC2;      /* NemesisRahmen - Rahmen der Eingabefelder (0,5 px im Desktop) */
    --nem-karte: #FFFFFF;
    --nem-hover-flaeche: #F5F5F5;
    --nem-deaktiviert-flaeche: #EEEEEE;

    /* Schrift */
    --nem-schrift: #222528;
    --nem-schrift-gedimmt: #888888;
    --nem-schrift-auf-akzent: #FFFFFF;

    /* Linien */
    --nem-kontur: #D7E3EE;      /* NemesisTabelle.Kontur - der Standardrand */
    --nem-linie: #EEF3F8;       /* NemesisTabelle.Linie - Gitterlinien */
    --nem-trennlinie: #FFFFFF;  /* NemesisTrennlinie */
    --nem-griff: #B7C9DA;

    /* Tabelle */
    --nem-zebra: #EDF2F8;
    --nem-skelett-basis: #E4E7EA;          /* NemesisSkelett.Basis (Ladeskelett) */
    --nem-skelett-licht: #F4F6F8;          /* NemesisSkelett.Licht */
    --nem-selektion: #C9DDF0;
    --nem-tabelle-hover: #DDE9F5;
    --nem-spalten-kopf: #686868;            /* bleibt dunkel, auch im Hellmodus */
    --nem-spalten-kopf-schrift: #FFFFFF;
    --nem-zeilen-kopf: #F4F8FC;
    --nem-zeilen-kopf-linie: #D7E3EE;

    /* Reiter */
    --nem-reiter-flaeche: #F4F8FC;
    --nem-reiter-schrift: #686868;
    --nem-reiter-kontur: #B7C9DA;
    --nem-reiter-linie: #D7E3EE;

    /* Knoepfe (NemesisKnopfFlaeche: im Hellen der Akzent) */
    --nem-knopf-flaeche: #528EC2;
    --nem-knopf-schrift: #FFFFFF;
    --nem-knopf-hover: #3F76A6;

    /* Zustandsfarben */
    --nem-warnung: #E7A229;
    --nem-fehler: #D9534F;
    --nem-erfolg: #4CAF50;
    /* Merkliste der Seitenleiste (NemesisSidebar.Merkliste, hell und dunkel gleich) */
    --nem-merkliste: #B8860B;
    /* Knopf „Neu“ der Aktionsleisten (29.10.2026, Rückmeldung Bastian: Neu und Speichern waren beide grün) – eigener Farbton, Schema siehe
       „Farben der Standardknöpfe“ unten */
    --nem-knopf-neu: #7E57C2;
    /* Statusleiste des Fensters (intranet3 UcState/StateViewModel: #3E3E42, hell und dunkel gleich, Schrift weiß) */
    --nem-plattform-status: #3E3E42;
    --nem-plattform-status-schrift: #FFFFFF;
    /* Pfeile der Auswahlfelder (NemesisPfeil / NemesisPfeilAktiv) */
    --nem-pfeil: #444444;
    --nem-pfeil-aktiv: #8D979E;
    /* Schleier über einem gesperrten Bereich innerhalb einer Maske (z. B. Reiter „Frachtführer“ ohne Adressverwendung) – #80808080 des Desktops,
       hell und dunkel gleich (14.11.2026) */
    --nem-sperr-schleier: rgba(128, 128, 128, 0.5);
    /* SignalR-Anzeige der Statusleiste wie intranet3 (NemesisHubStatusColor): verbunden LightGreen, Neuverbinden Red (mit Lauf),
       getrennt DodgerBlue, nicht erreichbar Orange */
    --nem-hub-verbunden: #90EE90;
    --nem-hub-neuverbinden: #FF0000;
    --nem-hub-getrennt: #1E90FF;
    --nem-hub-fehlt: #FFA500;

    /* Hinweisband */
    --nem-hinweis-flaeche: #FFF8EC;
    --nem-hinweis-rand: #E8D5AE;
    --nem-hinweis-schrift: #8A5A00;

    /* Der Desktop ist kantig - kein Material-Rund. */
    --nem-radius: 2px;

    /* Graustufen von Radzen auf die Palette (hell: 50 = fast weiss ... 900 = Schrift) */
    --rz-base: #EEEEEE;
    --rz-base-50: #F7FAFC;
    --rz-base-100: #F5F5F5;
    --rz-base-200: #EEEEEE;
    --rz-base-300: #D7E3EE;
    --rz-base-400: #B7C9DA;
    --rz-base-500: #888888;
    --rz-base-600: #686868;
    --rz-base-700: #52575C;
    --rz-base-800: #33383D;
    --rz-base-900: #222528;
    /* Markenfläche der Anmeldung (21.10.2026, Vorgabe Bastian „Login moderner … Nemesis Logistiksoftware sichtbar … Logo aus dem
       Desktoplogin … dazu das Logo des Kunden“; „im Dunkel muss auch beim Logo der Hintergrund dunkel sein“): hell bzw. dunkel mit dem
       Modus, Glanz = Akzent hinter dem Würfel. Im Dunkelmodus zeigt die Anmeldung den Schriftzug in der hellen Fassung
       (img/login/nemesis-schriftzug-dunkel.png). Die Kachel des Kundenlogos bleibt in beiden Modi hell – Kundenlogos sind meist für weißen
       Grund gemacht. Seit 22.10.2026 auch die Desktop-Anmeldung (i3.Login.View 1.48.0.21, UcLoginR2) – Pinsel in Farben.Hell.xaml bzw.
       Farben.Dunkel.xaml (intranet3 R5.View/Design); die Marke dort als Color (GradientStop), der Schatten als DropShadowEffect,
       .anm-nur-hell/-dunkel = NemesisNurHell/NemesisNurDunkel. */
    --nem-marke-flaeche: #FFFFFF;                     /* NemesisMarke.Flaeche */
    --nem-marke-verlauf: #E3ECF5;                     /* NemesisMarke.Verlauf */
    --nem-marke-kontur: #D7E3EE;                      /* NemesisMarke.Kontur */
    --nem-marke-glanz: rgba(82, 142, 194, 0.10);      /* NemesisMarke.Glanz #1A528EC2 */
    --nem-marke-schatten: rgba(30, 60, 100, 0.18);    /* NemesisMarke.Schatten (#1E3C64, Deckung 0,18) */
    --nem-kundenlogo-flaeche: #FFFFFF;                /* NemesisKundenlogo.Flaeche */
    --nem-kundenlogo-kontur: #D7E3EE;                 /* NemesisKundenlogo.Kontur */
}

html[data-theme="dunkel"] {
    --nem-akzent: #528EC2;
    --nem-akzent-dunkel: #3F76A6;
    --nem-akzent-tiefer: #33608A;
    --nem-akzent-hell: #6FA3D0;
    --nem-akzent-schleier: rgba(82, 142, 194, .22);

    --nem-flaeche: #252526;
    --nem-eingabe-flaeche: #2D2D30;
    --nem-rahmen: #528EC2;
    --nem-karte: #2D2D30;
    --nem-hover-flaeche: #3E3E42;
    --nem-deaktiviert-flaeche: #3E3E42;

    --nem-schrift: #E6E6E6;
    --nem-schrift-gedimmt: #A6ACB3;
    --nem-schrift-auf-akzent: #FFFFFF;

    --nem-kontur: #3E4348;
    --nem-linie: #33373C;
    --nem-trennlinie: #1E1E1E;
    --nem-griff: #5A6570;

    --nem-zebra: #303034;
    --nem-skelett-basis: #292A2C;
    --nem-skelett-licht: #333438;
    --nem-selektion: #3D4E5E;
    --nem-tabelle-hover: #343D46;
    --nem-spalten-kopf: #3E3E42;
    --nem-spalten-kopf-schrift: #E6E6E6;
    --nem-zeilen-kopf: #2E343A;
    --nem-zeilen-kopf-linie: #2A2F35;

    --nem-reiter-flaeche: #2A3138;
    --nem-reiter-schrift: #A0A0A0;
    --nem-reiter-kontur: #5A6570;
    --nem-reiter-linie: #3E4348;

    /* Im Dunkeln ist der Standardknopf grau und wird beim Ueberfahren zum Akzent. */
    --nem-knopf-flaeche: #3E3E42;
    --nem-knopf-schrift: #E6E6E6;
    --nem-knopf-hover: #528EC2;

    --nem-warnung: #E7A229;
    --nem-fehler: #D9534F;
    --nem-erfolg: #4CAF50;
    --nem-merkliste: #B8860B;
    --nem-knopf-neu: #9575CD;
    --nem-plattform-status: #3E3E42;
    --nem-plattform-status-schrift: #FFFFFF;
    --nem-pfeil: #C8C8C8;
    --nem-pfeil-aktiv: #FFFFFF;
    /* SignalR-Anzeige der Statusleiste wie intranet3 (NemesisHubStatusColor): verbunden LightGreen, Neuverbinden Red (mit Lauf),
       getrennt DodgerBlue, nicht erreichbar Orange */
    --nem-hub-verbunden: #90EE90;
    --nem-hub-neuverbinden: #FF0000;
    --nem-hub-getrennt: #1E90FF;
    --nem-hub-fehlt: #FFA500;

    --nem-hinweis-flaeche: #3A3222;
    --nem-hinweis-rand: #7A6534;
    --nem-hinweis-schrift: #E8B866;

    --nem-radius: 2px;

    /* Dunkel laeuft die Skala umgekehrt (50 = Schrift ... 900 = tiefster Grund). */
    --rz-base: #383838;
    --rz-base-50: #E6E6E6;
    --rz-base-100: #A6ACB3;
    --rz-base-200: #5A6570;
    --rz-base-300: #3E4348;
    --rz-base-400: #3E3E42;
    --rz-base-500: #343D46;
    --rz-base-600: #303034;
    --rz-base-700: #2D2D30;
    --rz-base-800: #252526;
    --rz-base-900: #1E1E1E;
    /* Markenfläche der Anmeldung – dunkel (21.10.2026, Rückmeldung Bastian), Akzentglanz hinter dem Würfel; Kundenlogo-Kachel hell
       (siehe oben, Pinsel aus Farben.Dunkel.xaml). */
    --nem-marke-flaeche: #2F353C;                     /* NemesisMarke.Flaeche */
    --nem-marke-verlauf: #1E2226;                     /* NemesisMarke.Verlauf */
    --nem-marke-kontur: #3E4348;                      /* NemesisMarke.Kontur */
    --nem-marke-glanz: rgba(82, 142, 194, 0.30);      /* NemesisMarke.Glanz #4D528EC2 */
    --nem-marke-schatten: rgba(0, 0, 0, 0.45);        /* NemesisMarke.Schatten (#000000, Deckung 0,45) */
    --nem-kundenlogo-flaeche: #EEF2F6;                /* NemesisKundenlogo.Flaeche */
    --nem-kundenlogo-kontur: #3E4348;                 /* NemesisKundenlogo.Kontur */
}

/* ===================== 2./3. Radzen auf die Palette ===================== */
/* Gilt fuer beide Fassungen - die --nem-* loesen sich je Modus auf. */

:root {
    /* --- Akzent --- */
    --rz-primary: var(--nem-akzent);
    --rz-primary-dark: var(--nem-akzent-dunkel);
    --rz-primary-darker: var(--nem-akzent-tiefer);
    --rz-primary-light: var(--nem-akzent-hell);
    --rz-primary-lighter: var(--nem-akzent-schleier);
    --rz-on-primary: var(--nem-schrift-auf-akzent);

    /* --- Grundflaeche und Schrift --- */
    --rz-base-background-color: var(--nem-flaeche);
    --rz-text-color: var(--nem-schrift);
    --rz-text-title-color: var(--nem-schrift);
    --rz-text-secondary-color: var(--nem-schrift-gedimmt);
    --rz-text-tertiary-color: var(--nem-schrift-gedimmt);
    --rz-text-disabled-color: var(--nem-schrift-gedimmt);
    --rz-text-contrast-color: var(--nem-schrift-auf-akzent);
    --rz-text-selection-background-color: var(--nem-selektion);
    --rz-text-selection-color: var(--nem-schrift);

    /* --- Zustandsfarben (Desktop: Warnung/Fehler/Erfolg) --- */
    --rz-danger: var(--nem-fehler);
    --rz-danger-dark: #C14440;
    --rz-danger-darker: #A33734;
    --rz-warning: var(--nem-warnung);
    --rz-warning-dark: #C98A1D;
    --rz-warning-darker: #A87216;
    --rz-success: var(--nem-erfolg);
    --rz-success-dark: #3F9342;
    --rz-success-darker: #347A37;
    --rz-info: var(--nem-akzent);
    --rz-info-dark: var(--nem-akzent-dunkel);
    --rz-info-darker: var(--nem-akzent-tiefer);

    /* --- Kanten: der Desktop ist kantig, nicht Material-rund --- */
    --rz-border-radius: var(--nem-radius);
    /* Knoepfe ueber eine eigene Variable: das Kundenportal rundet sie (siehe „Kundenportal: runde Knoepfe“), der Client-Bereich nicht. */
    --nem-knopf-radius: var(--nem-radius);
    --rz-button-border-radius: var(--nem-knopf-radius);
    --rz-input-border-radius: var(--nem-radius);
    --rz-card-border-radius: var(--nem-radius);
    --rz-panel-border-radius: var(--nem-radius);
    --rz-grid-border-radius: var(--nem-radius);
    --rz-tabs-border-radius: var(--nem-radius);
    --rz-dialog-border-radius: var(--nem-radius);
    --rz-menu-border-radius: var(--nem-radius);
    --rz-menu-item-border-radius: 0;
    --rz-notification-border-radius: var(--nem-radius);
    --rz-tooltip-border-radius: var(--nem-radius);

    /* --- Flach statt schwebend: der Desktop arbeitet mit Rand, nicht mit Schatten --- */
    --rz-card-shadow: none;
    --rz-panel-shadow: none;
    --rz-grid-shadow: none;
    --rz-input-shadow: none;
    --rz-header-shadow: none;
    --rz-card-border: var(--rz-border-width) solid var(--nem-kontur);

    /* --- Eingaben: im Desktop ein geschlossener Kasten, nicht die Material-Unterlinie --- */
    --rz-input-background-color: var(--nem-eingabe-flaeche);
    --rz-input-value-color: var(--nem-schrift);
    --rz-input-placeholder-color: var(--nem-schrift-gedimmt);
    --rz-input-border: var(--rz-border-width) solid var(--nem-kontur);
    --rz-input-border-block-end: var(--rz-border-width) solid var(--nem-kontur);
    --rz-input-hover-border: var(--rz-border-width) solid var(--nem-griff);
    --rz-input-hover-background-color: var(--nem-eingabe-flaeche);
    --rz-input-focus-border: var(--rz-border-width) solid var(--nem-akzent);
    --rz-input-focus-background-color: var(--nem-eingabe-flaeche);
    --rz-input-focus-shadow: 0 0 0 1px var(--nem-akzent);
    --rz-input-disabled-background-color: var(--nem-deaktiviert-flaeche);
    --rz-input-disabled-color: var(--nem-schrift-gedimmt);
    --rz-input-disabled-placeholder-color: var(--nem-schrift-gedimmt);

    /* --- Knoepfe --- */
    --rz-button-base-background-color: var(--nem-knopf-flaeche);
    --rz-button-base-color: var(--nem-knopf-schrift);

    /* --- Flaechen von Karten, Panels, Dialogen, Menues --- */
    --rz-panel-background-color: var(--nem-karte);
    --rz-card-background-color: var(--nem-karte);
    --rz-card-flat-background-color: var(--nem-karte);
    --rz-dialog-background-color: var(--nem-flaeche);
    --rz-dialog-title-background-color: var(--nem-reiter-flaeche);
    --rz-dialog-title-color: var(--nem-schrift);
    --rz-dialog-title-border: var(--rz-border-width) solid var(--nem-kontur);
    --rz-dialog-close-color: var(--nem-schrift-gedimmt);
    --rz-dialog-close-hover-color: var(--nem-schrift);
    --rz-menu-background-color: var(--nem-karte);
    --rz-menu-border: var(--rz-border-width) solid var(--nem-kontur);
    --rz-menu-item-color: var(--nem-schrift);
    --rz-menu-item-hover-background-color: var(--nem-hover-flaeche);
    --rz-menu-item-hover-color: var(--nem-schrift);
    --rz-menu-item-selected-background-color: var(--nem-selektion);
    --rz-menu-item-selected-color: var(--nem-schrift);
    --rz-menu-item-icon-color: var(--nem-schrift-gedimmt);
    --rz-menu-item-icon-hover-color: var(--nem-akzent);
    --rz-header-background-color: var(--nem-flaeche);
    --rz-header-color: var(--nem-schrift);
    --rz-header-border: var(--rz-border-width) solid var(--nem-kontur);
    /* Fusszeile = STATUSLEISTE des Fensters (17.10.2026, wie intranet3 UcState): flach in der Statusfarbe, Inhalt aus
       Shared/StatusLeiste.razor (Status des aktiven Tabs links, Version rechts). Vorher (16.10.) nur die Version. */
    --rz-footer-padding: 0;
    --rz-footer-border: none;
    --rz-footer-background-color: var(--nem-plattform-status);
    --rz-footer-color: var(--nem-plattform-status-schrift);
    --rz-sidebar-background-color: var(--nem-flaeche);
    --rz-sidebar-color: var(--nem-schrift);
    --rz-tooltip-background-color: var(--nem-spalten-kopf);
    --rz-tooltip-color: var(--nem-spalten-kopf-schrift);

    /* --- Seitenmenue (PanelMenu) in Hausfarben --- */
    --rz-panel-menu-item-color: var(--nem-schrift);
    --rz-panel-menu-item-hover-background-color: var(--nem-hover-flaeche);
    --rz-panel-menu-item-hover-color: var(--nem-schrift);
    --rz-panel-menu-item-active-background-color: var(--nem-selektion);
    --rz-panel-menu-item-active-color: var(--nem-schrift);
    --rz-panel-menu-icon-color: var(--nem-schrift-gedimmt);

    /* --- Gitter: dunkler Spaltenkopf, Zebra, Selektion wie im Desktop --- */
    --rz-grid-background-color: var(--nem-flaeche);
    --rz-grid-cell-color: var(--nem-schrift);
    --rz-grid-border: var(--rz-border-width) solid var(--nem-kontur);
    /* Keine Gitterlinien (NemesisTabelle: GridLinesVisibility None) - die Zeilen trennt das Zebra. */
    --rz-grid-cell-border: none;
    --rz-grid-right-cell-border: none;
    --rz-grid-bottom-cell-border: none;
    --rz-grid-header-background-color: var(--nem-spalten-kopf);
    --rz-grid-header-color: var(--nem-spalten-kopf-schrift);
    --rz-grid-header-sorted-background-color: var(--nem-spalten-kopf);
    /* Keine Trennstriche zwischen den Spaltenkoepfen (Rueckmeldung Bastian 11.10.2026: "Mir gefallen die hellen Striche
       der Datagrids nicht") - im Hellmodus standen sie weiss auf dem grauen Kopf. */
    --rz-grid-header-cell-border: none;
    --rz-grid-header-cell-border-bottom: none;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: none;
    --rz-grid-sort-icon-color: var(--nem-spalten-kopf-schrift);
    --rz-grid-header-filter-icon-hover-color: var(--nem-spalten-kopf-schrift);
    --rz-grid-header-filter-icon-active-color: var(--nem-spalten-kopf-schrift);
    --rz-grid-stripe-background-color: var(--nem-zebra);
    --rz-grid-stripe-odd-background-color: var(--nem-flaeche);
    --rz-grid-frozen-cell-background-color: var(--nem-flaeche);
    --rz-grid-frozen-stripe-background-color: var(--nem-zebra);
    --rz-grid-hover-background-color: var(--nem-tabelle-hover);
    --rz-grid-hover-color: var(--nem-schrift);
    --rz-grid-selected-background-color: var(--nem-selektion);
    --rz-grid-selected-color: var(--nem-schrift);
    --rz-grid-foot-background-color: var(--nem-zeilen-kopf);
    --rz-grid-foot-cell-color: var(--nem-schrift);
    --rz-grid-toolbar-background-color: var(--nem-reiter-flaeche);
    --rz-grid-filter-background-color: var(--nem-karte);
    --rz-grid-filter-color: var(--nem-schrift);
    --rz-grid-filter-buttons-background-color: var(--nem-reiter-flaeche);
    --rz-grid-group-header-item-background-color: var(--nem-reiter-flaeche);
    --rz-grid-group-header-item-color: var(--nem-schrift);
    --rz-grid-detail-template-background-color: var(--nem-reiter-flaeche);
    /* NemesisTabelle: Schrift 14 (seit 29.10.2026, vorher 12), Zeilen mind. 30 hoch, Zellpolster 5 waagerecht - deutlich dichter als
       Material. 6px oben/unten + Zeilenhoehe 18 = 30px. */
    --rz-grid-header-cell-padding: 6px 5px;
    --rz-grid-cell-padding: 6px 5px;
    --rz-grid-cell-font-size: var(--nem-schriftgroesse);
    --rz-grid-header-font-size: var(--nem-schriftgroesse);

    /* --- Reiter (RadzenTabs) wie Themes/NemesisReiter.xaml: nicht gewaehlt durchsichtig, Hover Reiter.Flaeche,
           Polster 12,5, Inhalt mit Reiter.Linie und Polster 6. Form und Zylonenauge in Abschnitt 6. --- */
    --rz-tabs-background-color: var(--nem-flaeche);
    --rz-tabs-border: var(--rz-border-width) solid var(--nem-reiter-linie);
    --rz-tabs-tab-background-color: transparent;
    --rz-tabs-tab-color: var(--nem-reiter-schrift);
    --rz-tabs-tab-hover-background-color: var(--nem-reiter-flaeche);
    --rz-tabs-tab-hover-color: var(--nem-reiter-schrift);
    --rz-tabs-tab-padding-block: 5px;
    --rz-tabs-tab-padding-inline: 12px;
    --rz-tabs-tab-font-weight: normal;
    --rz-tabs-padding: 6px;
    --rz-tabs-tab-selected-background-color: var(--nem-flaeche);
    --rz-tabs-tab-selected-color: var(--nem-akzent);
    --rz-tabs-tab-selected-top-border-color: var(--nem-akzent);
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-shadow: none;

    /* --- Meldungen (RadzenNotification) --- */
    --rz-notification-container-background-color: var(--nem-karte);
    --rz-notification-info-background-color: var(--nem-karte);
    --rz-notification-info-color: var(--nem-schrift);
    --rz-notification-info-icon-color: var(--nem-akzent);
    --rz-notification-success-background-color: var(--nem-karte);
    --rz-notification-success-color: var(--nem-schrift);
    --rz-notification-success-icon-color: var(--nem-erfolg);
    --rz-notification-warning-background-color: var(--nem-hinweis-flaeche);
    --rz-notification-warning-color: var(--nem-hinweis-schrift);
    --rz-notification-warning-icon-color: var(--nem-warnung);
    --rz-notification-error-background-color: var(--nem-karte);
    --rz-notification-error-color: var(--nem-schrift);
    --rz-notification-error-icon-color: var(--nem-fehler);
    --rz-notification-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* ===================== 4. Eigene Flaechen ===================== */

/* Grundflaeche ausdruecklich setzen: ohne das hat die Seite im Hellmodus gar keinen Hintergrund.
   Steht das Betriebssystem auf dunkel, faerbt der Browser die unbemalte Flaeche dann schwarz ein -
   der Hellmodus bekommt schwarze Raender. color-scheme sagt dem Browser zusaetzlich, wie er
   Bildlaufleisten und Vorgabesteuerelemente zeichnen soll. */
:root,
html[data-theme="hell"] {
    color-scheme: light;
}

html,
body {
    background-color: var(--nem-flaeche);
    color: var(--nem-schrift);
}

/* Knoepfe: Material schreibt GROSSBUCHSTABEN vor, der Desktop nicht. */
.rz-button {
    text-transform: none;
    letter-spacing: normal;
}

/* Zweitrangige Knoepfe im Dunkeln: grau wie NemesisKnopfFlaeche, nicht das Radzen-Blaugrau. */
html[data-theme="dunkel"] .rz-button.rz-base,
html[data-theme="dunkel"] .rz-button.rz-light {
    background-color: var(--nem-knopf-flaeche);
    color: var(--nem-knopf-schrift);
}

/* Beim Ueberfahren der Akzent (NemesisKnopfFlaecheHover). */
html[data-theme="dunkel"] .rz-button.rz-base:not(.rz-state-disabled):hover,
html[data-theme="dunkel"] .rz-button.rz-light:not(.rz-state-disabled):hover,
html[data-theme="dunkel"] .rz-button.rz-secondary:not(.rz-state-disabled):hover {
    background-color: var(--nem-knopf-hover);
    color: var(--nem-schrift-auf-akzent);
}

/* FARBEN DER STANDARDKNÖPFE (29.10.2026, Rückmeldung Bastian: „Neu und speichern sind beide Success also grün, das ist für den User
   verwirrend. Es sollte über alle unterschiedlich gefärbt sein. Speichern sollte grün bleiben“) – KundenAktionsleiste und MenuPrompt:
   Finden blau (Primary), Neu violett (Primary + .nem-knopf-neu), Speichern grün (Success), Löschen rot (Danger), Abbrechen grau (Light),
   Zur Liste orange (Warning), Zurück/Weiter dunkel (Dark). Neue Leisten halten dieses Schema. .nem-knopf-neu legt die Primary-Töne des Knopfes
   auf --nem-knopf-neu – Radzen färbt Fläche, Schatten und Überfahren aus diesen Variablen. */
.rz-button.nem-knopf-neu {
    --rz-primary: var(--nem-knopf-neu);
    --rz-primary-light: color-mix(in srgb, var(--nem-knopf-neu) 75%, #FFFFFF);
    --rz-primary-lighter: color-mix(in srgb, var(--nem-knopf-neu) 16%, transparent);
    --rz-primary-dark: color-mix(in srgb, var(--nem-knopf-neu) 88%, #000000);
    --rz-primary-darker: color-mix(in srgb, var(--nem-knopf-neu) 72%, #000000);
    --rz-on-primary: #FFFFFF;
}

/* Die Shortcut-Leiste (QuickAccessToolbar.razor.css) und die Tableiste (TabMaster.razor) holen
   ihre Farben direkt aus der Palette - sie sind unser eigenes CSS und brauchen hier keine
   Gegenregel. ::deep gibt es nur in komponentengebundenem CSS, nicht in dieser Datei. */

/* AUTOFILL DES BROWSERS (10.10.2026, Meldung Bastian: "die Textboxen sind hell, wenn ich reinklicke, und nicht lesbar").
   Uebernimmt ein Feld einen Vorschlag des Browsers (oder zeigt ihn beim Ueberfahren der Vorschlagsliste als Vorschau),
   faerbt Chrome/Edge es mit eigener, !important gesetzter Flaeche ein - aeltere Fassungen hellblau auch im Dunkelmodus,
   bei heller Schrift: unlesbar. Die Flaeche laesst sich nicht ueberschreiben, aber mit einem inneren Schatten in der
   Eingabefarbe uebermalen; Schrift und Schreibmarke kommen aus der Palette. Gilt hell wie dunkel. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nem-schrift);
    caret-color: var(--nem-schrift);
    box-shadow: 0 0 0 1000px var(--nem-eingabe-flaeche) inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* Hinweisband (wie NemesisHinweis.* im Desktop) - fuer eigene Hinweise in den Seiten. */
.nem-hinweis {
    background: var(--nem-hinweis-flaeche);
    border: 1px solid var(--nem-hinweis-rand);
    border-radius: var(--nem-radius);
    color: var(--nem-hinweis-schrift);
    padding: .375rem .625rem;
}

/* ===================== 5. Kachel, Kontrollkaestchen, deaktivierte Knoepfe ===================== */
/* Uebernahme aus der Design-Modernisierung von OfficeController (09.10.2026, Vorgabe Bastian), angepasst an das
   Desktop-Design dieser App: nur, was zum Desktop passt, und ueber die --nem-Palette (Hell und Dunkel). */

/* GRUPPENBOX = NEMESISKACHEL (Nemesis.Middleware.Controls, "Nachfolger der GroupBox/Fieldsets"). Werte 1:1 aus
   NemesisKachel.cs: Akzent Hausgrau #686868 (Farbschema Grau = Standard), Streifen links 4px ueber die volle Hoehe,
   Rundung 6px, Flaeche = 3 % Akzent auf dem Untergrund, Kontur = 23 %, Schatten weich in der Akzentfarbe
   (Blur 6, 22 %), Ueberschrift halbfett in der Akzentfarbe - auf dunklem Untergrund zur Haelfte auf Weiss gezogen.
   Andere Farbe je Gruppenbox ueber eine Klasse am RadzenFieldset (wie Farbschema/Status der Kachel):
   class="nem-kachel-blau | nem-kachel-warnung | nem-kachel-fehler | nem-kachel-erfolg". */
.rz-fieldset {
    --nem-kachel-akzent: #686868;
    --rz-fieldset-padding: .5rem .75rem .75rem;
    background: color-mix(in srgb, var(--nem-kachel-akzent) 3%, var(--nem-flaeche));
    border: 1px solid color-mix(in srgb, var(--nem-kachel-akzent) 23%, var(--nem-flaeche));
    border-left: 4px solid var(--nem-kachel-akzent);
    border-radius: 6px;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--nem-kachel-akzent) 22%, transparent);
}

/* Farbklassen gelten fuer RadzenFieldset, NemesisKachel und NemesisStatusleiste gleichermassen (Abschnitt 6). */
.nem-kachel-blau.nem-kachel-blau { --nem-kachel-akzent: #528EC2; }
.nem-kachel-warnung.nem-kachel-warnung { --nem-kachel-akzent: #E7A229; }
.nem-kachel-fehler.nem-kachel-fehler { --nem-kachel-akzent: #D9534F; }
.nem-kachel-erfolg.nem-kachel-erfolg { --nem-kachel-akzent: #4CAF50; }

/* Die Legende verlaesst die Rahmenlinie und wird zur Kopfzeile ueber die volle Breite (float + width). Radzen setzt
   white-space: nowrap - lange Titel werden abgeschnitten statt ueber den Rand zu laufen. */
.rz-fieldset > .rz-fieldset-legend {
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 .4rem 0;
    background: transparent;
    color: var(--nem-kachel-akzent);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="dunkel"] .rz-fieldset > .rz-fieldset-legend {
    color: color-mix(in srgb, #FFFFFF 50%, var(--nem-kachel-akzent));
}

.rz-fieldset > .rz-fieldset-legend:empty {
    display: none;
}

.rz-fieldset > .rz-fieldset-content-wrapper {
    clear: both;
}

/* Kachel in der Kachel: ohne eigenen Schatten. */
.rz-fieldset .rz-fieldset {
    box-shadow: none;
}

/* KONTROLLKAESTCHEN: angehakt in der Akzentfarbe (Radzen nimmt sonst den blassen Sekundaerton), ohne Innenschatten. */
:root {
    --rz-checkbox-checked-background-color: var(--nem-akzent);
    --rz-checkbox-checked-hover-background-color: var(--nem-akzent-dunkel);
    --rz-checkbox-checked-shadow: none;
    --rz-checkbox-border-radius: var(--nem-radius);
}

/* DEAKTIVIERTE KNOEPFE sichtbar lassen: Radzen macht sie zu 80 % durchsichtig (--rz-button-disabled-opacity 0.2) -
   Pfeile und Symbole verschwinden dann fast. Wie im Desktop: graue Flaeche, gedimmte Schrift, voll deckend.
   Doppelte Klasse fuer die noetige Spezifitaet gegen die Farbregeln der Varianten. */
:root {
    --rz-button-disabled-opacity: 1;
}

.rz-button.rz-button.rz-state-disabled,
.rz-button.rz-button:disabled {
    background-color: var(--nem-deaktiviert-flaeche);
    color: var(--nem-schrift-gedimmt);
    box-shadow: none;
}

.rz-button.rz-button.rz-variant-text.rz-state-disabled,
.rz-button.rz-button.rz-variant-text:disabled {
    background-color: transparent;
}

/* Text-Knoepfe in Light/Base waeren in Radzen fast weiss auf weiss - sie bekommen die normale Schrift. */
.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled),
.rz-button.rz-variant-text.rz-base:not(.rz-state-disabled) {
    color: var(--nem-schrift);
}

/* BILDLAUFLEISTEN schmal und rund, in beiden Fassungen aus der Palette (vorher nur im Dunkelmodus, dark.css). */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--nem-griff);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--nem-akzent);
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ===================== 6. Kachel, Statusleiste, Fortschritt, Tabelle, Reiter, Zylonenauge (10.10.2026) ===================== */
/* Vorgabe Bastian: "das Design etwas mehr anpassen ans WPF-Modul mit den Kacheln und dem Data Grid und dem Summenbalken",
   dazu das Zylonenauge auf den Reitern. Vorbild sind die Steuerelemente in Nemesis.Middleware.Controls:
   NemesisKachel.cs, NemesisStatusleiste.cs, NemesisFortschritt.cs, NemesisSummenPanel.cs, Themes/NemesisTabelle.xaml,
   Themes/NemesisReiter.xaml. Die Komponenten dazu liegen in Client/Shared (NemesisKachel, NemesisStatusleiste,
   NemesisFortschritt, TabLadeKante, ReiterLaden).

   FARBSATZ AUS EINER FARBE (NemesisKachel.Bauen): Flaeche 3 %, Fusszeile 12 %, Kontur 23 % Akzent auf dem Untergrund,
   Ueberschrift in der Akzentfarbe (im Dunkeln halb auf Weiss gezogen). color-mix rechnet gegen --nem-flaeche - damit
   gilt Hell und Dunkel ohne zweite Regel, wie im Desktop (Mischen gegen den Untergrund). */
:where(.rz-fieldset, .nem-kachel, .nem-statusleiste) {
    --nem-kachel-akzent: #686868;
}

.nem-kachel,
.nem-statusleiste {
    --nem-k-flaeche: color-mix(in srgb, var(--nem-kachel-akzent) 3%, var(--nem-flaeche));
    --nem-k-fuss: color-mix(in srgb, var(--nem-kachel-akzent) 12%, var(--nem-flaeche));
    --nem-k-kontur: color-mix(in srgb, var(--nem-kachel-akzent) 23%, var(--nem-flaeche));
    --nem-k-titel: var(--nem-kachel-akzent);
}

html[data-theme="dunkel"] .nem-kachel,
html[data-theme="dunkel"] .nem-statusleiste {
    --nem-k-titel: color-mix(in srgb, #FFFFFF 50%, var(--nem-kachel-akzent));
}

/* ---------- KACHEL (Client/Shared/NemesisKachel.razor) ----------
   Wie das Fieldset in Abschnitt 5: Streifen links 4, Rundung 6, weicher Schatten. Innen 8,5,8,6; Kopf mit
   Abstand 7 zum Inhalt; Fusszeile mit Kontur oben, Polster 8,2. Kein overflow:hidden - Radzen-Aufklapplisten
   haengen im Baum der Kachel und wuerden sonst abgeschnitten.
   KEIN UEBERLAUF (14.11.2026, Vorgabe Bastian „Verhinder, dass die Kacheln einen Overflow haben können, es muss dann umgebrochen werden“):
   eine Kachel wird nie breiter als ihr Platz (max-width 100 %, auch bei fester Breite), Kopf und Titel brechen um statt abzuschneiden,
   Text bricht innerhalb der Kachel um (overflow-wrap: break-word - aendert die Mindestbreite von Tabellen nicht). Reihen von Kacheln
   in den Masken brechen mit flex-wrap um (z. B. Reiter „Frachtführer“). */
.nem-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    box-sizing: border-box;
    margin-bottom: .5rem;
    background: var(--nem-k-flaeche);
    border: 1px solid var(--nem-k-kontur);
    border-left: 4px solid var(--nem-kachel-akzent);
    border-radius: 6px;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--nem-kachel-akzent) 22%, transparent);
    color: var(--nem-schrift);
}

.nem-kachel .nem-kachel,
.nem-kachel .rz-fieldset,
.rz-fieldset .nem-kachel {
    box-shadow: none;
}

.nem-kachel-kopf {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    align-items: center;
    min-height: 22px;
    padding: 5px 8px 0 8px;
    color: var(--nem-k-titel);
}

.nem-kachel-kopf.klappbar {
    cursor: pointer;
    user-select: none;
}

.nem-kachel-griff {
    flex: 0 0 auto;
    margin-right: 5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

.nem-kachel-symbol.rzi,
.nem-kachel-symbol {
    flex: 0 0 auto;
    margin-right: 5px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--nem-k-titel);
}

.nem-kachel-titel {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: var(--nem-schriftgroesse, 12px);
    font-weight: 600;
}

.nem-kachel-kopf-rechts {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--nem-schrift);
}

.nem-kachel-hinweis {
    padding: 2px 8px 0 9px;
    color: var(--nem-schrift-gedimmt);
    font-size: .75rem;
}

.nem-kachel-inhalt {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    padding: 5px 8px 6px 8px;
}

.nem-kachel-kopf ~ .nem-kachel-inhalt,
.nem-kachel-hinweis ~ .nem-kachel-inhalt {
    padding-top: 7px;
}

.nem-kachel-buendig > .nem-kachel-inhalt {
    padding: 0;
}

.nem-kachel-buendig > .nem-kachel-kopf ~ .nem-kachel-inhalt {
    padding-top: 5px;
}

.nem-kachel-fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 28px;
    padding: 2px 8px;
    background: var(--nem-k-fuss);
    border-top: 1px solid var(--nem-k-kontur);
    border-radius: 0 0 5px 0;
    font-size: var(--nem-schriftgroesse, 12px);
}

/* Ladeschleier: 78 % Untergrund ueber dem Inhalt, faengt die Maus ab; die Kopfzeile bleibt lesbar. */
.nem-kachel-schleier {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--nem-flaeche) 78%, transparent);
    color: var(--nem-schrift-gedimmt);
}

/* Fehlerlasche oben rechts. */
.nem-kachel-lasche {
    position: absolute;
    top: -1px;
    right: 10px;
    max-width: 65%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 1px 8px 2px 8px;
    border-radius: 0 0 4px 4px;
    background: var(--nem-fehler);
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 600;
}

/* LASCHE AUF DER HÖHE EINES ABSCHNITTS (21.10.2026, Desktop KachelFehler mit Abschnitt, z. B. „Kunde nicht gefunden“ in der Kopfkachel
   der Sendung): die Zeile trägt .nem-kachel-abschnitt, die Lasche hängt mittig an ihr am rechten Innenrand der Kachel – zur Kante hin
   eckig, ins Feld gerundet, eine Spur schmaler als die Lasche oben rechts, damit sie in eine 26er Zeile passt. */
.nem-kachel-abschnitt {
    position: relative;
}

.nem-kachel-lasche.nem-kachel-lasche-abschnitt {
    top: 50%;
    right: -8px;
    max-width: 45%;
    transform: translateY(-50%);
    padding: 1px 10px 2px 10px;
    border-radius: 4px 0 0 4px;
    z-index: 1;
}

/* Tabelle in der Kachel: ohne eigenen Rand, wie im Desktop (DataGrid BorderThickness 0). */
.nem-kachel .rz-data-grid {
    --rz-grid-border: none;
    background-color: transparent;
}

/* ---------- STATUSLEISTE (Client/Shared/NemesisStatusleiste.razor) ----------
   Mindesthoehe 30, Kontur 1, Streifen 4, Rundung 6, Flaeche = Fusszeilenton, Inhalt 10,2. */
.nem-statusleiste {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 34px;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 2px 10px;
    background: var(--nem-k-fuss);
    border: 1px solid var(--nem-k-kontur);
    border-left: 4px solid var(--nem-kachel-akzent);
    border-radius: 6px;
    color: var(--nem-schrift);
    font-size: var(--nem-schriftgroesse, 12px);
}

.nem-statusleiste-links,
.nem-statusleiste-rechts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    min-width: 0;
}

.nem-statusleiste-links {
    flex: 1 1 auto;
}

.nem-statusleiste-rechts {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Fuer "Titel: Wert"-Paare in Leisten und Fusszeilen. */
.nem-gedimmt {
    color: var(--nem-schrift-gedimmt);
}

/* ---------- FORTSCHRITT (Client/Shared/NemesisFortschritt.razor) ----------
   Spur 4 hoch, Rundung 2, Abstaende 8. Akzent und Kontur der umgebenden Leiste/Kachel, sonst Akzentblau. */
.nem-fortschritt {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.nem-fortschritt-beschriftung {
    margin-right: 8px;
    color: var(--nem-schrift-gedimmt);
}

.nem-fortschritt-spur {
    position: relative;
    display: inline-block;
    height: 4px;
    border-radius: 2px;
    background: var(--nem-k-kontur, var(--nem-kontur));
    overflow: hidden;
}

.nem-fortschritt-fuellung {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: var(--nem-kachel-akzent, var(--nem-akzent));
}

.nem-fortschritt-wert {
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
}

/* ---------- TABELLE (RadzenDataGrid wie Themes/NemesisTabelle.xaml) ----------
   Selektion = STRICH: die markierte Zeile hell (Selektion), links ein 3-px-Streifen in der Akzentfarbe - dasselbe
   Motiv wie Akzentkante der Reiter und Streifen der Kachel. Zeilenstatus (NemesisDesign.ZeilenStatus im RowRender)
   faerbt den Streifen in Warnung/Fehler/Erfolg und schlaegt die Selektion. */
.rz-grid-table tbody > tr.rz-state-highlight > td:first-child {
    box-shadow: inset 3px 0 0 var(--nem-akzent);
}

.rz-grid-table tbody > tr.nem-zeile-warnung > td:first-child {
    box-shadow: inset 3px 0 0 var(--nem-warnung);
}

.rz-grid-table tbody > tr.nem-zeile-fehler > td:first-child {
    box-shadow: inset 3px 0 0 var(--nem-fehler);
}

.rz-grid-table tbody > tr.nem-zeile-erfolg > td:first-child {
    box-shadow: inset 3px 0 0 var(--nem-erfolg);
}

/* Aktuelle Zelle nur mit duenner Akzentkontur statt des dicken Material-Fokusrings. */
.rz-grid-table td:focus-visible {
    outline: 1px solid var(--nem-akzent);
    outline-offset: -1px;
}

/* Gefilterte Spalte: der Kopf wird schwarz - man sieht auf einen Blick, wo ein Filter sitzt (NemesisDataGrid). */
.rz-grid-table thead th:has(.rz-grid-filter-active) {
    background-color: #000000;
    color: #FFFFFF;
}

/* Gruppierleiste ("Spalte hierher ziehen") in der Reiterflaeche statt im dunklen Spaltenkopfton. */
.rz-data-grid .rz-group-header {
    background-color: var(--nem-reiter-flaeche);
    color: var(--nem-schrift-gedimmt);
    border-bottom: 1px solid var(--nem-reiter-linie);
}

/* Einheitliche Zeilenhoehe 30 auch bei Density.Compact (Radzen setzt dort 4px Polster, mit zwei Klassen). */
.rz-data-grid.rz-density-compact {
    --rz-grid-cell-padding: 6px 5px;
}

/* Weisse Trenner im Spaltenkopf auch bei GridLines="Both"/"Vertical" (Radzen nimmt dort die Zellkante = keine). */
.rz-grid-table.rz-grid-table > thead > tr > th:not(:last-child) {
    border-inline-end: var(--rz-grid-header-cell-border);
}

/* Leerhinweis zentriert und gedaempft ("Keine Eintraege vorhanden" - EmptyText je Tabelle setzen). */
.rz-datatable-emptymessage,
.rz-datatable-emptymessage-row > td {
    text-align: center;
    color: var(--nem-schrift-gedimmt);
}

/* Leeranzeige der Seiten (Shared/NichtsZuSehen.razor) wie der Leerhinweis der Desktop-Tabelle. */
.nem-leer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 80px;
    margin: 12px 0;
    border: 1px dashed var(--nem-kontur);
    border-radius: 6px;
    color: var(--nem-schrift-gedimmt);
    font-size: var(--nem-schriftgroesse, 12px);
}

/* SUMMENBALKEN = Fusszeile der Tabelle (FooterTemplate der Spalten) im Ton der Statusleiste: die Summen stehen
   GENAU UNTER IHRER SPALTE wie im NemesisSummenPanel, die erste Spalte traegt den Streifen. Radzen haelt die
   Fusszeile am unteren Rand fest (sticky). Farbe ueber --nem-summen-akzent an der Tabelle
   (Klasse nem-summen-blau = Standard2). */
.rz-data-grid {
    --nem-summen-akzent: #686868;
}

.rz-data-grid.nem-summen-blau {
    --nem-summen-akzent: #528EC2;
}

.rz-grid-table tfoot td {
    background-color: color-mix(in srgb, var(--nem-summen-akzent) 12%, var(--nem-flaeche));
    border-top: 1px solid color-mix(in srgb, var(--nem-summen-akzent) 23%, var(--nem-flaeche));
    color: var(--nem-schrift);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rz-grid-table tfoot td:first-child {
    box-shadow: inset 4px 0 0 var(--nem-summen-akzent);
}

/* Bildlaufleisten in der Tabelle 7 px (NemesisTabelle), Griff gerundet. */
.rz-data-grid ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.rz-data-grid ::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 4px;
    background: var(--nem-griff);
}

.rz-data-grid ::-webkit-scrollbar-thumb:hover {
    border: 0;
    background: var(--nem-akzent);
}

/* BOOTSTRAP-TABELLEN (aeltere Seiten: Auslagerungen, Listen, Packstuecke ...) im selben Bild wie die Radzen-Tabelle:
   dunkler Spaltenkopf mit weissen Trennern, Schrift 14 (bis 29.10.2026 12), Zeilen 30 (bis dahin 26), Zebra statt Gitterlinien, Hover und Summenzeile
   (tfoot) im Ton der Statusleiste. Die Farbvariablen von Bootstrap werden auf die Palette gelegt - Hell und Dunkel
   ohne zweite Regel. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nem-schrift);
    --bs-table-striped-bg: var(--nem-zebra);
    --bs-table-striped-color: var(--nem-schrift);
    --bs-table-hover-bg: var(--nem-tabelle-hover);
    --bs-table-hover-color: var(--nem-schrift);
    --bs-table-active-bg: var(--nem-selektion);
    --bs-table-active-color: var(--nem-schrift);
    --bs-table-border-color: transparent;
    color: var(--nem-schrift);
    font-size: var(--nem-schriftgroesse, 12px);
}

/* BALKEN UNTER DEM SPALTENKOPF (16.10.2026, Rueckmeldung Bastian: "den Balken im Dunkelmodus dunkel machen"): metro4.css
   (vor Bootstrap geladen) zieht unter jedem thead und ueber/unter jedem tfoot einen 4-px-Balken in --table-border-color.
   Metro belegt die Variable dunkel nur unter .dark-side - unser Dunkelmodus (data-theme) blieb deshalb bei #e8e8e8 (weiss).
   Die Farbe kommt jetzt aus der Palette: Kontur (hell #D7E3EE, dunkel #3E4348). */
:root {
    --table-border-color: var(--nem-kontur);
}

/* Zweiter Selektor (29.10.2026): metro4.css setzt `.table tbody td` (Spezifität 0,1,2) auf 10 px Polster und schlug damit die erste Zeile
   (0,1,1) – Haustabellen außerhalb von .nem-maske waren so 36 statt 26 hoch. `> tr > :is(td, th)` hat 0,1,3. */
.table > :not(caption) > * > *,
.table > :not(caption) > tr > :is(td, th) {
    padding: 6px 5px;
    border-bottom-width: 0;
    line-height: var(--nem-zeilenhoehe);
    vertical-align: middle;
}

.table > thead > tr > th {
    background-color: var(--nem-spalten-kopf);
    color: var(--nem-spalten-kopf-schrift);
    font-weight: 600;
    white-space: nowrap;
    border-inline-end: 0;   /* keine Trennstriche zwischen den Koepfen (siehe Abschnitt 2/3, --rz-grid-header-cell-border) */
}

.table > thead > tr > th:last-child {
    border-inline-end: 0;
}

/* Kleine Knoepfe in Tabellenzeilen flach halten, sonst wird jede Zeile 40 hoch statt 26. */
.table .btn-sm {
    padding: 1px 6px;
    font-size: .75rem;
    line-height: 1rem;
}

/* Knoepfe ohne Farbvariante ("btn btn-sm") erben die Schrift - im Dunkeln waren sie sonst unsichtbar. */
.table .btn:not([class*="btn-primary"]):not([class*="btn-secondary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-warning"]):not([class*="btn-info"]):not([class*="btn-light"]):not([class*="btn-dark"]):not([class*="btn-link"]) {
    color: inherit;
    border-color: var(--nem-kontur);
}

/* Zebra auch ohne table-striped - der Desktop zeichnet jede zweite Zeile (Bootstrap mit table-striped jede erste,
   das wird zurueckgenommen, sonst waeren alle Zeilen getoent). */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
}

.table > tbody > tr:nth-child(even) > * {
    --bs-table-bg-type: var(--nem-zebra);
}

.table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--nem-tabelle-hover);
}

.table > tfoot > tr > * {
    background-color: color-mix(in srgb, #686868 12%, var(--nem-flaeche));
    border-top: 1px solid color-mix(in srgb, #686868 23%, var(--nem-flaeche));
    color: var(--nem-schrift);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.table > tfoot > tr > *:first-child {
    box-shadow: inset 4px 0 0 #686868;
}

/* ---------- REITER (RadzenTabs wie Themes/NemesisReiter.xaml) ----------
   Flach, Rundung 6 oben, Abstand 3. Nicht gewaehlt ohne Rand; gewaehlt Flaeche + Reiter.Linie, Schrift und
   2-px-Kante oben in der Akzentfarbe. Die Kante beim Ueberfahren (Radzen) entfaellt - im Desktop nur die Flaeche. */
.rz-tabview-top > .rz-tabview-nav {
    gap: 3px;
}

.rz-tabview-top > .rz-tabview-nav li {
    position: relative;
    border-radius: 6px 6px 0 0;
}

.rz-tabview-top > .rz-tabview-nav li:not(.rz-tabview-selected) {
    border-color: transparent;
}

.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    border-top-color: transparent;
}

.rz-tabview-top > .rz-tabview-nav li.rz-state-disabled {
    color: var(--nem-schrift-gedimmt);
}

/* ---------- ZYLONENAUGE (NemesisReiter.Laden / NemesisKachel.Zylon) ----------
   Ein weisser Lichtpunkt mit weichem Schweif pendelt ueber die Akzentkante - Verlauf und Takt 1:1 aus dem Desktop:
   Schweif ueber 24 % der Breite (#AAFFFFFF - Weiss - #AAFFFFFF), Licht von -12 % bis 112 % der Breite in 2,2 s,
   sinusfoermig hin und zurueck. Laeuft nur, solange geladen wird.
   Statt das Licht zu verschieben (Desktop: RelativeTransform), wandert ein dreifach breiter Hintergrund - so ragt
   nichts ueber die Kante hinaus und es braucht keinen Zuschnitt (am Radzen-Reiter liegt die Kante IM Rand, den ein
   overflow:hidden selbst abschneiden wuerde). Bild 300 % breit, Licht in seiner Mitte: Lage 81 % = Licht bei -12 %,
   Lage 19 % = Licht bei 112 % der Kante.
   Am nicht gewaehlten Reiter laeuft das Licht ueber eine dezente Spur (Reiter.Kontur), damit man auch das Laden
   eines Nachbarreiters sieht. */
@keyframes nem-zylon-pendel {
    from { background-position: 81% 0; }
    to { background-position: 19% 0; }
}

.nem-tab-kante.laedt::after,
.rz-tabview-nav li.nem-reiter-laedt::after,
.nem-zylon-spur::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg,
        transparent 46%,
        rgba(255, 255, 255, .67) 49%, #FFFFFF 50%, rgba(255, 255, 255, .67) 51%,
        transparent 54%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    animation: nem-zylon-pendel 2.2s ease-in-out infinite alternate;
}

/* Akzentkante der Reiter im TabMaster (Client/Shared/TabLadeKante.razor): 2 hoch, links/rechts 1 eingerueckt.
   UNTEN (16.10.2026, Vorgabe Bastian: "Der Akzent der Tabs muss bei den Ribbons fuer die Views unten sein, nicht
   oben"): die Reiterleiste der Views steht unter dem Inhalt, die Reiter haengen an ihr nach unten - die Kante
   sitzt deshalb an der freien Unterkante, das Zylonenauge laeuft dort mit. */
.nem-tab-kante {
    position: absolute;
    bottom: 0;
    left: 1px;
    right: 1px;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
}

.nem-tab-kante.laedt {
    background: var(--nem-reiter-kontur);
}

.nem-tab.active > .nem-tab-kante {
    background: var(--nem-akzent);
}

/* RadzenTabsItem: class="@(laedt ? "nem-reiter-laedt" : null)" - das Licht laeuft ueber die obere Kante. */
.rz-tabview-top > .rz-tabview-nav li.nem-reiter-laedt:not(.rz-tabview-selected) {
    border-top-color: var(--nem-reiter-kontur);
}

.rz-tabview-top > .rz-tabview-nav li.nem-reiter-laedt::after {
    top: -2px;
    bottom: auto;
    height: 2px;
}

/* Zylon-Spur der Kachel: 3 hoch unter der Oberkante, 7 eingerueckt, in der Akzentfarbe. */
.nem-zylon-spur {
    position: absolute;
    top: 1px;
    left: 7px;
    right: 7px;
    height: 3px;
    z-index: 4;
    overflow: hidden;
    border-radius: 1.5px;
    pointer-events: none;
    background: var(--nem-kachel-akzent);
}

@media (prefers-reduced-motion: reduce) {
    .nem-tab-kante.laedt::after,
    .rz-tabview-nav li.nem-reiter-laedt::after,
    .nem-zylon-spur::after {
        animation-duration: 6s;
    }
}

/* ===================== 7. Masken wie im Desktop: Beschriftung + Feld (10.10.2026) ===================== */
/* Vorgabe Bastian: die Sendungsmaske "analog zu UcSendung" - keine Material-Felder mit schwebender Beschriftung,
   sondern WPF-Label (Polster 5,2) neben bzw. ueber einer flachen TextBox: Flaeche NemesisEingabeFlaeche, Rahmen
   NemesisRahmen 0,5 px, Rundung 3, Schrift 12, Zeilen 22. Die Raster der Masken (Spaltenbreiten wie die
   ColumnDefinitions der XAML) stehen als grid-template-columns direkt an der Maske. */
.nem-maske {
    font-size: var(--nem-schriftgroesse, 12px);
    color: var(--nem-schrift);
}

.nem-raster {
    display: grid;
    align-items: center;
    column-gap: 0;
    row-gap: 0;
}

.nem-label {
    padding: 4px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--nem-zeilenhoehe);
    color: var(--nem-schrift);
}

.nem-label-gedimmt {
    color: var(--nem-schrift-gedimmt);
}

/* 0,5 px des Desktops: im Browser 1 px in halber Deckkraft - so zart wie dort. */
.nem-feld {
    box-sizing: border-box;
    width: 100%;
    height: var(--nem-feld-hoehe);
    min-width: 0;
    margin: 0;
    padding: 0 5px;
    font: inherit;
    font-size: var(--nem-schriftgroesse, 12px);
    color: var(--nem-schrift);
    background: var(--nem-eingabe-flaeche);
    border: 1px solid color-mix(in srgb, var(--nem-rahmen) 55%, transparent);
    border-radius: 3px;
    outline: none;
}

.nem-feld:focus {
    border-color: var(--nem-rahmen);
    box-shadow: 0 0 0 1px var(--nem-akzent-schleier);
}

.nem-feld[readonly] {
    color: var(--nem-schrift);
    background: var(--nem-eingabe-flaeche);
}

.nem-feld-gedimmt,
.nem-feld::placeholder {
    color: var(--nem-schrift-gedimmt);
}

select.nem-feld {
    padding-right: 20px;
}

/* Feld mit Knopf daneben (Suchen ...), wie die Adressfelder des Desktops. */
.nem-feld-mit-knopf {
    display: flex;
    gap: 2px;
    min-width: 0;
}

.nem-miniknopf {
    flex: 0 0 auto;
    height: var(--nem-feld-hoehe);
    min-width: var(--nem-feld-hoehe);
    padding: 0 3px;
    font-size: var(--nem-schriftgroesse, 12px);
    line-height: calc(var(--nem-feld-hoehe) - 2px);
    color: var(--nem-akzent);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
}

.nem-miniknopf:hover {
    background: var(--nem-reiter-flaeche);
    border-color: var(--nem-reiter-kontur);
}

.nem-miniknopf .rzi {
    font-size: 16px;
    vertical-align: middle;
}

/* Reiterkoepfe in einer Zeile mit Bildlauf (TabPanel im ScrollViewer der Adressreiter). */
.nem-reiter-scroll > .rz-tabview-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.nem-reiter-scroll > .rz-tabview-nav li {
    flex: 0 0 auto;
}

/* Punkt am Reiter: hinter dem Reiter ist etwas erfasst (Neutraler Versender/Empfaenger). */
.nem-reiter-punkt {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--nem-akzent);
    vertical-align: middle;
}

/* Kleine Knoepfe im Reiterkopf ("+" weitere Stellen, "x" Stelle entfernen). */
.nem-reiter-knopf {
    margin-left: 3px;
    padding: 0 2px;
    font-size: var(--nem-schriftgroesse, 12px);
    line-height: 16px;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* Tabellen der Maske: Bootstrap-.table im Hausbild (Abschnitt 6), kompakt und ohne Aussenabstand. */
.nem-maske .table {
    margin-bottom: 0;
    font-size: var(--nem-schriftgroesse, 12px);
}

.nem-maske .table > :not(caption) > * > * {
    height: var(--nem-zeile);
    padding: 0 4px;
    vertical-align: middle;
}

.nem-tabelle-ohne-kopf > thead {
    display: none;
}

.nem-tabelle-leer {
    text-align: center;
    color: #B0B0B0;
}

/* Trennlinie in der Akzentfarbe (GridSplitter zwischen Hinweistexten und Freitexten). */
.nem-trennlinie-akzent {
    justify-self: center;
    width: 3px;
    margin: 5px 0;
    background: var(--nem-akzent);
}

/* Zeilenkopf der Desktop-Tabelle (NemesisZeilenKopf): schmale helle Spalte links, Linie rechts/unten. */
.nem-maske .table > :not(caption) > * > .nem-zeilenkopf {
    width: 12px;
    min-width: 12px;
    padding: 0;
    background: var(--nem-zeilen-kopf);
    border-right: 1px solid var(--nem-zeilen-kopf-linie);
    border-bottom: 1px solid var(--nem-zeilen-kopf-linie);
}

/* Neuanlage-Zeile (CanUserAddRows): leere Zeile am Ende der Tabelle. */
.nem-maske .table > tbody > tr.nem-neue-zeile > * {
    background: transparent;
}

/* Beschriftung UEBER dem Feld (UcSendungKopf: Label-Polster 5,1,5,0). */
.nem-label-oben {
    align-self: end;
    padding: 1px 5px 0 5px;
    line-height: var(--nem-zeilenhoehe);
}

/* Feld mit Symbolen IM Feld rechts (Herkunftssymbol, Suchen/Neu bei Kunde und Frachtzahler). */
.nem-feld-symbole {
    position: relative;
    min-width: 0;
}

.nem-feld-symbole-rechts {
    position: absolute;
    top: 0;
    right: 1px;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Transparenter Symbolknopf 22 breit (Find32/New32/ContactAlt32) - beim Ueberfahren blau wie der Knopfstil. */
.nem-symbolknopf {
    position: relative;
    flex: 0 0 auto;
    width: var(--nem-feld-hoehe);
    height: var(--nem-feld-hoehe);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.nem-symbolknopf:hover {
    background: var(--nem-knopf-hover);
}

.nem-symbolknopf > img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
}

/* Anzahl der Ansprechpartner unten rechts ueber dem Symbol (FontSize 15, fett, weiss). */
.nem-symbolknopf-zahl {
    position: absolute;
    right: 0;
    bottom: -3px;
    font-size: calc(var(--nem-schriftgroesse) + 1px);
    font-weight: 700;
    line-height: 13px;
    color: var(--nem-schrift-auf-akzent);
    text-shadow: 0 0 2px #000;
}

/* "Letzter Status": fett, ohne Hausrahmen (der Desktop-Stil hat kein BasedOn - WPF-Standardrahmen, eckig). */
.nem-feld-letzter-status {
    font-weight: bold;
    border: 1px solid #ABADB3;
    border-radius: 0;
}

/* Angelegt/Aktualisiert rechtsbuendig in der letzten Kopfspalte. */
.nem-stempel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    padding-right: 4px;
    white-space: nowrap;
}

.nem-stempel > b {
    margin-right: 6px;
}

.nem-stempel-wer {
    max-width: 120px;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menue ueber einer Tabelle im Spaltenkopfton (Status: "Avistermin setzen", Historie: "Neuer Eintrag"). */
.nem-menueleiste {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: var(--nem-zeile);
    padding: 0 4px;
    background: var(--nem-spalten-kopf);
    color: var(--nem-spalten-kopf-schrift);
}

.nem-menueleiste > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    font-size: var(--nem-schriftgroesse, 12px);
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

.nem-menueleiste > button:hover {
    background: var(--nem-knopf-hover);
}

.nem-menueleiste img {
    height: 16px;
}

/* Gruppierleiste ueber den Haustabellen (NemesisDataGrid): Suchfeld mit Platzhalter. */
.nem-gruppierleiste {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--nem-zeile);
    padding: 2px 6px;
    background: var(--nem-zeilen-kopf);
    border-bottom: 1px solid var(--nem-kontur);
}

/* Summenleiste unter der Collitabelle (NemesisStatusleiste Standard2 = blau): tfoot der Bootstrap-Tabelle. */
.table.nem-summen-blau > tfoot > tr > * {
    background-color: color-mix(in srgb, #528EC2 12%, var(--nem-flaeche));
    border-top-color: color-mix(in srgb, #528EC2 23%, var(--nem-flaeche));
}

.table.nem-summen-blau > tfoot > tr > *:first-child {
    box-shadow: inset 4px 0 0 #528EC2;
}

/* Tabellen, die breiter sind als die Kachel: waagerecht scrollen statt umbrechen. */
.nem-tabelle-scroll {
    overflow: auto;
}

.nem-tabelle-scroll > .table th,
.nem-tabelle-scroll > .table td {
    white-space: nowrap;
}

/* TABELLE FUELLT IHREN BEREICH, SUMMEN AM UNTEREN RAND (16.10.2026, Vorgabe Bastian: "Die Tabellen gehen in allen Views
   nicht ueber die volle Hoehe, die Summen liegen direkt unter der Tabelle, diese muessen am Ende der Seite stehen" -
   wie das NemesisSummenPanel des Desktops, das unter dem Grid am Fuss der Maske sitzt).
   - Die Tabelle ist mindestens so hoch wie ihr Scrollbereich (height: 100% wirkt bei Tabellen als Mindesthoehe). Hat der
     Bereich keine feste Hoehe, bleibt alles wie bisher.
   - Den Rest schluckt eine leere Pseudo-Zeile am Ende des (letzten) tbody - die echten Zeilen bleiben 26 hoch, statt
     sich zu strecken.
   - Kopf oben, Summenzeile (tfoot) unten bleiben beim Rollen stehen (sticky).
   Damit das greift, muss die View die Hoehe bis zum Scrollbereich durchreichen (Flex-/Grid-Kette ab .nem-tab-panel,
   Scrollbereich mit flex: 1 1 auto; min-height: 0) - siehe CLAUDE.md "Tabellen fuellen die Hoehe". */
.nem-tabelle-scroll > table {
    height: 100%;
}

.nem-tabelle-scroll > table > tbody:last-of-type::after {
    content: "";
    display: table-row;
}

/* Die echten Zeilen brauchen eine feste Hoehe, sonst verteilt der Browser den Rest auf ALLE Zeilen statt nur auf die
   Pseudo-Zeile (getestet 16.10.2026). 26 = Zeilenhoehe der Haustabelle; bei Zellen ist height eine Mindesthoehe,
   aufgeklappte Detailzeilen wachsen mit ihrem Inhalt. */
.nem-tabelle-scroll > table > tbody > tr > td,
.nem-tabelle-scroll > table > tbody > tr > th {
    height: var(--nem-zeile);
}

.nem-tabelle-scroll > table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.nem-tabelle-scroll > table > tfoot > tr > td,
.nem-tabelle-scroll > table > tfoot > tr > th {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.nem-rechts {
    text-align: right;
}

/* SUMMEN RECHTSBUENDIG UNTER IHRER SPALTE (17.10.2026, Rueckmeldung Bastian "Die Summen stehen in den Colli nicht direkt unter
   der Tabelle"): metro4.css richtet die Zellen jedes thead/tfoot einer .table links aus (".table tfoot td { text-align: left }",
   Spezifitaet 0,1,2) und schlug damit .nem-rechts - die Summen standen links in der Spalte statt unter den rechtsbuendigen
   Werten. Gilt fuer jede Fusszeile (NemesisDataGrid-Fuss, Bootstrap-tfoot); die Spaltenkoepfe bleiben links wie im Desktop. */
.table > tfoot > tr > td.nem-rechts,
.table > tfoot > tr > th.nem-rechts {
    text-align: right;
}

/* Reiterbereich, der seine Zelle fuellt (Adressreiter der Sendungsmaske, Hoehe 192): Kopf oben, Inhalt scrollt. */
.nem-reiter-voll {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.nem-reiter-voll > .rz-tabview-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Sendungsmaske: Grundschrift 12 wie der Desktop, kein Seitenrand ausser dem der Kacheln. */
.nem-sendungsmaske {
    padding: 2px 0;
}

/* Adressreiter: Inhalt ohne Polster - sechs Zeilen a 25 plus Reiterkopf passen sonst nicht in die 192 der Zeile. */
.nem-reiter-voll > .rz-tabview-panels,
.nem-reiter-voll > .rz-tabview-panels > .rz-tabview-panel {
    padding: 2px 0 0 0;
}

/* Knopf im Reiterkopf als span (der Reiterkopf ist selbst ein button). */
.nem-reiter-knopf {
    display: inline-block;
}

/* Papierkorb im Reiterkopf (2.–5. Lade-/Entladestelle entfernen, 14.11.2026) – das Zeichen mittig zur Schrift. */
.nem-reiter-knopf.nem-reiter-papierkorb {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.nem-reiter-knopf:hover {
    color: var(--nem-akzent);
}

/* Auswahlfeld mit Platzhalter (NemesisAuswahlfeld "Abholrelation..."): solange nichts gewaehlt ist, gedimmt. */
select.nem-auswahlfeld:invalid {
    color: var(--nem-schrift-gedimmt);
}

/* Bootstrap zieht ueber jedem Tabellenkoerper eine 2-px-Linie in currentColor - im Dunkelmodus die helle Schrift
   (Befund Bastian 11.10.2026: "weisse Striche zu hell im Datagrid"). Die Haustabelle hat dort keine Linie. */
.table > :not(:first-child) {
    border-top: 0;
}

/* ---------- Masken, die den Tab bis unten fuellen (Sendungsmaske: der Registerbereich schliesst mit der Seite ab) ---------- */
.nem-maske-fuellend {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 640px;
}

.nem-kachel.nem-kachel-fuellend {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nem-kachel.nem-kachel-fuellend > .nem-kachel-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nem-kachel-fuellend > .nem-kachel-inhalt > .rz-tabview {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nem-kachel-fuellend > .nem-kachel-inhalt > .rz-tabview > .rz-tabview-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.nem-kachel-fuellend > .nem-kachel-inhalt > .rz-tabview > .rz-tabview-panels > .rz-tabview-panel {
    height: 100%;
}

/* RadzenTabs, die den Rest der Maske fuellen (ohne Kachel drumherum): Reiter oben, das aktive Register als Spalte – ein
   NemesisDataGrid darin (.ndg ist flex 1 1 auto) reicht bis unten. Inaktive Register blendet Radzen selbst aus. */
.rz-tabview.nem-tabs-fuellend {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rz-tabview.nem-tabs-fuellend > .rz-tabview-panels,
.rz-tabview.nem-tabs-fuellend > .rz-tabview-panels > .rz-tabview-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* KUNDENPORTAL: HOEHENKETTE (18.10.2026, Rueckmeldung Bastian „die Tabelle reicht nicht bis unten“ – die Kundentabellen hatten feste
   60/65vh). Wie im Client-Bereich (.nem-tab-panel → .nem-maske-fuellend → Kachel .nem-kachel-fuellend → Grid): enthaelt die Seite eine
   .nem-maske-fuellend, wird das Kundenlayout (MainLayout „kunden-seite“) zur Spalte in Fensterhoehe – Menue oben, Inhalt dazwischen
   (rollt nur, wenn das Fenster kleiner als die Mindesthoehe ist), Platz fuer die feste Fusszeile unten. Seiten ohne fuellende Maske
   (Dashboard, Sendungserfassung) bleiben, wie sie sind. */
.kunden-seite:has(.nem-maske-fuellend) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding-bottom: 30px;       /* Platz fuer die feste Fusszeile (.footer in app.css, 29 px seit 29.10.2026) */
    box-sizing: border-box;
}

.kunden-seite:has(.nem-maske-fuellend) > main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.kunden-seite:has(.nem-maske-fuellend) > main > article.content {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 6px;
}

.kunden-seite:has(.nem-maske-fuellend) > main > .kunden-abstand {
    display: none;
}

/* Im Kundenportal ist die Mindesthoehe kleiner: kein Reiterblock der Sendungsmaske, nur Filter + Tabelle. */
.kunden-seite .nem-maske-fuellend {
    min-height: 420px;
}

/* KUNDENPORTAL: RUNDE KNOEPFE (29.10.2026, Vorgabe Bastian „im Kundenbereich die Buttons bitte abrunden“): Rundung 6 wie OfficeController
   (--oc-radius-sm) und die Karte der KundenAktionsleiste. Am <html>, solange das Kundenlayout steht – so auch die Knoepfe der Radzen-Dialoge
   und Benachrichtigungen, die <RadzenComponents /> ausserhalb von .kunden-seite rendert. Eingaben, Kacheln und der Client-Bereich bleiben
   kantig (2 px). Wirkt auf RadzenButton, die Knoepfe des NemesisDataGrid und den Hell/Dunkel-Umschalter (alle ueber --nem-knopf-radius). */
html:has(.kunden-seite) {
    --nem-knopf-radius: 6px;
}

/* ---------- MASKEN-OVERLAY (Shared/MaskenOverlay.razor): Suchen und Auswaehlen ueber der Maske ----------
   Wie das Overlay der Desktop-Masken: Schleier NUR UEBER DER MASKE (11.10.2026, To-do #70: "Die Overlays sind zu lang, sie
   werden bis ueber den Content gezeigt"): Lage und Groesse setzt js/overlay.js auf die Flaeche des Tab-Inhalts (zwischen
   Ribbon und Reiterleiste), ohne Tab-Host gilt das ganze Fenster. Rand wie DialogFlaeche im Desktop 30,45,30,30; die Karte
   wird nie hoeher oder breiter als diese Flaeche. Karte mit Kopf oben (Titel, Beenden in Fehlerfarbe), darunter das Menue mit den
   Knoepfen des Overlays. */
.nem-overlay-schleier {
    position: fixed;
    top: var(--nem-ov-oben, 0px);
    left: var(--nem-ov-links, 0px);
    width: var(--nem-ov-breite, 100vw);
    height: var(--nem-ov-hoehe, 100vh);
    box-sizing: border-box;     /* Rand innerhalb der gemessenen Flaeche */
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 45px 30px 30px 30px;
    overflow: hidden;
    background: rgba(0, 0, 0, .5);
}

.nem-overlay-karte {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    background: var(--nem-flaeche);
    color: var(--nem-schrift);
    border: 1px solid var(--nem-kontur);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* Kopf und Menue (14.11.2026, Vorgabe Bastian „die Buttons sind mit im Header des Overlays. Aendere das bitte in ein Menue unter dem
   Titel … bei allen Overlays“): der KOPF traegt nur den Titel und rechts „Beenden“, darunter liegt das MENUE (.nem-overlay-leiste) mit
   den Knoepfen des Overlays. Ohne Knoepfe gibt es kein Menue (MaskenOverlay ohne Leiste, Rueckfragen). */
.nem-overlay-kopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 4px 6px 4px 10px;
    background: var(--nem-reiter-flaeche);
    border-bottom: 1px solid var(--nem-kontur);
}

.nem-overlay-kopf > .nem-overlay-titel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nem-overlay-leiste {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 4px 6px;
    background: color-mix(in srgb, var(--nem-reiter-flaeche) 45%, var(--nem-flaeche));
    border-bottom: 1px solid var(--nem-kontur);
}

/* Ein Overlay, dessen Leiste gerade keinen Knopf zeigt (alles in @if), bekommt kein leeres Menue. */
.nem-overlay-leiste:empty {
    display: none;
}

.nem-overlay-titel {
    margin-right: 10px;
    font-size: var(--nem-schriftgroesse, 12px);
    font-weight: 600;
    color: var(--nem-akzent);
}

/* Knoepfe der Overlay-Leiste: flach in der Akzentfarbe wie die Desktop-Knoepfe. */
.nem-overlay-leiste > button,
.nem-overlay-knopf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--nem-zeile);
    padding: 0 10px;
    font-size: var(--nem-schriftgroesse, 12px);
    color: var(--nem-knopf-schrift);
    background: var(--nem-knopf-flaeche);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

.nem-overlay-leiste > button:hover,
.nem-overlay-knopf:hover {
    background: var(--nem-knopf-hover);
}

.nem-overlay-leiste > button .rzi,
.nem-overlay-knopf .rzi {
    font-size: 16px;
}

.nem-overlay-kopf > button.nem-overlay-beenden {
    flex: 0 0 auto;
    margin-left: auto;
    background: var(--nem-fehler);
}

.nem-overlay-kopf > button.nem-overlay-beenden:hover {
    background: color-mix(in srgb, var(--nem-fehler) 80%, #000);
}

.nem-overlay-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px;
    overflow: auto;
}

/* ---------- REITERKACHEL (Shared/NemesisReiterKachel.razor = NemesisReiterKachel.cs) ----------
   Kachel im Hausgrau; in der Kopfzeile der Titel (halbfett, Akzentfarbe der Kachel, Rand 12 links/rechts) und direkt
   dahinter die Reiter wie NemesisReiter: Polster 12,5, Abstand 3, gewaehlt Flaeche + Linie, Schrift und 2-px-Kante oben
   in Akzentblau. Innenrand der Kachel 8,2,8,6. */
.nem-kachel.nem-reiterkachel {
    padding-top: 2px;
}

.nem-reiterkachel-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 3px;
    margin: 0 0 4px 0;
    border-bottom: 1px solid var(--nem-reiter-linie);
}

.nem-reiterkachel-titel {
    align-self: center;
    margin: 0 12px;
    font-weight: 600;
    color: var(--nem-kachel-akzent, #686868);
}

.nem-reiterkachel-reiter {
    position: relative;
    padding: 5px 12px;
    font-size: var(--nem-schriftgroesse, 12px);
    color: var(--nem-reiter-schrift);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}

.nem-reiterkachel-reiter:hover:not(.aktiv) {
    background: var(--nem-reiter-flaeche);
}

.nem-reiterkachel-reiter.aktiv {
    margin-bottom: -1px;
    color: var(--nem-akzent);
    background: var(--nem-flaeche);
    border-color: var(--nem-reiter-linie);
    box-shadow: inset 0 2px 0 var(--nem-akzent);
}

.nem-reiterkachel-inhalt {
    padding: 0;
}

/* Kontrollkaestchen mit Beschriftung in Maskenrastern (WPF CheckBox mit Content). */
.nem-haken {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    cursor: pointer;
}

.nem-haken > input {
    margin: 0;
}

/* "Keine Adresse zu ... gefunden." direkt am Adressfeld (UcAdresse/UcAdresseListe): Fehlerfarbe, halbfett, gekuerzt. */
.nem-nicht-gefunden {
    align-self: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--nem-fehler);
}

/* Kontaktdaten der Adresse (UcAnsprechpartnerR2) ueber den Zeilen 2-5 der Adressmaske. */
.nem-kontakte {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    height: 100px;
    z-index: 5;
    overflow: auto;
    background: var(--nem-flaeche);
    border: 1px solid var(--nem-kontur);
}

/* Eingabefeld in einer Tabellenzelle: flach wie die Zelle, erst beim Bearbeiten mit Rahmen. */
.nem-zellfeld {
    height: var(--nem-feld-hoehe);
    background: transparent;
    border-color: transparent;
}

.nem-zellfeld:hover {
    border-color: color-mix(in srgb, var(--nem-rahmen) 35%, transparent);
}

.nem-zellfeld:focus {
    background: var(--nem-eingabe-flaeche);
    border-color: var(--nem-rahmen);
}

select.nem-zellfeld {
    padding-right: 14px;
}

/* Geloeschte Zeile (LoeschKz 2): gedimmt und durchgestrichen. */
.nem-zeile-geloescht > td {
    color: var(--nem-schrift-gedimmt);
    text-decoration: line-through;
}

/* "Letzter Status" nach Wertung (UcSendungKopf): 1 gruen, 2 rot - 20 % Flaeche, Rahmen in der Farbe. */
.nem-feld-letzter-status.wertung-1 {
    background: rgba(76, 175, 80, .2);
    border-color: #4CAF50;
}

.nem-feld-letzter-status.wertung-2 {
    background: rgba(217, 83, 79, .2);
    border-color: #D9534F;
}

/* Zeilenstatus auch fuer die Bootstrap-Haustabelle (Status nach Wertung: 1 Erfolg, 2 Fehler) - Streifen links + 20 % Flaeche. */
.table > tbody > tr.nem-zeile-erfolg > * {
    background-color: rgba(76, 175, 80, .2);
}

.table > tbody > tr.nem-zeile-erfolg > *:first-child {
    box-shadow: inset 3px 0 0 #4CAF50;
}

.table > tbody > tr.nem-zeile-fehler > * {
    background-color: rgba(217, 83, 79, .2);
}

.table > tbody > tr.nem-zeile-fehler > *:first-child {
    box-shadow: inset 3px 0 0 #D9534F;
}

/* Gewaehlte Zeile einer Haustabelle: Selektionsflaeche und 3-px-Akzentstreifen links. */
.table > tbody > tr.table-active > * {
    background-color: var(--nem-selektion);
}

.table > tbody > tr.table-active > *:first-child {
    box-shadow: inset 3px 0 0 var(--nem-akzent);
}

/* Trefferliste der Sendungssuche (UcSendungTabelle): Symbole 16, zweizeilige Adressen, POD-Zelle gefaerbt. */
.nem-symbol16 {
    font-size: 16px;
    vertical-align: middle;
}

.nem-zweizeilig > span {
    display: block;
    line-height: 16px;
}

.table > tbody > tr > td.nem-pod-ja {
    text-align: center;
    font-weight: bold;
    color: #222528;
    background-color: lightgreen;
}

.table > tbody > tr > td.nem-pod-nein {
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    background-color: red;
}

/* Kurze Beschriftung in schmaler Spalte ("bis" in 25 px): ohne Polster, damit sie nicht gekuerzt wird. */
.nem-label.nem-label-schmal {
    padding: 2px 0;
    text-align: center;
    overflow: visible;
}

/* ===================== 8. Ladeskelett (11.10.2026) ===================== */
/* Nachbau von NemesisSkeleton / NemesisLadeSkelett (Nemesis.Middleware.Controls, Vorgabe Bastian 22.08.2026 "das Skeleton
   aus der LagerVerwaltung in die UcSendung"): Platzhalter dort, wo gleich der Inhalt steht - Inhalt und Skelett schliessen
   sich aus. Block 14 hoch, Rundung 3, Rand 0 2px; ein schmaler Glanzstreifen (40/50/60 %) wandert in 1,2 s durch.
   Farben NemesisSkelett.Basis/.Licht je Design (Abschnitt 1). Komponente: Shared/NemesisLadeSkelett.razor. */
.nem-skelett {
    display: block;
    height: 14px;
    margin: 0 2px;
    border-radius: 3px;
    align-self: center;
    background: linear-gradient(90deg, var(--nem-skelett-basis) 0%, var(--nem-skelett-basis) 40%,
        var(--nem-skelett-licht) 50%, var(--nem-skelett-basis) 60%, var(--nem-skelett-basis) 100%);
    background-size: 300% 100%;
    animation: nem-skelett-glanz 1.2s linear infinite;
    pointer-events: none;
}
@keyframes nem-skelett-glanz {
    from { background-position: 100% 0; }
    to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nem-skelett { animation: none; }
}
/* NemesisLadeSkelett: oben angedeutete Reiterleiste (fuenf Bloecke 90/70/80/70/110, 18 hoch, 6 Abstand), darunter
   gleich hohe Baender, die sich die vorhandene Hoehe teilen (UniformGrid) - Rand je Band 3px 2px. */
.nem-ladeskelett {
    display: flex;
    flex-direction: column;
    min-height: 0;
    pointer-events: none;
}
.nem-ladeskelett-reiter {
    display: flex;
    flex: 0 0 auto;
    margin-bottom: 6px;
}
.nem-ladeskelett-reiter > .nem-skelett {
    height: 20px;
}
.nem-ladeskelett-baender {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.nem-ladeskelett-baender > .nem-skelett {
    flex: 1 1 0;
    align-self: stretch;    /* volle Breite - "center" gilt in der Flex-Spalte quer und liesse das Band auf 0 schrumpfen */
    height: auto;
    min-height: 6px;
    margin: 3px 2px;
}

/* ---------- FUSSZEILE MIT DER VERSION (Client-Bereich, RadzenFooter im MainLayout) ----------
   16.10.2026, Vorgabe Bastian: "Mach den Footer mit der Version schmaler in der Hoehe". Polster ueber
   --rz-footer-padding (oben), hier nur Schrift und Zeilenhoehe: 12 px auf 16 px Zeile = 18 px Leiste statt 50. */
.rz-footer {
    font-size: var(--nem-schriftgroesse, 12px);
    line-height: var(--nem-zeilenhoehe);
}

/* ---------- LÖSCHZEICHEN UND ZEILENKNÖPFE (14.11.2026, Vorgabe Bastian: das Löschicon wie ShipmentManagement.Admin im Desktop, rot) ----------
   Shared/NemesisPapierkorb = NemesisPapierkorb des Desktops, fest in Signalrot (hell wie dunkel, auch im gedrückten/Hover-Zustand).
   .nem-zeilenknopf: flacher Symbolknopf für Tabellenzeilen und Leisten (20 hoch, Fläche erst beim Überfahren) – für neue Masken statt
   eigener *-zeilenknopf-Klassen. */
.nem-papierkorb {
    flex: 0 0 auto;
    color: var(--nem-fehler);
    vertical-align: middle;
}

/* Auf einem roten Knopf (ButtonStyle Danger mit Text) zeichnet der Papierkorb in der Schrift des Knopfes – rot auf rot wäre unsichtbar. */
.nem-papierkorb.nem-papierkorb-auf-rot {
    color: currentColor;
    margin-right: 4px;
}

.nem-zeilenknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 2px;
    background: transparent;
    border: 0;
    border-radius: var(--nem-radius);
    color: var(--nem-schrift);
    cursor: pointer;
}

.nem-zeilenknopf:hover:enabled {
    background: var(--nem-reiter-flaeche);
}

.nem-zeilenknopf:disabled {
    opacity: .4;
    cursor: default;
}

/* ===================== 9. Schrift und Hoehen wie der Desktop (16.10.2026) ===================== */
/* Vorgabe Bastian: "stell alles auf Segoe UI und 12 px um. Achte darauf, dass die Textboxen dann auch die richtigen Hoehen
   haben". Der Desktop setzt keine eigene Schrift - WPF nimmt die Windows-Schrift Segoe UI in 12 px (9 pt), NemesisTabelle
   ebenso 12. Bis hierher kam die Schrift aus dem Radzen-Theme "software" (Source Sans Pro, 14 px, Knoepfe 17 px).
   - EINE Quelle: --nem-schriftart / --nem-schriftgroesse; Radzen und Bootstrap haengen an ihren eigenen Variablen, die hier
     auf die Hauswerte gelegt werden. Auf dem Mac (ohne Segoe UI) greift die Systemschrift.
   - Die Grundgroesse des Dokuments (rem = 16 px) bleibt - sonst schrumpfen alle rem-Werte mit. Gesetzt wird body.
   - Ueberschriften (Radzen-Texte H1-H6, Bootstrap h1-h6) wie die Kachel-Ueberschrift des Desktops: 12 px halbfett.
   - Eingabefelder 22 hoch wie .nem-feld bzw. die TextBox der Desktop-Masken (Zeile 16 + 2 x 2 Polster + 2 x 1 Rand),
     Polster seitlich 4, Rundung 3. Knoepfe: normal 26 (wie die Overlay-Knoepfe), Small 22, ExtraSmall 18.
   - Bewusst NICHT angefasst: Symbolgroessen (.rzi) und Groessen, die so in einer WPF-XAML stehen (z. B. Dispo-Koepfe 13,
     Tarif-Pfeile 14/13/10, Tarifsuche-Titel 20, Ladetext des Grids 13). */
:root {
    --nem-schriftart: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    /* 13 px seit 14.11.2026 (Vorgabe Bastian „mach die Schrift im Clientbereich wieder einen Grad kleiner“; 29.10.2026 bis 14.11.2026 14 px,
       davor 12 px wie der Desktop). Die Höhen hängen an der Schrift (12 → 22/26, 14 → 26/30): Feld 24, Rasterzeile/Tabellenzeile/Knopf 28,
       kleiner Knopf 24, Mini-Knopf 20, Zeilenhöhe 16 – Formel je Schriftgröße s: Zeilenhöhe 2s−10, Feld 2s−2, Zeile 2s+2, Mini-Knopf 2s−6.
       Das Kundenportal bleibt bei 14 px (kundenportal.css setzt die fünf Werte zurück).
       Alle Radzen-/Bootstrap-Schriftgrößen dieses Abschnitts hängen an --nem-schriftgroesse. Neue Masken nehmen diese Variablen statt fester px. */
    --nem-schriftgroesse: 13px;
    --nem-zeilenhoehe: 16px;
    --nem-feld-hoehe: 24px;
    --nem-zeile: 28px;
    --nem-knopf-mini: 20px;

    /* Radzen: Schrift */
    --rz-text-font-family: var(--nem-schriftart);
    --rz-body-font-size: var(--nem-schriftgroesse);
    --rz-body-line-height: 1.334;
    --rz-text-body1-font-size: var(--nem-schriftgroesse);
    --rz-text-body1-line-height: var(--nem-zeilenhoehe);
    --rz-text-body1-letter-spacing: normal;
    --rz-text-body2-font-size: var(--nem-schriftgroesse);
    --rz-text-body2-line-height: var(--nem-zeilenhoehe);
    --rz-text-body2-letter-spacing: normal;
    --rz-text-subtitle1-font-size: var(--nem-schriftgroesse);
    --rz-text-subtitle1-line-height: var(--nem-zeilenhoehe);
    --rz-text-subtitle2-font-size: var(--nem-schriftgroesse);
    --rz-text-subtitle2-line-height: var(--nem-zeilenhoehe);
    --rz-text-button-font-size: var(--nem-schriftgroesse);
    --rz-text-button-letter-spacing: normal;
    --rz-text-caption-font-size: var(--nem-schriftgroesse);
    --rz-text-caption-letter-spacing: normal;
    --rz-text-overline-font-size: var(--nem-schriftgroesse);
    --rz-text-h1-font-size: var(--nem-schriftgroesse);
    --rz-text-h2-font-size: var(--nem-schriftgroesse);
    --rz-text-h3-font-size: var(--nem-schriftgroesse);
    --rz-text-h4-font-size: var(--nem-schriftgroesse);
    --rz-text-h5-font-size: var(--nem-schriftgroesse);
    --rz-text-h6-font-size: var(--nem-schriftgroesse);
    --rz-text-h1-line-height: var(--nem-zeilenhoehe);
    --rz-text-h2-line-height: var(--nem-zeilenhoehe);
    --rz-text-h3-line-height: var(--nem-zeilenhoehe);
    --rz-text-h4-line-height: var(--nem-zeilenhoehe);
    --rz-text-h5-line-height: var(--nem-zeilenhoehe);
    --rz-text-h6-line-height: var(--nem-zeilenhoehe);
    --rz-dialog-title-font-size: var(--nem-schriftgroesse);
    --rz-dialog-title-line-height: 20px;

    /* Radzen: Eingabefelder 22 hoch (TextBox, Numeric, DropDown, DatePicker, TextArea-Polster, Maske) */
    --rz-input-size-md: var(--nem-feld-hoehe);
    --rz-input-padding-block-md: 3px;
    --rz-input-padding-inline-md: 6px;
    --rz-input-padding-block: 3px;
    --rz-input-padding-inline: 6px;
    --rz-input-border-radius: 3px;
    --rz-text-area-padding-block: 3px;
    --rz-numeric-line-height: var(--nem-zeilenhoehe);
    --rz-numeric-input-padding-block-md: 3px;
    --rz-numeric-input-padding-inline-md: 6px 20px;
    --rz-numeric-button-height-md: 11px;
    --rz-datepicker-line-height: var(--nem-zeilenhoehe);
    --rz-datepicker-trigger-icon-size-md: 18px;
    --rz-dropdown-item-padding: 4px 8px;
    --rz-checkbox-width: 16px;
    --rz-checkbox-height: 16px;

    /* Radzen: Knoepfe */
    --rz-button-size-md: var(--nem-zeile);
    --rz-button-size-sm: var(--nem-feld-hoehe);
    --rz-button-size-xs: var(--nem-knopf-mini);
    --rz-button-line-height: 18px;

    /* Bootstrap (Kundenportal, Anmeldung, aeltere Seiten) */
    --bs-body-font-family: var(--nem-schriftart);
    --bs-body-font-size: var(--nem-schriftgroesse);
    --bs-body-line-height: 1.334;
}

/* SCHRIFTGRÖSSE JE BENUTZER (14.11.2026, Vorgabe Bastian: „Kannst du die Schriftgröße einstellbar machen? Konfiguration dann unter dem
   Nemesisbutton im Menü. Exklusiv für die WebApp.“; 11 px seit 14.11.2026, „eine weitere Schrift kleiner“): Menü „Nemesis“ → „Einstellungen“ → „Darstellung“ setzt am <html> das Attribut
   data-schrift – früh im <head> aus dem localStorage „nemesis-schrift“ (js/schrift.js), nach der Anmeldung aus admin_benutzer_einstellungen,
   Gruppe „Nemesis.WebApp“ (Client/Service/SchriftAnwendung). Ohne Attribut gilt :root oben (13). Größen, Standard und Formel (Zeilenhöhe 2s−10,
   Feld 2s−2, Zeile 2s+2, Mini-Knopf 2s−6) stehen in Shared/Models/Plattform/SchriftRegeln – eine neue Größe dort UND hier eintragen.
   Alles andere dieses Abschnitts hängt an den fünf Variablen; weil html = :root ist, rechnen die var()-Zuordnungen oben mit diesen Werten.
   Selektor bewusst html[data-schrift] (Spezifität 0,1,1 wie html:has(.kunden-seite)): kundenportal.css steht in der index.html danach und
   hält das Portal bei 14 px. NIE :root[data-schrift] (0,2,0) – das schlüge die Regel des Portals. */
html[data-schrift="11"] {
    --nem-schriftgroesse: 11px;
    --nem-zeilenhoehe: 12px;
    --nem-feld-hoehe: 20px;
    --nem-zeile: 24px;
    --nem-knopf-mini: 16px;
}

html[data-schrift="12"] {
    --nem-schriftgroesse: 12px;
    --nem-zeilenhoehe: 14px;
    --nem-feld-hoehe: 22px;
    --nem-zeile: 26px;
    --nem-knopf-mini: 18px;
}

html[data-schrift="13"] {
    --nem-schriftgroesse: 13px;
    --nem-zeilenhoehe: 16px;
    --nem-feld-hoehe: 24px;
    --nem-zeile: 28px;
    --nem-knopf-mini: 20px;
}

html[data-schrift="14"] {
    --nem-schriftgroesse: 14px;
    --nem-zeilenhoehe: 18px;
    --nem-feld-hoehe: 26px;
    --nem-zeile: 30px;
    --nem-knopf-mini: 22px;
}

html[data-schrift="15"] {
    --nem-schriftgroesse: 15px;
    --nem-zeilenhoehe: 20px;
    --nem-feld-hoehe: 28px;
    --nem-zeile: 32px;
    --nem-knopf-mini: 24px;
}

html[data-schrift="16"] {
    --nem-schriftgroesse: 16px;
    --nem-zeilenhoehe: 22px;
    --nem-feld-hoehe: 30px;
    --nem-zeile: 34px;
    --nem-knopf-mini: 26px;
}

body {
    font-family: var(--nem-schriftart);
    font-size: var(--nem-schriftgroesse);
    line-height: 1.334;
}

/* Radzen-Knoepfe: Grundschrift 17 px im Theme - hier 12; Polster so, dass die Hoehe genau der Groesse oben entspricht. */
.rz-button {
    font-size: var(--nem-schriftgroesse);
}

.rz-button-md {
    padding: 6px 12px;
    line-height: 18px;
}

.rz-button-sm {
    padding: 4px 10px;
    line-height: 18px;
}

.rz-button-xs {
    padding: 3px 6px;
    line-height: 16px;
}

.rz-button-md .rz-button-box,
.rz-button-sm .rz-button-box {
    line-height: 18px;
}

.rz-button-md.rz-button-icon-left,
.rz-button-sm.rz-button-icon-left {
    padding-inline-start: 6px;
}

.rz-button-md .rzi,
.rz-button-sm .rzi {
    font-size: 18px;
    line-height: 18px;
    width: 18px;
    height: 18px;
}

.rz-button-xs .rzi {
    font-size: 16px;
    line-height: 16px;
    width: 16px;
    height: 16px;
}

/* Ueberschriften wie die Kachel-Ueberschrift des Desktops: 12 halbfett. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-size: var(--nem-schriftgroesse);
    font-weight: 600;
    line-height: var(--nem-zeilenhoehe);
}

/* Bootstrap-Eingaben 22 hoch, Knoepfe 26 (klein 20) - wie Radzen und .nem-feld. */
.form-control,
.form-select {
    font-size: var(--nem-schriftgroesse);
    line-height: var(--nem-zeilenhoehe);
    padding: 3px 6px;
    border-radius: 3px;
}

.form-select {
    padding-right: 26px;
    background-position: right 4px center;
    background-size: 12px 10px;
}

textarea.form-control {
    min-height: var(--nem-feld-hoehe);
}

.input-group-text {
    font-size: var(--nem-schriftgroesse);
    line-height: var(--nem-zeilenhoehe);
    padding: 3px 6px;
}

.btn {
    --bs-btn-font-size: var(--nem-schriftgroesse);
    --bs-btn-line-height: var(--nem-zeilenhoehe);
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 12px;
}

.btn-sm {
    --bs-btn-padding-y: 3px;
    --bs-btn-padding-x: 6px;
    --bs-btn-font-size: var(--nem-schriftgroesse);
}

/* BREITE DROPDOWN-LISTE (29.10.2026, Rückmeldung Bastian: die aufgeklappte Artikelliste war so schmal wie die Tabellenspalte): ein RadzenDropDown
   mit PopupStyle = NemesisDesign.ArtikelListePopup (Markierung --nem-popup-breit) bekommt ein breiteres Popup, das Feld bleibt so breit wie die
   Spalte. Radzen setzt width/min-width des Popups inline per JavaScript und hängt es an body – deshalb :has() auf den Listenbereich und !important. */
.rz-dropdown-panel:has(> .rz-dropdown-items-wrapper[style*="--nem-popup-breit"]) {
    min-width: 460px !important;
    max-width: min(640px, 92vw) !important;
}

/* Hinweis "neue Version" (index.html, Service-Worker 16.10.2026): unten rechts ueber allem, Kartenbild mit Akzentstreifen. */
.nem-neue-version {
    position: fixed;
    right: 12px;
    bottom: 28px;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    font-size: var(--nem-schriftgroesse, 12px);
    color: var(--nem-schrift);
    background: var(--nem-karte);
    border: 1px solid var(--nem-kontur);
    border-radius: 2px;
    box-shadow: inset 4px 0 0 var(--nem-akzent), 0 2px 8px rgba(0, 0, 0, .25);
}

.nem-neue-version > button {
    height: var(--nem-feld-hoehe);
    padding: 0 10px;
    font: inherit;
    color: var(--nem-knopf-schrift);
    background: var(--nem-knopf-flaeche);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

.nem-neue-version > button:hover {
    background: var(--nem-knopf-hover);
}