/* ============================================================
   UDM Navigation v2026
   Neues Navigationskonzept: Tab-Karten + Sidebar + zweizeiliger Content-Header

   Layout:
     .udm2026-root             — aeusserster Container (Flex column)
       .udm2026-appbar         — Tab-Bar oben (Home + Tab-Karten + Zurueck + User/Notif)
       .udm2026-body           — Sidebar + Content (Flex row)
         .udm2026-sidebar      — Baum des aktiven Tabs
         .udm2026-content      — Content-Header + Subdialog-Bar + Toolbar + Form

   Farben werden aus Bootstrap-Variablen (--bs-primary, --bs-secondary-color,
   --bs-border-color) abgeleitet. Kontext-Farben (App/System/Verwaltung) und
   Element-Typ-Farben sind hier als CSS-Custom-Properties gekapselt.
   ============================================================ */

:root {
    /* Die Höhe der Kopfleiste (AppBar Z1). Steht hier und nicht mehr an der Leiste selbst,
       weil auch Bausteine außerhalb der Leiste sie brauchen: Das angedockte Konfig-Fenster
       (UdmKonfigSidebarControl) beginnt darunter, damit die Modus- und Container-Karte in der
       Leiste sichtbar bleiben. Bis zum 11.09.2026 stand der Wert als Inline-Style am
       AppBar-Wrapper, und das Fenster deckte die Leiste ab. */
    --udm2026-appbar-height: 3.8em;

    /* Farbschema-Tokens.
       WICHTIG: Variablen, deren Wert direkt von --bs-primary-rgb abhaengt,
       werden NICHT hier als Zwischenvariablen angelegt. Grund: Die Custom-
       Primaerfarbe wird via JS auf document.body gesetzt (siehe scripts.js
       SetPrimaryColor). CSS Custom Properties mit nested var() in :root
       loesen das innere var() nicht zuverlaessig im body-Scope auf — damit
       wuerden AppBar/Sidebar beim Custom-Theme auf dem Default-Blau haengen.
       Loesung: rgba(var(--bs-primary-rgb), X) direkt an der Verwendungsstelle. */
    --udm2026-toolbar-bg: var(--bs-light-border-subtle);
    --udm2026-tab-inactive-opacity: 0.8;
    --udm2026-tab-radius: 4px;
    --udm2026-tab-stripe-width: 4px;
    /* === Element-Typ- + Kontext-Farben — zentral aus udm_colors.css ===
       Vorher hatte diese Datei eigene Hex-Werte; das fuehrte zu Inkonsistenzen
       mit Baum/Liste (siehe udm_admin.css:2052ff. + AppStructureTreeNodeControl).
       Single Source of Truth ist jetzt udm_colors.css — hier nur Mapping auf
       die 2026-Variablennamen, damit alter Selektor-Code unveraendert weiterlaeuft.
       *-bg-Pendants via color-mix; ergibt automatisch den passenden Tint zur
       aktuellen Vollfarbe. */

    /* Kontext-Farben fuer Tab-Karten (App / System / Verwaltung) */
    --udm2026-ctx-app:      var(--udm-type-app);
    --udm2026-ctx-sys:      var(--udm-type-system);
    --udm2026-ctx-sys-bg:   color-mix(in srgb, var(--udm-type-system) 10%, transparent);
    --udm2026-ctx-mgmt:     var(--udm-ctx-mgmt);
    --udm2026-ctx-mgmt-bg:  color-mix(in srgb, var(--udm-ctx-mgmt) 10%, transparent);

    /* Element-Typ-Farben (Content-Header + Sidebar-Icon-Toenung + Breadcrumb) */
    --udm2026-type-dlg:     var(--udm-type-dialog);
    --udm2026-type-ae:      var(--udm-type-view);
    --udm2026-type-ae-bg:   color-mix(in srgb, var(--udm-type-view) 10%, transparent);
    --udm2026-type-ent:     var(--udm-type-entity);
    --udm2026-type-ent-bg:  color-mix(in srgb, var(--udm-type-entity) 10%, transparent);
    --udm2026-type-ds:      var(--udm-type-datasource);
    --udm2026-type-ds-bg:   color-mix(in srgb, var(--udm-type-datasource) 10%, transparent);
    /* Job + Code: im Baum neutral (kein eigener Element-Typ in udm_colors.css).
       Hier gleiche Logik — siehe udm_admin.css:2059-2060 (icon-job / icon-report
       / icon-message / icon-mapping / icon-default → secondary-color). */
    --udm2026-type-job:     var(--bs-secondary-color);
    --udm2026-type-job-bg:  color-mix(in srgb, var(--bs-secondary-color) 10%, transparent);
    --udm2026-type-code:    var(--bs-secondary-color);
    --udm2026-type-code-bg: color-mix(in srgb, var(--bs-secondary-color) 8%, transparent);
}

/* ============================================================
   ROOT LAYOUT
   ============================================================ */
.udm2026-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bs-body-bg);
}

.udm2026-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow: hidden;
}


/* ============================================================
   APPBAR-WRAPPER — Klammert Z1 (Tabs) und das User-Menu.
   Die Hoehe --udm2026-appbar-height kommt aus :root (oben) und gilt damit
   fuer Backdrop, User-Menu UND das angedockte Konfig-Fenster.
   ============================================================ */
.udm2026-appbar-wrapper {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Kein Hintergrund mehr am Wrapper — die AppBar (Z1) traegt ihren eigenen,
       einfarbigen Primary-Tint. Es gibt keine Z2 mehr; der PageTitle ist in den
       PageHeader gewandert. */
}

/* ============================================================
   APPBAR Z1 — Home | Tab-Karten | Notif | User
   Einfarbiger, deutlich sichtbarer Primary-Tint. Keine Trennlinie nach unten —
   die AppBar geht fliessend in den PageHeader ueber.
   ============================================================ */
.udm2026-appbar {
    display: flex;
    align-items: stretch; /* Kinder strecken sich auf gleiche Hoehe */
    padding: 0.5em 0.5em;
    gap: 0.4em;
    background: rgba(var(--bs-primary-rgb), 0.38);
    flex-shrink: 0;
    /* Fixe Mindesthoehe — sonst schrumpft die AppBar, wenn der Breadcrumb
       (zweizeilig: Type + Name) leer ist und kein hohes Geschwister-Element
       (User-Block / Sidebar-Toggle / Notif) die Höhe traegt. */
    min-height: var(--udm2026-appbar-height, 3.8em);
}

/* AdminClient-Marker: 2px-Linie am oberen Rand grenzt den AdminClient
   visuell vom UserClient ab. Reine Markierung — keine Layout-Wirkung
   auf Kinder, da Hoehenverschiebung um 2px irrelevant ist. */
.udm2026-appbar--admin {
    border-top: 4px solid var(--bs-primary);
}

/* App-Aktionen (UserClient): Button-Gruppe rechtsbuendig vor Notif/User.
   margin-left:auto ist robust — falls der Breadcrumb waechst, ist es ein No-op,
   sonst schiebt es die Gruppe (samt Notif/User) nach rechts. */
.udm2026-appbar-actions {
    display: flex;
    align-items: stretch;
    gap: 0.4em;
    margin-left: auto;
}

.udm2026-appbar-action-btn {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 0.8em;
    border-radius: var(--udm2026-tab-radius);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    white-space: nowrap;
}

.udm2026-appbar-action-btn:hover {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
}

.udm2026-home {
    /* Rahmenlos: nur das Haus-Icon. Volle Hoehe via align-self:stretch,
       damit das Icon optisch auf der Hoehe der Tab-Karten sitzt (kein
       quadratischer Kasten mehr, der kleiner als die zweizeiligen Tabs wirkt). */
    align-self: stretch;
    aspect-ratio: 1 / 1;
    border-radius: var(--udm2026-tab-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 1.1em;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    background: rgba(var(--bs-primary-rgb), 0.08);
}
.udm2026-home:hover {
    background: rgba(var(--bs-primary-rgb), 0.28);
    color: var(--bs-primary);
}

.udm2026-cards {
    display: flex;
    gap: 0.4em;
    flex: 1 1 auto;
    /* overflow-x:auto wuerde overflow-y auch zu "auto" zwingen — dann waere das
       Root-Karten-Dropdown unten abgeschnitten und nur eine Scrollbar sichtbar.
       overflow-x:clip erlaubt overflow-y:visible (modernes CSS, Chromium/Edge). */
    overflow-x: clip;
    overflow-y: visible;
    padding: 0 0.15em;
    min-width: 0;
}

/* ------------ Tab-Karte (Split-Button-Layout) ------------
   Aufbau:
     [ .main ] | [ .right-col ]
       .main         — Icon + Name (+ Type bei AdminClient)  -> Tab aktivieren
       .splitter     — vertikale Trennlinie
       .right-col    — Spalte mit zwei Klick-Zonen:
         .close      — oben:  alle Seiten der Gruppe schliessen
         .hsplitter  — feine horizontale Trennlinie (mit Aussen-Margin)
         .drop       — unten: Zahl + Chevron, Dropdown der offenen Seiten
*/
.udm2026-card {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--udm2026-tab-radius);
    background: var(--bs-body-bg);
    /* 2px Rahmen — bei inaktiven Karten transparent, damit die Hoehe konstant
       bleibt wenn die aktive Karte den Kontext-Rahmen einblendet. */
    border: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    opacity: var(--udm2026-tab-inactive-opacity);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: opacity 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
}
.udm2026-card:not(.active) {
    border-color: rgba(0, 0, 0, 0.06);
}
.udm2026-card:hover {
    opacity: 0.95;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}
.udm2026-card.active {
    opacity: 1;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    /* Gleicher Hintergrund wie Home-Button (Body-BG) — hebt die aktive Karte
       klar vom primary-getoenten AppBar-Hintergrund ab. Rahmen in Primary-
       Farbe fuer alle Kontexte (einheitliche Aktiv-Kennung). */
    background: var(--bs-body-bg);
    border-color: var(--bs-primary);
}

/* Linke Klick-Zone — Tab aktivieren */
.udm2026-card .main {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.65em 0.6em 0.65em 0.4em;
    cursor: pointer;
    min-width: 0;
    transition: background 0.12s;
}
.udm2026-card .main:hover {
    background: rgba(var(--bs-primary-rgb), 0.05);
}

/* Icon-Well links: einheitlicher Container fuer FA-Icon oder GroupImage.
   Zwei Modifier:
     .icon  — FA-Icon; Aktive Karte faerbt das Well in Kontextfarbe ein.
     .image — Bild-Icon (byte[] GroupImage); Well bleibt neutral, Bild
              unveraendert (KEINE Color-Filter), Aktiv-Marker nur via Border. */
.udm2026-card-well {
    width: 2em;
    height: 2em;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 1em;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.udm2026-card-well.image {
    background: var(--bs-body-bg);
    padding: 0.15em;
}
.udm2026-card-well img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Legacy-Klasse auf das Bild im Well — jetzt full-size statt 1em. */
.udm2026-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Text-Spalte (Type + Name untereinander). */
.udm2026-card .text-col {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.udm2026-card .type {
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.udm2026-card .type.ctx-app { color: var(--udm2026-ctx-app); }
.udm2026-card .type.ctx-sys { color: var(--udm2026-ctx-sys); }
.udm2026-card .type.ctx-mgmt { color: var(--udm2026-ctx-mgmt); }
.udm2026-card:not(.active) .type { opacity: 0.65; }

.udm2026-card .name {
    font-size: 0.9em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12em;
    line-height: 1.2;
}
.udm2026-card.active .name {
    color: var(--bs-body-color);
    font-weight: 700;
}

/* Vertikale Trennlinie zwischen Main und rechter Spalte */
.udm2026-card .splitter {
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0.25em 0;
    align-self: stretch;
    flex-shrink: 0;
}
.udm2026-card.active .splitter {
    background: rgba(var(--bs-primary-rgb), 0.25);
}

/* Rechte Spalte: Close oben, Drop unten */
.udm2026-card .right-col {
    display: flex;
    flex-direction: column;
    min-width: 2.4em;
    align-self: stretch;
}

/* Feine horizontale Trennlinie zwischen Close und Drop —
   bewusst sehr dezent, mit seitlichem Abstand, damit sie weder den
   vertikalen Splitter links noch den Karten-Rand rechts beruehrt. */
.udm2026-card .hsplitter {
    height: 1px;
    background: rgba(0, 0, 0, 0.04);
    margin: 0 0.5em;
    flex-shrink: 0;
}
.udm2026-card.active .hsplitter {
    background: rgba(var(--bs-primary-rgb), 0.10);
}

/* Close-Zone (obere Haelfte der rechten Spalte) */
.udm2026-card .close {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15em 0.3em;
    cursor: pointer;
    color: var(--bs-secondary-color);
    opacity: 0.55;
    transition: background 0.12s, color 0.12s, opacity 0.12s;
    font-size: 0.8em;
    line-height: 1;
}
.udm2026-card:hover .close { opacity: 0.85; }
.udm2026-card .close:hover {
    opacity: 1;
    background: #dc3545;
    color: #fff;
}

/* Drop-Zone (untere Haelfte): Zahl + Chevron nebeneinander */
.udm2026-card .drop {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 0.15em 0.3em;
    cursor: pointer;
    color: var(--bs-secondary-color);
    transition: background 0.12s, color 0.12s;
}
.udm2026-card .drop:hover {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}
.udm2026-card.active .drop { color: var(--bs-primary); }
.udm2026-card .drop .num {
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
}
.udm2026-card .drop .chev {
    font-size: 0.6em;
    line-height: 1;
    opacity: 0.85;
}

/* ------------ Zurueck-Button (neutral / cross-tab orange) ------------ */
.udm2026-back {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.7em;
    border-radius: var(--udm2026-tab-radius);
    cursor: pointer;
    background: var(--bs-body-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    margin-left: 0.5em;
    transition: background 0.12s, border-color 0.12s;
}
.udm2026-back:hover {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
}
.udm2026-back.cross {
    background: rgba(253, 126, 20, 0.06);
    border-color: rgba(253, 126, 20, 0.2);
}
.udm2026-back.cross:hover {
    background: rgba(253, 126, 20, 0.12);
    border-color: rgba(253, 126, 20, 0.38);
}
.udm2026-back i { color: var(--bs-secondary-color); font-size: 0.9em; }
.udm2026-back:hover i { color: var(--bs-primary); }
.udm2026-back.cross i { color: #b45309; }

.udm2026-back .info { display: flex; flex-direction: column; line-height: 1.2; }
.udm2026-back .type {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--bs-tertiary-color, #9ba3ab);
    display: flex;
    align-items: center;
    gap: 0.2em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.udm2026-back .type i { font-size: 0.9em; }
.udm2026-back .name {
    font-size: 0.9em;
    color: var(--bs-body-color);
    font-weight: 500;
}


/* ============================================================
   PAGEHEADER — Ersetzt die frueheren Ebenen "PageHeader" (Typ/Name/Save/Close),
   "AppBar-Z2" (Breadcrumb) und "SubdialogBar" (Pills) in einer Struktur:

     [LEFT] Zeile 1: Back-Chip · Typ · Titel · Meta            │  [💾] [💾↩] │ [⋯] [✕]
            Zeile 2: Primary-Tab-Reiter + Sekundaer-Pills         (Close ganz rechts aussen)

   Unten durch 2px primary-Linie vom Content getrennt (= Tab-Grundlinie).
   ============================================================ */
.udm-pageheader {
    display: flex;
    align-items: stretch;
    /* bs-light — gleiche Farbe wie Sidebar + Page-Toolbar. Die 2px primary
       Linie unten trennt zum Content (bzw. zur Toolbar darunter). */
    background: var(--bs-light);
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.8);
    min-height: 3.8em;
    flex-shrink: 0;
}

/* Pane-Sheet — Content-Bereich unterhalb der Toolbar eines DxSplitterPanes.
   0.5rem Padding + inset-Shadow schafft einen "Arbeitsblatt"-Look rundum.
   Die Toolbar sitzt OBERHALB dieses Sheets und klebt am Pane-Oberrand —
   sie gehoert bewusst NICHT ins Sheet (Toolbars "kleben oben" als
   Navi-Band, Sheet ist das Content-Blatt darunter). Flex-Layout damit das
   Sheet die verbleibende Hoehe im Pane einnimmt. */
.udm-pane-sheet {
    padding: 0.5rem;
    box-shadow: inset 0 0 5px 1px #cccccc;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Single-Line-Variante: keine Tab-Zeile vorhanden → keine primary-Linie noetig.
   Wird gerendert, wenn die Seite keine Subdialoge hat. */
.udm-pageheader.single-line {
    border-bottom: 1px solid var(--bs-border-color);
    min-height: 2.8em;
}
.udm-pageheader.single-line .udm-pageheader-right {
    justify-content: center;
    padding-bottom: 0.3em;
}

/* Rechts: ⋯-Menu + Save + SaveClose + Close. position: relative fuer das Popup,
   das sich an diesem Container orientiert. Close steht ganz rechts aussen. */
.udm-pageheader-right-actions {
    display: flex;
    align-items: center;
    padding: 0.35em 0.5em;
    gap: 0.2em;
    flex-shrink: 0;
    position: relative;
}
.udm-pageheader-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7em;
    height: 2.7em;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font-size: 0.95em;
    transition: background 0.12s, color 0.12s;
}
.udm-pageheader-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}
.udm-pageheader-btn.close-action:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

/* ============================================================
   ZWEI-ZONEN WORK-ZONE (§5b) — "Handeln"-Zone
   Vorzeile (Reiter — nutzt .udm-pageheader-tabs) + Werkzeug/Lifecycle-Zeile.
   PHASE 1: ruhendes Geruest. Markup folgt in Phase 2 (Udm2026PageHeader).
   Lifecycle-Buttons nutzen .udm-pageheader-btn (oben).
   ============================================================ */
.udm-workzone {
    display: flex;
    flex-direction: column;
    background: var(--bs-light);
    flex-shrink: 0;
    /* Hoist (§5b.7): die VE-Kopfzeile sitzt jetzt hier oben (DOM VOR dem Content),
       ihre nach unten oeffnenden Dropdowns (Vordef.-Filter/Schnellfilter) wuerden sonst
       hinter dem Content liegen. Eigener Stacking-Context hebt die Work-Zone darueber. */
    position: relative;
    z-index: 20;
}
/* Trennlinie zum Content: OHNE Reiter eine dezente 1px-Linie an der Work-Zone;
   MIT Reitern traegt sie Zeile 1 (volle Breite, vom aktiven Reiter ueberdeckt — s.u.). */
.udm-workzone.no-vorzeile {
    border-bottom: 1px solid var(--bs-border-color);
}

/* ===== Zeile 1: [ links: Reiter / VE-Header / Form-Tools ] [ Lifecycle (rechts) ] ===== */
/* Der linke und rechte Rand kommt aus der gemeinsamen Marke, NICHT aus einer zweiten
   Zahl an dieser Stelle. Vorher stand hier 0.4em und in den Werkzeug-Zeilen darunter ein
   anderer Wert; die Differenz wurde am Auswahl-Knopf mit einem negativen Rand
   ausgeglichen. Das war der Fehler: Für einen Abstand gibt es genau EINEN Eigentümer
   (PO 19.08.2026). Der Wert ist derselbe wie vorher, es ändert sich nichts im Bild. */
.udm-workzone-row1 {
    display: flex;
    align-items: center;
    min-height: 2.8em;
    padding: 0 var(--udm-werkzeug-rand);
    gap: var(--udm-werkzeug-rand);
}
/* Mit Reitern: Zeile 1 traegt die primary-Grundlinie ueber die VOLLE Breite (der aktive
   Reiter ueberdeckt sie via ::after), und alle Kinder sitzen unten auf der Linie. */
.udm-workzone:not(.no-vorzeile) .udm-workzone-row1 {
    align-items: flex-end;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.8);
}
/* Linker Bereich gibt Platz ab (min-width:0) → die Reiter verdraengen die Lifecycle-Buttons
   NIE. overflow-x:clip kappt horizontalen Reiter-Ueberlauf (Buttons bleiben sichtbar),
   overflow-y:visible laesst nach unten oeffnende Dropdowns + das aktive-Reiter-::after
   austreten. (Anzahl zusaetzlich via ⋯-Overflow-Popup begrenzt.) */
.udm-workzone-row1-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow-x: clip;
    overflow-y: visible;
}
/* Lifecycle: unantastbar rechts — nie schrumpfen, immer voll sichtbar; vertikal zentriert
   (auch wenn Zeile 1 mit Reitern unten ausgerichtet ist). */
.udm-workzone-lifecycle {
    display: flex;
    align-items: center;
    gap: 0.2em;
    flex: 0 0 auto;
    align-self: center;
    position: relative;   /* Anker fuer das ⋯-Popup */
}

/* Menue-VE (keine Reiter): die VE-Kopfzeile steht in Zeile 1 und waechst beim Aufklappen
   des Schnellfilters nach UNTEN. Damit die PageActions dabei NICHT mitwandern, oben
   ausrichten — Lifecycle bleibt auf Hoehe der VE-Toolbar-Zeile stehen. */
.udm-workzone.no-vorzeile .udm-workzone-row1 {
    align-items: flex-start;
}
.udm-workzone.no-vorzeile .udm-workzone-lifecycle {
    align-self: flex-start;
    /* vertikal auf die VE-Toolbar-Zeile (Hoehe ~ min-height der Zeile) einmitten */
    min-height: 2.8em;
}

/* ============================================================================
   Werkzeuge stehen in ihrer Fläche (PO 19.08.2026)

   Der Trenner teilt seit dem 19.08.2026 auch die Werkzeuge: Die Leiste des
   Hauptdialogs sitzt im linken Bereich, Umschalter und Werkzeuge des Unterdialogs im
   rechten. Vorher lagen alle drei in einer Zeile über die volle Breite; die erste
   Gruppe verdrängte dort die anderen aus dem Bild, und bei wenig Platz brach sie um.

   EINE Marke für die Höhe der jeweils ersten Leiste. Nur so bilden die Unterkanten
   links und rechts des Trenners eine durchgehende Linie.
   Prototyp: docs/04_design/prototypes/konfig-werkzeugzone-getrennt.html
   ============================================================================ */
:root {
    --udm-werkzeugzeile-hoehe: 2.6em;

    /* Innenabstand aller Werkzeug-Zeilen, RUNDUM derselbe Wert, und zugleich der Rand der
       Reiter-Zeile (.udm-workzone-row1). EIN Eigentümer für diesen Abstand — steht der Wert
       an zwei Stellen, endet es in einem negativen Rand (PO 19.08.2026).

       Warum 0.5em (PO 21.08.2026): fluchtet mit der ersten Spalte des Grids darunter.
       Bewusst NICHT an die Dichte gekoppelt: Die Marke trägt auch Reiter-Zeile und die
       Zeilen des rechten Bereichs, die keine VE-Dichte kennen.

       Untergrenze beachten: Der Abstand ist auch der PLATZ für das, was über die Kante
       der Bedienelemente hinausragt — der Ring des geöffneten Auswahl-Knopfes und der
       Schatten der Auswahlliste. */
    --udm-werkzeug-rand: 0.5em;
}

/* Werkzeuge des Hauptdialogs, erste Zeile im linken Bereich.
   min-height statt height: Im Normalfall ist die Zeile damit exakt so hoch wie die
   Auswahl-Zeile rechts, das Raster läuft durch. Trägt sie aber die Kopfzeile eines
   Ansichtselements (Filter, Schnellfilter, Neu), darf sie wachsen, statt deren Inhalt
   abzuschneiden. */
.udm-pane-werkzeuge {
    display: flex;
    align-items: center;
    gap: 0.4em;
    min-height: var(--udm-werkzeugzeile-hoehe);
    /* Luft zum Rand, rundum derselbe Wert. */
    padding: var(--udm-werkzeug-rand);
    flex: 0 0 auto;
    min-width: 0;
    background: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
    /* Wie zuvor an der Work-Zone: Die Kopfzeile eines Ansichtselements öffnet ihre
       Auswahllisten nach unten. Ohne eigenen Stapel-Zusammenhang lägen sie hinter dem
       Inhalt darunter.

       10 und nicht 20: Die Work-Zone darüber liegt auf 20 (siehe .udm-workzone). Bei
       Gleichstand gewinnt das spätere Element im Aufbau, also diese Leiste — dann
       verschwand die geöffnete Auswahlliste des Umschalters dahinter. Über dem Inhalt
       darunter liegt die Leiste mit 10 weiterhin. */
    position: relative;
    z-index: 10;
}

/* Der Inhalt der Leiste darf schrumpfen. min-width: 0 ist der eigentliche Schalter:
   Ein Flex-Kind schrumpft sonst nie unter seine Inhaltsbreite, und die Werkzeug-Leiste
   steht auf width: 100% mit flex-wrap: wrap (udm_buttons.css). Ohne die Regel bricht
   sie um, statt auf Icons zurückzufallen — das tut sie ab 700 Pixel Container-Breite
   von selbst (udm_buttons.css, Block "Haupt-Toolbar"). */
.udm-pane-werkzeuge > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* Werkzeuge des offenen Unterdialogs, zweite Zeile im rechten Bereich. Bewusst OHNE
   feste Höhe: Sie hat links keine Entsprechung und richtet sich nach ihrem Inhalt. */
.udm-secondary-werkzeuge {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: var(--udm-werkzeug-rand);
    flex: 0 0 auto;
    min-width: 0;
    border-bottom: 1px solid var(--udm-kf-rand, var(--bs-border-color));
}

.udm-secondary-werkzeuge > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* Reiter unten in Zeile 1 ausgerichtet; die Grundlinie traegt Zeile 1 (s.o.), nicht mehr
   der Tab-Container (sonst endete die Linie an der Reiter-Breite). ::after-Hintergrund
   = --bs-light fuer den nahtlosen Uebergang in Zeile 2/Content. */
.udm-workzone .udm-pageheader-tabs {
    align-self: flex-end;
    padding: 0.3em 0.2em 0;
}
.udm-workzone .udm-tab.active::after {
    background: var(--bs-light);
}

/* Rechts: zweizeiliger Bereich (Titel-Zeile + Tab-Zeile). */
.udm-pageheader-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.3em 0.6em 0;
    gap: 0.3em;
}
/* Breadcrumb-Variante 2: eigene Hintergrund-Leiste mit dezenter Schrift,
   damit der Breadcrumb visuell klar von der Tab-Zeile darunter getrennt ist
   (Prototyp: docs/04_design/prototypes/breadcrumb-konzepte.html, Variante 2). */
.udm-pageheader-title-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0em;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Zurueck-Chip — dezent grauer Hintergrund, klickbar, Typ-Kuerzel + Parent-Name */
.udm-pageheader-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.5em;
    background: rgba(0,0,0,0.04);
    color: var(--bs-secondary-color);
    font-size: 0.82em;
    border-radius: 14px;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 28%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s, color 0.12s;
}
.udm-pageheader-back:hover {
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary);
}
.udm-pageheader-back i { font-size: 0.75em; opacity: 0.7; }
.udm-pageheader-back .back-type {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

/* Typ-Indikator als Breadcrumb-Link (Variante 2): kein Pille-Hintergrund,
   nur Typ-Farbe als Text. Der currentColor-basierte Hintergrund entfaellt,
   damit die kompakte Sub-Bar nicht von einem Bunten-Pill dominiert wird. */
.udm-pageheader-type {
    font-size: 0.95em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.udm-pageheader-type.type-ae   { color: var(--udm2026-type-ae); }
.udm-pageheader-type.type-dlg  { color: var(--udm2026-type-dlg); }
.udm-pageheader-type.type-ent  { color: var(--udm2026-type-ent); }
.udm-pageheader-type.type-ds   { color: var(--udm2026-type-ds); }
.udm-pageheader-type.type-job  { color: var(--udm2026-type-job); }
.udm-pageheader-type.type-code { color: var(--udm2026-type-code); }
.udm-pageheader-type.ctx-app   { color: var(--udm2026-ctx-app); }
.udm-pageheader-type.ctx-sys   { color: var(--udm2026-ctx-sys); }

.udm-pageheader-title {
    font-size: 1em;
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Chevron-Separator zwischen Typ-Indikator und Title (Variante 2). */
.udm-pageheader-type + .udm-pageheader-title::before {
    content: "›";
    margin-right: 0.45em;
    color: var(--bs-secondary-color);
    opacity: 0.5;
    font-weight: 400;
}
.udm-pageheader-meta {
    font-size: 0.78em;
    color: var(--bs-secondary-color);
    opacity: 0.7;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tab-Reiter-Zeile — Primaere Reiter + Divider + Sekundaere Pills.
   KEIN overflow, damit das ::after des aktiven Tabs die primary-Linie
   ueberdecken kann. Bei sehr vielen Reitern muss der Scroll-Container
   weiter aussen liegen (noch offen). */
.udm-pageheader-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    min-height: 1.9em;
    flex-wrap: nowrap;
    overflow: visible;
    position: relative;
}

/* Hinweis: KEIN Scroll-/overflow-Wrapper um die sichtbaren Reiter. Ein solcher
   Wrapper (overflow-x: auto/clip) clippt zwingend auch vertikal und kappt damit
   das 2px nach unten austretende ::after des aktiven Reiters → die primary-
   Grundlinie liefe durchgaengig durch. Horizontaler Ueberlauf wird von
   .udm-workzone-row1-left (overflow-x: clip) begrenzt, der Zugriff auf alle
   Reiter ueber das „…"-Overflow-Popup. (Vgl. Udm2026PageHeader.razor.) */

/* Inaktiver Reiter — feiner 1px-Rahmen oben+seitlich, unten offen.
   Padding-Top +1px kompensiert den 1px duenneren Border (vs. 2px beim
   aktiven); dadurch sind Gesamthoehe und Content-Position fuer alle
   Tabs identisch, ohne negative Margin. */
.udm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: calc(0.35em + 1px) 0.85em 0.35em;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    border-radius: 0;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, border-color 0.12s;
    position: relative;
}
/* Geteilte vertikale Trennlinie zwischen benachbarten Reitern:
   1px nach links rutschen — horizontaler Margin, unkritisch. */
.udm-tab + .udm-tab { margin-left: -1px; }

.udm-tab:hover {
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
    z-index: 1;
}

/* Aktiver Reiter — 2px primary-Rahmen oben+seitlich. Ein ::after-Element
   ueberdeckt die primary-Linie GENAU zwischen den seitlichen Borders
   (left: 0 / right: 0 am Padding-Edge), sodass die vertikalen Rahmen
   nahtlos in die horizontale primary-Linie uebergehen. */
    .udm-tab.active {
        border: 2px solid rgba(var(--bs-primary-rgb), 0.8);
        border-bottom: none;
        padding: 0.35em calc(0.85em - 1px);
        color: var(--bs-primary);
        font-weight: 600;
        z-index: 2;
    }
.udm-tab.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -2px;
    height: 2px;
    /* Matcht den PageHeader-Background (bs-light-border-subtle), damit unter
       dem aktiven Tab kein heller Streifen sichtbar wird — nahtloser
       Uebergang vom Tab in die Chrome-Flaeche. */
    background: var(--bs-light-border-subtle);
}
.udm-tab .udm-tab-count {
    background: rgba(0,0,0,0.08);
    padding: 0 0.3em;
    border-radius: 8px;
    font-size: 0.78em;
    font-weight: 700;
}
.udm-tab.active .udm-tab-count {
    background: rgba(var(--bs-primary-rgb), 0.22);
    color: var(--bs-primary);
}

/* Overflow-Reiter — erscheint ab dem 6. primaeren Reiter. Traegt optional
   den Titel des zuletzt aus dem Popup gewaehlten Hidden-Tabs plus ein
   Chevron (⋯). Zwei separate Klickzonen:
     - Label: aktiviert den merked Tab und oeffnet das Popup
     - Chevron: nur Popup-Toggle
   position:relative als Anker fuer das Popup. */
.udm-tab.udm-tab-overflow {
    position: relative;
    gap: 0.4em;
    padding-left: 0.6em;
    padding-right: 0.6em;
}
.udm-tab-overflow-label {
    cursor: pointer;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.udm-tab-overflow-label:hover {
    color: var(--bs-primary);
}
.udm-tab-overflow-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25em;
    color: var(--bs-secondary-color);
    cursor: pointer;
}
.udm-tab-overflow-chev:hover {
    color: var(--bs-primary);
}

/* Popup des Overflow-Reiters — Compound-Selector mit Spezifitaet (0,2,0),
   ueberschreibt zuverlaessig die Basis .udm-pageheader-popup (`right: 0.4em`).
   Oeffnet linksbuendig zum Overflow-Reiter, damit es NICHT ueber den rechten
   Viewport-Rand hinausragt wenn der Reiter weit rechts sitzt. */
.udm-pageheader-popup.udm-tab-overflow-popup {
    left: 0;
    right: auto;
    top: calc(100% + 0.2em);
    min-width: 18em;
}

/* Divider zwischen primaeren Reitern und sekundaeren Pills */
.udm-tab-divider {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    margin: 0.3em 0.6em;
    background: var(--bs-border-color);
}

/* X-Button links vom Sekundaer-Titel — schliesst den sekundaeren Bereich komplett.
   Teal-Akzent passend zum Sekundaer-Farbschema. */
.udm-secondary-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: color-mix(in srgb, var(--bs-teal) 70%, var(--bs-secondary-color));
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.12s, color 0.12s;
}
.udm-secondary-close:hover {
    background: color-mix(in srgb, var(--bs-teal) 12%, transparent);
    color: var(--bs-teal);
}
/* Erste Zeile des rechten Bereichs: die Pillen und das Schließen-Kreuz. Die Höhe kommt
   aus derselben Marke wie die Werkzeug-Leiste links (.udm-pane-werkzeuge, min-height),
   damit die Unterkanten über den Trenner hinweg eine Linie bilden. min-height statt
   height wie links: Eine feste Höhe machte die Zeile flacher als die linke Toolbar
   (Sichtprüfung 30.08.2026, Punkt 4). */
.udm-secondary-wahlzeile {
    display: flex;
    align-items: center;
    gap: 0.3em;
    width: 100%;
    min-height: var(--udm-werkzeugzeile-hoehe);
    /* Derselbe Rand auf ALLEN Seiten wie die Werkzeug-Leiste links
       (.udm-pane-werkzeuge, padding: var(--udm-werkzeug-rand)) — nur so kommen
       beide Zeilen auf dieselbe Hoehe (Sichtpruefung 30.08., Runde 6). */
    padding: var(--udm-werkzeug-rand);
    flex: 0 0 auto;
    background: var(--udm-kf-gruppe, var(--bs-light, #f6f7f9));
    border-bottom: 1px solid var(--udm-kf-rand, var(--bs-border-color));
    /* Die Auswahlliste öffnet nach unten und muss über der Werkzeug-Zeile darunter
       liegen. Ohne eigenen Stapel-Zusammenhang entschiede die Reihenfolge im Aufbau. */
    position: relative;
    z-index: 15;
}

/* Der Umschalter im rechten Bereich trägt die Bauform des Auswahl-Knopfes (Fläche eine
   Stufe dunkler als die Zeile, feiner Rand) und darin eine Titelzeile: Gruppe,
   Trennpunkt, Name. Der Platz ist da, also nebeneinander statt übereinander. Der Name
   trägt das Gewicht, die Gruppe steht leise davor. */
.udm-picker:not(.compact) .udm-pageheader-picker-btn {
    padding: 0.15em 0.5em;
    font-size: 1em;
}

/* Eine Zeile statt zwei. baseline richtet die unterschiedlich großen Schriften an
   ihrer Grundlinie aus; center würde die kleinere Gruppe optisch hochrutschen lassen. */
.udm-picker:not(.compact) .udm-pageheader-picker-title {
    flex-direction: row;
    align-items: baseline;
    gap: 0.45em;
}

.udm-picker:not(.compact) .udm-pageheader-picker-crumb {
    font-size: 0.92em;
    flex: 0 0 auto;
}

/* Trennpunkt zwischen Gruppe und Name. Als ::after am Krümel: Fehlt die Gruppe,
   fehlt auch der Punkt, ohne dass es dafür eine zweite Regel braucht. */
.udm-picker:not(.compact) .udm-pageheader-picker-crumb::after {
    content: "·";
    margin-left: 0.45em;
    opacity: 0.6;
}

/* Der Name ist die Überschrift des rechten Bereichs. */
.udm-picker:not(.compact) .udm-pageheader-picker-name {
    font-size: 1.12em;
    font-weight: 600;
    color: var(--udm-kf-text, var(--bs-body-color));
    min-width: 0;
}

/* Popup-Panel fuer ⋯-Menu. Rechtsbuendig zum .udm-pageheader-right-actions-Container,
   damit das Popup niemals ueber den rechten Viewport-Rand hinausragt. Das Popup
   oeffnet sich also nach LINKS vom rechten Rand. z-index ueberdeckt die darunter
   liegenden Buttons (ist akzeptiert — Popup ist modal). */
.udm-pageheader-popup {
    position: absolute;
    top: 100%;
    right: 0.4em;
    left: auto;
    z-index: 1001;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    padding: 0.3em;
    min-width: 14em;
    max-height: 70vh;
    overflow-y: auto;
}
.udm-pageheader-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.udm-pageheader-popup-group-title {
    font-size: 0.68em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    opacity: 0.7;
    padding: 0.5em 0.6em 0.2em;
}
.udm-pageheader-popup-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.6em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.88em;
    color: var(--bs-body-color);
    /* Overrides fuer den Fall, dass das Item als DxButton (.dxbl-btn) gerendert wird —
       UdmActionButtonNative setzt beide Klassen an. Default-Button-Optik deaktivieren,
       damit alle Popup-Items als klare Liste erscheinen (kein grauer Kasten je Action). */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    font-weight: 400;
    min-height: unset;
    line-height: 1.3;
}
.udm-pageheader-popup-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
}
.udm-pageheader-popup-item.active {
    background: color-mix(in srgb, var(--bs-teal) 14%, transparent) !important;
    color: var(--bs-teal) !important;
    font-weight: 600;
}
/* Icon + Text sauber ausrichten innerhalb des Items. */
.udm-pageheader-popup-item i {
    width: 1.2em;
    text-align: center;
    opacity: 0.75;
    flex-shrink: 0;
}
.udm-pageheader-popup-item .udm-pill-count {
    margin-left: auto;
    background: rgba(0,0,0,0.08);
    padding: 0 0.3em;
    border-radius: 8px;
    font-size: 0.78em;
    font-weight: 700;
}

/* ------------ Pfeil am Speichern-Knopf (Arbeiten im Container, C4) ------------
   Schmal und dicht am Speichern-Symbol, damit er sichtbar dazugehört. Im Menü trägt jeder
   Eintrag unter dem Wort einen Satz: was passiert oder warum es nicht geht (Prototyp
   sofort-veroeffentlichen-speichern-prototyp.html, Variante A). */
.udm-pageheader-btn.udm-speichern-pfeil {
    width: 1.4em;
    margin-left: -0.35em;
}
.udm-speichern-menue {
    min-width: 22em;
}
.udm-speichern-eintrag {
    align-items: flex-start;
}
.udm-speichern-eintrag i {
    margin-top: 0.15em;
}
.udm-speichern-satz {
    display: block;
    font-size: 0.88em;
    color: var(--bs-secondary-color);
}
.udm-speichern-eintrag:disabled,
.udm-speichern-eintrag:disabled:hover {
    cursor: default;
    color: var(--bs-secondary-color) !important;
    background: transparent !important;
}
.udm-speichern-trenner {
    height: 1px;
    background: var(--bs-border-color);
    margin: 0.25em 0;
}

/* ------------ Nachrichten-Glocke (nur UserClient) ------------ */
.udm2026-notif {
    align-self: stretch;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.15em;
    color: var(--bs-secondary-color);
    position: relative;
    flex-shrink: 0;
    margin-left: 0.5em;
    transition: color 0.12s;
}
.udm2026-notif:hover {
    color: var(--bs-primary);
}
.udm2026-notif-badge {
    position: absolute;
    top: -0.1em;
    right: -0.15em;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.3em;
    border-radius: 0.7em;
    background: var(--bs-danger);
    color: #fff;
    font-size: 0.82em;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ankunfts-Animation der Glocke (eigenes Keyframe — unabhängig vom FA-Animations-Bundle). */
@keyframes udm-bell-ring {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(15deg); }
    30%  { transform: rotate(-13deg); }
    45%  { transform: rotate(10deg); }
    60%  { transform: rotate(-7deg); }
    75%  { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}
.udm2026-notif .udm-bell-ring {
    animation: udm-bell-ring 0.8s ease;
    transform-origin: top center;
}

/* Die Glocke bleibt hervorgehoben, solange ihr Popup offen ist. */
.udm2026-notif.is-open {
    color: var(--bs-primary);
}

/* ------------ Nachrichten-Popup (Glocken-Dropdown) ------------ */
/* Das Popup liegt sichtbar ÜBER der Seite: Die Seite unter der Kopfleiste wird leicht
   abgedunkelt, Kopfleiste und Glocke bleiben hell. Das Popup schwebt mit Abstand, runden
   Ecken und tiefem Schatten; eine Spitze zeigt zur Glocke (nur an seinem Platz, das JS
   udmFloatingPanel blendet sie ein). Konzept systemnachrichten-anzeige, Regel 19. */
@keyframes udm-notif-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes udm-notif-slide-forward {
    from { opacity: 0; transform: translateX(1.2em); }
    to   { opacity: 1; transform: none; }
}
@keyframes udm-notif-slide-back {
    from { opacity: 0; transform: translateX(-1.2em); }
    to   { opacity: 1; transform: none; }
}
@keyframes udm-notif-check-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
.udm2026-notif-popup-backdrop {
    /* Fängt Klicks außerhalb ab, um das Popup zu schließen (auch auf der Kopfleiste). */
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: linear-gradient(to bottom,
        transparent var(--udm2026-appbar-height, 3.2em),
        rgba(15, 23, 42, 0.24) var(--udm2026-appbar-height, 3.2em));
    animation: udm-notif-fade-in 0.18s ease-out;
}
.udm2026-notif-popup {
    position: fixed;
    top: calc(var(--udm2026-appbar-height, 3.2em) + 0.6em);
    right: 0.75em;
    z-index: 1050;
    /* Standardgröße ohne gespeicherte Benutzergröße (die aus den Benutzereinstellungen
       hat Vorrang, siehe UdmMessagesBellControl.OnAfterRenderAsync). Höhe bleibt
       inhaltsgetrieben bis max-height. */
    width: 30em;
    min-width: 18em;
    min-height: 12em;
    max-width: calc(100vw - 1.5em);
    max-height: calc(100vh - var(--udm2026-appbar-height, 3.2em) - 1.6em);
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.08),
        0 16px 40px rgba(15, 23, 42, 0.20),
        0 40px 80px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    resize: both;
    /* Nur Deckkraft: Verschieben oder Skalieren würde die Geometrie verfälschen, die
       udmFloatingPanel beim Öffnen misst und sich merkt. */
    animation: udm-notif-fade-in 0.18s ease-out;
}
/* Spitze zur Glocke. Liegt außerhalb des Popups (das Popup braucht overflow: hidden für
   das Größenziehen); das JS setzt Lage und Sichtbarkeit. */
.udm2026-notif-popup-tail {
    display: none;
    position: fixed;
    z-index: 1051;
    width: 14px;
    height: 14px;
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-top-left-radius: 3px;
    transform: rotate(45deg);
    pointer-events: none;
}
.udm2026-notif-popup-head {
    cursor: move;
    user-select: none;
}
.udm2026-notif-popup-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Maximal-Modus: füllt den ganzen Bereich unter der AppBar, fix und nicht verstellbar. */
.udm2026-notif-popup--max {
    top: var(--udm2026-appbar-height, 3.2em) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    resize: none !important;
}
.udm2026-notif-popup--max .udm2026-notif-popup-head {
    cursor: default;
}
.udm2026-notif-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65em 0.9em 0.65em 1.1em;
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
    border-bottom: 1px solid color-mix(in srgb, var(--bs-primary) 18%, var(--bs-body-bg));
    flex: 0 0 auto;
}
/* Titel hervorgehoben (1.15em): wächst mit der Schriftgröße aus den Anwendereinstellungen. */
.udm2026-notif-popup-title {
    font-size: 1.15em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.45em;
}
.udm2026-notif-popup-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.45em;
    border-radius: 0.75em;
    background: var(--bs-danger);
    color: #fff;
    font-size: 0.88em;
    font-weight: 700;
}
/* Werkzeuge im Kopf: graue Flächen-Knöpfe, blau erst beim Überfahren. Keine feste Größe:
   Das Symbol folgt der Symbolgröße aus den Anwendereinstellungen, der Knopf wächst mit. */
.udm2026-notif-popup-actions {
    display: flex;
    align-items: center;
    gap: 0.2em;
}
.udm2026-notif-popup-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35em;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    color: var(--bs-secondary-color);
    transition: background 0.12s, color 0.12s;
}
.udm2026-notif-popup-action:hover {
    background: var(--bs-body-bg);
    color: var(--bs-primary);
}
/* Duotone-Symbole einfarbig in der Knopffarbe; Spezifität 0,0,2,1 sticht .fa-*:not(.disabled). */
.udm2026-notif-popup-actions .udm2026-notif-popup-action i {
    color: inherit;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.4;
}
/* Hellgraue Fläche, auf der jede Nachricht als weiße Karte steht (udm_user.css,
   .udm-msg2-entry, dieselbe Karte wie in der Nachrichtenzentrale). */
.udm2026-notif-popup-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.2em 0.75em 0.5em;
    background: var(--bs-tertiary-bg);
}
.udm2026-notif-popup-empty {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 1.6em 0.8em;
}

/* Übergänge zwischen Liste und Lese-Ansicht. */
.udm2026-notif-anim-forward {
    animation: udm-notif-slide-forward 0.2s ease-out;
}
.udm2026-notif-anim-back {
    animation: udm-notif-slide-back 0.2s ease-out;
}
.udm2026-notif-anim-fade {
    animation: udm-notif-fade-in 0.18s ease-out;
}

/* Lese-Ansicht im Popup (voller Text, Blättern, Quittieren am Ende). */
.udm2026-notif-popup-read {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.udm2026-notif-popup-read-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0.8em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    flex: 0 0 auto;
}
.udm2026-notif-popup-back {
    cursor: pointer;
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none;
}
.udm2026-notif-popup-back:hover {
    text-decoration: underline;
}
.udm2026-notif-popup-nav {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.udm2026-notif-popup-navbtn {
    cursor: pointer;
    color: var(--bs-secondary-color);
}
.udm2026-notif-popup-navbtn:hover {
    color: var(--bs-primary);
}
.udm2026-notif-popup-navbtn.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.udm2026-notif-popup-pos {
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    min-width: 3.4em;
    text-align: center;
}
.udm2026-notif-popup-read-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.9em 1.2em 1.1em;
}
.udm2026-notif-popup-read-title {
    font-weight: 700;
    font-size: 1.15em;
    margin: 0.4em 0 0.25em;
}
.udm2026-notif-popup-read-time {
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.8em;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
/* Sagt, dass das Lesen die wichtige Nachricht aus dem Banner nimmt. */
.udm2026-notif-popup-read-note {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin-bottom: 0.9em;
    padding: 0.5em 0.7em;
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
}
.udm2026-notif-popup-read-text {
    line-height: 1.6;
    word-break: break-word;
}
.udm2026-notif-popup-read-text img {
    max-width: 100%;
    height: auto;
}
/* Fuß der Lese-Ansicht: offen = Satz + Quittieren, erledigt = Haken + Zeitpunkt. */
.udm2026-notif-popup-read-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.75em 1.1em;
    border-top: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg);
}
.udm2026-notif-popup-read-foot-text {
    flex: 1 1 auto;
    color: var(--bs-secondary-color);
}
.udm2026-notif-popup-ack {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    padding: 0.5em 1.2em;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.35);
    transition: transform 0.12s, box-shadow 0.12s;
}
.udm2026-notif-popup-ack:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
}
.udm2026-notif-popup-ack:active {
    transform: scale(0.97);
}
.udm2026-notif-popup-read-foot.is-done {
    gap: 0.7em;
    font-weight: 600;
    color: var(--bs-success-text-emphasis, #2e4317);
    background: var(--bs-success-bg-subtle, #e3eed7);
}
.udm2026-notif-popup-ack-check {
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--bs-success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.udm2026-notif-popup-read-foot.is-new .udm2026-notif-popup-ack-check {
    animation: udm-notif-check-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

/* ------------ Nachrichten-Toasts (Kurz-Hinweise unten rechts) ------------ */
.udm2026-toast-stack {
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    width: 22em;
    max-width: calc(100vw - 2em);
}
.udm2026-toast {
    display: flex;
    gap: 0.7em;
    align-items: flex-start;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-primary);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    padding: 0.7em 0.85em;
    cursor: pointer;
    animation: udm-toast-in 0.25s ease;
}
@keyframes udm-toast-in {
    from { transform: translateX(1.5em); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.udm2026-toast:hover {
    background: var(--bs-tertiary-bg);
}
.udm2026-toast-icon {
    color: var(--bs-primary);
    font-size: 1.1em;
    margin-top: 0.1em;
    flex: 0 0 auto;
}
.udm2026-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}
.udm2026-toast-titlerow {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
}
.udm2026-toast-title {
    font-weight: 700;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.udm2026-toast-time {
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    flex: 0 0 auto;
}
.udm2026-toast-text {
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    margin-top: 0.15em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.udm2026-toast--summary {
    justify-content: center;
    font-weight: 600;
    font-size: 0.88em;
    color: var(--bs-secondary-color);
    border-left-color: var(--bs-secondary-color);
}

/* ------------ Systemnachrichten-Banner (voller Breite, unter der AppBar) ------------ */
.udm2026-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.55em 1em;
    background: var(--bs-warning-bg-subtle, #fff8e6);
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 5px solid var(--bs-warning);
    color: var(--bs-body-color);
}
.udm2026-banner--ack {
    background: var(--bs-danger-bg-subtle, #fbeceb);
    border-left-color: var(--bs-danger);
}
.udm2026-banner > i {
    color: var(--bs-warning);
    font-size: 1.15em;
    flex: 0 0 auto;
}
.udm2026-banner--ack > i {
    color: var(--bs-danger);
}
.udm2026-banner-tag {
    font-size: 0.88em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bs-warning);
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 6px;
    flex: 0 0 auto;
}
.udm2026-banner--ack .udm2026-banner-tag {
    background: var(--bs-danger);
}
/* Die Nachricht selbst ist ein Knopf: Klick öffnet sie in der Lese-Ansicht der Glocke. */
.udm2026-banner-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 0.35em 0.6em;
    margin: -0.35em 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.udm2026-banner-body:hover {
    background: rgba(0, 0, 0, 0.05);
}
.udm2026-banner-body:hover .udm2026-banner-title {
    text-decoration: underline;
}
.udm2026-banner-more {
    flex: 0 0 auto;
    color: var(--bs-primary);
    font-weight: 600;
    white-space: nowrap;
}
/* Rückmeldung nach „Gelesen": kurz an Stelle der Nachricht. */
.udm2026-banner--done {
    background: var(--bs-success-bg-subtle, #eef6e6);
    border-left-color: var(--bs-success);
}
.udm2026-banner--done > i {
    color: var(--bs-success);
}
.udm2026-banner-confirm {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}
.udm2026-banner-title {
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}
.udm2026-banner-text {
    /* Darf schrumpfen, damit „Weiterlesen" immer sichtbar bleibt. */
    flex: 0 1 auto;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: 0.88em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.udm2026-banner-count {
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    color: var(--bs-secondary-color);
    background: rgba(0, 0, 0, 0.06);
    padding: 0.2em 0.6em;
    border-radius: 999px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.udm2026-banner-count:hover {
    background: rgba(0, 0, 0, 0.12);
}
.udm2026-banner-action {
    flex: 0 0 auto;
    border: 1px solid var(--bs-warning);
    background: var(--bs-body-bg);
    color: #9a6b00;
    font-weight: 650;
    border-radius: 8px;
    padding: 0.35em 0.85em;
    cursor: pointer;
    white-space: nowrap;
}
.udm2026-banner-action:hover {
    background: var(--bs-warning);
    color: #fff;
}
.udm2026-banner--ack .udm2026-banner-action {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}
.udm2026-banner--ack .udm2026-banner-action:hover {
    background: var(--bs-danger);
    color: #fff;
}

/* ------------ User-Info (rechts) ------------ */
.udm2026-user {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-left: 0.5em;
    padding: 0.1em 0.4em 0.1em 0.6em;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s;
}
.udm2026-user:hover,
.udm2026-user.open {
    background: rgba(var(--bs-primary-rgb), 0.08);
}
.udm2026-user-info {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.2;
}
.udm2026-user-name { font-size: 0.88em; font-weight: 600; }
.udm2026-user-system { font-size: 0.75em; color: var(--bs-secondary-color); }
.udm2026-user-avatar {
    width: 1.85em;
    height: 1.85em;
    border-radius: 5px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 700;
    cursor: pointer;
}
.udm2026-user-avatar:hover { background: rgba(var(--bs-primary-rgb), 0.16); }


/* ------------ User-Menu Dropdown (Systemfunktionen) ------------ */
.udm2026-usermenu-backdrop {
    /* Faengt Klicks ausserhalb ab, um das Menu zu schliessen. */
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.udm2026-usermenu {
    position: fixed;
    /* Hoehe der gesamten AppBar (Z1 + optional Z2) — via inline-Style am
       .udm2026-appbar-wrapper gesetzt und via CSS-Variable-Cascade vererbt.
       Fallback 3.2em fuer Mobile/Legacy-Pfade ohne Wrapper. */
    top: var(--udm2026-appbar-height, 3.2em);
    right: 0.5em;
    z-index: 1050;
    min-width: 18em;
    max-width: 24em;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 0.4em;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.udm2026-usermenu-head {
    display: flex;
    flex-direction: column;
    padding: 0.4em 0.6em 0.5em 0.6em;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    margin-bottom: 0.3em;
}
.udm2026-usermenu-name {
    font-weight: 600;
    color: var(--bs-body-color);
}
.udm2026-usermenu-meta {
    font-size: 0.8em;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}

.udm2026-usermenu-container {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.6em;
    font-size: 0.88em;
    color: var(--bs-body-color);
    background: rgba(var(--bs-primary-rgb), 0.05);
    border-radius: 4px;
    margin: 0.2em 0;
}
.udm2026-usermenu-container span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm2026-usermenu-divider {
    height: 1px;
    background: var(--bs-border-color-translucent);
    margin: 0.3em 0;
}

/* UdmActionButtonNative-Buttons im Menu — transparent, linksbuendig, volle Breite. */
.udm2026-usermenu-btn {
    display: flex !important;
    align-items: center !important;
    gap: 0.5em !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 0.4em 0.6em !important;
    background: transparent !important;
    border: none !important;
    color: var(--bs-body-color) !important;
    text-align: left !important;
    border-radius: 4px !important;
}
.udm2026-usermenu-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary-text-emphasis) !important;
}
.udm2026-usermenu-btn:disabled {
    opacity: 0.5;
    cursor: default;
}


/* ============================================================
   ROOT-KARTEN-DROPDOWN (offene Seiten je Tab-Gruppe + Sidebar-Toggle)

   Visuell 1:1 zur Sidebar: gleicher Hintergrund, wiederverwendet
   Udm2026SidebarItem fuer jeden Eintrag. Damit funktioniert das Dropdown
   zugleich als Navigation fuer mobile Ansichten (keine permanente Sidebar).

   Wrapper noetig, weil .udm2026-card selbst overflow:hidden hat.
   Dropdown haengt als Sibling der Karte unter dem Wrapper und wird
   absolut relativ zum Wrapper positioniert.
   ============================================================ */
.udm2026-card-wrapper {
    position: relative;
    flex-shrink: 0;
}

.udm2026-card-dropdown-backdrop {
    /* Startet UNTERHALB der gesamten AppBar (Z1 + optional Z2),
       damit Klicks auf benachbarte Root-Karten den Backdrop NICHT treffen und
       direkt die jeweilige Karte aktivieren — dann uebernimmt OnCardClicked
       den Dropdown-Wechsel. Klicks auf alles andere im Viewport schliessen
       das Dropdown wie gewohnt. CSS-Variable wird vom Wrapper vererbt. */
    position: fixed;
    top: var(--udm2026-appbar-height, 3.2em);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: transparent;
}

.udm2026-card-dropdown {
    position: absolute;
    top: calc(100% + 0.3em);
    left: 0;
    z-index: 1050;
    min-width: 22em;
    max-width: 32em;
    /* Opaker Popup-Hintergrund (tertiary-bg = leicht abgesetztes Hellgrau).
       Die Item-Darstellung kommt aus Udm2026SidebarItem — die Items wirken
       konsistent zur Sidebar, der Container grenzt sich aber klar vom Inhalt
       dahinter ab. Das Body-BG hatten wir zuvor als durchscheinenden Tint —
       nicht gewuenscht. */
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scroll-Container fuer die Liste der Sidebar-Items. */
.udm2026-card-dropdown-scroll {
    max-height: 28em;
    overflow-y: auto;
    padding: 0.3em 0;
}

/* Visuell abgesetzter Footer mit Sidebar-Toggle. */
.udm2026-card-dropdown-footer {
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    padding: 0.35em;
}

.udm2026-card-dropdown-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    padding: 0.45em 0.6em;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--bs-body-color);
    font-size: 0.88em;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.udm2026-card-dropdown-toggle-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary-text-emphasis);
}
.udm2026-card-dropdown-toggle-btn i {
    width: 1.2em;
    text-align: center;
    color: var(--bs-secondary-color);
}


/* ============================================================
   SIDEBAR
   ============================================================ */
.udm2026-sidebar {
    /* Fuellt das DxSplitterPane komplett — Breite kommt vom Splitter. */
    width: 100%;
    height: 100%;
    /* bs-light — Sidebar, PageHeader und Page-Toolbar teilen denselben hellen
       Chrome-Ton. Der Kontrast zum weissen Content ist dezent; die Trennung
       Content ↔ Page-Toolbar erfolgt zusaetzlich ueber einen Shadow (siehe
       .udm-dialog-toolbar-wrapper in udm_mainpage_styles.css). */
    background: var(--bs-light);
    display: flex;
    flex-direction: column;
    /* Keine Basis-Reduktion: Sidebar erbt 1em vom Root.
       Kinder-Schriften werden absolut relativ zum Root gesetzt. */
}
.udm2026-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Workflow-Block-Container: pro Root + dessen Kinder ein <div>-Wrapper.
   Macht Root + Kinder visuell als Einheit erkennbar — auch wenn ein
   Kind active ist, bleibt die Block-Zugehoerigkeit klar. Border
   gewaehrleistet Sichtbarkeit auch bei sehr aehnlichem Sidebar-BG
   (bs-light), der BG-Tint allein war zu subtil. */
.udm2026-sidebar-group,
.udm2026-sidebar-home {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 6px;
    margin: 0.3em 0.4em;
    overflow: hidden;
}

/* Home-Icon-Bubble: Primary-Akzentfarbe — der Startseite-Eintrag ist der
   globale Navigations-Anker und hebt sich farblich von den Element-Typen ab. */
.icon-bubble.ctx-home {
    background: transparent !important;
    color: var(--bs-primary) !important;
}
/* Root innerhalb des Blocks etwas dunkler — sichtbare Block-Header-
   Markierung. KEINE Border zwischen Root und erstem Kind. */
.udm2026-sidebar-group > .udm2026-ti.root {
    background: rgba(0, 0, 0, 0.05);
}

/* Tree-Eintrag */
.udm2026-ti {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.4em 0.65em;
    /* Fixe Mindesthoehe — garantiert identische Item-Hoehen in Mini- und
       Expanded-Modus, unabhaengig vom Body-Inhalt (Type+Name). Wert: Body-
       Stack (Type ~0.86em + Name 1.2em) + Padding (0.4em*2) ≈ 2.86em. */
    min-height: 2.86em;
    cursor: pointer;
    position: relative;
    transition: background 0.08s;
}
.udm2026-ti:hover { background: rgba(0, 0, 0, 0.025); }

/* Active: deutlich erkennbarer BG-Tint + linker Akzentstreifen
   (etablierte Tree-Konvention). Inset-Box-Shadow als Linie, damit
   das Item-Layout (padding/margin) nicht beeinflusst wird. */
.udm2026-ti.active {
    background: rgba(var(--bs-primary-rgb), 0.12);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}
.udm2026-ti.active .udm2026-ti-name {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Root-Eintrag etwas prominenter (groessere Bubble, fettere Schrift in den
   Sub-Regeln weiter unten). Die visuelle Block-Markierung uebernimmt der
   .udm2026-sidebar-group-Container — KEIN BG-Tint mehr auf dem Root selbst,
   sonst gaebe es wieder Kanten zwischen Root und seinen Kindern. */
.udm2026-ti.root {
    padding: 0.55em 0.65em;
}
.udm2026-ti.root .icon-bubble {
    width: 1.85em;
    height: 1.85em;
    font-size: 0.9em;
}
.udm2026-ti.root .name { font-size: 0.95em; font-weight: 600; }
.udm2026-ti.root.active .name { font-weight: 700; }

/* Icon-Bubble: immer vorhanden (custom Toenung oder Standard) */
.udm2026-ti .icon-bubble {
    width: 1.55em;
    height: 1.55em;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.05);
    color: var(--bs-secondary-color);
}
/* Alte BG-Badge-Regeln entfernt — werden jetzt durch die Workflow-Sidebar-Regeln
   weiter unten (background transparent + color !important + child-color inherit)
   ersetzt. Hier deshalb nichts mehr. */

.udm2026-ti-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.udm2026-ti-type {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--bs-tertiary-color, #9ba3ab);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Bei langen Type-Labels (z.B. "TRAVIS FZG-AUSKUNFT") nicht umbrechen,
       sondern mit Ellipsis abschneiden — gleiches Verhalten wie .udm2026-ti-name. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.udm2026-ti-name {
    color: var(--bs-body-color);
    /* Einzeilig + Ellipsis. Wichtig fuer Mini/Expanded-Hoehengleichheit:
       Wenn der Body im Mini-Slot wrapping erlauben wuerde, waere das Item
       hoeher als im Expanded — beim Hover-Switch wuerde es springen.
       Mit line-clamp:1 ist die Item-Hoehe in beiden Modi identisch.
       Tooltip auf dem Eintrag zeigt den Vollnamen. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.udm2026-ti.active .udm2026-ti-name {
    color: var(--bs-primary);
    font-weight: 600;
}
.udm2026-ti.root .udm2026-ti-type { font-size: 0.8em; }
.udm2026-ti.root .udm2026-ti-name { font-size: 1.05em; font-weight: 600; }
.udm2026-ti.root.active .udm2026-ti-name { font-weight: 700; }

.udm2026-ti-close {
    font-size: 0.7em;
    color: var(--bs-secondary-color);
    /* Immer sichtbar (gedimmt) — opacity:0 nur on-hover war zu fragil und
       zerstoerte die Klick-Affordance. Beim Item-Hover voll sichtbar. */
    opacity: 0.45;
    padding: 0.15em;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.udm2026-ti:hover .udm2026-ti-close,
.udm2026-ti.active .udm2026-ti-close { opacity: 1; }
.udm2026-ti-close:hover { background: rgba(220, 53, 69, 0.1); color: #dc3545; opacity: 1; }

/* Einrueckung + Baumlinien (bis Tiefe 5) */
.udm2026-ti.d-1 { padding-left: 1.7em; }
.udm2026-ti.d-2 { padding-left: 2.8em; }
.udm2026-ti.d-3 { padding-left: 3.9em; }
.udm2026-ti.d-4 { padding-left: 5.0em; }
.udm2026-ti.d-5 { padding-left: 6.1em; }
.udm2026-ti.d-1::before { content: ''; position: absolute; left: 1.2em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-1::after  { content: ''; position: absolute; left: 1.2em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-2::before { content: ''; position: absolute; left: 2.3em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-2::after  { content: ''; position: absolute; left: 2.3em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-3::before { content: ''; position: absolute; left: 3.4em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-3::after  { content: ''; position: absolute; left: 3.4em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-4::before { content: ''; position: absolute; left: 4.5em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-4::after  { content: ''; position: absolute; left: 4.5em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-5::before { content: ''; position: absolute; left: 5.6em; top: 0; bottom: 50%; width: 1px; background: rgba(0,0,0,0.1); }
.udm2026-ti.d-5::after  { content: ''; position: absolute; left: 5.6em; top: 50%; width: 0.3em; height: 1px; background: rgba(0,0,0,0.1); }


/* ============================================================
   SIDEBAR — MINI-MODUS (collapsed, 56px-Schiene mit Hover-Overlay)
   ============================================================
   Wird vom Container (Udm2026ContentContainer) gesetzt, wenn
   SidebarCollapsed=true und mindestens eine Workflow-Page offen ist.

   Designprinzip: Item-Geometrie (padding/margin/border) MUSS in Mini
   und Hover-Expand identisch sein, sonst springen die Items vertikal
   beim Hover. Daher ueberschreibt der Mini-Modus KEINE Layout-Werte —
   weder padding noch margin noch border-top/bottom. Geaendert werden
   ausschliesslich:
     - Sidebar-Width (4em ↔ 20em) — wirkt nur horizontal
     - Sichtbarkeit von Body/Multi-Ref/Chevron/Close via opacity
   Die Items behalten ihre Hoehe und vertikale Position 1:1.

   Roots heben sich durch den Base-CSS-Background-Tint ab; Kinder
   gehoeren durch Position (direkt unter dem getinteten Root + L-Linie)
   visuell dazu — auch im Mini, ohne zusaetzliche Indentation.
*/
.udm2026-body { position: relative; }
/* Muss der Breite der Mini-Sidebar (.udm2026-sidebar.is-mini, width: 4em) entsprechen.
   Bis 08/2026 stand hier 3.5em: 0.5em Inhalt lagen auf jeder Seite unter der Sidebar. */
.udm2026-body.has-mini-sidebar { padding-left: 4em; }

/* An der Mini-Sidebar-Kante braucht die linke Werkzeug-/Reiter-Zeile weniger eigenen
   Rand: Die Sidebar bringt ihre Kante (Border + Innenluft) schon mit. Solange die 0.5em
   Inhalt unter der Sidebar lagen (siehe oben), kaschierte das diesen Rand — nach der
   Korrektur stünde der erste Knopf sonst sichtbar zu weit rechts (PO 21.08.2026).
   Kein zweiter Eigentümer des Werkzeug-Rands: Das ist ein Kontext-Abschlag NUR an
   dieser Kante, alle übrigen Seiten behalten --udm-werkzeug-rand. */
.udm2026-body.has-mini-sidebar .udm-workzone-row1,
.udm2026-body.has-mini-sidebar .udm-pane-werkzeuge {
    padding-left: 0.2em;
}

.udm2026-sidebar.is-mini {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4em;
    /* z-index zwischen Content-Overlays und Modals:
       - Content/Sticky-Header: < 1040
       - User-Menu-/Card-Dropdown-Backdrops: 1040
       - Mini-Sidebar HIER: 1045 (ueber allen Content-Stickies)
       - Modals + Card-Dropdown: 1050
       - Popovers/Tooltips: 1060+
       Damit liegt die hover-expandierte Sidebar VOR Subform-Cards/Toolbars
       (z.B. der roten Anmeldung-Card im Dienstanmeldungs-Workflow),
       bleibt aber HINTER offenen Modals und Dropdowns. */
    z-index: 1045;
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-light);
    /* Etwas langsamere Animation + Material-smooth Easing (ease-out-cubic).
       Damit gleitet die Sidebar deutlicher rein/raus statt instant zu
       snappen — der Body-Text faded zeitversetzt ein (siehe :hover-Regel
       weiter unten), sodass Text-Reflow nicht im halbfertigen Slot sichtbar
       wird. */
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    padding: 0.2em;
}
.udm2026-sidebar.is-mini:hover {
    width: 20em;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
}

/* Im Mini: Icons mittig durch justify-content:center. Funktioniert
   unabhaengig von Container-Margin und Item-Padding — solange Body und
   Suffix-Elemente keine Width nehmen (siehe weiter unten). Padding-Left
   wird auf 0 gesetzt, sonst verschiebt es das Icon links vom Mittelpunkt.
   Padding-top/bottom bleibt aus dem Base-CSS → Item-Hoehe identisch. */
.udm2026-sidebar.is-mini .udm2026-ti,
.udm2026-sidebar.is-mini .udm2026-ti.d-1,
.udm2026-sidebar.is-mini .udm2026-ti.d-2,
.udm2026-sidebar.is-mini .udm2026-ti.d-3,
.udm2026-sidebar.is-mini .udm2026-ti.d-4,
.udm2026-sidebar.is-mini .udm2026-ti.d-5,
.udm2026-sidebar.is-mini .udm2026-ti.root {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
    transition: padding-left 0.18s ease, padding-right 0.18s ease, gap 0.18s ease;
}

/* Block-Container im Mini: gleiche Box-Optik wie im Expanded (Border,
   Border-Radius, BG-Tint), nur etwas knappere Margins fuer den schmalen
   Slot. Die Icon-Zentrierung erfolgt ueber justify-content:center auf
   den Items (siehe unten) — daher ist die Container-Margin unkritisch. */
.udm2026-sidebar.is-mini .udm2026-sidebar-group,
.udm2026-sidebar.is-mini .udm2026-sidebar-home {
    margin: 0.3em 0.25em;
    border-radius: 5px;
}

/* Body komplett aus dem Layout nehmen — sonst nimmt flex:1 Platz und
   schiebt das Icon vom Mittelpunkt nach links. Item-Hoehe bleibt durch
   min-height auf .udm2026-ti garantiert (siehe Base-CSS).

   WICHTIG: auch max-height: 0 setzen! Bei max-width: 0 alleine wuerde
   der Type-Text (z.B. "BBR LISTE (OPTIMIERT)") zeichenweise umbrechen
   und der Body-Container vertikal in die Hoehe wachsen — Item wird
   dann viel zu hoch (UserClient mit langen Page-Topics). */
.udm2026-sidebar.is-mini .udm2026-ti-content {
    opacity: 0;
    flex: 0 0 0;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    /* Beim Hover-Out: Body schrumpft schnell + ohne Delay, Sidebar
       schliesst parallel. Beim Hover-In wird die Dauer in der :hover-
       Variante ueberschrieben (mit Delay, damit Body erst nach Width
       erscheint). */
    transition: opacity 0.12s ease,
                max-width 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                flex-basis 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Multi-Ref/Chevron/Close komplett aus dem Layout nehmen — wenn sie als
   Flex-Items mit Eigenwidth da blieben, wuerden sie das Icon nach links
   schieben (= nicht mittig). max-width:0 + overflow:hidden + margin:0
   neutralisiert alle Width-Beitraege. */
.udm2026-sidebar.is-mini .udm2026-ti-multiref,
.udm2026-sidebar.is-mini .udm2026-ti-chevron,
.udm2026-sidebar.is-mini .udm2026-ti-close {
    opacity: 0;
    max-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, max-width 0.18s ease;
}

/* L-Verbindungslinien werden im Mini-Slot zwar nicht sichtbar geclippt,
   ausblenden ist trotzdem sauberer (keine angeschnittenen Striche). */
.udm2026-sidebar.is-mini .udm2026-ti.d-1::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-1::after,
.udm2026-sidebar.is-mini .udm2026-ti.d-2::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-2::after,
.udm2026-sidebar.is-mini .udm2026-ti.d-3::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-3::after,
.udm2026-sidebar.is-mini .udm2026-ti.d-4::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-4::after,
.udm2026-sidebar.is-mini .udm2026-ti.d-5::before,
.udm2026-sidebar.is-mini .udm2026-ti.d-5::after {
    opacity: 0;
    transition: opacity 0.18s ease;
}

/* Multi-Ref im Mini: lila Ring um die Icon-Bubble — ersetzt das
   ausgeblendete Link-Icon. Klasse "multiref" aus ItemClasses. */
.udm2026-sidebar.is-mini .udm2026-ti.multiref .icon-bubble {
    box-shadow: 0 0 0 2px #6f42c1;
}

/* Active im Mini: NUR der Base-CSS-BG-Tint (.udm2026-ti.active mit
   rgba(var(--bs-primary-rgb), 0.08)) markiert das aktive Item. Kein
   Ring um die Icon-Bubble — sah als "dicker Rahmen" zu unschoen aus. */

/* ===== Hover-Expand =====
   Inhalte einblenden + Tiefen-Padding wieder herstellen (horizontale
   Animation). Padding-top/bottom + Margin + Border bleiben unangetastet,
   d.h. KEINE vertikale Bewegung. */
/* Beim Hover-Expand: Body/Suffix-Elemente erst einblenden, wenn die
   Sidebar fast voll ausgefahren ist (Delay 0.2s ≈ 60% der 0.32s-Width).
   Damit ist der Text-Reflow im schmalen Slot nicht sichtbar — er
   passiert "hinter" der opacity:0-Phase. */
.udm2026-sidebar.is-mini:hover .udm2026-ti-content,
.udm2026-sidebar.is-mini:hover .udm2026-ti-multiref,
.udm2026-sidebar.is-mini:hover .udm2026-ti-chevron {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.18s ease 0.2s;
}
.udm2026-sidebar.is-mini:hover .udm2026-ti:hover .udm2026-ti-close {
    opacity: 1;
    pointer-events: auto;
}

/* Tiefen-Padding-Left zurueck auf die regulaeren Werte */
/* Hover-Expand: alle Mini-Overrides zuruecksetzen — Items zeigen sich
   wieder wie im Expanded-Modus. justify-content:flex-start ist nicht
   transitionierbar; der Wechsel wird durch die parallele Width-/Padding-
   Animation visuell ueberdeckt. */
.udm2026-sidebar.is-mini:hover .udm2026-ti {
    justify-content: flex-start;
    padding-right: 0.65em;
    gap: 0.8em;
}
.udm2026-sidebar.is-mini:hover .udm2026-ti.root,
.udm2026-sidebar.is-mini:hover .udm2026-ti.udm2026-ti-home { padding-left: 0.65em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-1 { padding-left: 1.7em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-2 { padding-left: 2.8em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-3 { padding-left: 3.9em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-4 { padding-left: 5.0em; }
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-5 { padding-left: 6.1em; }
/* Hover-Expand des Bodys: KEINE 'none'-Werte fuer max-width/max-height
   verwenden — diese sind nicht animierbar. Body waechst delayed (0.2s),
   sodass das Item zuerst die volle Sidebar-Width erreicht, bevor der
   Text-Reflow startet. Damit ist kein Hoehen-Glitch sichtbar. */
.udm2026-sidebar.is-mini:hover .udm2026-ti-content {
    flex: 1 1 0;
    max-width: 22em;
    max-height: 2.5em;
    transition: opacity 0.18s ease 0.2s,
                max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
                max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
                flex-basis 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;
}
.udm2026-sidebar.is-mini:hover .udm2026-ti-multiref,
.udm2026-sidebar.is-mini:hover .udm2026-ti-chevron,
.udm2026-sidebar.is-mini:hover .udm2026-ti-close {
    max-width: none;
    margin: revert;
    padding: revert;
}

.udm2026-sidebar.is-mini:hover .udm2026-ti.d-1::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-1::after,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-2::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-2::after,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-3::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-3::after,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-4::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-4::after,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-5::before,
.udm2026-sidebar.is-mini:hover .udm2026-ti.d-5::after {
    opacity: 1;
    transition: opacity 0.18s ease 0.08s;
}

/* Hover-Expand: Multi-Ref-Ring entfaellt — Link-Icon uebernimmt die
   Markierung wie im expanded Modus. (Active-Ring gibt es im Mini nicht
   mehr, nur Base-BG-Tint.) */
.udm2026-sidebar.is-mini:hover .udm2026-ti.multiref .icon-bubble { box-shadow: none; }


/* ============================================================
   CONTENT-BEREICH
   ============================================================ */
.udm2026-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* ------------ Content-Header (zweizeilig: Typ + Titel/Desc) ------------ */
.udm2026-hd {
    display: flex;
    align-items: center;
    padding: 0.55em 1em;
    gap: 0.85em;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--udm2026-toolbar-bg);
    flex-shrink: 0;
}
.udm2026-hd-left {
    flex: 1;
    min-width: 0;
}
.udm2026-hd-type {
    font-size: 0.8em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.udm2026-hd-type i { font-size: 0.95em; }
.udm2026-hd-type.type-dlg { color: var(--udm2026-type-dlg); }
.udm2026-hd-type.type-ae { color: var(--udm2026-type-ae); }
.udm2026-hd-type.type-ent { color: var(--udm2026-type-ent); }
.udm2026-hd-type.type-ds { color: var(--udm2026-type-ds); }
.udm2026-hd-type.type-job { color: var(--udm2026-type-job); }
.udm2026-hd-type.type-code { color: var(--udm2026-type-code); }
.udm2026-hd-type.ctx-app { color: var(--udm2026-ctx-app); }
.udm2026-hd-type.ctx-sys { color: var(--udm2026-ctx-sys); }
.udm2026-hd-type.ctx-mgmt { color: var(--udm2026-ctx-mgmt); }
.udm2026-hd-main {
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    min-width: 0;
}
.udm2026-hd-title {
    font-weight: 700;
    font-size: 1.15em;
    color: var(--bs-body-color);
    line-height: 1.2;
    flex-shrink: 0;
}
.udm2026-hd-desc {
    font-size: 0.95em;
    color: var(--bs-secondary-color);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.udm2026-hd-desc::before {
    content: '·';
    margin-right: 0.4em;
    color: var(--bs-border-color);
}

.udm2026-hd-actions {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
}

/* Save/Close/SaveAndClose im Content-Header
   ---
   Keine eigenen Farben / Rahmen mehr — stattdessen Bootstrap-Button-Klassen
   (btn btn-primary / btn btn-outline-primary) und UDM-Klasse .udm-content-header-close
   in der Razor-Datei (CssClass-Parameter). Das haelt alles theme-aware und
   respektiert das UDM-Icon-Groessensystem.

   Diese Layout-Hilfsklasse ergaenzt nur Flex-Alignment fuer Icon+Text und einen
   konsistenten gap — KEINE Farben. */
.udm2026-hd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
}

/* ------------ Content-Body-Container ------------ */
.udm2026-content-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}


/* ============================================================
   MOBILE — AppBar nach unten, Sidebar als Overlay
   ============================================================ */
@media (max-width: 600px) {
    .udm2026-root { flex-direction: column-reverse; }
    /* Im column-reverse landet die .udm2026-appbar unten, der Body darueber */

    .udm2026-appbar {
        border-bottom: none;
        border-top: 1px solid var(--bs-border-color);
    }

    /* Sidebar als Overlay von rechts, initial ausgeblendet */
    .udm2026-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 3.2em; /* Platz fuer AppBar unten */
        width: 85vw;
        max-width: 85vw;
        z-index: 1030;
        transform: translateX(100%);
        transition: transform 0.22s ease;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    }
    .udm2026-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Auf Mobile: User-Info komprimiert, nur Avatar */
    .udm2026-user-info { display: none; }

    /* Zurueck-Button: nur Icon */
    .udm2026-back .info { display: none; }

    /* Content-Header ohne Save/Close auf Mobile — Aktionen in Toolbar-Zeile */
    .udm2026-hd-actions { display: none; }

    /* Beschreibung auf Mobile meist auf neuer Zeile oder ausblenden */
    .udm2026-hd-main { flex-direction: column; align-items: flex-start; gap: 0.1em; }
    .udm2026-hd-desc::before { display: none; }
}


/* ============================================================
   PAGEHEADER — Seiten-Icon (ersetzt Back-Chip)
   ============================================================ */
.udm-pageheader-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    flex-shrink: 0;
    font-size: 1.4em;
    color: var(--bs-secondary-color);
}
.udm-pageheader-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
/* Element-Typ-Farben (konsistent zu Sidebar und Breadcrumb) */
.udm-pageheader-icon.ctx-app   { color: var(--udm2026-ctx-app) !important; }
.udm-pageheader-icon.ctx-sys   { color: var(--udm2026-ctx-sys) !important; }
.udm-pageheader-icon.type-dlg  { color: var(--udm2026-type-dlg) !important; }
.udm-pageheader-icon.type-ae   { color: var(--udm2026-type-ae) !important; }
.udm-pageheader-icon.type-ent  { color: var(--udm2026-type-ent) !important; }
.udm-pageheader-icon.type-ds   { color: var(--udm2026-type-ds) !important; }
.udm-pageheader-icon.type-job  { color: var(--udm2026-type-job) !important; }
.udm-pageheader-icon.type-code { color: var(--udm2026-type-code) !important; }

/* Duotone-Icons: Primary/Secondary auf currentColor mappen */
.udm-pageheader-icon > i {
    color: inherit !important;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.45;
}


/* ============================================================
   WORKFLOW-SIDEBAR — Icons groesser + Roots prominenter
   ============================================================ */

/* Items kompakter: kleineres Padding + Gap (override gegenueber Base in Z.1192) */
.udm2026-ti {
    padding: 0.25em 0.55em;
    gap: 0.5em;
}

/* Icon-Bubble: KEIN Hintergrund-Badge mehr — Icon selbst ist farbig (wie in der
   Baum-Ansicht / Systemuebersicht). Damit dominiert das Icon nicht ueber den Text
   und kann kompakt bleiben. */
.udm2026-ti .icon-bubble {
    width: 1.4em;
    height: 1.4em;
    font-size: 1.35em;
    background: transparent !important;
}

/* Type-Farben werden nur als Foreground-Color verwendet, KEIN Background.
   color mit !important, damit FontAwesome-Defaults nicht reingrätschen.
   Plus: das Kind <i> erbt explizit color (FontAwesome setzt nicht selten currentColor). */
.udm2026-ti .icon-bubble.ctx-app   { background: transparent !important; color: var(--udm2026-ctx-app) !important; }
.udm2026-ti .icon-bubble.ctx-sys   { background: transparent !important; color: var(--udm2026-ctx-sys) !important; }
.udm2026-ti .icon-bubble.ctx-mgmt  { background: transparent !important; color: var(--udm2026-ctx-mgmt) !important; }
.udm2026-ti .icon-bubble.type-dlg  { background: transparent !important; color: var(--udm2026-type-dlg) !important; }
.udm2026-ti .icon-bubble.type-ae   { background: transparent !important; color: var(--udm2026-type-ae) !important; }
.udm2026-ti .icon-bubble.type-ent  { background: transparent !important; color: var(--udm2026-type-ent) !important; }
.udm2026-ti .icon-bubble.type-ds   { background: transparent !important; color: var(--udm2026-type-ds) !important; }
.udm2026-ti .icon-bubble.type-job  { background: transparent !important; color: var(--udm2026-type-job) !important; }
.udm2026-ti .icon-bubble.type-code { background: transparent !important; color: var(--udm2026-type-code) !important; }

/* Kind-Elemente erben color vom Bubble.
   Duotone-Icons (fa-duotone) haben EIGENE CSS-Variablen fuer Primary/Secondary-Layer
   (via ::before / ::after). Wir setzen beide auf currentColor, damit die Typ-Farbe
   aus dem icon-bubble tatsaechlich durchschlaegt — sonst bleibt das Duotone-Icon
   in seinen Default-Farben (oft Grau/Schwarz). */
.udm2026-ti .icon-bubble > i,
.udm2026-ti .icon-bubble > svg {
    color: inherit !important;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.45;
}

/* Root-Eintraege: visuelle Abgrenzung erfolgt jetzt durch den Block-
   Container (.udm2026-sidebar-group, Border + BG-Tint) zusammen mit
   einem leicht dunkleren Root-BG-Tint und fetterer Schrift. KEIN
   border-bottom + KEIN margin-bottom mehr — die hatten eine sichtbare
   Trennlinie + Luecke zwischen Root und erstem Kind erzeugt. */
.udm2026-ti.root {
    padding: 0.4em 0.6em;
}
.udm2026-ti.root.active { background: rgba(var(--bs-primary-rgb), 0.12); }
.udm2026-ti.root .icon-bubble {
    width: 1.3em;
    height: 1.3em;
    font-size: 1.25em;
}
/* App-Bild (img) im Root explizit kleiner — sonst dominiert es alle Texte */
.udm2026-ti.root .icon-bubble img {
    max-width: 1.3em;
    max-height: 1.3em;
}
.udm2026-ti.root .udm2026-ti-name { font-size: 1.02em; font-weight: 700; }
.udm2026-ti.root .udm2026-ti-type { font-size: 0.74em; font-weight: 700; opacity: 0.85; }


/* ============================================================
   WORKFLOW-APPBAR — Sidebar-Toggle + Breadcrumb
   ============================================================ */

/* Sidebar-Toggle-Button — links in der AppBar, visuell vom Breadcrumb getrennt
   durch eigenen Hintergrund + rechte Trennlinie */
.udm2026-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    align-self: stretch;
    padding: 0 0.4em;
    color: var(--bs-body-color);
    cursor: pointer;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 0.35em;
    margin-right: 0.4em;
    transition: background 0.12s, color 0.12s;
}
.udm2026-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--bs-primary);
}

/* Breadcrumb (Workflow-Pfad in der AppBar) */
.udm2026-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 1.1em;
}

.udm2026-breadcrumb-segment {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1em;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: 0.25em 0.55em;
    border-radius: 0.3em;
    line-height: 1.15;
    max-width: 14em;
    transition: background 0.12s, color 0.12s;
}
.udm2026-breadcrumb-row1 {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    max-width: 100%;
}
.udm2026-breadcrumb-segment:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
}
.udm2026-breadcrumb-segment.is-active {
    color: var(--bs-body-color);
    font-weight: 600;
    cursor: default;
    /* Aktives Segment = Seitentitel (§5b) → mehr Breite, damit der Titel nicht
       zu frueh abschneidet (Pfad-Segmente bleiben bei 14em). */
    max-width: 24em;
}
.udm2026-breadcrumb-segment.is-active:hover {
    background: transparent;
    color: var(--bs-body-color);
}

.udm2026-breadcrumb-sep {
    color: var(--bs-border-color);
    font-size: 0.75em;
    flex-shrink: 0;
}

/* Icon in Zeile 1 — links neben Topic. Farbe wird ueber ctx-/type-Klasse gesetzt
   (konsistent zur Sidebar). Fallback ist secondary-color (z.B. fuer Home-Icon). */
.udm2026-breadcrumb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    font-size: 0.85em;
    color: var(--bs-secondary-color);
}
.udm2026-breadcrumb-icon.ctx-app   { color: var(--udm2026-ctx-app) !important; }
.udm2026-breadcrumb-icon.ctx-sys   { color: var(--udm2026-ctx-sys) !important; }
.udm2026-breadcrumb-icon.type-dlg  { color: var(--udm2026-type-dlg) !important; }
.udm2026-breadcrumb-icon.type-ae   { color: var(--udm2026-type-ae) !important; }
.udm2026-breadcrumb-icon.type-ent  { color: var(--udm2026-type-ent) !important; }
.udm2026-breadcrumb-icon.type-ds   { color: var(--udm2026-type-ds) !important; }
.udm2026-breadcrumb-icon.type-job  { color: var(--udm2026-type-job) !important; }
.udm2026-breadcrumb-icon.type-code { color: var(--udm2026-type-code) !important; }

/* Duotone-Icons: Primary/Secondary auf currentColor mappen */
.udm2026-breadcrumb-icon > i {
    color: inherit !important;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.45;
}
.udm2026-breadcrumb-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.udm2026-breadcrumb-segment.is-active .udm2026-breadcrumb-icon {
    color: var(--bs-body-color);
}

/* Typ-Kuerzel (z.B. "DIALOG", "ANSICHTSELEMENT") — kleine Caps in Zeile 1 */
.udm2026-breadcrumb-topic {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Label in Zeile 2 — Name der Seite */
.udm2026-breadcrumb-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95em;
    max-width: 100%;
}
/* Aktives (letztes) Segment = Seitentitel der Zwei-Zonen-Konsolidierung (§5b):
   prominenter als die Pfad-Segmente, ersetzt die geloeschte PageHeader-Titelzeile.
   Hervorhebung NUR ueber die Schriftstaerke — die Schriftgroesse bleibt identisch
   zu den Pfad-Segmenten (0.95em), damit die Breadcrumb-Zeile ruhig bleibt. */
.udm2026-breadcrumb-segment.is-active .udm2026-breadcrumb-label {
    font-weight: 700;
}


/* ============================================================
   WORKFLOW-SIDEBAR — Multi-Ref-Indikator + Chevron + Empty-State
   ============================================================ */

/* Empty-State wenn keine Seite offen */
.udm2026-sidebar-empty {
    color: var(--bs-secondary-color);
    font-size: 0.8em;
    padding: 1em;
    text-align: center;
}

/* Chevron fuer klappbare Root-Eintraege (rechts neben Title, vor Close) */
.udm2026-ti-chevron {
    font-size: 0.7em;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: 0.3em 0.4em;
    border-radius: 0.25em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.udm2026-ti-chevron:hover {
    background: rgba(13, 110, 253, 0.08);
    color: var(--bs-primary);
}

/* Multi-Ref-Indikator (Link-Icon hinter dem Titel — dezent, ohne Background) */
.udm2026-ti-multiref {
    font-size: 0.55em;
    color: #6f42c1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.2em;
    opacity: 0.75;
}

/* Klappbare Root: Chevron nutzt vorhandenen Platz neben Close */
.udm2026-ti.root .udm2026-ti-chevron { opacity: 0.8; }
.udm2026-ti.root:hover .udm2026-ti-chevron { opacity: 1; }


/* ============================================================
   PRINT-MODUS — AppBar + Sidebar ausblenden
   ============================================================ */
@media print {
    .udm2026-appbar,
    .udm2026-sidebar {
        display: none !important;
    }
    .udm2026-body { display: block; }
}

/* ============================================================
   KonfigMode: Konfig-Seiten (Admin-VMs im UserClient) heben sich
   in Workflow-Pfad + Breadcrumb ab — kursiv + Schluessel-Kennung.
   Bewusst KEINE Farbe (Lila ist als App-Typfarbe belegt).
   ============================================================ */
.udm2026-ti-type.is-konfig,
.udm2026-ti-name.is-konfig,
.udm2026-breadcrumb-label.is-konfig {
    font-style: italic;
}

/* Konfig-Breadcrumb etwas kleiner als Datenseiten-Crumbs: Konfig-Seiten sollen nie
   groesser wirken als die Datenseiten. Gilt auch im AKTIV-Zustand, da dieser nur
   noch die Schriftstaerke aendert (siehe oben). */
.udm2026-breadcrumb-label.is-konfig {
    font-size: 0.9em;
}

/* Schluessel-Kennung im Breadcrumb (hinter dem Typ-Kuerzel). */
.udm2026-konfig-mark {
    font-size: 0.6em;
    opacity: 0.65;
    margin-left: 0.3em;
    vertical-align: baseline;
}

/* Konfig-Kennung im Nav-Eintrag: KEIN eigenes Schluessel-Icon (kollidierte mit der
   Mini-Sidebar) — stattdessen leuchtet die Icon-Bubble selbst (weicher Glow in der
   KonfigMode-Farbe, wie Karten/FAB). Funktioniert in voller UND Mini-Sidebar. */
.udm2026-ti .icon-bubble.is-konfig {
    box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.35), 0 0 10px 2px rgba(111, 66, 193, 0.50);
}


/* =============================================================================
   Knopf-Bauform des Auswahl-Steuerelements (UdmSubdialogPicker)

   EIN Knopf über die volle Breite statt einer Reiterleiste. Entstanden für das
   schmale Konfig-Fenster, das es seit dem 25.09.2026 nicht mehr gibt (Regel K21).
   Prototyp: docs/04_design/prototypes/inspektor-unterdialog-auswahl.html
   ============================================================================= */
.udm-pageheader-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    width: 100%;
    padding: 0.45em 0.7em;
    font: inherit;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--bs-body-color);
    text-align: left;
    /* Der Knopf setzt sich nach UNTEN von seiner Zeile ab, nicht nach oben
       (PO 19.08.2026). Weiß hätte in der ruhigen Konfig-Fläche geleuchtet.
       Die Grau-Treppe hat die Stufen schon: Die Zeile liegt auf --udm-kf-gruppe,
       der Knopf eine Stufe darunter auf --udm-kf-header, beim Überfahren noch eine
       auf --udm-kf-markierung (udm_colors.css). Kein neuer Farbwert nötig, und die
       Abstufung folgt dem gewählten Theme von selbst.
       Prototyp: docs/04_design/prototypes/konfig-umschalter-aufwerten.html */
    background: var(--udm-kf-header, var(--bs-tertiary-bg, rgba(0, 0, 0, 0.06)));
    border: 1px solid var(--udm-kf-rand, var(--bs-border-color));
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Überfahren: eine weitere Stufe. Das ist das zweite Zeichen dafür, dass hier
   etwas anzufassen ist — das erste ist der Pfeil. */
.udm-pageheader-picker-btn:hover {
    background: var(--udm-kf-markierung, var(--bs-secondary-bg));
    border-color: color-mix(in srgb, var(--udm-kf-akzent, var(--bs-primary)) 40%,
                            var(--udm-kf-rand, var(--bs-border-color)));
}

/* Geöffnet: Der Knopf zeigt seinen Zustand, damit klar ist, wohin die Liste gehört.
   Fläche eine Stufe kräftiger, dazu die Hausfarbe an der Kante und ein schmaler Ring.
   Derselbe Ring wie beim Fokus eines Feldes — gleiches Zeichen für dieselbe Aussage. */
.udm-pageheader-picker-btn.open {
    background: var(--udm-kf-markierung, var(--bs-secondary-bg));
    border-color: var(--udm-kf-akzent, var(--bs-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--udm-kf-akzent, var(--bs-primary)) 16%, transparent);
    color: var(--udm-kf-text, var(--bs-body-color));
}

/* Zwei Zeilen: oben die Gruppe des Unterdialogs, darunter sein Name. Die Gruppe
   sagt, wo man sich befindet — ohne sie muss der Admin die Liste öffnen, um das
   zu sehen. Beide Zeilen kürzen mit Auslassung; der Name steht voll im Tooltip. */
.udm-pageheader-picker-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.udm-pageheader-picker-crumb {
    font-size: 0.82em;
    font-weight: 400;
    line-height: 1.2;
    color: var(--udm-kf-text-leise, var(--bs-secondary-color, #6c757d));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm-pageheader-picker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm-pageheader-picker-right {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex: 0 0 auto;
}

.udm-pageheader-picker-btn .fa-chevron-down {
    font-size: 0.72em;
    opacity: 0.75;
}

/* ============================================================================
   Die gemeinsame Unterdialog-Auswahl (UdmSubdialogPicker)

   EIN Steuerelement für zwei Stellen: den schmalen Konfig-Inspektor und den rechten
   Bereich der großen Masken. Vorher lag beides doppelt im Markup.
   ============================================================================ */

/* Der Anker des Popups. Er sitzt ENG um den Knopf und nicht um die ganze Zeile:
   Sonst begänne die Liste am linken Rand der Zeile, also links neben dem
   Schließen-Kreuz statt unter dem Knopf (PO 19.08.2026). */
.udm-picker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Volle Bauform: Der Knopf hat überall dieselbe Höhe. Ohne Mindesthöhe richtet er
   sich nur nach seinem Text und wirkt in der Kopfzeile flacher als im rechten
   Bereich (PO 19.08.2026). */
.udm-picker:not(.compact) .udm-pageheader-picker-btn {
    min-height: 2.4em;
}

/* Kompakte Bauform in der Reiter-Zeile: nur so breit wie nötig, an der Grundlinie
   der Reiter. */
.udm-picker.compact {
    flex: 0 1 auto;
    align-self: flex-end;
    margin-bottom: 0.25em;
}

.udm-picker.compact .udm-pageheader-picker-btn {
    width: auto;
    max-width: 14em;
    padding: 0.25em 0.6em;
    font-size: 0.85em;
}

/* Die Liste beginnt linksbündig unter dem Knopf und ist mindestens so breit wie er.
   Bei langen Einträgen darf sie nach rechts wachsen. */
.udm-pageheader-popup.udm-picker-popup {
    left: 0;
    right: auto;
    min-width: 100%;
    margin-top: 0.2em;
}

/* Nur das Aussehen der Liste. Eigene Klasse, damit beide Auswahl-Listen sie tragen
   können: der Knopf im schmalen Konfig-Fenster UND der Titel-Knopf des rechten
   Bereichs in den großen Masken (Udm2026SecondaryDropdown). Die Lage regelt jede
   der beiden weiter für sich. */
/* Deutlich abgesetzt vom Grund (PO 19.08.2026, Stufe 2 im Prototyp): tiefer Schatten
   mit echter Höhe statt einer flachen Kante, dazu ein Rand, der einen Hauch Hausfarbe
   trägt. Ohne das verschwamm die Liste auf hellem Grund mit dem Hintergrund. Bewusst
   OHNE Abdunkeln des Restes — das wirkte wie ein Dialog und stoppte den Blick. */
.udm-pageheader-popup.udm-pageheader-popup-grouped {
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--udm-kf-akzent, var(--bs-primary)) 30%,
                            var(--bs-border-color));
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.20), 0 2px 6px rgba(16, 24, 40, 0.10);
    /* Dezent grau statt weiß (PO 19.08.2026): Die Liste ist eine eigene Ebene über der
       Fläche, kein Blatt Papier darauf. Die Stufe ist die ruhigste der Grau-Treppe. */
    background: var(--udm-kf-grund, var(--bs-body-bg));
    /* Höhe begrenzt: Bei achtzehn Unterdialogen lief die Liste sonst über den
       unteren Rand hinaus. Rollbalken erscheint nur, wenn er gebraucht wird
       (overflow-y: auto steht an .udm-pageheader-popup). */
    max-height: min(60vh, 460px);
    /* Die Zeilen laufen von Rand zu Rand (Balken links), deshalb kein Innenabstand
       an den Seiten. Unten bleibt ein Rest, damit die letzte Zeile nicht klebt. */
    padding: 0 0 0.3em;
    overflow-x: hidden;
}

/* ---- Gliederung der Unterdialog-Liste (Weg A, PO 19.08.2026) ----
   Vorher standen alle Einträge flach und gleich gewichtet untereinander, in
   kleiner Schrift. Jetzt tragen sie die Überschrift ihrer Gruppe (Struktur,
   Darstellung, Daten, Verwaltung), stehen auf Bedienhöhe und zeigen die Anzahl
   rechts. Prototyp: docs/04_design/prototypes/konfig-unterdialog-auswahl-v2.html

   Die Überschrift klebt beim Rollen oben fest. Sonst weiss man in einer langen
   Liste nicht mehr, in welcher Gruppe man gerade liest. */
.udm-pageheader-popup-grouped .udm-pageheader-popup-group-title {
    font-size: 0.8em;
    opacity: 1;
    /* Dieselbe Farbe wie die Gruppentitel im Inhalt des Unterdialogs (udm_colors.css,
       Block "Die Hausfarbe an den Signalstellen"). Gleiche Aussage, gleiche Farbe —
       und auf der hellen Fläche des Popups besser zu lesen als das frühere Grau
       (PO 19.08.2026). */
    color: var(--udm-kf-akzent, var(--bs-primary));
    padding: 0.55em 0.7em 0.3em;
    position: sticky;
    top: 0;
    z-index: 1;
    /* Dieselbe Fläche wie das Popup: Beim Rollen zöge sonst ein weißer Streifen mit. */
    background: var(--udm-kf-grund, var(--bs-body-bg));
    border-bottom: 1px solid var(--udm-kf-rand, var(--bs-border-color));
}

/* Bedienhöhe statt Listenhöhe: Die Zeile ist ein Klickziel, kein Textabsatz.
   Der Balken links bleibt unsichtbar, bis die Zeile die gewählte ist. */
.udm-pageheader-popup-grouped .udm-pageheader-popup-item {
    padding: 0.5em 0.7em;
    font-size: 0.95em;
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
}

.udm-pageheader-popup-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udm-pageheader-popup-grouped .udm-pageheader-popup-item:hover {
    background: var(--udm-kf-gruppe, rgba(0, 0, 0, 0.03)) !important;
    color: var(--udm-kf-text, var(--bs-body-color)) !important;
}

/* Gewählter Eintrag: Fläche, fetter Name UND ein farbiger Balken links.
   Die Konfig-Fläche ist bewusst grau; der Balken trägt deshalb die einzige
   Farbe des Bereichs (--udm-kf-fokus, siehe udm_colors.css). */
.udm-pageheader-popup-grouped .udm-pageheader-popup-item.active {
    background: var(--udm-kf-markierung, var(--bs-secondary-bg)) !important;
    border-left-color: var(--udm-kf-fokus, var(--bs-primary)) !important;
    color: var(--udm-kf-text, var(--bs-body-color)) !important;
    font-weight: 600;
}

/* Eine Null ist eine Aussage ("nichts hinterlegt"), aber keine, die Aufmerksamkeit
   braucht. Sie steht deshalb ohne Fläche und ohne Fettung da, seit 26.09.2026 auch an den
   Reitern und im Überlauf der Kopfzeile. */
.udm-pageheader-picker .udm-pill-count.is-zero,
.udm-pageheader-popup-grouped .udm-pill-count.is-zero,
.udm-pageheader-popup-item .udm-pill-count.is-zero,
.udm-tab .udm-tab-count.is-zero {
    background: transparent;
    font-weight: 400;
    color: var(--udm-kf-text-leise, var(--bs-secondary-color, #6c757d));
}



/* Der Kopf ist die dunklere Flaeche, die Zeilen darunter (Pillen, Werkzeuge) die helle
   (Sichtpruefung 30.08.2026, Punkt 1). Nur auf Konfig-Flaechen: Datenseiten behalten
   ihre helle Kopfzeile (--bs-light, Basisregel .udm-workzone).
   Runde 2: eine Stufe heller als zuerst gebaut — kf-header/kf-gruppe machten ALLE
   Zeilen dunkel und gedrueckt. Jetzt: Kopf = kf-gruppe, alles darunter = kf-grund. */
.udm-konfig-flaeche .udm-workzone {
    background: var(--udm-kf-gruppe, var(--bs-light, #f6f7f9));
}

.udm-konfig-flaeche .udm-pane-werkzeuge,
.udm-konfig-flaeche .udm-secondary-werkzeuge,
.udm-konfig-flaeche .udm-secondary-wahlzeile {
    background: var(--udm-kf-grund, var(--bs-body-bg, #fff));
}

/* =============================================================================
   EINE Knopf-Höhen-Marke für die Werkzeug- und Pillen-Zeilen der Konfig-Flächen.

   DevTools-Messung (30.08.2026): Beide Zeilen trugen identische min-height, Rand
   und Schriftmarke — und waren TROTZDEM verschieden hoch (45.3 vs. 42.4 px), weil
   BEIDE über ihrer Mindesthöhe lagen: Die Zeilenhöhe kommt aus dem Inhalt, links
   DevExpress-Knöpfe (~32.5 px), rechts flachere Pillen (~30 px). Ein Puffer an der
   Zeilen-Mindesthöhe war deshalb wirkungslos.

   Konsolidierung: Nicht die Zeilen angleichen, sondern ihre INHALTE. Alle Knöpfe
   und Pillen beider Zeilen tragen dieselbe Mindesthöhe aus dieser einen Marke
   (2.55em = 32.5 px bei 12.8 px Basisschrift, gemessen am DevExpress-Knopf).
   Beide Zeilen enden damit inhaltsgetrieben auf derselben Höhe.
   ============================================================================= */
:root {
    --udm-kopfzeilen-knopf-hoehe: 2.55em;
}

.udm-pill,
.udm-pill-aufklappen {
    min-height: var(--udm-kopfzeilen-knopf-hoehe);
}

.udm-konfig-flaeche
:is(.udm-pane-werkzeuge, .udm-secondary-werkzeuge, .udm-secondary-wahlzeile)
:is(.dxbl-btn, .udm-split-btn, .udm-dropdown-btn, .udm-button):not(.udm-pill):not(.dxbl-btn-group .dxbl-btn) {
    min-height: var(--udm-kopfzeilen-knopf-hoehe);
}

/* --- Der Weg zurück zur Übersicht (Udm2026SecondaryDropdown, OverviewSubform): steht in der
   Zeile der rechten Hälfte an der Stelle der Pillen. Rand, Fläche und Höhe bringt die Zeile
   selbst mit (.udm-secondary-wahlzeile); hier nur die Anordnung. --- */
.udm-kopf-zurueck {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex: 1 1 auto;
    min-width: 0;
}

.udm-kopf-zurueck__knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0.1em 0.2em;
    color: var(--bs-link-color);
    cursor: pointer;
}

    .udm-kopf-zurueck__knopf:hover {
        text-decoration: underline;
    }

.udm-kopf-zurueck__bereich {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* ===== Übersicht der Konfig-Sidebar (KonfigUebersichtPage, KonfigVerlaufPage) =====
   Angaben und Bereichskarten; dazu der Verlauf als eigener Bereich. Den Baum trägt seit dem
   28.09.2026 der Eintrag in der Seitenleiste (Abschnitt „Baum in der Seitenleiste“). Die Seiten
   scrollen nicht selbst; das tut der Rahmen des Unterdialogs.
   Vorbild: docs/04_design/prototypes/konfig-inline-aktionen-iteration-5.html */
.udm-uebersicht {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    padding: 0.6em var(--udm-werkzeug-rand);
}

/* Der Verlauf füllt die rechte Hälfte, und die LISTE rollt, nicht die Seite. So stehen ihre
   Laufleiste und die Blätter-Zeile immer unten im Bild (Befund Inhaber, 27.09.2026; dieselbe
   Regel galt im früheren Fenster der Konfig-Leiste, Befund 08.09.2026). */
.udm-verlauf {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0.6em var(--udm-werkzeug-rand);
}

/* --- Angaben: der Stand als Knopf, der den Verlauf öffnet --- */
.udm-uebersicht-stand {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    border: none;
    background: none;
    padding: 0.2em 0;
    text-align: left;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

    .udm-uebersicht-stand:hover .udm-uebersicht-stand__text {
        text-decoration: underline;
    }

.udm-uebersicht-wartet {
    padding: 0 0.5em;
    border-radius: 1em;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    font-size: 0.88em;
}
/* Dasselbe Element wartet auch in anderen offenen Containern: ein Hinweis unter dem Stand
   (Arbeiten im Container, C5, F103; Prototyp element-andere-container-prototyp.html). */
.udm-uebersicht-anderswo {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    margin-top: 0.25em;
    padding: 0.35em 0.6em;
    border-radius: 0.35em;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    font-size: 0.9em;
}
    .udm-uebersicht-anderswo i {
        margin-top: 0.2em;
    }
    .udm-uebersicht-anderswo ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

/* --- Assistenten: Kasten und Knöpfe der UDM-Info (ei-actionbar, ei-wizard-chip in
   udm_mainpage_styles.css). Nur der Außenabstand entfällt, damit der Kasten mit den Karten
   darunter bündig steht; den Abstand dazwischen gibt die Übersicht. --- */
.udm-uebersicht > .ei-actionbar {
    margin: 0;
}

/* --- Rahmen der Bereichskarten --- */
.udm-uebersicht-gruppe {
    border: 1px solid var(--udm-kf-rand, var(--bs-border-color));
    border-radius: 0.3em;
    background: var(--bs-body-bg);
}

/* --- Bereichskarten: eine Karte je Gruppe, darin die Bereiche --- */
.udm-uebersicht-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
    gap: 0.5em;
}

    .udm-uebersicht-karten > * {
        min-width: 0;
    }

.udm-uebersicht-gruppe {
    display: flex;
    flex-direction: column;
    padding: 0.4em 0.5em;
}

.udm-uebersicht-gruppe__kopf {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.2em;
    font-weight: 600;
}

    .udm-uebersicht-gruppe__kopf i {
        color: var(--bs-secondary-color);
    }

.udm-uebersicht-bereich {
    display: flex;
    align-items: baseline;
    border: none;
    background: none;
    padding: 0.15em 0.3em;
    border-radius: 0.2em;
    text-align: left;
    color: var(--bs-link-color);
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

    .udm-uebersicht-bereich:hover {
        background: var(--bs-tertiary-bg);
    }

/* Ein langer Name wird gekürzt, die Zahl bleibt stehen. */
.udm-uebersicht-bereich__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mit Inhalt fett, leere grau und ohne Wort (Regel K7, IK18, Inhaber 26.09.2026). */
.udm-uebersicht-bereich.is-inhalt {
    font-weight: 600;
}

.udm-uebersicht-bereich.is-leer {
    color: var(--udm-kf-text-leise, var(--bs-secondary-color));
}

/* Die Anzahl steht rechtsbündig (Inhaber, 26.09.2026). */
.udm-uebersicht-bereich__anzahl {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.5em;
    font-size: 0.88em;
}

/* --- Die Pillen-Leiste (UdmSubdialogPicker, Bauform Pills) --- */
/* Anker des Popups. flex:1: In der Wahlzeile des rechten Bereichs nimmt die Leiste
   die Breite vor dem Schliessen-Kreuz. */
.udm-pillbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25em;
    flex: 1 1 auto;
    min-width: 0;
}

/* Eine Pille. flex:1 1 0: Alle Pillen teilen sich die verfuegbare Breite gleich,
   lange Namen kuerzen mit Auslassung (Titel-Span). */
.udm-pill {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-width: 0;
    overflow: hidden;
    padding: 0.42em 0.8em;
    border: none;
    border-radius: 999px;
    /* Jede Pille traegt eine Flaeche, nicht nur die offene: Sonst wirken die
       inaktiven wie nackter Text (Sichtpruefung 30.08.2026, Punkt 3). Auf der
       hellen Zeile funktioniert eine leichte GRAU-Toenung, weisse Flaechen
       gingen dort unter (Runde 2). */
    background: rgba(0, 0, 0, 0.05);
    color: var(--udm-kf-text-leise, var(--bs-secondary-color, #6c757d));
    font: inherit;
    /* Exakt die Schriftgroesse der Werkzeug-Knoepfe darunter: beide Zeilen laufen auf
       derselben Benutzer-Marke, die Pille erbt sie 1:1 (Sichtpruefung 30.08., Runde 4). */
    font-size: 1em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.udm-pill:hover {
    background: rgba(0, 0, 0, 0.09);
    color: var(--udm-kf-text, var(--bs-body-color));
}

/* Die offene Pille: weisse Flaeche mit weichem Schatten, das einzige kraeftige
   Element der Zeile. */
.udm-pill.active {
    background: var(--bs-body-bg, #fff);
    color: var(--udm-kf-text, var(--bs-body-color));
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10), 0 1px 4px rgba(16, 24, 40, 0.12);
}

.udm-pill-title {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Der Aufklapp-Knopf: ein EIGENES Element rechts neben der vierten Pille, kein
   Zonen-Teil der Pille (PO 30.08.2026, Runde 9). Gleiche Formsprache wie die
   Pillen (Flaeche, Rundung, Hover ueber die ganze Flaeche), nimmt aber keine
   Pillenbreite ein. */
.udm-pill-aufklappen {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    /* Bewusst breit: Der Knopf ist das Tor zu allen weiteren Unterdialogen und soll
       schnell zu treffen sein (Sichtpruefung 30.08., Runde 10). */
    min-width: 3.2em;
    padding: 0 0.9em;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--udm-kf-text-leise, var(--bs-secondary-color, #6c757d));
    font: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.udm-pill-aufklappen:hover {
    background: rgba(0, 0, 0, 0.09);
    color: var(--udm-kf-text, var(--bs-body-color));
}

.udm-pill-aufklappen i {
    font-size: 0.95em;
}

/* Die Liste oeffnet rechtsbuendig unter der Leiste, also unter der vierten Pille.
   Beide Einsatzorte (Sidebar, rechter Bereich) sitzen am rechten Viewport-Rand —
   linksbuendig wuerde die Liste dort abgeschnitten. */
.udm-pillbar .udm-pageheader-popup {
    top: 100%;
    left: auto;
    right: 0;
    margin-top: 0.25em;
}

/* --- Eine Knopf-Sprache auf Konfig-Flaechen (PO 30.08.2026: erst Konfig, global spaeter) ---
   Die Werkzeug-Kacheln (Frosted Glass, udm_buttons.css) werden auf Konfig-Flaechen flach:
   transparent, grau, Flaeche erst beim Ueberfahren. Die blaue Kachel traegt keine Aussage.
   Muster und !important-Begruendung wie beim Header-Override (.udm-content-header,
   udm_buttons.css): die globalen Kachel-Regeln arbeiten selbst mit !important. */
.udm-konfig-flaeche .udm-flex-toolbar > .dxbl-btn:not(.udm-pruefstand),
.udm-konfig-flaeche .udm-flex-toolbar .udm-split-btn:not(.udm-pruefstand),
.udm-konfig-flaeche .udm-flex-toolbar .udm-dropdown-btn:not(.udm-pruefstand) {
    /* Ganz feine Flaeche zur Abgrenzung statt voller Kachel (Sichtpruefung 30.08., Runde 3).
       Der Pruefstand ist ausgenommen: Er traegt als einzige Aktion eine Aussage-Flaeche
       (Pill-Bauform, Block "B7" am Dateiende). */
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-radius: 5px;
    /* Textfarbe wie die Werkzeuge der Info-Leiste, nicht Hausfarbe. OHNE !important:
       Eine Aktion mit eigener Aussage-Farbe (Forecolor als Inline-Style, z.B. der
       gruene Pruefstand) muss ihre Farbe behalten. */
    color: var(--bs-body-color);
    border: none !important;
    box-shadow: none !important;
}

.udm-konfig-flaeche .udm-flex-toolbar > .dxbl-btn:not(.udm-pruefstand):not(.dxbl-disabled):not(:disabled):hover,
.udm-konfig-flaeche .udm-flex-toolbar .udm-split-btn:not(.udm-pruefstand):hover,
.udm-konfig-flaeche .udm-flex-toolbar .udm-dropdown-btn:not(.udm-pruefstand):hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--bs-primary);
    box-shadow: none !important;
}

.udm-konfig-flaeche .udm-flex-toolbar .dxbl-btn-group {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.udm-konfig-flaeche .udm-flex-toolbar .dxbl-btn-group:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    box-shadow: none !important;
}

.udm-konfig-flaeche .udm-flex-toolbar .dxbl-btn-group .dxbl-btn {
    background: transparent !important;
    color: var(--bs-secondary-color);
}

/* Sicherheitsnetz ueber die ZEILE statt ueber die Toolbar-Klasse: In der Sichtpruefung
   (30.08.2026, Runde 2) blieben die Kacheln im Vollbild stehen, obwohl derselbe
   Override in der Sidebar wirkte. Bis die Ursache am lebenden DOM gemessen ist,
   greifen die Zeilen-Container als zweiter Anker — sie umschliessen die Werkzeuge
   in beiden Bereichen sicher. */
.udm-konfig-flaeche
:is(.udm-pane-werkzeuge, .udm-secondary-werkzeuge, .udm-secondary-wahlzeile)
:is(.dxbl-btn, .udm-split-btn, .udm-dropdown-btn, .udm-button):not(.udm-pill):not(.udm-pruefstand):not(.dxbl-btn-group .dxbl-btn) {
    /* Ganz feine Flaeche zur Abgrenzung; Farbe wie die Info-Leisten-Werkzeuge.
       color ohne !important, damit Aussage-Farben (Inline-Forecolor) gewinnen.
       Pruefstand ausgenommen — er traegt seine Aussage-Flaeche (B7, Dateiende). */
    background: rgba(0, 0, 0, 0.04) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-radius: 5px;
    color: var(--bs-body-color);
    border: none !important;
    box-shadow: none !important;
}

.udm-konfig-flaeche
:is(.udm-pane-werkzeuge, .udm-secondary-werkzeuge, .udm-secondary-wahlzeile)
:is(.dxbl-btn, .udm-split-btn, .udm-dropdown-btn, .udm-button):not(.udm-pill):not(.udm-pruefstand):not(:disabled):hover {
    background: rgba(var(--bs-primary-rgb), 0.1) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

/* EINE Schriftgroesse fuer alle Kopf- und Werkzeug-Zeilen der Konfig-Flaechen: die
   rem-Marke der Benutzereinstellung (body.udm-fontsize-*, udm_default.css). Vorher
   erbte jede Zeile aus ihrem Kontext, dieselben em-Werte ergaben verschiedene
   Groessen (Sichtpruefung 30.08., Runde 3: "unterschiedlich und oft zu gross"). */
.udm-konfig-flaeche
:is(.udm-workzone, .udm-pane-werkzeuge, .udm-secondary-werkzeuge, .udm-secondary-wahlzeile) {
    font-size: var(--udm-base-font-size, 0.8rem);
}


/* -----------------------------------------------------------------------------
   Toast-Portal faengt keine Maus (Befund 30.08.2026, DevTools-Messung)

   Der DxToastProvider des UIInfoControl (Name "UdmInfoToast_...") rendert sein
   Portal DAUERHAFT: 450px breit, oben mittig, z-index 2500 — auch wenn gerade
   keine Meldung angezeigt wird. In der Konfig-Sidebar lag dieser unsichtbare
   Streifen ueber Anker- und Pillen-Zeile; die erste Pille war dadurch zeitweise
   nicht anklickbar (Cursor blieb im Standard-Zustand).

   Das leere Portal wird fuer die Maus durchlaessig; seine Kinder (die sichtbaren
   Meldungen samt Schliessen-Knopf) bleiben voll bedienbar. Bewusst nur auf die
   UdmInfoToast-Portale begrenzt, nicht auf alle DevExpress-Toasts.
   ----------------------------------------------------------------------------- */
dxbl-toast-portal[name^="UdmInfoToast"] {
    pointer-events: none;
}

dxbl-toast-portal[name^="UdmInfoToast"] > * {
    pointer-events: auto;
}

/* Die Fehlermeldung zeigt ihren ganzen Text (Inhaber, 28.09.2026: „Der Fehlertext sollte ganz zu
   sehen sein, wir blenden einen Scrollbalken ein“). DevExpress kürzt den Text sonst nach wenigen
   Zeilen mit „…“ (-webkit-line-clamp an .dxbl-toast-text). Ab einer festen Höhe rollt er;
   Zeilenumbrüche, etwa eines Stack-Traces, bleiben stehen. Die Höhe in em, gemessen an der
   Schrift der Meldung. Nur Fehlermeldungen, Hinweise bleiben, wie sie sind. */
.dxbl-toast-portal .udm-fehler-toast .dxbl-toast-content .dxbl-toast-text-content .dxbl-toast-text {
    display: block;
    -webkit-line-clamp: unset;
    max-height: min(22em, 50vh);
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* -----------------------------------------------------------------------------
   B7: Der Pruefstand als farbige Pille (Konzept: konfig-kopf-zielbild.html,
   Regel "Farbe nur mit Aussage")

   Die Aktion "Konfiguration" traegt ihre Stilklasse ueber die Appearance
   (BaseDetailViewModelAdmin.Validation.cs): "udm-pruefstand" im gruenen
   Grundzustand, zusaetzlich "--fehler" bei Befunden. Text- und Icon-Farbe
   kommen weiterhin als Aussage-Farbe aus dem ViewModel (Inline-Forecolor);
   hier entsteht nur die Flaeche dazu. Die Flach-Overrides der Konfig-Flaechen
   nehmen die Klasse aus (":not(.udm-pruefstand)").
   ----------------------------------------------------------------------------- */
.udm-flex-toolbar .udm-pruefstand {
    border-radius: 999px;
    padding: 0.3em 0.9em;
    background-color: color-mix(in srgb, var(--bs-success) 13%, transparent) !important;
    border: none;
    box-shadow: none;
}

.udm-flex-toolbar .udm-pruefstand:hover {
    background-color: color-mix(in srgb, var(--bs-success) 22%, transparent) !important;
}

.udm-flex-toolbar .udm-pruefstand.udm-pruefstand--fehler {
    background-color: color-mix(in srgb, var(--bs-danger) 12%, transparent) !important;
}

.udm-flex-toolbar .udm-pruefstand.udm-pruefstand--fehler:hover {
    background-color: color-mix(in srgb, var(--bs-danger) 20%, transparent) !important;
}


/* ===== Baum in der Seitenleiste (Udm2026SidebarKonfigEintrag) =====
   Der Eintrag eines Konfig-Detaildialogs steht als eigene Karte, eingerückt unter der Seite, aus
   der er geöffnet wurde, mit Abstand zu den übrigen Einträgen (Regel K28). Der Kopf trägt das Grau
   der Konfig-Fläche mit dem Schraubenschlüssel, der Baum steht auf Weiß; so ist klar, dass er zum
   Kopf gehört und nicht zur Navigation (Inhaber, 28.09.2026).
   Nachtrag: docs/03_features/userclient-konfig-modus/konfig-baum-seitenleiste-nachtrag.html
   Skizze: docs/04_design/prototypes/konfig-baum-seitenleiste-prototyp.html */
.udm2026-konfig-eintrag {
    margin: 0.5em 0.45em 0.55em calc(0.45em + var(--udm-konfig-tiefe, 0) * 0.85em);
    border: 1px solid var(--udm-kf-rand, var(--bs-border-color));
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

    /* Der Kopf: Einrückung und Baumlinien übernimmt die Karte. */
    .udm2026-konfig-eintrag > .udm2026-ti,
    .udm2026-konfig-eintrag > .udm2026-ti.root {
        padding-left: 0.65em;
        background: var(--udm-kf-header);
    }

        .udm2026-konfig-eintrag > .udm2026-ti::before,
        .udm2026-konfig-eintrag > .udm2026-ti::after {
            display: none;
        }

        .udm2026-konfig-eintrag > .udm2026-ti:hover {
            background: var(--udm-kf-markierung);
        }

        .udm2026-konfig-eintrag > .udm2026-ti.active {
            background: rgba(var(--bs-primary-rgb), 0.16);
            box-shadow: inset 3px 0 0 var(--bs-primary);
        }

/* Schraubenschlüssel in Graphit auf dem Grau der Konfig-Fläche, ohne Leuchten (Regeln K22, K28). */
.udm2026-ti .icon-bubble.is-konfig-kopf {
    background: var(--udm-kf-hervorhebung) !important;
    color: var(--udm-kf-text) !important;
    box-shadow: none;
}

/* Der Baum unter dem Kopf, auf Weiß. */
.udm2026-konfig-baum {
    padding: 0.25em 0 0.35em;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--udm-kf-rand, var(--bs-border-color));
}

.udm2026-konfig-laedt {
    padding: 0.3em 0.65em;
    color: var(--bs-secondary-color);
}

/* Eine Zeile je Element; die Einrückung kommt aus --udm-konfig-zeile-tiefe. */
.udm2026-konfig-zeile {
    display: flex;
    align-items: center;
    gap: 0.35em;
    min-width: 0;
    padding: 0.2em 0.5em 0.2em calc(0.4em + var(--udm-konfig-zeile-tiefe, 0) * 1.1em);
    cursor: pointer;
}

    .udm2026-konfig-zeile:hover {
        background: var(--bs-tertiary-bg);
    }

    /* Das Element, das der Eintrag zeigt, markiert wie der aktive Eintrag der Seitenleiste:
       getönter Grund, Strich links, Name in der Hauptfarbe. Nach einem Wechsel im Baum wandert nur
       diese Markierung, der Baum bleibt (IK17). */
    .udm2026-konfig-zeile.is-markiert {
        background: rgba(var(--bs-primary-rgb), 0.12);
        box-shadow: inset 3px 0 0 var(--bs-primary);
        cursor: default;
    }

.udm2026-konfig-zeile__klapp {
    flex-shrink: 0;
    width: 1.3em;
    text-align: center;
    color: var(--bs-secondary-color);
}

button.udm2026-konfig-zeile__klapp {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* Das Symbol in der Farbe seiner Elementart, ohne Kästchen (udm-type-fg-{key} aus udm_colors.css),
   wie im Apps-Baum der Administration (Inhaber, 28.09.2026). Arten ohne eigene Farbe stehen grau.
   Hier bleibt die Breite, damit die Namen untereinander stehen. */
.udm2026-konfig-zeile__symbol {
    flex-shrink: 0;
    width: 1.3em;
    text-align: center;
    color: var(--bs-secondary-color);
}

    /* Das Glyph selbst erbt Farbe und beide Duotone-Farben vom Kästchen darum; sonst färbt die
       allgemeine Regel aus udm_fontawesome.css jedes Symbol, einfarbig wie Duotone, in der
       Hauptfarbe. Gleiche Stärke (0,2,0), später geladen; dasselbe Vorgehen wie der Apps-Baum
       (udm_admin.css, .udm-tree-icon-cell > *). */
    .udm2026-konfig-zeile__symbol > :not(.disabled) {
        color: inherit;
        --fa-primary-color: currentColor;
        --fa-secondary-color: currentColor;
    }

.udm2026-konfig-zeile__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .udm2026-konfig-zeile:not(.is-markiert):hover .udm2026-konfig-zeile__name {
        text-decoration: underline;
    }

    .udm2026-konfig-zeile.is-markiert .udm2026-konfig-zeile__name {
        color: var(--bs-primary);
        font-weight: 600;
    }

/* Die Elementart hinter dem Namen, bei Ansichtselementen die Bauart (Inhaber, 28.09.2026:
   zuerst der Name). */
.udm2026-konfig-zeile__art {
    color: var(--bs-secondary-color);
    font-size: 0.88em;
    font-weight: normal;
    margin-left: 0.35em;
}

/* Der Punkt für eine wartende Änderung im Container: der Änderungspunkt der Tabellen
   (udm-grid-change-dot in udm_buttons.css). Er behält seine Größe, wenn der Name gekürzt wird. */
.udm2026-konfig-zeile__punkt {
    flex-shrink: 0;
}

/* Rechts das Zeitstempel-Badge der UDM; seine Gestaltung bringt es selbst mit. */
.udm2026-konfig-zeile__alter {
    flex-shrink: 0;
}

/* Die schmale Seitenleiste zeigt zugeklappt nur den Kopf, ohne Kartenrahmen. Aufgeklappt erscheint
   der Baum darunter, und die Einträge darunter rücken nach unten (Inhaber, 28.09.2026: „Nur beim
   Aufklappen“). Er blendet erst ein, wenn die Leiste fast offen ist, wie die Namen der Einträge
   (Abschnitt „SIDEBAR — MINI-MODUS“). */
.udm2026-sidebar.is-mini .udm2026-konfig-eintrag {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.udm2026-sidebar.is-mini .udm2026-konfig-baum {
    display: none;
}

.udm2026-sidebar.is-mini:hover .udm2026-konfig-baum {
    display: block;
    animation: udm2026-konfig-baum-ein 0.18s ease 0.2s both;
}

/* Der Kopf behält aufgeklappt seine Einrückung aus der Karte, nicht die der Tiefe. */
.udm2026-sidebar.is-mini:hover .udm2026-konfig-eintrag > .udm2026-ti {
    padding-left: 0.65em;
}

@keyframes udm2026-konfig-baum-ein {
    from { opacity: 0; }
    to { opacity: 1; }
}