body {
    --rz-panel-menu-item-border-radius: var(--corner-radius-default) !important;
}

.rz-sidebar .rz-panel-menu {
    color: var(--ColorBase600) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.dark .rz-sidebar .rz-panel-menu{
    color: var(--ColorTextDark) !important;
}

.rz-sidebar .sl-icon {
    font-size: 20px !important;
}

.rz-sidebar .rz-panel{
    background-color: transparent !important;
    padding: var(--padding-default) !important;
}

.groupedMenuEntry .bissMenuButton {
    padding-left: 0 !important;   
}

/* Light-Theme: Panel-Menu hell - alle Level und States */
:root {
    --rz-panel-menu-background-color: white !important;
    --rz-panel-menu-item-background-color: white !important;
    --rz-panel-menu-item-hover-background-color: #f5f5f5 !important;
    --rz-panel-menu-item-active-background-color: white !important;
    --rz-panel-menu-item-padding: 0.5rem 1rem !important;
    --rz-panel-menu-item-color: var(--ColorBase600) !important;
    --rz-panel-menu-item-hover-color: var(--ColorBase700) !important;
    --rz-panel-menu-item-active-color: var(--ColorBase600) !important;
    --rz-panel-menu-item-border-color: var(--ColorBase200) !important;
    /* 2nd Level Items */
    --rz-panel-menu-item-2nd-level-background-color: transparent !important;
    --rz-panel-menu-item-2nd-level-hover-background-color: #f5f5f5 !important;
    --rz-panel-menu-item-2nd-level-active-background-color: white !important;
    --rz-panel-menu-item-2nd-level-color: var(--ColorBase600) !important;
    /* 3rd Level Items */
    --rz-panel-menu-item-3rd-level-background-color: transparent !important;
    --rz-panel-menu-item-3rd-level-hover-background-color: #f5f5f5 !important;
}

/* Dark-Theme: Panel-Menu dunkel - alle Level und States */
    :root .dark {
        --rz-panel-menu-background-color: var(--ColorBase950, #1a1a1a) !important;
        --rz-panel-menu-item-background-color: var(--ColorBase950, #1a1a1a) !important;
        --rz-panel-menu-item-hover-background-color: var(--ColorBase800, #2d2d2d) !important;
        --rz-panel-menu-item-active-background-color: var(--ColorBase950, #1a1a1a) !important;
        --rz-panel-menu-item-color: var(--ColorTextDark) !important;
        --rz-panel-menu-item-hover-color: #ffffff !important;
        --rz-panel-menu-item-active-color: var(--ColorTextDark) !important;
        --rz-panel-menu-item-border-color: var(--ColorBase700) !important;
        /* 2nd Level Items */
        --rz-panel-menu-item-2nd-level-background-color: transparent !important;
        --rz-panel-menu-item-2nd-level-hover-background-color: var(--ColorBase900) !important;
        --rz-panel-menu-item-2nd-level-active-background-color: var(--ColorBase950, #1a1a1a) !important;
        --rz-panel-menu-item-2nd-level-color: var(--ColorTextDark) !important;
        /* 3rd Level Items */
        --rz-panel-menu-item-3rd-level-background-color: transparent !important;
        --rz-panel-menu-item-3rd-level-hover-background-color: var(--ColorBase900) !important;
    }

.rz-panel-menu {
    background-color: var(--rz-panel-menu-background-color) !important;
    border: 1px solid var(--ColorBase500) !important;
    border-radius: var(--corner-radius-default) !important;
}

    .rz-panel-menu .rz-navigation-item{
        border-block-end:none !important;
    }

    .rz-panel-menu .rz-navigation-item.vwt-menu-item-selected > .rz-navigation-item-wrapper .rz-navigation-item-link {
        background-color: var(--ColorPrimary) !important;
        color: var(--ColorTextDark) !important;
    }

/* ---------- Mehrzeilige Entries (Visitenkarte/Kommentar) in EmployeeDataCrudForm auf volle Zeilenhöhe strecken ----------
   Grund, warum das hier steht statt in EmployeeDataCrudForm.razor.css: .multiline-entry-row sitzt
   auf einem <RadzenStack>, das wiederum in <BxEntry> (Multiline-Fall) gerendert wird - beides reine
   Komponenten-Tags. KEIN Element auf dem Weg von .multiline-entry-row bis zum <textarea> wird direkt
   als HTML-Tag in EmployeeDataCrudForm.razor geschrieben. Blazors CSS-Isolation kompiliert ::deep-
   Regeln aber immer zu "[b-scope-der-eigenen-komponente] <restlicher Selektor>" - sie verlangen also
   zwingend einen Vorfahren mit dem eigenen Scope-Attribut. Da hier kein solcher Vorfahre existiert,
   kann JEDE ::deep-Regel in EmployeeDataCrudForm.razor.css für diesen Teilbaum niemals matchen -
   unabhängig vom Selektor dahinter (bestätigt: weder :has(), noch + Adjacent-Sibling, noch reine
   Klassen-Selektoren griffen). Deshalb hier als normale, ungescopte, rein klassenbasierte Regel.

   NACHTRAG: Ein pauschales flex:1 auf ALLE .rz-stack-Kinder (Eingabe-Zeile UND Hinweis-Zeile) teilt
   den Freiraum hälftig - per DevTools bestätigt (60px/60px statt z.B. 100px/20px). Da dieses
   Stylesheet ungescopt ist (keine Blazor-CSS-Isolation, kein Scope-Attribut-Zwang wie oben erklärt),
   funktionieren hier - anders als zuvor angenommen - :has() und + (Adjacent-Sibling) einwandfrei;
   sie hatten vorher nur wegen des fehlenden Scope-Vorfahren nie eine faire Chance. Deshalb jetzt
   gezielt nur die Eingabe-Zeile (direkt nach dem <h6>) wachsen lassen, die Hinweis-Zeile bleibt bei
   ihrer natürlichen (kleinen) Höhe. */

.multiline-entry-row > div {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.multiline-entry-row .rz-stack > h6 + .rz-stack {
    flex: 1;
    min-height: 0;
}

.multiline-entry-row .rz-textarea {
    height: 100%;
    box-sizing: border-box;
}

.avatar {
    width: 70px; /* nur Breite festlegen */
    aspect-ratio: 1 / 1; /* macht es quadratisch */
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    background: #eee;
}

    .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center; /* Zuschnitt von oben */
        display: block;
    }