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

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

/* ===================== 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);
    --rz-button-border-radius: var(--nem-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 12, Zeilen mind. 26 hoch, Zellpolster 4 waagerecht (+1 Rand) - deutlich dichter als
       Material. 5px oben/unten + Zeilenhoehe 1rem = 26px. */
    --rz-grid-header-cell-padding: 5px 5px;
    --rz-grid-cell-padding: 5px 5px;
    --rz-grid-cell-font-size: .75rem;
    --rz-grid-header-font-size: .75rem;

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

/* 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. */
.nem-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    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;
    align-items: center;
    min-height: 20px;
    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;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 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;
    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: 24px;
    padding: 2px 8px;
    background: var(--nem-k-fuss);
    border-top: 1px solid var(--nem-k-kontur);
    border-radius: 0 0 5px 0;
    font-size: 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;
}

/* 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: 30px;
    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: 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 26 auch bei Density.Compact (Radzen setzt dort 4px Polster, mit zwei Klassen). */
.rz-data-grid.rz-density-compact {
    --rz-grid-cell-padding: 5px 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: 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 12, Zeilen 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: .75rem;
}

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

.table > :not(caption) > * > * {
    padding: 5px 5px;
    border-bottom-width: 0;
    line-height: 1rem;
    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: 12px;
    color: var(--nem-schrift);
}

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

.nem-label {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    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: 22px;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    font: inherit;
    font-size: 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: 18px;
}

/* 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: 22px;
    min-width: 22px;
    padding: 0 3px;
    font-size: 12px;
    line-height: 20px;
    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: 12px;
    line-height: 14px;
    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: 12px;
}

.nem-maske .table > :not(caption) > * > * {
    height: 26px;
    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: 16px;
}

/* 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: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

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

.nem-symbolknopf > img {
    width: 18px;
    height: 18px;
    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: 13px;
    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: 26px;
    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: 24px;
    padding: 0 8px;
    font-size: 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: 26px;
    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: 26px;
}

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

.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: 20px;
    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;
}

/* ---------- 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 Leiste oben (Titel, Knoepfe des Overlays, Beenden in Fehlerfarbe). */
.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;
}

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

.nem-overlay-titel {
    margin-right: 10px;
    font-size: 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: 26px;
    padding: 0 10px;
    font-size: 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-leiste > button.nem-overlay-beenden {
    margin-left: auto;
    background: var(--nem-fehler);
}

.nem-overlay-leiste > 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: 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: 22px;
    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: 14px;
}

.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: 18px;
}
.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: 12px;
    line-height: 16px;
}

/* ===================== 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;
    --nem-schriftgroesse: 12px;
    --nem-zeilenhoehe: 16px;

    /* Radzen: Schrift */
    --rz-text-font-family: var(--nem-schriftart);
    --rz-body-font-size: .75rem;
    --rz-body-line-height: 1.334;
    --rz-text-body1-font-size: .75rem;
    --rz-text-body1-line-height: var(--nem-zeilenhoehe);
    --rz-text-body1-letter-spacing: normal;
    --rz-text-body2-font-size: .75rem;
    --rz-text-body2-line-height: var(--nem-zeilenhoehe);
    --rz-text-body2-letter-spacing: normal;
    --rz-text-subtitle1-font-size: .75rem;
    --rz-text-subtitle1-line-height: var(--nem-zeilenhoehe);
    --rz-text-subtitle2-font-size: .75rem;
    --rz-text-subtitle2-line-height: var(--nem-zeilenhoehe);
    --rz-text-button-font-size: .75rem;
    --rz-text-button-letter-spacing: normal;
    --rz-text-caption-font-size: .75rem;
    --rz-text-caption-letter-spacing: normal;
    --rz-text-overline-font-size: .75rem;
    --rz-text-h1-font-size: .75rem;
    --rz-text-h2-font-size: .75rem;
    --rz-text-h3-font-size: .75rem;
    --rz-text-h4-font-size: .75rem;
    --rz-text-h5-font-size: .75rem;
    --rz-text-h6-font-size: .75rem;
    --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: .75rem;
    --rz-dialog-title-line-height: 18px;

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

    /* Radzen: Knoepfe */
    --rz-button-size-md: 26px;
    --rz-button-size-sm: 22px;
    --rz-button-size-xs: 18px;
    --rz-button-line-height: 18px;

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

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: 4px 10px;
    line-height: 18px;
}

.rz-button-sm {
    padding: 2px 8px;
    line-height: 18px;
}

.rz-button-xs {
    padding: 1px 4px;
    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: 4px;
}

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

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

/* 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: 2px 4px;
    border-radius: 3px;
}

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

textarea.form-control {
    min-height: 22px;
}

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

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

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

/* 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: 22px;
    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);
}