/* Weber-CI 3.2: Schrift Aptos (Windows / Microsoft 365), Ersatz Segoe UI. Keine Webschriften. */
:root {
    --weber-font: Aptos, "Segoe UI", system-ui, sans-serif;
    --weber-primary: #009EE3;
    --weber-accent1: #007DB6;
    --weber-secondary: #39D2C0;
    --weber-tertiary: #EE8B60;
    --weber-alternate: #E0E3E7;
    --weber-primary-text: #14181B;
    --weber-secondary-text: #57636C;
    --weber-primary-bg: #F1F4F8;
    --weber-secondary-bg: #FFFFFF;
    --weber-success: #249689;
    --weber-warning: #F9CF58;
    --weber-error: #FF5963;
    --weber-info: #FFFFFF;
    --weber-shadow-sm: 0 1px 2px rgba(20, 24, 27, 0.06), 0 1px 3px rgba(20, 24, 27, 0.08);
    --weber-shadow-md: 0 2px 6px rgba(20, 24, 27, 0.08), 0 4px 12px rgba(20, 24, 27, 0.06);
    --weber-shadow-lg: 0 8px 24px rgba(20, 24, 27, 0.1), 0 2px 6px rgba(20, 24, 27, 0.06);
    --weber-radius: 12px;
    --weber-radius-pill: 40px;
    /* Weber-CI: Kopfzeile hoechstens 56 px, darunter 4 px blaue Linie. */
    --weber-topbar-h: 60px;
    /* So breit wie die Navigation der Weber-CI-Startseite (Paket: 252 px, kompakt 220 px) -
       sonst springt beim Wechsel Startseite <-> Maske der ganze Inhalt. Kompakt setzt
       weber-ci-workspace.js aus dem Merker des Pakets. */
    --weber-sidebar-w: 252px;
}

html[data-ws-kompakt="ja"] {
    --weber-sidebar-w: 220px;
}

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

html, body {
    font-family: var(--weber-font);
    margin: 0;
    padding: 0;
    background-color: var(--weber-primary-bg);
    color: var(--weber-primary-text);
    min-height: 100vh;
}

a {
    color: var(--weber-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-family: var(--weber-font);
    color: var(--weber-primary-text);
}

/* Symbole im Weber-CI-Kaestchen groesser (Wunsch vom 25.09.2026, bewusste Abweichung von der
   CI): weber-ci.css zeigt das SVG nur mit 48-64 % der Kaestchenbreite; die eigenen Symbole
   (ws-..., weber-ci-workspace.js) sollen die Flaeche fast ganz fuellen. "body" hebt die
   Spezifitaet ueber die Regeln aus weber-ci.css, das nach dieser Datei geladen wird. */
body .wb-mark > svg {
    width: 80%;
    height: 80%;
}

/* Auf der Weber-CI-Startseite erben Ueberschriften die Farbe von weber-ci.css - sonst
   stuende "UEBERSICHT" im dunklen Modus dunkel auf dunkel. */
body.wb h1, body.wb h2, body.wb h3, body.wb h4 {
    color: inherit;
}

h1:focus {
    outline: none;
}

.validation-message {
    color: var(--weber-error);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Es ist ein Fehler aufgetreten.";
}

/* =========================================================
   Login, Abmelden, Seite nicht gefunden (zentrierte Karte)
   Weber-CI 3.2: ruhige Flaeche, Kopf weiss mit 4 px blauer Linie,
   leicht gerundete Ecken, Formular mit wb-field / wb-select / wb-btn.
   ========================================================= */
.weber-login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--weber-primary-bg);
    padding: 84px 24px 24px 24px;
}

/* Kopf der Anmeldeseite wie der CI-Rahmen: Logo auf weissem Feld, Programmname, blaue Linie. */
.weber-login-kopf {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    background: #FFFFFF;
    border-bottom: 4px solid var(--weber-primary);
}

.weber-login-kopf .topbar-logo-feld {
    background: #FFFFFF;
    padding: 2px 6px;
    display: flex;
    align-items: center;
}

.weber-login-kopf .topbar-logo {
    height: 36px;
    width: auto;
    display: block;
}

.weber-login-kopf-trenner {
    width: 1px;
    height: 28px;
    background: var(--weber-alternate);
}

.weber-login-kopf-name {
    font-family: var(--weber-font);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--weber-primary-text);
}

.weber-login-card {
    width: 100%;
    max-width: 420px;
    background-color: var(--weber-secondary-bg);
    border: 1px solid var(--weber-alternate);
    border-top: 4px solid var(--weber-primary);
    border-radius: 6px;
    box-shadow: var(--weber-shadow-sm);
    overflow: hidden;
}

.weber-login-header {
    background-color: #FFFFFF;
    color: var(--weber-primary-text);
    border-bottom: 1px solid var(--weber-alternate);
    padding: 18px 28px;
}

.weber-login-header .brand {
    font-family: var(--weber-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--weber-secondary-text);
}

.weber-login-header h1 {
    font-family: var(--weber-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--weber-primary-text);
    margin: 4px 0 0 0;
}

.weber-login-body {
    padding: 28px;
}

.weber-login-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--weber-alternate);
    margin-bottom: 22px;
}

.weber-login-tabs .tab {
    background: none;
    border: none;
    padding: 10px 24px;
    font-family: var(--weber-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--weber-secondary-text);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.weber-login-tabs .tab.active {
    color: var(--weber-primary-text);
    border-bottom-color: var(--weber-primary);
}

.weber-login-tabs .tab:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.weber-login-title {
    font-family: var(--weber-font);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

/* Eingabefelder der Anmeldung: Aussehen aus wb-select (weber-ci.css), hier nur Breite,
   Hoehe und Fehlerzustand. */
.weber-login-feld {
    width: 100%;
    height: 40px;
}

.weber-login-feld.is-error {
    border-color: var(--weber-error);
}

.weber-login-body .weber-actions .wb-btn {
    height: 40px;
}

.weber-login-body .wb-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.weber-login-subtitle {
    font-family: var(--weber-font);
    font-size: 13px;
    color: var(--weber-secondary-text);
    margin: 4px 0 18px 0;
    white-space: pre-line;
}

@keyframes weberFadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* =========================================================
   Authentifiziertes Layout: Topbar + Sidebar + Content
   ========================================================= */
.weber-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--weber-sidebar-w) 1fr;
    grid-template-rows: var(--weber-topbar-h) 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar content";
    background-color: var(--weber-primary-bg);
    transition: grid-template-columns 0.2s ease;
}

.weber-app.is-collapsed {
    grid-template-columns: 0 1fr;
}

.weber-app.is-collapsed .weber-sidebar {
    display: none;
}

/* Weber-CI 3.2: weisse Kopfzeile, darunter die blaue Linie aus dem Logo-Unterstrich
   (4 px Weber-Blau ueber die volle Breite). */
.weber-topbar {
    grid-area: topbar;
    background: #FFFFFF;
    color: var(--weber-primary-text);
    border-bottom: 4px solid var(--weber-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.weber-topbar .topbar-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: -16px;
    /* Breite des schwarzen Header-Bereichs (Sidebar-Breite) minus Start-Offset,
       damit das Logo per margin-left:auto rechtsbuendig zur schwarzen Flaeche steht. */
    width: calc(var(--weber-sidebar-w) - 12px);
    padding-right: 16px;
}

.weber-topbar .topbar-toggles .sidebar-toggle {
    margin-right: 0;
}

/* Logo immer vollstaendig auf weissem Feld - auch wenn die Umgebung einmal dunkel ist. */
.weber-topbar .topbar-toggles .topbar-logo-feld {
    margin-left: auto;
    background: #FFFFFF;
    padding: 2px 6px;
    display: flex;
    align-items: center;
}

.weber-topbar .topbar-toggles .topbar-logo {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
}

.weber-topbar .user-block {
    position: relative;
}

.weber-topbar .avatar-wrap .avatar {
    cursor: pointer;
}

.avatar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--weber-alternate);
    border-radius: 8px;
    box-shadow: var(--weber-shadow-md);
    min-width: 170px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
}

.avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--weber-primary-text);
    white-space: nowrap;
}

.avatar-menu-item .ci-zeichen {
    display: inline-flex;
    flex-shrink: 0;
}

.avatar-menu-item:hover {
    background: var(--weber-primary-bg);
}

.weber-topbar .sidebar-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px 10px;
    margin-right: 12px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.weber-topbar .sidebar-toggle:hover {
    background-color: var(--weber-primary-bg);
}

.weber-topbar .sidebar-toggle .bar {
    width: 22px;
    height: 2px;
    background-color: var(--weber-primary-text);
    border-radius: 1px;
    display: block;
}

.weber-topbar .brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-right: auto;
    margin-left: 24px;
}

.weber-topbar .topbar-seite {
    /* Aktueller Seitenname absolut mittig im Menueband, unabhaengig von der Breite der Seitenbloecke. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.weber-topbar .topbar-seite .name {
    font-family: var(--weber-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.weber-topbar .brand .name {
    font-family: var(--weber-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.weber-topbar .brand .sub {
    font-family: var(--weber-font);
    font-size: 12px;
    opacity: 0.8;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.weber-topbar .user-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.weber-topbar .user-block .who {
    text-align: right;
    line-height: 1.2;
}

/* Nur wenn die Schluessel-Anzeige freigeschaltet ist, kopiert ein Klick sie als JSON. */
.weber-topbar .user-block .who.is-klickbar {
    cursor: pointer;
}

.weber-topbar .user-block .who .kopiert {
    font-family: var(--weber-font);
    font-size: 11px;
    opacity: 0.85;
}

.weber-topbar .user-block .who .name {
    font-family: var(--weber-font);
    font-size: 14px;
    font-weight: 500;
}

.weber-topbar .user-block .who .role {
    font-family: var(--weber-font);
    font-size: 11px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.weber-topbar .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--weber-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--weber-font);
    font-size: 14px;
    font-weight: 700;
    border: 2px solid var(--weber-primary-text);
}

.weber-topbar .logout-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--weber-radius-pill);
    padding: 8px 18px;
    font-family: var(--weber-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.weber-topbar .logout-btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

/* Sidebar */
/* Das Seitenmenue scrollt unabhaengig vom Inhalt (14.08.2026).

   Vorher wuchs die Leiste mit der Seite: Ihr overflow-y griff nie, weil die Gitterzeile so
   hoch wurde wie der Inhalt. Bei langen Masken wanderte das Menue nach oben aus dem Bild,
   und bei Modulen mit vielen Eintraegen - DokuTool-NewMenu hat zwoelf Gruppen mit rund 120 Masken -
   musste man erst die ganze Seite hinunterscrollen, um an die unteren Punkte zu kommen.

   Loesung ohne Eingriff in den Seitenfluss: Die Leiste bleibt haften (sticky) und bekommt
   die Hoehe des sichtbaren Bereichs unter der Topbar, die ihrerseits schon sticky ist.
   Damit hat sie einen eigenen Rollbalken, waehrend der Inhalt weiter im Fenster scrollt -
   bestehende Masken, die auf das Fensterscrollen bauen, bleiben unberuehrt.

   align-self: start ist noetig, weil Gitterelemente sonst auf die volle Zeilenhoehe
   gestreckt werden und "sticky" nichts zu haften haette. */
.weber-sidebar {
    grid-area: sidebar;
    background-color: var(--weber-secondary-bg);
    border-right: 1px solid var(--weber-alternate);
    padding: 24px 0;
    position: sticky;
    top: var(--weber-topbar-h);
    align-self: start;
    height: calc(100vh - var(--weber-topbar-h));
    overflow-y: auto;
    /* Am Ende der Liste nicht die Seite darunter mitscrollen. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--weber-alternate) transparent;
}

.weber-sidebar::-webkit-scrollbar {
    width: 8px;
}

.weber-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--weber-alternate);
    border-radius: 4px;
}

.weber-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.weber-sidebar .group-title {
    font-family: var(--weber-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--weber-secondary-text);
    padding: 12px 24px 6px 24px;
}

/* ---------- EINE LINKE LEISTE (04.10.2026, Vorlage Fuhrpark Build 486) ----------
   Module mit vielen Masken (SeitenMenueGruppen): Kopf "Navigation" mit "alle auf / alle zu",
   Suchfeld, Gruppenkoepfe zum Auf- und Zuklappen. Die Koepfe gelten fuer die Leiste der
   Masken UND die Navigation der Weber-CI-Startseite (dort setzt weber-ci-workspace.js die
   Klasse ws-leiste-gruppe an den Kopf des Pakets) - ein Aussehen fuer beide.
   Kopf: normale Schreibweise, 13 px halbfett, Flaeche in sehr hellem Weber-Blau, links ein
   Streifen in der Bereichsfarbe, rechts die Zahl der Masken (nur zugeklappt) und ein
   gezeichneter Winkel, gedreht ueber aria-expanded - Anzeige und Zustand stimmen immer ueberein.
   !important nur dort, wo ci/weber-ci.css fuer .wb-sidebar__group Groesse, Grossbuchstaben
   und Polster setzt. */
.ws-leiste-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px 0 24px;
    font-family: var(--weber-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--weber-secondary-text);
}

.ws-leiste-alle {
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 400;
    color: var(--weber-secondary-text);
    padding: 2px 6px;
    border-radius: 6px;
}

.ws-leiste-alle:hover {
    background: var(--weber-primary-bg);
    color: var(--weber-primary-text);
}

.ws-leiste-suche {
    margin: 6px 10px 4px;
}

.ws-leiste-suche input {
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    padding: 0 8px;
    font-family: var(--weber-font);
    font-size: 12.5px;
    border: 1px solid var(--weber-alternate);
    border-radius: 6px;
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
}

.ws-leiste-suche input:focus {
    outline: 2px solid var(--weber-primary);
    outline-offset: -1px;
}

.ws-leiste-leer {
    padding: 10px 24px;
    font-size: 12px;
    color: var(--weber-secondary-text);
}

.ws-leiste-gruppe {
    display: flex !important;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 30px;
    margin: 4px 10px 2px !important;
    padding: 5px 8px 5px 11px !important;
    font-family: var(--weber-font);
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
    color: var(--weber-primary-text) !important;
    background: color-mix(in srgb, #009EE3 9%, var(--weber-secondary-bg));
    box-shadow: inset 3px 0 0 var(--ws-bereich, var(--g-strong, #9AA7B2));
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

.wb-sidebar .ws-leiste-gruppe {
    margin: 4px 0 2px !important;
}

.ws-leiste-gruppe:hover {
    background: color-mix(in srgb, #009EE3 17%, var(--weber-secondary-bg));
}

.ws-leiste-gruppe:focus-visible {
    outline: 2px solid #009EE3;
    outline-offset: 1px;
}

.ws-leiste-gruppe .ws-leiste-name {
    flex: 1;
    min-width: 0;
}

.ws-leiste-gruppe .ws-leiste-zahl {
    flex: 0 0 auto;
    min-width: 18px;
    box-sizing: border-box;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    text-align: center;
    color: var(--weber-secondary-text);
    background: color-mix(in srgb, #009EE3 16%, var(--weber-secondary-bg));
}

.ws-leiste-gruppe .ws-leiste-zahl:empty {
    display: none;
}

.ws-leiste-gruppe .ws-leiste-pfeil {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0 4px 0 2px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    opacity: .6;
    transform: rotate(-45deg);
}

.ws-leiste-gruppe[aria-expanded="true"] .ws-leiste-pfeil {
    transform: translateY(-2px) rotate(45deg);
}

.weber-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.weber-nav li {
    margin: 0;
}

/* Eintraege, die in ein eigenstaendiges Modul wechseln, sind Anker OHNE href - sonst
   wuerde ein href="#" auf "/" navigieren und dort kurz die Startroute einblenden.
   Ohne href setzen Browser aber den Standardzeiger, deshalb hier ausdruecklich. */
.weber-tile[role="button"],
.weber-nav a[role="button"] {
    cursor: pointer;
}

/* Weber-CI 3.2, linke Leiste: Weber-Zeichen (extra klein, 18 px) · Name · farbige Kante
   links in der Bereichsfarbe. Zeichen und Farbe setzt weber-ci-workspace.js aus weber-ci.js
   (data-ci-zeichen, data-ci-bereich -> --ws-bereich). */
.weber-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 20px;
    margin: 1px 10px;
    font-family: var(--weber-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--weber-primary-text);
    border-left: 3px solid var(--ws-bereich, transparent);
    border-radius: 4px;
    transition: background-color 0.12s, color 0.12s;
}

.weber-nav a:hover {
    text-decoration: none;
    background-color: var(--weber-primary-bg);
}

/* Aktive Seite hell markiert (13 % Weber-Blau), nicht als kraeftige Blauflaeche - Vorgabe
   Kirk 03.10.2026 fuer die eine linke Leiste. */
.weber-nav a.active {
    background-color: color-mix(in srgb, #009EE3 13%, var(--weber-secondary-bg));
    color: var(--weber-primary-text);
    font-weight: 600;
}

.weber-nav .ico {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.weber-app.is-collapsed .weber-sidebar .group-title {
    display: none;
}

.weber-app.is-collapsed .weber-nav a {
    justify-content: center;
    padding: 11px 0;
    gap: 0;
}

.weber-app.is-collapsed .weber-nav a > span:last-child {
    display: none;
}

/* ---------- ZOOM WIE IN EXCEL (04.10.2026) ----------
   Auswahlfeld in der Kopfzeile (Masken: WeberLayout, Startseite: neben den Initialen). Den
   Inhalt baut weber-ci-workspace.js; es setzt --ws-zoom an <html>. Wie in Excel waechst nur der
   Inhalt, Kopfzeile und linke Leiste bleiben stehen. */
.weber-content,
.wb-main {
    zoom: var(--ws-zoom, 1);
}

/* Beim Drucken immer 100 % (wie der Hausbaustein weber-zoom.js): ein Ausdruck soll aussehen wie ein Ausdruck,
   nicht wie der Bildschirm des Anwenders. Das Auswahlfeld selbst gehoert nicht aufs Papier. */
@media print {
    .weber-content,
    .wb-main {
        zoom: 1 !important;
    }

    .ws-zoom {
        display: none !important;
    }
}

.ws-zoom {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    border: 1px solid var(--weber-alternate);
    border-radius: 6px;
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    font-family: var(--weber-font);
    font-size: 13px;
}

.ws-zoom:empty {
    display: none;
}

.ws-zoom__feld {
    width: 58px;
    height: 100%;
    box-sizing: border-box;
    padding: 0 4px 0 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: right;
}

.ws-zoom__feld:focus {
    outline: 2px solid #009EE3;
    outline-offset: -1px;
    border-radius: 5px 0 0 5px;
}

.ws-zoom__pfeil {
    width: 24px;
    height: 100%;
    border: 0;
    border-left: 1px solid var(--weber-alternate);
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ws-zoom__pfeil:hover {
    background: color-mix(in srgb, #009EE3 9%, var(--weber-secondary-bg));
}

.ws-zoom__pfeil span {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    opacity: .7;
    transform: rotate(45deg);
}

.ws-zoom__liste {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 190px;
    padding: 4px;
    background: var(--weber-secondary-bg);
    border: 1px solid var(--weber-alternate);
    border-radius: 8px;
    box-shadow: var(--weber-shadow-md);
}

.ws-zoom.ist-offen .ws-zoom__liste {
    display: flex;
    flex-direction: column;
}

.ws-zoom__liste button {
    border: 0;
    background: transparent;
    color: var(--weber-primary-text);
    font: inherit;
    text-align: left;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.ws-zoom__liste button:hover {
    background: color-mix(in srgb, #009EE3 9%, var(--weber-secondary-bg));
}

.ws-zoom__liste button.ist-aktiv {
    background: color-mix(in srgb, #009EE3 13%, var(--weber-secondary-bg));
    font-weight: 600;
}

.ws-zoom__hinweis {
    margin-top: 4px;
    padding: 6px 10px 2px;
    border-top: 1px solid var(--weber-alternate);
    font-size: 11.5px;
    color: var(--weber-secondary-text);
}

.ws-zoom__maske {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12.5px;
    cursor: pointer;
}

/* Content-Bereich */
.weber-content {
    grid-area: content;
    padding: 28px 32px;
    overflow-y: auto;
}

.weber-content.is-flush {
    padding: 0;
}

.weber-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.weber-content-header h1 {
    font-family: var(--weber-font);
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    color: var(--weber-primary-text);
}

.weber-content-header .crumbs {
    font-family: var(--weber-font);
    font-size: 13px;
    color: var(--weber-secondary-text);
}

/* Panel = weiße Karte mit Schatten — Bauteil für Inhalte */
.weber-panel {
    background-color: var(--weber-secondary-bg);
    border-radius: var(--weber-radius);
    box-shadow: var(--weber-shadow-sm);
    border: 1px solid var(--weber-alternate);
    padding: 22px 24px;
}

.weber-panel + .weber-panel {
    margin-top: 20px;
}

.weber-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -2px 0 14px 0;
}

.weber-panel-header h2 {
    font-family: var(--weber-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--weber-primary-text);
    margin: 0;
}

.weber-panel-header .hint {
    font-family: var(--weber-font);
    font-size: 12px;
    color: var(--weber-secondary-text);
}

/* Tile-Grid (Home-Dashboard, mehr Spalten als in der App) */
.weber-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.weber-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 12px 14px 12px;
    background-color: var(--weber-secondary-bg);
    border: 1px solid var(--weber-alternate);
    border-radius: var(--weber-radius);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.weber-tile:hover {
    text-decoration: none;
    border-color: var(--weber-primary);
    box-shadow: var(--weber-shadow-md);
    transform: translateY(-2px);
    color: inherit;
}

.weber-tile img {
    width: 96px;
    height: 76px;
    object-fit: contain;
    margin-bottom: 8px;
}

.weber-tile-label {
    font-family: var(--weber-font);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--weber-primary-text);
    line-height: 1.3;
}

/* Form-Grundbausteine im Weber-Stil (pill-shaped) */
.weber-form {
    max-width: 600px;
}

/* Ticket-Bearbeiten: Eingabe-Formulare nutzen die volle Panel-/Seitenbreite. */
.ticket-form {
    max-width: none;
}

/* Sync-Formulare nutzen die volle Panel-Breite (statt 600px), damit das Dropdown
   breit bleibt und die Buttons rechts daneben den freien Platz fuellen. */
.dbsync-form {
    max-width: none;
}

/* Dropdown + Button nebeneinander (Button rechts neben dem Dropdown) */
.dbsync-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Auf der Sync-Seite kein Lade-Spinner anzeigen – der Wait-Cursor signalisiert das Laden. */
.dbsync-row .weber-row-spinner {
    display: none;
}

/* Transparentes Voll-Overlay, das waehrend einer Aktion nur den Maus-Wait-Cursor setzt
   (kein Symbol, blockiert solange Eingaben). */
.dbsync-wait-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    cursor: wait;
    background: transparent;
}

.dbsync-row .weber-dropdown {
    flex: 0 0 350px;
    width: 350px;
}

.dbsync-row .weber-btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}

.weber-form-row {
    margin-bottom: 16px;
}

.weber-form-row .label {
    display: block;
    font-family: var(--weber-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--weber-primary-text);
    margin-bottom: 6px;
    padding-left: 6px;
}

/* Kaskaden-Formular breit genug, damit die Dropdown-Spalte (1fr) trotz der
   reservierten Button-Spalte 533px breit bleibt: 533 + 288 (Buttons) + 12 (gap). */
.weber-form-kaskade {
    max-width: 833px;
}

/* Grid mit fester Button-Spalte: Die Dropdown-Spalte (1fr) bleibt in jeder Zeile
   gleich breit, egal ob der/die Button(s) vorhanden sind. Die Spalte fasst die
   zwei gleich grossen Buttons 'Zurück' + 'Anlegen' (2x 140px + 8px gap). */
.weber-kaskade-control {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 288px;
    align-items: center;
    gap: 12px;
}

/* Zusammenfassung der getroffenen Auswahl an der Position des ersten Dropdowns
   (ueberlagert das ausgeblendete Dropdown, das den Platz reserviert). */
.weber-kaskade-zusammenfassung {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 100%;
    padding: 0 6px;
    font-family: var(--weber-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--weber-primary-text);
}

/* Label 'Wird versetzt nach' in gleicher Groesse wie die Abschnitts-Ueberschrift
   'Kostenträger zuweisung'. */
.label.weber-kaskade-titel {
    font-size: 15px;
    font-weight: 600;
}

/* Abschnitts-Ueberschrift im Slot der ausgeblendeten Unternehmensgruppe-Zeile,
   steht damit direkt ueber dem Firma-Dropdown (Fensterhoehe bleibt konstant). */
.weber-kaskade-zuweisung {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 6px;
    font-family: var(--weber-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--weber-primary-text);
}

.weber-kaskade-btn-gruppe {
    /* Immer in der rechten Button-Spalte, auch wenn das Dropdown ausgeblendet ist. */
    grid-column: 2;
    display: flex;
    gap: 8px;
}

/* Alle drei Buttons ('Übernehmen', 'Zurück', 'Anlegen') exakt gleich gross. */
.weber-kaskade-btn,
.weber-kaskade-btn-gruppe .weber-btn-primary,
.weber-kaskade-btn-gruppe .weber-btn-secondary {
    width: 140px;
    padding: 12px 0;
    white-space: nowrap;
    text-align: center;
}

.weber-kaskade-control .weber-dropdown {
    width: 100%;
    /* Verhindert, dass ein langer Eintrag die 1fr-Spalte ueber ihre Breite hinaus
       aufdehnt (Grid-Blowout). Der Text wird stattdessen per Ellipsis gekuerzt. */
    min-width: 0;
}

/* Dropdown-Wrapper als Grid-Item (Spalte 1): min-width:0 gegen Grid-Blowout. */
.weber-kaskade-dd {
    min-width: 0;
}

/* Unsichtbar, behaelt aber den Platz im Layout, damit das Fenster beim Ausblenden
   der Dropdowns nicht kleiner wird. */
.weber-kaskade-versteckt {
    visibility: hidden;
}

.weber-kaskade-btn {
    justify-self: start;
    white-space: nowrap;
}

.weber-input,
.weber-select,
.weber-textarea {
    width: 100%;
    padding: 14px 22px;
    border: 2px solid var(--weber-alternate);
    border-radius: var(--weber-radius-pill);
    font-family: var(--weber-font);
    font-size: 14px;
    color: var(--weber-primary-text);
    background-color: var(--weber-secondary-bg);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.weber-input:focus,
.weber-select:focus,
.weber-textarea:focus {
    border-color: var(--weber-primary);
    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.15);
}

.weber-input.is-error,
.weber-select.is-error,
.weber-textarea.is-error {
    border-color: var(--weber-error);
}

.weber-textarea {
    border-radius: 18px;
    min-height: 140px;
    resize: vertical;
    padding: 14px 18px;
}

/* Aufgeklappte Auswahlliste an die CI angleichen (soweit der Browser es zulaesst:
   Markierung/Auswahl und accent-color werden von Chromium/Edge beruecksichtigt) */
.weber-select {
    accent-color: var(--weber-primary);
}

.weber-select option {
    background-color: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    padding: 8px 12px;
}

.weber-select option:hover,
.weber-select option:focus {
    background-color: var(--weber-primary-bg);
    color: var(--weber-accent1);
}

.weber-select option:checked {
    background-color: var(--weber-primary);
    color: var(--weber-secondary-bg);
}

/* CI-Dropdown: eigenes Menue statt nativem <select>, damit auch die
   Aufklappliste abgerundete Ecken, Schatten und CI-Hover bekommt. */
.weber-dropdown {
    position: relative;
    width: 100%;
}

.weber-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border: 2px solid var(--weber-alternate);
    border-radius: var(--weber-radius-pill);
    background-color: var(--weber-secondary-bg);
    font-family: var(--weber-font);
    font-size: 14px;
    color: var(--weber-primary-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.weber-dropdown-toggle:hover:not(:disabled) {
    border-color: var(--weber-primary);
}

.weber-dropdown-toggle:focus-visible {
    outline: none;
    border-color: var(--weber-primary);
    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.15);
}

.weber-dropdown-toggle.is-open {
    border-color: var(--weber-primary);
    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.15);
}

.weber-dropdown-toggle:disabled {
    cursor: default;
    opacity: 0.7;
}

.weber-dropdown-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weber-dropdown-value.is-placeholder {
    color: var(--weber-secondary-text);
}

.weber-dropdown-arrow {
    flex-shrink: 0;
    color: var(--weber-primary);
    font-size: 12px;
    transition: transform 0.15s;
}

.weber-dropdown-toggle.is-open .weber-dropdown-arrow {
    transform: rotate(180deg);
}

.weber-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.weber-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1001;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background-color: var(--weber-secondary-bg);
    border: 1px solid var(--weber-alternate);
    border-radius: var(--weber-radius);
    box-shadow: 0 12px 28px rgba(20, 24, 27, 0.16);
}

/* Nach oben aufklappen, wenn unterhalb des Dropdowns zu wenig Platz ist. */
.weber-dropdown-menu.is-up {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Tipp-Suche oben im Menue: bleibt beim Scrollen am oberen Rand kleben. */
.weber-dropdown-suche {
    position: sticky;
    top: -6px;
    margin: -6px -6px 6px -6px;
    padding: 6px;
    background-color: var(--weber-secondary-bg);
    z-index: 1;
}

.weber-dropdown-suche-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--weber-alternate);
    border-radius: 8px;
    font-family: var(--weber-font);
    font-size: 14px;
    color: var(--weber-primary-text);
    background-color: var(--weber-primary-bg);
    outline: none;
}

.weber-dropdown-suche-input:focus {
    border-color: var(--weber-primary);
}

.weber-dropdown-option {
    padding: 10px 16px;
    border-radius: 8px;
    font-family: var(--weber-font);
    font-size: 14px;
    color: var(--weber-primary-text);
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
}

.weber-dropdown-haken {
    display: inline-block;
    width: 18px;
    margin-right: 6px;
    font-size: 15px;
    line-height: 1;
    vertical-align: -1px;
}

.weber-dropdown-option:hover {
    background-color: var(--weber-primary-bg);
    color: var(--weber-accent1);
}

.weber-dropdown-option.is-selected {
    background-color: var(--weber-primary);
    color: var(--weber-secondary-bg);
}

.weber-dropdown-option.is-empty {
    color: var(--weber-secondary-text);
    cursor: default;
}

.weber-dropdown-option.is-empty:hover {
    background-color: transparent;
    color: var(--weber-secondary-text);
}

/* Passwortfeld mit Knopf "anzeigen" rechts daneben. Weber-CI: Weber-Zeichen statt Emoji. */
.weber-password-wrapper {
    display: flex;
    gap: 6px;
}

.weber-password-wrapper .weber-login-feld {
    flex: 1;
}

.weber-toggle-password {
    height: 40px;
    width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.weber-toggle-password.is-aktiv {
    border-color: var(--weber-primary);
}

.weber-actions {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.weber-btn-primary,
.weber-btn-secondary,
.weber-btn-ghost {
    padding: 12px 28px;
    border-radius: var(--weber-radius-pill);
    font-family: var(--weber-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    border: 2px solid transparent;
}

.weber-btn-primary {
    background-color: var(--weber-primary);
    color: #FFFFFF;
}

.weber-btn-primary:hover:not(:disabled) {
    background-color: var(--weber-accent1);
}

.weber-btn-primary:disabled {
    background-color: var(--weber-secondary-text);
    cursor: not-allowed;
    opacity: 0.7;
}

.weber-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.weber-mt-lg {
    margin-top: 32px;
}

.weber-btn-secondary {
    background-color: var(--weber-secondary-bg);
    color: var(--weber-primary);
    border-color: var(--weber-primary);
}

.weber-btn-secondary:hover {
    background-color: rgba(0, 158, 227, 0.06);
}

.weber-btn-ghost {
    background: none;
    color: var(--weber-secondary-text);
}

.weber-btn-ghost:hover {
    color: var(--weber-primary-text);
    background-color: var(--weber-primary-bg);
}

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

/* Banner / Hinweise */
.weber-banner {
    border-radius: 10px;
    padding: 12px 16px;
    font-family: var(--weber-font);
    font-size: 13px;
    margin-top: 10px;
    white-space: pre-line;
}

.weber-banner.is-error {
    color: var(--weber-error);
    background-color: rgba(255, 89, 99, 0.08);
}

.weber-banner.is-success {
    color: var(--weber-success);
    background-color: rgba(36, 150, 137, 0.1);
}

.weber-banner.is-info {
    color: var(--weber-accent1);
    background-color: rgba(0, 158, 227, 0.08);
}

/* Info-Liste (Benutzer Information / App-Information) — Desktop-Tabelle */
.weber-info-table {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    border-top: 1px solid var(--weber-alternate);
}

.weber-info-table .key,
.weber-info-table .val {
    padding: 11px 16px;
    font-family: var(--weber-font);
    font-size: 13px;
    border-bottom: 1px solid var(--weber-alternate);
    word-break: break-all;
}

.weber-info-table .key {
    font-weight: 600;
    color: var(--weber-primary-text);
    background-color: var(--weber-primary-bg);
}

.weber-info-table .val {
    color: var(--weber-secondary-text);
}

/* Einzeilige Label-Wert-Darstellung (Label fett, Wert daneben) */
.weber-info-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    font-family: var(--weber-font);
    font-size: 13px;
    padding: 4px 2px;
}

.weber-info-line .key {
    font-weight: 600;
    color: var(--weber-primary-text);
}

.weber-info-line .val {
    color: var(--weber-secondary-text);
}

/* Vertikaler Abstandhalter */
.weber-spacer {
    height: 24px;
}

/* Globales Warte-Overlay: zeigt waehrend des Ladens einen Warte-Cursor + Spinner
   und verhindert Interaktion, bis die Daten da sind (Fenster oeffnet erst danach). */
.weber-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(20, 24, 27, 0.08);
    cursor: wait;
}

/* Platzhalter (z.B. "Coming Soon") */
.weber-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    color: var(--weber-secondary-text);
    font-family: var(--weber-font);
}

.weber-placeholder .ico {
    font-size: 56px;
    margin-bottom: 12px;
    color: var(--weber-primary);
}

.weber-placeholder h2 {
    font-family: var(--weber-font);
    font-size: 20px;
    font-weight: 600;
    color: var(--weber-primary-text);
    margin: 0 0 8px 0;
}

/* List für Mitarbeiter etc. */
.weber-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.weber-list li {
    padding: 12px 4px;
    border-bottom: 1px solid var(--weber-alternate);
    font-family: var(--weber-font);
    font-size: 14px;
    color: var(--weber-primary-text);
}

/* Auth-Loader während Session-Wiederherstellung */
.weber-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: var(--weber-primary-bg);
    color: var(--weber-secondary-text);
    font-family: var(--weber-font);
}

.weber-loading .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--weber-alternate);
    border-top-color: var(--weber-primary);
    border-radius: 50%;
    animation: weberSpin 0.8s linear infinite;
}

.weber-loading .text {
    font-size: 13px;
}

@keyframes weberSpin {
    to { transform: rotate(360deg); }
}

/* Responsive: Sidebar bei schmalem Browser ausblenden */
@media (max-width: 900px) {
    .weber-app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "content";
    }
    .weber-sidebar {
        display: none;
    }
    .weber-content {
        padding: 18px;
    }
    .weber-info-table {
        grid-template-columns: 1fr;
    }
    .weber-info-table .key {
        background-color: transparent;
        padding-bottom: 2px;
        border-bottom: none;
    }
    .weber-info-table .val {
        padding-top: 2px;
    }
}

/* ===== Mitarbeiter verwalten: Switch / Tabelle / Pagination ===== */
.weber-segmented {
    display: inline-flex;
    background: var(--weber-primary-bg);
    border: 1px solid var(--weber-alternate);
    border-radius: 0;
    padding: 2px;
    gap: 4px;
}
.weber-segmented button {
    border: none;
    background: transparent;
    color: var(--weber-secondary-text);
    height: 24px;
    padding: 0 16px;
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.15s ease;
}
.weber-segmented button.active {
    background: var(--weber-primary);
    color: #fff;
    box-shadow: var(--weber-shadow-sm);
}

.weber-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.weber-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.weber-search .weber-input {
    min-width: 220px;
    margin: 0;
}

.weber-table-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 360px);
}
.weber-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.weber-table-scroll .weber-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--weber-secondary-bg);
}
.weber-table th,
.weber-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--weber-alternate);
    vertical-align: middle;
}
.weber-table th {
    color: var(--weber-secondary-text);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.weber-table tbody tr:hover {
    background: var(--weber-primary-bg);
}
.weber-cell-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--weber-secondary-text);
}
.weber-flag-yes {
    color: var(--weber-success);
    font-weight: 700;
}
.weber-flag-no {
    color: var(--weber-alternate);
}

.weber-btn-action {
    border: 1px solid var(--weber-alternate);
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    border-radius: var(--weber-radius-pill, 40px);
    padding: 1px 14px;
    font-size: 0.8rem;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}
.weber-btn-action.is-activate {
    background: var(--weber-primary);
    border-color: var(--weber-primary);
    color: #fff;
}
.weber-btn-action.is-deactivate {
    background: #b3122b;
    border-color: #b3122b;
    color: #fff;
}
.weber-btn-action.is-add {
    background: transparent;
    border-color: var(--weber-primary);
    color: var(--weber-primary);
}

.weber-btn-action.is-details {
    background: transparent;
    border-color: var(--weber-primary);
    color: var(--weber-primary);
}

/* Details-Modal: einspaltig (Mitarbeiter und Benutzer untereinander) mit Scrollbar. */
.weber-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 8px 4px 0;
    max-height: 60vh;
    overflow-y: auto;
}

.weber-details-block h4 {
    margin: 0 0 8px;
    font-family: var(--weber-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--weber-primary-text);
}

.weber-details-block .weber-table td:first-child {
    font-weight: 500;
    color: var(--weber-secondary-text);
    white-space: nowrap;
    padding-right: 16px;
}

.weber-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.weber-overlay.is-top {
    z-index: 1100;
}
.weber-modal {
    position: relative;
    background: var(--weber-secondary-bg);
    border-radius: 12px;
    padding: 28px 32px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.weber-modal-wide {
    width: 960px;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.weber-modal-wide .weber-table-scroll {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}
.weber-row-select {
    cursor: pointer;
}
.weber-row-select.is-selected {
    background: rgba(0, 158, 227, 0.12);
}
.weber-row-select.is-selected td {
    font-weight: 600;
}
.weber-modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -28px -32px 18px -32px;
    padding: 12px 14px 12px 20px;
    background: var(--weber-primary);
    color: #fff;
    border-radius: 12px 12px 0 0;
    cursor: move;
    user-select: none;
}
.weber-modal-title {
    font-family: var(--weber-font);
    font-size: 1.05rem;
    font-weight: 600;
}
.weber-modal-close {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    padding: 0 4px;
    opacity: 0.85;
}
.weber-modal-close:hover {
    opacity: 1;
}

.weber-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.weber-pagination button {
    border: 1px solid var(--weber-alternate);
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.weber-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.weber-pagination button.active {
    background: var(--weber-primary);
    border-color: var(--weber-primary);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.weber-pagination .ellipsis {
    color: var(--weber-secondary-text);
    min-width: 20px;
    text-align: center;
    user-select: none;
}
.weber-check-cell {
    text-align: center;
}
.weber-action-cell {
    text-align: center;
}
.weber-check-cell input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--weber-primary);
}
.weber-row-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--weber-alternate);
    border-top-color: var(--weber-primary);
    border-radius: 50%;
    animation: weber-spin 0.7s linear infinite;
}
@keyframes weber-spin {
    to { transform: rotate(360deg); }
}
.weber-pagination .weber-page-input {
    width: 64px;
    height: 38px;
    border: 1px solid var(--weber-alternate);
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    border-radius: 20px;
    text-align: center;
    font-size: 0.95rem;
    padding: 0 8px;
    margin-left: 4px;
}
.weber-pagination .info {
    color: var(--weber-secondary-text);
    font-size: 0.9rem;
    min-width: 110px;
    text-align: center;
}

/* ===== Globale Vorgabe: Buttons und Dropdowns nicht abrunden (eckig) ===== */
.weber-btn-primary,
.weber-btn-secondary,
.weber-btn-ghost,
.weber-btn-block,
.weber-btn-action,
.weber-input,
.weber-select,
.weber-dropdown-toggle,
.weber-dropdown-menu,
.weber-dropdown-suche-input,
.weber-dropdown-option {
    border-radius: 0;
}

/* ===== Globale Vorgabe: feste Höhe 24px + Schriftgröße 12px für Standard-Buttons, Dropdowns und Textfelder ===== */
.weber-btn-primary,
.weber-btn-secondary,
.weber-btn-ghost {
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.weber-dropdown-toggle,
.weber-select,
.weber-input {
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    font-size: 12px;
}

.weber-dropdown-value,
.weber-dropdown-option,
.weber-dropdown-suche-input {
    font-size: 12px;
}

/* ===== Globale Vorgabe: Fließtext auf den Seiten auf 12px (Überschriften ausgenommen) ===== */
body {
    font-size: 12px;
}

.weber-info-table .key,
.weber-info-table .val,
.weber-info-line,
.weber-form-row .label,
.weber-tile-label,
.weber-content-header .crumbs,
.weber-banner,
.weber-list li,
.weber-loading .text,
.weber-textarea,
.weber-kaskade-zusammenfassung,
.weber-kaskade-zuweisung,
.label.weber-kaskade-titel {
    font-size: 12px;
}

/* ===== Dunkler Modus in den Masken (Wunsch vom 26.09.2026) =====
   Gesetzt von weber-ci-workspace.js an <html>, sobald auf der Startseite "Dunkel" gewaehlt ist.
   Die Farben sind die des Weber-CI-Pakets (weber-ci.css, [data-wb-theme="dark"]): Flaeche
   #0E1820, Karten #182833, Linien #27404F, Schrift #EFF5F9 / #A9BAC6. Weber-Blau bleibt; das
   Logo bleibt auf seinem weissen Feld. */
html[data-wb-theme="dark"] {
    color-scheme: dark;
    --weber-primary-text: #EFF5F9;
    --weber-secondary-text: #A9BAC6;
    --weber-primary-bg: #0E1820;
    --weber-secondary-bg: #182833;
    --weber-alternate: #27404F;
    --weber-info: #182833;
    --weber-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
    --weber-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
    --weber-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

html[data-wb-theme="dark"] .weber-topbar,
html[data-wb-theme="dark"] .weber-login-kopf,
html[data-wb-theme="dark"] .weber-login-header,
html[data-wb-theme="dark"] .avatar-menu,
html[data-wb-theme="dark"] .weber-topbar .avatar {
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
}

html[data-wb-theme="dark"] .weber-topbar .avatar {
    border-color: var(--weber-primary-text);
}

/* Schrift auf Weber-Blau bleibt weiss */
html[data-wb-theme="dark"] .weber-select option:checked,
html[data-wb-theme="dark"] .weber-dropdown-option.is-selected {
    color: #FFFFFF;
}