:root {
    --ciblu-brand-primary: #ba0c2f;
    --ciblu-brand-primary-rgb: 186, 12, 47;
    --ciblu-brand-primary-dark: #5f0912;
    --ciblu-brand-primary-dark-rgb: 95, 9, 18;
    --ciblu-brand-black: #000000;
    --ciblu-brand-white: #ffffff;
    --ciblu-page-bg: #fbf7f8;
    --ciblu-surface: #ffffff;
    --ciblu-surface-subtle: #f9f2f4;
    --ciblu-border-subtle: rgba(95, 9, 18, 0.12);
    --ciblu-shadow-soft: 0 0.75rem 1.75rem rgba(95, 9, 18, 0.08);
    --ciblu-shadow-strong: 0 1.5rem 3rem rgba(95, 9, 18, 0.14);
    --ciblu-card-radius: 1rem;

    /* Rollen-Tokens (CMEM-248, DESIGN_SYSTEM §3.4): Füllfarbe von Marken-Flächen (aktiver Nav-Eintrag, Sprachumschalter,
       Avatar) samt Schrift darauf, Fokusrahmen und Fehlerfarbe. Im Ciblu-Schema = Markenrot mit weißer Schrift; das
       WED-Schema setzt Gold mit schwarzer Schrift (Weiß auf Gold erreicht kein WCAG AA). */
    --ciblu-akzent: var(--ciblu-brand-primary);
    --ciblu-akzent-rgb: var(--ciblu-brand-primary-rgb);
    --ciblu-akzent-hover: var(--ciblu-brand-primary-dark);
    --ciblu-auf-akzent: var(--ciblu-brand-white);
    --ciblu-fokus: var(--ciblu-brand-primary);
    --ciblu-danger: #b4122c;
    --ciblu-danger-tint: rgba(180, 18, 44, 0.12);

    /* Statusfarben als Schrift und Linie (CMEM-286, DESIGN_SYSTEM §3.4): WCAG AA (4,5:1) auch auf der Tönung über Weiß
       und über dem Seitenhintergrund. Info-Schaltflächen behalten das Cyan der Füllung, tragen aber dunkle Schrift und
       einen petrolfarbenen Rahmen (3:1 gegen Weiß). */
    --ciblu-warnung: #965210;
    --ciblu-erfolg: #137548;
    --ciblu-info: #10657f;
    --ciblu-info-flaeche: #0dcaf0;
    --ciblu-auf-info: #032f3a;

    --bs-primary: var(--ciblu-brand-primary);
    --bs-primary-rgb: var(--ciblu-brand-primary-rgb);
    --bs-link-color: var(--ciblu-brand-primary);
    --bs-link-hover-color: var(--ciblu-brand-primary-dark);
    --bs-focus-ring-color: rgba(var(--ciblu-brand-primary-rgb), 0.25);
}

body {
    background: var(--ciblu-page-bg);
    color: var(--ciblu-brand-black);
}

a {
    color: var(--bs-link-color);
}

a:hover {
    color: var(--bs-link-hover-color);
}

.ciblu-shell-gradient {
    background-image: linear-gradient(135deg, var(--ciblu-brand-primary) 0%, var(--ciblu-brand-primary-dark) 100%);
}

.ciblu-card-shell {
    background: var(--ciblu-surface);
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: var(--ciblu-card-radius);
    box-shadow: var(--ciblu-shadow-soft);
}

.ciblu-card-shell:hover {
    box-shadow: var(--ciblu-shadow-strong);
}

.ciblu-nav-card {
    border-radius: var(--ciblu-card-radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(180deg, var(--ciblu-surface) 0%, var(--ciblu-surface-subtle) 100%);
    border: 1px solid var(--ciblu-border-subtle);
    box-shadow: var(--ciblu-shadow-soft);
}

.ciblu-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ciblu-shadow-strong) !important;
}

.ciblu-nav-card-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ciblu-icon-tile {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ciblu-icon-tile .oi,
.ciblu-icon-tile .fa-solid {
    font-size: 2rem;
}

.ciblu-icon-tile-primary {
    background: rgba(var(--ciblu-brand-primary-rgb), 0.1);
    color: var(--ciblu-brand-primary);
}

.ciblu-icon-tile-accent {
    background: rgba(var(--ciblu-brand-primary-dark-rgb), 0.12);
    color: var(--ciblu-brand-primary-dark);
}

.ciblu-icon-tile-neutral {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ciblu-brand-black);
}

.ciblu-icon-tile-success {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.ciblu-icon-tile-info {
    background: rgba(13, 202, 240, 0.12);
    color: #0dcaf0;
}

.ciblu-icon-tile-warning {
    background: rgba(var(--ciblu-brand-primary-rgb), 0.12);
    color: var(--ciblu-brand-primary);
}

.ciblu-icon-tile-danger {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.ciblu-icon-tile-sm {
    width: 32px;
    height: 32px;
}

.ciblu-icon-tile-md {
    width: 40px;
    height: 40px;
}

.ciblu-icon-tile-lg {
    width: 48px;
    height: 48px;
}

.ciblu-icon-tile-xl {
    width: 80px;
    height: 80px;
}

.ciblu-icon-tile-xl .oi,
.ciblu-icon-tile-xl .fa-solid {
    font-size: 2.5rem;
}

.ciblu-avatar-circle-lg {
    width: 70px;
    height: 70px;
    background-color: var(--ciblu-akzent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ciblu-avatar-circle-lg .initials {
    color: var(--ciblu-auf-akzent);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ciblu-status-overdue {
    background-color: rgba(var(--ciblu-brand-primary-rgb), 0.12) !important;
    color: var(--ciblu-brand-primary) !important;
}

.ciblu-status-neutral {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--ciblu-brand-black) !important;
}

.ciblu-info-surface {
    background: linear-gradient(180deg, rgba(var(--ciblu-brand-primary-rgb), 0.08), rgba(var(--ciblu-brand-primary-dark-rgb), 0.06));
    border-color: rgba(var(--ciblu-brand-primary-rgb), 0.18) !important;
}

.ciblu-step-connector {
    height: 2px;
    background-color: var(--ciblu-border-subtle);
    z-index: 0;
    margin-top: -1px;
}

.ciblu-text-primary {
    color: var(--ciblu-brand-primary) !important;
}

.ciblu-text-accent {
    color: var(--ciblu-brand-primary-dark) !important;
}

.ciblu-muted-badge {
    background-color: rgba(var(--ciblu-brand-primary-rgb), 0.14);
    color: var(--ciblu-brand-primary-dark);
}

/* ---- Bestaetigungsdialog (ConfirmDialog) ---- */
.ciblu-confirm {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ciblu-confirm-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.35rem;
}

.ciblu-confirm-icon-danger {
    background-color: rgba(var(--ciblu-brand-primary-rgb), 0.12);
    color: var(--ciblu-brand-primary);
}

.ciblu-confirm-icon-warning {
    background-color: rgba(163, 90, 18, 0.14);
    color: var(--ciblu-warnung);
}

.ciblu-confirm-body {
    flex: 1;
    min-width: 0;
}

.ciblu-confirm-text {
    margin: 0 0 0.75rem;
    color: var(--bs-body-color);
}

.ciblu-confirm-summary {
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.ciblu-confirm-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ciblu-border-subtle);
    font-size: 0.9rem;
}

.ciblu-confirm-summary-row:last-child {
    border-bottom: 0;
}

.ciblu-confirm-summary-total {
    background-color: rgba(var(--ciblu-brand-primary-rgb), 0.08);
    font-weight: 600;
}

.ciblu-confirm-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.ciblu-confirm-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--ciblu-brand-primary);
    flex-shrink: 0;
}

/* ---- Gemeinsame Zustandsdarstellung (Loading / Empty / Error) ---- */
.ciblu-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    min-height: 220px;
}

.ciblu-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    font-size: 1.9rem;
    background-color: rgba(var(--ciblu-brand-primary-rgb), 0.10);
    color: var(--ciblu-brand-primary);
}

.ciblu-state-icon-danger {
    background-color: var(--ciblu-danger-tint);
    color: var(--ciblu-danger);
}

.ciblu-state-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--bs-body-color);
}

.ciblu-state-text {
    color: var(--bs-secondary-color, #6c757d);
    max-width: 34rem;
    margin: 0;
}

.ciblu-state-actions {
    margin-top: 1.1rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- Einheitliche Status-Badges (Semantik getrennt vom Marken-Akzent) ---- */
.ciblu-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
}

.ciblu-badge-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: currentcolor;
    flex-shrink: 0;
}

.ciblu-badge-neutral { background-color: rgba(0, 0, 0, 0.06); color: #495057; }
.ciblu-badge-success { background-color: rgba(21, 122, 78, 0.12); color: var(--ciblu-erfolg); }
.ciblu-badge-warning { background-color: rgba(163, 90, 18, 0.14); color: var(--ciblu-warnung); }
.ciblu-badge-danger { background-color: var(--ciblu-danger-tint); color: var(--ciblu-danger); }
.ciblu-badge-info { background-color: rgba(16, 101, 127, 0.12); color: var(--ciblu-info); }

/* ---- Kennzahl-Karten (KPI) ---- */
.ciblu-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
}
/* Drei Kennzahlen (z. B. Dashboard ohne Finanz-KPI fuer Editoren, CMEM-86) */
.ciblu-kpi-row.ciblu-kpi-row-3 { grid-template-columns: repeat(3, 1fr); }
/* Fuenf Kennzahlen (Import-Ergebnis: gesamt, importiert, Warnungen, Fehler, uebersprungen; CMEM-69) */
.ciblu-kpi-row.ciblu-kpi-row-5 { grid-template-columns: repeat(5, 1fr); }
.ciblu-kpi {
    position: relative;
    overflow: hidden;
    display: block;
    background: var(--ciblu-surface);
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.9rem;
    padding: 0.95rem 1rem;
    box-shadow: var(--ciblu-shadow-soft);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.ciblu-kpi:hover { transform: translateY(-2px); box-shadow: var(--ciblu-shadow-strong); }
.ciblu-kpi::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ciblu-kpi-accent, var(--ciblu-brand-primary));
}
.ciblu-kpi-top { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.ciblu-kpi-ico {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: grid; place-items: center;
    background: var(--ciblu-kpi-tint, rgba(var(--ciblu-brand-primary-rgb), 0.10));
    color: var(--ciblu-kpi-accent, var(--ciblu-brand-primary));
    font-size: 1rem;
}
.ciblu-kpi-val { font-size: 1.7rem; font-weight: 750; letter-spacing: -0.02em; margin-top: 0.5rem; line-height: 1.05; }
.ciblu-kpi-lbl { font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); margin-top: 0.4rem; font-weight: 550; }
.ciblu-kpi-trend { font-size: 0.74rem; font-weight: 650; margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.ciblu-kpi-trend-up { color: var(--ciblu-erfolg); }
.ciblu-kpi-trend-down { color: var(--ciblu-danger); }
.ciblu-kpi-trend-flat { color: var(--bs-secondary-color, #6c757d); }
.ciblu-kpi-brand   { --ciblu-kpi-accent: var(--ciblu-brand-primary); --ciblu-kpi-tint: rgba(var(--ciblu-brand-primary-rgb), 0.10); }
.ciblu-kpi-success { --ciblu-kpi-accent: var(--ciblu-erfolg); --ciblu-kpi-tint: rgba(21, 122, 78, 0.12); }
.ciblu-kpi-warning { --ciblu-kpi-accent: var(--ciblu-warnung); --ciblu-kpi-tint: rgba(163, 90, 18, 0.14); }
.ciblu-kpi-info    { --ciblu-kpi-accent: #10657f; --ciblu-kpi-tint: rgba(16, 101, 127, 0.12); }
.ciblu-kpi-danger  { --ciblu-kpi-accent: var(--ciblu-danger); --ciblu-kpi-tint: var(--ciblu-danger-tint); }
@media (max-width: 992px) { .ciblu-kpi-row, .ciblu-kpi-row.ciblu-kpi-row-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .ciblu-kpi-row, .ciblu-kpi-row.ciblu-kpi-row-3 { grid-template-columns: 1fr; } }
@media (max-width: 992px) { .ciblu-kpi-row.ciblu-kpi-row-5 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Dashboard: "Braucht Aufmerksamkeit" ---- */
.ciblu-attention-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--ciblu-border-subtle);
}
.ciblu-attention-row:last-child { border-bottom: 0; }
.ciblu-attention-text { font-size: 0.88rem; }
.ciblu-attention-link {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ciblu-brand-primary);
    text-decoration: none;
    white-space: nowrap;
}
.ciblu-attention-link:hover { text-decoration: underline; }

/* ---- Dashboard: Rollen-Balken ---- */
.ciblu-rolebar { margin-bottom: 0.85rem; }
.ciblu-rolebar:last-child { margin-bottom: 0; }
.ciblu-rolebar-head { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.3rem; }
/* Rollenname als Absprung auf die gefilterte Mitgliederliste (CMEM-279): wirkt wie Text, Link erst beim Hover/Fokus */
.ciblu-rolebar-link { color: inherit; text-decoration: none; }
.ciblu-rolebar-link:hover, .ciblu-rolebar-link:focus-visible { color: var(--ciblu-brand-primary); text-decoration: underline; }
.ciblu-rolebar-track {
    height: 8px;
    border-radius: 6px;
    background: rgba(var(--ciblu-brand-primary-rgb), 0.10);
    overflow: hidden;
}
.ciblu-rolebar-fill { height: 100%; border-radius: 6px; background: var(--ciblu-brand-primary); }

/* ---- Einheitliche Hub-Kachel (loest ciblu-nav-card vs. admin-nav-card ab) ---- */
.ciblu-hub-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: var(--ciblu-card-radius);
    background: var(--ciblu-surface);
    border: 1px solid var(--ciblu-border-subtle);
    box-shadow: var(--ciblu-shadow-soft);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}

a.ciblu-hub-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ciblu-shadow-strong);
    color: inherit;
}

a.ciblu-hub-card:focus-visible {
    outline: 2px solid var(--ciblu-fokus);
    outline-offset: 2px;
}

.ciblu-hub-card-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ciblu-hub-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    background-color: rgba(var(--ciblu-brand-primary-rgb), 0.10);
    color: var(--ciblu-brand-primary);
}

.ciblu-hub-card-icon-info { background-color: rgba(16, 101, 127, 0.12); color: #10657f; }
.ciblu-hub-card-icon-success { background-color: rgba(21, 122, 78, 0.12); color: var(--ciblu-erfolg); }
.ciblu-hub-card-icon-warning { background-color: rgba(163, 90, 18, 0.14); color: var(--ciblu-warnung); }
.ciblu-hub-card-icon-danger { background-color: var(--ciblu-danger-tint); color: var(--ciblu-danger); }
.ciblu-hub-card-icon-neutral { background-color: rgba(0, 0, 0, 0.06); color: #495057; }

.ciblu-hub-card-body { min-width: 0; }

.ciblu-hub-card-title {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.ciblu-hub-card-desc {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 0.15rem;
}

.ciblu-hub-card-meta {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 0.1rem;
}

/* ---- Sidebar-Navigation (weiss auf Marken-Gradient-Drawer) ---- */
.ciblu-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 0.75rem;
    width: 100%;
}

.ciblu-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.7rem;
    color: var(--bs-body-color, #241a1d);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ciblu-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--ciblu-brand-primary);
}

.ciblu-nav-item.active {
    background-color: var(--ciblu-akzent);
    color: var(--ciblu-auf-akzent);
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(var(--ciblu-akzent-rgb), 0.25);
}

.ciblu-nav-item .oi,
.ciblu-nav-item .fa-solid {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--bs-secondary-color, #7c7175);
}

.ciblu-nav-item:hover .oi,
.ciblu-nav-item:hover .fa-solid { color: var(--ciblu-brand-primary); }

.ciblu-nav-item.active .oi,
.ciblu-nav-item.active .fa-solid { color: var(--ciblu-auf-akzent); }

.ciblu-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ciblu-nav-section {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #7c7175);
    padding: 1rem 0.85rem 0.35rem;
    margin: 0;
}

.ciblu-nav-sub {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.15rem 0 0.4rem 1.55rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--ciblu-border-subtle);
}

.ciblu-nav-subitem {
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--bs-secondary-color, #7c7175);
    text-decoration: none;
    font-size: 0.875rem;
}

.ciblu-nav-subitem:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--ciblu-brand-primary);
}

.ciblu-nav-subitem.active {
    background-color: rgba(var(--ciblu-brand-primary-rgb), 0.10);
    color: var(--ciblu-brand-primary);
    font-weight: 600;
}

.ciblu-nav-item:focus-visible,
.ciblu-nav-subitem:focus-visible {
    outline: 2px solid var(--ciblu-fokus);
    outline-offset: 1px;
}

/* ---- Kontrast-Korrektur: kraeftiges Orange statt hellem #fd7e14/#ff9800
   (weiss darauf erreicht WCAG AA) ---- */
.bg-orange {
    background-color: #b45309 !important;
}

/* ============================================================
   App-Shell: Sidebar-Kopf/-Fuss, Zaehler, Topbar, Kommandopalette
   ============================================================ */

/* Sidebar fuellt die Hoehe, damit der Nutzer-Fuss unten sitzt */
.ciblu-nav { min-height: calc(100vh - 8rem); }

/* Marken-Kopf oben in der Sidebar */
.ciblu-brand-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.1rem 1rem;
}
.ciblu-brand-logo {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--ciblu-brand-primary), var(--ciblu-brand-primary-dark));
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.05rem;
    flex-shrink: 0;
}
.ciblu-brand-name { color: var(--bs-body-color, #241a1d); font-weight: 700; font-size: 0.98rem; line-height: 1.15; }
.ciblu-brand-name span { display: block; font-weight: 500; font-size: 0.72rem; color: var(--bs-secondary-color, #7c7175); }

/* Zaehler-Badges an Nav-Eintraegen */
.ciblu-nav-count {
    margin-left: auto;
    font-size: 0.72rem; font-weight: 700;
    color: var(--bs-secondary-color, #7c7175); background: rgba(0, 0, 0, 0.06);
    padding: 0.05rem 0.5rem; border-radius: 999px;
    min-width: 1.5rem; text-align: center;
}
.ciblu-nav-item.active .ciblu-nav-count { background: rgba(255, 255, 255, 0.2); color: var(--ciblu-auf-akzent); }

/* Nutzer-Fuss unten in der Sidebar */
.ciblu-side-foot {
    margin-top: auto;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 0.1rem 0.25rem;
    border-top: 1px solid var(--ciblu-border-subtle);
}
.ciblu-side-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(var(--ciblu-brand-primary-rgb), 0.12); color: var(--ciblu-brand-primary-dark);
    display: grid; place-items: center;
    font-weight: 700; font-size: 0.8rem; flex-shrink: 0;
    text-transform: uppercase;
}
.ciblu-side-who { color: var(--bs-body-color, #241a1d); font-size: 0.82rem; font-weight: 600; line-height: 1.2; min-width: 0; }
.ciblu-side-who span {
    display: block; font-weight: 500; font-size: 0.72rem;
    color: var(--bs-secondary-color, #7c7175);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Topbar im Content-Bereich */
.ciblu-topbar {
    display: flex; align-items: center; gap: 0.9rem;
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid var(--ciblu-border-subtle);
    background: var(--ciblu-surface);
}
.ciblu-topbar-bell {
    width: 38px; height: 38px; border-radius: 0.6rem;
    border: 1px solid var(--ciblu-border-subtle);
    background: var(--ciblu-surface);
    display: grid; place-items: center;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none; flex-shrink: 0;
}
.ciblu-topbar-bell:hover { color: var(--ciblu-brand-primary); border-color: var(--ciblu-brand-primary); }
.ciblu-topbar-user { flex-shrink: 0; }

/* Globale Suche (Trigger) */
.ciblu-topbar-search {
    display: flex; align-items: center; gap: 0.5rem;
    height: 38px; padding: 0 0.75rem;
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.6rem;
    background: var(--ciblu-surface-subtle);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem; cursor: pointer;
    flex: 1 1 auto; max-width: 420px; min-width: 130px;
    margin-left: auto;
}
.ciblu-topbar-search:hover { border-color: var(--ciblu-brand-primary); }
.ciblu-topbar-search .oi { font-size: 0.9rem; }
.ciblu-topbar-search-text {
    flex: 1; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ciblu-kbd {
    font-size: 0.7rem;
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 4px; padding: 1px 6px;
    background: var(--ciblu-surface); white-space: nowrap;
}
/* Ab hier folgt die Glocke rechts */
.ciblu-topbar-search + .ciblu-topbar-bell { margin-left: 0; }

/* Kommandopaletten-Overlay */
.ciblu-palette-scrim {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(20, 16, 15, 0.4);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 1rem 1rem;
}
.ciblu-palette {
    width: min(560px, 96vw);
    background: var(--ciblu-surface);
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.9rem;
    box-shadow: var(--ciblu-shadow-strong);
    overflow: hidden;
}
.ciblu-palette-input {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ciblu-border-subtle);
}
.ciblu-palette-input .oi { color: var(--bs-secondary-color, #6c757d); }
.ciblu-palette-input input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: 1rem; color: inherit;
}
.ciblu-palette-esc {
    border: 1px solid var(--ciblu-border-subtle);
    background: var(--ciblu-surface-subtle);
    border-radius: 5px; font-size: 0.72rem; padding: 2px 7px;
    color: var(--bs-secondary-color, #6c757d); cursor: pointer;
}
.ciblu-palette-body { max-height: 56vh; overflow-y: auto; padding: 0.5rem; }
.ciblu-palette-section {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.6rem 0.6rem 0.3rem;
}
.ciblu-palette-item {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    padding: 0.55rem 0.6rem; border: 0; background: transparent;
    border-radius: 0.5rem; cursor: pointer; text-align: left; color: inherit;
}
.ciblu-palette-item:hover, .ciblu-palette-item:focus-visible {
    background: var(--ciblu-surface-subtle); outline: none;
}
/* Aktive Zeile der Listbox (aria-activedescendant, QA B13 U1): sichtbar auch ohne Maus */
.ciblu-palette-item.active {
    background: var(--ciblu-surface-subtle);
    box-shadow: inset 3px 0 0 var(--ciblu-brand-primary);
}
.ciblu-palette-item-ico { width: 34px; text-align: center; color: var(--ciblu-brand-primary); font-size: 1rem; flex-shrink: 0; }
.ciblu-palette-item-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ciblu-palette-item-title { font-weight: 600; font-size: 0.9rem; }
.ciblu-palette-item-sub { font-size: 0.75rem; color: var(--bs-secondary-color, #6c757d); }
.ciblu-palette-item-go { color: var(--bs-secondary-color, #6c757d); font-size: 0.8rem; flex-shrink: 0; }
.ciblu-palette-hint { padding: 0.8rem 0.6rem; color: var(--bs-secondary-color, #6c757d); font-size: 0.85rem; }

@media (max-width: 768px) {
    .ciblu-topbar-search-text { display: none; }
    .ciblu-topbar-search { min-width: 44px; flex: 0 0 auto; }
    .ciblu-kbd { display: none; }
}

/* ---- Mobile Bottom-Navigation ---- */
.ciblu-bottom-nav { display: none; }
@media (max-width: 768px) {
    .ciblu-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1040;
        background: var(--ciblu-surface);
        border-top: 1px solid var(--ciblu-border-subtle);
        padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 10px rgba(var(--ciblu-brand-primary-dark-rgb), 0.06);
    }
    .ciblu-bottom-nav-item {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        flex: 1; padding: 0.35rem 0;
        font-size: 0.68rem; font-weight: 600;
        color: var(--bs-secondary-color, #6c757d);
        text-decoration: none;
    }
    .ciblu-bottom-nav-item .oi,
    .ciblu-bottom-nav-item .fa-solid { font-size: 1.15rem; }
    .ciblu-bottom-nav-item.active { color: var(--ciblu-brand-primary); }
    .ciblu-bottom-nav-item:focus-visible { outline: 2px solid var(--ciblu-fokus); outline-offset: -2px; }

    /* Platz fuer die Bottom-Nav, damit Inhalt nicht verdeckt wird */
    .ciblu-content { padding-bottom: 5.5rem !important; }
    /* Sidebar (Off-canvas): Benutzer-Fuss nicht hinter der Bottom-Nav verstecken */
    .ciblu-nav { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Kontrast-Korrektur Badges (WCAG AA) ----
   Bootstrap setzt fuer Badges standardmaessig weisse Schrift. Auf den hellen
   Grundfarben "info" (#0dcaf0) und "warning" (#ffc107) ergibt das nur 1,9:1
   bzw. 1,6:1 und ist praktisch unlesbar. Dunkle Schrift stellt AA sicher —
   zentral, damit es nicht an jeder Fundstelle einzeln gesetzt werden muss. */
.badge.bg-info {
    color: #04414f !important;
}

.badge.bg-warning {
    color: #5c4503 !important;
}

/* ---- Kontraste im Standard-Theme (CMEM-286, WCAG 2.1 AA) ----
   Bootstrap-/DevExpress-Standardfarben Cyan (#0DCAF0) und Gelb (#FFC107) verfehlen als Fläche mit weißer Schrift bzw. als
   Schrift/Rahmen auf Weiß (1,96:1 bzw. 1,63:1). Gefüllte Info-Schaltflächen behalten ihr Cyan, tragen aber dunkle Schrift
   (7,29:1; im Hover mit DevExpress-Abdunklung 5,29:1) und einen petrolfarbenen Rahmen (6,58:1 gegen Weiß). Info-Outline
   (z. B. „Wechseln“) nutzt Petrol für Schrift und Rahmen (6,58:1), im Hover Cyan mit dunkler Schrift. Outline-Warnung und
   Warnschrift nutzen die dunkle Warnfarbe (5,98:1 auf Weiß). Das WED-Schema setzt diese Rollen selbst (weiter unten). */
:root:not([data-ciblu-theme="wed"]) .dxbl-btn-standalone.dxbl-btn-info,
:root:not([data-ciblu-theme="wed"]) .dxbl-btn-info:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-bg: var(--ciblu-info-flaeche);
    --dxbl-btn-hover-bg: var(--ciblu-info-flaeche);
    --dxbl-btn-active-bg: var(--ciblu-info-flaeche);
    --dxbl-btn-disabled-bg: var(--ciblu-info-flaeche);
    --dxbl-btn-focus-bg: var(--ciblu-info-flaeche);
    --dxbl-btn-color: var(--ciblu-auf-info);
    --dxbl-btn-border-color: var(--ciblu-info);
    --dxbl-btn-hover-color: var(--ciblu-auf-info);
    --dxbl-btn-hover-border-color: var(--ciblu-info);
    --dxbl-btn-active-color: var(--ciblu-auf-info);
    --dxbl-btn-active-border-color: var(--ciblu-info);
    --dxbl-btn-focus-color: var(--ciblu-auf-info);
    --dxbl-btn-disabled-color: var(--ciblu-auf-info);
    --dxbl-btn-disabled-border-color: var(--ciblu-info);
}
:root:not([data-ciblu-theme="wed"]) .dxbl-btn-standalone.dxbl-btn-outline-info {
    --dxbl-btn-color: var(--ciblu-info);
    --dxbl-btn-border-color: var(--ciblu-info);
    --dxbl-btn-hover-color: var(--ciblu-auf-info);
    --dxbl-btn-active-color: var(--ciblu-auf-info);
    --dxbl-btn-focus-color: var(--ciblu-info);
    --dxbl-btn-disabled-color: var(--ciblu-info);
    --dxbl-btn-disabled-border-color: var(--ciblu-info);
}
:root:not([data-ciblu-theme="wed"]) .dxbl-btn-standalone.dxbl-btn-outline-warning {
    --dxbl-btn-color: var(--ciblu-warnung);
    --dxbl-btn-border-color: var(--ciblu-warnung);
    --dxbl-btn-hover-color: #212529;
    --dxbl-btn-active-color: #212529;
    --dxbl-btn-disabled-color: var(--ciblu-warnung);
    --dxbl-btn-disabled-border-color: var(--ciblu-warnung);
}
/* Warn- und Infoschrift (Bootstrap-Hilfsklassen .text-warning/.text-info): Tokens des jeweiligen Schemas (Ciblu #965210/#10657F,
   WED #8A4B0F/#10657F) statt Gelb/Cyan */
.text-info { color: var(--ciblu-info) !important; }
.text-warning { color: var(--ciblu-warnung) !important; }

/* bg-info-Badges: Petrol mit weißer Schrift wie im WED-Schema (6,58:1, PO 2026-10-21) statt dunkler Schrift auf Cyan. Mit
   bg-opacity getönte Badges (z. B. Mitgliedsarten-Übersicht) behalten Tönung und dunkle Schrift. */
:root:not([data-ciblu-theme="wed"]) .badge.bg-info:not([class*="bg-opacity"]),
:root:not([data-ciblu-theme="wed"]) .badge.text-bg-info:not([class*="bg-opacity"]) {
    background-color: var(--ciblu-info) !important;
    color: #ffffff !important;
}

/* Warn-Schaltflächen (DevExpress RenderStyle Warning, Bootstrap btn-warning): dunkle Schrift auf Gelb statt Weiß
   (1,6:1 → > 10:1, QA B13 U3) */
.ciblu-btn-warnung,
.dxbl-btn.dxbl-btn-warning,
.btn.btn-warning {
    color: #212529 !important;
}

/* ---- Sichtbarer Tastaturfokus (Fallback fuer alle interaktiven Elemente) ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--ciblu-fokus);
    outline-offset: 2px;
}

/* ---- Redesign: Listen-Zellen (Avatar-Zeile, verdichteter Kontakt, Icon-Aktionen) ---- */
.ciblu-cell-name {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.ciblu-avatar-sm {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ciblu-surface-subtle);
    color: var(--ciblu-brand-primary-dark);
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
    border: 1px solid var(--ciblu-border-subtle);
}

.ciblu-cell-name .name {
    font-weight: 600;
    line-height: 1.25;
}

.ciblu-cell-name .sub {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.ciblu-cell-contact {
    font-size: 0.83rem;
    line-height: 1.45;
}

.ciblu-cell-contact .muted {
    color: var(--bs-secondary-color, #6c757d);
}

.ciblu-row-actions {
    display: flex;
    gap: 0.15rem;
    justify-content: flex-end;
}
/* Icon-Aktionen schrumpfen nie unter ihr Touch-Ziel (QA B10: in schmalen Grid-Spalten wurden sie 32 px breit) */
.ciblu-row-actions > .ciblu-icon-btn { flex-shrink: 0; }

.ciblu-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.ciblu-icon-btn:hover {
    background: var(--ciblu-surface-subtle);
    color: var(--ciblu-brand-primary);
}

.ciblu-icon-btn.danger:hover {
    background: rgba(180, 18, 44, 0.1);
    color: var(--ciblu-danger);
}

.ciblu-icon-btn.success:hover {
    background: rgba(21, 122, 78, 0.1);
    color: var(--ciblu-erfolg);
}

/* Nicht zutreffende Aktion: sichtbar, aber deutlich deaktiviert (Begründung im Tooltip, §8.2) */
.ciblu-icon-btn:disabled,
.ciblu-icon-btn:disabled:hover {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
    color: inherit;
}

/* ---- Detail-Tabs + Karten-Grid (Mitglied-Detail) ---- */
.ciblu-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--ciblu-border-subtle);
    overflow-x: auto;
}
.ciblu-tab {
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem; font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    background: none; border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap;
}
.ciblu-tab:hover { color: var(--ciblu-brand-primary); }
.ciblu-tab.active { color: var(--ciblu-brand-primary); border-bottom-color: var(--ciblu-brand-primary); }
.ciblu-tab:focus-visible { outline: 2px solid var(--ciblu-fokus); outline-offset: 2px; }

.ciblu-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: start;
}
.ciblu-detail-col { display: contents; }
.ciblu-detail-grid > .card,
.ciblu-detail-grid .h-100 { height: auto; }
/* Bootstrap .card (display:flex) wuerde [hidden] ueberschreiben — hier erzwingen */
.ciblu-detail-grid [hidden],
.ciblu-detail-grid .card[hidden] { display: none !important; }
@media (max-width: 992px) {
    .ciblu-detail-grid { grid-template-columns: 1fr; }
}

/* ---- Suche und Sortierung serverseitig geblätterter Listen (Pferdeliste, CMEM-280) ---- */
.ciblu-listen-suche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.ciblu-listen-suche-feld { flex: 1 1 16rem; max-width: 28rem; }
.ciblu-listen-suche-sortierung { flex: 0 1 15rem; }
@media (max-width: 575.98px) {
    .ciblu-listen-suche-feld, .ciblu-listen-suche-sortierung { flex-basis: 100%; max-width: none; }
}

/* ---- Filter-Chips (ersetzen Filterkarten) ---- */
.ciblu-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ciblu-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; font-weight: 550;
    color: var(--bs-body-color, #4d4145);
    background: var(--ciblu-surface-subtle);
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ciblu-chip .oi { font-size: 0.75rem; color: var(--bs-secondary-color, #7c7175); }
.ciblu-chip:hover { border-color: var(--ciblu-brand-primary); }
.ciblu-chip.on {
    color: var(--ciblu-brand-primary);
    background: rgba(var(--ciblu-brand-primary-rgb), 0.10);
    border-color: transparent;
}
.ciblu-chip.on .oi { color: var(--ciblu-brand-primary); }
.ciblu-chip:focus-visible { outline: 2px solid var(--ciblu-fokus); outline-offset: 1px; }
.ciblu-chip-sep { width: 1px; align-self: stretch; background: var(--ciblu-border-subtle); margin: 0 0.15rem; }

/* ---- Seitenkopf (Titel + Primäraktion) ----
   Button-Text nie zweizeilig; bei Platzmangel rutscht die Aktion als Ganzes unter den Titel. */
.ciblu-page-header { flex-wrap: wrap; gap: 0.75rem; }
.ciblu-page-header > div:first-child { min-width: 0; flex: 1 1 16rem; }
.ciblu-page-header .dxbl-btn,
.ciblu-page-header .btn { white-space: nowrap; }
@media (max-width: 576px) {
    .ciblu-page-header h1 { font-size: 1.5rem; }
    .ciblu-page-header .dxbl-btn,
    .ciblu-page-header .btn { padding-left: 0.65rem; padding-right: 0.65rem; }
}

/* ---- Grids mit vielen Spalten: lange Einzelwoerter (Vorlagennamen, E-Mails) umbrechen statt kuerzen ---- */
.dxbl-grid.ciblu-grid-wrap .dxbl-grid-table > tbody > tr > td { overflow-wrap: anywhere; hyphens: auto; text-overflow: clip; }
/* Vorlagen: feste Spalten (Ziel, Status, Reihenfolge, vier Aktionen) + Name/Betreff ohne feste Breite – unter 700 px
   scrollt die Tabelle waagerecht, statt Name und Betreff auf 0 zu drücken (B21) */
.dxbl-grid.ciblu-vorlagen-grid .dxbl-grid-table { min-width: 700px; }

/* ---- Badges in schmalen Grid-Spalten: umbrechen statt abschneiden ---- */
.ciblu-badge-wrap { white-space: normal; text-align: left; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
/* Kurze Status-Badges („Aktiv“, „Inaktiv“) in Tabellenzellen nie umbrechen (QA B13, U9) */
.dxbl-grid .badge, .table .badge { white-space: nowrap; }
/* Ausdrücklich umbrechende Badges (lange Kanal-/Typ-Namen) auch in Tabellen umbrechen lassen (B21, Protokoll) */
.dxbl-grid .badge.ciblu-badge-wrap, .table .badge.ciblu-badge-wrap { white-space: normal; }

/* ---- Dialoge (DxPopup) auf schmalen Bildschirmen ----
   Feste Breiten (Width="500px" u. a.) würden über den Viewport ragen und Footer-Buttons
   (Speichern/Abbrechen) abschneiden. Max-Breite = Viewport abzüglich 16px Rand je Seite.
   Selektor bewusst spezifischer als DevExpress (".dxbl-modal > .dxbl-modal-root > ..." setzt max-width: unset). */
body .dxbl-modal > .dxbl-modal-root > .dxbl-popup.dxbl-popup-fixed-width,
body .dxbl-popup.dxbl-popup-fixed-width { max-width: calc(100vw - 2rem); }

/* Alle Dialoge, auch ohne Fixbreiten-Klasse (QA B10: "Schreiben erstellen" mit Width="1200px" ragte bei ~785 px
   über den Viewport, das Schließen-Kreuz war abgeschnitten) */
body .dxbl-modal > .dxbl-modal-root > .dxbl-popup,
body .dxbl-popup { max-width: calc(100vw - 2rem); }
body .dxbl-popup .dxbl-modal-content { max-width: 100%; }

/* Dialog-Fußzeile (QA B10, UI-QA B22 U12): Schaltflächen mit Abstand, umbrechend; mobil nebeneinander, solange sie
   passen (sonst volle Breite je Zeile, Hauptaktion unten), Touch-Höhe 44 px */
.ciblu-dialog-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; width: 100%; }
@media (max-width: 575.98px) {
    .ciblu-dialog-aktionen > * { flex: 1 1 auto; }
    .ciblu-dialog-aktionen .dxbl-btn { min-height: 44px; }
}

/* ---- Bewegungsreduzierung respektieren ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Gesperrte Aktionen (Rechte, CMEM-90) ----
   Wrapper traegt Tooltip (title) und Cursor, da deaktivierte Buttons keine Mausereignisse erhalten. */
.ciblu-locked-action { display: inline-flex; }
.ciblu-locked-action.d-grid { display: grid; }
.ciblu-locked-action:has(:disabled) { cursor: not-allowed; }
.ciblu-locked-action :disabled,
.ciblu-locked-action .dxbl-disabled { opacity: .5; pointer-events: none; }

/* ============================================================
   Formular-Aktionsleiste & Checkbox-Gruppen (QA B01, DESIGN_SYSTEM §8.5)
   ============================================================ */
/* Checkbox mit Ueberschrift (Caption) in einer Formularzeile: Ueberschrift und Checkbox untereinander,
   damit benachbarte Checkboxen buendig stehen */
.ciblu-check-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Aktionsleiste im Karten-Footer: links "Zurueck", rechts Verwerfen/Speichern; mobil untereinander in voller Breite */
.ciblu-aktionsleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.ciblu-aktionsleiste-rechts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .ciblu-aktionsleiste > *,
    .ciblu-aktionsleiste-rechts,
    .ciblu-aktionsleiste-rechts > * {
        width: 100%;
    }
}

/* Statusblock in Detailkarten (CMEM-3): Kündigung, Pause – dezent hinterlegt, Akzent links */
.ciblu-statusblock {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--ciblu-surface-subtle);
    border-left: 3px solid var(--ciblu-border-subtle);
}

.ciblu-statusblock-danger {
    background: rgba(180, 18, 44, 0.06);
    border-left-color: var(--ciblu-danger);
}

/* Flex-Kind darf schrumpfen (lange Namen brechen um statt die Zeile zu sprengen) */
.ciblu-min-w-0 {
    min-width: 0;
}

/* Familienkarte (CMEM-5): Mitgliederzeilen mit Icon-Aktionen, letzte Zeile ohne Trennlinie */
.ciblu-familie-liste > li:last-child {
    border-bottom: 0 !important;
}

/* Einstellungsseite (Mitgliedschaftsregeln, CMEM-162): Zahlenfelder in lesbarer Breite statt ueber die ganze Karte */
.ciblu-einstellung-feld {
    max-width: 12rem;
}

@media (max-width: 575.98px) {
    .ciblu-einstellung-feld {
        max-width: none;
    }
}

/* ============================================================
   Audit-Log (CMEM-98): Aenderungs-Zusammenfassung, Detailtabelle
   ============================================================ */
/* Einzeilige Zusammenfassung in der Liste: an Wortgrenzen umbrechen (lange Werte notfalls ueberall) */
.ciblu-audit-summary {
    display: block;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.ciblu-audit-user {
    overflow-wrap: break-word;
}

/* Feldtabelle (Feld | Alt | Neu) im Detaildialog */
.ciblu-audit-changes th:first-child,
.ciblu-audit-changes td:first-child {
    width: 30%;
    font-weight: 600;
}

.ciblu-audit-changes td {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* Mobil: Feld, Alt und Neu untereinander statt drei schmaler Spalten (QA B03) */
@media (max-width: 575.98px) {
    .ciblu-audit-changes thead {
        display: none;
    }

    .ciblu-audit-changes tr {
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }

    .ciblu-audit-changes td,
    .ciblu-audit-changes td:first-child {
        display: block;
        width: auto;
        border: 0;
        padding: 0.125rem 0;
    }

    .ciblu-audit-changes td:not(:first-child)::before {
        content: attr(data-label) ": ";
        color: var(--bs-secondary-color, #6c757d);
    }
}

.ciblu-audit-meta dt {
    font-weight: 600;
}
.ciblu-audit-raw {
    background: var(--bs-light, #f8f9fa);
    border-radius: 0.375rem;
    padding: 0.5rem;
    max-height: 150px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ============================================================
   Toolbar ueber Listen (UI-QA B03): Schaltflaechen umbrechen sauber, Texte einzeilig
   ============================================================ */
.ciblu-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ciblu-toolbar .dxbl-btn,
.ciblu-toolbar-end .dxbl-btn {
    white-space: nowrap;
}

.ciblu-toolbar-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .ciblu-toolbar > .dxbl-btn {
        flex: 1 1 auto;
    }

    .ciblu-toolbar-end {
        margin-left: 0;
        width: 100%;
    }

    .ciblu-toolbar-end > .dxbl-btn {
        flex: 1 1 0;
    }
}

/* Legende (z. B. Impfstatus) ohne Umbruch innerhalb eines Eintrags */
.ciblu-legende .ciblu-badge {
    white-space: nowrap;
}

/* Vorlagenbeschreibung unter dem Namen: hoechstens zwei Zeilen */
.ciblu-template-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ergebnisliste eines Sammelvorgangs (z. B. Altersuebergaenge, CMEM-147): scrollt im Dialog, Text bricht um */
.ciblu-ergebnisliste {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.75rem;
}

.ciblu-ergebnisliste-text {
    min-width: 0;
    overflow-wrap: break-word;
}

.ciblu-ergebnisliste .ciblu-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Bootstrap-Tabs ohne Umbruch: Beschriftung + Zaehler bleiben einzeilig, schmal wird horizontal gescrollt */
.nav-tabs.ciblu-tabs-nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.nav-tabs.ciblu-tabs-nowrap .nav-link {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .nav-tabs.ciblu-tabs-nowrap .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Dialoge mobil: gleicher Innenabstand links und rechts, auch wenn der Inhalt scrollt (UI-QA B04) */
    .dxbl-popup .dxbl-modal-body {
        scrollbar-gutter: stable both-edges;
    }
}

/* ---- Status-Toast (Erfolgsmeldung unabhängig von der Scrollposition, DESIGN_SYSTEM §8.7, QA B05) ---- */
.ciblu-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    background: #1f5c3a;
    color: #fff;
    box-shadow: var(--ciblu-shadow-strong);
    animation: ciblu-toast-in 0.2s ease-out;
}
.ciblu-toast-icon { font-size: 1rem; flex-shrink: 0; }
.ciblu-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@keyframes ciblu-toast-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ciblu-toast { animation: none; } }
@media (max-width: 768px) {
    /* Über der Bottom-Navigation */
    .ciblu-toast { left: 1rem; right: 1rem; bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); max-width: none; }
}

/* ---- Stapel-Tabelle: Tabellenzeilen werden unter 768 px zu schlanken Karten (DESIGN_SYSTEM §7.1a, QA B05) ----
   Markup: <table class="table ciblu-stapel-tabelle">, je Zelle data-label="Spaltenname"; die erste Zelle mit
   .ciblu-stapel-titel wird zur Kartenüberschrift, die Aktionszelle mit .ciblu-stapel-aktionen rechtsbündig unten;
   .ciblu-stapel-weg blendet mobil unwichtige Spalten aus. Grundlage für das allgemeine Muster (CMEM-258, B24). */
.ciblu-stapel-tabelle td, .ciblu-stapel-tabelle th { vertical-align: middle; }
.ciblu-zelle-kurz { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* E-Mail-Adressen brauchen mehr Platz; Volltext weiter im title (QA B13, U8) */
.ciblu-zelle-kurz.ciblu-zelle-email { max-width: 24rem; }
@media (max-width: 767.98px) {
    .ciblu-stapel-tabelle thead { display: none; }
    .ciblu-stapel-tabelle,
    .ciblu-stapel-tabelle tbody,
    .ciblu-stapel-tabelle tr,
    .ciblu-stapel-tabelle td { display: block; width: 100%; }
    .ciblu-stapel-tabelle tr {
        padding: 0.65rem 0.85rem;
        border-bottom: 1px solid var(--ciblu-border-subtle);
    }
    .ciblu-stapel-tabelle > :not(caption) > * > * { border-bottom-width: 0; box-shadow: none; }
    .ciblu-stapel-tabelle td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        padding: 0.15rem 0 !important;
        text-align: right !important;
    }
    .ciblu-stapel-tabelle td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--bs-secondary-color, #6c757d);
    }
    .ciblu-stapel-tabelle td.ciblu-stapel-titel { display: block; text-align: left !important; padding-bottom: 0.3rem !important; }
    .ciblu-stapel-tabelle td.ciblu-stapel-titel::before { content: none; }
    .ciblu-stapel-tabelle td.ciblu-stapel-aktionen { justify-content: flex-end; padding-top: 0.45rem !important; }
    .ciblu-stapel-tabelle td.ciblu-stapel-aktionen::before { content: none; }
    .ciblu-stapel-tabelle td.ciblu-stapel-weg { display: none; }
    .ciblu-stapel-tabelle .ciblu-zelle-kurz { max-width: 60vw; }
    .ciblu-stapel-tabelle .ciblu-zelle-kurz.ciblu-zelle-email { max-width: 68vw; }
    /* Touch-Ziele mobil mindestens 44 px (UI-QA 9/10, B08: WCAG 2.5.5) */
    .ciblu-icon-btn { width: 44px; height: 44px; }
    .ciblu-row-actions { gap: 0.35rem; }
}

/* ---- Kompakte Kennzahlen (Nebenseiten wie Familien): mobil drei schmale Spalten statt drei hoher Karten (UI-QA 10) ---- */
@media (max-width: 576px) {
    .ciblu-kpi-row.ciblu-kpi-kompakt { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .ciblu-kpi-kompakt .ciblu-kpi { padding: 0.6rem 0.65rem; }
    .ciblu-kpi-kompakt .ciblu-kpi-top { display: none; }
    .ciblu-kpi-kompakt .ciblu-kpi-val { font-size: 1.25rem; margin-top: 0; }
    .ciblu-kpi-kompakt .ciblu-kpi-lbl { font-size: 0.7rem; line-height: 1.2; }
    .ciblu-kpi-kompakt .ciblu-kpi-trend { display: none; }
}

/* Datumsangaben wie „seit 01.01.2020“ nicht umbrechen */
.ciblu-nowrap { white-space: nowrap; }

/* ---- Aktionsleiste in Karten (z. B. Mitgliedschaft): mobil Touch-Ziele ≥ 40 px (UI-QA 9) ---- */
@media (max-width: 768px) {
    .ciblu-karten-aktionen .dxbl-btn { min-height: 40px; flex: 1 1 auto; }
    .ciblu-familie-aktionen .dxbl-btn { min-height: 40px; }
}

/* ---- Tab-Leiste mit Scroll-Hinweis: rechter Rand blendet aus, solange weitere Tabs folgen (UI-QA 9) ---- */
@media (max-width: 768px) {
    .ciblu-tabs.ciblu-tabs-scrollhinweis {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        padding-right: 2rem;
        scroll-padding-right: 2rem;
    }
}

/* ---- Sticky-Sidebar (UI-QA B05 Nr. 7): body darf kein eigener Scroll-Container sein (overflow-x: hidden würde
   overflow-y: auto erzwingen); clip schneidet horizontal weiter ab, ohne einen Scroll-Container zu bilden ---- */
@media (min-width: 769px) {
    body { overflow-x: clip; overflow-y: visible; }
}
/* ---- Rechnungspositionen (CMEM-133, QA B07): je Position eine Karte mit Feldraster (Desktop 4 Spalten mit
   Mindestbreiten, Tablet 2, Smartphone 1); Summenblock außerhalb der Positionen in voller Breite ---- */
.ciblu-position-karte {
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin: 0 0.75rem 0.75rem;
    background: var(--ciblu-surface);
    container-type: inline-size;
}
.ciblu-position-kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
/* Spaltenzahl nach der Kartenbreite (Container Query), nicht nach dem Viewport: die Positionsspalte ist
   neben den Rechnungsdaten schmal. Jede Spalte bleibt so breit, dass „Regelsteuersatz (19 %)“ lesbar ist. */
.ciblu-position-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 0.75rem;
}
@container (min-width: 28rem) { .ciblu-position-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 56rem) { .ciblu-position-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ciblu-position-raster .ciblu-position-breit,
.ciblu-position-raster .ciblu-position-hinweis { grid-column: 1 / -1; }
.ciblu-position-raster .form-label { margin-bottom: 0.15rem; }

.ciblu-summenblock {
    margin: 0 0.75rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--ciblu-surface-subtle);
}
.ciblu-summenblock-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }
.ciblu-summenblock-summe { font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--ciblu-border-subtle); margin-top: 0.25rem; padding-top: 0.35rem; }

/* KPI-Reihe, die auf dem Smartphone zweispaltig bleibt (Rechnungsliste, QA B07) */
@media (max-width: 576px) { .ciblu-kpi-row.ciblu-kpi-row-mobil-2 { grid-template-columns: repeat(2, 1fr); } }

/* Badges und Beträge in Listen/Köpfen nicht umbrechen (QA B07) */
.ciblu-badge-nowrap, .ciblu-badge-nowrap .ciblu-badge, .ciblu-betrag { white-space: nowrap; }

/* Rechnungskopf: Nummer ohne Umbruch, Aktionsleiste unter dem Titel mit Umbruch (QA B07) */
.ciblu-beleg-kopf-titel { white-space: nowrap; }
.ciblu-beleg-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
@media (max-width: 576px) { .ciblu-beleg-aktionen .dxbl-btn { flex: 1 1 calc(50% - 0.5rem); min-height: 40px; } }

/* SEPA-Lastschriften (B09 QA): beschriftete Zeilenaktionen, Gruppenköpfe je Sequenztyp, Ausschlussgrund als eigene
   Zeile, Auswahl in mobilen Karten; gesperrte Kalendertage (keine Bankarbeitstage) einheitlich grau */
.ciblu-aktion-text { white-space: nowrap; min-height: 2rem; }
.ciblu-gruppenkopf th { font-weight: 600; font-size: 0.8125rem; }
.ciblu-sepa-vorschau tr.ciblu-sepa-ausschluss td { border-bottom-width: 0; }
.ciblu-touch-auswahl { min-height: 44px; display: flex; align-items: center; gap: 0.4rem; }
@media (max-width: 767.98px) {
    .ciblu-aktion-text { min-height: 44px; }
    .ciblu-stapel-tabelle tr.ciblu-gruppenkopf th { display: block; width: 100%; }
    .ciblu-stapel-tabelle tr.ciblu-sepa-grund td { display: block; padding-top: 0 !important; }
}
.ciblu-kalender-bankarbeitstage .dxbl-calendar-day.dxbl-calendar-disabled-item {
    color: var(--bs-secondary-color, #6c757d) !important;
    background-color: var(--bs-tertiary-bg, #f1f3f5) !important;
    opacity: 0.6;
    cursor: not-allowed !important;
    text-decoration: line-through;
}

/* PDF-Vorschau im Report-Designer (CMEM-259): feste Höhe für den DevExpress-PDF-Viewer, mobil niedriger */
.ciblu-pdf-vorschau { height: 800px; }
@media (max-width: 767.98px) {
    .ciblu-pdf-vorschau { height: 70vh; }
}

/* Korrespondenz-Status „Test versendet“ (QA B10, DESIGN_SYSTEM §8.9): eigene, neutrale Kennzeichnung */
.ciblu-badge-testversand { background-color: var(--bs-tertiary-bg, #f1f3f5); color: var(--bs-body-color, #212529); border: 1px dashed var(--bs-secondary-color, #6c757d); }
/* Ausgang unklar (QA B19): klärungsbedürftig – Warnfläche mit rotem Rahmen, weder Erfolg noch Fehlschlag */
.ciblu-badge-ausgang-unklar { background-color: var(--bs-warning-bg-subtle, #fff3cd); color: var(--bs-warning-text-emphasis, #664d03); border: 1px solid var(--bs-danger, #dc3545); }

/* Korrespondenz-Historie in Detailseiten (QA B10): Text darf schrumpfen, Status und Download bleiben in der Karte */
.ciblu-korrespondenz-eintrag { display: flex; align-items: flex-start; gap: 0.5rem; }
.ciblu-korrespondenz-text { flex: 1 1 auto; min-width: 0; }
.ciblu-korrespondenz-eintrag > .badge,
.ciblu-korrespondenz-eintrag > .ciblu-icon-btn { flex-shrink: 0; }
.ciblu-korrespondenz-eintrag > .badge { margin-top: 0.15rem; }
/* Mobil (CMEM-271): Vorlagenname über die ganze Zeile, Status und Download darunter – sonst wird die schmale
   Textspalte mitten im Wort getrennt */
@media (max-width: 575.98px) {
    .ciblu-korrespondenz-eintrag { flex-wrap: wrap; }
    .ciblu-korrespondenz-text { flex-basis: calc(100% - 1.5rem); }
    .ciblu-korrespondenz-eintrag > .badge { margin-left: 1.5rem; align-self: center; }
    .ciblu-korrespondenz-eintrag > .ciblu-icon-btn { margin-left: auto; }
}

/* Touch-Geräte jeder Breite (QA B10, z. B. Tablets ≥ 768 px): Icon-Aktionen mit 44-px-Touch-Ziel */
@media (pointer: coarse) {
    .ciblu-icon-btn { width: 44px; height: 44px; }
}

/* Auswahlleiste für Sammelaktionen über Listen (QA B10, Rechnungsliste): ohne Layout-Sprung; mobil fest über der
   Bottom-Navigation (sticky greift nicht, weil der Drawer-Inhalt selbst overflow: auto hat) */
.ciblu-auswahlleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}
.ciblu-auswahlleiste-aufheben { margin-left: auto; }
@media (max-width: 767.98px) {
    .ciblu-auswahlleiste {
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
        z-index: 1030;
        border: 1px solid var(--ciblu-border-subtle, #dee2e6);
        border-radius: 0.75rem;
        box-shadow: var(--ciblu-shadow-strong, 0 4px 16px rgba(0, 0, 0, 0.15));
    }
    .ciblu-auswahlleiste .dxbl-btn { order: 3; flex: 1 1 100%; min-height: 44px; }
    .ciblu-auswahlleiste-aufheben { min-height: 44px; }
    /* Ohne Auswahl ausgeblendet (die Leiste liegt mobil außerhalb des Flusses, daher kein Layout-Sprung) */
    .ciblu-auswahlleiste.ciblu-auswahlleiste-leer { display: none; }
    /* Platz am Listenende, damit die feste Leiste die letzte Karte nicht verdeckt */
    .ciblu-auswahlleiste:not(.ciblu-auswahlleiste-leer) ~ .ciblu-stapel-tabelle { margin-bottom: 7.5rem !important; }
}

/* Mitglied per Suche auswählen (CMEM-157, Shared/MitgliedSuche.razor): gewählter Eintrag als Zeile mit Entfernen,
   Trefferliste begrenzt und scrollbar; Treffer und Entfernen mit 44-px-Touch-Ziel */
.ciblu-mitglied-suche-auswahl {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background: var(--ciblu-surface);
}
/* Trefferliste als Overlay unter dem Feld (QA B12, U14): kein Layout-Sprung beim Ein- und Ausblenden */
.ciblu-mitglied-suche-feld { position: relative; }
.ciblu-mitglied-suche-liste {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background: var(--ciblu-surface);
    box-shadow: var(--ciblu-shadow-strong, 0 4px 16px rgba(0, 0, 0, 0.15));
}
.ciblu-mitglied-suche-liste .list-group-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Registrierungen in den Pferd-Details (B12): Text und Icon-Aktionen nebeneinander; wird es zu eng (mobil, 44-px-
   Touch-Ziele), rutschen die Aktionen unter den Text statt ihn zu quetschen */
.ciblu-registrierung-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
}
.ciblu-registrierung-text {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Fehlerzustand an DevExpress-Editoren (QA B12, U5): Bootstrap färbt nur .form-control.is-invalid */
.dxbl-text-edit.is-invalid,
.ciblu-feld-ungueltig .dxbl-text-edit {
    border-color: var(--bs-form-invalid-border-color, #dc3545) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

/* Feldhinweis mit reserviertem Platz (QA B12, U18): Einblenden verschiebt das Formular nicht; Kontrast ≥ 4.5:1 */
.ciblu-feldhinweis {
    display: block;
    min-height: 1.5em;
    color: var(--bs-emphasis-color, #212529);
    opacity: 0.8;
}

/* Formular-Aktionsleiste mobil mit 44-px-Touch-Ziel (QA B12, U17) */
@media (max-width: 575.98px) {
    .ciblu-aktionsleiste .dxbl-btn { min-height: 44px; }
}

/* Checkbox- und Radio-Zeilen auf Touch-Geräten und unter 992 px mit 44-px-Touch-Ziel (QA B12, U17; UI-QA B18 U6:
   die Beschriftung füllt die Zeilenhöhe, damit die ganze Zeile antippbar ist) */
@media (max-width: 991.98px), (pointer: coarse) {
    .ciblu-check-touch {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .ciblu-check-touch .form-check-label {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .ciblu-check-touch .form-check-input {
        width: 1.4em;
        height: 1.4em;
        margin-top: 0;
    }
}

/* Native Auswahlfelder mit 44-px-Touch-Ziel unter 992 px bzw. auf Touch-Geräten (Block B18: Beitragslauf-Modus,
   Bankverbindung, Beitragsjahr, automatische Schreiben) */
@media (max-width: 991.98px), (pointer: coarse) {
    .ciblu-select-touch { min-height: 44px; }
}

/* Dialoge zentral (QA B12, U15/U23): höchstens Bildschirmhöhe, Kopf und Fußzeile bleiben stehen, nur der Körper
   scrollt – auch mobil */
body .dxbl-popup .dxbl-modal-content {
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}
body .dxbl-popup .dxbl-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
body .dxbl-popup .dxbl-modal-header,
body .dxbl-popup .dxbl-modal-footer {
    flex: 0 0 auto;
}

/* Datenschutz (Block B22): Wortlaut einer Einwilligung im Dialog – begrenzte Höhe, eigener Scrollbereich, Zeilenumbrüche
   des gepflegten Textes bleiben erhalten (CMEM-212) */
.ciblu-einwilligungstext {
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    background: var(--ciblu-surface-subtle);
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.5rem;
}
.ciblu-vorformatiert {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* ---- UI-QA B22: gemeinsame Bausteine der Datenschutz-Seiten (DESIGN_SYSTEM §7.1a, §8.4, §8.12) ---- */
/* Hilfe- und Nebentexte mindestens 13 px (statt .small/0.8rem), auch in Dialogen (U6) */
.ciblu-hilfetext { font-size: 0.8125rem; line-height: 1.45; }

/* Zellwert der Stapel-Tabelle: ein Block je Zelle, damit mobil Status und Hinweis gemeinsam rechts stehen (U7/U8) */
.ciblu-zellwert { display: block; min-width: 0; overflow-wrap: anywhere; }
.ciblu-zellwert-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }

/* Sprungziel (#weitergabe-n aus Klärfall/Fristen): Zeile hervorheben (U14) */
.ciblu-stapel-tabelle tr.ciblu-zielzeile > *,
.ciblu-stapel-tabelle tr:target > * {
    background-color: rgba(var(--ciblu-brand-primary-rgb), 0.07);
    --bs-table-accent-bg: transparent;
}
.ciblu-stapel-tabelle tr.ciblu-zielzeile > :first-child,
.ciblu-stapel-tabelle tr:target > :first-child { box-shadow: inset 4px 0 0 var(--ciblu-brand-primary); }
.ciblu-stapel-tabelle tr.ciblu-zielzeile,
.ciblu-stapel-tabelle tr:target { scroll-margin-top: 5rem; }

/* Einklappbarer Hinweis (statt mehrzeiliger alert-info): Kernsatz immer sichtbar, Details per Klick; ab 768 px per
   cibluHinweiseOeffnen() geöffnet (U10) */
.ciblu-hinweisbox {
    border: 1px solid rgba(var(--ciblu-brand-primary-rgb), 0.18);
    border-radius: 0.5rem;
    background: rgba(var(--ciblu-brand-primary-rgb), 0.04);
    font-size: 0.875rem;
}
.ciblu-hinweisbox > summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.ciblu-hinweisbox > summary::-webkit-details-marker { display: none; }
.ciblu-hinweisbox > summary > .oi { margin-top: 0.2rem; color: var(--ciblu-brand-primary); }
.ciblu-hinweisbox > summary::after {
    content: "";
    flex-shrink: 0;
    margin: 0.35rem 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
}
.ciblu-hinweisbox[open] > summary::after { transform: rotate(-135deg); margin-top: 0.55rem; }
.ciblu-hinweisbox > summary:focus-visible { outline: 2px solid var(--ciblu-fokus); outline-offset: -2px; border-radius: 0.5rem; }
.ciblu-hinweisbox-text { padding: 0 0.9rem 0.75rem 2.3rem; color: var(--bs-secondary-color, #6c757d); }

/* Stapel-Tabelle schon unter 992 px (viele Spalten neben der Sidebar, U1): gleiche Regeln wie unter 768 px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ciblu-stapel-lg thead { display: none; }
    .ciblu-stapel-lg,
    .ciblu-stapel-lg tbody,
    .ciblu-stapel-lg tr,
    .ciblu-stapel-lg td { display: block; width: 100%; }
    .ciblu-stapel-lg tr { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--ciblu-border-subtle); }
    .ciblu-stapel-lg > :not(caption) > * > * { border-bottom-width: 0; box-shadow: none; }
    .ciblu-stapel-lg td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        padding: 0.15rem 0 !important;
        text-align: right !important;
    }
    .ciblu-stapel-lg td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--bs-secondary-color, #6c757d);
    }
    .ciblu-stapel-lg td.ciblu-stapel-titel { display: block; text-align: left !important; padding-bottom: 0.3rem !important; }
    .ciblu-stapel-lg td.ciblu-stapel-titel::before { content: none; }
    .ciblu-stapel-lg td.ciblu-stapel-aktionen { justify-content: flex-end; padding-top: 0.45rem !important; }
    .ciblu-stapel-lg td.ciblu-stapel-aktionen::before { content: none; }
    .ciblu-stapel-lg tr.ciblu-zielzeile > :first-child,
    .ciblu-stapel-lg tr:target > :first-child { box-shadow: none; }
    .ciblu-stapel-lg tr.ciblu-zielzeile,
    .ciblu-stapel-lg tr:target { box-shadow: inset 4px 0 0 var(--ciblu-brand-primary); }
}
@media (max-width: 991.98px) {
    /* Zellwerte in Karten rechtsbündig; mehrzeilige Werte (Datum + Badge) ebenfalls rechts (U8) */
    .ciblu-stapel-lg td > .ciblu-zellwert { text-align: right; }
    .ciblu-stapel-lg td > .ciblu-zellwert-zeile { justify-content: flex-end; }
}
@media (max-width: 767.98px) {
    .ciblu-stapel-tabelle td > .ciblu-zellwert { text-align: right; }
    .ciblu-stapel-tabelle td > .ciblu-zellwert-zeile { justify-content: flex-end; }
    .ciblu-stapel-tabelle tr.ciblu-zielzeile > :first-child,
    .ciblu-stapel-tabelle tr:target > :first-child { box-shadow: none; }
    .ciblu-stapel-tabelle tr.ciblu-zielzeile,
    .ciblu-stapel-tabelle tr:target { box-shadow: inset 4px 0 0 var(--ciblu-brand-primary); }
}

/* Icon-Aktionen auf Tablet-Breiten mit 44-px-Touch-Ziel – unabhängig davon, ob der Browser „pointer: coarse“ meldet
   (z. B. Tablets mit Stift/Tastatur, U13) */
@media (max-width: 991.98px) {
    .ciblu-icon-btn { width: 44px; height: 44px; }
    .ciblu-row-actions { gap: 0.35rem; }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Folgeprozesse (Block B21)
   ------------------------------------------------------------------------------------------------------------------ */

/* Vergleich zweier Vorlagenversionen (CMEM-210, DESIGN_SYSTEM §7.4j): zeilenweise, entfernt rot, hinzugefügt grün;
   Zeichen „−“/„+“ zusätzlich zur Farbe (nicht nur Farbe als Information) */
.ciblu-diff {
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.5rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.8125rem;
    max-height: 320px;
    overflow: auto;
}
.ciblu-diff-zeile {
    display: flex;
    gap: 0.5rem;
    padding: 0.15rem 0.5rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ciblu-diff-zeichen { flex-shrink: 0; width: 1ch; font-weight: 700; }
.ciblu-diff-text { min-width: 0; }
.ciblu-diff-minus { background: #fde8ea; color: #7a1020; }
.ciblu-diff-plus { background: #e5f4ea; color: #0f5a2a; }
.ciblu-diff-legende { display: inline-block; padding: 0 0.4rem; border-radius: 0.25rem; margin-left: 0.35rem; }

/* Anhänge (CMEM-208, DESIGN_SYSTEM §8.11): Liste mit Dateiname, Größe und Icon-Aktion; Upload-Schaltfläche als Label
   um ein verstecktes InputFile (Tastatur: Fokus auf dem Eingabefeld, sichtbarer Fokusring am Label) */
.ciblu-anhang-liste { display: flex; flex-direction: column; gap: 0.25rem; }
.ciblu-anhang-eintrag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--ciblu-border-subtle);
    border-radius: 0.5rem;
    background: var(--ciblu-surface);
}
.ciblu-anhang-name { flex: 1 1 auto; min-width: 0; }
.ciblu-anhang-upload { position: relative; cursor: pointer; min-height: 2.25rem; display: inline-flex; align-items: center; }
.ciblu-anhang-upload:focus-within { outline: 2px solid var(--ciblu-fokus); outline-offset: 2px; }
.ciblu-anhang-upload.disabled { pointer-events: none; opacity: 0.65; }
@media (max-width: 575.98px) {
    .ciblu-anhang-upload { min-height: 44px; }
}

/* Serienbriefe (CMEM-206, DESIGN_SYSTEM §7.4l): Empfängerlisten scrollen innerhalb der Karte */
.ciblu-serienbrief-liste { max-height: 420px; overflow: auto; }
/* Name in Ergebnislisten einzeilig, bei Platzmangel mit Auslassung (Volltext im title, QA B21 U5) */
.ciblu-name-einzeilig { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 767.98px) {
    .ciblu-serienbrief-liste { max-height: none; }
    /* Fehlerzeile als Karte: Fläche und Akzent statt Zellränder (QA B21 U5) */
    .ciblu-stapel-tabelle tr.ciblu-zeile-fehler { background-color: var(--bs-danger-bg-subtle); box-shadow: inset 4px 0 0 var(--bs-danger); }
    .ciblu-stapel-tabelle tr.ciblu-zeile-fehler > * { background-color: transparent !important; --bs-table-bg-state: transparent; --bs-table-accent-bg: transparent; border: 0; box-shadow: none; }
}
/* Lange E-Mail-Adressen dürfen umbrechen (Druckerei mobil, QA B21 U7) */
.ciblu-umbruch-ueberall { overflow-wrap: anywhere; word-break: break-word; }
/* Bezeichnungen (z. B. Vorlagennamen): Umbruch an Wortgrenzen, ein Wort nur, wenn es allein nicht in die Zeile passt (CMEM-271) */
.ciblu-umbruch-wort { overflow-wrap: break-word; word-break: normal; hyphens: manual; }

/* Stapel-Tabelle: Eingabefeld unter der Beschriftung statt daneben (UI-QA B18, U3: Auswahllisten der automatischen
   Schreiben sonst mobil zu schmal) */
@media (max-width: 991.98px) {
    .ciblu-stapel-lg td.ciblu-stapel-oben { display: block; text-align: left !important; }
    .ciblu-stapel-lg td.ciblu-stapel-oben::before { display: block; margin-bottom: 0.25rem; }
}
@media (max-width: 767.98px) {
    .ciblu-stapel-tabelle td.ciblu-stapel-oben { display: block; text-align: left !important; }
    .ciblu-stapel-tabelle td.ciblu-stapel-oben::before { display: block; margin-bottom: 0.25rem; }
}

/* Dialog „Rolle zuweisen“ (UI-QA B18, U2): Die Zeile des Formular-Layouts ragte mit -12 px Rand über das Formular; beim
   Fokussieren verschob der Browser den Inhalt horizontal und schnitt Beschriftungen ab. Rand aufheben, Rest abschneiden. */
.ciblu-rollen-formular.dxbl-fl > .dxbl-row { margin-left: 0; margin-right: 0; }
.ciblu-rollen-formular.dxbl-fl { overflow-x: clip; }
.dxbl-modal-body:has(> .ciblu-rollen-formular) { overflow-x: clip; }

/* Sport & Qualifikation (Block B19, DESIGN_SYSTEM §7.4p): kleine Bilanz-Kennzahlen in Karten (Turnierstarts,
   Fortbildungsnachweise) – umbrechend, je Kennzahl Wert über der Beschriftung */
.ciblu-bilanz { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }
.ciblu-bilanz > div { display: flex; flex-direction: column-reverse; min-width: 5.5rem; }
.ciblu-bilanz dt { font-size: 0.8125rem; font-weight: 400; color: var(--bs-secondary-color); }
.ciblu-bilanz dd { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
/* Touch-Ziele der neuen Sport-Seiten (Block B19): Chips, Schaltflächen und Eingaben unter 992 px bzw. auf
   Touch-Geräten mindestens 44 px hoch (DESIGN_SYSTEM §10); Container-Klasse am Seiten- bzw. Kartenrumpf */
@media (max-width: 991.98px), (pointer: coarse) {
    .ciblu-touch-ziele .ciblu-chip,
    .ciblu-touch-ziele .dxbl-btn,
    .ciblu-touch-ziele .btn,
    .ciblu-touch-ziele .form-control,
    .ciblu-touch-ziele .form-select { min-height: 44px; }
    .ciblu-touch-ziele .btn-link { display: inline-flex; align-items: center; }
}
/* Mitglied-Detail mit neun Reitern (B19: „Sport“): Zwischen 992 und 1399 px etwas schmalere Reiter, damit die Leiste
   bei 1280 px ohne seitliches Scrollen passt; darunter bleibt die scrollbare Leiste mit Hinweis (UI-QA B19) */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .ciblu-tabs .ciblu-tab { padding-left: 0.6rem; padding-right: 0.6rem; }
}
/* Auswertungen (CMEM-224, DESIGN_SYSTEM §7.4z): Bedingungszeilen; unter 992 px gestapelt als umrandeter Block,
   damit Feld, Operator und Wert einer Bedingung zusammen erkennbar bleiben */
.ciblu-bedingung-wenn { display: inline-flex; align-items: center; min-height: 38px; font-weight: 600; color: var(--bs-secondary-color, #6c757d); }
@media (max-width: 991.98px) {
    .ciblu-bedingung { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.5rem; padding: 0.5rem; }
    .ciblu-bedingung-wenn { min-height: 44px; }
    /* Touch-Ziele 44 px: Bedingung hinzufügen, Export-Schaltflächen, Name der gespeicherten Abfrage */
    .ciblu-auswertung .dxbl-btn, .ciblu-auswertung-export .dxbl-btn { min-height: 44px; }
    .ciblu-abfrage-name { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Konto-Seite, Zwei-Faktor-Einrichtung (CMEM-185, DESIGN_SYSTEM §7.4zv): QR-Code mit weißer Ruhezone auch im dunklen
   Thema, Codefeld schmal, Wiederherstellungscodes zweispaltig in Festbreitenschrift */
.ciblu-qr-code { background: #fff; padding: 8px; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.5rem; max-width: 100%; height: auto; }
.ciblu-code-feld { max-width: 10rem; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.ciblu-codeliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; }
.ciblu-codeliste code { font-size: 0.95rem; color: inherit; }


/* Belegarchiv (CMEM-198, DESIGN_SYSTEM §7.4ze): Filterzeile und Fristeingabe */
.ciblu-filter-auswahl { max-width: 18rem; }
.ciblu-filter-suche { max-width: 20rem; }
.ciblu-frist-eingabe { max-width: 9rem; }
@media (max-width: 767.98px) {
    .ciblu-filter-auswahl, .ciblu-filter-suche { max-width: none; }
}

/* ==== P24b (CMEM-257/258): Filter-Chip-Gruppen und mobile Kartenliste – eigener Block, DESIGN_SYSTEM §7.1a/§8.1 ====
   FilterChipGruppe: sichtbare Kurzbeschriftung je Filterdimension (Status, Impfung, Besitzer …); mobil steht jede
   Gruppe in einer eigenen Zeile, Trenner entfallen. Chips unter 992 px bzw. auf Touch-Geräten mit 44-px-Touch-Ziel.
   MobilKartenListe: baut auf der Stapel-Tabelle auf; Felder mit Oben="true" zeigen den Wert linksbündig unter dem Label. */
.ciblu-chip-gruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; }
.ciblu-chip-label { font-size: 0.8rem; font-weight: 600; color: var(--bs-secondary-color, #6c757d); white-space: nowrap; }
.ciblu-chip-zahl {
    font-size: 0.72rem; font-weight: 650; font-variant-numeric: tabular-nums;
    padding: 0 0.4rem; border-radius: 999px; background: rgba(0, 0, 0, 0.06);
}
.ciblu-chip.on .ciblu-chip-zahl { background: rgba(var(--ciblu-brand-primary-rgb), 0.15); }
@media (max-width: 991.98px), (pointer: coarse) {
    .ciblu-filter-chips .ciblu-chip { min-height: 44px; }
}
@media (max-width: 767.98px) {
    .ciblu-filter-chips .ciblu-chip-sep { display: none; }
    .ciblu-filter-chips .ciblu-chip-gruppe { flex: 1 1 100%; }
    .ciblu-stapel-tabelle td.ciblu-stapel-oben > .ciblu-zellwert { text-align: left; }
    .ciblu-karten-liste td.ciblu-stapel-titel .ciblu-hilfetext { display: block; color: var(--bs-secondary-color, #6c757d); }
}

/* ==== P24c (CMEM-244): Feldhilfe – eigener Block, DESIGN_SYSTEM §8.12 ====
   Info-Symbol an der Beschriftung (24 px Touch-Ziel, WCAG 2.5.8). Der Hilfetext öffnet als Infobox in eigener Zeile unter
   der Beschriftung (im Fluss statt schwebend): keine Abschneidung durch Formular-Container mit overflow:hidden, kein
   Überlauf am rechten Rand, mobil volle Breite. */
.ciblu-feldhilfe { display: inline; margin-left: 0.25rem; }
.ciblu-feldhilfe-knopf {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ciblu-brand-primary); cursor: pointer; line-height: 1;
}
.ciblu-feldhilfe-knopf .oi { font-size: 0.75rem; }
.ciblu-feldhilfe-knopf:hover,
.ciblu-feldhilfe-knopf[aria-expanded="true"] { background: rgba(var(--ciblu-brand-primary-rgb), 0.12); }
.ciblu-feldhilfe-knopf:focus-visible { outline: 2px solid var(--ciblu-fokus); outline-offset: 2px; }
.ciblu-feldhilfe-text {
    display: block; margin: 0.35rem 0 0.25rem; max-width: 40rem;
    padding: 0.55rem 0.75rem; border: 1px solid var(--ciblu-border-subtle); border-left: 3px solid var(--ciblu-brand-primary);
    border-radius: 0.4rem; background: var(--ciblu-surface-subtle); color: var(--bs-body-color, #212529);
    font-size: 0.85rem; font-weight: 400; line-height: 1.4; white-space: normal; text-align: left; text-transform: none;
    letter-spacing: normal; overflow-wrap: break-word;
}
.ciblu-feldhilfe-text[hidden] { display: none; }
/* Feldhilfe HINTER Beschriftung bzw. Überschrift (QA P24c M3): Label/Titel und Symbol in einer Zeile, die Infobox darunter
   über die volle Breite; der Accessible Name von Feld bzw. Überschrift enthält so nicht „Hilfe zu …“. */
.ciblu-mit-hilfe { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.15rem; }
.ciblu-mit-hilfe > label, .ciblu-mit-hilfe > legend, .ciblu-mit-hilfe > h2, .ciblu-mit-hilfe > strong { margin-bottom: 0; width: auto; float: none; }
.ciblu-mit-hilfe > .ciblu-feldhilfe { display: contents; }
.ciblu-mit-hilfe .ciblu-feldhilfe-text { flex: 1 0 100%; }
.ciblu-mit-hilfe.form-label-zeile { margin-bottom: 0.5rem; }

/* ==== P24c/P25d (CMEM-248): Farbschema „WED“ – eigener Block, DESIGN_SYSTEM §3.4 ====
   Zweites Farbschema als Satz von Theme-Tokens, umschaltbar per <html data-ciblu-theme="wed"> (Design:Theme bzw.
   Administration → Erscheinungsbild). Farben von https://www.wed-ev.com/ (PO-Entscheidung 2026-10-16): Gold #D5B26B,
   dunkles Gold #AD8945, Schwarz, Weiß, Text #555555, Flächen #F2F2F2, Rahmen #E0E0E0, Rot #D20A11.
   Barrierefreiheit (WCAG 2.1 AA, Werte in DESIGN_SYSTEM §3.4): Weiß auf Gold erreicht nur 2,02:1 – Gold ist deshalb
   nur Füllfarbe mit SCHWARZER Schrift (10,41:1). Text, Links, Icons und Rahmen nutzen das abgeleitete Dunkelgold
   #7A5F24 (6,02:1 auf Weiß, Weiß darauf ebenfalls 6,02:1 – Bootstrap- und DevExpress-Füllungen mit weißer Schrift
   bleiben so AA). Fokusrahmen schwarz (≥ 10:1 auf Weiß, Grau und Gold).
   Schrift „Ample Soft Pro“ der Webseite ist kommerziell und wird NICHT eingebunden (keine Schriftdatei, CSP font-src
   'self'); sie steht nur vorn im Stapel, falls lokal installiert, sonst gelten die Systemschriften. */
:root {
    --ciblu-font-text: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --ciblu-font-titel: var(--ciblu-font-text);
}

:root[data-ciblu-theme="wed"] {
    --ciblu-brand-primary: #7a5f24;
    --ciblu-brand-primary-rgb: 122, 95, 36;
    --ciblu-brand-primary-dark: #5c4719;
    --ciblu-brand-primary-dark-rgb: 92, 71, 25;
    --ciblu-brand-black: #000000;
    --ciblu-page-bg: #f2f2f2;
    --ciblu-surface: #ffffff;
    --ciblu-surface-subtle: #f2f2f2;
    --ciblu-border-subtle: #e0e0e0;
    --ciblu-shadow-soft: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.06);
    --ciblu-shadow-strong: 0 1rem 2.5rem rgba(0, 0, 0, 0.12);
    --ciblu-card-radius: 0.5rem;
    --ciblu-akzent: #d5b26b;
    --ciblu-akzent-rgb: 213, 178, 107;
    --ciblu-akzent-hover: #ad8945;
    --ciblu-auf-akzent: #000000;
    --ciblu-creme: #fffcd7;
    --ciblu-fokus: #000000;
    --ciblu-danger: #d20a11;
    --ciblu-danger-tint: rgba(210, 10, 17, 0.05);
    --ciblu-warnung: #8a4b0f;
    --ciblu-erfolg: #126b44;
    --ciblu-info-flaeche: #10657f;
    --ciblu-auf-info: #ffffff;
    --ciblu-font-text: "Ample Soft Pro", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
    --ciblu-font-titel: var(--ciblu-font-text);
    --bs-body-font-family: var(--ciblu-font-text);
    --bs-secondary-color: #555555;
    --bs-border-color: #e0e0e0;
    --bs-danger: #d20a11;
    --bs-danger-rgb: 210, 10, 17;
    --bs-focus-ring-color: rgba(0, 0, 0, 0.45);
}

:root[data-ciblu-theme="wed"] body { font-family: var(--ciblu-font-text); }

:root[data-ciblu-theme="wed"] h1,
:root[data-ciblu-theme="wed"] .h1,
:root[data-ciblu-theme="wed"] h2,
:root[data-ciblu-theme="wed"] .h2,
:root[data-ciblu-theme="wed"] h3,
:root[data-ciblu-theme="wed"] .h3,
:root[data-ciblu-theme="wed"] .ciblu-brand-name {
    font-family: var(--ciblu-font-titel);
}

/* WED: Gold-Flächen mit schwarzer Schrift – Primär-Schaltflächen (DevExpress RenderStyle Primary, Bootstrap
   .btn-primary), aktive Filter-Chips, Primär-Badges. Hover dunkleres Gold (#AD8945, Schwarz darauf 6,44:1). */
:root[data-ciblu-theme="wed"] .dxbl-btn-standalone.dxbl-btn-primary,
:root[data-ciblu-theme="wed"] .dxbl-btn-primary:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-bg: var(--ciblu-akzent);
    --dxbl-btn-border-color: var(--ciblu-akzent);
    --dxbl-btn-color: var(--ciblu-auf-akzent);
    --dxbl-btn-hover-bg: var(--ciblu-akzent);
    --dxbl-btn-hover-border-color: var(--ciblu-akzent-hover);
    --dxbl-btn-hover-color: var(--ciblu-auf-akzent);
    --dxbl-btn-active-bg: var(--ciblu-akzent);
    --dxbl-btn-active-border-color: var(--ciblu-akzent-hover);
    --dxbl-btn-active-color: var(--ciblu-auf-akzent);
    --dxbl-btn-disabled-bg: var(--ciblu-akzent);
    --dxbl-btn-disabled-border-color: var(--ciblu-akzent);
    --dxbl-btn-disabled-color: var(--ciblu-auf-akzent);
    --dxbl-btn-focus-color: var(--ciblu-fokus);
    --dxbl-btn-focus-border-bg: var(--ciblu-fokus);
    --dxbl-btn-focus-outline-color: var(--ciblu-fokus);
}
:root[data-ciblu-theme="wed"] .dxbl-btn-standalone.dxbl-btn-outline-primary {
    --dxbl-btn-hover-bg: var(--ciblu-akzent);
    --dxbl-btn-hover-border-color: var(--ciblu-akzent-hover);
    --dxbl-btn-hover-color: var(--ciblu-auf-akzent);
    --dxbl-btn-active-bg: var(--ciblu-akzent);
    --dxbl-btn-active-border-color: var(--ciblu-akzent-hover);
    --dxbl-btn-active-color: var(--ciblu-auf-akzent);
    --dxbl-btn-focus-outline-color: var(--ciblu-fokus);
}
:root[data-ciblu-theme="wed"] .btn-primary {
    --bs-btn-color: var(--ciblu-auf-akzent);
    --bs-btn-bg: var(--ciblu-akzent);
    --bs-btn-border-color: var(--ciblu-akzent);
    --bs-btn-hover-color: var(--ciblu-auf-akzent);
    --bs-btn-hover-bg: var(--ciblu-akzent-hover);
    --bs-btn-hover-border-color: var(--ciblu-akzent-hover);
    --bs-btn-active-color: var(--ciblu-auf-akzent);
    --bs-btn-active-bg: var(--ciblu-akzent-hover);
    --bs-btn-active-border-color: var(--ciblu-akzent-hover);
    --bs-btn-disabled-color: var(--ciblu-auf-akzent);
    --bs-btn-disabled-bg: var(--ciblu-akzent);
    --bs-btn-disabled-border-color: var(--ciblu-akzent);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}
:root[data-ciblu-theme="wed"] .btn-outline-primary {
    --bs-btn-color: var(--ciblu-brand-primary);
    --bs-btn-border-color: var(--ciblu-brand-primary);
    --bs-btn-hover-color: var(--ciblu-auf-akzent);
    --bs-btn-hover-bg: var(--ciblu-akzent);
    --bs-btn-hover-border-color: var(--ciblu-akzent-hover);
    --bs-btn-active-color: var(--ciblu-auf-akzent);
    --bs-btn-active-bg: var(--ciblu-akzent-hover);
    --bs-btn-active-border-color: var(--ciblu-akzent-hover);
}
:root[data-ciblu-theme="wed"] .badge.bg-primary,
:root[data-ciblu-theme="wed"] .text-bg-primary {
    background-color: var(--ciblu-akzent) !important;
    color: var(--ciblu-auf-akzent) !important;
}
:root[data-ciblu-theme="wed"] .ciblu-chip.on {
    color: var(--ciblu-auf-akzent);
    background: var(--ciblu-akzent);
    border-color: var(--ciblu-akzent);
}
:root[data-ciblu-theme="wed"] .ciblu-chip.on .oi { color: var(--ciblu-auf-akzent); }
:root[data-ciblu-theme="wed"] .ciblu-chip.on .ciblu-chip-zahl { background: rgba(0, 0, 0, 0.12); }
:root[data-ciblu-theme="wed"] .ciblu-chip:hover { border-color: var(--ciblu-akzent-hover); }

/* WED: Marken-Kopf schwarz mit goldenem Buchstaben (10,41:1), Topbar mit goldener Unterkante (dekorativ),
   KPI-Akzentleiste und Rollenbalken in Gold bzw. Dunkelgold, aktive Bottom-Navigation mit goldener Oberkante. */
/* Ohne Vereinslogo zeigt der Marken-Kopf im WED-Schema das WED-Logo statt des Buchstaben-Chips (§3.4 Markenlogo) */
:root[data-ciblu-theme="wed"] .ciblu-brand-logo {
    width: 2.75rem; border-radius: 0; font-size: 0; color: transparent;
    background: url("../images/logo-wed.png") center / contain no-repeat;
}
:root[data-ciblu-theme="wed"] .ciblu-shell-gradient { background-image: linear-gradient(135deg, #000000 0%, var(--ciblu-brand-primary-dark) 100%); }
:root[data-ciblu-theme="wed"] .ciblu-topbar { border-bottom: 3px solid var(--ciblu-akzent); }
:root[data-ciblu-theme="wed"] .ciblu-kpi-brand { --ciblu-kpi-tint: rgba(var(--ciblu-akzent-rgb), 0.22); }
:root[data-ciblu-theme="wed"] .ciblu-kpi-brand::before { background: var(--ciblu-akzent); }
:root[data-ciblu-theme="wed"] .ciblu-rolebar-track { background: rgba(var(--ciblu-akzent-rgb), 0.22); }
:root[data-ciblu-theme="wed"] .ciblu-nav-item.active .ciblu-nav-count { background: rgba(0, 0, 0, 0.12); }
:root[data-ciblu-theme="wed"] .ciblu-nav-subitem.active { background-color: var(--ciblu-creme); color: var(--ciblu-brand-primary); }
:root[data-ciblu-theme="wed"] .ciblu-bottom-nav-item.active { box-shadow: inset 0 3px 0 var(--ciblu-akzent); }

/* WED: Statusfarben bleiben semantisch. Fehler im WED-Rot (#D20A11) auf 5-%-Tönung (5,09:1 auf Weiß, 4,53:1 über
   #F2F2F2) mit feinem Rand; Warnung dunkler als im Ciblu-Schema (#8A4B0F: 5,51:1 auf der Tönung über Weiß, 4,95:1
   über #F2F2F2 – #A35A12 erreicht auf der grauen Fläche nur 3,89:1). */
:root[data-ciblu-theme="wed"] .ciblu-badge-danger { box-shadow: inset 0 0 0 1px rgba(210, 10, 17, 0.3); }
:root[data-ciblu-theme="wed"] .ciblu-badge-warning { color: var(--ciblu-warnung); }
/* Erfolg dunkler als im Ciblu-Schema (QA P25d): #126B44 auf 12-%-Tönung 5,47:1 über Weiß, 4,92:1 über #F2F2F2 –
   #157A4E erreicht über #F2F2F2 nur 4,09:1 (Ciblu-Schema unverändert, CMEM-286) */
:root[data-ciblu-theme="wed"] .ciblu-badge-success { background-color: rgba(18, 107, 68, 0.12); color: var(--ciblu-erfolg); }
:root[data-ciblu-theme="wed"] .ciblu-kpi-success { --ciblu-kpi-accent: var(--ciblu-erfolg); --ciblu-kpi-tint: rgba(18, 107, 68, 0.12); }
:root[data-ciblu-theme="wed"] .ciblu-hub-card-icon-success { background-color: rgba(18, 107, 68, 0.12); color: var(--ciblu-erfolg); }
:root[data-ciblu-theme="wed"] .ciblu-kpi-trend-up,
:root[data-ciblu-theme="wed"] .ciblu-icon-btn.success:hover { color: var(--ciblu-erfolg); }
:root[data-ciblu-theme="wed"] .ciblu-kpi-warning { --ciblu-kpi-accent: var(--ciblu-warnung); }
:root[data-ciblu-theme="wed"] .ciblu-hub-card-icon-warning,
:root[data-ciblu-theme="wed"] .ciblu-confirm-icon-warning { color: var(--ciblu-warnung); }

/* WED: Info- und Warn-Schaltflächen (DevExpress RenderStyle Info/Warning, Outline) – Bootstrap-Cyan (#0DCAF0) und
   -Gelb (#FFC107) erreichen mit Weiß bzw. als Schrift auf Weiß nur 1,96:1 bzw. 1,63:1. Info nutzt im WED-Schema die
   Statusfarbe #10657F (Weiß darauf 6,58:1), Outline-Warnung die dunkle Warnfarbe (6,79:1 auf Weiß). */
:root[data-ciblu-theme="wed"] {
    --bs-info: #10657f;
    --bs-info-rgb: 16, 101, 127;
}
/* bg-opacity-getönte Badges ausgenommen: weiße Schrift auf heller Tönung wäre unlesbar (1,16:1, QA P26) */
:root[data-ciblu-theme="wed"] .badge.bg-info:not([class*="bg-opacity"]) { color: #ffffff !important; }
/* Bootstrap-.btn-info (z. B. „Designer öffnen“ in den Brief-Vorlagen): Bootstrap schreibt das Cyan fest – im WED-Schema Petrol mit
   weißer Schrift wie die DevExpress-Info-Schaltflächen (Hover dunkleres Petrol #0B566C, Weiß darauf > 8:1). */
:root[data-ciblu-theme="wed"] .btn-info {
    --bs-btn-color: var(--ciblu-auf-info);
    --bs-btn-bg: var(--ciblu-info-flaeche);
    --bs-btn-border-color: var(--ciblu-info-flaeche);
    --bs-btn-hover-color: var(--ciblu-auf-info);
    --bs-btn-hover-bg: #0b566c;
    --bs-btn-hover-border-color: #0b566c;
    --bs-btn-active-color: var(--ciblu-auf-info);
    --bs-btn-active-bg: #0b566c;
    --bs-btn-active-border-color: #0b566c;
    --bs-btn-disabled-color: var(--ciblu-auf-info);
    --bs-btn-disabled-bg: var(--ciblu-info-flaeche);
    --bs-btn-disabled-border-color: var(--ciblu-info-flaeche);
}
:root[data-ciblu-theme="wed"] .dxbl-btn-standalone.dxbl-btn-outline-warning {
    --dxbl-btn-color: var(--ciblu-warnung);
    --dxbl-btn-border-color: var(--ciblu-warnung);
    --dxbl-btn-hover-color: #212529;
    --dxbl-btn-active-color: #212529;
    --dxbl-btn-disabled-color: var(--ciblu-warnung);
    --dxbl-btn-disabled-border-color: var(--ciblu-warnung);
}

/* Vereinslogo in der Sidebar statt des Buchstaben-Chips (CMEM-248), beide Farbschemata */
.ciblu-brand-logo-bild {
    width: 2.25rem; height: 2.25rem; flex-shrink: 0; object-fit: contain;
    border-radius: 0.4rem; background: var(--ciblu-surface);
}

/* Kennzeichen „Testinstanz“ in den Kopfzeilen von Verwaltung und Portal (DESIGN_SYSTEM §3.4): Warnfarben von Bootstrap
   (#664d03 auf #fff3cd, 8,1:1), beide Farbschemata gleich */
.ciblu-testinstanz {
    display: inline-flex; align-items: center; flex-shrink: 0;
    padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid #ffda6a;
    background: #fff3cd; color: #664d03; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
/* Unter 576 px (Verwaltung): Leiste unter der Topbar statt der Pille, lange Adressen brechen um */
.ciblu-testinstanz-leiste {
    padding: 0.3rem 1rem; background: #fff3cd; color: #664d03; border-bottom: 1px solid #ffda6a;
    font-size: 0.8rem; font-weight: 600; overflow-wrap: anywhere;
}

/* Markenlogo der Anmeldeseiten (Verwaltung und Portal) je Farbschema: Ciblu-Signet bzw. WED-Logo. Als Hintergrund,
   damit nur das Bild des aktiven Schemas geladen wird; dekorativ (aria-hidden), die Überschrift trägt die Bedeutung. */
.ciblu-markenlogo {
    display: inline-block; width: 72px; height: 63px;
    background: url("../images/logo.svg") center / contain no-repeat;
}
:root[data-ciblu-theme="wed"] .ciblu-markenlogo { width: 104px; height: 85px; background-image: url("../images/logo-wed.png"); }

/* Vorschau der Farbschemata (Administration → Erscheinungsbild) */
.ciblu-theme-vorschau { display: flex; gap: 0.35rem; margin-top: 0.4rem; }
.ciblu-theme-vorschau span { width: 1.5rem; height: 1.5rem; border-radius: 0.3rem; border: 1px solid rgba(0, 0, 0, 0.15); }

/* ==== P24c (CMEM-249): Sprachumschalter – eigener Block, DESIGN_SYSTEM §10a ====
   Zwei Schaltflächen DE | EN als Segment in der Topbar bzw. auf der Anmeldeseite; aktiv in Markenfarbe (aria-pressed).
   Mobil (Touch) 44 px hoch. */
.ciblu-sprache {
    display: inline-flex; flex-shrink: 0; overflow: hidden;
    border: 1px solid var(--ciblu-border-subtle); border-radius: 999px; background: var(--ciblu-surface);
}
.ciblu-sprache-knopf {
    min-width: 2.25rem; min-height: 2rem; padding: 0.2rem 0.55rem; border: 0; background: transparent;
    color: var(--bs-body-color, #212529); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.02em; cursor: pointer;
}
.ciblu-sprache-knopf:hover { background: var(--ciblu-surface-subtle); }
.ciblu-sprache-knopf.on { background: var(--ciblu-akzent); color: var(--ciblu-auf-akzent); }
.ciblu-sprache-knopf:focus-visible { outline: 2px solid var(--ciblu-fokus); outline-offset: -2px; }
@media (pointer: coarse) {
    .ciblu-sprache-knopf { min-width: 44px; min-height: 44px; }
}
/* Schmale Bildschirme: in der Topbar nur die jeweils andere Sprache (ein 44-px-Knopf), engere Abstände – sonst ragt
   „Abmelden“ bei 375 px über den Rand. */
@media (max-width: 575.98px) {
    .ciblu-topbar { gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
    .ciblu-topbar .ciblu-sprache-knopf.on { display: none; }
}