/*
 * Admin-CMS — Override-Layer über Tabler (ADR-016).
 *
 * Eigene Anpassungen NUR hier (nach tabler.min.css geladen). Tabler-Vendor-Dateien nie editieren
 * → Tabler-Updates bleiben gefahrlos (neue dist reinlegen, dieser Layer bleibt).
 */

/* ── Link-Policy (CMS-weit) ───────────────────────────────────────────────────
   Links werden im CMS NIE unterstrichen (in keinem Zustand) — inkl. Tablers a:hover-Unterstrich
   (der u.a. beim aktiven list-group-item durchschlägt). Wo eine Unterstreichung GEWOLLT ist
   (Inline-Textlinks), gezielt die Klasse .cl-underline setzen → dann durchgehend unterstrichen. */
a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
}
.cl-underline,
.cl-underline:hover,
.cl-underline:focus,
.cl-underline:active {
    text-decoration: underline;
}

/* Tabler-Variablen-Override: aktiver Hintergrund (Active-States) dauerhaft auf dezentes 10 % Schwarz
   statt Tablers primär-getöntem Default. In allen drei Tabler-Scopes gesetzt (gleiche Spezifität,
   später geladen → gewinnt). Hinweis: im Darkmode ist 10 % Schwarz bewusst sehr subtil. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --tblr-active-bg: rgba(0, 0, 0, 0.1);
}

/* Theme-Settings: Farbschema-Swatches etwas kleiner (Tabler-Standard: 1.5rem). */
.form-colorinput-color {
    width: 1.25rem;
    height: 1.25rem;
}

/* … und das Auswahl-Häkchen darin kleiner (Tabler-Standard: 1.25rem background-size). */
.form-colorinput-color::before {
    background-size: 0.9rem;
}

/* Checkbox/Radio: Häkchen bzw. Punkt etwas kleiner — Tabler-Default background-size 1.25rem → 0.9rem.
   Gilt für .form-check-input, also Checkboxen UND Radios (auch die Theme-Regler). */
.form-check-input {
    background-size: 1rem;
}

/* Disabled-Buttons: Rahmenfarbe = Flächenfarbe. Tabler lässt --tblr-btn-disabled-border-color bei
   soliden Buttons ungesetzt → der Rahmen fiele sonst auf currentcolor (Textfarbe) zurück.
   Pauschal für ALLE disabled Buttons. */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    border-color: var(--tblr-btn-disabled-bg);
}

/* Switch-Toggles kompakter + sauber zentriert: Höhe 1rem statt Tabler-Default 1.25rem; Schalter
   und Label per Flexbox vertikal mittig (Bootstraps float/padding-Layout dafür neutralisiert).
   Pauschal, NUR .form-switch — Checkboxen/Radios unberührt. */
.form-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
}
.form-switch .form-check-input {
    width: 1.75rem;
    height: 1rem;
    margin: 0;
    float: none;
    background-size: 0.8rem;   /* Daumen/Punkt etwas kleiner (statt track-hoch); Track-Höhe bleibt 1rem */
    background-position: left 0.15rem center;    /* Abstand zum Rand (aus) */
}
/* Aktiv-Zustand: NICHT der Track wird farbig, sondern der PUNKT. Track bleibt neutral; der Daumen
   wird IMMER GRÜN gezeichnet (radial-gradient mit var(--tblr-green) — fix, unabhängig vom Farbschema;
   passt sich nur Hell/Dunkel an). Größe/Inset matchen den grauen Aus-Punkt.
   Spezifität (0,3,0) schlägt Tablers generische :checked-Regel. */
.form-switch .form-check-input:checked {
    background-color: var(--tblr-form-check-bg);
    border-color: var(--tblr-border-color-translucent);
    background-image: radial-gradient(circle closest-side, var(--tblr-green) 75%, transparent 76%);
    background-position: right 0.15rem center;
}

/* Invertierte Checkbox/Radio: helle Box bleibt (statt primär gefüllt) + primärfarbener Rahmen,
   die Marke (Haken/Punkt) trägt die Primärfarbe. Tabler kodiert die Markenfarbe fix ins SVG →
   daher pro Farbschema ein eigenes SVG (folgt dem Farbschema-Wechsel). NUR echte Checkboxen/Radios
   (`.form-check:not(.form-switch)`), damit Switches unangetastet bleiben. */
.form-check:not(.form-switch) .form-check-input:checked {
    background-color: var(--tblr-form-check-bg);
    border-color: var(--tblr-primary);
}
/* Fallback = Default-Schema cyan (#17a2b8), falls kein data-bs-theme-primary gesetzt ist */
.form-check:not(.form-switch) .form-check-input:checked[type=checkbox] {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%2317a2b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
}
.form-check:not(.form-switch) .form-check-input:checked[type=radio] {
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%2317a2b8' cx='8' cy='8' /%3e%3c/svg%3e");
}
/* je Farbschema: Marke in der jeweiligen Primärfarbe */
[data-bs-theme-primary=blue] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23066fd1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=blue] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23066fd1' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=azure] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%234299e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=azure] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%234299e1' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=indigo] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%234263eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=indigo] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%234263eb' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=purple] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23ae3ec9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=purple] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ae3ec9' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=pink] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23d6336c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=pink] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23d6336c' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=red] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23d63939' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=red] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23d63939' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=orange] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23f76707' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=orange] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23f76707' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=yellow] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23f59f00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=yellow] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23f59f00' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=lime] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%2374b816' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=lime] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%2374b816' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=green] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%232fb344' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=green] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%232fb344' cx='8' cy='8' /%3e%3c/svg%3e"); }
[data-bs-theme-primary=teal] .form-check:not(.form-switch) .form-check-input:checked[type=checkbox] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%230ca678' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e"); }
[data-bs-theme-primary=teal] .form-check:not(.form-switch) .form-check-input:checked[type=radio] { --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%230ca678' cx='8' cy='8' /%3e%3c/svg%3e"); }

/* Input-Group „flat" (z.B. Passwort-Feld mit Auge-Icon): Tabler setzt das linke Padding des
   Icons auf 0 (klebt am Text) — Standard-Padding (1rem) wiederherstellen für etwas Luft. */
.input-group-flat .input-group-text:last-child {
    padding-left: 1rem;
}

/* Kontoeinstellungen-Sektionsnav (.list-group-transparent): aktiver Punkt OHNE Tabler-Hintergrund —
   stattdessen, wie die Sidebar, ein 2px-Akzentstrich links in der Primär-/Aktivfarbe (fett bleibt).
   box-shadow inset statt border → kein 2px-Versatz; die Items haben ohnehin border:0 und keinen Radius. */
.list-group-transparent .list-group-item.active {
    box-shadow: inset 2px 0 0 var(--tblr-primary);
}

/* Footer-Links: Farbe bleibt in ALLEN Zuständen gleich (wie der Footer-Text, kein Abdunkeln).
   `!important`, weil Tabler die Hover-Farbe von .link-* selbst mit !important setzt. Die
   Unterstreichung regelt die globale Link-Policy oben (.link-secondary setzt selbst keinen Strich). */
.footer a,
.footer a:hover,
.footer a:focus,
.footer a:active {
    color: var(--tblr-secondary) !important;
}

/* alert-autohide: wird in ein Bootstrap-Collapse gewickelt → reguläres, weiches Zuklappen.
   overflow:hidden, damit der Innen-Abstand (margin) Teil der animierten Höhe ist (kein Rest-Sprung). */
.alert-autohide {
    overflow: hidden;
}

/* Dezenter Text-Link — auch für <button> (kein Hintergrund/Rahmen/Box beim Hover). Sekundärfarbe
   in allen Zuständen, NIE unterstrichen (CMS-Link-Policy; für gewollte Unterstreichung .cl-underline). */
.cl-link,
.cl-link:hover,
.cl-link:focus,
.cl-link:active {
    color: var(--tblr-secondary) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.cl-link {
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* .btn-link dauerhaft entschärfen: NIE unterstreichen und die Textfarbe bei Hover/Focus/Active
   unverändert lassen (kein Abdunkeln). Tabler setzt beides teils per !important. */
.btn-link {
    /* greift für .btn-link OHNE link-*-Variante: Hover-/Active-Farbe = Ruhefarbe */
    --tblr-btn-hover-color: var(--tblr-btn-color);
    --tblr-btn-active-color: var(--tblr-btn-color);
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:focus-visible,
.btn-link:active {
    text-decoration: none !important;
}
/* Mit link-*-Variante setzt Tabler die Hover-Farbe per !important → für die genutzte link-secondary
   zurück auf deren Ruhefarbe (höhere Spezifität + !important gewinnt). */
.btn-link.link-secondary:hover,
.btn-link.link-secondary:focus {
    color: color-mix(in srgb, var(--tblr-secondary) calc(var(--tblr-link-opacity, 1) * 100%), transparent) !important;
}

/* Frosted-Glass / Glassmorphism: transparenter Hintergrund + Backdrop-Blur. Zentrale Hilfsklasse,
   z.B. auf der Login-Card → der Body-Hintergrund scheint verschwommen durch. */
html:not([data-bs-theme-background="off"])[data-bs-theme="dark"] .bg-blur {
    background-color: transparent !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}


/* Marken-Hintergrund fürs gesamte Admin-Tool: Foto + Overlay darüber. Body-Klasse aus layout.php
   unterscheidet die Zustände — eingeloggt (cl-app, Basis-Regel) vs. Anmelde-Screen (cl-login). */

/* Eingeloggt (App): dezenter THEME-Farbtint (folgt Hell/Dunkel), Foto leicht sichtbar. */
body {
    background-image:
        radial-gradient(color-mix(in srgb, var(--tblr-gray-900) 99%, transparent) 100%, transparent),
        url(/assets/shared/img/bg-carlution.jpg);
        background-image: linear-gradient(
269deg, color-mix(in srgb, var(--tblr-gray-900) 85%, transparent) 20% 70%, transparent), radial-gradient(color-mix(in srgb, var(--tblr-gray-900) 90%, transparent) 100%, transparent), url(/assets/shared/img/bg-carlution.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Anmelde-Screens (zentriert): diagonaler dunkler Verlauf über dem Foto.
   Farbe = --tblr-gray-900 → ändert sich mit der THEMEBASIS (Slate/Zinc/Stone/…); color-mix
   gibt ihr den Alpha-Wert (95 %), da die Grau-Variablen keinen -rgb-Wert haben. */
body.cl-login {
    background-image:
        linear-gradient(12deg, color-mix(in srgb, var(--tblr-gray-900) 95%, transparent) 20% 50%, transparent),
        radial-gradient(color-mix(in srgb, var(--tblr-gray-900) 50%, transparent) 100%, transparent),
        url(/assets/shared/img/bg-carlution.jpg);
}

/* Foto/Overlay-Mix: im Light-Mode „screen" (hellt auf), im Dark-Mode aus.
   Wichtig: Light-Mode bedeutet oft, dass `data-bs-theme` GAR NICHT gesetzt ist (nur Dark setzt es) —
   daher Default = screen und Dark explizit abschalten (statt nur [data-bs-theme=light] zu matchen). */
body {
    background-blend-mode: screen;
}
[data-bs-theme="dark"] body {
    background-blend-mode: normal;
}

/* Hintergrund-Schalter (Settings „Hintergrund": Ja/Nein → data-bs-theme-background auf <html>).
   „Nein" (off) = Marken-Foto + Overlay aus; es bleibt der schlichte Tabler-Theme-Hintergrund
   (folgt Farbmodus/Themebasis). Default „an" = Attribut nicht gesetzt → Basis-Regeln greifen. */
[data-bs-theme-background="off"] body,
[data-bs-theme-background="off"] body.cl-login {
    background-image: none;
}

/* ── Vertikale Sidebar (Chrome, immer dunkel) ────────────────────────────────
   Die Sidebar ist via data-bs-theme="dark" fix dunkel — daher hier bewusst feste
   Weiß-Alphawerte (unabhängig vom Content-Farbmodus), nicht die Theme-Variablen. */

/* Einheitlicher horizontaler Innenabstand: Logo, User-Block, Überschriften und Menütext starten
   alle am selben Innenrand (1rem) — links wie rechts, nichts klebt am Rand. Referenz ist das
   ohnehin vorhandene 1rem-Padding der nav-links; das äußere Container-Padding daher auf 0.
   NUR auf Desktop (lg+) — mobil (Top-Bar mit Burger + Logo) bleibt Tablers Standard-Padding. */
@media (min-width: 992px) {
    .navbar-vertical > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
}
/* Marke (Logo + App-Name): links ausgerichtet, mit größerem vertikalem + etwas horizontalem Abstand.
   Gleiche Spezifität wie die Vendor-Regel (.navbar-vertical.navbar-expand-lg .navbar-brand) → gewinnt
   per Ladereihenfolge (custom.css nach tabler.min.css), kein !important nötig. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-brand {
        padding: 2rem 0.75rem;
        justify-content: flex-start;
    }
}
/* Erzwungene Scrollbar-Rinne (Tabler: overflow-y:scroll) abschalten → rechts kein Dauerabstand,
   Scrollbar nur bei Bedarf. So bleibt links = rechts. */
.navbar-vertical {
    overflow-y: auto !important;
}



/* Sektionsüberschrift im Menü. Horizontales Padding = var(--tblr-page-padding) wie bei den
   nav-links → bündig auf ALLEN Breakpoints (Tabler verkleinert die Variable mobil auf 0.5rem). */
.cl-nav-header {
    display: block;
    padding: 0 var(--tblr-page-padding);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* User-Bereich oben: EIN Link auf /konto (Avatar + Name + E-Mail). Hover = dezent heller Grund als
   Klick-Affordanz; Abgrenzung sonst nur über Abstand (kein Trennstrich). */
.cl-sidebar-user {
    padding: .375rem var(--tblr-page-padding);
    margin-bottom: .75rem;
    border-radius: var(--tblr-border-radius);
}
.cl-sidebar-user:hover,
.cl-sidebar-user:focus {
    background: rgba(255, 255, 255, .08);
}
/* E-Mail-Zeile unter dem Namen: gedämpftes Weiß (Name bleibt voll weiß). */
.cl-sidebar-user-mail {
    color: rgba(255, 255, 255, .55);
}

/* Initialen-Avatar — flex-shrink:0, sonst quetscht ihn ein langer Name (er bliebe nicht quadratisch). */
.cl-sidebar-avatar {
    background: rgba(255, 255, 255, .14) no-repeat center / cover;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

/* Menüpunkte: ALLE hell (wie zuvor nur der aktive). Der aktive Punkt wird allein durch fett
   markiert — nicht über Farbe oder Trennlinien. */
.navbar-vertical .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .9);
}
.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-vertical .navbar-nav .nav-link:focus {
    color: #fff;
}
.navbar-vertical .navbar-nav .nav-item.active > .nav-link,
.navbar-vertical .navbar-nav .nav-link.active {
    color: #fff;
    font-weight: 600;
}
/* Aktiv-Indikator (linke Kante) schmaler: Tabler nutzt 3px → auf 2px. Gleicher Selektor/Media-Query
   wie die Vendor-Regel → gewinnt per Ladereihenfolge. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.active:after {
        border-left-width: 2px;
    }
}

/* Untermenü-Einträge analog (hell; aktiv = fett). */
.navbar-vertical .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, .8);
}
.navbar-vertical .dropdown-menu .dropdown-item:hover,
.navbar-vertical .dropdown-menu .dropdown-item:focus,
.navbar-vertical .dropdown-menu .dropdown-item.active {
    color: #fff;
}
.navbar-vertical .dropdown-menu .dropdown-item.active {
    font-weight: 600;
}
/* Untermenü-Einrückung verkleinern: Tabler rückt die dropdown-items um +1.75rem ein → auf +0.5rem.
   Gleicher Selektor/Media-Query wie die Vendor-Regel → gewinnt per Ladereihenfolge. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
        padding-left: calc(calc(calc(var(--tblr-page-padding) * 2) / 2) + 0.5rem);
    }
}
/* … und dasselbe mobil (Tabler hat dafür eine eigene <lg-Regel ohne .navbar-vertical). */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
        padding-left: calc(calc(calc(var(--tblr-page-padding) * 2) / 2) + 0.5rem);
    }
}

/* ── Layout-Breite (Theme-Settings „Layout") ─────────────────────────────────
   boxed = Default (Begrenzung via .container-xl). fluid = volle Breite: das Attribut
   data-cl-layout="fluid" auf <html> hebt nur die Content-Begrenzung auf; die Sidebar
   und die seitlichen Gutter bleiben gleich (kein Padding-Sprung). */
[data-cl-layout="fluid"] .page-wrapper .container-xl {
    max-width: none;
}

/* ── Fehler-/Leerseiten (404/403): Inhalt vertikal zentrieren (Body-Klasse cl-center) ──────────
   .page-body ist bei Tabler bereits flex-column + flex:1 (füllt zwischen Header/Footer) — daher
   genügt es, die Hauptachse (vertikal) zu zentrieren. */
.cl-center .page-body {
    justify-content: center;
}

/* ── Profilfoto-Crop (Cropper.js, ADR-023) ───────────────────────────────────
   Cropper ersetzt das <img> durch seinen eigenen Container und richtet sich nach der
   Bildgröße — ohne Deckel würde ein großes Foto das Modal sprengen. max-height begrenzt
   die Crop-Fläche; das block-img verhindert den inline-Whitespace darunter. */
.cl-cropper-wrap img {
    display: block;
    max-width: 100%;
}
.cl-cropper-wrap {
    max-height: 60vh;
    overflow: hidden;
}

/* ── Sidebar-Uhr (3D-7-Segment, HH:MM:SS) ────────────────────────────────────
   Adaptiert von CodePen „Metty/poYwNjv". Gekapselt: KEINE globalen html/body-Styles. Alle
   Größen rem→em relativ zur .cl-clock-`font-size` → die EINE Stelle zum Skalieren. Ohne
   camera-pan (bewusst statisch) und ohne Demo-Hintergrund; dezent weiß auf der dunklen Sidebar.
   JS: assets/cms/js/sidebar_clock.js. */
.cl-clock-stage {
    perspective: 11em;
    /* Fluchtpunkt nach oben: damit man von SCHRÄG OBEN auf die Boden-Reflexion schaut (sonst wird die
       um 90° gekippte Schatten-Fläche frontal gesehen → fällt zum Strich zusammen). Höher = mehr Boden. */
    perspective-origin: center top;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    overflow: visible;            /* Boden-Reflexion darf nach unten ragen (nicht abschneiden) */
    padding: .5rem 0;       /* viel Platz unten, damit die Schatten sichtbar bleiben */
    opacity: 0.3;          /* Gesamthelligkeit der Uhr (inkl. Schatten) */
}
.cl-clock {
    font-size: 1.8px;                  /* ← Größenbasis der Uhr (hier skalieren) */
    display: flex;
    gap: 1em;
    position: relative;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .5);    /* Glow-/Inaktiv-Farbe (dezent weiß) */
    translate: 0em 1em 10em;
    transform-style: preserve-3d;
}
.cl-date {
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 0px currentColor);
   
}
.cl-clock .digits { transform-style: preserve-3d; }
.cl-clock .digits .group { display: flex; gap: 2em; }
.cl-clock .digits .group .digit {
    position: relative;
    height: 16em;
    aspect-ratio: 1 / 2;
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
}
.cl-clock .digits .group .digit span {
    --act: 0; --signX: 1; --signY: 1;
    position: absolute;
    background-color: #fff;
    transition: all .3s cubic-bezier(.17, .67, .5, 1.15);
    opacity: calc(.03 + .97 * var(--act));
    transform: scale(var(--signX), var(--signY));
}
.cl-clock .digits .group .digit span.end {
    clip-path: polygon(15% 0%, 7.5% 20%, 25% 100%, 75% 100%, 92.5% 20%, 85% 0%);
    width: 100%; height: 10%;
}
.cl-clock .digits .group .digit span.end.top { top: 0; }
.cl-clock .digits .group .digit span.end.bottom { top: initial; bottom: 0; --signY: -1; }
.cl-clock .digits .group .digit span.side {
    clip-path: polygon(0% 15%, 20% 7.5%, 100% 22.5%, 100% 85%, 20% 95%, 0% 90%);
    height: 50%; width: 20%;
}
.cl-clock .digits .group .digit span.side.left { top: 0; left: 0; }
.cl-clock .digits .group .digit span.side.left.bottom { top: initial; bottom: 0; --signY: -1; }
.cl-clock .digits .group .digit span.side.right { top: 0; left: initial; right: 0; --signX: -1; }
.cl-clock .digits .group .digit span.side.right.bottom { top: initial; bottom: 0; --signY: -1; }
.cl-clock .digits .group .digit span.middle {
    clip-path: polygon(22.5% 0%, 6.5% 50%, 22.5% 100%, 77.5% 100%, 93.5% 50%, 77.5% 0%);
    top: 45%; height: 10%; width: 100%;
}
.cl-clock .digits .group .digit[data-digit="0"] :not(.middle) { --act: 1; }
.cl-clock .digits .group .digit[data-digit="1"] .right { --act: 1; }
.cl-clock .digits .group .digit[data-digit="2"] :not(.top.left, .bottom.right) { --act: 1; }
.cl-clock .digits .group .digit[data-digit="3"] :not(.left) { --act: 1; }
.cl-clock .digits .group .digit[data-digit="4"] :not(.end, .bottom.left) { --act: 1; }
.cl-clock .digits .group .digit[data-digit="5"] :not(.top.right, .bottom.left) { --act: 1; }
.cl-clock .digits .group .digit[data-digit="6"] :not(.top.right) { --act: 1; }
.cl-clock .digits .group .digit[data-digit="7"] .top,
.cl-clock .digits .group .digit[data-digit="7"] .right { --act: 1; }
.cl-clock .digits .group .digit[data-digit="8"] > * { --act: 1; }
.cl-clock .digits .group .digit[data-digit="9"] :not(.bottom.left) { --act: 1; }
.cl-clock .colon-group { transform-style: preserve-3d; }
.cl-clock .colon-group .colon span {
    display: flex;
    height: 16em;
    flex-direction: column;
    justify-content: space-evenly;
    width: 4em;
    align-items: center;
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
}
.cl-clock .colon-group .colon span::before,
.cl-clock .colon-group .colon span::after {
    content: "";
    display: block;
    width: 2em;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: 2em;
}
.cl-clock .shadow {
    top: -24px;
    position: absolute;
    transform-origin: bottom center;
    transform: translateY(1em) translateZ(2em) rotateX(-90.1deg);
}
.cl-clock .shadow .digit span { opacity: var(--act); }
.cl-clock .shadow.shadow1 {
    opacity: 0;
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor) blur(3em);
}
.cl-clock .shadow.shadow1 > span,
.cl-clock .shadow.shadow1 .digit { mask-image: linear-gradient(to bottom, white, rgba(0, 0, 0, .5)); }
.cl-clock .shadow.shadow2 {
    opacity: 0;
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor) blur(3px);
}
.cl-clock .shadow.shadow2 > span,
.cl-clock .shadow.shadow2 .digit {
    opacity: var(--act);
    mask-image: linear-gradient(to top, black, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, 0));
}
/* Safari: Segment-Transition aus (Rendering-Workaround aus dem Original; Klasse liegt auf <body>). */
body.safari .cl-clock .digit span { transition: none !important; }

/* ── Auto-Lock-Countdown-Ring um das Sidebar-Lock-Icon (ADR-024) ─────────────
   autolock.js animiert stroke-dashoffset (0 = voll → Umfang = leer) über die Restzeit. */
.cl-lock-btn { position: relative; }
.cl-lock-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);          /* Startpunkt oben */
    pointer-events: none;
    color: var(--tblr-bg-surface);
}
.cl-lock-ring circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}
/* Inaktive Sperre: offenes Schloss, dezent gedämpft. */
.cl-lock-off { opacity: .55; }