/* Seitenleiste: beschriftete Abschnitte.
 *
 * Aus einer flachen Liste mit acht Punkten und zwei Klappmenues wurden drei
 * Abschnitte (Lernen, Mein Fortschritt, Verwaltung). Die Ueberschriften sind
 * klein und ruhig - sie sollen ordnen, nicht mit den Menuepunkten um
 * Aufmerksamkeit ringen.
 *
 * Wer im Anpassungsmenue die schmale Symbolleiste waehlt
 * (adminuiux-sidebar-iconic), hat keinen Platz fuer die Ueberschriften: Dort
 * werden sie versteckt - fuer Screenreader bleiben sie lesbar -, und zwischen
 * den Abschnitten steht ein feiner Strich.
 *
 * DIE LEISTE KLAPPT NICHT AUF. Hier stand vorher das Gegenteil, und die
 * Regeln unten hingen an :not(:hover) - die Ueberschriften kamen also zurueck,
 * sobald die Maus die Leiste beruehrte. Das Theme verbreitert im schmalen
 * Modus aber nie die Leiste, sondern nur das einzelne .nav-item unter dem
 * Zeiger (width:auto, dazu overflow:visible am Inner, damit der Name wie ein
 * Faehnchen herausragen darf). Die Leiste blieb bei ihren 60 Pixeln stehen,
 * und "MEIN FORTSCHRITT" ragte 47 Pixel weit in den Text daneben; live
 * gemessen am Mandanten BBW Hamburg.
 *
 * Deshalb gelten beide Regeln jetzt unabhaengig vom Zeiger: Wo kein Platz
 * ist, bleibt die Ueberschrift verborgen und der Strich uebernimmt ihre
 * Aufgabe.
 */
.menu-abschnitt {
    margin: 1.25rem 0 .35rem;
    padding: 0 1.25rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

.adminuiux-sidebar-inner > .menu-abschnitt:first-child {
    margin-top: .5rem;
}

.adminuiux-sidebar-iconic .adminuiux-sidebar .menu-abschnitt {
    /* wie .visually-hidden: nicht sichtbar, aber vorgelesen */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.adminuiux-sidebar-iconic .adminuiux-sidebar .nav + .menu-abschnitt + .nav {
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, .12));
    padding-top: .5rem;
    margin-top: .5rem;
}

/* Logo und Name gehoeren ueber die Seitenleiste, nicht in den Inhalt.
 *
 * Das Theme laesst die Marke in der Kopfzeile beliebig breit werden. Mit
 * einem querformatigen Logo (bis 140 px) und einem langen Einrichtungsnamen
 * ragte sie ueber die 280 px der Leiste hinweg in den Textbereich. Sie wird
 * deshalb auf die Breite der Leiste begrenzt; ein langer Name bekommt drei
 * Punkte statt eines Umbruchs.
 */
.adminuiux-sidebar-standard .adminuiux-header .navbar .navbar-brand {
    /* Die Marke beginnt hinter dem Burger-Knopf (rund 62 px); ohne diesen
       Abzug endete sie 60 px hinter der Leiste. */
    max-width: calc(var(--adminuiux-sidebar-width, 280px) - 72px);
    overflow: hidden;
}

.adminuiux-sidebar-standard .adminuiux-header .navbar .navbar-brand > div {
    min-width: 0;
}

.adminuiux-sidebar-standard .adminuiux-header .navbar .navbar-brand .h4,
.adminuiux-sidebar-standard .adminuiux-header .navbar .navbar-brand .company-tagline {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ohne eigenes Logo steht der Name in der Kopfzeile allein (header.tpl).
   Er bekommt dann den Platz, den sonst das Bild braucht. */
.adminuiux-header .navbar .navbar-brand .marke-schrift {
    min-width: 0;
    padding-left: .25rem;
}

/* Ruhige Leiste (Entwurf vom 02.10.2026).
 *
 * Das Theme faerbt jeden Menuepunkt in Linkfarbe und den aktiven Punkt voll
 * in der Akzentfarbe mit weisser Schrift. Bei zwoelf und mehr Punkten zieht
 * das die Aufmerksamkeit vom Inhalt ab: Die Leiste ist Orientierung, nicht
 * Hauptaktion. Deshalb:
 *   - Punkte in gedeckter Textfarbe, Symbole etwas heller
 *   - Hover und Fokus: zarte Toenung, Akzentfarbe nur fuer Schrift und Symbol
 *   - aktiver Punkt: dieselbe zarte Toenung, Schrift halbfett in Akzentfarbe -
 *     erkennbar an Farbe UND Gewicht, nicht nur an der Farbe
 * Leisten mit eigener Fuellung (fill-theme, fill-accent) behalten das Theme:
 * Dort waere graue Schrift auf farbigem Grund unlesbar.
 */
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar {
    --menue-text: #3b4252;
    --menue-symbol: #5d6b92;
    --menue-toenung: rgba(var(--adminuiux-theme-1-rgb), .14);
}

[data-bs-theme="dark"] body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar {
    --menue-text: #d5dbe6;
    --menue-symbol: #9aa5ba;
    --menue-toenung: rgba(255, 255, 255, .14);
}

body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav .nav-item .nav-link {
    color: var(--menue-text);
}

body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav .nav-item .nav-link i,
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav .nav-item .nav-link svg {
    color: var(--menue-symbol);
    stroke: var(--menue-symbol);
}

body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link:hover,
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link:focus-visible,
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active,
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.show,
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link:active:not(.dropdown-toggle) {
    background-color: var(--menue-toenung);
    color: var(--adminuiux-theme-1);
}

body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link:hover i,
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link:focus-visible i,
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active i,
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.show i {
    color: var(--adminuiux-theme-1);
    stroke: var(--adminuiux-theme-1);
}

body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--adminuiux-theme-1);
}

/* Im Dunkeln ist die Akzentfarbe auf dunklem Grund oft zu schwach: Schrift
   hell, Akzent bleibt im Symbol. */
[data-bs-theme="dark"] body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active,
[data-bs-theme="dark"] body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .adminuiux-sidebar-inner .nav.menu-active-line .nav-item .nav-link:hover {
    color: #fff;
}

/* Ueberschriften wie im Entwurf etwas kraeftiger - sie ordnen die Leiste */
body:not(.adminuiux-sidebar-fill-theme):not(.adminuiux-sidebar-fill-accent) .adminuiux-sidebar .menu-abschnitt {
    color: var(--menue-text);
    opacity: .8;
}