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

/* Klickbare Karten (a.card, z.B. die Dashboard-Kacheln) OHNE Hover-Effekt: Tablers Regel
   `a.card:hover` legt einen Hover-Schatten auf — hier auf den Normal-Schatten der Karte
   zurückgesetzt (gleiche Spezifität, später geladen → gewinnt). Bewusste CMS-Entscheidung. */
a.card:hover {
    box-shadow: var(--tblr-card-box-shadow);
}

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

/* Tabellen-Zeilen-Hover im selben dezenten Ton wie die Sidebar-Links (4 % der Textfarbe, theme-aware)
   statt Tablers kräftigerem Default (emphasis 7,5 %). Gilt für alle CMS-Tabellen (.table-hover). */
.table {
    --tblr-table-hover-bg: color-mix(in srgb, var(--tblr-body-color) 4%, transparent);
}

/* Bulk-Modus (cms_table.js): Auswahl-Spalte/-Elemente nur sichtbar, wenn der Scope .cl-bulk-on trägt.
   (Tabellenzellen kehren beim Einblenden zu ihrem Default display:table-cell zurück.) */
[data-cl-table-scope]:not(.cl-bulk-on) .cl-bulk-only {
    display: none;
}
/* Bulk-Modus AUS: die versteckte Auswahl-Spalte bleibt :first-child → Tablers card-table-Außenabstand
   (padding-left:1.25rem) landet auf der unsichtbaren Zelle. Daher der ersten SICHTBAREN Zelle denselben
   Abstand geben, damit die Spalte mit Titel/Filter fluchtet. */
[data-cl-table-scope]:not(.cl-bulk-on) .card-table tr > .cl-bulk-only + td,
[data-cl-table-scope]:not(.cl-bulk-on) .card-table tr > .cl-bulk-only + th {
    padding-left: 1.25rem;
}
/* Header-Aktionen (Hinzufügen/⋯) auf denselben rechten Einzug wie Suchfeld + Tabellenzellen (1.25rem):
   Tablers .card-actions zieht mit margin-right:-0.5rem über den Card-Rand. Nur für Tabellen-Cards. */
[data-cl-table-scope] .card-actions {
    margin-right: 0;
}

/* Bulk-Modus: ausgewählte (angehakte) Zeilen hervorheben wie ein AKTIVER Sidebar-Link — also etwas
   DUNKLER (Active-Token --tblr-active-bg), im Gegensatz zum etwas helleren Hover. Tabler legt den
   Zellen-BG per box-shadow über --tblr-table-bg-state. */
[data-cl-table-scope].cl-bulk-on .table > tbody > tr:has([data-cl-table-bulk-row]:checked) > * {
    --tblr-table-bg-state: var(--tblr-active-bg);
}

/* Bulk-Auswahlmodus für Accordions/Listen (cms_bulk.js): Auswahl-Checkboxen (.cl-bulk-check) und die
   Bulk-Leiste (.cl-bulk-bar: „Alle"-Checkbox + Aktionen) nur sichtbar, wenn der Scope .cl-bulk-active trägt.
   Markup/Platzierung sind je Ansicht; nur das Ein-/Ausblenden ist hier generisch. */
.cl-bulk-check { display: none; }
.cl-bulk-active .cl-bulk-check { display: flex; align-items: center; }
.cl-bulk-bar { display: none; }
.cl-bulk-active .cl-bulk-bar { display: block; }

/* Page-Size-Select: Caret an die Dropdown-Toggles (Filtern/Bulk) angleichen — kleines GEFÜLLTES Dreieck
   (statt großem Chevron) in tertiary; Textfarbe ebenfalls tertiary. Konvention für alle Tabellen.
   background-image DIREKT (nicht über --tblr-form-select-bg-img), sonst überschreibt der Darkmode die
   Variable mit einem weißen Chevron (Spezifität [data-bs-theme=dark] .form-select). */
.form-select[data-cl-table-length] {
    color: var(--tblr-tertiary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 0.65em auto;
}

/* 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.
   Outline-Buttons (.btn-outline-*) ausgenommen — bei ihnen IST der Rahmen das Gestaltungsmittel
   und soll auch disabled sichtbar bleiben. */
.btn:disabled:not([class*="btn-outline-"]),
.btn.disabled:not([class*="btn-outline-"]),
fieldset:disabled .btn:not([class*="btn-outline-"]) {
    border-color: var(--tblr-btn-disabled-bg);
}

/* Aktiver btn-action (z.B. Ansicht-Umschalter der Medienbibliothek): dezenter Active-Hintergrund
   statt Tablers Primary-Border — rahmenlos bleibt rahmenlos (IW 11.07.2026). */
.btn-action.active {
    background: var(--tblr-active-bg);
    border-color: transparent;
}

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

/* Datei-Felder (IW 07.08.2026): Tabler füllt den nativen „Datei auswählen"-Knopf mit
   --tblr-tertiary-bg und klebt ihn per negativer Ränder an die Feldkante — ein Grauton, den das CMS
   sonst nirgends nutzt, im Dunkelmodus ein heller Block mitten im Feld. Statt daran herumzufärben
   nutzen die Masken das Tabler-Muster „Input with appended kbd" (input-group-flat + <kbd>):
   das echte <input type=file> liegt unsichtbar im umschließenden <label>, sichtbar sind der
   Dateiname und ein Anhängsel-Pill. Klick öffnet nativ die Dateiauswahl (Label-Verhalten).
   Der Dateiname wird per JS nachgetragen (cl-datei-feld). */
.cl-datei-feld { cursor: pointer; margin-bottom: 0; }
.cl-datei-feld .form-control { display: flex; align-items: center; overflow: hidden; }
.cl-datei-feld:hover .input-group-text kbd { color: var(--tblr-body-color); }
.cl-datei-feld input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Papierkorb im Anhängsel: sieht aus wie ein kbd, verhält sich wie ein Knopf. Als <button>
   (interaktiver Nachfahre) aktiviert er das umschließende <label> NICHT — der Klick löscht,
   statt die Dateiauswahl zu öffnen. */
.cl-kbd-btn { padding: 0; border: 0; background: none; line-height: 1; cursor: pointer; }
.cl-kbd-btn:hover kbd { color: var(--tblr-danger); }

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

/* 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) {
    /* bg-dark-overlay NUR ab lg (Tabler hat keine responsive bg-Variante) — z.B. der Sidebar-Brand-Block,
       der mobil (Top-Bar) keinen Hintergrund haben soll. Werte 1:1 aus Tablers .bg-dark-overlay
       (dezenter dunkler Schleier auf der ohnehin dunklen Sidebar). */
    .bg-lg-dark-overlay {
        color: #fff !important;
        background-color: rgba(31, 41, 55, 0.24) !important;
    }
    .navbar-vertical > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
}

.navbar-brand {
  min-height: 3rem;
}
/* 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;
}

.form-control:focus {
  border-color: transparent;
}
.form-control:focus-visible {
  border-color: transparent;
  outline: 0;
  box-shadow: var(--tblr-shadow-input), 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}

.input-group .btn {
  background-color: var(--tblr-bg-forms);
  border-left: 0;
}



/* Textarea-Resizer: Tabler stylt Scrollbar + scrollbar-corner (transparent), aber NICHT den
   `::-webkit-resizer`. Dessen UA-Default zeichnet (für helle UIs gedacht) eine helle Kante oben/links —
   im Darkmode + bei vorhandenem Scrollbalken (eigenes Eck-Quadrat) wirkt das wie ein weißer Rand.
   ⚠️ Sobald man den Resizer überhaupt anfasst, zeichnet WebKit die Default-Greif-Linien NICHT mehr → wir
   liefern den Greifer selbst: transparenter Hintergrund + dezente Diagonal-Linien (neutrales Grau, wirkt auf
   hell wie dunkel). So bleibt der Zieher, der weiße Rand ist weg. */
textarea.form-control::-webkit-resizer,
.cl-editor::-webkit-resizer {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cg stroke='%23888' stroke-width='1'%3E%3Cpath d='M8 1 1 8'/%3E%3Cpath d='M8 4 4 8'/%3E%3C/g%3E%3C/svg%3E");
    background-position: right bottom;
    background-repeat: no-repeat;
}
textarea.form-control::-webkit-scrollbar-corner,
.cl-editor::-webkit-scrollbar-corner {
    background-color: transparent;
}
/* Track-„Lane" = Feldfarbe (theme-reaktiv): Tabler setzt global `scrollbar-color: <thumb> transparent`
   (Standard-Property). Moderne Browser NUTZEN diese und ignorieren `::-webkit-scrollbar` → ein transparenter
   Track fällt auf den nativen color-scheme-Default (dunkelgrau) zurück, unabhängig vom Feld. Darum den
   TRACK-Wert (2. Wert) hier explizit auf die Feldfarbe setzen → folgt automatisch dem Theme. Thumb-Wert =
   wie Tabler (20 % der Textfarbe). */
textarea.form-control,
.cl-editor-body {
    scrollbar-color: color-mix(in srgb, var(--tblr-body-color) 20%, transparent) var(--tblr-bg-forms);
}

/* Sidebar (≥lg) als schwebende „Karte": KEIN rechter Trennstrich-Schatten (Tabler: inset box-shadow),
   stattdessen ein Card-Border + -Radius (Radius folgt dem Theme-Setting via --tblr-card-border-radius),
   mit 0.5rem Abstand zum Fensterrand oben/links/unten (Tabler-Default: top/left/bottom = 0). Border-Farbe
   bewusst --tblr-border-color-translucent (die Card-Border-Variable ist außerhalb einer .card leer).
   Der page-wrapper rückt entsprechend nach: 0.5 (Einrückung) + 15 (Sidebar-Breite, bleibt) + 0.5 (Luft). */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg {
        box-shadow: none;
        inset: 0.5rem auto 0.5rem 0.5rem;
        border: var(--tblr-card-border-width, var(--tblr-border-width)) solid var(--tblr-border-color-translucent);
        border-radius: var(--tblr-card-border-radius, var(--tblr-border-radius));
    }
    .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        margin-left: 16rem;
    }
}



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

/* Kontext-Header-Subnav (nav-bordered): inaktive Tabs in normaler Textfarbe statt Tablers gedämpftem
   gray-500 → in beiden Farbmodi gut lesbar (hell auf dunkel, dunkel auf hell). Aktiv bleibt Primärfarbe
   (Tablers .nav-link.active hat höhere Spezifität und gewinnt). */
.nav-bordered .nav-link {
    color: var(--tblr-body-color);
}
/* Kontext-Subnav als Reiter-Optik (aktiver Tab = bg-primary-lt + Rahmen/rounded-top, layout.php):
   Items ohne Zwischenabstand direkt aneinander, damit die Laschen bündig sitzen. Nur unsere Subnav. */
.cl-kontext-subnav.nav-bordered .nav-item + .nav-item {
    margin-left: 0;
}
/* 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; }

/* ── DB-Profil-Umschalter in der Sidebar (ADR-015) ───────────────────────────
   Farbe des Datenbank-Icons signalisiert das aktive Profil: GRÜN = Live, ROT = Test.
   Farbe direkt aufs Icon (gewinnt über die geerbte btn-action-Farbe, auch bei Hover). */
.cl-db-toggle .fa-database { color: var(--tblr-green); }
.cl-db-toggle.is-test .fa-database { color: var(--tblr-red); }

/* Seite /db-profil (views/db_profil.php) — Zustandspunkt in derselben Farbcodierung wie das
   Sidebar-Icon, damit „rot = Test" ein Signal bleibt und nicht zwei. */
.cl-db-punkt {
    display: inline-block; width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--tblr-green); flex: 0 0 auto;
}
.cl-db-punkt.is-test { background: var(--tblr-red); }

/* Gesperrte Hälfte des Reglers (Test-Zwang auf preview): sieht inaktiv aus, bleibt aber
   hover-fähig — bewusst NICHT Bootstraps .disabled (das nimmt per pointer-events:none auch den
   erklärenden Tooltip). */
.cl-db-gesperrt { cursor: not-allowed; opacity: .55; }

/* Klickbare Tabellen-Zeile (data-cl-row-href): Cursor signalisiert Navigation. Im Bulk-Modus aus
   (dort wird per Zeilenklick ausgewählt, nicht navigiert). */
[data-cl-table-scope]:not(.cl-bulk-on) tr[data-cl-row-href] { cursor: pointer; }

/* Filter-Dropdown: Optionen JE KATEGORIE in einem eigenen scrollbaren Block (~8 Zeilen à ~2,2rem),
   damit lange Listen (z.B. Marken) gruppenweise scrollen und die Gruppen-Header sichtbar bleiben. */
.cl-filter-options { max-height: 17.6rem; overflow-y: auto; }

/* Filter-Dropdown-Menü (alle CMS-Tabellen-Filter): Breite begrenzen, damit überlange Optionen
   (lange Kunden-/Markennamen) UMBRECHEN statt das Menü horizontal zu sprengen — Bootstrap-Default an
   .dropdown-item ist white-space:nowrap. Bei Umbruch sitzt die Checkbox oben (flex-start). */
[data-cl-table-filter] .dropdown-menu { max-width: 24rem; }
[data-cl-table-filter] .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
[data-cl-table-filter] .cl-filter-options .dropdown-item { align-items: flex-start; }

/* FOUC vermeiden: tbody erst zeigen, wenn cms_table.js die Tabelle einmal durchgerechnet hat
   (sonst blitzen beim Laden kurz ALLE Zeilen auf, bevor auf die Seitengröße paginiert wird). */
table[data-cl-table]:not(.cl-table-bereit) tbody { display: none; }

/* Horizontalen Phantom-Seitenscroll im CMS kappen (die interne Scrollbreite breiter Tabellen sickert sonst
   in den documentElement-scrollWidth). `clip` (NICHT hidden) erzeugt keinen Scrollcontainer → vertikaler
   Scroll + die per Popper „fixed" gelegten Dropdowns/Sidebar/Toasts bleiben unberührt. Nur CMS (custom.css). */
/* Breite CMS-Tabellen (text-truncate → einzeilige Zellen → breiter als der Viewport) scrollen INNERHALB der
   Card: NUR das .table-responsive (Flex-Item, Default min-width:auto) bekommt min-width:0, damit overflow-x:auto
   greift, statt die Card aufzublähen. (Kein min-width auf der Layout-Kette — das ließ die Container auf
   Inhaltsbreite zusammenfallen statt den Viewport zu füllen.) html overflow-x:clip schluckt den Rest-Phantom-
   Scroll (clip ≠ hidden → kein Scrollcontainer, fixed-Dropdowns/Sidebar/Toasts bleiben unberührt). Nur CMS. */
[data-cl-table-scope] .table-responsive { min-width: 0; }
/* overflow-x:clip auf .page-wrapper (NICHT html — clip greift am Root nicht zuverlässig für den Viewport-
   Scroll). Kappt den Phantom (interne Tabellen-Scrollbreite sickert sonst durch). clip ≠ hidden → kein
   Scrollcontainer, kein zweiter Balken; die fixed-Sidebar/Dropdowns liegen außerhalb und bleiben unberührt. */
.page-wrapper { overflow-x: clip; }

/* ── CMS-Tabellen: Responsive (Phone, < sm) ──────────────────────────────────
   Header bleibt einzeilig („Hinzufügen" wird mobil per d-none d-sm-inline-flex ausgeblendet).
   Steuerzeile: Filter + Suche je volle Breite, untereinander (statt schmal/eingerückt).
   Footer kompakt: „Zeige/pro Seite" via d-none d-sm-inline (Markup) weg; Pagination nur ‹ / › —
   Seitenzahlen & „…" (cl-pager-num) ausblenden. */
@media (max-width: 575.98px) {
    /* Jedes Steuerelement volle Breite; ms-auto (Suche) neutralisieren; inline width:20rem überstimmen. */
    .cl-table-controls > * { width: 100% !important; margin-left: 0 !important; max-width: none !important; }
    .cl-table-controls .dropdown > button { width: 100%; }   /* Filter-/Bulk-Toggle füllen den Container */
    [data-cl-table-pager] .cl-pager-num { display: none; }
}

/* ── Page-Header-nav (Glocke, Profil …) — Tabler-Hover nachrüsten ──
   Tabler setzt --tblr-nav-link-color/-hover-bg/-hover-color auf `.navbar` (über --tblr-navbar-color);
   unser Page-Header ist KEIN `.navbar` → die Kette ist leer, der Hover bleibt unsichtbar. Wir setzen die
   Variablen daher EINMAL am Header-Container — so bekommen ALLE nav-links darin (Glocke UND Profil) den
   korrekten Tabler-Hover; danach greifen Tablers eigene `.nav-link`/`:hover`-Regeln. */
.cl-header-nav {
    --tblr-nav-link-color: var(--tblr-secondary);
    --tblr-nav-link-hover-color: var(--tblr-body-color);
    --tblr-nav-link-hover-bg: color-mix(in srgb, var(--tblr-body-color) 6%, transparent);
}
/* Runde Hover-Fläche + echtes Padding (Tabler nutzt die feste navbar-Höhe; die haben wir hier nicht →
   sonst klebt die Hover-Fläche am Inhalt = „gequetscht"). cl-nav-icon (Glocke) hält über min-* trotzdem
   sein Quadrat. */
.cl-header-nav .nav-link { border-radius: var(--tblr-border-radius); padding: 0.5rem 0.625rem; }

/* Kunden-Switcher (customSelect-Layer-Select) im Header: als reiner **Icon-Button** (wie Glocke/Apps) —
   nur das Layer-Icon, KEIN Label „Kunde", KEIN Caret, kein form-select-Look. Quadratisch (2.5rem) mit
   runder Hover-Fläche. Der Toggle ist ein Nav-Switcher → keine bleibende Auswahl, daher kein Text nötig. */
/* ── Header-Switcher (Kunde + Website) ────────────────────────────────────────────────────────
   BEIDE Schnellwechsler im Page-Header teilen sich diese Optik: reiner Icon-Button, festes,
   rechtsbündiges Menü. Sie tragen `.cl-header-switcher` gemeinsam und zusätzlich ihre eigene
   Klasse (`.cl-kunden-switcher` / `.cl-websites-switcher`) — die ist der Haken für Abweichungen
   und bleibt als Selektor in den Feature-Dokus gültig. */
.cl-header-switcher { width: auto; }
.cl-header-switcher .dropdown > button {
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    justify-content: center!important;
    background-color: var(--tblr-primary-lt);   /* bg-primary-lt (heller Primary-Hintergrund) */
    border-color: transparent;
    border-radius: var(--tblr-border-radius);
}
.cl-header-switcher .dropdown > button:hover,
.cl-header-switcher .dropdown > button:focus-visible {
    background-color: color-mix(in srgb, var(--tblr-primary) 20%, transparent);
    border-color: transparent;
    box-shadow: none;
}
.cl-header-switcher .dropdown > button::after { content: none!important; }                       /* kein Caret */
.cl-header-switcher .dropdown > button .d-inline-flex > .text-truncate { display: none; } /* kein Label neben dem Icon */
/* Menü-Positionierung im Header (flex-row): Ohne `position:absolute` läge das geöffnete Menü im Fluss und
   würde die Header-Zeile auseinanderdrücken (Glocke/Profil rutschen weg). Rechtsbündig am Toggle (`right:0`,
   `left:auto`) → es öffnet nach links statt rechts aus dem Viewport zu laufen. Breite gedeckelt. */
.cl-header-switcher .dropdown-menu {
    position: absolute !important;
    inset: auto 0 auto auto !important;   /* top:auto right:0 bottom:auto left:auto → unter Toggle, rechtsbündig */
    top: 100% !important;
    margin-top: 0.5rem !important;        /* 8px Trigger↔Menü-Abstand wie die Popper-Dropdowns (offset [0,8]) */
    transform: none !important;           /* falls eine Popper-Strategy doch inline transform/inset setzt */
}
/* FESTE Breite 26rem — überschreibt menu-fit (`width:max-content`), damit das Menü beim Suchen/Filtern NICHT
   schmaler wird (kürzere Treffer → sonst schrumpft max-content). Selektor matcht `.cl-select-menu-fit` mit
   (gleiche Spezifität wie cl_customselect.css); custom.css lädt später → gewinnt. Switcher ist erst ab `md`
   sichtbar, daher kein Schmal-Viewport-Konflikt. */
.cl-header-switcher .dropdown-menu.cl-select-menu-fit {
    width: 30rem !important;
    min-width: 30rem !important;
    max-width: 30rem !important;
}
/* Status-Dot in der Option vertikal mittig + etwas Abstand zur Kundennummer. */
.cl-header-switcher .dropdown-item { align-items: center; }
.cl-header-switcher .dropdown-item .status-dot { margin-right: 0.5rem; }

/* Reine Icon-Buttons (Glocke): zusätzlich die Quadrat-Geometrie aus Tablers `.navbar .navbar-nav .nav-link`. */
.nav-link.cl-nav-icon {
    position: relative;
    min-width: 2.5rem;
    min-height: 2.5rem;
    justify-content: center;   /* .nav-link ist bei Tabler bereits display:flex; align-items:center */
}
.nav-link.cl-nav-icon .badge {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    transform: translate(50%, -50%);
}
/* Glocken-Indikator als animierter status-dot — pulsiert wie die status-dots im Benachrichtigungs-Dropdown
   (Tablers `status-dot-animated`). Gleiche Position wie der frühere `.badge` (oben rechts). */
.nav-link.cl-nav-icon .cl-bell-dot {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    transform: translate(50%, -50%);
}

/* ── Eigenes Marken-Logo (Inline-SVG) — theme-reaktiv ──
   cls-1 = Vordergrund (Body-Farbe), cls-3 = Kontrast/Aussparungen (Body-Hintergrund), cls-2 = Hilfslinien
   (unsichtbar). Flippt automatisch mit data-bs-theme (hell ↔ dunkel). Inline statt <use>, damit die
   internen Klassen direkt per CSS-Variable umgefärbt werden können (Shadow-DOM von <use> verhindert das). */
.cl-logo { width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: middle; flex: none; }
.cl-logo .cls-1 { fill: var(--tblr-body-color); }
.cl-logo .cls-3 { fill: var(--tblr-body-bg); }
.cl-logo .cls-2 { fill: none; stroke: none; }

/* Icon-Größe im Apps-Grid (Header-Dropdown). 2rem, einheitlich für <img>-Brand-Icons UND das Inline-Logo
   (überschreibt .cl-logo via !important, da gleiche Spezifität sonst von der Reihenfolge abhinge). */
.cl-app-icon { width: 2rem !important; height: 2rem !important; }

/* ── Marken-Wortmarke als <img> in zentrierten Masken (Wartungsseite) ──
   Anders als das Inline-Logo oben ist carlution-logo.svg ein <img> — interne Klassen sind darin nicht
   per CSS erreichbar, und die Quelldatei ist RUNDHERUM WEISS (alle Pfade fill: #fff). Im Hellmodus
   stünde sie damit unsichtbar auf der weißen Karte; brightness(0) färbt sie dort schwarz. Light ist
   der Default-Zweig, weil data-bs-theme im Hellmodus oft gar nicht gesetzt ist (s. Foto/Overlay-Mix). */
.cl-brand-logo { height: 3rem; width: auto; filter: brightness(0); }
[data-bs-theme="dark"] .cl-brand-logo { filter: none; }

/* ── Wartungsseite (öffentliche Produktions-Sperre, render/wartung.php) ──
   Illu: Die SVG trägt ein festes height="400" — hier auf Breiten-Skalierung umgestellt, damit sie
   auf dem Handy mitschrumpft (dort ist sie sichtbar, anders als bei der Login-Maske). */
.cl-wartung-illu svg { width: 100%; height: auto; max-width: 33rem; }

/* Markenfoto auf kleinen Viewports: `background-attachment: fixed` (Basis-Regel oben) wird von
   mobilen Browsern — vor allem iOS Safari — nicht zuverlässig gerendert, das Foto bleibt dann leer.
   Auf schmalen Schirmen deshalb zurück auf `scroll`. Gilt bewusst nur für diese Seite; die
   Login-Maske hat denselben Effekt, wird aber nicht öffentlich gezeigt. */
@media (max-width: 991.98px) {
    body.cl-wartung { background-attachment: scroll; }
}


/* Tom Select „Advanced select" exakt auf Tabler-Input-Höhe bringen (.form-control: padding .5625rem,
   line-height 1.25rem, font-size .875rem). custom.css lädt zuletzt → überschreibt base + tabler-vendors. */
.ts-wrapper.single .ts-control {
    padding: .5625rem 1rem;
    min-height: calc(1.25rem + 1.125rem + (var(--tblr-border-width) * 2));
}
.ts-control, .ts-control .item, .ts-control input {
    font-size: .875rem;
    line-height: 1.25rem;
}

/* ── Medien-Vorschau: Transparenz-Schachbrett ──
   Sobald im Upload-/Vorschaufenster ein Bild gezeigt wird (Vorschau-img sichtbar, nicht `.d-none`), bekommt die
   Dropzone einen karierten „Transparenz"-Hintergrund — so lassen sich transparente PNGs (Logos, Modellfotos)
   beurteilen. Im Empty-State (kein Bild) bleibt die Dropzone theme-neutral (`:has()` greift dann nicht). */
[data-cl-medien-dropzone]:has([data-cl-medien-preview]:not(.d-none)) {
    --cl-checker: rgba(130, 130, 130, .22);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, var(--cl-checker) 25%, transparent 25%),
        linear-gradient(-45deg, var(--cl-checker) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--cl-checker) 75%),
        linear-gradient(-45deg, transparent 75%, var(--cl-checker) 75%);
    background-size: 1.25rem 1.25rem;
    background-position: 0 0, 0 .625rem, .625rem -.625rem, -.625rem 0;
}

/* ── Medienbibliothek: Vorschau-Kacheln ──
   Kacheln heben sich wie FORMULARFELDER vom Card-Grund ab (BG + Border wie form-control, IW 11.07.2026) —
   gilt für Bibliothek + Altbestand (website_medien.php) und später das Picker-Modal (gleiche Templates). */
[data-cl-medienbib-item] .card,
[data-cl-medienbib-alt-item] .card {
    background: var(--tblr-bg-forms);
    border-color: var(--tblr-border-color);
}

/* ── Medienbibliothek: Sortier-Select icon-only ──
   AUSNAHME (IW 12.07.2026): der Sortier-Select zeigt nur sein (auswahlabhängiges) Icon + Caret —
   die Filter-Selects bleiben normal. Lokal gescopt, kein globaler Select-Modifikator.
   Gilt für den Tab ([data-cl-medienbib-sort]) UND das Picker-Modal ([data-cl-mb-sort]). */
[data-cl-medienbib-sort] .custom-select-wrapper .text-truncate,
[data-cl-mb-sort] .custom-select-wrapper .text-truncate {
    display: none;
}
[data-cl-medienbib-sort] .custom-select-wrapper .dropdown > button::after,
[data-cl-mb-sort] .custom-select-wrapper .dropdown > button::after {
    min-width: 0;   /* Caret ohne Text braucht keine 2rem-Mindestbreite */
}

/* Tabellen-Thumbnail der Listenansicht (Bibliothek + Altbestand, auch Picker-Modal) — zentral statt
   inline je Zeile. max-width:none hebt Tablers globales img{max-width:100%} auf: in der schmalen
   w-1-Vorschauspalte (die die w-100-Namensspalte klein hält) bliebe das Bild sonst unter 3rem;
   so wirkt die feste 3rem-Breite als echte Mindestgröße. */
.cl-medienbib-thumb {
    width: 3rem;
    height: 3rem;
    max-width: none;
    object-fit: contain;
}

/* Letzte Zeile der Medienbib-Tabellen ohne Unterkante — unter der Tabelle folgt direkt der
   card-footer (eigene border-top), sonst entsteht eine Doppellinie. */
[data-cl-medienbib-tabelle] tbody tr:last-child > td,
[data-cl-medienbib-alt-tabelle] tbody tr:last-child > td {
    border-bottom-width: 0;
}

/* Altbestand: bereits übernommene Einträge treten zwischen offenen Kandidaten optisch zurück — JS setzt
   die Klasse auf der Zeile (sofern der Übernahme-Filter nicht ausschließlich „Übernommen" zeigt). Gedimmt
   werden nur die Inhalts-Zellen; Bulk-Checkbox (erste) und Zeilenmenü (letzte) bleiben voll sichtbar. */
tr.cl-medienbib-gedimmt > td {
    opacity: .3;
}
tr.cl-medienbib-gedimmt > td:first-child,
tr.cl-medienbib-gedimmt > td:last-child {
    opacity: 1;
}



[data-cl-sektion-body] {
  position: relative;
  z-index: 1021;
}
/* ── Lane-A-Editor: HugeRTE im INLINE-Modus ──
   Kein iframe → der Inhalt lebt direkt im Seiten-DOM und erbt die CMS-CSS (Inter, Theme-Farben, Schriftgrößen)
   automatisch. Aufbau (3 Ebenen):
     .cl-editor-field  → Außen-Wrapper (Stapel: Toolbar-Streifen + Kasten im normalen Fluss).
     .cl-editor-bar    → Toolbar-Dock (fixed_toolbar_container_target), relativ im Fluss ÜBER dem Kasten.
     .cl-editor        → der sichtbare Kasten (Rahmen/BG/Resize/Höhe); das editierbare Div füllt ihn.
   ⚠️ resize bewusst auf dem KASTEN, NICHT auf dem editierbaren Div — sonst löst das Anfassen des Griffs den
   Editor (Fokus/Interaktion) aus und triggert eine falsche „ungespeicherte Änderungen"-Warnung. */
.cl-editor-field {
    position: relative;
}

.cl-editor {
    display: flex;
    flex-direction: column;
    background-color: var(--tblr-bg-forms);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: 0 0 var(--tblr-border-radius) var(--tblr-border-radius);
    /* AUTO-HÖHE (Test IW 14.07.2026): inline-Äquivalent zum autoresize-Plugin (das NUR im iframe-Modus
       wirkt) — der contenteditable-Kasten wächst nativ mit dem Inhalt ab einer Mindesthöhe. KEIN
       Layout-Shift, weil die Höhe vom INHALT abhängt (nicht vom Fokus). --cl-editor-h = Mindesthöhe.
       Kein resize/overflow:hidden mehr (bei mitwachsender Höhe überflüssig, würde Inhalt clippen). */
    min-height: var(--cl-editor-h, 5.5rem);
    /* height: var(--cl-editor-h, 5.5rem);   ← vorher: feste Höhe mit internem Scroll + resize:vertical */
}
.cl-editor-body {
    flex: 1 1 auto;
    /* overflow: auto — bei Auto-Höhe kein interner Scroll nötig; visible, damit nichts geclippt wird
       und der Kasten mit dem Inhalt wächst. */
    padding: .5625rem 1rem;
    outline: none;
}

.cl-editor-body [class*="row"]{

  outline: 1px dashed color-mix(in srgb, var(--tblr-border-color) 60%, transparent) !important;
  outline-offset: 0px;

}
.cl-editor-body [class*="col"]{

  outline: 1px dashed color-mix(in srgb, var(--tblr-border-color) 40%, transparent) !important;
  outline-offset: -2px;

}
/* Inline-Quelltext mit Syntax-Highlighting (clcode-Umschalter → CodeMirror 5, cms_editor.js): das
   CM-Widget füllt den Editor-Kasten und wächst mit dem Inhalt (height:auto + viewportMargin:Infinity).
   Rahmen/Radius kommen vom .cl-editor-Kasten; nur Schriftgröße angleichen. */
.cl-editor .CodeMirror {
    height: auto;
    min-height: var(--cl-editor-h, 5.5rem);
    font-size: .8125rem;
    line-height: 1.8;   /* etwas luftigerer Zeilenabstand (CM misst die Höhe selbst neu) */
    border-radius: var(--tblr-border-radius);
}
/* Tag-Paar-Highlighting (matchtags-Addon) — dezente Hervorhebung des öffnenden + schließenden Tags. */
.cl-editor .CodeMirror-matchingtag {
    background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.25);
    border-radius: 2px;
}
/* Aktive Zeile (active-line-Addon) — dezente Hervorhebung der Cursor-Zeile (light + dark). */
.cl-editor .CodeMirror-activeline-background,
.cl-erw-code .CodeMirror-activeline-background {
    background: rgba(128, 128, 128, 0.1);
}
/* Standalone-CodeMirror im Bereich „Erweitert" (Custom CSS/JS, cms_seite_erweitert.js) — hat keinen
   .cl-editor-Kasten drumherum → eigener Rahmen + Mindesthöhe. */
.cl-erw-code .CodeMirror {
    height: auto;
    min-height: 14rem;
    font-size: .8125rem;
    line-height: 1.8;
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}


.tox.tox-hugerte-inline  {
  border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0 !important;
  border-bottom: 0 !important;
}
.tox.tox-hugerte-inline .tox-editor-header {
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

.tox .tox-toolbar__group {
    padding: 0 0.5rem !important;
}
/* Schwebende Inline-Toolbar an Tabler angleichen (oxide setzt sonst fixes Dunkel + Linienraster).
   `!important`, weil HugeRTE den oxide-Skin erst zur Laufzeit ins <head> injiziert (nach custom.css). */
.tox.tox-hugerte-inline .tox-toolbar{
    background: none !important;
}
.tox .tox-tbtn--select {
  width: 34px !important;
}
.tox .tox-tbtn {
  /* width: 28px !important; */
  height: 28px !important;  
}
/* Toolbar-Icons kleiner: 16×16 statt oxide-Default 24 (IW 14.07.2026, FA-Pro-Icons). !important, weil der
   oxide-Skin zur Laufzeit ins <head> injiziert wird (nach custom.css). */
.tox .tox-tbtn svg {
    width: 14px !important;
    height: 14px !important;
}
/* Chevrons in der Toolbar ausblenden → nur die Icons (IW 14.07.2026). Betrifft MenuButtons
   (tox-tbtn__select-chevron, z.B. clblocks) UND SplitButtons (tox-split-button__chevron, z.B.
   forecolor/Listen). ⚠️ Bei SplitButtons öffnet sonst NUR der Chevron das Dropdown — ohne ihn bleibt
   nur die Primär-Aktion erreichbar (s. Hinweis; ggf. betroffene Buttons zu MenuButtons umbauen). */
.tox .tox-tbtn__select-chevron,
.tox .tox-split-button__chevron {
    display: none !important;
}
/* Letzte Toolbar-Gruppe (Quelltext/code) nach rechts abrücken — entspricht ms-auto (IW 14.07.2026). */
.tox .tox-toolbar__group:last-child {
    margin-left: auto;
}

/* ── Sticky-Speicherleiste ──
   Aktions-/Speicherleiste am Formularende (.cl-form-actions). Sie ist das LETZTE Element des Formulars → mit
   bottom:0 „pinnt" sie an den Viewport-Unterrand, solange das Formularende noch darunter liegt (lange Seite),
   und setzt sich am echten Ende ab. Voraussetzung erfüllt: kein Vorfahr mit overflow:hidden/auto (Card hat nur
   border-radius; .page-wrapper nutzt overflow-x:clip → kein Scroll-Container). BEWUSST OHNE Hintergrund — nur
   der Button schwebt; der übrige (leere) Leistenbereich bleibt transparent und per pointer-events:none
   durchklickbar, damit der darunter scrollende Inhalt klickbar bleibt (nur der Button selbst fängt Klicks). */
.cl-form-actions {
    position: sticky;
    bottom: 0;
    /* z-index 1022 (IW 13.08.2026, im Browser nachgemessen): `[data-cl-sektion-body]` traegt
       `position:relative; z-index:1021` und bildet damit einen eigenen STACKING-CONTEXT. Alles darin
       liegt geschlossen ueber jedem Element mit kleinerem z-index — mit den vorherigen 10 verschwand
       die Leiste hinter den Options-Zeilen, obwohl sie im DOM danach kommt. Entscheidend ist hier
       nicht der Wert der Nachbarn, sondern der des umgebenden Contexts.
       1022 = knapp darueber; offene customSelect-Dropdowns liegen ebenfalls auf 1022 und gewinnen
       innerhalb ihres Contexts, solange sie im DOM spaeter kommen — verifiziert. */
    z-index: 1022;
    padding-block: .75rem;     /* Button klebt nicht direkt am Viewport-Rand */
    pointer-events: none;
}
.cl-form-actions > * {
    pointer-events: auto;
}
/* GEPINNT = sichtbare Leiste (IW 13.08.2026): Solange sie am Viewport-Rand klebt, bekommt die ganze
   Zeile den Flächen-Ton und fängt Klicks selbst ab — sonst scheint der durchscrollende Inhalt hinter
   dem Button durch und das Ergebnis liest sich als Überlagerungsfehler. Am Formularende (kein
   .cl-stuck) fällt beides wieder weg: Dort ruht die Leiste im Fluss und braucht keine eigene Fläche. */
.cl-form-actions.cl-stuck {
    background-color: var(--tblr-bg-surface);
    pointer-events: auto;
}
/* Deaktivierter Button: einheitlich Tablers `.4` (IW 13.08.2026). Zwischenzeitlich stand er im
   gepinnten Zustand auf .8, damit er ueber durchscrollendem Inhalt besser lesbar ist — sichtbar wurde
   davon aber vor allem der WECHSEL: Beim Uebergang vom Schweben ins Ruhen hellte der Button auf.
   Ein Zustand, der beim Scrollen seine Farbe aendert, irritiert mehr, als die bessere Lesbarkeit
   einbringt. Die Flaeche hinter der gepinnten Leiste sorgt ohnehin fuer ruhigen Untergrund. */
/* ZURÜCKGENOMMEN (IW 13.08.2026): Der gepinnte Speichern-Button wurde ausgeblendet, solange nichts zu
   speichern war (`.cl-stuck .btn:disabled { opacity: 0 }`, Entscheid 05.08.2026 gegen den „nutzlosen
   schwebenden Button"). In der Praxis war die Wirkung umgekehrt: Der Button war nur dort zu sehen, wo
   man ohnehin am Formularende angekommen war — genau dann, wenn man ihn NICHT mehr braucht. Beim
   Scrollen wirkte er, als verschwinde er.
   Jetzt bleibt er stehen; deaktiviert ist er ohnehin sichtbar ausgegraut, und das ist die ehrlichere
   Auskunft („es gibt nichts zu speichern") als ein Element, das kommt und geht. Die card-footer-Ausnahme
   von damals wird damit gegenstandslos. */
.cl-form-actions .btn { transition: opacity .15s ease; }

/* ── Drag-Sortier-Greifer (cms_sort.js) — CMS-weit einheitlich ────────────────
   Eine Optik für ALLE sortierbaren Accordions (Marken, Modelle, Servicekategorien, Öffnungszeiten,
   Domains …). Vorher 3× inline in den Views dupliziert — hier zentralisiert, damit der Nutzer überall
   dieselbe „Art und Weise" vorfindet.

   Zwei Greifer-Klassen: .cl-sort-handle (äußere Liste) + .cl-sort-handle-modell (verschachtelte
   Modell-Liste in einer Marke) — getrennt, damit das äußere Sortable den inneren Greifer nicht mitfasst.

   Sichtbarkeit: Greifer nur, wenn der EIGENE Container .cl-sort-active trägt (Immer-an oder per Toggle).
   Deaktiviert = ausgegraut (opacity .4, not-allowed), NIE versteckt — zwei Fälle:
     • nur EINE Zeile (:only-child) → nichts zu sortieren
     • Container gesperrt (.cl-sort-locked) → ein Bereich ist aufgeklappt (Inspektionsmodus, cms_sort.js)
   Bei Marken greift .cl-sort-locked NUR die direkten Marken-Greifer (.cl-sort-handle) — die verschachtelten
   Modell-Greifer (.cl-sort-handle-modell) bleiben aktiv (Modelle bei offener Marke sortierbar). */
.cl-sort-handle,
.cl-sort-handle-modell { display: none; align-items: center; cursor: grab; color: var(--tblr-secondary); }
.cl-sort-active > .accordion-item > .accordion-header > .cl-sort-handle,
.cl-sort-active > .accordion-item > .accordion-header > .cl-sort-handle-modell { display: flex; }
/* Deaktiviert → sichtbar, aber ausgegraut + gesperrt (nur eine Zeile ODER Container gesperrt) */
.cl-sort-active > .accordion-item:only-child > .accordion-header > .cl-sort-handle,
.cl-sort-active > .accordion-item:only-child > .accordion-header > .cl-sort-handle-modell,
.cl-sort-locked > .accordion-item > .accordion-header > .cl-sort-handle { opacity: .4; cursor: not-allowed; }
/* Drag-Zustände (SortableJS) */
.accordion-item.sortable-ghost { opacity: .5; }
.accordion-item.sortable-chosen .cl-sort-handle,
.accordion-item.sortable-chosen .cl-sort-handle-modell { cursor: grabbing; }

/* ── Seiten-Struktur-Modus (verschachteltes Drag, cms_seiten_struktur.js) ─────────────────────────── */
.cl-struktur-handle { cursor: grab; }
.cl-struktur-item.sortable-chosen .cl-struktur-handle { cursor: grabbing; }
/* Platzhalter (wohin der Drop landet) grün eingefärbt — wie bg-success-lt. */
.cl-struktur-item.sortable-ghost > div { background-color: rgba(var(--tblr-success-rgb), .16); border-color: rgba(var(--tblr-success-rgb), .5); }
/* Leere Ebenen (Blätter) sind Drop-Ziele fürs Verschachteln — nur WÄHREND des Ziehens sichtbar machen. */
.cl-struktur-dragging .cl-struktur-liste:empty { min-height: 1.5rem; border: 1px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius); margin-bottom: .25rem; }

/* ── KI-Badge: animiertes „Mit KI"-Funkeln (Auslöser der KI-Texterstellung, ADR-029) ────────────
   cms_ai_text.js injiziert das Badge-SVG in jeden [data-cl-ai-generate]-Button (kein Markup je View).
   Erbt die Button-Farbe (currentColor); das Funkeln respektiert prefers-reduced-motion. */
.ai-badge { padding-bottom: 4px;height: 1.2lh; margin-right: .35rem; flex: none; color: currentColor; }
.ai-badge .ai-tw { fill: color-mix(in srgb, var(--tblr-body-color) 85%, transparent); animation-name: ai-tw; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes ai-tw { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(.78); opacity: .55; } 70% { transform: scale(1.12); opacity: 1; } }
.ai-badge .ai-sp { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: 0; animation-name: ai-sp; animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes ai-sp { 0%, 55%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 68% { opacity: .9; transform: scale(1) rotate(45deg); } 82% { opacity: 0; transform: scale(1.4) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .ai-badge .ai-tw, .ai-badge .ai-sp { animation: none; } .ai-badge .ai-sp { opacity: 0; } }



/* KI-Warte-Modal: das animierte KI-Badge groß statt des kleinen Button-Badges (Farbe erbt von .text-body). */
#cl-wait .ai-badge { height: 3rem; margin: 0; color: var(--tblr-primary);}


.modal-backdrop {
    --tblr-backdrop-bg: var(--tblr-bg-surface-dark);
    --tblr-backdrop-opacity: 0.75;
}
@media (min-width: 576px) {
  .modal {
    --tblr-modal-box-shadow: 0;
  }
}

/* KI-Chat (#cl-ai-full): Avatar-Badge in Bubble-Größe + formatierter HTML-Text in der Bubble lesbar
   (Überschriften gezähmt, kein Rand-Abstand oben/unten). */
#cl-ai-full .avatar .ai-badge { height: 1.5rem; margin: 0; color: var(--tblr-primary); }
/* Bubble nur so breit wie ihr Inhalt (col-auto), aber höchstens 75 % (= col-lg-9). */
#cl-ai-full .cl-ai-chat-col { max-width: 75%; }
/* Senden gesperrt (ab dem ersten Senden nur mit Eingabe): nicht klickbar + gedimmt. */
#cl-ai-full [data-cl-ai-chat-send].disabled { pointer-events: none; opacity: .35; }
#cl-ai-full [data-cl-ai-chat-hint] .ai-badge { height: 3rem; margin: 0; }
#cl-ai-full .chat-bubble-body > :first-child { margin-top: 0; }
#cl-ai-full .chat-bubble-body > :last-child { margin-bottom: 0; }
#cl-ai-full .chat-bubble-body h1 { font-size: 1.4rem; }
#cl-ai-full .chat-bubble-body h2 { font-size: 1.2rem; }
#cl-ai-full .chat-bubble-body h3 { font-size: 1.05rem; }
#cl-ai-full .chat-bubble-body h4 { font-size: 1rem; }

/* Dashboard-Cockpit (claude_memory/feature-dashboard-cockpit.md) — Gruppe A. */
/* Sparkline (ApexCharts, cms_charts.js): als Geschwister des card-body (Tabler #chart-revenue-bg-Muster),
   sitzt randlos an der Kartenunterkante. Höhe per data-cl-chart-height (default 40, Multi-Linien-Box 200). */
.cl-chart-spark { min-height: 40px; }
/* Donut via conic-gradient + radialer Maske (sauberes Loch, hintergrundunabhängig). --p = Prozent Segment 1. */
.cl-donut {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: conic-gradient(var(--tblr-primary) calc(var(--p) * 1%), var(--tblr-azure) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 63%);
          mask: radial-gradient(closest-side, transparent 62%, #000 63%);
}
/* Kompakte card-table (z.B. Top-Fahrzeuge): geringeres Zeilen-Padding oben/unten. */
.cl-table-tight > tbody > tr > td { padding-top: .5rem; padding-bottom: .5rem; }
.cl-table-tight > tbody > tr:last-child > td { border-bottom: none; }  /* letzte Zeile ohne Unterkante */
/* Einheitliches Info-Icon in Kachel-Köpfen (cms_info.js → #cl-info): klickbar, dezenter Hover. */
.cl-info { cursor: pointer; line-height: 1; transition: color .12s ease; }
.cl-info:hover, .cl-info:focus-visible { color: var(--tblr-primary) !important; outline: none; }
/* ── Bereichs-Navigation (Bearbeiten-Masken, Partial render/cms/partials/bereichs_nav.php — Konsolidierung A2) ──
   Ersetzt die 7 kopierten Inline-<style>-Blöcke der Views (Toggle-Chevron-Rotation + List-Group-Optik). */
[data-cl-bereichs-nav] .cl-nav-toggle .fa-angle-down { transition: transform .15s; }
[data-cl-bereichs-nav] .cl-nav-toggle[aria-expanded="true"] .fa-angle-down { transform: rotate(180deg); }
[data-cl-bereichs-nav] [data-cl-nav-liste] .list-group-item { padding: .5rem var(--tblr-page-padding, 1rem); min-height: 2.5rem; display: flex; align-items: center; }
[data-cl-bereichs-nav] [data-cl-nav-liste] .list-group-item.active { background: var(--tblr-list-group-action-hover-bg); }



.cm-s-material-darker.CodeMirror {
    background-color: var(--tblr-bg-forms) !important;
    color: var(--tblr-body-color) !important;
}
.cm-s-material-darker .CodeMirror-gutters {
    background-color: var(--tblr-bg-forms) !important;
    border-right: var(--tblr-border-width) solid var(--tblr-border-color) !important;
    

}
.cm-s-material-darker .CodeMirror-guttermarker, .cm-s-material-darker .CodeMirror-guttermarker-subtle, .cm-s-material-darker .CodeMirror-linenumber {
    color: color-mix(in srgb, var(--tblr-secondary) calc(var(--tblr-text-opacity) * 100%), transparent) !important;
}
.cm-s-material-darker .CodeMirror-activeline-background {
    background:var(--tblr-bg-surface) !important;
}


.blobbing {
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  animation: morph 10s ease-in-out infinite;
}
/* Organischer Blob: 3 Zwischenformen, Werte bewusst im Bereich 35–65 % (nie zu eckig, nie ganz rund)
   → weiche, nicht-repetitive Verformung. 0 % und 100 % identisch = nahtlose Schleife. */
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  33%      { border-radius: 58% 42% 40% 60% / 55% 55% 45% 45%; }
  66%      { border-radius: 45% 55% 55% 45% / 60% 45% 55% 40%; }
}

/* Plyr — Akzentfarbe an den Brand-Primary koppeln (entspricht Tablers _plyr.scss-Override, das in einem
   vollen Tabler-Build in tabler-vendors.min.css landet; unsere vendored Version ist ein Teil-Build ohne
   diese Zeile). Die Haupt-Plyr-CSS lädt separat aus dem Vendor (vendor/plyr/…/plyr.css). */
body { --plyr-color-main: var(--tblr-primary); }
/* ── Hilfebox-Listen (CMS-Muster „Hilfebox", IW 23.07.2026): Pfeil-Bullet etwas vom Text
      abrücken — .fa-li endet sonst bündig am Textbeginn. ── */
.cl-hilfe-liste .fa-li { transform: translateX(-.45em); }

/* ── Toasts (cms_toast.js, unten rechts): deutliche Abhebung vom Seitenhintergrund — auf
      gleichfarbigen Flächen (z.B. Cards in Seitenfarbe) verschwammen sie sonst. Kräftiger
      Schatten + 1px-Kontur in der Theme-Border-Farbe. ── */
#cl-toasts .toast {
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .35), 0 0 0 1px var(--tblr-border-color);
}

/* Übernahme-Banner (Root-Werkzeug „Zugang übernehmen", IW 03.08.2026): fixiert über die volle
   Seitenbreite ganz oben — auch über der Sidebar. Der body-Ausgleich (padding) und der
   Sidebar-Offset halten den Rest der Seite unverdeckt; einzeilig (text-truncate im Markup). */
.cl-uebernahme-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1085;
    /* bg-warning-lt ist (im Dark-Theme) transparent — als Fixed-Banner muss die Fläche DECKEND
       sein, sonst scheint der Seiteninhalt durch: Warnton solide auf den Body-Grund gemischt. */
    background-color: color-mix(in srgb, var(--tblr-warning) 18%, var(--tblr-body-bg)) !important;
}
body.cl-uebernahme-aktiv { padding-top: 2.75rem; }
body.cl-uebernahme-aktiv .navbar-vertical { top: 2.75rem; }

/* Dropzone des generischen Medien-Widgets (cms_medien.js; Box-Markup: render/cms/partials/
   medien_box.php) — EINE Quelle statt sechs View-Style-Kopien (Konsolidierung 03.08.2026). */
.cl-dropzone{border:var(--tblr-border-width) dashed var(--tblr-border-color);border-radius:var(--tblr-border-radius);background:var(--tblr-bg-forms);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.cl-dropzone:hover{border-color:var(--tblr-primary)}
.cl-dropzone.cl-dragover{border-color:var(--tblr-primary);background:var(--tblr-active-bg)}
.cl-dropzone > *{pointer-events:none} /* Klick/Drag treffen immer die Zone, nicht die Kinder */

/* Trennlinien (hr) CMS-weit in der Card-Border-Farbe (IW 05.08.2026): Tablers Default-hr
   (currentcolor + Opacity) wirkte je Kontext dunkler/heller als die Karten-Ränder — hr soll
   IMMER wie die übrigen Borders der Cards aussehen (--tblr-border-color-translucent, wie die
   Karten selbst; Opacity neutralisiert). */
hr {
    border-top-color: var(--tblr-border-color-translucent);
    opacity: 1;
}

/* Linke Bereichs-Navigation CMS-WEIT sticky (IW 05.08.2026): der card-body, der ein
   bereichs_nav-Partial trägt ([data-cl-bereichs-nav]), scrollt auf Desktop mit — Navigation +
   Warnmarker bleiben bei langen Panes im Blick. Nur ab md (mobil ist die Nav ein Dropdown über
   dem Inhalt, dort wäre sticky nur im Weg). */
@media (min-width: 768px) {
    .card-body:has(> [data-cl-bereichs-nav]) {
        position: sticky;
        top: 0;
        align-self: flex-start;
    }
}

/* Editor-Platzhalter der Fallback-Felder (IW 05.08.2026, Objekt-Maske: Box-EnVKV zeigt die
   allgemeinen Angaben gedimmt an): EIGENER Mechanismus statt Engine-Option — die ist im
   Inline-Modus unzuverlässig und init-fix; hier live änderbar. Sichtbar, solange der Wrapper
   .cl-editor-leer trägt (JS pflegt die Klasse) und der Body ein data-cl-ph hat. */
.cl-editor-field.cl-editor-leer .cl-editor-body[data-cl-ph]::before {
    content: attr(data-cl-ph);
    color: var(--tblr-secondary);
    opacity: .7;
    pointer-events: none;
}

/* Slide-Vorschau in der Slider-Arbeitsliste (IW 06.08.2026): Höhe wie avatar-sm (Zeile bleibt
   flach), Breite doppelt — Slides sind querformatig, quadratisch beschnitten erkennt man das
   Motiv kaum. Rechnet mit Tablers Größen-Variable, folgt also einer geänderten Avatar-Stufe. */
.cl-slider-thumb.avatar {
    width: calc(var(--tblr-avatar-size) * 2);
}

/* Dezente Icon-Aktion in Listenzeilen (IW 06.08.2026): nur das Glyph, kein Button-Rahmen — der
   volle .btn-Look war neben Titel und Vorschau zu dominant. Kontur erst beim Hovern (Farbe), das
   Ziel bleibt aber die volle .btn-icon-Fläche. */
.cl-icon-aktion {
    border-color: transparent;
    background-color: transparent;
    color: var(--tblr-secondary);
}
.cl-icon-aktion:hover,
.cl-icon-aktion:focus-visible {
    border-color: transparent;
    background-color: transparent;
    color: var(--tblr-body-color);
}

/* Slide-Zeilen der Slider-Arbeitsliste sind als Ganzes klickbar (JS in slider_bearbeiten.php) —
   das list-group-item ist ein <div>, trägt also von sich aus keinen Zeiger. */
[data-cl-slider-item][data-href] { cursor: pointer; }

/* Stillgelegte Slide-Zuordnung (Schalter aus, IW 06.08.2026): die Zeile bleibt lesbar, tritt aber
   zurück — sie gehört weiter zum Slider, spielt dort nur nicht aus. Der Schalter selbst bleibt
   voll sichtbar, sonst wäre der Weg zurück schwer zu finden. */
[data-cl-slider-item].cl-slider-item-aus > *:not(.form-check) { opacity: .45; }

/* Lightbox-Auslöser CMS-WEIT als Zoom kenntlich (IW 06.08.2026): alles mit [data-fslightbox] und
   echtem Ziel öffnet die Großansicht. `href="#"` ist der Leer-Zustand (z.B. Bild-Vorschau ohne
   Bild) — dort bleibt der normale Zeiger. */
[data-fslightbox]:not([href="#"]) { cursor: zoom-in; }

/* Bild-Vorschau im Original-Seitenverhältnis (Sektions-Hintergrund, IW 06.08.2026): nur gedeckelt,
   kein fester Rahmen — ein Hintergrundbild ist selten quadratisch. Ohne Bild greift die
   gestrichelte „+"-Fläche des Medien-Musters (.avatar.avatar-upload). */
.cl-bild-vorschau { cursor: pointer; }
.cl-bild-vorschau img {
    max-width: 14rem;
    max-height: 7rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Unvollständige Bild-Wahl (Hintergrund „Bild" ohne Bild): die Kachel zeigt die Lücke, das
   Speichern ist derweil gesperrt (cms_seiten_inhalt.js). */
.cl-bild-vorschau-fehlt {
    border: 1px dashed var(--tblr-danger);
    color: var(--tblr-danger);
}

/* ── Icon-Picker (cms_icon_picker.js, IW 06.08.2026) ─────────────────────────────────────────
   NAHTLOSES Raster statt einzeln umrandeter Kacheln: Der Grid-Container trägt die Linienfarbe als
   Hintergrund, die Zellen decken ihn bis auf die 1px-Lücke wieder ab (`gap: 1px`) — dadurch
   entsteht ein durchgehendes Gitternetz mit exakt EINER Linie zwischen zwei Zellen (aneinander-
   gesetzte Rahmen ergäben doppelte Linien). Der 1px-Rahmen außen schließt das Raster ab.
   `auto-fill` füllt die Modalbreite selbst auf; die Spaltenzahl ergibt sich aus der Fensterbreite. */
.cl-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
    gap: 1px;
    background: var(--tblr-border-color);
    border: 1px solid var(--tblr-border-color);
}

/* Zelle: randlos, deckt den Container-Hintergrund ab. `content-visibility` (im JS gesetzt) hält
   das Rendern auch bei mehreren tausend Zellen flüssig. */
.cl-icon-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    background: var(--tblr-bg-surface);
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.cl-icon-cell:hover,
.cl-icon-cell:focus-visible {
    background: var(--tblr-primary);
    color: #fff;
    outline: none;
}

/* Icons IM RICHTEXT-EDITOR (Lane A) als anklickbares Objekt kenntlich machen (IW 06.08.2026).
   Ein Icon-Tag hat keinen Textinhalt — ohne diesen Hinweis wirkt es wie ein Zeichen, das man
   nicht zu fassen bekommt. Klick selektiert es (cms_editor.js), Doppelklick öffnet den Picker;
   der gestrichelte Rahmen beim Überfahren macht genau das sichtbar. Nur im Editor, nicht im
   ausgelieferten Content (Scope: [data-cl-editor-body]). */
[data-cl-editor-body] i[class*="fa-"] {
    cursor: pointer;
}
[data-cl-editor-body] i[class*="fa-"]:hover {
    outline: 1px dashed var(--tblr-primary);
    outline-offset: 2px;
}

/* Aktuell gesetztes Icon beim AUSTAUSCHEN (Doppelklick im Editor): im Raster markiert, damit man
   sieht, wo man steht — der Picker scrollt zusätzlich dorthin. Kräftiger als der Hover, damit die
   Markierung beim Überfahren der Nachbarn nicht verloren geht. */
.cl-icon-cell.is-active {
    background: var(--tblr-primary);
    color: #fff;
    box-shadow: inset 0 0 0 2px var(--tblr-bg-surface);
}

/* Extrafett-Button des Richtext-Editors (clbolder): ein echtes „B" in maximaler Fettung statt
   eines Icons — er steht direkt neben dem normalen Bold-Button, der Unterschied muss auf einen
   Blick lesbar sein (IW 06.08.2026). */
.tox .tox-tbtn[data-mce-name="clbolder"] .tox-tbtn__select-label,
.tox .tox-tbtn[data-mce-name="clbolder"] {
    font-weight: 900;
    font-size: 1.05rem;
}

/* Zweite Fettungsstufe im Richtext-Editor sichtbar machen (IW 06.08.2026): Lane A läuft INLINE im
   CMS-DOM, dort gilt custom.css statt der Frontend-theme.css — ohne diese Regel sähe der Redakteur
   im Editor keinen Unterschied zu normalem Fett. Gleicher Wert wie im Frontend (theme.css). */
.cl-fw-black { font-weight: 900; }

/* Farb-Rollen-Swatch im Referenz-Dropdown der Themeeinstellungen (cms_theme_farben.js):
   kleiner Farbkreis vor dem Rollen-Namen; die Farbe setzt das JS beim Öffnen aus den
   AKTUELLEN Maskenwerten (nicht statisch — ungespeicherte Änderungen zählen mit). */
.cl-farbe-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--tblr-border-color);
    flex: 0 0 auto;
}

/* Farb-Picker der Themeeinstellungen: QUADRATISCH statt flex-gedehnt (IW 07.08.2026) — in einer
   input-group wächst jedes .form-control mit; die Farbfläche soll aber nur ein kompakter
   1:1-Knopf neben dem Wertfeld sein. Breite ≈ Feldhöhe (Tabler-Input ~2.4rem). */
[data-cl-farbe] [data-cl-farbe-picker] {
    flex: 0 0 auto;
    width: 2.5rem;
    padding: 0.3rem;
}

/* Range-Slider (Tabler .form-range, erste CMS-Nutzung: Grundrundungs-Slider der Theme-Maske):
   Tabler gibt dem Daumen einen 2px-WEISSEN Rand — im Dark-Theme ein heller Ring um den
   Primary-Punkt. Rand weg, die box-shadow-Kante von Tabler genügt (IW 07.08.2026). */
.form-range::-webkit-slider-thumb { border: 0; }
.form-range::-moz-range-thumb     { border: 0; }