/* ==========================================================================
   FlexECM - Enterprise Content Management
   Haupt-Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    /* Primärfarben - Stahlblau Akzent */
    --farbe-primaer-50: #eef4fb;
    --farbe-primaer-100: #d4e3f2;
    --farbe-primaer-200: #b0cce5;
    --farbe-primaer-300: #7fafd4;
    --farbe-primaer-400: #5a9ac7;
    --farbe-primaer-500: #4a8ec2;
    --farbe-primaer-600: #3574a5;
    --farbe-primaer-700: #2d6490;
    --farbe-primaer-800: #254f72;
    --farbe-primaer-900: #1c3a54;

    /* Akzent (Aliase) */
    --farbe-akzent: #3574a5;
    --farbe-akzent-hell: #4a8ec2;
    --farbe-akzent-bg: #eef4fb;
    --farbe-akzent-rand: #d4e3f2;

    /* Icon Rail (ehemals Sidebar) */
    --farbe-sidebar: #ffffff;
    --farbe-sidebar-hover: #f4f5f7;
    --farbe-sidebar-aktiv: #3574a5;
    --farbe-sidebar-text: #8a919c;
    --farbe-sidebar-text-aktiv: #3574a5;

    /* Hintergründe */
    --farbe-hintergrund: #f4f5f7;
    --farbe-hintergrund-karte: #ffffff;
    --farbe-hintergrund-hover: #f8f9fb;

    /* Text */
    --farbe-text: #1a2030;
    --farbe-text-sekundaer: #6b7280;
    --farbe-text-deaktiviert: #b0b6c0;
    --farbe-text-invers: #ffffff;

    /* Ränder */
    --farbe-rand: #e4e7ec;
    --farbe-rand-fokus: #3574a5;
    --farbe-rand-fehler: #ef4444;

    /* Status-Farben */
    --farbe-erfolg: #2d7d5a;
    --farbe-erfolg-bg: #edf7f1;
    --farbe-erfolg-rand: #c8e8d6;
    --farbe-warnung: #9a6e2e;
    --farbe-warnung-bg: #fdf5ec;
    --farbe-warnung-rand: #f0dfc4;
    --farbe-fehler: #c94444;
    --farbe-fehler-bg: #fef2f2;
    --farbe-fehler-rand: #fecaca;
    --farbe-info: #3574a5;
    --farbe-info-bg: #eef4fb;
    --farbe-info-rand: #d4e3f2;

    /* Badge-Farben: Status mit Dot-Variante */
    --badge-offen: #3574a5;
    --badge-offen-bg: #eef4fb;
    --badge-offen-rand: #d4e3f2;
    --badge-offen-dot: #4a8ec2;
    --badge-bearbeitung: #9a6e2e;
    --badge-bearbeitung-bg: #fdf5ec;
    --badge-bearbeitung-rand: #f0dfc4;
    --badge-bearbeitung-dot: #b8862e;
    --badge-erledigt: #2d7d5a;
    --badge-erledigt-bg: #edf7f1;
    --badge-erledigt-rand: #c8e8d6;
    --badge-erledigt-dot: #3d9970;
    --badge-fehler: #c94444;
    --badge-fehler-bg: #fef2f2;
    --badge-fehler-rand: #fecaca;
    --badge-fehler-dot: #ef4444;
    --badge-gesendet: #2d7d5a;
    --badge-gesendet-bg: #edf7f1;
    --badge-gesendet-rand: #c8e8d6;
    --badge-gesendet-dot: #3d9970;
    --badge-neu: #3574a5;
    --badge-neu-bg: #eef4fb;
    --badge-neu-rand: #d4e3f2;
    --badge-neu-dot: #4a8ec2;

    /* Badge: Benachrichtigung (warm orange) */
    --farbe-badge-benachrichtigung: #c4735a;

    /* Rollen-Farben */
    --rolle-admin: #c94444;
    --rolle-admin-bg: #fef2f2;
    --rolle-verwalter: #9a6e2e;
    --rolle-verwalter-bg: #fdf5ec;
    --rolle-benutzer: #3574a5;
    --rolle-benutzer-bg: #eef4fb;
    --rolle-leser: #2d7d5a;
    --rolle-leser-bg: #edf7f1;
    --rolle-extern: #8b5fc7;
    --rolle-extern-bg: #f5f0ff;

    /* Layout-Maße */
    --sidebar-breite: 48px;
    --icon-rail-breite: 48px;
    --kontextpanel-breite: 230px;
    --topbar-hoehe: 54px;
    --header-hoehe: 54px;

    /* Typografie */
    --font-familie: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --font-groesse-xs: 0.75rem;
    --font-groesse-sm: 0.8125rem;
    --font-groesse-basis: 0.875rem;
    --font-groesse-md: 1rem;
    --font-groesse-lg: 1.125rem;
    --font-groesse-xl: 1.25rem;
    --font-groesse-2xl: 1.5rem;

    /* Abstände */
    --abstand-xs: 0.25rem;
    --abstand-sm: 0.5rem;
    --abstand-md: 0.75rem;
    --abstand-lg: 1rem;
    --abstand-xl: 1.5rem;
    --abstand-2xl: 2rem;

    /* Schatten (subtiler) */
    --schatten-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --schatten-md: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --schatten-lg: 0 6px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --schatten-xl: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);

    /* Radien */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.5625rem;

    /* Übergänge */
    --uebergang-schnell: 150ms ease;
    --uebergang-normal: 200ms ease;
    --uebergang-langsam: 300ms ease;
}

/* --------------------------------------------------------------------------
   Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-familie);
    font-size: var(--font-groesse-basis);
    line-height: 1.5;
    color: var(--farbe-text);
    background-color: var(--farbe-hintergrund);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--farbe-primaer-600);
    text-decoration: none;
}

a:hover {
    color: var(--farbe-primaer-700);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Layout: App-Shell (Header + Icon Rail + Main)
   -------------------------------------------------------------------------- */
.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Icon Rail (48px, hell, links) */
.sidebar {
    position: fixed;
    top: var(--header-hoehe);
    left: 0;
    width: var(--icon-rail-breite);
    height: calc(100vh - var(--header-hoehe));
    background: var(--farbe-sidebar);
    border-right: 1px solid var(--farbe-rand);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--abstand-md);
    z-index: 40;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar__logo {
    width: 32px;
    height: 32px;
    background: var(--farbe-akzent-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--farbe-akzent);
    font-weight: 700;
    font-size: var(--font-groesse-sm);
    margin-bottom: var(--abstand-lg);
    flex-shrink: 0;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--abstand-xs);
    flex: 1;
    width: 100%;
    padding: 0 var(--abstand-sm);
}

.sidebar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--farbe-sidebar-text);
    font-size: 1rem;
    transition: all var(--uebergang-schnell);
    text-decoration: none;
    position: relative;
}

.sidebar__link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sidebar__link:hover {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    text-decoration: none;
}

.sidebar__link--aktiv {
    background: var(--farbe-akzent-bg);
    color: var(--farbe-akzent);
}

/* Aktiver Indikator: accent-farbiger Left-Bar */
.sidebar__link--aktiv::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5px;
    height: 20px;
    background: var(--farbe-akzent);
    border-radius: 0 2px 2px 0;
}

.sidebar__link[title]::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--farbe-text);
    color: var(--farbe-text-invers);
    padding: var(--abstand-xs) var(--abstand-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-groesse-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--uebergang-schnell);
    z-index: 50;
}

.sidebar__link:hover[title]::after {
    opacity: 1;
}

.sidebar__badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    background: var(--farbe-badge-benachrichtigung);
    color: var(--farbe-text-invers);
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 2px solid var(--farbe-hintergrund-karte);
}

.sidebar__badge--fehler {
    background: var(--farbe-fehler, #dc2626);
}

/* Zustellfehler-Banner (volle Breite oben) */
/* ── Zustellproblem Detail Modal ── */
.zp__header {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 20px 24px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}
.zp__header-icon {
    color: #dc2626;
    flex-shrink: 0;
}
.zp__header-titel {
    font-size: 15px;
    font-weight: 600;
    color: #991b1b;
    line-height: 1.4;
}
.zp__header-zeit {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}
.zp__mail {
    padding: 16px 24px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.zp__mail-tabelle {
    width: 100%;
    border-collapse: collapse;
}
.zp__mail-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    padding: 3px 12px 3px 0;
    white-space: nowrap;
    width: 60px;
    vertical-align: top;
}
.zp__mail-wert {
    font-size: 13px;
    color: #111827;
    padding: 3px 0;
    word-break: break-all;
}
.zp__mail-wert--fett {
    font-weight: 600;
}
.zp__body {
    padding: 20px 24px;
}
.zp__abschnitt {
    margin-bottom: 16px;
}
.zp__abschnitt-titel {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.zp__abschnitt-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.6;
    margin: 0;
}
.zp__hinweis {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    margin-bottom: 16px;
}
.zp__hinweis-icon {
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 1px;
}
.zp__hinweis-text {
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
    margin: 0;
}
.zp__technisch {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}
.zp__technisch-summary {
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.zp__technisch-summary::before {
    content: '\25B6';
    font-size: 8px;
    transition: transform 0.15s;
}
.zp__technisch[open] > .zp__technisch-summary::before {
    transform: rotate(90deg);
}
.zp__technisch-summary:hover {
    color: #374151;
}
.zp__technisch-summary::-webkit-details-marker {
    display: none;
}
.zp__technisch-body {
    margin-top: 12px;
}
.zp__technisch-grid {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 4px 10px;
    font-size: 12px;
    color: #374151;
}
.zp__technisch-key {
    font-weight: 600;
    color: #6b7280;
}
.zp__technisch-antwort {
    margin-top: 10px;
}
.zp__pre {
    margin-top: 6px;
    padding: 10px 12px;
    background: #1f2937;
    border-radius: 6px;
    font-size: 11px;
    font-family: 'Menlo', 'Consolas', monospace;
    white-space: pre-wrap;
    word-break: break-all;
    color: #e5e7eb;
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.6;
}

.zustellfehler-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #991b1b;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.zustellfehler-banner__inhalt {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-md) var(--abstand-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.zustellfehler-banner__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.zustellfehler-banner__text {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.4;
}

.zustellfehler-banner__detail {
    display: block;
    opacity: 0.85;
    font-size: 0.8125rem;
    margin-top: 2px;
}

.zustellfehler-banner__aktionen {
    display: flex;
    gap: var(--abstand-sm);
    flex-shrink: 0;
}

.zustellfehler-banner__anzeigen {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    padding: var(--abstand-xs) var(--abstand-md);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.zustellfehler-banner__anzeigen:hover {
    background: rgba(255, 255, 255, 0.35);
}

.zustellfehler-banner__bestaetigen {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    padding: var(--abstand-xs) var(--abstand-md);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.zustellfehler-banner__bestaetigen:hover {
    background: rgba(255, 255, 255, 0.35);
}

.sidebar__trenner {
    width: 24px;
    height: 1px;
    background: var(--farbe-rand);
    margin: var(--abstand-sm) 0;
}

.sidebar__fuss {
    padding: var(--abstand-md) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--abstand-xs);
}

.sidebar__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--farbe-akzent);
    color: var(--farbe-text-invers);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--uebergang-schnell);
    border: none;
}

.sidebar__avatar:hover {
    background: var(--farbe-akzent-hell);
}

/* Kontextpanel (Filterbaum) */
.kontextpanel {
    position: fixed;
    top: var(--header-hoehe);
    left: var(--icon-rail-breite);
    width: var(--kontextpanel-breite);
    height: calc(100vh - var(--header-hoehe));
    background: var(--farbe-hintergrund-karte);
    border-right: 1px solid var(--farbe-rand);
    overflow-y: auto;
    z-index: 30;
    transition: transform var(--uebergang-langsam);
}

.kontextpanel--versteckt {
    transform: translateX(calc(-1 * var(--kontextpanel-breite)));
}

/* Hauptbereich */
.hauptbereich {
    margin-left: var(--icon-rail-breite);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-hoehe));
    transition: margin-left var(--uebergang-langsam);
}

.hauptbereich--mit-kontextpanel {
    margin-left: calc(var(--icon-rail-breite) + var(--kontextpanel-breite));
}

/* Header (full-width, oben) */
.topbar {
    height: var(--header-hoehe);
    background: var(--farbe-hintergrund-karte);
    border-bottom: 1px solid var(--farbe-rand);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--abstand-xl);
    position: sticky;
    top: 0;
    z-index: 45;
}

/* Header-Logo-Bereich */
.topbar__logo {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

.topbar__logo-icon {
    width: 32px;
    height: 32px;
    background: var(--farbe-akzent-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--farbe-akzent);
    font-weight: 700;
    font-size: var(--font-groesse-sm);
    flex-shrink: 0;
}

.topbar__logo-text {
    font-size: var(--font-groesse-md);
    font-weight: 700;
    color: var(--farbe-text);
    letter-spacing: -0.01em;
}

.topbar__logo-trenner {
    width: 1px;
    height: 20px;
    background: var(--farbe-rand);
    margin: 0 var(--abstand-sm);
}

.topbar__links {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
}

.topbar__rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
}

.topbar__mandant {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-xs) var(--abstand-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--farbe-rand);
    background: var(--farbe-hintergrund);
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    color: var(--farbe-text);
    cursor: pointer;
    transition: all var(--uebergang-schnell);
}

.topbar__mandant:hover {
    border-color: var(--farbe-primaer-300);
    background: var(--farbe-primaer-50);
}

.topbar__suche {
    position: relative;
    display: flex;
    align-items: center;
}

.topbar__suche-input {
    width: 240px;
    height: 32px;
    padding: 0 var(--abstand-md) 0 2rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    background: var(--farbe-hintergrund);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text);
    transition: all var(--uebergang-schnell);
}

.topbar__suche-input::placeholder {
    color: var(--farbe-text-deaktiviert);
}

.topbar__suche-input:focus {
    outline: none;
    border-color: var(--farbe-rand-fokus);
    box-shadow: 0 0 0 3px rgba(53, 116, 165, 0.1);
    background: var(--farbe-hintergrund-karte);
}

/* Suche-Hilfe: ?-Icon mit Popover */
.suche-hilfe {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: var(--abstand-xs);
    cursor: help;
}

.suche-hilfe__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--farbe-rand);
    background: var(--farbe-hintergrund-sekundaer);
    color: var(--farbe-text-sekundaer);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.suche-hilfe__popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: 280px;
    padding: var(--abstand-sm) var(--abstand-md);
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    box-shadow: var(--schatten-md);
}

.suche-hilfe:hover .suche-hilfe__popover,
.suche-hilfe:focus-within .suche-hilfe__popover {
    display: block;
}

.suche-hilfe__titel {
    font-weight: 600;
    font-size: var(--schrift-sm);
    margin-bottom: var(--abstand-xs);
    color: var(--farbe-text);
}

.suche-hilfe__liste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    font-size: var(--schrift-xs);
    margin: 0;
}

.suche-hilfe__liste dt {
    font-family: monospace;
    font-weight: 600;
    color: var(--farbe-primaer);
    white-space: nowrap;
}

.suche-hilfe__liste dd {
    margin: 0;
    color: var(--farbe-text-sekundaer);
}

/* Tastenkürzel-Hinweis im Suchfeld */
.topbar__suche-kbd {
    position: absolute;
    right: var(--abstand-sm);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}

.topbar__suche-kbd kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    border: 1px solid var(--farbe-rand);
    border-radius: 3px;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-deaktiviert);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    line-height: 1;
}

/* Header-Benachrichtigungsglocke */
.topbar__benachrichtigung {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--farbe-sidebar-text);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--uebergang-schnell);
}

.topbar__benachrichtigung:hover {
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
}

.topbar__benachrichtigung svg {
    width: 18px;
    height: 18px;
}

.topbar__benachrichtigung-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    background: var(--farbe-badge-benachrichtigung);
    color: var(--farbe-text-invers);
    font-size: 0.5rem;
    font-weight: 700;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 2px solid var(--farbe-hintergrund-karte);
}

/* Header-Avatar */
.topbar__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--farbe-akzent);
    color: var(--farbe-text-invers);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--uebergang-schnell);
    border: none;
}

.topbar__avatar:hover {
    background: var(--farbe-akzent-hell);
}

.topbar__suche-icon {
    position: absolute;
    left: var(--abstand-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--farbe-text-deaktiviert);
    font-size: var(--font-groesse-sm);
    pointer-events: none;
}

.topbar__suche-vorschlaege {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--abstand-xs);
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    box-shadow: var(--schatten-lg);
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
}

.topbar__suche-vorschlaege.suche-vorschlaege--sichtbar {
    display: block;
}

.topbar__suche-vorschlag {
    padding: var(--abstand-sm) var(--abstand-md);
    cursor: pointer;
    transition: background var(--uebergang-schnell);
}

.topbar__suche-vorschlag:hover {
    background: var(--farbe-hintergrund-hover);
}

/* Inhalt */
.inhalt {
    flex: 1;
    padding: var(--abstand-xl);
}

/* Vollbild-Modus für Workflow-Designer: kein Padding, Höhe füllen */
.inhalt:has(.workflow-designer) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Auth-Layout (Login, Einladung, etc.)
   -------------------------------------------------------------------------- */
.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d6490 0%, #1c3a54 100%);
    padding: var(--abstand-xl);
}

.auth-karte {
    width: 100%;
    max-width: 400px;
    background: var(--farbe-hintergrund-karte);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-xl);
    padding: var(--abstand-2xl);
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--abstand-2xl);
}

.auth-logo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--farbe-primaer-600);
    border-radius: var(--radius-lg);
    color: var(--farbe-text-invers);
    font-weight: 700;
    font-size: var(--font-groesse-lg);
    margin-bottom: var(--abstand-md);
}

.auth-logo__titel {
    font-size: var(--font-groesse-xl);
    font-weight: 700;
    color: var(--farbe-text);
}

.auth-logo__untertitel {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    margin-top: var(--abstand-xs);
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */
.formular-gruppe {
    margin-bottom: var(--abstand-lg);
}

.formular-label {
    display: block;
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    color: var(--farbe-text);
    margin-bottom: var(--abstand-xs);
}

.formular-input {
    width: 100%;
    height: 38px;
    padding: 0 var(--abstand-md);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    background: var(--farbe-hintergrund-karte);
    font-family: var(--font-familie);
    font-size: var(--font-groesse-basis);
    color: var(--farbe-text);
    transition: all var(--uebergang-schnell);
}

.formular-input::placeholder {
    color: var(--farbe-text-deaktiviert);
}

.formular-input:focus {
    outline: none;
    border-color: var(--farbe-rand-fokus);
    box-shadow: 0 0 0 3px rgba(53, 116, 165, 0.1);
}

.formular-input--fehler {
    border-color: var(--farbe-rand-fehler);
}

.formular-input--fehler:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.formular-select {
    width: 100%;
    height: 38px;
    padding: 0 var(--abstand-md);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    background: var(--farbe-hintergrund-karte);
    font-family: var(--font-familie);
    font-size: var(--font-groesse-basis);
    color: var(--farbe-text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    transition: all var(--uebergang-schnell);
}

.formular-select:focus {
    outline: none;
    border-color: var(--farbe-rand-fokus);
    box-shadow: 0 0 0 3px rgba(53, 116, 165, 0.1);
}

.formular-textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--abstand-sm) var(--abstand-md);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    background: var(--farbe-hintergrund-karte);
    font-family: var(--font-familie);
    font-size: var(--font-groesse-basis);
    color: var(--farbe-text);
    resize: vertical;
    transition: all var(--uebergang-schnell);
}

.formular-textarea:focus {
    outline: none;
    border-color: var(--farbe-rand-fokus);
    box-shadow: 0 0 0 3px rgba(53, 116, 165, 0.1);
}

.formular-checkbox {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    cursor: pointer;
}

.formular-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-sm);
    cursor: pointer;
    accent-color: var(--farbe-primaer-600);
}

.formular-checkbox__text {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
}

.formular-fehler {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-fehler);
    margin-top: var(--abstand-xs);
}

.formular-hinweis {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-sekundaer);
    margin-top: var(--abstand-xs);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-sm);
    height: 36px;
    padding: 0 var(--abstand-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-familie);
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--uebergang-schnell);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.btn:hover {
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--primaer {
    background: var(--farbe-primaer-600);
    color: var(--farbe-text-invers);
}

.btn--primaer:hover:not(:disabled) {
    background: var(--farbe-primaer-700);
    color: var(--farbe-text-invers);
}

.btn--sekundaer {
    background: var(--farbe-hintergrund-karte);
    color: var(--farbe-text);
    border-color: var(--farbe-rand);
}

.btn--sekundaer:hover:not(:disabled) {
    background: var(--farbe-hintergrund-hover);
    color: var(--farbe-text);
}

.btn--gefahr {
    background: var(--farbe-fehler);
    color: var(--farbe-text-invers);
}

.btn--gefahr:hover:not(:disabled) {
    background: #dc2626;
    color: var(--farbe-text-invers);
}

.btn--ghost {
    background: transparent;
    color: var(--farbe-text-sekundaer);
}

.btn--ghost:hover:not(:disabled) {
    background: var(--farbe-hintergrund-hover);
    color: var(--farbe-text);
}

.btn--sm,
.btn--klein {
    height: 28px;
    padding: 0 var(--abstand-md);
    font-size: var(--font-groesse-xs);
}

.btn--lg {
    height: 44px;
    padding: 0 var(--abstand-2xl);
    font-size: var(--font-groesse-md);
}

.btn--block {
    width: 100%;
}

.btn--icon {
    width: 36px;
    padding: 0;
}

.btn--icon.btn--sm,
.btn--icon.btn--klein {
    width: 28px;
}

.btn--xs {
    height: 24px;
    padding: 0 var(--abstand-sm);
    font-size: var(--font-groesse-xs);
    min-width: auto;
}

/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */
.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-groesse-sm);
}

.tabelle thead {
    border-bottom: 1px solid var(--farbe-rand);
}

.tabelle thead tr {
    background: #fafbfc;
}

.tabelle th {
    text-align: left;
    padding: var(--abstand-sm) var(--abstand-lg);
    font-weight: 600;
    color: #8a919c;
    font-size: 0.71875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.tabelle td {
    padding: var(--abstand-md) var(--abstand-lg);
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}

.tabelle tbody tr {
    transition: background var(--uebergang-schnell);
}

.tabelle tbody tr:hover {
    background: var(--farbe-hintergrund-hover);
}

.tabelle--striped tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.5);
}

.tabelle--striped tbody tr:nth-child(even):hover {
    background: var(--farbe-hintergrund-hover);
}

.tabelle__zeile--quittiert {
    opacity: 0.5;
}

.tabelle__zeile--quittiert:hover {
    opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Spalten-Konfiguration (Resize + Ein-/Ausblenden)
   -------------------------------------------------------------------------- */
.tabelle--spalten-config {
    table-layout: fixed;
}

/* Resize-Griff am rechten Rand jedes konfigurierbaren <th> */
.spalten-resize__griff {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 1;
}

.spalten-resize__griff:hover,
.spalten-resize--aktiv .spalten-resize__griff {
    background: var(--farbe-primaer, #3b82f6);
}

/* <th> braucht position:relative für den absolut positionierten Griff */
th[data-spalte] {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Während Resize: kein Text-Selecting */
.spalten-resize--aktiv,
.spalten-resize--aktiv * {
    user-select: none !important;
    cursor: col-resize !important;
}

/* Spalten-Config Button (Zahnrad) — in der Ergebnisleiste als .btn, Dropdown absolut relativ zum Wrapper */
.spalten-config-wrapper {
    position: relative;
    display: inline-flex;
}

.spalten-config__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 var(--abstand-sm, 6px);
}

.spalten-config__btn svg {
    flex-shrink: 0;
}

/* Dropdown */
.spalten-config__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    min-width: 200px;
    background: var(--farbe-hintergrund-karte, #fff);
    border: 1px solid var(--farbe-rand, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--schatten-lg, 0 4px 12px rgba(0,0,0,0.12));
    padding: var(--abstand-sm, 6px) 0;
}

.spalten-config__dropdown--offen {
    display: block;
}

.spalten-config__dropdown-titel {
    padding: var(--abstand-sm, 6px) var(--abstand-md, 10px);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a919c;
    border-bottom: 1px solid var(--farbe-rand, #e2e8f0);
    margin-bottom: 2px;
}

.spalten-config__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px var(--abstand-md, 10px);
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
}

.spalten-config__option:hover {
    background: var(--farbe-hintergrund-hover, #f0f2f5);
}

.spalten-config__option--fest {
    opacity: 0.5;
    cursor: default;
}

.spalten-config__option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */
.karte {
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten-sm);
}

.karte__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-lg) var(--abstand-xl);
    border-bottom: 1px solid var(--farbe-rand);
}

.karte__titel {
    font-size: var(--font-groesse-md);
    font-weight: 600;
    color: var(--farbe-text);
}

.karte__koerper {
    padding: var(--abstand-xl);
}

.karte__fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--abstand-sm);
    padding: var(--abstand-lg) var(--abstand-xl);
    border-top: 1px solid var(--farbe-rand);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 var(--abstand-sm);
    border-radius: 5px;
    font-size: 0.8125rem;
    font-weight: 550;
    white-space: nowrap;
    line-height: 1;
}

/* Badge Dot-Indikator */
.badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status-Badges mit Dot */
.badge--offen {
    background: var(--badge-offen-bg);
    color: var(--badge-offen);
    border: 1px solid var(--badge-offen-rand);
}
.badge--offen::before {
    background: var(--badge-offen-dot);
}

.badge--bearbeitung {
    background: var(--badge-bearbeitung-bg);
    color: var(--badge-bearbeitung);
    border: 1px solid var(--badge-bearbeitung-rand);
}
.badge--bearbeitung::before {
    background: var(--badge-bearbeitung-dot);
}

.badge--erledigt {
    background: var(--badge-erledigt-bg);
    color: var(--badge-erledigt);
    border: 1px solid var(--badge-erledigt-rand);
}
.badge--erledigt::before {
    background: var(--badge-erledigt-dot);
}

.badge--fehler {
    background: var(--badge-fehler-bg);
    color: var(--badge-fehler);
    border: 1px solid var(--badge-fehler-rand);
}
.badge--fehler::before {
    background: var(--badge-fehler-dot);
}

/* Badges ohne Dot */
.badge--kein-dot::before {
    display: none;
}

/* Verarbeitungs-Indikator (OCR/KI Live-Status in Elementliste) */
.verarbeitung-indikator {
    display: inline-block;
    margin-left: var(--abstand-xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.verarbeitung-indikator--aktiv {
    background: #dbeafe;
    color: #1d4ed8;
    animation: verarbeitung-puls 1.5s ease-in-out infinite;
}

.verarbeitung-indikator--ki {
    background: #f3e8ff;
    color: #7c3aed;
}

.verarbeitung-indikator--fertig {
    background: #dcfce7;
    color: #15803d;
    animation: none;
}

@keyframes verarbeitung-puls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Rollen-Badges */
.badge--admin {
    background: var(--rolle-admin-bg);
    color: var(--rolle-admin);
}

.badge--verwalter {
    background: var(--rolle-verwalter-bg);
    color: var(--rolle-verwalter);
}

.badge--benutzer {
    background: var(--rolle-benutzer-bg);
    color: var(--rolle-benutzer);
}

.badge--leser {
    background: var(--rolle-leser-bg);
    color: var(--rolle-leser);
}

.badge--extern {
    background: var(--rolle-extern-bg);
    color: var(--rolle-extern);
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--farbe-rand);
    margin-bottom: var(--abstand-xl);
    gap: 0;
}

.tab {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-md) var(--abstand-lg);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    color: var(--farbe-text-sekundaer);
    cursor: pointer;
    transition: all var(--uebergang-schnell);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-familie);
}

.tab:hover {
    color: var(--farbe-text);
    text-decoration: none;
}

.tab--aktiv {
    color: var(--farbe-primaer-600);
    border-bottom-color: var(--farbe-primaer-600);
}

.tab__zaehler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-sekundaer);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.tab--aktiv .tab__zaehler {
    background: var(--farbe-primaer-50);
    color: var(--farbe-primaer-600);
}

/* --------------------------------------------------------------------------
   Dropdown
   -------------------------------------------------------------------------- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    margin-top: var(--abstand-xs);
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten-lg);
    z-index: 50;
    display: none;
}

.dropdown__menu--sichtbar {
    display: block;
}

.dropdown__menu--links {
    right: auto;
    left: 0;
}

.dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    width: 100%;
    padding: var(--abstand-sm) var(--abstand-lg);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-familie);
    transition: background var(--uebergang-schnell);
    text-decoration: none;
}

.dropdown__item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--farbe-text-sekundaer);
}

.dropdown__item:hover {
    background: var(--farbe-hintergrund-hover);
    text-decoration: none;
    color: var(--farbe-text);
}

.dropdown__item--gefahr {
    color: var(--farbe-fehler);
}

.dropdown__item--gefahr:hover {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
}

.dropdown__trenner {
    height: 1px;
    background: var(--farbe-rand);
    margin: var(--abstand-xs) 0;
}

.dropdown__kopf {
    padding: var(--abstand-sm) var(--abstand-lg);
    font-size: var(--font-groesse-xs);
    font-weight: 600;
    color: var(--farbe-text-deaktiviert);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal-hintergrund {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--abstand-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--uebergang-normal);
}

.modal-hintergrund--sichtbar {
    opacity: 1;
    visibility: visible;
}

.modal {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--farbe-hintergrund-karte);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transform: translateY(10px) scale(0.98);
    transition: transform var(--uebergang-normal);
    overflow: hidden;
}

.modal-hintergrund--sichtbar .modal {
    transform: translateY(0) scale(1);
}

.modal--breit {
    max-width: 960px;
}

.modal--vollbild {
    max-width: calc(100vw - 4rem);
    max-height: calc(100vh - 4rem);
}

.modal--ansicht {
    width: 80vw;
    height: 90vh;
    max-width: 80vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal--email {
    width: 80vw;
    height: 90vh;
    max-width: 80vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal--ansicht .modal__koerper {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.modal--email .ev {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-md) var(--abstand-xl);
    background: var(--farbe-hintergrund);
    border-bottom: 1px solid var(--farbe-rand);
    flex-shrink: 0;
}

.modal__kopf-links {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    flex: 1;
    min-width: 0;
}

.modal__kopf-rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    flex-shrink: 0;
}

.modal__titel {
    font-size: var(--font-groesse-lg);
    font-weight: 600;
    color: var(--farbe-text);
    margin: 0;
}

.modal__schliessen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--farbe-text-sekundaer);
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    transition: all var(--uebergang-schnell);
}

.modal__schliessen:hover {
    background: var(--farbe-hintergrund-hover);
    color: var(--farbe-text);
}

.modal__koerper {
    padding: var(--abstand-xl);
    overflow-y: auto;
    flex: 1;
}

.modal__fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--abstand-sm);
    padding: var(--abstand-lg) var(--abstand-xl);
    border-top: 1px solid var(--farbe-rand);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Modal-Container (für Turbo Frame #modal – über Ansichtsmodal)
   -------------------------------------------------------------------------- */
#modal-container .modal-hintergrund {
    z-index: 1100;
}

@media (max-width: 768px) {
    #modal-container .modal--ansicht,
    #modal-container .modal--email {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    #modal-container .modal--breit {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Flash-Messages / Benachrichtigungen
   -------------------------------------------------------------------------- */
.flash-container {
    position: fixed;
    top: var(--abstand-lg);
    right: var(--abstand-lg);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-sm);
    max-width: 400px;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-md);
    padding: var(--abstand-md) var(--abstand-lg);
    border-radius: var(--radius-lg);
    border: 1px solid;
    box-shadow: var(--schatten-md);
    font-size: var(--font-groesse-sm);
    animation: flash-einblenden 0.3s ease;
}

@keyframes flash-einblenden {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.flash--erfolg {
    background: var(--farbe-erfolg-bg);
    border-color: var(--farbe-erfolg-rand);
    color: #166534;
}

.flash--fehler {
    background: var(--farbe-fehler-bg);
    border-color: var(--farbe-fehler-rand);
    color: #991b1b;
}

.flash--warnung {
    background: var(--farbe-warnung-bg);
    border-color: var(--farbe-warnung-rand);
    color: #92400e;
}

.flash--info {
    background: var(--farbe-info-bg);
    border-color: var(--farbe-info-rand);
    color: #1e40af;
}

.flash__icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    line-height: 1;
    margin-top: 1px;
}

.flash__inhalt {
    flex: 1;
}

.flash__schliessen {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    margin-top: 1px;
    transition: opacity var(--uebergang-schnell);
}

.flash__schliessen:hover {
    opacity: 1;
}

/* Flash inline (innerhalb des Contents) */
.flash-inline {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-md);
    padding: var(--abstand-md) var(--abstand-lg);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: var(--font-groesse-sm);
    margin-bottom: var(--abstand-lg);
}

.flash-inline--erfolg {
    background: var(--farbe-erfolg-bg);
    border-color: var(--farbe-erfolg-rand);
    color: #166534;
}

.flash-inline--fehler {
    background: var(--farbe-fehler-bg);
    border-color: var(--farbe-fehler-rand);
    color: #991b1b;
}

.flash-inline--warnung {
    background: var(--farbe-warnung-bg);
    border-color: var(--farbe-warnung-rand);
    color: #92400e;
}

.flash-inline--info {
    background: var(--farbe-info-bg);
    border-color: var(--farbe-info-rand);
    color: #1e40af;
}

/* --------------------------------------------------------------------------
   Seitenheader
   -------------------------------------------------------------------------- */
.seiten-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--abstand-xl);
}

.seiten-header__links {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
}

.seiten-header__titel {
    font-size: var(--font-groesse-2xl);
    font-weight: 700;
    color: var(--farbe-text);
    line-height: 1.2;
}

.seiten-header__untertitel {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
}

.seiten-header__aktionen,
.seiten-header__rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

/* --------------------------------------------------------------------------
   Leerer Zustand
   -------------------------------------------------------------------------- */
.leerer-zustand {
    text-align: center;
    padding: var(--abstand-2xl) var(--abstand-xl);
}

.leerer-zustand__icon {
    font-size: 3rem;
    margin-bottom: var(--abstand-lg);
    opacity: 0.3;
}

.leerer-zustand__titel {
    font-size: var(--font-groesse-lg);
    font-weight: 600;
    color: var(--farbe-text);
    margin-bottom: var(--abstand-sm);
}

.leerer-zustand__text {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    max-width: 360px;
    margin: 0 auto var(--abstand-lg);
}

/* --------------------------------------------------------------------------
   Ladeanzeige
   -------------------------------------------------------------------------- */
.lade-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--farbe-rand);
    border-top-color: var(--farbe-primaer-600);
    border-radius: 50%;
    animation: spinner-drehen 0.6s linear infinite;
}

.lade-spinner--sm {
    width: 14px;
    height: 14px;
}

.lade-spinner--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes spinner-drehen {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   Hilfklassen
   -------------------------------------------------------------------------- */
.text-links { text-align: left; }
.text-mitte { text-align: center; }
.text-rechts { text-align: right; }

.text-primaer { color: var(--farbe-primaer-600); }
.text-sekundaer { color: var(--farbe-text-sekundaer); }
.text-erfolg { color: var(--farbe-erfolg); }
.text-warnung { color: var(--farbe-warnung); }
.text-fehler { color: var(--farbe-fehler); }
.text-deaktiviert { color: var(--farbe-text-deaktiviert); }

.text-klein { font-size: var(--font-groesse-xs); }
.text-normal { font-size: var(--font-groesse-basis); }
.text-gross { font-size: var(--font-groesse-lg); }

.font-normal { font-weight: 400; }
.font-mittel { font-weight: 500; }
.font-fett { font-weight: 600; }

.versteckt { display: none !important; }
.sichtbar { display: block !important; }

.abstand-unten-sm { margin-bottom: var(--abstand-sm); }
.abstand-unten { margin-bottom: var(--abstand-lg); }
.abstand-unten-xl { margin-bottom: var(--abstand-xl); }

.flex { display: flex; }
.flex-mitte { display: flex; align-items: center; }
.flex-zwischen { display: flex; align-items: center; justify-content: space-between; }
.flex-luecke-xs { gap: var(--abstand-xs); }
.flex-luecke-sm { gap: var(--abstand-sm); }
.flex-luecke { gap: var(--abstand-md); }
.flex-luecke-lg { gap: var(--abstand-lg); }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

.raster {
    display: grid;
    gap: var(--abstand-lg);
}

.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }

/* Turbo-Frame: Custom-Element ist per Default display:inline,
   das bricht Layout-Teilnahme (Flex, Grid, Sticky-Kontext) */
turbo-frame {
    display: block;
}

turbo-frame[busy] {
    opacity: 0.6;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Responsive: Tablet (768px - 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .kontextpanel {
        transform: translateX(calc(-1 * var(--kontextpanel-breite)));
    }

    .kontextpanel--sichtbar {
        transform: translateX(0);
    }

    .hauptbereich--mit-kontextpanel {
        margin-left: var(--icon-rail-breite);
    }

    .raster--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .topbar__suche-input {
        width: 180px;
    }

    .topbar__suche-kbd {
        display: none;
    }

    .topbar__logo-text {
        display: none;
    }

    .topbar__logo-trenner {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Responsive: Mobil (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--uebergang-langsam);
    }

    .sidebar--sichtbar {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 35;
        display: none;
    }

    .sidebar-overlay--sichtbar {
        display: block;
    }

    .kontextpanel {
        display: none;
    }

    .hauptbereich {
        margin-left: 0;
    }

    .hauptbereich--mit-kontextpanel {
        margin-left: 0;
    }

    .topbar {
        padding: 0 var(--abstand-md);
    }

    .topbar__suche {
        display: none;
    }

    .topbar__logo-text {
        display: none;
    }

    .topbar__logo-trenner {
        display: none;
    }

    .inhalt {
        padding: var(--abstand-lg);
    }

    .seiten-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--abstand-md);
    }

    .raster--2,
    .raster--3,
    .raster--4 {
        grid-template-columns: 1fr;
    }

    .modal {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .flash-container {
        left: var(--abstand-md);
        right: var(--abstand-md);
        max-width: none;
    }

    /* Tabelle horizontal scrollbar */
    .tabelle-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Elementliste ohne abgerundete Karte auf Mobil */
    .elementliste {
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Ergebnisleiste kompakter */
    .ergebnisleiste__titel {
        font-size: 1rem;
    }

    .ergebnisleiste {
        padding: var(--abstand-md);
        flex-wrap: wrap;
        gap: var(--abstand-sm);
    }
}

/* --------------------------------------------------------------------------
   Mobil: Hamburger-Button
   -------------------------------------------------------------------------- */
.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--farbe-text);
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: 1.25rem;
}

.hamburger:hover {
    background: var(--farbe-hintergrund-hover);
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   Ergaenzungen Phase 1: Benutzerverwaltung
   -------------------------------------------------------------------------- */

/* Tabs */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--farbe-rand);
}

.tabs__tab {
    padding: var(--abstand-sm) var(--abstand-lg);
    color: var(--farbe-text-sekundaer);
    text-decoration: none;
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--uebergang);
}

.tabs__tab:hover {
    color: var(--farbe-text);
    background: var(--farbe-hintergrund-hover);
}

.tabs__tab--aktiv {
    color: var(--farbe-primaer-600);
    border-bottom-color: var(--farbe-primaer-600);
}

/* Badge Varianten */
.badge--erfolg {
    background: var(--farbe-erfolg-bg);
    color: #16a34a;
}

.badge--warnung {
    background: var(--farbe-warnung-bg);
    color: #d97706;
}

.badge--neutral {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-sekundaer);
    border: 1px solid var(--farbe-rand);
}

.badge--info {
    background: var(--farbe-info-bg);
    color: var(--farbe-info);
}

.badge--gefahr {
    background: var(--farbe-fehler-bg, #fef2f2);
    color: var(--farbe-fehler, #dc2626);
}

.badge--primaer {
    background: var(--farbe-primaer-600);
    color: #fff;
}

.badge--xs {
    font-size: 0.625rem;
    padding: 1px 5px;
    vertical-align: middle;
    margin-left: var(--abstand-xs);
}

/* Formular Ergänzungen */
.formular-raster {
    display: grid;
    gap: var(--abstand-md);
    margin-bottom: var(--abstand-md);
}

.formular-raster--2 { grid-template-columns: repeat(2, 1fr); }
.formular-raster--3 { grid-template-columns: repeat(3, 1fr); }

.formular-hilfe {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-deaktiviert);
    margin-top: var(--abstand-xs);
}

.formular-select--sm {
    padding: 6px 10px;
    font-size: var(--font-groesse-sm);
}

/* Karte Varianten */
.karte--eingebettet {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* Mandant-Icon klein */
.mandant-icon--klein {
    width: 24px;
    height: 24px;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: 700;
    flex-shrink: 0;
}

/* Rechte-Matrix */
.rechte-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.rechte-badge--rolle {
    background: var(--farbe-primaer-100);
    color: var(--farbe-primaer-600);
}

.rechte-badge--erlaubt {
    background: var(--farbe-erfolg-bg);
    color: #16a34a;
}

.rechte-badge--entzogen {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
}

.rechte-badge--keine {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-deaktiviert);
}

.rechte-toggle {
    padding: 2px !important;
    min-width: auto !important;
}

/* Button Varianten */
.btn--warnung {
    background: var(--farbe-warnung);
    color: white;
    border-color: var(--farbe-warnung);
}

.btn--warnung:hover:not(:disabled) {
    background: #d97706;
    border-color: #d97706;
}

.btn--erfolg {
    background: var(--farbe-erfolg);
    color: white;
    border-color: var(--farbe-erfolg);
}

.btn--erfolg:hover:not(:disabled) {
    background: #16a34a;
    border-color: #16a34a;
}

.btn--gefahr.btn--ghost {
    background: transparent;
    color: var(--farbe-fehler);
    border-color: transparent;
}

.btn--gefahr.btn--ghost:hover {
    background: var(--farbe-fehler-bg);
}

/* Link Stil */
.link {
    color: var(--farbe-primaer-600);
    text-decoration: none;
    font-weight: 500;
}

.link:hover {
    text-decoration: underline;
}

/* Responsive Formular-Raster */
@media (max-width: 768px) {
    .formular-raster--2,
    .formular-raster--3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Phase 2: Element-Kern
   ========================================================================== */

/* --------------------------------------------------------------------------
   Element-Layout (3-Panel)
   -------------------------------------------------------------------------- */
.element-layout {
    display: grid;
    grid-template-columns: var(--kontextpanel-breite) 1fr;
    gap: 0;
    min-height: calc(100vh - var(--topbar-hoehe) - 2 * var(--abstand-xl));
    margin: calc(-1 * var(--abstand-xl));
}

/* --------------------------------------------------------------------------
   Filterbaum
   -------------------------------------------------------------------------- */
.filterbaum {
    background: var(--farbe-hintergrund-karte);
    border-right: 1px solid var(--farbe-rand);
    overflow-y: auto;
    padding-bottom: var(--abstand-xl);
    position: sticky;
    top: var(--topbar-hoehe);
    height: calc(100vh - var(--topbar-hoehe));
}

/* ── Filterbaum-Resize: Drag-Griff am rechten Rand ── */
.filterbaum-resize-griff {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    transition: background 0.15s;
}

.filterbaum-resize-griff:hover,
.filterbaum-resize--aktiv .filterbaum-resize-griff {
    background: var(--farbe-primaer-300);
}

/* Während des Ziehens: Text-Selektion unterdrücken */
.filterbaum-resize--aktiv {
    user-select: none;
    cursor: col-resize;
}

.filterbaum__kopf {
    padding: var(--abstand-lg);
    border-bottom: 1px solid var(--farbe-rand);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filterbaum__titel {
    font-size: var(--font-groesse-sm);
    font-weight: 600;
    color: var(--farbe-text);
}

.filterbaum__sektion {
    border-bottom: 1px solid #eceef2;
}

.filterbaum__sektion-kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-sm) var(--abstand-lg);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--farbe-text-deaktiviert);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background var(--uebergang-schnell);
    user-select: none;
}

.filterbaum__sektion-kopf:hover {
    background: var(--farbe-hintergrund-hover);
}

.filterbaum__pfeil {
    font-size: 0.5rem;
    transition: transform var(--uebergang-schnell);
    color: var(--farbe-text-deaktiviert);
}

.filterbaum__pfeil--offen {
    transform: rotate(90deg);
}

.filterbaum__sektion-inhalt {
    display: none;
    padding-bottom: var(--abstand-xs);
}

.filterbaum__sektion-inhalt--offen {
    display: block;
}

.filterbaum__eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: 6px var(--abstand-lg) 6px calc(var(--abstand-lg) + 14px);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    text-decoration: none;
    transition: all var(--uebergang-schnell);
    cursor: pointer;
    border-left: 2.5px solid transparent;
}

.filterbaum__eintrag:hover {
    background: var(--farbe-hintergrund-hover);
    text-decoration: none;
    color: var(--farbe-text);
}

.filterbaum__eintrag--aktiv {
    background: var(--farbe-akzent-bg);
    color: var(--farbe-text);
    font-weight: 500;
    border-left-color: var(--farbe-akzent);
}

.filterbaum__icon {
    flex-shrink: 0;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--farbe-text-deaktiviert);
}

.filterbaum__icon svg {
    width: 15px;
    height: 15px;
}

.filterbaum__eintrag--aktiv .filterbaum__icon {
    color: var(--farbe-akzent);
}

.filterbaum__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filterbaum__zaehler {
    flex-shrink: 0;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-deaktiviert);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.filterbaum__zaehler--sekundaer {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-deaktiviert);
    font-size: 0.6rem;
}

/* Summen-Badge am Sektions-Kopf: rechtsbündig wie die Kind-Badges */
.filterbaum__sektion-kopf .filterbaum__zaehler {
    margin-left: auto;
}

/* Ungelesen-Zahl hervorheben: fett + Akzentfarbe */
.zaehler__ungelesen {
    font-weight: 700;
    color: var(--farbe-akzent);
}

.zaehler__gesamt {
    font-weight: 400;
    color: var(--farbe-text-deaktiviert);
}

.filterbaum__eintrag--aktiv .filterbaum__zaehler {
    background: var(--farbe-akzent-rand);
    color: var(--farbe-akzent);
}

.filterbaum__eintrag--aktiv .zaehler__ungelesen {
    color: var(--farbe-akzent);
}

.filterbaum__eintrag--aktiv .zaehler__gesamt {
    color: var(--farbe-akzent);
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Ergebnisleiste
   -------------------------------------------------------------------------- */
.ergebnisleiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-lg) var(--abstand-xl);
    background: var(--farbe-hintergrund, #f8fafc);
    flex-shrink: 0;
    position: sticky;
    top: var(--topbar-hoehe);
    z-index: 9;
}

/* Seitentitel in Ergebnisleiste */
.ergebnisleiste__titel {
    font-size: 1.25rem;
    font-weight: 660;
    color: var(--farbe-text);
    margin-right: var(--abstand-sm);
}

.ergebnisleiste__zaehler-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--farbe-akzent-bg);
    color: var(--farbe-akzent);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
}

.ergebnisleiste__links {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
}

.ergebnisleiste__rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

.ergebnisleiste__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    padding: 3px var(--abstand-sm);
    background: var(--farbe-primaer-50);
    color: var(--farbe-primaer-700);
    border-radius: var(--radius-md);
    font-size: var(--font-groesse-xs);
    font-weight: 500;
}

.ergebnisleiste__chip-entfernen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--farbe-primaer-200);
    color: var(--farbe-primaer-700);
    font-size: 0.625rem;
    line-height: 1;
    text-decoration: none;
    transition: background var(--uebergang-schnell);
}

.ergebnisleiste__chip-entfernen:hover {
    background: var(--farbe-primaer-300);
    text-decoration: none;
    color: var(--farbe-primaer-800);
}

.ergebnisleiste__chip-speichern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    color: var(--farbe-primaer-500);
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--uebergang-schnell);
}

.ergebnisleiste__chip-speichern:hover {
    background: var(--farbe-primaer-200);
    color: var(--farbe-primaer-700);
    text-decoration: none;
}

.ergebnisleiste__chip-speichern svg {
    width: 11px;
    height: 11px;
}

/* --------------------------------------------------------------------------
   Priorität-Badge im Ansichtsmodal
   -------------------------------------------------------------------------- */
.prioritaet-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    font-size: var(--font-groesse-xs);
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    transition: background var(--uebergang-schnell);
}

.prioritaet-badge:hover {
    background: var(--farbe-hover);
}

.prioritaet-badge--0 { color: var(--farbe-text-sekundaer); }
.prioritaet-badge--1 { color: var(--farbe-info); }
.prioritaet-badge--2 { color: var(--farbe-warnung); }
.prioritaet-badge--3 { color: var(--farbe-fehler); }

/* --------------------------------------------------------------------------
   Elementliste
   -------------------------------------------------------------------------- */
.elementliste-bereich {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.elementliste {
    margin: 0 var(--abstand-xl);
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-sm);
}

.elementliste .tabelle {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.elementliste .tabelle thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-xl);
}

.elementliste .tabelle thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-xl);
}

/* Sticky-Stack (Ergebnisleiste → Massenaktionen → thead):
   thead klebt unterhalb Ergebnisleiste + Massenaktionen. Die Höhen werden
   vom elementliste-Controller per ResizeObserver als CSS-Variablen gesetzt
   — fallbacks decken den Erstrender ab.
   Wenn die Massenaktionen-Leiste versteckt ist (display:none), meldet der
   Observer height 0 → thead klebt direkt an Ergebnisleiste. */
.elementliste .tabelle thead th {
    position: sticky;
    top: calc(var(--topbar-hoehe) + var(--ergebnisleiste-hoehe, 52px) + var(--massenaktionen-hoehe, 0px));
    z-index: 8;
    background: #fafbfc;
}

/* Bei border-separate greift border-bottom auf <thead> nicht —
   deshalb explizit auf <th> setzen */
.elementliste .tabelle th {
    border-bottom: 1px solid var(--farbe-rand);
}

/* Sortierbare Spaltenkoepfe */
.sortier-header {
    cursor: pointer;
    user-select: none;
}
.sortier-header:hover {
    color: var(--farbe-primaer, #2563eb);
}
.sortier-pfeil {
    font-size: 0.7em;
    margin-left: 2px;
    opacity: 0.7;
}

.elementliste__eintrag {
    transition: background var(--uebergang-schnell);
}

.elementliste__eintrag:hover {
    background: var(--farbe-hintergrund-hover) !important;
}

.elementliste__eintrag:hover .elementliste__titel {
    color: #111820;
}

.elementliste__typ-icon {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elementliste__typ-icon svg {
    width: 16px;
    height: 16px;
}

/* Absender-Zeile über dem Titel (bei E-Mails) */
.elementliste__absender {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--farbe-text-sekundaer, #64748b);
    line-height: 1.2;
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Titel-Zeile (Badges + Anhang-Icon + Titel) */
.elementliste__titel-zeile {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.elementliste__titel {
    color: #2a3140;
    font-weight: 500;
    font-size: 0.90625rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elementliste__titel:hover {
    color: var(--farbe-akzent);
    text-decoration: none;
}

/* Prioritaet-Indikator (nur P2 Hoch + P3 Dringend) */
.prioritaet-indikator {
    display: inline;
    margin-right: 4px;
    font-size: 0.75rem;
}

/* Eskaliert-Badge in der Elementliste */
.badge--eskaliert {
    background: #dc2626 !important;
    color: #fff !important;
    border: 1px solid #b91c1c !important;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    height: 18px;
    margin-right: 6px;
}

.badge--eskaliert::before {
    display: none;
}

/* Checkbox in Tabelle */
.elementliste__checkbox {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--farbe-rand);
    border-radius: 3px;
    cursor: pointer;
    accent-color: var(--farbe-akzent);
    margin: 0;
}

.elementliste__checkbox:checked {
    border-color: var(--farbe-akzent);
}

/* Selektierte Zeile */
.elementliste__eintrag--selektiert {
    background: var(--farbe-akzent-bg) !important;
}

/* Ungelesene Elemente: Fettschrift + leichter Hintergrund.
   !important nötig damit --aufgeklappt, --sub und :hover den Stil nicht überdecken. */
.elementliste__eintrag--ungelesen {
    background: var(--farbe-info-bg, #eff6ff) !important;
}

.elementliste__eintrag--ungelesen .elementliste__titel {
    font-weight: 600 !important;
    color: var(--farbe-text) !important;
}

/* Eskalierte Elemente: Roter linker Rand + leicht roter Hintergrund */
.elementliste__eintrag--eskaliert {
    border-left: 3px solid var(--farbe-fehler, #dc2626) !important;
    background: #fef2f2 !important;
}

.elementliste__eintrag--eskaliert:hover {
    background: #fee2e2 !important;
}

/* Vorgang-Gruppierung: Toggle + Sub-Zeilen */
.elementliste__toggle-zelle {
    width: 28px;
    text-align: center;
    padding: 0 2px !important;
}

.elementliste__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--farbe-primaer-600);
    background: var(--farbe-primaer-50);
    border: 1px solid var(--farbe-primaer-200);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.elementliste__toggle:hover {
    background: var(--farbe-primaer-100);
    border-color: var(--farbe-primaer-400);
    color: var(--farbe-text);
}

/* ── Vorgang-Gruppierung: Gestrichelter Rahmen um die gesamte Gruppe ──
   Hauptzeile = obere + seitliche Kante, Sub-Zeilen = seitliche Kante,
   letzte Sub-Zeile = untere Kante. Ergibt optisch einen Rahmen.
   Farbe als CSS-Variable für einfache Anpassung. */

.elementliste__eintrag--aufgeklappt {
    background: var(--farbe-primaer-50);
}

.elementliste__eintrag--aufgeklappt .elementliste__toggle {
    background: var(--farbe-primaer-100);
    border-color: var(--farbe-primaer-400);
}

/* Hauptzeile: oben + links/rechts gestrichelt */
.elementliste__eintrag--aufgeklappt td {
    border-top: 2px dashed var(--farbe-primaer-300);
    border-bottom: none;
}

.elementliste__eintrag--aufgeklappt td:first-child {
    border-left: 2px dashed var(--farbe-primaer-300);
}

.elementliste__eintrag--aufgeklappt td:last-child {
    border-right: 2px dashed var(--farbe-primaer-300);
}

/* ── Sub-Zeilen: seitliche Kanten ── */
.elementliste__eintrag--sub {
    background: var(--farbe-hintergrund-hover);
    font-size: 0.875rem;
}

.elementliste__eintrag--sub td {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--farbe-primaer-100);
}

/* Vertikaler Verbindungsstrich in der Toggle-Spalte */
.elementliste__eintrag--sub .elementliste__toggle-zelle {
    position: relative;
}

.elementliste__eintrag--sub .elementliste__toggle-zelle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--farbe-primaer-400);
    opacity: 0.4;
    border-radius: 1px;
}

.elementliste__eintrag--sub td:first-child {
    border-left: 2px dashed var(--farbe-primaer-300);
}

.elementliste__eintrag--sub td:last-child {
    border-right: 2px dashed var(--farbe-primaer-300);
}

/* Einrückung beim Titel — zeigt Hierarchie */
.elementliste__eintrag--sub .elementliste__titel {
    padding-left: 12px;
    font-weight: 400;
    color: var(--farbe-text-sekundaer);
    font-size: 0.85rem;
}

/* Typ-Icon in Sub-Zeilen etwas kleiner */
.elementliste__eintrag--sub .elementliste__typ-icon svg {
    width: 14px;
    height: 14px;
    opacity: 0.75;
}

.elementliste__eintrag--sub:hover {
    background: var(--farbe-primaer-50);
}

.elementliste__eintrag--sub:hover .elementliste__titel {
    color: var(--farbe-text);
}

/* Sub-Zeilen + Ungelesen: !important auf .elementliste__eintrag--ungelesen
   regelt die Spezifität bereits — diese Selektoren nur für zusätzliche Overrides. */
.elementliste__eintrag--sub.elementliste__eintrag--ungelesen .elementliste__titel {
    font-size: 0.85rem;
}

/* Letzte Sub-Zeile: untere Kante schließt den Rahmen */
.elementliste__eintrag--sub-letztes td {
    border-bottom: 2px dashed var(--farbe-primaer-300);
}

.elementliste__fusszeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-sm) var(--abstand-lg);
    border-top: 1px solid var(--farbe-rand);
}

.elementliste__pro-seite {
    flex-shrink: 0;
}

.elementliste__paginierung {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
}

/* Massenaktionen-Leiste: sticky direkt unter .ergebnisleiste.
   Die Ergebnisleiste-Höhe kommt als CSS-Variable vom elementliste-Controller
   (ResizeObserver), Fallback 52px deckt Erstrender ab. z-index liegt
   unter der Ergebnisleiste (9) und über dem thead (8). */
.massenaktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--abstand-md);
    padding: var(--abstand-sm) var(--abstand-xl);
    background: var(--farbe-primaer-50, #eff6ff);
    border-bottom: 1px solid var(--farbe-primaer-200, var(--farbe-rand));
    position: sticky;
    top: calc(var(--topbar-hoehe) + var(--ergebnisleiste-hoehe, 52px));
    z-index: 9;
}

.massenaktionen.versteckt {
    display: none;
}

.massenaktionen__zaehler {
    font-size: var(--font-groesse-sm, 0.8125rem);
    font-weight: 600;
    color: var(--farbe-primaer-700, var(--farbe-text-sekundaer));
}

.massenaktionen__aktionen {
    display: flex;
    gap: var(--abstand-sm);
}

.font-mono {
    font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   Ribbon (Office-Style – echtes Ribbon wie Microsoft Office)
   -------------------------------------------------------------------------- */
.ribbon {
    flex-shrink: 0;
    background: #f3f3f3;
    border-bottom: 1px solid #d1d1d1;
}

/* Tab-Leiste (File / Home / View ...) */
.ribbon__tabs {
    display: flex;
    align-items: stretch;
    padding: 0 12px;
    background: linear-gradient(to bottom, #fff 0%, #f3f3f3 100%);
    border-bottom: 1px solid #d6d6d6;
    height: 28px;
}

.ribbon__tab {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-family: var(--font-familie);
    font-size: 12px;
    font-weight: 400;
    color: #444;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.ribbon__tab--aktiv {
    color: #0078d4;
    font-weight: 600;
}

.ribbon__tab--aktiv::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #0078d4;
}

/* Ribbon-Inhalt (Gruppen mit Aktionen) */
.ribbon__inhalt {
    display: flex;
    align-items: stretch;
    padding: 4px 8px 0;
    min-height: 78px;
    background: #fbfbfb;
    overflow: visible;
    position: relative;
}

/* Gruppe: Spalte mit Aktionen oben, Label unten */
.ribbon__gruppe {
    display: flex;
    flex-direction: column;
    padding: 0 4px;
}

/* Aktionen: Standard horizontal nebeneinander */
.ribbon__aktionen {
    display: flex;
    align-items: flex-start;
    gap: 1px;
    flex: 1;
    padding: 2px 0;
}

/* Stapel-Layout: vertikal (Bild / Tabelle / Link) */
.ribbon__aktionen--stapel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    justify-content: center;
}

/* --- Großer Button: Icon 28px oben, Text darunter --- */
.ribbon__btn--gross {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: 4px 8px 2px;
    min-width: 54px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    color: #444;
    text-decoration: none;
    font-family: var(--font-familie);
    cursor: pointer;
    transition: all 0.1s;
}

.ribbon__btn--gross .ribbon__text {
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.ribbon__btn--gross:hover {
    background: #e5f1fb;
    border-color: #cce4f7;
    color: #242424;
}

.ribbon__btn--gross:active {
    background: #cce4f7;
}

.ribbon__btn--aktiv {
    background: #fde8e8;
    border-color: #f5a5a5;
    color: #c53030;
}

.ribbon__btn--aktiv:hover {
    background: #fbd5d5;
    border-color: #f08080;
}

/* --- Kleiner Button: Icon 16px links, Text rechts --- */
.ribbon__btn--klein {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    color: #444;
    text-decoration: none;
    font-family: var(--font-familie);
    cursor: pointer;
    transition: all 0.1s;
    white-space: nowrap;
}

.ribbon__btn--klein .ribbon__text {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1;
}

.ribbon__btn--klein:hover {
    background: #e5f1fb;
    border-color: #cce4f7;
    color: #242424;
}

.ribbon__btn--klein:active {
    background: #cce4f7;
}

/* Gefahr (Löschen) */
.ribbon__btn--gefahr:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

/* Deaktiviert */
.ribbon__btn--deaktiviert {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Icons: Groß (28px) und Klein (16px) */
.ribbon__icon--lg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.ribbon__icon--sm {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Rückwärtskompatibilität: alte .ribbon__icon Klasse */
.ribbon__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ribbon__text {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
}

/* Gruppen-Label unten */
.ribbon__label {
    font-size: 10px;
    color: #888;
    text-align: center;
    padding: 2px 0 3px;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Vertikaler Separator */
.ribbon__sep {
    width: 1px;
    background: #d1d1d1;
    align-self: stretch;
    margin: 2px 6px;
}

.ribbon__form {
    display: contents;
}

/* --------------------------------------------------------------------------
   Ansichtsmodal (Detailansicht)
   -------------------------------------------------------------------------- */
.ansichtsmodal {
    max-width: 900px;
}

.ansichtsmodal__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--abstand-lg);
}

.ansichtsmodal__kopf-links {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
}

.ansichtsmodal__kopf-rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

.ansichtsmodal__typ-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    padding: 3px var(--abstand-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-groesse-xs);
    font-weight: 500;
}

.ansichtsmodal__doktyp-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--hintergrund-sekundaer);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-sekundaer);
    transition: opacity 0.2s;
}

.ansichtsmodal__titel-bereich {
    margin-bottom: var(--abstand-md);
    flex-shrink: 0;
}

.ansichtsmodal__titel {
    font-size: var(--font-groesse-2xl);
    font-weight: 700;
    color: var(--farbe-text);
    margin-bottom: var(--abstand-xs);
}

.ansichtsmodal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-sm);
    align-items: center;
}

.ansichtsmodal__tabs {
    margin-bottom: var(--abstand-md);
    flex-shrink: 0;
}

/* Flex-Kette: modal__koerper → [data-controller=ansichtsmodal] → inhalt → tab → viewer */
.modal--ansicht [data-controller="ansichtsmodal"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ansichtsmodal__tab-inhalt {
    display: none;
}

.ansichtsmodal__tab-inhalt--aktiv {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.ansichtsmodal__inhalt {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Timeline (Vorgang)
   -------------------------------------------------------------------------- */
.timeline {
    position: relative;
}

.timeline__eintrag {
    position: relative;
    padding-bottom: var(--abstand-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-sm);
}

.timeline__eintrag--aktiv {
    background: var(--farbe-primaer-50);
    margin: 0 calc(-1 * var(--abstand-lg));
    padding: var(--abstand-md) var(--abstand-lg);
    border-radius: var(--radius-md);
}

.timeline__punkt {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    border: 2px solid var(--farbe-rand);
    background: var(--farbe-hintergrund-karte);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 1;
}

.timeline__inhalt {
    flex: 1;
    min-width: 0;
}

.timeline__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    margin-bottom: 2px;
}

.timeline__titel {
    color: var(--farbe-text);
    text-decoration: none;
    font-size: var(--font-groesse-sm);
}

.timeline__titel:hover {
    color: var(--farbe-primaer-600);
    text-decoration: underline;
}

.timeline__meta {
    display: flex;
    gap: var(--abstand-sm);
    align-items: center;
}

/* --------------------------------------------------------------------------
   Kommentare
   -------------------------------------------------------------------------- */
.kommentare {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-lg);
}

.kommentar {
    padding: var(--abstand-md);
    background: var(--farbe-hintergrund);
    border-radius: var(--radius-md);
    border: 1px solid var(--farbe-rand);
}

.kommentar__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--abstand-sm);
}

.kommentar__autor {
    font-size: var(--font-groesse-sm);
}

.kommentar__inhalt {
    font-size: var(--font-groesse-sm);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Verlauf (Audit-Log)
   -------------------------------------------------------------------------- */
.verlauf {
    position: relative;
    padding-left: 20px;
}

.verlauf__eintrag {
    position: relative;
    padding-bottom: var(--abstand-lg);
    padding-left: var(--abstand-md);
}

.verlauf__punkt {
    position: absolute;
    left: -16px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--farbe-rand);
}

.verlauf__eintrag:first-child .verlauf__punkt {
    background: var(--farbe-primaer-500);
}

.verlauf__nachricht {
    font-size: var(--font-groesse-sm);
    margin-bottom: 2px;
}

.verlauf__detail {
    margin-bottom: 2px;
}

.verlauf__meta {
    display: flex;
    gap: var(--abstand-sm);
}

/* --------------------------------------------------------------------------
   Datei-Upload (Dropzone)
   -------------------------------------------------------------------------- */
.datei-upload {
    border: 2px dashed var(--farbe-rand);
    border-radius: var(--radius-lg);
    padding: var(--abstand-2xl) var(--abstand-xl);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--uebergang-normal), background var(--uebergang-normal);
}

.datei-upload:hover {
    border-color: var(--farbe-primaer-300);
    background: var(--farbe-primaer-50);
}

.datei-upload--aktiv {
    border-color: var(--farbe-primaer-500);
    background: var(--farbe-primaer-50);
}

.datei-upload--gewaehlt {
    border-style: solid;
    border-color: var(--farbe-erfolg);
    background: var(--farbe-erfolg-bg);
    cursor: default;
    padding: var(--abstand-lg);
}

.datei-upload__platzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--abstand-sm);
}

.datei-upload__icon {
    font-size: 2.5rem;
    opacity: 0.5;
}

.datei-upload__text {
    font-size: var(--font-groesse-basis);
    color: var(--farbe-text);
}

.datei-upload__link {
    color: var(--farbe-primaer-600);
    font-weight: 600;
    text-decoration: none;
}

.datei-upload__link:hover {
    text-decoration: underline;
}

.datei-upload__hinweis {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-deaktiviert);
}

.datei-upload__datei-info {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
}

.datei-upload__datei-icon {
    font-size: 1.5rem;
}

.datei-upload__datei-details {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.datei-upload__datei-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datei-upload__datei-meta {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
}

.datei-upload__datei-entfernen {
    border: none;
    background: none;
    color: var(--farbe-text-deaktiviert);
    cursor: pointer;
    font-size: 1.2rem;
    padding: var(--abstand-xs);
    border-radius: var(--radius-sm);
    transition: color var(--uebergang-schnell), background var(--uebergang-schnell);
}

.datei-upload__datei-entfernen:hover {
    color: var(--farbe-fehler);
    background: var(--farbe-fehler-bg);
}

/* Legacy (E-Mail-Formular) */
.datei-upload__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-xl);
    cursor: pointer;
}

.datei-upload__bereich {
    border: 2px dashed var(--farbe-rand);
    border-radius: var(--radius-lg);
    padding: var(--abstand-2xl) var(--abstand-xl);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--uebergang-normal), background var(--uebergang-normal);
}

.datei-upload__bereich:hover {
    border-color: var(--farbe-primaer-300);
    background: var(--farbe-primaer-50);
}

.datei-upload__bereich--aktiv {
    border-color: var(--farbe-primaer-500);
    background: var(--farbe-primaer-50);
}

/* --------------------------------------------------------------------------
   Kontextmenu
   -------------------------------------------------------------------------- */
.kontextmenu {
    position: fixed;
    min-width: 180px;
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten-lg);
    z-index: 100;
    display: none;
    overflow: hidden;
}

.kontextmenu--sichtbar {
    display: block;
}

/* --------------------------------------------------------------------------
   Filtereditor
   -------------------------------------------------------------------------- */
.filtereditor {
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    padding: var(--abstand-lg);
    display: none;
    margin-bottom: var(--abstand-lg);
}

.filtereditor--offen {
    display: block;
}

/* --------------------------------------------------------------------------
   Responsive: Element-Layout
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .element-layout {
        grid-template-columns: 1fr;
    }

    /* Filterbaum: Nicht mehr display:none, sondern als Drawer (Phase 10).
       Wird durch .filterbaum in Phase 10 Mobile-Optimierung gesteuert. */
}

@media (max-width: 768px) {
    .ansichtsmodal__kopf {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--abstand-sm);
    }

    .ansichtsmodal__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .ergebnisleiste {
        flex-direction: column;
        gap: var(--abstand-sm);
        align-items: flex-start;
    }

    .timeline__eintrag--aktiv {
        margin: 0;
    }
}

/* ==========================================================================
   Phase 3: Workflow-Engine, Freigabe, Eskalation, SLA
   ========================================================================== */

/* --------------------------------------------------------------------------
   Workflow-Designer (Drawflow Canvas)
   -------------------------------------------------------------------------- */
.workflow-designer {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.workflow-designer__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    gap: var(--abstand-md);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    z-index: 5;
}

.workflow-designer__toolbar-links {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    flex: 1;
    min-width: 0;
}

.workflow-designer__toolbar-rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    flex-shrink: 0;
}

.workflow-designer__toolbar-trenner {
    width: 1px;
    height: 24px;
    background: var(--farbe-rand);
    margin: 0 var(--abstand-xs);
}

.workflow-designer__hauptbereich {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.workflow-designer__canvas {
    position: relative;
    flex: 1;
    min-height: 400px;
    overflow: hidden;
    background-color: #f8fafc;
    background-image:
        linear-gradient(#e2e8f0 1px, transparent 1px),
        linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
    background-size: 24px 24px;
}

#drawflow-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Drawflow erzeugt intern .parent-drawflow + .drawflow — Höhe erzwingen */
#drawflow-canvas .drawflow {
    width: 100%;
    height: 100%;
}

.workflow-designer__zoom {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 10;
}

.workflow-designer__sidebar {
    width: 280px;
    background: #f8fafc;
    border-left: 1px solid #e2e8f0;
    overflow-y: auto;
    flex-shrink: 0;
}

.workflow-designer__sektion {
    padding: var(--abstand-sm) var(--abstand-md);
    border-bottom: 1px solid #e2e8f0;
}

.workflow-designer__sektion:last-child {
    border-bottom: none;
}

.workflow-designer__sektion-titel {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--abstand-sm);
    padding: var(--abstand-xs) 0;
}

.workflow-designer__baustein {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: grab;
    margin-bottom: 4px;
    transition: all 0.15s;
    user-select: none;
}

.workflow-designer__baustein:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: 0 2px 4px rgba(59,130,246,0.1);
    transform: translateY(-1px);
}

.workflow-designer__baustein:active {
    cursor: grabbing;
    transform: translateY(0);
    box-shadow: none;
}

.workflow-designer__baustein-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 6px;
}

.workflow-designer__baustein-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.workflow-designer__baustein-name {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
}

.workflow-designer__baustein-desc {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.3;
}

/* Trigger-Checkboxen in der Sidebar */
.workflow-designer__trigger-liste {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workflow-designer__trigger-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    color: #334155;
}

.workflow-designer__trigger-option:hover {
    background: #f0fdf4;
}

.workflow-designer__trigger-option input[type="checkbox"] {
    accent-color: #16a34a;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.workflow-designer__trigger-option input[type="checkbox"]:checked + .workflow-designer__trigger-icon + span {
    font-weight: 600;
    color: #15803d;
}

.workflow-designer__trigger-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.workflow-designer__trigger-bedingung {
    padding: 10px;
    margin-top: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

/* Knoten-Konfiguration Panel (schwebend, verschiebbar) */
.workflow-designer__konfiguration {
    position: absolute;
    right: 20px;
    top: 60px;
    width: 640px;
    max-height: calc(100% - 80px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 20;
    overflow-y: auto;
}

.workflow-designer__konfiguration-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 12px 12px 0 0;
    cursor: grab;
    user-select: none;
}

.workflow-designer__konfiguration-kopf:active {
    cursor: grabbing;
}

/* ==========================================================================
   Drawflow Canvas & Knoten
   WICHTIG: Drawflow-Layout (display, padding, position) NICHT ueberschreiben!
   Nur Farben, Rahmen, Schatten anpassen.
   ========================================================================== */

/* --- Knoten: Nur visuelle Anpassungen, KEIN Layout-Override --- */
#drawflow-canvas .drawflow .drawflow-node {
    background: #fff;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    width: auto;
    min-width: 180px;
}

#drawflow-canvas .drawflow .drawflow-node:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(59,130,246,0.12);
}

#drawflow-canvas .drawflow .drawflow-node.selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2), 0 4px 12px rgba(59,130,246,0.15);
}

/* --- Connection Points: NUR Farben ändern, KEIN Layout/Size/Transform --- */
#drawflow-canvas .drawflow .drawflow-node .input {
    background: #dbeafe;
    border-color: #60a5fa;
}

#drawflow-canvas .drawflow .drawflow-node .output {
    background: #dcfce7;
    border-color: #4ade80;
}

#drawflow-canvas .drawflow .drawflow-node .input:hover {
    background: #60a5fa;
    border-color: #2563eb;
}

#drawflow-canvas .drawflow .drawflow-node .output:hover {
    background: #4ade80;
    border-color: #16a34a;
}

/* --- Verbindungslinien --- */
#drawflow-canvas .drawflow .connection .main-path {
    stroke: #60a5fa;
    stroke-width: 3;
}

#drawflow-canvas .drawflow .connection .main-path:hover {
    stroke: #2563eb;
    stroke-width: 4;
}

#drawflow-canvas .drawflow .connection .main-path.selected {
    stroke: #2563eb;
    stroke-width: 3.5;
}

/* --- Löschen-Button --- */
#drawflow-canvas .drawflow .drawflow-delete {
    background: #ef4444;
    border: 2px solid #fff;
    color: #fff;
}

/* ==========================================================================
   Workflow-Knoten Inhalte (innerhalb drawflow_content_node)
   ========================================================================== */
.wf-knoten {
    min-width: 140px;
}

.wf-knoten__kopf {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 6px;
}

.wf-knoten__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.wf-knoten__label {
    font-size: 13px;
}

.wf-knoten--flow .wf-knoten__kopf {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #5b21b6;
}

.wf-knoten--aktion .wf-knoten__kopf {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
}

.wf-knoten--logik .wf-knoten__kopf {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.wf-knoten__hinweis {
    padding: 2px 10px 4px;
    font-size: 10px;
    color: #94a3b8;
}

/* --- Typ-Rahmenfarben --- */
#drawflow-canvas .drawflow .drawflow-node.wf-typ-start,
#drawflow-canvas .drawflow .drawflow-node.wf-typ-ende {
    border-color: #a78bfa;
}

#drawflow-canvas .drawflow .drawflow-node.wf-typ-bedingung,
#drawflow-canvas .drawflow .drawflow-node.wf-typ-warten {
    border-color: #fbbf24;
}

#drawflow-canvas .drawflow .drawflow-node.wf-typ-freigabe_anfordern {
    border-color: #34d399;
}

/* --- Port-Labels für Bedingungen (Ja/Nein) und Schleifen (Wiederholen/Fertig) --- */
#drawflow-canvas .drawflow .drawflow-node.wf-typ-bedingung .output_1::after,
#drawflow-canvas .drawflow .drawflow-node.wf-typ-schleife .output_1::after {
    content: 'Ja';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #16a34a;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.4;
}

#drawflow-canvas .drawflow .drawflow-node.wf-typ-bedingung .output_2::after,
#drawflow-canvas .drawflow .drawflow-node.wf-typ-schleife .output_2::after {
    content: 'Nein';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #dc2626;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.4;
}

/* Schleife: andere Labels */
#drawflow-canvas .drawflow .drawflow-node.wf-typ-schleife .output_1::after {
    content: 'Wiederholen';
    background: #2563eb;
}

#drawflow-canvas .drawflow .drawflow-node.wf-typ-schleife .output_2::after {
    content: 'Fertig';
    background: #16a34a;
}

/* Output-Ports bei Bedingungen/Schleifen farbig markieren */
#drawflow-canvas .drawflow .drawflow-node.wf-typ-bedingung .output_1,
#drawflow-canvas .drawflow .drawflow-node.wf-typ-schleife .output_1 {
    background: #dcfce7;
    border-color: #16a34a;
}

#drawflow-canvas .drawflow .drawflow-node.wf-typ-bedingung .output_2,
#drawflow-canvas .drawflow .drawflow-node.wf-typ-schleife .output_2 {
    background: #fee2e2;
    border-color: #dc2626;
}

/* --- Farbige Verbindungslinien für Bedingungen/Schleifen --- */
/* Barrierefreiheit: Farbe + Linienstil als doppelter Unterscheider (WCAG) */

/* Ja-Verbindung: durchgezogen grün ——— */
#drawflow-canvas .drawflow .connection.wf-verbindung--ja .main-path {
    stroke: #16a34a;
    stroke-width: 3;
}

/* Nein-Verbindung: gestrichelt rot – – – */
#drawflow-canvas .drawflow .connection.wf-verbindung--nein .main-path {
    stroke: #dc2626;
    stroke-width: 3;
    stroke-dasharray: 8 4;
}

/* Wiederholen-Verbindung: durchgezogen blau ——— */
#drawflow-canvas .drawflow .connection.wf-verbindung--wiederholen .main-path {
    stroke: #2563eb;
    stroke-width: 3;
}

/* Fertig-Verbindung: gepunktet grün · · · */
#drawflow-canvas .drawflow .connection.wf-verbindung--fertig .main-path {
    stroke: #16a34a;
    stroke-width: 3;
    stroke-dasharray: 3 5;
}

/* Hover-Effekt für farbige Verbindungen */
#drawflow-canvas .drawflow .connection.wf-verbindung--ja .main-path:hover {
    stroke: #15803d;
    stroke-width: 4;
}

#drawflow-canvas .drawflow .connection.wf-verbindung--nein .main-path:hover {
    stroke: #b91c1c;
    stroke-width: 4;
}

#drawflow-canvas .drawflow .connection.wf-verbindung--wiederholen .main-path:hover {
    stroke: #1d4ed8;
    stroke-width: 4;
}

#drawflow-canvas .drawflow .connection.wf-verbindung--fertig .main-path:hover {
    stroke: #15803d;
    stroke-width: 4;
}

/* --- Knoten-Status (Live-Ausführung) --- */
#drawflow-canvas .drawflow .drawflow-node.wf-status--abgeschlossen {
    border-color: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2), 0 2px 8px rgba(22, 163, 74, 0.1);
}

#drawflow-canvas .drawflow .drawflow-node.wf-status--aktiv {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    animation: wf-puls 1.5s ease-in-out infinite;
}

#drawflow-canvas .drawflow .drawflow-node.wf-status--fehler {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2), 0 2px 8px rgba(220, 38, 38, 0.15);
}

@keyframes wf-puls {
    0%, 100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1); }
}

/* Mobile-Hinweis */
.mobile-hinweis {
    display: none;
    text-align: center;
    padding: var(--abstand-2xl);
    color: var(--farbe-text-sekundaer);
}

/* --------------------------------------------------------------------------
   Workflow-Instanzen Liste
   -------------------------------------------------------------------------- */
.workflow-instanz-status {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    padding: 2px var(--abstand-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-groesse-xs);
    font-weight: 500;
}

.workflow-instanz-status--aktiv {
    background: var(--badge-offen-bg);
    color: var(--badge-offen);
}

.workflow-instanz-status--wartend {
    background: var(--badge-bearbeitung-bg);
    color: var(--badge-bearbeitung);
}

.workflow-instanz-status--abgeschlossen {
    background: var(--badge-erledigt-bg);
    color: var(--badge-erledigt);
}

.workflow-instanz-status--fehler {
    background: var(--badge-fehler-bg);
    color: var(--badge-fehler);
}

.workflow-instanz-status--abgebrochen {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-deaktiviert);
}

/* --------------------------------------------------------------------------
   Freigabe-Banner
   -------------------------------------------------------------------------- */
.freigabe-banner {
    display: flex;
    align-items: center;
    gap: var(--abstand-lg);
    padding: var(--abstand-md) var(--abstand-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--abstand-lg);
}

.freigabe-banner--offen {
    background: var(--farbe-warnung-bg);
    border: 1px solid var(--farbe-warnung-rand);
}

.freigabe-banner--freigegeben {
    background: var(--farbe-erfolg-bg);
    border: 1px solid var(--farbe-erfolg-rand);
}

.freigabe-banner--abgelehnt {
    background: var(--farbe-fehler-bg);
    border: 1px solid var(--farbe-fehler-rand);
}

.freigabe-banner__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.freigabe-banner__inhalt {
    flex: 1;
}

.freigabe-banner__titel {
    font-size: var(--font-groesse-sm);
    font-weight: 600;
    color: var(--farbe-text);
    margin-bottom: 2px;
}

.freigabe-banner__text {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-sekundaer);
}

.freigabe-banner__aktionen {
    display: flex;
    gap: var(--abstand-sm);
    flex-shrink: 0;
}

/* Freigabe-Liste */
.freigabe-eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-md) var(--abstand-lg);
    border-bottom: 1px solid var(--farbe-rand);
    transition: background var(--uebergang-schnell);
}

.freigabe-eintrag:hover {
    background: var(--farbe-hintergrund-hover);
}

.freigabe-eintrag__status-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.freigabe-eintrag__status-icon--offen {
    background: var(--farbe-warnung-bg);
    color: var(--farbe-warnung);
}

.freigabe-eintrag__status-icon--freigegeben {
    background: var(--farbe-erfolg-bg);
    color: var(--farbe-erfolg);
}

.freigabe-eintrag__status-icon--abgelehnt {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
}

.freigabe-eintrag__inhalt {
    flex: 1;
    min-width: 0;
}

.freigabe-eintrag__aktionen {
    display: flex;
    gap: var(--abstand-sm);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Eskalation-Banner
   -------------------------------------------------------------------------- */
.eskalation-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-md);
    padding: var(--abstand-md) var(--abstand-lg);
    background: var(--farbe-fehler-bg);
    border: 1px solid var(--farbe-fehler-rand);
    border-radius: var(--radius-md);
    margin-bottom: var(--abstand-lg);
}

.eskalation-banner__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    color: var(--farbe-fehler);
}

.eskalation-banner__inhalt {
    flex: 1;
}

.eskalation-banner__titel {
    font-size: var(--font-groesse-sm);
    font-weight: 600;
    color: #991b1b;
    margin-bottom: 2px;
}

.eskalation-banner__detail {
    font-size: var(--font-groesse-xs);
    color: #991b1b;
    opacity: 0.8;
}

.eskalation-banner__stufe {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    padding: 2px var(--abstand-sm);
    background: var(--farbe-fehler);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--font-groesse-xs);
    font-weight: 600;
}

.eskalation-banner__aktionen {
    display: flex;
    gap: var(--abstand-sm);
    flex-shrink: 0;
}

/* Eskalationsregeln-Liste */
.eskalation-regel {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    margin-bottom: var(--abstand-md);
    overflow: hidden;
}

.eskalation-regel__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-md) var(--abstand-lg);
    background: var(--farbe-hintergrund);
}

.eskalation-regel__stufen {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-sm) var(--abstand-lg);
}

.eskalation-stufe {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    padding: var(--abstand-xs) var(--abstand-sm);
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    font-size: var(--font-groesse-xs);
}

.eskalation-stufe__nummer {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--farbe-primaer-600);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
}

.eskalation-stufe__pfeil {
    color: var(--farbe-text-deaktiviert);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   SLA-Profile
   -------------------------------------------------------------------------- */
.sla-karte {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    padding: var(--abstand-lg);
    background: var(--farbe-hintergrund-karte);
    transition: all var(--uebergang-schnell);
}

.sla-karte:hover {
    border-color: var(--farbe-primaer-300);
    box-shadow: var(--schatten-md);
}

.sla-karte__bezeichnung {
    font-size: var(--font-groesse-md);
    font-weight: 600;
    margin-bottom: var(--abstand-sm);
}

.sla-karte__zeiten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-sm);
    margin-bottom: var(--abstand-md);
}

.sla-karte__zeit {
    text-align: center;
    padding: var(--abstand-sm);
    background: var(--farbe-hintergrund);
    border-radius: var(--radius-md);
}

.sla-karte__zeit-wert {
    font-size: var(--font-groesse-lg);
    font-weight: 700;
    color: var(--farbe-primaer-600);
}

.sla-karte__zeit-label {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-sekundaer);
}

/* Geschäftszeiten-Tabelle */
.geschaeftszeiten-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.geschaeftszeiten-tabelle td,
.geschaeftszeiten-tabelle th {
    padding: var(--abstand-md) var(--abstand-lg);
    border-bottom: 1px solid var(--farbe-rand);
    vertical-align: middle;
}

.geschaeftszeiten-tabelle th {
    text-align: left;
    font-weight: 600;
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    background: var(--farbe-hintergrund);
}

.geschaeftszeiten__wochentag {
    font-weight: 500;
    min-width: 120px;
}

.geschaeftszeiten__wochentag--inaktiv {
    color: var(--farbe-text-deaktiviert);
    text-decoration: line-through;
}

.geschaeftszeiten__zeit-input {
    width: 90px;
    padding: var(--abstand-xs) var(--abstand-sm);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    font-size: var(--font-groesse-sm);
    font-family: var(--font-mono);
    text-align: center;
}

.geschaeftszeiten__zeit-input:disabled {
    opacity: 0.5;
    background: var(--farbe-hintergrund);
}

/* Feiertage */
.feiertag-eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-sm) var(--abstand-lg);
    border-bottom: 1px solid var(--farbe-rand);
}

.feiertag-eintrag__datum {
    font-family: var(--font-mono);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    min-width: 100px;
}

.feiertag-eintrag__bezeichnung {
    flex: 1;
    font-size: var(--font-groesse-sm);
}

.feiertag-eintrag__jaehrlich {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-primaer-600);
}

/* --------------------------------------------------------------------------
   Responsive: Phase 3
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .workflow-designer {
        grid-template-columns: 200px 1fr;
    }

    .workflow-designer__eigenschaften {
        display: none;
    }
}

@media (max-width: 768px) {
    .workflow-designer {
        grid-template-columns: 1fr;
        height: auto;
    }

    .workflow-designer__palette {
        display: none;
    }

    .freigabe-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .eskalation-banner {
        flex-direction: column;
    }

    .eskalation-regel__stufen {
        flex-wrap: wrap;
    }

    .sla-karte__zeiten {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Phase 4: E-Mail
   ========================================================================== */

/* --------------------------------------------------------------------------
   E-Mail Verfassen – Outlook Web App Style (ev = email-verfassen)
   -------------------------------------------------------------------------- */

/* email-modal__kopf wird nicht mehr verwendet (Doppel-Header entfernt) */
.email-modal__kopf { display: none; }

.email-modal__titel { display: none; }
.email-modal__bezug { display: none; }
.email-modal__aktionen { display: none; }

.modal__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--farbe-text-sekundaer);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--uebergang-schnell);
}

.modal__icon-btn:hover {
    background: var(--farbe-hintergrund-hover);
    color: var(--farbe-text);
}

.email-modal__body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    background: #fff;
}

/* --- Formular --- */
/* --- Form-Root --- */
.ev {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

/* --- Kopfleiste: Titel + Fenster-Buttons (wie Windows Titelleiste) --- */
.ev__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: linear-gradient(to bottom, #fff 0%, #f3f3f3 100%);
    border-bottom: 1px solid #d6d6d6;
    flex-shrink: 0;
    min-height: 36px;
}

.ev__kopf-titel {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ev__kopf-rechts {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Senden-Button im Ribbon: normaler Button wie alle anderen */
.ribbon__btn--senden .ribbon__icon--lg {
    color: #0078d4;
}

/* --- Feld-Bereich: Von, An, Cc, Signatur --- */
.ev__felder {
    flex-shrink: 0;
    background: #fff;
}

.ev__feld {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-bottom: 1px solid #ededed;
}

.ev__feld:last-child {
    border-bottom: none;
}

/* Label: "Von", "An", "Cc", "Signatur" */
.ev__label {
    flex-shrink: 0;
    min-width: 56px;
    padding: 4px 0;
    border: none;
    background: none;
    font-family: var(--font-familie);
    font-size: 14px;
    font-weight: 500;
    color: #616161;
    cursor: default;
}

/* An/Cc Labels: Blau, klickbar (wie Outlook To/Cc) */
.ev__label--klickbar {
    color: #0078d4;
    font-weight: 600;
    cursor: pointer;
}

.ev__label--klickbar:hover {
    color: #106ebe;
    text-decoration: underline;
}

/* Eingabefelder in den Zeilen */
.ev__input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--font-familie);
    font-size: 14px;
    color: var(--farbe-text);
    outline: none;
}

.ev__input::placeholder {
    color: #c4c4c4;
}

/* Select-Felder (Von, Signatur) */
.ev__input--select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

.ev__input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}

.ev__input-wrap .ev__input {
    width: 100%;
}

/* Mandant-Hinweis am Von-Feld — kleine Fußzeile unter dem Konto-Select,
   damit der User beim Verfassen unmittelbar sieht, in welchem Mandanten er ist.
   Adressen-Autocomplete und Signaturen hängen daran. */
.ev__mandant-hinweis {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs, 4px);
    margin-top: 4px;
    padding-top: 2px;
}

.ev__mandant-hinweis .mandant-icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Cc/Bcc Links rechts im An-Feld */
.ev__cc-links {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.ev__cc-link {
    border: none;
    background: none;
    color: #0078d4;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-familie);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}

.ev__cc-link:hover {
    color: #106ebe;
    text-decoration: underline;
}

/* Cc/Bcc Felder (initial versteckt) */
.ev__feld--cc[hidden],
.ev__feld--bcc[hidden] {
    display: none;
}

/* --- Betreff: Eigene Zeile, visuell prominent --- */
.ev__fehler {
    padding: 8px 20px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    flex-shrink: 0;
}
.ev__fehler-zeile {
    color: #991b1b;
    font-size: 13px;
    line-height: 1.5;
}

.ev__betreff {
    padding: 0 20px;
    border-bottom: 2px solid #d1d1d1;
    flex-shrink: 0;
    background: #fff;
}

.ev__betreff-input {
    width: 100%;
    height: 50px;
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--font-familie);
    font-size: 20px;
    font-weight: 600;
    color: var(--farbe-text);
    outline: none;
}

.ev__betreff-input::placeholder {
    color: #c4c4c4;
    font-weight: 400;
}

/* --- Editor: Nimmt restlichen Platz, nur Editor-Inhalt scrollt --- */
.ev__editor {
    flex: 1 1 0%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

/* TipTap-Wrapper: Flex-Kind das den Platz füllt */
.ev__editor > div:first-child {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ev__editor .ProseMirror {
    flex: 1;
    min-height: 0;
    padding: 16px 24px;
    overflow-y: auto;
    outline: none;
    font-family: var(--font-familie);
    font-size: 14px;
    line-height: 1.65;
    color: var(--farbe-text);
    background: #fff;
}

.ev__editor .ProseMirror blockquote {
    border-left: 3px solid #ddd;
    padding-left: 12px;
    margin: 8px 0;
    color: #555;
    font-size: 12px;
    color: #555;
    line-height: 1.8;
}

/* --- Zitat: Nicht-editierbarer Block unter dem Editor (Gmail-Style) --- */
/* --- Splitter: Drag-Linie zwischen Editor und Zitat --- */
.ev__splitter {
    height: 5px;
    flex-shrink: 0;
    background: #e0e0e0;
    cursor: ns-resize;
    position: relative;
    transition: background 0.1s;
}

.ev__splitter:hover,
.ev__splitter--aktiv {
    background: #3574a5;
}

/* --- Zitat: Nicht-editierbarer Block unter dem Splitter --- */
.ev__zitat {
    flex: 1 1 300px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    overflow: hidden;
    border-left: 3px solid #ccc;
    padding: 0 20px;
}

.ev__zitat-header {
    padding: 8px 0;
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    background: #f5f5f5;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
}

.ev__zitat-header p {
    margin: 0;
}

.ev__zitat-iframe {
    width: 100%;
    flex: 1;
    min-height: 0;
    border: none;
    background: #fff;
}

.ev__zitat-plain {
    padding: 12px 0;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--font-familie);
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
}

/* --- Anhang-Zeile (zwischen Betreff und Editor, wie Outlook) --- */
.ev__anhang-zeile {
    flex-shrink: 0;
    background: #fff;
}

.ev__anhang-zeile:empty {
    display: none;
}

.ev__anhang-zeile .datei-upload__datei-info {
    padding: 6px 20px;
    border-bottom: 1px solid #ededed;
}

/* Drag-Highlight auf dem Ribbon-Anhang-Button */
.ribbon__btn--gross.datei-upload__bereich--aktiv,
.ribbon__btn--gross.datei-upload--aktiv {
    background: #deecf9;
    border-color: #0078d4;
    color: #0078d4;
}

/* --- Volle-Seite-Ansicht --- */
.ev-seite {
    max-width: 960px;
}

.ev-seite .ev {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten-lg);
    background: #fff;
    overflow: hidden;
    min-height: 560px;
}

/* --- E-Mail Leseansicht (Clean, Outlook/Gmail-Style) --- */
.email-lesen {
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100%;
    overflow: hidden;
}

.email-lesen__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.email-lesen__absender {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.email-lesen__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--farbe-akzent, #0078d4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}

.email-lesen__absender-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.email-lesen__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--farbe-text);
    line-height: 1.3;
}

.email-lesen__betreff {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-lesen__kopf-zeile {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.3;
}

.email-lesen__kopf-label {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    min-width: 52px;
    flex-shrink: 0;
}

.email-lesen__kopf-wert {
    font-size: 14px;
    font-weight: 400;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-lesen__kopf-wert--name {
    font-size: 16px;
    font-weight: 600;
    color: var(--farbe-text);
}

.email-lesen__datum {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

.email-lesen__header {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    flex-shrink: 0;
    gap: 4px;
}

.email-lesen__header-zeile {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.5;
}

.email-lesen__header-zeile--status {
    margin-top: 4px;
    gap: 6px;
    flex-wrap: wrap;
}

.email-lesen__header-label {
    color: #888;
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}

.email-lesen__header-wert {
    color: var(--farbe-text);
    word-break: break-word;
}

.email-lesen__header-wert--fett {
    font-weight: 600;
}

.email-lesen__status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

.email-lesen__status-badge--eingehend {
    background: #eff6ff;
    color: #2563eb;
}

.email-lesen__status-badge--ausgehend {
    background: #f0fdf4;
    color: #16a34a;
}

.email-lesen__status-badge--beantwortet {
    background: #f0fdf4;
    color: #16a34a;
}

.email-lesen__status-badge--weitergeleitet {
    background: #fefce8;
    color: #ca8a04;
}

.email-lesen__status-badge--signiert {
    background: #f0fdf4;
    color: #16a34a;
}

.email-lesen__status-badge--warnung {
    background: #fef2f2;
    color: #dc2626;
}

.email-lesen__status-badge--auto {
    background: #f5f3ff;
    color: #7c3aed;
}

.email-lesen__status-badge--sieve {
    background: #f0fdf4;
    color: #16a34a;
}

.email-lesen__status-badge--pop3 {
    background: #fef2f2;
    color: #dc2626;
}

.email-lesen__anhaenge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: #fafafa;
    flex-shrink: 0;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    font-size: 12px;
    color: #888;
}

.email-lesen__anhaenge svg {
    flex-shrink: 0;
    color: #888;
}

.email-lesen__anhaenge-anzahl {
    color: #888;
    margin-right: 4px;
}

.email-lesen__anhang {
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    color: var(--farbe-text);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.email-lesen__anhang:hover {
    background: #e5f1fb;
    border-color: #cce4f7;
    color: #0060a0;
}

.email-lesen__anhang-gr {
    color: #999;
}

.email-lesen__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.email-lesen__vorschau {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Inline-Anhang-Vorschau: DATEV-Buttons (Auswahl, Mülleimer) ausblenden */
.email-lesen__vorschau .pdfjs-toolbar__sep,
.email-lesen__vorschau .pdfjs-toolbar__btn--auswahl,
.email-lesen__vorschau .pdfjs-toolbar__btn--auswahl + .pdfjs-toolbar__btn {
    display: none;
}

/* Inline-Anhang-Vorschau im E-Mail-Inhalt-Tab */
.anhang-inline__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm, 8px);
    padding: var(--abstand-sm, 8px) var(--abstand-md, 16px);
    border-bottom: 1px solid var(--farbe-rand, #e5e7eb);
    background: var(--farbe-hintergrund-sekundaer, #f9fafb);
}
.anhang-inline__dateiname {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--farbe-text-sekundaer, #6b7280);
}
.anhang-inline__inhalt {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}
.anhang-inline__inhalt .dokument-vorschau {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.anhang-inline__inhalt .dokument-vorschau__viewer {
    flex: 1;
    overflow: auto;
    min-height: 400px;
}
.anhang-inline__bild {
    max-width: 100%;
    height: auto;
    margin: var(--abstand-md, 16px) auto;
    display: block;
}

/* E-Mail-Body wird in einem iframe srcdoc gerendert (CSS-Isolation) */
.email-lesen__iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Dezenter Hinweis-Banner: Bilder werden ueber den ECM-Proxy geladen.
   Frueher ein "Bilder blockiert"-Warnbanner — heute Info zum aktiven Tracking-Schutz. */
.email-lesen__bilder-hinweis {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--farbe-info-bg, #eff6ff);
    border-bottom: 1px solid var(--farbe-info-rand, #bfdbfe);
    font-size: 12px;
    color: var(--farbe-info, #1e40af);
    flex-shrink: 0;
}
.email-lesen__bilder-hinweis svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.email-lesen__bilder-hinweis span {
    flex: 1;
}

.email-lesen__plain {
    white-space: pre-wrap;
    font-family: var(--font-familie);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    padding: 16px 20px;
    color: var(--farbe-text);
}

/* --------------------------------------------------------------------------
   TipTap Editor (ProseMirror)
   -------------------------------------------------------------------------- */
.tiptap-editor {
    min-height: 250px;
}

.ProseMirror,
.tiptap-editor__inhalt {
    padding: 16px 24px;
    min-height: 250px;
    outline: none;
    font-family: var(--font-familie);
    font-size: 14px;
    line-height: 1.65;
    color: #1a2030;
    background: #ffffff;
}

.ProseMirror:focus {
    background: #fefffe;
}

.ProseMirror p {
    margin: 0 0 6px;
}

.ProseMirror > *:last-child {
    margin-bottom: 0;
}

/* Placeholder */
.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #c4c4c4;
    pointer-events: none;
    height: 0;
}

/* Blockquote / E-Mail-Zitat */
.ProseMirror blockquote {
    border-left: 3px solid #3574a5;
    padding-left: 14px;
    margin: 8px 0;
    color: var(--farbe-text-sekundaer);
}

/* Listen */
.ProseMirror ul,
.ProseMirror ol {
    padding-left: 24px;
    margin: 6px 0;
}

/* Links */
.ProseMirror a {
    color: var(--farbe-primaer-600);
    text-decoration: underline;
    cursor: pointer;
}

/* Überschriften */
.ProseMirror h1 { font-size: 1.8em; margin: 16px 0 8px; font-weight: 700; }
.ProseMirror h2 { font-size: 1.4em; margin: 12px 0 6px; font-weight: 600; }
.ProseMirror h3 { font-size: 1.15em; margin: 10px 0 4px; font-weight: 600; }

/* Horizontal Rule */
.ProseMirror hr {
    border: none;
    border-top: 2px solid var(--farbe-rand);
    margin: 16px 0;
}

/* Tabelle */
.ProseMirror table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    table-layout: fixed;
    overflow: hidden;
}

.ProseMirror table td,
.ProseMirror table th {
    border: 1px solid #d1d1d1;
    padding: 6px 10px;
    vertical-align: top;
    min-width: 60px;
    position: relative;
}

.ProseMirror table th {
    background: #f3f3f3;
    font-weight: 600;
}

.ProseMirror table .selectedCell {
    background: #d4e3f2;
}

.ProseMirror table .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: -2px;
    width: 4px;
    background: #3574a5;
    pointer-events: none;
}

.ProseMirror .tableWrapper {
    overflow-x: auto;
    margin: 8px 0;
}

/* Bilder */
.ProseMirror img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.ProseMirror img.ProseMirror-selectednode {
    outline: 2px solid #3574a5;
    outline-offset: 2px;
}

/* Code-Block */
.ProseMirror pre {
    background: #1e293b;
    color: #e2e8f0;
    font-family: 'Courier New', monospace;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 8px 0;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
}

.ProseMirror pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Inline Code */
.ProseMirror code {
    background: #f1f5f9;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #c94444;
}

/* Aufgabenliste */
.ProseMirror ul[data-type="taskList"] {
    list-style: none;
    padding-left: 2px;
}

.ProseMirror ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0;
}

.ProseMirror ul[data-type="taskList"] li > label {
    flex-shrink: 0;
    margin-top: 3px;
}

.ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #3574a5;
}

.ProseMirror ul[data-type="taskList"] li > div {
    flex: 1;
}

.ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
    text-decoration: line-through;
    color: var(--farbe-text-sekundaer);
}

/* Mention (@-Erwähnung) */
.ProseMirror .mention {
    background: #eef4fb;
    color: #3574a5;
    border-radius: 4px;
    padding: 1px 4px;
    font-weight: 500;
    box-decoration-break: clone;
}

/* Dropcursor */
.ProseMirror .ProseMirror-dropcursor {
    color: #3574a5;
}

/* Mark: Highlight */
.ProseMirror mark {
    border-radius: 2px;
    padding: 1px 2px;
}

/* --------------------------------------------------------------------------
   Ribbon: Basistext-Gruppe (Outlook-Style – 2 kompakte Zeilen)
   -------------------------------------------------------------------------- */
.ribbon__gruppe--breit {
    min-width: 0;
}

.ribbon__basistext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 0;
    flex: 1;
}

.ribbon__bt-zeile {
    display: flex;
    align-items: center;
    gap: 1px;
}

/* Native Select-Felder für Schriftart/Größe (wie Outlook) */
.ribbon__font-select,
.ribbon__size-select {
    height: 22px;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    background: #fff;
    color: #333;
    font-family: var(--font-familie);
    font-size: 11px;
    cursor: pointer;
    padding: 0 2px 0 4px;
    outline: none;
    transition: border-color 0.15s;
}

.ribbon__font-select:hover,
.ribbon__size-select:hover {
    border-color: #999;
}

.ribbon__font-select:focus,
.ribbon__size-select:focus {
    border-color: #3574a5;
}

.ribbon__font-select {
    width: 110px;
}

.ribbon__size-select {
    width: 46px;
}

/* Icon-Button (Outlook: 24×24, nur Icon, kein Text) */
.ribbon__ib {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: none;
    color: #444;
    cursor: pointer;
    transition: all 0.08s;
    padding: 0;
    flex-shrink: 0;
    font-family: var(--font-familie);
    font-size: 13px;
    line-height: 1;
}

.ribbon__ib:hover {
    background: #e5f1fb;
    border-color: #cce4f7;
    color: #242424;
}

.ribbon__ib:active {
    background: #cce4f7;
}

/* Aktiver Zustand (z.B. Fett ist aktiv) */
.ribbon__ib--aktiv {
    background: #cce4f7;
    border-color: #a8d1f0;
    color: #0060a0;
}

.ribbon__ib--aktiv:hover {
    background: #b8d8f2;
}

/* Spezial-Styling für B, I, U */
.ribbon__ib--b { font-weight: 700; }
.ribbon__ib--i { font-style: italic; font-family: serif; }
.ribbon__ib--u { text-decoration: underline; }

/* Separator innerhalb Basistext-Zeile */
.ribbon__bt-sep {
    width: 1px;
    height: 16px;
    background: #d6d6d6;
    margin: 0 3px;
    flex-shrink: 0;
}

/* Split-Button für Farben: Hauptbutton + Chevron */
.ribbon__ib-split {
    display: inline-flex;
    align-items: stretch;
    position: relative;
}

.ribbon__ib--farbknopf {
    position: relative;
    border-radius: 2px 0 0 2px;
    padding-bottom: 5px;
}

.ribbon__farb-leiste {
    position: absolute;
    bottom: 1px;
    left: 3px;
    right: 3px;
    height: 3px;
    border-radius: 1px;
}

.ribbon__ib-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 22px;
    border: 1px solid transparent;
    border-left: none;
    border-radius: 0 2px 2px 0;
    background: none;
    color: #888;
    cursor: pointer;
    padding: 0;
    transition: all 0.08s;
}

.ribbon__ib-chevron:hover {
    background: #e5f1fb;
    border-color: #cce4f7;
    color: #333;
}

/* --------------------------------------------------------------------------
   Ribbon Dropdown Panels (Farbpaletten)
   -------------------------------------------------------------------------- */
.ribbon-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    margin-top: 2px;
}

/* hidden-Attribut wird vom Stimulus-Controller gesteuert */
.ribbon-dropdown__panel[hidden] {
    display: none !important;
}

/* Farb-Palette: 4×4 Grid */
.ribbon-dropdown__panel--farben {
    width: 152px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.ribbon-dropdown__farbe {
    width: 28px;
    height: 28px;
    border: 2px solid #e4e4e4;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    transition: all 0.1s;
}

.ribbon-dropdown__farbe:hover {
    border-color: #333;
    transform: scale(1.1);
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Tabelle Grid-Picker (Outlook-Style)
   -------------------------------------------------------------------------- */
.ribbon__btn--tabelle-wrap {
    position: relative;
}

.tg {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 10px;
    margin-top: 2px;
    width: 148px;
}

.tg[hidden] {
    display: none !important;
}

.tg__raster {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}

.tg__zelle {
    width: 22px;
    height: 22px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    transition: background 0.05s;
}

.tg__zelle--aktiv {
    background: #cce4f7;
    border-color: #89bde0;
}

.tg__info {
    text-align: center;
    font-size: 11px;
    color: #666;
    padding: 2px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}

.tg__direkt {
    display: block;
    width: 100%;
    padding: 4px 0;
    border: none;
    background: none;
    font-size: 11px;
    color: #3574a5;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-familie);
}

.tg__direkt:hover {
    text-decoration: underline;
}

/* Bild im Editor */
/* Bild-Wrapper mit Resize-Handles */
.editor-bild-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 8px 0;
    line-height: 0;
}

.editor-bild-wrap .editor-bild {
    height: auto;
    border-radius: 4px;
    display: block;
    cursor: default;
}

.editor-bild-wrap:hover .editor-bild,
.editor-bild-wrap.ProseMirror-selectednode .editor-bild {
    outline: 2px solid #3574a5;
    outline-offset: 2px;
}

/* Resize-Griffe (Ecken) */
.editor-bild-griff {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #3574a5;
    border: 2px solid #fff;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.editor-bild-wrap:hover .editor-bild-griff {
    opacity: 1;
}

.editor-bild-griff--nw { top: -4px; left: -4px; cursor: nw-resize; }
.editor-bild-griff--ne { top: -4px; right: -4px; cursor: ne-resize; }
.editor-bild-griff--sw { bottom: -4px; left: -4px; cursor: sw-resize; }
.editor-bild-griff--se { bottom: -4px; right: -4px; cursor: se-resize; }

/* Resize-Modus: Bild bekommt gestrichelten Rahmen */
.editor-bild-wrap--resize .editor-bild {
    outline: 2px dashed #3574a5 !important;
    outline-offset: 2px;
}

/* Größenanzeige beim Skalieren */
.editor-bild-info {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 3;
    font-family: var(--font-monospace, monospace);
}

/* --------------------------------------------------------------------------
   Mention Popup (@-Erwähnung)
   -------------------------------------------------------------------------- */
.mention-popup {
    position: fixed;
    z-index: 200;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 300px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.mention-popup__item {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    cursor: pointer;
    gap: 1px;
}

.mention-popup__item:hover,
.mention-popup__item--aktiv {
    background: #e5f1fb;
}

.mention-popup__name {
    font-size: 13px;
    font-weight: 500;
    color: #1a2030;
}

.mention-popup__detail {
    font-size: 11px;
    color: #6b7280;
}

.mention-popup__leer {
    padding: 8px 12px;
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* --------------------------------------------------------------------------
   E-Mail Body Anzeige (in Element-Ansicht)
   -------------------------------------------------------------------------- */
.email-body {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

.email-body object {
    display: block;
}

/* --------------------------------------------------------------------------
   Typ-Auswahl (Neues Element Einstiegsseite)
   -------------------------------------------------------------------------- */
.typ-auswahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--abstand-lg);
    max-width: 800px;
}

.typ-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-xl) var(--abstand-lg);
    background: var(--farbe-hintergrund);
    border: 2px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--farbe-text);
    transition: all var(--uebergang-schnell);
    cursor: pointer;
}

.typ-kachel:hover {
    border-color: var(--farbe-primaer-400);
    background: var(--farbe-primaer-50);
    transform: translateY(-2px);
    box-shadow: var(--schatten-md);
}

.typ-kachel__icon {
    font-size: 2rem;
}

.typ-kachel__name {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Kontakt-Autocomplete
   -------------------------------------------------------------------------- */
.autocomplete__vorschlaege {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    box-shadow: var(--schatten-lg);
    max-height: 240px;
    overflow-y: auto;
}

.autocomplete__eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-sm) var(--abstand-md);
    cursor: pointer;
    transition: background var(--uebergang-schnell);
}

.autocomplete__eintrag:hover,
.autocomplete__eintrag--aktiv {
    background: var(--farbe-primaer-50);
}

.autocomplete__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.autocomplete__name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete__email {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Historie-Einträge (Outlook-Recent-Recipients) dezent einfärben,
   damit sie auf einen Blick von verwalteten Kontakten unterscheidbar sind. */
.autocomplete__eintrag--historie .autocomplete__icon {
    color: var(--farbe-sekundaer);
}

.autocomplete__eintrag--historie .autocomplete__name {
    font-weight: 400;
}

/* × Button: nur am Hover sichtbar (wie Outlook), a11y: immer fokusbar per Tab */
.autocomplete__ausblenden {
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 0 var(--abstand-xs);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--farbe-sekundaer);
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--uebergang-schnell), background var(--uebergang-schnell), color var(--uebergang-schnell);
}

.autocomplete__eintrag:hover .autocomplete__ausblenden,
.autocomplete__eintrag--aktiv .autocomplete__ausblenden,
.autocomplete__ausblenden:focus-visible {
    opacity: 1;
}

.autocomplete__ausblenden:hover,
.autocomplete__ausblenden:focus-visible {
    background: var(--farbe-fehler-50, rgba(220, 38, 38, 0.1));
    color: var(--farbe-fehler, #dc2626);
}

/* --------------------------------------------------------------------------
   E-Mail-Tags (An/Cc/Bcc Tag-Container)
   -------------------------------------------------------------------------- */
.email-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 3px 6px;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-sm);
    cursor: text;
    transition: border-color var(--uebergang-schnell);
}

.email-tags:focus-within {
    border-color: var(--farbe-akzent);
    box-shadow: 0 0 0 2px var(--farbe-akzent-bg);
}

.email-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: var(--farbe-primaer-50);
    border: 1px solid var(--farbe-primaer-200);
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--farbe-primaer-800);
    max-width: 260px;
    animation: emailTagEin 0.15s ease-out;
}

.email-tag__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-tag__entfernen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    color: var(--farbe-primaer-600);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all var(--uebergang-schnell);
}

.email-tag__entfernen:hover {
    background: var(--farbe-primaer-200);
    color: var(--farbe-primaer-900);
}

.email-tags__eingabe {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    padding: 2px 4px;
    color: var(--farbe-text);
}

.email-tags__eingabe::placeholder {
    color: var(--farbe-text-platzhalter, #999);
}

.email-tags__eingabe--fehler {
    color: var(--farbe-fehler, #dc3545);
    animation: emailTagShake 0.3s ease-in-out;
}

.email-tags--shake {
    animation: emailTagShake 0.3s ease-in-out;
}

@keyframes emailTagEin {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes emailTagShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   Kontakte-Tab (Element-Ansicht)
   -------------------------------------------------------------------------- */

/* Kontakt-Liste */
.kontakte-liste {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--farbe-rand);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.kontakt-eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-md) var(--abstand-lg);
    background: var(--farbe-hintergrund-karte);
    transition: background var(--uebergang-schnell);
}

.kontakt-eintrag:hover {
    background: var(--farbe-hintergrund-hover);
}

.kontakt-eintrag__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--farbe-hintergrund);
    font-size: 1rem;
    flex-shrink: 0;
}

.kontakt-eintrag__info {
    flex: 1;
    min-width: 0;
}

.kontakt-eintrag__name {
    display: block;
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    color: var(--farbe-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kontakt-eintrag__name:hover {
    color: var(--farbe-primaer-600);
}

.kontakt-eintrag__firma {
    display: block;
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-sekundaer);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kontakt-eintrag__entfernen {
    opacity: 0;
    transition: opacity var(--uebergang-schnell);
    color: var(--farbe-text-sekundaer);
}

.kontakt-eintrag:hover .kontakt-eintrag__entfernen {
    opacity: 1;
}

.kontakt-eintrag__entfernen:hover {
    color: var(--farbe-fehler) !important;
}

/* Rollen-Badges (ohne Dot) */
.badge--kontakt-absender,
.badge--kontakt-empfaenger,
.badge--kontakt-betrifft,
.badge--kontakt-kunde {
    font-size: var(--font-groesse-xs);
    flex-shrink: 0;
}

.badge--kontakt-absender::before,
.badge--kontakt-empfaenger::before,
.badge--kontakt-betrifft::before,
.badge--kontakt-kunde::before {
    display: none;
}

.badge--kontakt-absender {
    background: var(--farbe-info-bg);
    color: var(--farbe-info);
    border: 1px solid var(--farbe-info-rand);
}

.badge--kontakt-empfaenger {
    background: var(--farbe-erfolg-bg);
    color: var(--farbe-erfolg);
    border: 1px solid var(--farbe-erfolg-rand);
}

.badge--kontakt-betrifft {
    background: var(--farbe-warnung-bg);
    color: var(--farbe-warnung);
    border: 1px solid var(--farbe-warnung-rand);
}

.badge--kontakt-kunde {
    background: var(--rolle-extern-bg);
    color: var(--rolle-extern);
    border: 1px solid #e2d8f0;
}

/* Verknüpfungsformular (inline) */
.kontakt-verknuepfen {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-sm);
    flex-wrap: wrap;
}

.kontakt-verknuepfen__feld {
    flex: 1;
    min-width: 180px;
    position: relative;
}

.kontakt-verknuepfen__rolle {
    width: auto;
    min-width: 120px;
}

/* Kontakt-Auswahl Chip (ausgewählter Kontakt) */
.kontakt-auswahl__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    background: var(--farbe-primaer-50);
    border: 1px solid var(--farbe-primaer-200);
    border-radius: var(--radius-md);
    padding: 0.375rem 0.625rem;
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    color: var(--farbe-primaer-700);
    line-height: 1.4;
}

.kontakt-auswahl__entfernen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--farbe-primaer-400);
    font-size: 0.875rem;
    line-height: 1;
    padding: 0;
    transition: all var(--uebergang-schnell);
}

.kontakt-auswahl__entfernen:hover {
    color: var(--farbe-fehler);
    background: var(--farbe-fehler-bg);
}

/* --------------------------------------------------------------------------
   E-Mail Anhaenge-Liste
   -------------------------------------------------------------------------- */
.anhang-liste {
    margin-top: var(--abstand-sm);
}

.anhang-eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-sm) var(--abstand-md);
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    margin-bottom: var(--abstand-sm);
    transition: all var(--uebergang-schnell);
}

.anhang-eintrag:last-child {
    margin-bottom: 0;
}

.anhang-eintrag:hover {
    border-color: var(--farbe-primaer-200);
    background: var(--farbe-primaer-50);
}

.anhang-eintrag__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.anhang-eintrag__info {
    flex: 1;
    min-width: 0;
}

.anhang-eintrag__name {
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    color: var(--farbe-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anhang-eintrag__groesse {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-deaktiviert);
    flex-shrink: 0;
}

.anhang-eintrag__entfernen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--farbe-text-deaktiviert);
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    transition: all var(--uebergang-schnell);
    flex-shrink: 0;
}

.anhang-eintrag__entfernen:hover {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
}

/* --------------------------------------------------------------------------
   PDF/Bild Viewer Modal
   -------------------------------------------------------------------------- */
.viewer-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
}

.viewer-modal__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-sm) var(--abstand-lg);
    background: var(--farbe-neutral-900);
    color: #fff;
    flex-shrink: 0;
}

.viewer-modal__titel {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewer-modal__schliessen {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--abstand-xs) var(--abstand-sm);
    line-height: 1;
    border-radius: var(--radius-sm);
}

.viewer-modal__schliessen:hover {
    background: rgba(255, 255, 255, 0.15);
}

.viewer-modal__inhalt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: var(--abstand-md);
}

.viewer-modal__objekt {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-md);
    background: #fff;
}

.viewer-modal__bild {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}

/* Turbo-Frame im Inhalt-Tab: muss Flex-Kette nicht brechen */
#inhalt-frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Dokument-Vorschau (eingebettet im Ansichtsmodal)
   -------------------------------------------------------------------------- */
.dokument-vorschau {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.dokument-vorschau__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-xs) 0 var(--abstand-sm);
    border-bottom: 1px solid var(--farbe-rand);
    margin-bottom: var(--abstand-sm);
    flex-shrink: 0;
}

.dokument-vorschau__dateiname {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dokument-vorschau__viewer {
    flex: 1;
    min-height: 0;
    display: flex;
}

/* PDF.js Viewer */
.pdfjs-viewer {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow-y: auto;
    background: #525659;
    padding: 8px;
}

.pdfjs-seite {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pdfjs-seite canvas {
    display: block;
}

/* PDF.js TextLayer — unsichtbarer Text ueber dem Canvas */
.pdfjs-textebene {
    position: absolute;
    inset: 0;
    overflow: clip;
    opacity: 1;
    line-height: 1;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    z-index: 2;
}

.pdfjs-textebene span,
.pdfjs-textebene br {
    color: transparent;
    position: absolute;
    white-space: nowrap;
    transform-origin: 0% 0%;
    pointer-events: all;
    cursor: text;
}

.pdfjs-textebene span::selection {
    background: rgba(0, 100, 200, 0.3);
    color: transparent;
}

/* PDF.js Toolbar */
.pdfjs-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #333;
    border-radius: 4px;
    margin-bottom: 6px;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    width: fit-content;
    align-self: center;
}

.pdfjs-toolbar__btn {
    background: #555;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}

.pdfjs-toolbar__btn:hover {
    background: #777;
}

.pdfjs-toolbar__btn--auswahl {
    background: #555;
}

.pdfjs-auswahl-modus .pdfjs-toolbar__btn--auswahl {
    background: #e6a700;
    color: #000;
}

.pdfjs-toolbar__zoom {
    color: #fff;
    font-size: 0.8rem;
    min-width: 40px;
    text-align: center;
}

.pdfjs-toolbar__sep {
    width: 1px;
    height: 18px;
    background: #666;
    margin: 0 4px;
}

/* Auswahl-Modus: Crosshair-Cursor */
.pdfjs-auswahl-modus .pdfjs-seite {
    cursor: crosshair;
}

.pdfjs-auswahl-modus .pdfjs-textebene {
    pointer-events: none;
}

/* Auswahl-Rechteck (Vorschau waehrend Ziehen) */
.pdfjs-auswahl-vorschau {
    position: absolute;
    border: 2px dashed rgba(255, 200, 0, 0.8);
    background: rgba(255, 230, 0, 0.15);
    z-index: 5;
    pointer-events: none;
}

/* Auswahl-Rechteck (fertig) */
.pdfjs-auswahl-rechteck {
    position: absolute;
    border: 2px solid rgba(255, 180, 0, 0.9);
    background: rgba(255, 230, 0, 0.2);
    z-index: 5;
    cursor: default;
}

.pdfjs-auswahl-rechteck:hover {
    background: rgba(255, 230, 0, 0.3);
}

.pdfjs-auswahl-loeschen {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #dc3545;
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.pdfjs-auswahl-rechteck:hover .pdfjs-auswahl-loeschen {
    opacity: 1;
}

.pdfjs-auswahl-nr {
    position: absolute;
    top: 2px;
    left: 4px;
    background: rgba(255, 180, 0, 0.9);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    pointer-events: none;
}

/* Highlight fuer DATEV-Feld-Zuordnung */
.pdfjs-highlight {
    background: rgba(255, 230, 0, 0.85) !important;
    border-radius: 2px;
    box-shadow: 0 0 0 2px rgba(255, 200, 0, 0.5);
}

.dokument-vorschau__objekt {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-sm);
    background: #fff;
}

.dokument-vorschau__bild {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
}

.dokument-vorschau__laden {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* --------------------------------------------------------------------------
   Inhalt-Tabs: Info-Grid (für Aufgabe, Telefonnotiz, Termin, Datei, Nachricht)
   -------------------------------------------------------------------------- */
.inhalt-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-sm) var(--abstand-lg);
    margin-bottom: var(--abstand-md);
    padding-bottom: var(--abstand-md);
    border-bottom: 1px solid var(--farbe-rand);
}

.inhalt-info-grid__eintrag {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xxs);
}

.inhalt-info-grid__label {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-sekundaer);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   Inhalt-Tabs: Textblock (für Beschreibung, Notiz, Gesprächsnotiz)
   -------------------------------------------------------------------------- */
.inhalt-textblock {
    margin-top: var(--abstand-sm);
}

.inhalt-textblock__titel {
    font-size: var(--font-groesse-sm);
    font-weight: 600;
    color: var(--farbe-text-sekundaer);
    margin-bottom: var(--abstand-xs);
}

.inhalt-textblock__inhalt {
    line-height: 1.6;
    color: var(--farbe-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Inhalt-Tabs: Nachricht-Blase (für WhatsApp + SMS)
   -------------------------------------------------------------------------- */
.nachricht-blase {
    max-width: 80%;
    margin-top: var(--abstand-md);
    padding: var(--abstand-sm) var(--abstand-md);
    border-radius: var(--radius-lg);
    line-height: 1.5;
    word-break: break-word;
}

.nachricht-blase--eingehend {
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-bottom-left-radius: var(--radius-xs);
    margin-right: auto;
}

.nachricht-blase--ausgehend {
    background: var(--farbe-akzent-bg);
    border: 1px solid var(--farbe-akzent-rand);
    border-bottom-right-radius: var(--radius-xs);
    margin-left: auto;
}

.nachricht-blase__inhalt {
    white-space: pre-wrap;
}

.nachricht-blase__zeit {
    margin-top: var(--abstand-xs);
    text-align: right;
}

/* Responsive: Info-Grid auf Mobil einspaltig */
@media (max-width: 768px) {
    .inhalt-info-grid {
        grid-template-columns: 1fr;
    }

    .nachricht-blase {
        max-width: 95%;
    }
}

/* --------------------------------------------------------------------------
   E-Mail Konten
   -------------------------------------------------------------------------- */
.email-konto-karte {
    transition: all var(--uebergang-schnell);
}

.email-konto-karte:hover {
    border-color: var(--farbe-primaer-300);
    box-shadow: var(--schatten-md);
}

.email-konto-karte__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.email-konto-karte__email {
    font-family: var(--font-mono);
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-sekundaer);
}

.email-konto-karte__details {
    font-size: var(--font-groesse-sm);
}

.email-konto-karte__aktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

/* --------------------------------------------------------------------------
   Zustellprobleme
   -------------------------------------------------------------------------- */
.zustellprobleme__status {
    font-weight: 500;
}

.zustellprobleme__status--fehler {
    color: var(--farbe-fehler);
}

.zustellprobleme__status--warnung {
    color: var(--farbe-warnung);
}

/* --------------------------------------------------------------------------
   E-Mail Signatur
   -------------------------------------------------------------------------- */
.signatur-vorschau {
    border: 1px solid var(--farbe-rand);
    padding: var(--abstand-md);
    border-radius: var(--radius-md);
    background: var(--farbe-hintergrund);
    font-size: var(--font-groesse-sm);
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
}

.signatur-vorschau p {
    margin: 0 0 var(--abstand-xs);
}

/* --------------------------------------------------------------------------
   Responsive: Phase 4
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .email-konto-karte__header {
        flex-direction: column;
        gap: var(--abstand-sm);
    }
}

@media (max-width: 768px) {
    .ev__kopf {
        padding: 2px 6px 2px 10px;
    }

    .ev__kopf-titel {
        font-size: 11px;
    }

    .ev__feld {
        padding: 0 var(--abstand-md);
    }

    .ev__betreff {
        padding: 0 var(--abstand-md);
    }

    .ev__zitat {
        padding: 0 var(--abstand-md);
    }

    .ev__betreff-input {
        font-size: 16px;
    }

    /* Formatierung ist jetzt im Ribbon (wird über .ribbon Mobile-Rules gesteuert) */

    .raster--2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Phase 6: Suche & Filter - Erweiterter FilterEditor
   ========================================================================== */

/* --------------------------------------------------------------------------
   FilterEditor: Erweitert
   -------------------------------------------------------------------------- */
.filtereditor__suche {
    position: relative;
    margin-bottom: var(--abstand-sm);
}

.filtereditor__suche-icon {
    position: absolute;
    left: var(--abstand-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--farbe-text-deaktiviert);
    font-size: var(--font-groesse-sm);
    pointer-events: none;
}

.filtereditor__suche-input {
    width: 100%;
    height: 36px;
    padding: 0 var(--abstand-md) 0 2.25rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    background: var(--farbe-hintergrund);
    font-family: var(--font-familie);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text);
    transition: all var(--uebergang-schnell);
}

.filtereditor__suche-input::placeholder {
    color: var(--farbe-text-deaktiviert);
}

.filtereditor__suche-input:focus {
    outline: none;
    border-color: var(--farbe-rand-fokus);
    box-shadow: 0 0 0 3px rgba(53, 116, 165, 0.1);
    background: var(--farbe-hintergrund-karte);
}

.filtereditor__kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--abstand-sm);
}

.filtereditor__kopfzeile-aktionen {
    display: flex;
    gap: var(--abstand-sm);
}

.filtereditor__toggle {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

.filtereditor__pfeil {
    font-size: 0.5rem;
    transition: transform var(--uebergang-schnell);
    display: inline-block;
}

.filtereditor__pfeil--offen {
    transform: rotate(90deg);
}

.filtereditor__laden {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-sm) 0;
}

.filtereditor--laedt {
    opacity: 0.5;
    pointer-events: none;
}

/* Filtergruppe */
.filtereditor__gruppe {
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.filtereditor__gruppe-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-sm) var(--abstand-md);
    background: var(--farbe-hintergrund-karte);
    border-bottom: 1px solid var(--farbe-rand);
}

.filtereditor__gruppe-titel {
    font-size: var(--font-groesse-xs);
    font-weight: 600;
    color: var(--farbe-text-sekundaer);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filtereditor__gruppe-entfernen {
    color: var(--farbe-text-deaktiviert);
}

.filtereditor__gruppe-entfernen:hover {
    color: var(--farbe-fehler);
}

.filtereditor__bedingungen {
    padding: var(--abstand-md);
}

/* Einzelne Bedingung */
.filtereditor__bedingung {
    display: grid;
    grid-template-columns: 20px minmax(140px, 1fr) 140px minmax(140px, 1fr) 32px;
    gap: var(--abstand-sm);
    align-items: center;
    border-radius: var(--radius, 4px);
    transition: background-color 0.15s ease;
}

.filtereditor__bedingung--ziehen {
    opacity: 0.3;
}

/* Drag-Handle (6-Punkte-Griff) */
.filtereditor__bedingung-griff {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--farbe-text-sekundaer, #999);
    cursor: grab;
    padding: 4px 2px;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    border-radius: var(--radius, 4px);
}

.filtereditor__bedingung-griff:active {
    cursor: grabbing;
}

.filtereditor__bedingung:hover .filtereditor__bedingung-griff {
    opacity: 1;
}

/* Drop-Platzhalter (blaue Linie) */
.filtereditor__drop-platzhalter {
    height: 3px;
    background: var(--farbe-primaer, #3b82f6);
    border-radius: 2px;
    margin: 2px 0;
}

.filtereditor__bedingung-feld,
.filtereditor__bedingung-operator,
.filtereditor__bedingung-wert {
    min-width: 0;
}

.filtereditor__bedingung-aktion {
    display: flex;
    justify-content: center;
}

.filtereditor__input--sm {
    height: 32px;
    font-size: var(--font-groesse-sm);
    padding: 0 var(--abstand-sm);
}

/* Datums-Bereich (Operator "zwischen": zwei Inputs nebeneinander) */
.filtereditor__datum-bereich {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
}

.filtereditor__datum-trenner {
    color: var(--farbe-text-sekundaer);
    flex-shrink: 0;
}

.filtereditor__datum-bereich .formular-input {
    flex: 1;
    min-width: 0;
}

/* UND/ODER-Trenner */
.filtereditor__und-trenner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--abstand-xs) 0;
}

.filtereditor__und-text {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-deaktiviert);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ODER-Trenner innerhalb Gruppe: andere Farbe */
.filtereditor__und-trenner--oder .filtereditor__und-text {
    color: var(--farbe-primaer-500);
}

/* UND/ODER-Toggle am Gruppenkopf */
.filtereditor__verknuepfung-toggle {
    font-size: var(--font-groesse-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--farbe-rand);
    color: var(--farbe-text-sekundaer);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filtereditor__verknuepfung-toggle:hover {
    border-color: var(--farbe-primaer-300);
    color: var(--farbe-primaer-600);
}

.filtereditor__verknuepfung-toggle--oder {
    background: var(--farbe-primaer-50);
    border-color: var(--farbe-primaer-300);
    color: var(--farbe-primaer-600);
}

.filtereditor__oder-trenner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-sm) 0;
    position: relative;
}

.filtereditor__oder-trenner::before,
.filtereditor__oder-trenner::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--farbe-rand);
}

.filtereditor__oder-text {
    padding: 0 var(--abstand-md);
    font-size: var(--font-groesse-xs);
    font-weight: 700;
    color: var(--farbe-primaer-600);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.filtereditor__gruppe-fuss {
    padding: var(--abstand-sm) var(--abstand-md);
    border-top: 1px solid var(--farbe-rand);
    background: var(--farbe-hintergrund-karte);
}

.filtereditor__leer {
    padding: var(--abstand-lg) 0;
    text-align: center;
}

/* Aktionsleiste */
.filtereditor__aktionsleiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--abstand-md);
    margin-top: var(--abstand-md);
    border-top: 1px solid var(--farbe-rand);
}

.filtereditor__aktionsleiste-links,
.filtereditor__aktionsleiste-rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

/* Speichern-Bereich */
.filtereditor__speichern {
    margin-top: var(--abstand-md);
    padding-top: var(--abstand-md);
    border-top: 1px solid var(--farbe-rand);
}

.filtereditor__speichern-form {
    margin: 0;
}

.filtereditor__speichern-felder {
    display: flex;
    gap: var(--abstand-sm);
    align-items: center;
}

.filtereditor__speichern-felder .formular-input {
    flex: 1;
}

.filtereditor__oder-speichern {
    margin: var(--abstand-sm, 8px) 0;
}

/* --------------------------------------------------------------------------
   Ergebnisleiste: Erweiterungen
   -------------------------------------------------------------------------- */
.ergebnisleiste__zaehler {
    white-space: nowrap;
}

.ergebnisleiste__sortierung {
    display: flex;
    align-items: center;
}

.ergebnisleiste__sortierung-select {
    width: auto;
    min-width: 150px;
    height: 28px;
    font-size: var(--font-groesse-xs);
}

/* --------------------------------------------------------------------------
   Filterbaum: Erweiterungen
   -------------------------------------------------------------------------- */
.filterbaum__eintrag-wrapper {
    position: relative;
}

/* Abstand nach Kinder-Gruppe: Root-Filter nach einem Kind bekommt Trennung */
.filterbaum__eintrag-wrapper:not([data-tiefe="0"]) + .filterbaum__eintrag-wrapper[data-tiefe="0"] {
    margin-top: 8px;
    padding-top: 4px;
}

.filterbaum__leer {
    padding: 0;
}

/* ═══ Drag&Drop im Filterbaum (native HTML5, Drei-Zonen-Drop) ═══ */
.filterbaum__eintrag-wrapper[draggable="true"] {
    cursor: grab;
}

/* Gezogenes Element ausgrauen */
.filterbaum__eintrag-wrapper--dragging {
    opacity: 0.4;
}

/* Linie oben: "davor einfügen" */
.filterbaum__eintrag-wrapper--drop-davor {
    box-shadow: 0 -2px 0 0 var(--farbe-primaer-500);
}

/* Highlight: "als Kind einfügen" */
.filterbaum__eintrag-wrapper--drop-kind {
    background: var(--farbe-primaer-50);
    outline: 2px dashed var(--farbe-primaer-300);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Linie unten: "danach einfügen" */
.filterbaum__eintrag-wrapper--drop-danach {
    box-shadow: 0 2px 0 0 var(--farbe-primaer-500);
}

/* Eltern-Filter hervorheben wenn ein Kind in seinen Container gezogen wird.
   Klasse wird per JS gesetzt (filter_sortierung_controller onChange). */
.filterbaum__eintrag--drop-ziel {
    outline: 2px dashed var(--farbe-primaer-300);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
    background: var(--farbe-primaer-50);
}

/* Filter-Verschieben-Modal: Ziel-Auswahl als Radio-Liste */
.filter-verschieben__liste {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-sm);
    padding: var(--abstand-xs);
}

.filter-verschieben__option {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-xs) var(--abstand-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s ease;
}

.filter-verschieben__option:hover {
    background: var(--farbe-hintergrund-hover);
}

.filter-verschieben__option--aktiv {
    background: var(--farbe-primaer-50);
    border-left: 3px solid var(--farbe-primaer-500);
}

.filter-verschieben__text {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
}

/* --------------------------------------------------------------------------
   Responsive: Phase 6
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .filtereditor__bedingung {
        grid-template-columns: 20px 1fr 1fr 32px;
        gap: var(--abstand-xs);
    }

    .filtereditor__bedingung-griff {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }

    .filtereditor__bedingung-feld {
        grid-column: 2;
    }

    .filtereditor__bedingung-operator {
        grid-column: 3;
    }

    .filtereditor__bedingung-wert {
        grid-column: 2 / 4;
    }

    .filtereditor__bedingung-aktion {
        grid-column: 4;
        grid-row: 1;
        justify-content: center;
    }

    .ergebnisleiste__sortierung-select {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .filtereditor__bedingung {
        grid-template-columns: 20px 1fr 32px;
    }

    .filtereditor__bedingung-griff {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: center;
    }

    .filtereditor__bedingung-feld {
        grid-column: 2 / 4;
    }

    .filtereditor__bedingung-operator {
        grid-column: 2 / 4;
    }

    .filtereditor__bedingung-wert {
        grid-column: 2 / 4;
    }

    .filtereditor__bedingung-aktion {
        grid-column: 3;
        grid-row: 1;
        justify-content: center;
    }

    .filtereditor__kopfzeile {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--abstand-sm);
    }

    .filtereditor__aktionsleiste {
        flex-direction: column;
        gap: var(--abstand-sm);
        align-items: flex-start;
    }

    .filtereditor__speichern-felder {
        flex-direction: column;
    }

    .ergebnisleiste__rechts {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Phase 6 Teil 3: Ordnernavigation, Suche-Vorschlaege, Massenaktionen
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ordnerbaum
   -------------------------------------------------------------------------- */
.ordnerbaum__eintrag {
    position: relative;
}

.ordnerbaum__zeile {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    padding: 4px var(--abstand-lg) 4px var(--abstand-md);
    transition: background var(--uebergang-schnell);
    border-radius: var(--radius-sm);
    margin: 0 var(--abstand-xs);
}

.ordnerbaum__zeile:hover {
    background: var(--farbe-hintergrund-hover);
}

.ordnerbaum__zeile--aktiv {
    background: var(--farbe-primaer-50);
}

.ordnerbaum__zeile--aktiv .ordnerbaum__name {
    color: var(--farbe-primaer-700);
    font-weight: 500;
}

.ordnerbaum__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    color: var(--farbe-text-deaktiviert);
    transition: color var(--uebergang-schnell);
}

.ordnerbaum__toggle:hover {
    color: var(--farbe-text);
}

.ordnerbaum__toggle--leer {
    visibility: hidden;
}

.ordnerbaum__pfeil-icon {
    display: inline-block;
    font-size: 0.5rem;
    transition: transform var(--uebergang-schnell);
    line-height: 1;
}

.ordnerbaum__pfeil-icon--offen {
    transform: rotate(90deg);
}

.ordnerbaum__link {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    flex: 1;
    text-decoration: none;
    color: var(--farbe-text);
    font-size: var(--font-groesse-sm);
    min-width: 0;
    overflow: hidden;
}

.ordnerbaum__link:hover {
    text-decoration: none;
    color: var(--farbe-primaer-600);
}

.ordnerbaum__ordner-icon {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1;
}

.ordnerbaum__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ordnerbaum__kinder {
    display: none;
    padding-left: var(--abstand-lg);
}

.ordnerbaum__kinder--offen {
    display: block;
}

.ordnerbaum__lade {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-sm);
}

.ordnerbaum__leer {
    padding: var(--abstand-sm) var(--abstand-lg);
}

.ordnerbaum__sortierbar {
    min-height: 4px;
}

.ordnerbaum__eintrag--ghost {
    opacity: 0.4;
}

.ordnerbaum__eintrag--gewaehlt {
    background: var(--farbe-primaer-bg, #e3f2fd);
}

.ordnerbaum__eintrag--drag {
    opacity: 0.8;
}

.ordnerbaum__zeile--drop-ziel {
    outline: 2px dashed var(--farbe-primaer, #1976d2);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 4px);
}

/* Kinder-Drop-Zone: IMMER sichtbar (SortableJS braucht sichtbare Container) */
.ordnerbaum__kinder-sortierbar {
    min-height: 6px;
    padding-left: 16px;
    border-left: 2px solid transparent;
}

/* Leere Drop-Zone */
.ordnerbaum__kinder-sortierbar--leer {
    min-height: 6px;
}

/* Toggle versteckt nur den Inhalt, nicht den Container selbst (Drop-Zone bleibt aktiv) */
.ordnerbaum__kinder-sortierbar:not(.ordnerbaum__kinder--offen) > * {
    display: none;
}

/* Drop-Feedback: Container vergrößert sich beim Drüberziehen */
.ordnerbaum__kinder-sortierbar:has(.sortable-ghost),
.ordnerbaum__sortierbar:has(.sortable-ghost) {
    min-height: 24px;
    background: var(--farbe-primaer-50, rgba(59, 130, 246, 0.05));
    border-left-color: var(--farbe-primaer, #1976d2);
    border-radius: var(--radius-sm, 4px);
}

/* --------------------------------------------------------------------------
   Formular-Elemente (Modals)
   -------------------------------------------------------------------------- */
.formular__gruppe {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
    margin-bottom: var(--abstand-lg);
}

.formular__label {
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    color: var(--farbe-text);
}

.formular__input {
    width: 100%;
    padding: var(--abstand-sm) var(--abstand-md);
    font-size: var(--font-groesse-basis);
    line-height: 1.5;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    transition: border-color var(--uebergang-schnell), box-shadow var(--uebergang-schnell);
}

.formular__input:focus {
    outline: none;
    border-color: var(--farbe-rand-fokus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.formular__input::placeholder {
    color: var(--farbe-text-deaktiviert);
}

.modal__aktionen {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--abstand-sm);
    padding-top: var(--abstand-lg);
    border-top: 1px solid var(--farbe-rand);
}

/* --------------------------------------------------------------------------
   Filterbaum: Ordner-Sektion
   -------------------------------------------------------------------------- */
.filterbaum__ordner-sektion {
    padding: var(--abstand-xs) 0;
}

.filterbaum__nicht-abgelegt {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: 6px var(--abstand-lg) 6px calc(var(--abstand-lg) + 14px);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    text-decoration: none;
    transition: background var(--uebergang-schnell);
    cursor: pointer;
    font-style: italic;
}

.filterbaum__nicht-abgelegt:hover {
    background: var(--farbe-hintergrund-hover);
    text-decoration: none;
    color: var(--farbe-text);
}

.filterbaum__nicht-abgelegt--aktiv {
    background: var(--farbe-primaer-50);
    color: var(--farbe-primaer-700);
    font-style: normal;
}

/* --------------------------------------------------------------------------
   Kontextmenu-Eintraege
   -------------------------------------------------------------------------- */
.kontextmenu__eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    width: 100%;
    padding: var(--abstand-sm) var(--abstand-lg);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-familie);
    transition: background var(--uebergang-schnell);
    text-decoration: none;
}

.kontextmenu__eintrag:hover {
    background: var(--farbe-hintergrund-hover);
    text-decoration: none;
    color: var(--farbe-text);
}

.kontextmenu__eintrag--gefahr {
    color: var(--farbe-fehler);
}

.kontextmenu__eintrag--gefahr:hover {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
}

.kontextmenu__eintrag-icon {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 0.875rem;
}

.kontextmenu__trenner {
    height: 1px;
    background: var(--farbe-rand);
    margin: var(--abstand-xs) 0;
}

/* --------------------------------------------------------------------------
   Suche-Vorschlaege (Topbar Autocomplete)
   -------------------------------------------------------------------------- */
.suche-vorschlaege {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--abstand-xs);
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten-lg);
    z-index: 60;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.suche-vorschlaege--sichtbar {
    display: block;
}

.suche-vorschlaege__eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-sm) var(--abstand-lg);
    cursor: pointer;
    transition: background var(--uebergang-schnell);
    text-decoration: none;
    color: var(--farbe-text);
}

.suche-vorschlaege__eintrag:hover {
    background: var(--farbe-hintergrund-hover);
    text-decoration: none;
}

.suche-vorschlaege__eintrag-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--farbe-text-sekundaer);
}

.suche-vorschlaege__eintrag-inhalt {
    flex: 1;
    min-width: 0;
}

.suche-vorschlaege__eintrag-titel {
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suche-vorschlaege__eintrag-typ {
    display: inline-block;
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-sekundaer);
}

.suche-vorschlaege__eintrag-auszug {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-sekundaer);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suche-vorschlaege__leer {
    padding: var(--abstand-lg);
    text-align: center;
    color: var(--farbe-text-sekundaer);
    font-size: var(--font-groesse-sm);
}

.suche-vorschlaege__trenner {
    height: 1px;
    background: var(--farbe-rand);
    margin: var(--abstand-xs) 0;
}

.suche-vorschlaege__alle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-sm) var(--abstand-lg);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-primaer-600);
    cursor: pointer;
    transition: background var(--uebergang-schnell);
    border-top: 1px solid var(--farbe-rand);
    text-decoration: none;
}

.suche-vorschlaege__alle:hover {
    background: var(--farbe-primaer-50);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Suchbereich-Dropdown
   -------------------------------------------------------------------------- */
.such-bereich {
    position: relative;
    flex-shrink: 0;
}

.such-bereich__btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    border: none;
    background: transparent;
    color: var(--farbe-text-sekundaer);
    font-size: var(--font-groesse-sm);
    cursor: pointer;
    white-space: nowrap;
    height: 100%;
    border-right: 1px solid var(--farbe-rand);
}

.such-bereich__btn:hover {
    color: var(--farbe-text);
    background: var(--farbe-hintergrund-hover);
}

.such-bereich__btn--gross {
    padding: 0 0.75rem;
    font-size: var(--font-groesse-md);
    height: 48px;
    border: 2px solid var(--farbe-rand);
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    background: var(--farbe-hintergrund-karte);
}

.such-bereich__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    min-width: 160px;
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    box-shadow: var(--schatten-lg);
    padding: 0.25rem 0;
    margin-top: 2px;
}

.such-bereich__menu--sichtbar {
    display: block;
}

.such-bereich__option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--farbe-text);
    font-size: var(--font-groesse-sm);
    text-align: left;
    cursor: pointer;
}

.such-bereich__option:hover {
    background: var(--farbe-hintergrund-hover);
}

.such-bereich__option--aktiv {
    color: var(--farbe-primaer-600);
    font-weight: 600;
}

/* Topbar-Variante */
.such-bereich--topbar {
    display: flex;
    align-items: center;
}

.such-bereich--topbar .such-bereich__btn {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    height: 32px;
    padding: 0 0.5rem;
}

/* Formular-Variante */
.such-bereich--formular {
    display: flex;
    align-items: stretch;
}

/* Topbar: Wrapper fuer Icon + Input + Kbd */
.topbar__suche-feld {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

/* Topbar: Input verliert linken Radius wenn Bereich-Dropdown davor steht */
.topbar__suche .topbar__suche-input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Suchseite: Input verliert linken Radius wenn Bereich-Dropdown davor steht */
.such-bereich--formular + .suche-formular__feld .suche-formular__input {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: none;
}

/* Bereich-Chip in der Ergebnisleiste */
.ergebnisleiste__chip--bereich {
    background: var(--farbe-primaer-50);
    color: var(--farbe-primaer-600);
}

/* --------------------------------------------------------------------------
   Suchseite (Volltextsuche)
   -------------------------------------------------------------------------- */
.suche-layout {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--abstand-xl) 0;
}

.suche-kopf {
    margin-bottom: var(--abstand-xl);
}

.suche-kopf__titel {
    margin-bottom: var(--abstand-lg);
    font-size: var(--font-groesse-xl);
    font-weight: 700;
}

.suche-formular {
    position: relative;
    display: flex;
    gap: var(--abstand-md);
    align-items: stretch;
}

.suche-formular__feld {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.suche-formular__icon {
    position: absolute;
    left: var(--abstand-md);
    font-size: 1.125rem;
    color: var(--farbe-text-sekundaer);
    pointer-events: none;
    z-index: 1;
}

.suche-formular__input {
    width: 100%;
    height: 48px;
    padding: 0 2.5rem 0 3rem;
    border: 2px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    font-size: var(--font-groesse-lg);
    font-family: var(--font-familie);
    color: var(--farbe-text);
    background: var(--farbe-hintergrund-karte);
    transition: all var(--uebergang-schnell);
}

.suche-formular__input:focus {
    outline: none;
    border-color: var(--farbe-rand-fokus);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.suche-formular__loeschen {
    position: absolute;
    right: var(--abstand-md);
    font-size: 1.25rem;
    color: var(--farbe-text-sekundaer);
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
}

.suche-formular__loeschen:hover {
    color: var(--farbe-text);
}

.suche-ergebnis-info {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-md) 0;
    margin-bottom: var(--abstand-md);
    border-bottom: 1px solid var(--farbe-rand);
}

.suche {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--abstand-xl) 0;
}

.suche__eingabe {
    margin-bottom: var(--abstand-xl);
}

.suche__eingabe-feld {
    width: 100%;
    height: 48px;
    padding: 0 var(--abstand-lg) 0 3rem;
    border: 2px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    font-size: var(--font-groesse-lg);
    font-family: var(--font-familie);
    color: var(--farbe-text);
    background: var(--farbe-hintergrund-karte);
    transition: all var(--uebergang-schnell);
}

.suche__eingabe-feld:focus {
    outline: none;
    border-color: var(--farbe-rand-fokus);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.suche__ergebnisse {
    display: flex;
    flex-direction: column;
}

.suche__treffer {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-md);
    padding: var(--abstand-lg);
    border-bottom: 1px solid var(--farbe-rand);
    transition: background var(--uebergang-schnell);
}

.suche__treffer:hover {
    background: var(--farbe-hintergrund-hover);
}

.suche__treffer-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--farbe-hintergrund);
    font-size: 1rem;
}

.suche__treffer-inhalt {
    flex: 1;
    min-width: 0;
}

.suche__treffer-typ {
    display: inline-block;
    padding: 1px var(--abstand-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-groesse-xs);
    font-weight: 500;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-sekundaer);
    margin-bottom: var(--abstand-xs);
}

.suche__treffer-titel {
    font-size: var(--font-groesse-md);
    font-weight: 600;
    color: var(--farbe-text);
    text-decoration: none;
    display: block;
    margin-bottom: var(--abstand-xs);
}

.suche__treffer-titel:hover {
    color: var(--farbe-primaer-600);
    text-decoration: underline;
}

.suche__treffer-auszug {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.suche__treffer-auszug mark {
    background: var(--farbe-warnung-bg);
    color: var(--farbe-text);
    padding: 0 2px;
    border-radius: 2px;
}

.suche__treffer-meta {
    display: flex;
    gap: var(--abstand-sm);
    margin-top: var(--abstand-xs);
}

.suche__paginierung {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-xl) 0;
}

/* --------------------------------------------------------------------------
   Tabellen-Sortierung
   -------------------------------------------------------------------------- */
.tabelle th[data-sortierung] {
    cursor: pointer;
    user-select: none;
    transition: color var(--uebergang-schnell);
}

.tabelle th[data-sortierung]:hover {
    color: var(--farbe-primaer-600);
}

.tabelle__sortierung-icon {
    display: inline-block;
    margin-left: var(--abstand-xs);
    font-size: 0.625rem;
    color: var(--farbe-text-deaktiviert);
}

.tabelle__sortierung-icon--aktiv {
    color: var(--farbe-primaer-600);
}

/* --------------------------------------------------------------------------
   Kontakt-Uebersicht: Zwei-Spalten Layout (Phase 7)
   -------------------------------------------------------------------------- */
.kontakt-uebersicht {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--abstand-xl);
    max-width: 1200px;
}

.kontakt-uebersicht__stammdaten {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-lg);
}

.kontakt-uebersicht__elemente {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-lg);
}

.kontakt-info-liste {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-sm);
}

.kontakt-info-eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-sm) 0;
}

.kontakt-info-eintrag__icon {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.kontakt-info-eintrag__label {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    min-width: 80px;
}

.kontakt-info-eintrag__wert {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text);
}

.kontakt-typ-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    padding: 2px var(--abstand-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-groesse-xs);
    font-weight: 500;
}

.kontakt-typ-badge--person {
    background: var(--farbe-primaer-50);
    color: var(--farbe-primaer-700);
}

.kontakt-typ-badge--firma {
    background: var(--farbe-warnung-bg);
    color: var(--farbe-warnung);
}

/* Kontakt-Formular: Zwei-Spalten Layout */
.kontakt-formular {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-xl);
}

.kontakt-formular__links,
.kontakt-formular__rechts {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-lg);
}

.kontakt-formular__aktionen {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--abstand-md);
    justify-content: flex-end;
    margin-bottom: var(--abstand-xl);
}

/* Formular: Kommunikation/Adressen Zeilen */
.kontakt-zeile {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: var(--abstand-sm);
    align-items: start;
    margin-bottom: var(--abstand-sm);
}

.kontakt-adresse-zeile {
    display: grid;
    grid-template-columns: 150px 1fr 100px 1fr 60px;
    gap: var(--abstand-sm);
    align-items: start;
    margin-bottom: var(--abstand-sm);
}

/* Responsive: Kontakt-Übersicht + Formular */
@media (max-width: 768px) {
    .kontakt-uebersicht,
    .kontakt-formular {
        grid-template-columns: 1fr;
    }

    .kontakt-formular__aktionen {
        grid-column: 1;
    }

    .kontakt-zeile,
    .kontakt-adresse-zeile {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Responsive: Phase 6 Teil 3
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .suche-layout {
        padding: var(--abstand-lg);
    }

    .suche {
        padding: var(--abstand-lg);
    }
}

@media (max-width: 768px) {
    .suche-formular {
        flex-direction: column;
    }

    .suche-formular__input {
        height: 40px;
        font-size: var(--font-groesse-basis);
    }

    .suche__eingabe-feld {
        height: 40px;
        font-size: var(--font-groesse-basis);
    }

    .suche__treffer {
        flex-direction: column;
        gap: var(--abstand-sm);
    }

    .massenaktionen {
        flex-wrap: wrap;
    }

    .ordnerbaum__kinder {
        padding-left: var(--abstand-md);
    }
}

/* --------------------------------------------------------------------------
   Kalender: Monats-, Wochen- und Tagesansicht (Phase 8)
   -------------------------------------------------------------------------- */

/* Kalender-Statistik */
.kalender-statistik { display: flex; gap: var(--abstand-lg); margin-bottom: var(--abstand-lg); flex-wrap: wrap; }
.kalender-statistik__karte { display: flex; align-items: center; gap: var(--abstand-sm); padding: var(--abstand-sm) var(--abstand-md); background: var(--farbe-neutral-50, #f8fafc); border: 1px solid var(--farbe-rand); border-radius: var(--radius-md); }
.kalender-statistik__zahl { font-size: var(--font-groesse-xl); font-weight: 700; }
.kalender-statistik__label { font-size: var(--font-groesse-sm); color: var(--farbe-text-sekundaer); }
.kalender-statistik__karte--warnung { border-color: var(--farbe-warnung-rand); background: var(--farbe-warnung-bg); }

/* Kalender-Navigation */
.kalender-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--abstand-lg); }
.kalender-nav__titel { font-size: var(--font-groesse-xl); font-weight: 600; }
.kalender-nav__steuerung { display: flex; gap: var(--abstand-sm); align-items: center; }

/* Monats-Grid */
.kalender-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--farbe-rand); border-radius: var(--radius-md); overflow: hidden; }
.kalender-grid__header { padding: var(--abstand-sm); text-align: center; font-weight: 600; font-size: var(--font-groesse-sm); background: var(--farbe-hintergrund); border-bottom: 1px solid var(--farbe-rand); color: var(--farbe-text-sekundaer); }
.kalender-grid__tag { min-height: 100px; padding: var(--abstand-xs) var(--abstand-sm); border-bottom: 1px solid var(--farbe-rand); border-right: 1px solid var(--farbe-rand); cursor: pointer; transition: background-color 0.15s; }
.kalender-grid__tag:hover { background: var(--farbe-hintergrund-hover); }
.kalender-grid__tag:nth-child(7n) { border-right: none; }
.kalender-grid__tag--ausserhalb { opacity: 0.4; }
.kalender-grid__tag--heute { background: var(--farbe-primaer-50); border-color: var(--farbe-primaer-300); }
.kalender-grid__tag--wochenende { background: var(--farbe-hintergrund); }
.kalender-grid__tag-nummer { font-weight: 600; font-size: var(--font-groesse-sm); margin-bottom: var(--abstand-xs); }
.kalender-grid__tag--heute .kalender-grid__tag-nummer { color: var(--farbe-primaer-600); }

/* Kalender-Einträge */
.kalender-eintrag { display: flex; align-items: center; gap: 4px; padding: 2px 4px; margin-bottom: 2px; border-radius: var(--radius-sm); font-size: 11px; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kalender-eintrag--termin { background: var(--farbe-info-bg); color: var(--farbe-info); border-left: 2px solid var(--farbe-info); }
.kalender-eintrag--faellig { background: var(--farbe-warnung-bg); color: var(--farbe-warnung); border-left: 2px solid var(--farbe-warnung); }
.kalender-eintrag--ueberfaellig { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); border-left: 2px solid var(--farbe-fehler); }
.kalender-eintrag--freigabe { background: var(--farbe-erfolg-bg); color: var(--farbe-erfolg); border-left: 2px solid var(--farbe-erfolg); }
.kalender-eintrag__mehr { font-size: 11px; color: var(--farbe-text-sekundaer); padding: 2px 4px; }

/* Wochen-Ansicht */
.kalender-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--abstand-sm); }
.kalender-woche__tag { background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand); border-radius: var(--radius-md); min-height: 200px; }
.kalender-woche__tag--heute { border-color: var(--farbe-primaer-300); background: var(--farbe-primaer-50); }
.kalender-woche__tag-header { padding: var(--abstand-sm); font-weight: 600; font-size: var(--font-groesse-sm); border-bottom: 1px solid var(--farbe-rand); }
.kalender-woche__tag-inhalt { padding: var(--abstand-sm); display: flex; flex-direction: column; gap: var(--abstand-xs); }

/* Tages-Ansicht */
.kalender-tag-sektion { margin-bottom: var(--abstand-xl); }
.kalender-tag-sektion__titel { display: flex; align-items: center; gap: var(--abstand-sm); font-size: var(--font-groesse-lg); font-weight: 600; margin-bottom: var(--abstand-md); }
.kalender-tag-eintrag { display: flex; align-items: center; gap: var(--abstand-md); padding: var(--abstand-md); border: 1px solid var(--farbe-rand); border-radius: var(--radius-md); margin-bottom: var(--abstand-sm); transition: border-color 0.15s; background: var(--farbe-hintergrund-karte); }
.kalender-tag-eintrag:hover { border-color: var(--farbe-primaer-300); }
.kalender-tag-eintrag__icon { font-size: var(--font-groesse-xl); flex-shrink: 0; }
.kalender-tag-eintrag__inhalt { flex: 1; min-width: 0; }
.kalender-tag-eintrag__titel { font-weight: 500; }
.kalender-tag-eintrag__vg { font-size: var(--font-groesse-sm); color: var(--farbe-text-sekundaer); font-family: monospace; }
.kalender-tag-eintrag__details { font-size: var(--font-groesse-sm); color: var(--farbe-text-sekundaer); margin-top: var(--abstand-xs); }
.kalender-tag-eintrag--ueberfaellig { border-color: var(--farbe-fehler-rand); background: var(--farbe-fehler-bg); }

/* Fristen-Übersicht */
.fristen-gruppe { margin-bottom: var(--abstand-xl); }
.fristen-gruppe__titel { font-size: var(--font-groesse-lg); font-weight: 600; margin-bottom: var(--abstand-md); display: flex; align-items: center; gap: var(--abstand-sm); }
.fristen-gruppe__titel--warnung { color: var(--farbe-fehler); }

/* Kalender Responsive */
@media (max-width: 768px) {
    .kalender-grid { grid-template-columns: 1fr; }
    .kalender-grid__header:not(:first-child) { display: none; }
    .kalender-grid__tag { min-height: auto; display: flex; gap: var(--abstand-sm); align-items: flex-start; padding: var(--abstand-sm); }
    .kalender-woche { grid-template-columns: 1fr; }
    .kalender-statistik { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Externe Quellen
   -------------------------------------------------------------------------- */
.quelle-karte {
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    padding: var(--abstand-lg);
    margin-bottom: var(--abstand-md);
}

.quelle-karte__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    margin-bottom: var(--abstand-sm);
}

.quelle-karte__bezeichnung {
    font-weight: 600;
    font-size: 1.1rem;
}

.quelle-karte__info {
    color: var(--farbe-text-sekundaer);
    font-size: var(--font-groesse-sm);
    margin-bottom: var(--abstand-xs);
}

.quelle-karte__info code {
    background: var(--farbe-hintergrund);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
    font-size: var(--font-groesse-xs);
}

.quelle-karte__aktionen {
    display: flex;
    gap: var(--abstand-xs);
    flex-wrap: wrap;
    margin-top: var(--abstand-sm);
}

.quelle-karte--deaktiviert {
    opacity: 0.6;
}

.quelle-karte__fehler {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
    padding: var(--abstand-xs) var(--abstand-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-groesse-sm);
    margin-top: var(--abstand-xs);
}

/* Browse-UI */
.browse-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: var(--abstand-sm) 0;
    font-size: var(--font-groesse-sm);
}

.browse-breadcrumb__separator {
    color: var(--farbe-text-deaktiviert);
}

/* Regel-Karte */
.regel-karte {
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-md);
    padding: var(--abstand-md);
    margin-bottom: var(--abstand-sm);
}

.regel-karte__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

.regel-karte__prio {
    background: var(--farbe-primaer-50);
    color: var(--farbe-primaer-600);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-groesse-xs);
    font-weight: 600;
}

.regel-karte__info {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    margin-top: var(--abstand-xs);
}

.regel-karte__info code {
    background: var(--farbe-hintergrund);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
    font-size: var(--font-groesse-xs);
}

/* Externe Quellen Responsive */
@media (max-width: 768px) {
    .quelle-karte__aktionen { flex-direction: column; }
    .quelle-karte__aktionen .btn { width: 100%; justify-content: center; }
    .browse-breadcrumb { flex-wrap: wrap; }
}

/* ==========================================================================
   Phase 10: Mobile-Optimierung
   ========================================================================== */

/* --------------------------------------------------------------------------
   Globale Helfer: Body-Scroll-Sperre
   -------------------------------------------------------------------------- */
.kein-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Touch-Targets: Mindestens 44px x 44px (WCAG 2.5.5 / Apple HIG)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .btn,
    .sidebar__link,
    .dropdown__item,
    .filter-link,
    a.sidebar__link,
    .filterbaum__eintrag,
    .kontextmenu__eintrag,
    .tabs__tab,
    .tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Sidebar-Links: quadratisch 44x44 */
    .sidebar__link {
        width: 44px;
        height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    /* Dropdown-Items: volle Breite, 44px hoch */
    .dropdown__item {
        min-height: 44px;
        padding: var(--abstand-sm) var(--abstand-lg);
    }

    /* Filterbaum-Einträge: Touch-freundlich */
    .filterbaum__eintrag {
        min-height: 44px;
        padding-top: var(--abstand-sm);
        padding-bottom: var(--abstand-sm);
    }

    .filterbaum__sektion-kopf {
        min-height: 44px;
    }

    /* Tabellen-Zeilen: Mindesthöhe */
    .tabelle td {
        padding: var(--abstand-md) var(--abstand-lg);
        min-height: 44px;
    }

    /* Formular-Eingaben: größer für Touch */
    .formular-input,
    .formular-select,
    .formular-textarea {
        min-height: 44px;
        font-size: 16px; /* Verhindert iOS Zoom bei Focus */
    }

    /* Checkbox/Radio größer */
    .formular-checkbox input[type="checkbox"],
    .formular-checkbox input[type="radio"] {
        width: 20px;
        height: 20px;
    }
}

/* --------------------------------------------------------------------------
   Tabellen -> Karten-Layout auf Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .tabelle--mobil-karten {
        display: block;
    }

    .tabelle--mobil-karten thead {
        display: none;
    }

    .tabelle--mobil-karten tbody {
        display: flex;
        flex-direction: column;
        gap: var(--abstand-sm);
    }

    .tabelle--mobil-karten tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--abstand-xs) var(--abstand-sm);
        padding: var(--abstand-md);
        background: var(--farbe-hintergrund-karte);
        border: 1px solid var(--farbe-rand);
        border-radius: var(--radius-md);
    }

    .tabelle--mobil-karten td {
        border: none;
        padding: 0;
    }

    .tabelle--mobil-karten td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--font-groesse-xs);
        color: var(--farbe-text-deaktiviert);
        display: block;
        margin-bottom: 2px;
    }

    /* Zeile als volle Breite wenn data-label gesetzt */
    .tabelle--mobil-karten td[data-label] {
        flex-basis: calc(50% - var(--abstand-sm));
    }

    .tabelle--mobil-karten td[data-label]:first-child {
        flex-basis: 100%;
    }

    /* Aktionen-Spalte: volle Breite, zentriert */
    .tabelle--mobil-karten td:last-child {
        flex-basis: 100%;
        display: flex;
        justify-content: flex-end;
        gap: var(--abstand-sm);
        padding-top: var(--abstand-sm);
        border-top: 1px solid var(--farbe-rand);
        margin-top: var(--abstand-xs);
    }
}

/* --------------------------------------------------------------------------
   Filterbaum als Drawer (Mobile + Tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .filterbaum {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 50;
        background: var(--farbe-hintergrund-karte);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        /* Überschreibt das display:none aus Phase 2 */
        display: block;
        border-right: 1px solid var(--farbe-rand);
    }

    .filterbaum--offen {
        transform: translateX(0);
    }

    .filterbaum-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 49;
    }

    .filterbaum-overlay--sichtbar {
        display: block;
    }

    /* Filterbaum-Trigger sichtbar */
    .filterbaum-trigger {
        display: flex;
        align-items: center;
        padding: var(--abstand-sm) var(--abstand-xl);
        border-bottom: 1px solid var(--farbe-rand);
        background: var(--farbe-hintergrund-karte);
    }

    /* Element-Layout: Nur 1 Spalte */
    .element-layout {
        grid-template-columns: 1fr;
    }
}

/* Desktop: Filterbaum-Trigger verstecken, Filterbaum sichtbar */
@media (min-width: 1201px) {
    .filterbaum-trigger {
        display: none;
    }

    .filterbaum-overlay {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Freigabe-Banner auf Mobile: Fixed Footer
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .freigabe-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        padding: var(--abstand-md);
        background: var(--farbe-hintergrund-karte);
        border-top: 2px solid var(--farbe-warnung);
        border-radius: 0;
        margin-bottom: 0;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }

    .freigabe-banner--freigegeben {
        border-top-color: var(--farbe-erfolg);
    }

    .freigabe-banner--abgelehnt {
        border-top-color: var(--farbe-fehler);
    }

    .freigabe-banner__aktionen {
        width: 100%;
        flex-wrap: wrap;
    }

    .freigabe-banner__aktionen .btn {
        flex: 1;
        justify-content: center;
    }

    /* Inhalt braucht Platz für Fixed Footer (ca. 120px) */
    .inhalt:has(.freigabe-banner) {
        padding-bottom: 140px;
    }

    /* Eskalation-Banner ebenfalls kompakter */
    .eskalation-banner {
        padding: var(--abstand-sm) var(--abstand-md);
    }

    .eskalation-banner__aktionen {
        width: 100%;
    }

    .eskalation-banner__aktionen .btn {
        flex: 1;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Modal Fullscreen auf Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .modal {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    .modal--breit,
    .modal--vollbild,
    .modal--email {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
    }

    .modal-hintergrund {
        padding: 0;
        align-items: stretch;
    }

    .ansichtsmodal {
        max-width: 100%;
        width: 100%;
    }

    /* email-modal__kopf nicht mehr verwendet */

    /* Modal-Kopf: Kompakter auf Mobile */
    .modal__kopf {
        padding: var(--abstand-md);
    }

    .modal__koerper {
        padding: var(--abstand-md);
    }

    .modal__fuss {
        padding: var(--abstand-md);
    }

    .modal__fuss .btn {
        flex: 1;
        justify-content: center;
    }

    /* Ribbon: Kompakt auf Mobile */
    .ribbon__tabs {
        display: none;
    }

    .ribbon__inhalt {
        min-height: 0;
        padding: 2px 4px 0;
    }

    .ribbon__btn--gross {
        padding: 3px 5px 1px;
        min-width: 40px;
    }

    .ribbon__btn--gross .ribbon__text {
        font-size: 9px;
    }

    .ribbon__btn--klein {
        padding: 2px 6px 2px 4px;
        gap: 4px;
    }

    .ribbon__btn--klein .ribbon__text {
        font-size: 10px;
    }

    .ribbon__icon--lg {
        width: 22px;
        height: 22px;
    }

    .ribbon__label {
        display: none;
    }

    .ribbon__sep {
        margin: 2px 3px;
    }
}

/* --------------------------------------------------------------------------
   Sidebar-Overlay: Verbesserungen Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sidebar-overlay {
        z-index: 39;
    }

    .sidebar {
        z-index: 40;
    }

    /* Hamburger Touch-freundlich */
    .hamburger {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Topbar: Mobile Suche ueber Icon erreichbar
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Die Suche ist bereits per display:none versteckt (Phase 1).
       Hier ergaenzen: Platz fuer mobile Suche-Zeile */
    .topbar__suche--mobil {
        display: flex;
        width: 100%;
        padding: var(--abstand-sm) var(--abstand-md);
        border-bottom: 1px solid var(--farbe-rand);
        background: var(--farbe-hintergrund-karte);
    }

    .topbar__suche--mobil .topbar__suche-input {
        width: 100%;
    }

    /* Topbar kompakter */
    .topbar {
        height: auto;
        min-height: var(--topbar-hoehe);
        flex-wrap: wrap;
    }

    /* Mandant-Switcher kompakter */
    .topbar__mandant {
        font-size: var(--font-groesse-xs);
        padding: var(--abstand-xs) var(--abstand-sm);
    }

    /* Benutzer-Name auf Mobile verstecken, nur Initialen zeigen */
    .topbar__rechts .btn--ghost {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --------------------------------------------------------------------------
   Kompaktere Abstaende auf Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .inhalt {
        padding: var(--abstand-sm);
    }

    .seiten-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--abstand-sm);
    }

    .seiten-header__aktionen,
    .seiten-header__rechts {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--abstand-xs);
    }

    .seiten-header__aktionen .btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    .seiten-header__titel {
        font-size: var(--font-groesse-xl);
    }

    /* Karten kompakter */
    .karte__kopf {
        padding: var(--abstand-md);
    }

    .karte__koerper {
        padding: var(--abstand-md);
    }

    .karte__fuss {
        padding: var(--abstand-md);
        flex-wrap: wrap;
    }

    /* Tabs horizontal scrollbar */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Tablet-Optimierungen (769px - 1200px)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1200px) {
    /* Detail-Panel als Overlay von rechts (für zukünftige Detailansicht) */
    .detail-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 400px;
        z-index: 30;
        background: var(--farbe-hintergrund-karte);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        border-left: 1px solid var(--farbe-rand);
    }

    .detail-panel--sichtbar {
        transform: translateX(0);
    }

    /* Elementliste: etwas kompaktere Darstellung */
    .elementliste__eintrag td {
        padding: var(--abstand-sm) var(--abstand-md);
    }

    /* E-Mail-Verfassen: Kompakter auf Tablet */
    .ev__betreff-input {
        font-size: 16px;
    }

    /* Kontaktformular kompakter */
    .kontakt-zeile {
        grid-template-columns: 120px 1fr auto;
    }

    .kontakt-adresse-zeile {
        grid-template-columns: 1fr 1fr;
        gap: var(--abstand-sm);
    }
}

/* --------------------------------------------------------------------------
   Workflow-Designer: Mobile-Hinweis
   -------------------------------------------------------------------------- */
.mobile-hinweis {
    display: none;
    padding: var(--abstand-2xl);
    text-align: center;
    background: var(--farbe-warnung-bg);
    border: 1px solid var(--farbe-warnung-rand);
    border-radius: var(--radius-lg);
    margin: var(--abstand-md);
    color: var(--farbe-text);
    font-size: var(--font-groesse-sm);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .mobile-hinweis {
        display: block;
    }

    .workflow-designer {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Swipe-Aktionen (Touch-Geraete)
   -------------------------------------------------------------------------- */
[data-swipe-target="eintrag"] {
    position: relative;
    overflow: hidden;
}

.swipe-inhalt {
    position: relative;
    z-index: 1;
    background: var(--farbe-hintergrund-karte);
    will-change: transform;
}

.swipe-aktionen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-xs);
    z-index: 0;
}

.swipe-aktion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background var(--uebergang-schnell);
}

.swipe-aktion--mehr {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-sekundaer);
    border: 1px solid var(--farbe-rand);
}

/* Swipe nur auf Touch-Geräten sichtbar */
@media (hover: hover) and (pointer: fine) {
    .swipe-aktionen {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Flash-Messages: Mobile-Optimierung
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .flash-container {
        top: auto;
        bottom: var(--abstand-md);
        left: var(--abstand-md);
        right: var(--abstand-md);
        max-width: none;
    }

    .flash {
        font-size: var(--font-groesse-sm);
    }
}

/* --------------------------------------------------------------------------
   Kalender: Kompakter auf Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .kalender-nav {
        flex-direction: column;
        gap: var(--abstand-sm);
        align-items: flex-start;
    }

    .kalender-nav__steuerung {
        width: 100%;
        justify-content: space-between;
    }

    .kalender-tag-eintrag {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--abstand-sm);
    }
}

/* --------------------------------------------------------------------------
   Kontakte: Mobile-Verbesserungen
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .kontakt-info-eintrag {
        flex-wrap: wrap;
    }

    .kontakt-info-eintrag__label {
        min-width: auto;
        flex-basis: 100%;
    }
}

/* --------------------------------------------------------------------------
   Ergebnisleiste: Mobile-Verbesserungen
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ergebnisleiste {
        padding: var(--abstand-sm) var(--abstand-md);
    }

    .ergebnisleiste__chip {
        font-size: 0.625rem;
    }

    .ergebnisleiste__links {
        flex-wrap: wrap;
        gap: var(--abstand-xs);
    }

    /* Massenaktionen-Leiste kompakter */
    .massenaktionen {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--abstand-sm);
    }

    .massenaktionen__aktionen {
        width: 100%;
        flex-wrap: wrap;
    }

    .massenaktionen__aktionen .btn {
        flex: 1;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Paginierung: Mobile Touch-freundlich
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .elementliste__paginierung {
        flex-wrap: wrap;
        gap: var(--abstand-sm);
    }

    .elementliste__paginierung .btn {
        min-width: 44px;
        min-height: 44px;
    }

    .suche__paginierung {
        flex-wrap: wrap;
    }

    .suche__paginierung .btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   SLA & Eskalation: Mobile-Optimierung
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .eskalation-regel__kopf {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--abstand-sm);
    }

    .geschaeftszeiten-tabelle {
        display: block;
    }

    .geschaeftszeiten-tabelle thead {
        display: none;
    }

    .geschaeftszeiten-tabelle tbody {
        display: flex;
        flex-direction: column;
        gap: var(--abstand-sm);
    }

    .geschaeftszeiten-tabelle tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--abstand-sm);
        padding: var(--abstand-md);
        border: 1px solid var(--farbe-rand);
        border-radius: var(--radius-md);
        background: var(--farbe-hintergrund-karte);
    }

    .geschaeftszeiten-tabelle td,
    .geschaeftszeiten-tabelle th {
        border: none;
        padding: 0;
    }

    .geschaeftszeiten__wochentag {
        flex-basis: 100%;
        font-weight: 600;
    }

    .geschaeftszeiten__zeit-input {
        width: auto;
        flex: 1;
    }

    /* Feiertage kompakter */
    .feiertag-eintrag {
        flex-wrap: wrap;
    }

    .feiertag-eintrag__datum {
        min-width: auto;
    }
}

/* --------------------------------------------------------------------------
   Safe Area Insets (iOS Notch / Dynamic Island)
   -------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
    .topbar {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-hoehe) + env(safe-area-inset-top));
    }

    .sidebar {
        top: calc(var(--header-hoehe) + env(safe-area-inset-top));
        height: calc(100vh - var(--header-hoehe) - env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
    }

    @media (max-width: 768px) {
        .freigabe-banner {
            padding-bottom: calc(var(--abstand-md) + env(safe-area-inset-bottom));
        }

        .flash-container {
            bottom: calc(var(--abstand-md) + env(safe-area-inset-bottom));
        }

        .modal {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* --------------------------------------------------------------------------
   Druckstile: Kein Mobile-Spezifisches drucken
   -------------------------------------------------------------------------- */
@media print {
    .hamburger,
    .sidebar-overlay,
    .filterbaum-overlay,
    .filterbaum-trigger,
    .mobile-hinweis,
    .swipe-aktionen {
        display: none !important;
    }

    .sidebar {
        transform: none !important;
    }

    .filterbaum {
        transform: none !important;
        position: static !important;
    }

    .modal {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
    }
}

/* ==========================================================================
   Dashboard & Berichte
   ========================================================================== */

/* Raster-Variante für 6 Karten (3+2+1 oder 3+3) */
.raster--3-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--abstand-lg);
}

/* Statistik-Karten */
.statistik-karte {
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    padding: var(--abstand-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-md);
    position: relative;
    transition: box-shadow var(--uebergang-normal);
}

.statistik-karte:hover {
    box-shadow: var(--schatten-md);
}

.statistik-karte__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.statistik-karte__icon--primaer {
    background: var(--farbe-primaer-50);
    color: var(--farbe-primaer-600);
}

.statistik-karte__icon--erfolg {
    background: var(--farbe-erfolg-bg);
    color: var(--farbe-erfolg);
}

.statistik-karte__icon--warnung {
    background: var(--farbe-warnung-bg);
    color: var(--farbe-warnung);
}

.statistik-karte__icon--fehler {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
}

.statistik-karte__icon--info {
    background: var(--farbe-info-bg);
    color: var(--farbe-info);
}

.statistik-karte__inhalt {
    flex: 1;
    min-width: 0;
}

.statistik-karte__wert {
    font-size: var(--font-groesse-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--farbe-text);
}

.statistik-karte__label {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    margin-top: var(--abstand-xs);
}

.statistik-karte__trend {
    position: absolute;
    top: var(--abstand-md);
    right: var(--abstand-md);
    font-size: var(--font-groesse-xs);
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.statistik-karte__trend--positiv {
    background: var(--farbe-erfolg-bg);
    color: var(--farbe-erfolg);
}

.statistik-karte__trend--negativ {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
}

/* Balkendiagramm (reines CSS) */
.balken-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--abstand-sm);
    height: 200px;
    padding-top: var(--abstand-lg);
}

.balken-chart__spalte {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.balken-chart__wert {
    font-size: var(--font-groesse-xs);
    font-weight: 600;
    color: var(--farbe-text-sekundaer);
    margin-bottom: var(--abstand-xs);
}

.balken-chart__balken-wrapper {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.balken-chart__balken {
    width: 70%;
    max-width: 40px;
    min-height: 4px;
    background: var(--farbe-primaer-500);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height var(--uebergang-langsam);
}

.balken-chart__balken--warnung {
    background: var(--farbe-warnung);
}

.balken-chart__balken--erfolg {
    background: var(--farbe-erfolg);
}

.balken-chart__balken--fehler {
    background: var(--farbe-fehler);
}

.balken-chart__label {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-deaktiviert);
    margin-top: var(--abstand-xs);
    white-space: nowrap;
}

/* Prozent-Balken */
.prozent-balken {
    width: 100%;
    height: 8px;
    background: var(--farbe-hintergrund);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.prozent-balken--gross {
    height: 12px;
    border-radius: var(--radius-md);
}

.prozent-balken--inline {
    display: inline-block;
    width: 80px;
    height: 6px;
    vertical-align: middle;
    margin-right: var(--abstand-xs);
}

.prozent-balken__fueller {
    height: 100%;
    border-radius: inherit;
    transition: width var(--uebergang-langsam);
}

.prozent-balken__fueller--erfolg {
    background: var(--farbe-erfolg);
}

.prozent-balken__fueller--warnung {
    background: var(--farbe-warnung);
}

.prozent-balken__fueller--fehler {
    background: var(--farbe-fehler);
}

.prozent-balken__legende {
    display: flex;
    justify-content: space-between;
}

/* Metrik-Karten (kompakt, für Berichte) */
.metrik-karte {
    text-align: center;
    padding: var(--abstand-md);
}

.metrik-karte__wert {
    font-size: var(--font-groesse-xl);
    font-weight: 700;
    color: var(--farbe-text);
    line-height: 1.2;
}

.metrik-karte__label {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text-sekundaer);
    margin-top: var(--abstand-xs);
}

/* SLA-Quote (große Anzeige) */
.sla-quote__wert {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
}

.sla-quote__label {
    font-size: var(--font-groesse-md);
    color: var(--farbe-text-sekundaer);
    margin-top: var(--abstand-sm);
}

/* Typ-Verteilung (horizontale Balken) */
.typ-verteilung {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-sm);
}

.typ-verteilung__zeile {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

.typ-verteilung__label {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text);
}

.typ-verteilung__icon {
    font-size: 1rem;
}

.typ-verteilung__balken-wrapper {
    flex: 1;
    height: 20px;
    background: var(--farbe-hintergrund);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.typ-verteilung__balken {
    height: 100%;
    background: var(--farbe-primaer-400);
    border-radius: var(--radius-sm);
    min-width: 2px;
    transition: width var(--uebergang-langsam);
}

.typ-verteilung__balken--warnung {
    background: var(--farbe-warnung);
}

.typ-verteilung__balken--erfolg {
    background: var(--farbe-erfolg);
}

.typ-verteilung__balken--fehler {
    background: var(--farbe-fehler);
}

.typ-verteilung__wert {
    width: 90px;
    flex-shrink: 0;
    text-align: right;
    font-size: var(--font-groesse-sm);
    font-weight: 600;
    color: var(--farbe-text-sekundaer);
}

/* Aktivitäten-Liste */
.aktivitaeten-liste {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.aktivitaeten-liste__eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-sm);
    padding: var(--abstand-sm) 0;
    border-bottom: 1px solid var(--farbe-rand);
}

.aktivitaeten-liste__eintrag:last-child {
    border-bottom: none;
}

.aktivitaeten-liste__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--farbe-hintergrund);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.aktivitaeten-liste__inhalt {
    flex: 1;
    min-width: 0;
}

.aktivitaeten-liste__nachricht {
    font-size: var(--font-groesse-sm);
    color: var(--farbe-text);
    line-height: 1.4;
}

.aktivitaeten-liste__meta {
    font-size: var(--font-groesse-xs);
    color: var(--farbe-text-deaktiviert);
    margin-top: 0.125rem;
}

/* Zeitraum-Filter */
.zeitraum-filter {
    display: flex;
    align-items: flex-end;
    gap: var(--abstand-md);
    flex-wrap: wrap;
}

.zeitraum-filter__gruppe {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
}

.zeitraum-filter__label {
    font-size: var(--font-groesse-sm);
    font-weight: 500;
    color: var(--farbe-text-sekundaer);
}

/* Bericht-Tabellen */
.bericht-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-groesse-sm);
}

.bericht-tabelle thead th {
    text-align: left;
    padding: var(--abstand-sm) var(--abstand-md);
    border-bottom: 2px solid var(--farbe-rand);
    font-weight: 600;
    color: var(--farbe-text-sekundaer);
    font-size: var(--font-groesse-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bericht-tabelle tbody td {
    padding: var(--abstand-sm) var(--abstand-md);
    border-bottom: 1px solid var(--farbe-rand);
    color: var(--farbe-text);
}

.bericht-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.bericht-tabelle tbody tr:hover {
    background: var(--farbe-hintergrund-hover);
}

/* Text-Hilfsklassen für Berichte */
.text-erfolg { color: var(--farbe-erfolg) !important; }
.text-warnung { color: var(--farbe-warnung) !important; }
.text-fehler { color: var(--farbe-fehler) !important; }
.text-rechts { text-align: right; }

/* Karte Aktionen (Header-Bereich) */
.karte__aktionen {
    display: flex;
    gap: var(--abstand-sm);
    align-items: center;
}

/* Dashboard & Berichte Responsive */
@media (max-width: 1200px) {
    .raster--3-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .raster--3-2,
    .raster--2,
    .raster--3 {
        grid-template-columns: 1fr;
    }

    .statistik-karte {
        padding: var(--abstand-md);
    }

    .statistik-karte__wert {
        font-size: var(--font-groesse-xl);
    }

    .balken-chart {
        height: 150px;
    }

    .typ-verteilung__label {
        width: 90px;
    }

    .typ-verteilung__wert {
        width: 60px;
    }

    .zeitraum-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .zeitraum-filter .btn {
        width: 100%;
    }

    .bericht-tabelle {
        font-size: var(--font-groesse-xs);
    }

    .bericht-tabelle thead th,
    .bericht-tabelle tbody td {
        padding: var(--abstand-xs) var(--abstand-sm);
    }

    .sla-quote__wert {
        font-size: 2rem;
    }

    .karte__aktionen {
        width: 100%;
    }

    .karte__aktionen .btn {
        flex: 1;
    }
}

/* ==========================================================================
   Systemstatus
   ========================================================================== */

.worker-status {
    display: flex;
    align-items: center;
    gap: var(--abstand-lg);
    flex-wrap: wrap;
    margin-bottom: var(--abstand-lg);
}

.worker-status__indikator {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}

.worker-status__details {
    display: flex;
    gap: var(--abstand-md);
}

.worker-status__aktionen {
    margin-left: auto;
}

.status-punkt {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-punkt--aktiv {
    background: var(--farbe-erfolg, #22c55e);
    box-shadow: 0 0 6px var(--farbe-erfolg, #22c55e);
    animation: pulsieren 2s ease-in-out infinite;
}

.status-punkt--inaktiv {
    background: var(--farbe-text-deaktiviert, #9ca3af);
}

@keyframes pulsieren {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.queue-stats {
    display: flex;
    gap: var(--abstand-md);
}

.queue-stats__karte {
    background: var(--farbe-hintergrund-alt, #f5f5f5);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-sm);
    padding: var(--abstand-md) var(--abstand-lg);
    text-align: center;
    min-width: 120px;
}

.queue-stats__karte--fehler .queue-stats__zahl {
    color: var(--farbe-fehler, #ef4444);
}

.queue-stats__zahl {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.queue-stats__label {
    font-size: 0.85rem;
    color: var(--farbe-text-sekundaer);
    margin-top: var(--abstand-xs);
}

.btn--fehler {
    background: var(--farbe-fehler, #ef4444);
    color: #fff;
    border-color: var(--farbe-fehler, #ef4444);
}

.btn--fehler:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.btn--fehler-text {
    color: var(--farbe-fehler, #ef4444);
}

/* ==========================================================================
   Systemstatus — Systeminfo-Karten
   ========================================================================== */

.metriken-zeile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--abstand-lg);
    margin-bottom: var(--abstand-lg);
}

.info-gitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-sm) var(--abstand-lg);
}

.info-gitter__schluessel {
    color: var(--farbe-text-sekundaer);
    font-size: 0.85rem;
}

.info-gitter__wert {
    font-weight: 600;
    font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
    font-size: 0.85rem;
    text-align: right;
}

/* Fortschrittsbalken */
.fortschritt {
    width: 100%;
    height: 8px;
    background: var(--farbe-hintergrund-alt, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

.fortschritt--gross {
    height: 12px;
}

.fortschritt__balken {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 0;
}

.fortschritt__balken--erfolg {
    background: var(--farbe-erfolg, #22c55e);
}

.fortschritt__balken--warnung {
    background: var(--farbe-warnung, #f59e0b);
}

.fortschritt__balken--fehler {
    background: var(--farbe-fehler, #ef4444);
}

.fortschritt__balken--info {
    background: var(--farbe-primaer, #3574a5);
}

/* Metrik-Wert mit Label */
.metrik-wert {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--abstand-xs);
}

.metrik-wert__label {
    font-size: 0.85rem;
    color: var(--farbe-text-sekundaer);
}

.metrik-wert__zahl {
    font-weight: 700;
    font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
    font-size: 0.95rem;
}

/* Festplatten-Eintrag */
.festplatte-eintrag {
    margin-bottom: var(--abstand-md);
}

.festplatte-eintrag:last-child {
    margin-bottom: 0;
}

.festplatte-eintrag__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--abstand-xs);
}

.festplatte-eintrag__pfad {
    font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace);
    font-size: 0.85rem;
    font-weight: 600;
}

.festplatte-eintrag__groesse {
    font-size: 0.8rem;
    color: var(--farbe-text-sekundaer);
}

/* Badge-Liste für Extensions etc. */
.badge-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-xs);
}

.badge-liste .badge {
    font-size: 0.7rem;
    padding: 2px 6px;
}

/* Sektion-Trenner */
.systeminfo-sektion {
    margin-bottom: var(--abstand-lg);
}

.systeminfo-sektion:last-child {
    margin-bottom: 0;
}

/* Fehler-Hinweis in Karten */
.systeminfo-fehler {
    color: var(--farbe-text-sekundaer);
    font-style: italic;
    padding: var(--abstand-md);
    text-align: center;
}

/* Info-Karten 2er Grid */
.info-karten-zeile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--abstand-lg);
    margin-bottom: var(--abstand-lg);
}

@media (max-width: 768px) {
    .metriken-zeile,
    .info-karten-zeile {
        grid-template-columns: 1fr;
    }
}

.btn--fehler-text:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   Systemgesundheits-Banner
   ========================================================================== */
.system-banner {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid;
}

.system-banner--warnung {
    background: #fef3cd;
    color: #856404;
    border-color: #ffc107;
}

.system-banner__inhalt {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1400px;
}

.system-banner__icon {
    flex-shrink: 0;
    color: #d97706;
}

.system-banner__text {
    flex: 1;
}

.system-banner__link {
    flex-shrink: 0;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.system-banner__link:hover {
    color: #533608;
}

/* ==========================================================================
   Zustellstatus-Banner (ausgehende E-Mails)
   ========================================================================== */
.zustell-banner {
    margin: var(--abstand-md) var(--abstand-lg);
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 4px solid;
    font-size: 13px;
}

.zustell-banner__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.zustell-banner__kopf strong {
    font-weight: 600;
}

.zustell-banner__zeit {
    font-size: 12px;
    opacity: 0.75;
}

.zustell-banner__grund {
    margin-top: 6px;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    word-break: break-word;
    white-space: pre-wrap;
}

.zustell-banner__hinweis {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.85;
}

.zustell-banner--fehler {
    background: #fee2e2;
    color: #7f1d1d;
    border-left-color: #dc2626;
}

.zustell-banner--warnung {
    background: #fef3cd;
    color: #854d0e;
    border-left-color: #eab308;
}

.zustell-banner--info {
    background: #dbeafe;
    color: #1e3a8a;
    border-left-color: #3b82f6;
}

.zustell-banner--erfolg {
    background: #dcfce7;
    color: #14532d;
    border-left-color: #22c55e;
}

/* ==============================
   Dialog (HTML <dialog>)
   ============================== */
dialog.dialog {
    border: none;
    border-radius: var(--radius-lg, 12px);
    padding: 0;
    max-width: 480px;
    width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: var(--farbe-hintergrund, #fff);
}

dialog.dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.dialog__inhalt {
    display: flex;
    flex-direction: column;
}

.dialog__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-md) var(--abstand-lg);
    border-bottom: 1px solid var(--farbe-rand, #e5e7eb);
}

.dialog__titel {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.dialog__koerper {
    padding: var(--abstand-lg);
}

.dialog__fuss {
    display: flex;
    justify-content: flex-end;
    gap: var(--abstand-sm);
    padding: var(--abstand-md) var(--abstand-lg);
    border-top: 1px solid var(--farbe-rand, #e5e7eb);
}

/* ========================================================================
   Revisionen
   ======================================================================== */

.revisionen__zeile:hover {
    background-color: var(--hintergrund-sekundaer);
}
.revisionen__zeile--offen {
    background-color: var(--hintergrund-sekundaer);
}
.revisionen__aktuell {
    background-color: var(--farbe-primaer-hell, #eff6ff);
}
.revisionen__aktuell td:first-child .badge {
    background-color: var(--farbe-primaer, #2563eb);
    color: #fff;
}
.revisionen__detail-inhalt {
    padding: var(--abstand-sm) var(--abstand-md);
    background: var(--hintergrund-sekundaer);
    border-radius: var(--radius-sm);
}
.revisionen__detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--abstand-sm) var(--abstand-lg);
}
.revisionen__detail-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-sekundaer);
    font-weight: 600;
    margin-bottom: 2px;
}
.revisionen__detail-wert {
    display: block;
    font-size: 0.85rem;
}

/* Revision-Banner */
.revision-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-md);
    padding: var(--abstand-sm) var(--abstand-md);
    background: var(--farbe-warnung-hell, #fffbeb);
    border: 1px solid var(--farbe-warnung, #f59e0b);
    border-radius: var(--radius-sm);
    margin-bottom: var(--abstand-md);
}
.revision-banner__text {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    font-size: 0.85rem;
    color: var(--farbe-text);
}
.revision-banner__text svg {
    flex-shrink: 0;
    color: var(--farbe-warnung, #f59e0b);
}
.revision-banner--grund {
    background: var(--farbe-hintergrund-sekundaer);
    border-color: var(--farbe-rand);
    margin-top: calc(-1 * var(--abstand-md) + var(--abstand-xs));
}

/* ========================================================================
   KI-Toolbar (Uebersetzen, Korrigieren, Verbessern)
   ======================================================================== */

.ki-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs, 4px);
    padding: var(--abstand-xs, 4px) var(--abstand-md, 12px);
    border-bottom: 1px solid var(--farbe-rand, #e4e7ec);
    background: var(--farbe-hintergrund, #f4f5f7);
}

.ki-toolbar--editor {
    border-bottom: 1px solid var(--farbe-rand, #e4e7ec);
    border-top: none;
    background: var(--farbe-hintergrund-karte, #fff);
    margin: 0;
}

.ki-toolbar__aktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs, 4px);
    flex-wrap: wrap;
}

.ki-toolbar .dropdown {
    position: relative;
}

.ki-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--farbe-text-sekundaer, #6b7280);
    padding: 3px 8px;
    border-radius: var(--radius-sm, 4px);
    transition: background 0.15s, color 0.15s;
}

.ki-toolbar__btn:hover {
    background: var(--farbe-akzent-bg, #eef4fb);
    color: var(--farbe-akzent, #3574a5);
}

.ki-toolbar__btn svg {
    flex-shrink: 0;
}

.ki-toolbar__hinweis {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--farbe-primaer-50);
    border: 1px solid var(--farbe-primaer-200);
    border-radius: 12px;
    font-size: 11px;
    color: var(--farbe-primaer-700);
    margin-left: 4px;
    animation: emailTagEin 0.15s ease-out;
}

.ki-toolbar__hinweis-text {
    white-space: nowrap;
}

.ki-toolbar__hinweis-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: none;
    color: var(--farbe-primaer-500);
    font-size: 12px;
    cursor: pointer;
    border-radius: 50%;
}

.ki-toolbar__hinweis-x:hover {
    background: var(--farbe-primaer-200);
    color: var(--farbe-primaer-900);
}

/* KI Dropdown-Menu */
.dropdown__menu--ki {
    min-width: 160px;
    max-height: 300px;
    overflow-y: auto;
    right: auto;
    left: 0;
}

.modal--schmal {
    max-width: 480px;
}

.modal--breit {
    max-width: 800px;
}

.modal__fusszeile {
    display: flex;
    justify-content: flex-end;
    gap: var(--abstand-sm, 8px);
    padding-top: var(--abstand-lg, 16px);
    border-top: 1px solid var(--rahmen, #e5e7eb);
    margin-top: var(--abstand-lg, 16px);
}

/* ═══ Eigenschaften-Modal ═══ */
.eigenschaften-modal__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--abstand-sm, 8px) var(--abstand-md, 12px);
    background: var(--hintergrund-sekundaer, #f9fafb);
    border-radius: var(--radius-md, 6px);
    margin-bottom: var(--abstand-lg, 16px);
}

.eigenschaften-modal__gruppen-liste {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--rahmen, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    padding: 4px 0;
}

.eigenschaften-modal__gruppe-eintrag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--farbe-text, #1f2937);
    transition: background-color 0.1s;
}

.eigenschaften-modal__gruppe-eintrag:hover {
    background: var(--farbe-hover, #f3f4f6);
}

.eigenschaften-modal__gruppe-eintrag input[type="checkbox"] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    accent-color: var(--farbe-primaer, #2563eb);
}

/* KI-Ergebnis Panel – inline unter der Toolbar */
.ki-ergebnis {
    transition: opacity 0.2s;
}

.ki-ergebnis--versteckt {
    display: none;
}

.ki-ergebnis__inhalt {
    background: var(--farbe-hintergrund-karte, #fff);
    border: 1px solid var(--farbe-rand, #e4e7ec);
    border-radius: var(--radius-md, 6px);
    padding: var(--abstand-sm, 8px) var(--abstand-md, 12px);
    margin-top: var(--abstand-xs, 4px);
    font-size: 13px;
    line-height: 1.5;
    max-height: 300px;
    overflow-y: auto;
}

.ki-ergebnis__inhalt--erfolg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.ki-ergebnis__inhalt--fehler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.ki-ergebnis__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--abstand-xs, 4px);
    padding-bottom: var(--abstand-xs, 4px);
    border-bottom: 1px solid var(--farbe-rand, #e4e7ec);
    font-size: 12px;
    color: var(--farbe-text-sekundaer, #6b7280);
}

.ki-ergebnis__text {
    color: var(--farbe-text, #1a2030);
}

.ki-ergebnis__text p {
    margin: 0 0 0.5em;
}

.ki-ergebnis__text p:last-child {
    margin-bottom: 0;
}

.ki-ergebnis__aktionen {
    display: flex;
    gap: var(--abstand-sm);
    padding-top: var(--abstand-sm);
    border-top: 1px solid var(--farbe-rand);
    margin-top: var(--abstand-sm);
}

/* Loading-Spinner */
.ki-ergebnis__loading {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm, 8px);
    color: var(--farbe-text-sekundaer, #6b7280);
    font-size: 13px;
}

.ki-ergebnis__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--farbe-rand, #e4e7ec);
    border-top-color: var(--farbe-akzent, #3574a5);
    border-radius: 50%;
    animation: ki-spin 0.6s linear infinite;
}

@keyframes ki-spin {
    to { transform: rotate(360deg); }
}

/* Responsive: KI-Toolbar auf Mobil */
@media (max-width: 768px) {
    .ki-toolbar__aktionen {
        gap: 2px;
    }
    .ki-toolbar__btn {
        font-size: 11px;
        padding: 2px 6px;
    }
    .ki-ergebnis__inhalt {
        max-height: 250px;
    }
}

/* ══ Archiv-Browser ══ */
[data-controller="archiv-browser"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
[data-archiv-browser-target="liste"] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.archiv-browser__link {
    color: var(--primaer);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.archiv-browser__link:hover {
    text-decoration: underline;
}
.archiv-browser__datei {
    color: var(--text);
}
.archiv-browser__krume {
    color: var(--primaer);
    text-decoration: none;
    font-weight: 500;
}
.archiv-browser__krume:hover {
    text-decoration: underline;
}
.archiv-browser__brotkrumen {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    flex-wrap: wrap;
}
.archiv-browser__datei-ansicht {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.archiv-browser__datei-kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    padding: var(--abstand-xs) var(--abstand-md);
    border-bottom: 1px solid #1e1e1e;
    background: #252526;
    flex-shrink: 0;
    color: #cccccc;
    font-size: 0.82rem;
}
.archiv-browser__datei-kopf .font-fett {
    color: #e0e0e0;
}
.archiv-browser__datei-kopf .text-sekundaer {
    color: #858585;
}
.archiv-browser__datei-kopf .btn {
    color: #cccccc;
    border-color: #404040;
}
.archiv-browser__datei-kopf .btn:hover {
    background: #383838;
    color: #ffffff;
}
.archiv-browser__datei-kopf .badge--info {
    background: #264f78;
    color: #9cdcfe;
    border: none;
}
.archiv-browser__editor {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #1e1e1e;
}
.archiv-browser__nummern {
    margin: 0;
    padding: var(--abstand-sm) var(--abstand-md);
    background: #1e1e1e;
    color: #5a5a5a;
    text-align: right;
    user-select: none;
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', var(--schrift-mono);
    font-size: 0.82rem;
    line-height: 1.3;
    border-right: 1px solid #2d2d2d;
    flex-shrink: 0;
    position: sticky;
    left: 0;
}
.archiv-browser__code {
    margin: 0;
    padding: var(--abstand-sm) var(--abstand-md);
    background: #1e1e1e;
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', var(--schrift-mono);
    font-size: 0.82rem;
    line-height: 1.3;
    white-space: pre;
    tab-size: 4;
    color: #d4d4d4;
    border-radius: 0;
    flex: 1;
    min-width: 0;
}
.archiv-browser__code code {
    display: block;
}
.archiv-browser__code.hljs {
    background: #1e1e1e;
}
.archiv-browser__code [class^="hljs-"] {
    background: none;
}

/* ==========================================================================
   DATEV-Buchung: Seitenleiste + Buchungsmaske
   ========================================================================== */

/* Layout: DATEV-Seitenleiste im Modal */
.modal--ansicht:has(.ansichtsmodal__datev-leiste) {
    flex-direction: column;
}
.modal--ansicht:has(.ansichtsmodal__datev-leiste) > .modal__kopf,
.modal--ansicht:has(.ansichtsmodal__datev-leiste) > .ribbon {
    flex-shrink: 0;
}
/* Koerper + DATEV-Leiste nebeneinander */
.modal--ansicht:has(.ansichtsmodal__datev-leiste) {
    display: grid !important;
    grid-template-columns: 1fr 380px;
    grid-template-rows: auto auto 1fr;
}
.modal--ansicht:has(.ansichtsmodal__datev-leiste) > .modal__kopf {
    grid-column: 1 / -1;
}
.modal--ansicht:has(.ansichtsmodal__datev-leiste) > .ribbon {
    grid-column: 1 / -1;
}
.modal--ansicht:has(.ansichtsmodal__datev-leiste) > .modal__koerper {
    grid-column: 1;
    grid-row: 3;
    overflow-y: auto;
    min-height: 0;
}
.ansichtsmodal__datev-leiste {
    grid-column: 2;
    grid-row: 3;
    border-left: 1px solid var(--farbe-rand);
    overflow-y: auto;
    background: var(--farbe-hintergrund-karte);
}

/* Modul-Panels in der Seitenleiste */
.modul-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.3s ease-out, opacity 0.25s ease-out;
}
.modul-panel > * {
    overflow: hidden;
}
.modul-panel--sichtbar {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Seitenleiste */
.datev-seitenleiste {
    font-size: 0.875rem;
}
.datev-seitenleiste__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-sm) var(--abstand-md);
    border-bottom: 1px solid var(--farbe-rand);
    background: var(--farbe-hintergrund);
}
.datev-seitenleiste__toggle {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    font-family: var(--font-familie);
    font-size: 0.875rem;
    color: var(--farbe-text);
}
.datev-seitenleiste__toggle:hover {
    color: var(--farbe-akzent);
}
.datev-seitenleiste__toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.datev-seitenleiste__inhalt {
    padding: var(--abstand-sm) var(--abstand-md);
}

/* Sektionen */
.datev-sektion {
    margin-bottom: var(--abstand-sm);
}
.datev-sektion__titel {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--farbe-text-sekundaer);
    margin-bottom: var(--abstand-xs);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--farbe-rand);
}
.datev-sektion__titel--klickbar {
    cursor: pointer;
    list-style: none;
}
.datev-sektion__titel--klickbar::-webkit-details-marker {
    display: none;
}
.datev-sektion--aufklappbar {
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
    padding: var(--abstand-xs) var(--abstand-sm);
    margin-bottom: var(--abstand-sm);
}
.datev-aufteilung,
.datev-zahlung {
    padding-top: var(--abstand-xs);
}

/* Detail-Grid (readonly Ansicht) */
.datev-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--abstand-sm);
    margin-bottom: var(--abstand-sm);
}
.datev-detail-label {
    font-size: 0.75rem;
    color: var(--farbe-text-sekundaer);
}

/* Hinweis-Box */
.datev-hinweis {
    padding: var(--abstand-sm);
    border-radius: 4px;
    font-size: 0.8rem;
}
.datev-hinweis--warnung {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}
/* Toast-Meldungen */
.datev-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-xs);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 6px;
}
.datev-toast--erfolg {
    background: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}
.datev-toast--fehler {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}
.datev-toast__schliessen {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: inherit;
    padding: 0 2px;
    opacity: 0.6;
}
.datev-toast__schliessen:hover {
    opacity: 1;
}

.datev-hinweis--erfolg {
    background: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}
.datev-hinweis a {
    color: #856404;
    font-weight: 600;
}

/* Agent-Status Indikator */
.datev-agent-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 2px solid;
}
.datev-agent-status--online {
    background: #28a745;
    border-color: #1e7e34;
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.6);
}
.datev-agent-status--offline {
    background: #dc3545;
    border-color: #bd2130;
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.6);
    animation: blinken 1.5s infinite;
}
@keyframes blinken {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Umsatzerfassung Brutto/Netto */
.datev-umsatzerfassung {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    margin-bottom: var(--abstand-sm);
    font-size: 0.8rem;
}
.formular-radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 0.8rem;
}

/* Restbetrag-Anzeige bei Aufteilung */
.datev-rest-anzeige {
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--abstand-sm);
    text-align: center;
}
.datev-rest-anzeige--ok {
    background: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}
.datev-rest-anzeige--offen {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}
.datev-rest-anzeige--fehler {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}

/* Buchungsvorschau */
.datev-vorschau {
    margin-top: 8px;
    padding: 8px;
    background: #f0f4f8;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 0.8rem;
}
.datev-vorschau__tabelle {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
}
.datev-vorschau__tabelle td {
    padding: 3px 6px;
    white-space: nowrap;
}
.datev-vorschau__tabelle td:last-child {
    text-align: right;
    font-weight: 600;
}
.datev-vorschau__betrag--haben { color: #dc3545; }
.datev-sachkonto-bez { display: block; margin-top: 2px; font-size: 0.7rem; line-height: 1.2; }
.datev-vorschau__summe { margin-top: 6px; padding-top: 6px; border-top: 2px solid #d0d7de; text-align: right; font-size: 0.8rem; }

/* Austauschverfahren */
.datev-austausch-info {
    font-size: 0.75rem;
    color: var(--farbe-text-sekundaer);
    padding: var(--abstand-xs) 0;
    margin-bottom: var(--abstand-xs);
    border-bottom: 1px solid var(--farbe-rand);
}
.datev-buchungszeile__at {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.formular-checkbox--sm {
    font-size: 0.75rem;
}
.datev-austausch-ergebnis {
    background: #f0f7ff;
    border: 1px solid #b3d7ff;
    border-radius: 4px;
    padding: var(--abstand-xs) var(--abstand-sm);
    margin-top: var(--abstand-xs);
}

/* BU-Schlüssel Zeile */
.datev-bu-zeile {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
}
.datev-bu-input {
    text-align: center;
    font-weight: 600;
}
.datev-bu-bezeichnung {
    flex: 1;
    font-size: 0.8rem;
    color: var(--farbe-text-sekundaer);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* BU-Liste Modal */
.datev-bu-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--farbe-hintergrund-karte);
    z-index: 50;
    display: flex;
    flex-direction: column;
}
.datev-bu-modal__inhalt {
    padding: var(--abstand-sm) var(--abstand-md);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.datev-bu-modal__kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--abstand-sm);
}
.datev-bu-modal__liste {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
}
.datev-bu-modal__eintrag {
    padding: 6px var(--abstand-sm);
    cursor: pointer;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--farbe-rand);
}
.datev-bu-modal__eintrag:hover {
    background: var(--farbe-hintergrund-hover);
}
.datev-bu-modal__eintrag:last-child {
    border-bottom: none;
}
.datev-seitenleiste__laden {
    padding: var(--abstand-lg);
    text-align: center;
    color: var(--farbe-text-sekundaer);
}

/* Status-Badges */
.datev-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.datev-status-badge--offen {
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-sekundaer);
    border: 1px solid var(--farbe-rand);
}
.datev-status-badge--entwurf {
    background: var(--farbe-info-bg);
    color: var(--farbe-info);
    border: 1px solid var(--farbe-info-rand);
}
.datev-status-badge--gesendet {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}
.datev-status-badge--gebucht {
    background: var(--farbe-erfolg-bg);
    color: var(--farbe-erfolg);
    border: 1px solid var(--farbe-erfolg-rand);
}
.datev-status-badge--storniert {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
    border: 1px solid var(--farbe-fehler-rand);
}

/* Trenner */
.datev-trenner {
    height: 1px;
    background: var(--farbe-rand);
    margin: var(--abstand-md) 0;
}

/* KI-Bereich */
.datev-ki-bereich {
    margin-bottom: var(--abstand-sm);
}
.datev-ki-status {
    margin-top: var(--abstand-xs);
    padding: var(--abstand-xs) var(--abstand-sm);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8rem;
}
.datev-ki-status--erfolg {
    background: var(--farbe-erfolg-bg);
    color: var(--farbe-erfolg);
}
.datev-ki-status--warnung {
    background: var(--farbe-warnung-bg);
    color: var(--farbe-warnung);
}
.datev-ki-status--fehler {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
}

/* Seitenleiste Akkordeon */
.seitenleiste__aktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
}
.seitenleiste__pin {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.3;
    padding: 2px;
    line-height: 1;
    transition: opacity 0.15s;
}
.seitenleiste__pin:hover {
    opacity: 0.7;
}
.seitenleiste__pin--aktiv {
    opacity: 1;
}

/* DATEV KI-Buttons */
.datev-ki-buttons {
    display: flex;
    gap: var(--abstand-xs);
    margin-bottom: 8px;
}

.btn--warnung {
    background: #e6a700;
    color: #000;
    border: none;
}
.btn--warnung:hover {
    background: #cc9400;
}

/* OCR in Seitenleiste */
.ocr-aktionen {
    padding: var(--abstand-xs) 0 0;
    border-top: 1px solid var(--farbe-rand);
    margin-top: var(--abstand-sm);
    text-align: right;
}

.ocr-leer {
    text-align: center;
    padding: var(--abstand-md) 0;
}
.ocr-leer p {
    margin-bottom: var(--abstand-sm);
}

.ocr-volltext {
    margin: 0;
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--farbe-text-sekundaer);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 500px;
    overflow-y: auto;
}

/* Details-Aufklapper */
.datev-details {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-sm, 4px);
    margin-bottom: var(--abstand-sm);
}
.datev-details__kopf {
    padding: var(--abstand-xs) var(--abstand-sm);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--farbe-text-sekundaer);
    list-style: none;
}
.datev-details__kopf::-webkit-details-marker {
    display: none;
}
.datev-details__kopf::before {
    content: '\25B6 ';
    font-size: 0.65rem;
    margin-right: 4px;
}
.datev-details[open] .datev-details__kopf::before {
    content: '\25BC ';
}
.datev-details__inhalt {
    padding: var(--abstand-sm);
    border-top: 1px solid var(--farbe-rand);
}

/* Buchungszeile */
.datev-buchungszeile {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-sm, 4px);
    padding: var(--abstand-sm);
    margin-bottom: var(--abstand-sm);
    background: var(--farbe-hintergrund);
}
.datev-buchungszeile__kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--abstand-xs);
}
.datev-buchungszeile--readonly {
    background: transparent;
    border-color: var(--farbe-rand);
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--abstand-xs);
    align-items: center;
    padding: var(--abstand-xs) var(--abstand-sm);
}

/* Buchung-Details (readonly) */
.datev-buchung-details .formular-gruppe {
    margin-bottom: var(--abstand-xs);
}
.datev-buchung-details .formular-label {
    font-size: 0.75rem;
    margin-bottom: 0;
}

/* Storno */
.datev-storno-bereich {
    margin-top: var(--abstand-md);
}

/* Autocomplete */
.autocomplete-wrapper {
    position: relative;
    display: flex;
    gap: var(--abstand-xs);
    align-items: flex-start;
}
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--farbe-hintergrund-karte);
    border: 1px solid var(--farbe-rand);
    border-top: none;
    border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.autocomplete-option {
    padding: var(--abstand-xs) var(--abstand-sm);
    cursor: pointer;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--farbe-rand);
}
.autocomplete-option:last-child {
    border-bottom: none;
}
.autocomplete-option:hover {
    background: var(--farbe-hintergrund-hover);
}

/* Verlauf (Timeline) */
.datev-verlauf {
    margin-top: var(--abstand-sm);
}
.datev-verlauf__titel {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--abstand-sm);
    color: var(--farbe-text-sekundaer);
}
.datev-verlauf__eintrag {
    display: flex;
    gap: var(--abstand-sm);
    margin-bottom: var(--abstand-sm);
    padding-bottom: var(--abstand-sm);
    border-bottom: 1px solid var(--farbe-rand);
}
.datev-verlauf__eintrag:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.datev-verlauf__eintrag--storniert {
    opacity: 0.6;
}
.datev-verlauf__kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.datev-verlauf__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.82rem;
}
.datev-verlauf__zeilen {
    margin-top: var(--abstand-xs);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
}
.datev-verlauf__zeile {
    display: flex;
    gap: var(--abstand-sm);
    align-items: center;
    padding: 2px var(--abstand-xs);
    border-bottom: 1px solid var(--farbe-rand);
}
.datev-verlauf__zeile:last-child {
    border-bottom: none;
}

/* Timeline-Punkte (Vollansicht) */
.datev-verlauf--voll .datev-verlauf__eintrag {
    position: relative;
    padding-left: 24px;
    border-bottom: none;
}
.datev-verlauf__zeitlinie {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.datev-verlauf__punkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.datev-verlauf__punkt--entwurf { background: var(--farbe-info); }
.datev-verlauf__punkt--gebucht { background: var(--farbe-erfolg); }
.datev-verlauf__punkt--storniert { background: var(--farbe-fehler); }
.datev-verlauf__linie {
    flex: 1;
    width: 2px;
    background: var(--farbe-rand);
    margin-top: 2px;
}
.datev-verlauf__inhalt {
    flex: 1;
    min-width: 0;
}

/* Durchgestrichen (Storno) */
.text-durchgestrichen {
    text-decoration: line-through;
}

/* Verbindungstest */
.datev-verbindungstest {
    margin-top: var(--abstand-md);
    padding: var(--abstand-sm) var(--abstand-md);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.85rem;
}
.datev-verbindungstest--erfolg {
    background: var(--farbe-erfolg-bg);
    color: var(--farbe-erfolg);
    border: 1px solid var(--farbe-erfolg-rand);
}
.datev-verbindungstest--fehler {
    background: var(--farbe-fehler-bg);
    color: var(--farbe-fehler);
    border: 1px solid var(--farbe-fehler-rand);
}

/* Formular-Zeile nebeneinander */
.formular-zeile {
    display: flex;
    gap: var(--abstand-sm);
}

/* Kleinere Formularfelder für Buchungszeilen */
.formular-input--sm,
.formular-select--sm {
    padding: 4px 8px;
    font-size: 0.8rem;
}

/* --- Responsive: Mobil --- */
@media (max-width: 768px) {
    .modal--ansicht:has(.ansichtsmodal__datev-leiste) {
        display: flex !important;
        flex-direction: column;
        grid-template-columns: unset;
    }
    .ansichtsmodal__datev-leiste {
        position: fixed;
        inset: 0;
        width: 100%;
        min-width: 0;
        z-index: 200;
        border-left: none;
        overflow-y: auto;
        background: var(--farbe-hintergrund-karte);
    }
    .datev-seitenleiste__inhalt {
        padding: var(--abstand-sm);
    }
    .formular-zeile {
        flex-direction: column;
    }
}

/* Tablet: schmalere Seitenleiste */
@media (min-width: 769px) and (max-width: 1200px) {
    .ansichtsmodal__datev-leiste {
        width: 320px;
        min-width: 320px;
    }
}

/* ═══════════════════════════════════════════════════════════
   e-Rechnung Viewer — Dokument-Layout
   ═══════════════════════════════════════════════════════════ */

.erechnung {
    padding: var(--abstand-lg);
    max-width: 860px;
    margin: 0 auto;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Kopfzeile */
.erechnung__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
    margin-bottom: var(--abstand-lg);
}

.erechnung__format-badge {
    background: var(--primaer);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.erechnung__belegtyp {
    font-size: 0.85rem;
    color: var(--text-sekundaer);
}

/* Briefkopf: Verkäufer links, Rechnungsdaten rechts */
.erechnung__briefkopf {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--abstand-xl);
    margin-bottom: var(--abstand-lg);
    padding-bottom: var(--abstand-md);
    border-bottom: 1px solid var(--rahmen);
}

.erechnung__absender-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 2px;
}

.erechnung__absender-zusatz {
    font-size: 0.82rem;
    color: var(--text-sekundaer);
    margin-bottom: var(--abstand-xs);
}

.erechnung__absender-adresse {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: var(--abstand-xs);
}

.erechnung__absender-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-xs) var(--abstand-md);
    font-size: 0.78rem;
    color: var(--text-sekundaer);
}

/* Rechnungsdaten-Block rechts */
.erechnung__rechnungsdaten {
    text-align: right;
    min-width: 220px;
}

.erechnung__rechnungsnr {
    margin-bottom: var(--abstand-sm);
}

.erechnung__rechnungsdaten-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-sekundaer);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.erechnung__rechnungsnr-wert {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--schrift-mono);
}

.erechnung__stammdaten {
    border-collapse: collapse;
    font-size: 0.84rem;
    margin-left: auto;
}

.erechnung__stammdaten td {
    padding: 1px 0 1px var(--abstand-sm);
    white-space: nowrap;
}

.erechnung__stammdaten-label {
    color: var(--text-sekundaer);
    font-size: 0.78rem;
    text-align: right;
    padding-right: var(--abstand-sm) !important;
}

/* Empfänger (Käufer) — Briefkopf-Style */
.erechnung__empfaenger {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-xs);
    margin-bottom: var(--abstand-lg);
    padding: var(--abstand-sm) var(--abstand-md);
    background: var(--hintergrund-sekundaer);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

.erechnung__empfaenger-label {
    font-size: 0.72rem;
    color: var(--text-sekundaer);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.erechnung__empfaenger-name {
    font-weight: 700;
}

.erechnung__empfaenger-adresse {
    color: var(--text-sekundaer);
    font-size: 0.84rem;
}

/* Positionen */
.erechnung__positionen {
    margin-bottom: var(--abstand-sm);
}

.erechnung__tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.erechnung__tabelle th {
    text-align: left;
    padding: var(--abstand-xs) var(--abstand-sm);
    border-bottom: 2px solid var(--rahmen);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-sekundaer);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.erechnung__tabelle td {
    padding: var(--abstand-xs) var(--abstand-sm);
    border-bottom: 1px solid var(--rahmen-leicht, #f0f0f0);
    vertical-align: top;
}

.erechnung__tabelle tbody tr:last-child td {
    border-bottom: 2px solid var(--rahmen);
}

.erechnung__th--pos { width: 40px; }
.erechnung__th--zahl,
.erechnung__td--zahl { text-align: right; font-variant-numeric: tabular-nums; }
.erechnung__td--pos { text-align: center; color: var(--text-sekundaer); }

.erechnung__pos-bezeichnung {
    font-weight: 500;
}

/* Summen — rechtsbündig unter Positionen */
.erechnung__summen {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--abstand-lg);
}

.erechnung__summen-tabelle {
    min-width: 320px;
    max-width: 400px;
}

.erechnung__summen-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    font-size: 0.85rem;
}

.erechnung__summen-zeile--trenner {
    border-top: 1px solid var(--rahmen);
    margin-top: var(--abstand-xs);
    padding-top: var(--abstand-xs);
}

.erechnung__summen-zeile--steuer {
    font-size: 0.82rem;
}

.erechnung__summen-betrag {
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 100px;
}

/* Zahlbetrag — hervorgehoben */
.erechnung__zahlbetrag {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--abstand-sm);
    padding: var(--abstand-sm) 0;
    border-top: 3px double var(--primaer);
    font-weight: 700;
    font-size: 1rem;
}

.erechnung__zahlbetrag-wert {
    font-size: 1.1rem;
    color: var(--primaer);
    font-variant-numeric: tabular-nums;
}

/* Zahlungsinformationen — kompakte Fußzeile */
.erechnung__zahlung {
    padding: var(--abstand-md);
    background: var(--hintergrund-sekundaer);
    border-radius: var(--radius-sm);
}

.erechnung__zahlung-kopf {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-sekundaer);
    margin-bottom: var(--abstand-sm);
}

.erechnung__zahlung-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-xs);
    margin-bottom: var(--abstand-xs);
}

.erechnung__zahlung-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--hintergrund);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    white-space: nowrap;
}

.erechnung__zahlung-konditionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-xs);
    margin-top: var(--abstand-sm);
}

.erechnung__skonto-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #ecfdf5;
    color: #065f46;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
}

.erechnung__ziel-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--hintergrund);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

.erechnung__zb-text {
    font-size: 0.82rem;
    white-space: pre-wrap;
    background: var(--hintergrund);
    padding: var(--abstand-xs) var(--abstand-sm);
    border-radius: var(--radius-sm);
    margin-top: var(--abstand-sm);
    color: var(--text-sekundaer);
}

/* DATEV e-Rechnung-Hinweis */
.datev-erechnung-hinweis {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    padding: 6px 10px;
    margin-bottom: var(--abstand-sm);
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.datev-erechnung-hinweis__icon {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .erechnung {
        padding: var(--abstand-md);
    }
    .erechnung__briefkopf {
        grid-template-columns: 1fr;
        gap: var(--abstand-md);
    }
    .erechnung__rechnungsdaten {
        text-align: left;
    }
    .erechnung__stammdaten {
        margin-left: 0;
    }
    .erechnung__tabelle {
        font-size: 0.8rem;
    }
    .erechnung__summen-tabelle {
        min-width: unset;
        width: 100%;
    }
    .erechnung__empfaenger {
        flex-direction: column;
    }
}

/* DATEV Ladebalken-Animation */
.datev-ladebalken {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: datev-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes datev-spin { to { transform: rotate(360deg); } }

/* === Regelbaum === */
.regel-baum {
    list-style: none;
    padding: 0;
    margin: 0;
}
.regel-baum ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: var(--abstand-lg);
    border-left: 2px solid var(--farbe-rand);
}
.regel-schritt {
    padding: var(--abstand-sm) var(--abstand-md);
    margin: var(--abstand-xs) 0;
    border-radius: var(--radius-sm);
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
}
.regel-schritt__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm);
}
.regel-schritt__griff {
    cursor: grab;
    color: var(--farbe-text-sekundaer);
    user-select: none;
    font-size: 0.75rem;
    line-height: 1;
}
.regel-schritt__typ-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}
.regel-schritt__bezeichnung {
    flex: 1;
    font-weight: 500;
}
.regel-schritt__aktionen {
    display: flex;
    gap: var(--abstand-xs);
    opacity: 0;
    transition: opacity 0.15s;
}
.regel-schritt:hover .regel-schritt__aktionen {
    opacity: 1;
}
.regel-schritt__zweige {
    margin-top: var(--abstand-sm);
    padding-left: var(--abstand-md);
}
.regel-schritt__zweig {
    margin: var(--abstand-xs) 0;
}
.regel-schritt__zweig-label {
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: var(--abstand-xs);
}
.regel-schritt__zweig--ja .regel-schritt__zweig-label {
    color: var(--farbe-erfolg);
}
.regel-schritt__zweig--nein .regel-schritt__zweig-label {
    color: var(--farbe-fehler);
}
.regel-schritt--bedingung {
    border-left: 3px solid var(--farbe-info, #3b82f6);
}
.regel-schritt--steuerung_stop {
    border-left: 3px solid var(--farbe-warnung, #f59e0b);
}
.regel-schritt--scope_wechsel {
    border-left: 3px solid #8b5cf6;
}
.regel-schritt--hinzufuegen {
    padding: var(--abstand-xs);
    border: none;
    background: none;
}

/* ========================================================================
   Regel-Batch: Toast-Fortschrittsanzeige + Modal-Einträge
   ======================================================================== */

/* Toast: fixiert unten rechts */
.regel-batch-toast {
    position: fixed;
    bottom: var(--abstand-lg, 24px);
    right: var(--abstand-lg, 24px);
    z-index: 1000;
    max-width: 320px;
    min-width: 260px;
    background: var(--hintergrund-karte, #fff);
    border: 1px solid var(--farbe-rahmen, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: var(--abstand-md, 12px);
    animation: regel-batch-einblenden 0.3s ease-out;
}
@keyframes regel-batch-einblenden {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Toast-Titel */
.regel-batch-toast__titel {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--farbe-text, #1a1a2e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: var(--abstand-xs, 4px);
}

/* Toast-Info (Zähler) */
.regel-batch-toast__info {
    font-size: 0.75rem;
    color: var(--farbe-text-sekundaer, #64748b);
    margin-bottom: var(--abstand-xs, 4px);
}

/* Fortschrittsbalken-Hintergrund */
.regel-batch-toast__balken-bg {
    height: 6px;
    background: var(--hintergrund-sekundaer, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}

/* Fortschrittsbalken */
.regel-batch-toast__balken {
    height: 100%;
    background: var(--farbe-primaer, #3b82f6);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.regel-batch-toast__balken--fehler {
    background: var(--farbe-warnung, #f59e0b);
}
.regel-batch-toast__balken--fertig {
    background: var(--farbe-erfolg, #22c55e);
}

/* Modal: Regel-Einträge */
.regel-batch__eintrag {
    display: block;
    width: 100%;
    padding: var(--abstand-sm, 8px) var(--abstand-md, 12px);
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--farbe-rahmen, #e2e8f0);
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.regel-batch__eintrag:last-child {
    border-bottom: none;
}
.regel-batch__eintrag:hover {
    background: var(--hintergrund-hover, #f8fafc);
}
.regel-batch__eintrag-kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-sm, 8px);
}
.regel-batch__eintrag-icon {
    flex-shrink: 0;
    color: var(--farbe-primaer, #3b82f6);
}
.regel-batch__eintrag-name {
    font-weight: 500;
    font-size: 0.875rem;
}
.regel-batch__eintrag-beschreibung {
    margin-top: var(--abstand-xs, 4px);
    padding-left: calc(16px + var(--abstand-sm, 8px));
    line-height: 1.4;
}

/* ------------------------------------------------------------------
   Lade-Overlay (Spinner fuer Turbo-Frame-Navigation)
   Wird beim Klick auf eine Elementliste-Zeile in den Turbo-Frame
   geschrieben. Turbo ersetzt den Inhalt wenn die Antwort da ist.
   ------------------------------------------------------------------ */
.lade-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-md, 12px);
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    animation: lade-overlay-fade 120ms ease-out;
}

.lade-overlay__spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lade-overlay-spin 720ms linear infinite;
}

.lade-overlay__text {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@keyframes lade-overlay-spin {
    to { transform: rotate(360deg); }
}

@keyframes lade-overlay-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .lade-overlay { animation: none; }
    .lade-overlay__spinner { animation-duration: 1.4s; }
}

/* --------------------------------------------------------------------------
   Regel-Vorschlag-Modal (Feature "Regel aus Auswahl ableiten")
   -------------------------------------------------------------------------- */

.regel-vorschlag__liste {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
    max-height: 420px;
    overflow-y: auto;
    margin: var(--abstand-md) 0;
    padding: var(--abstand-sm);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-md);
    background: var(--farbe-flaeche-tief);
}

.regel-vorschlag__eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-sm);
    padding: var(--abstand-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 120ms ease;
}

.regel-vorschlag__eintrag:hover {
    background: var(--farbe-flaeche-hover);
}

.regel-vorschlag__eintrag input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.regel-vorschlag__inhalt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.regel-vorschlag__begruendung {
    color: var(--farbe-text);
    line-height: 1.35;
}

.regel-vorschlag__typ {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--farbe-akzent-weich);
    color: var(--farbe-akzent);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.regel-vorschlag__preview {
    margin: var(--abstand-md) 0;
    padding: var(--abstand-md);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-md);
    background: var(--farbe-flaeche-hell);
}

.regel-vorschlag__preview-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--abstand-xs) 0;
}

.regel-vorschlag__preview-zeile + .regel-vorschlag__preview-zeile {
    border-top: 1px dashed var(--farbe-rahmen-weich);
}

.regel-vorschlag__preview-label {
    color: var(--farbe-text-sekundaer);
    font-size: 0.9rem;
}

.regel-vorschlag__preview-wert {
    font-size: 1.05rem;
}

.regel-vorschlag__preview-wert strong {
    font-weight: 600;
    color: var(--farbe-akzent);
}

.regel-vorschlag__preview-hinweis {
    margin: var(--abstand-sm) 0 0 0;
    padding: var(--abstand-sm);
    background: var(--farbe-warnung-weich, #fff7e6);
    border-left: 3px solid var(--farbe-warnung, #f59e0b);
    color: var(--farbe-warnung-text, #92400e);
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Listen-Profil-Switcher (Geräte-Profil pro Endgerät)
   -------------------------------------------------------------------------- */
.listen-profil-switcher {
    position: relative;
    display: inline-flex;
}

.listen-profil-switcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--abstand-sm, 6px);
}

.listen-profil-switcher__name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listen-profil-switcher__pfeil {
    font-size: 0.7rem;
    opacity: 0.7;
}

.listen-profil-switcher__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    min-width: 240px;
    background: var(--farbe-hintergrund-karte, #fff);
    border: 1px solid var(--farbe-rand, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--schatten-lg, 0 4px 12px rgba(0,0,0,0.12));
    padding: var(--abstand-sm, 6px) 0;
}

.listen-profil-switcher__dropdown--offen {
    display: block;
}

.listen-profil-switcher__dropdown-titel {
    padding: var(--abstand-sm, 6px) var(--abstand-md, 10px);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a919c;
    border-bottom: 1px solid var(--farbe-rand, #e2e8f0);
    margin-bottom: 2px;
}

.listen-profil-switcher__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 0 var(--abstand-sm, 6px);
    transition: background 0.1s;
}

.listen-profil-switcher__eintrag:hover {
    background: var(--farbe-hintergrund-hover, #f0f2f5);
}

.listen-profil-switcher__eintrag--aktiv {
    background: var(--farbe-hintergrund-aktiv, #e6f0ff);
    font-weight: 600;
}

.listen-profil-switcher__form {
    flex: 1;
    margin: 0;
}

.listen-profil-switcher__auswahl {
    display: block;
    width: 100%;
    padding: 6px var(--abstand-sm, 6px);
    background: none;
    border: 0;
    text-align: left;
    font-size: 0.8125rem;
    cursor: pointer;
    color: inherit;
}

.listen-profil-switcher__badge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    background: var(--farbe-info, #3b82f6);
    color: #fff;
    font-size: 0.625rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.listen-profil-switcher__aktionen {
    display: flex;
    align-items: center;
    gap: 4px;
}

.listen-profil-switcher__aktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm, 4px);
    text-decoration: none;
    color: var(--farbe-text-sekundaer, #6b7280);
    font-size: 0.875rem;
}

.listen-profil-switcher__aktion:hover {
    background: var(--farbe-rand, #e2e8f0);
    color: var(--farbe-text, #111);
}

.listen-profil-switcher__aktion--gefahr:hover {
    background: var(--farbe-gefahr, #ef4444);
    color: #fff;
}

.listen-profil-switcher__hinweis {
    padding: var(--abstand-sm, 6px) var(--abstand-md, 10px);
    margin-top: 4px;
    border-top: 1px solid var(--farbe-rand, #e2e8f0);
    font-size: 0.6875rem;
    color: var(--farbe-text-sekundaer, #6b7280);
    line-height: 1.4;
}

/* ====================================================================
   PDF-Passwort-Dialog (verschlüsselte PDFs)
   ==================================================================== */

.pdf-passwort-dialog {
    border: 1px solid var(--farbe-rand, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    padding: var(--abstand-lg, 16px);
    max-width: 400px;
    width: 90vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.pdf-passwort-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.pdf-passwort-dialog__titel {
    margin: 0 0 var(--abstand-sm, 6px);
    font-size: 1.05rem;
}

.pdf-passwort-dialog__text {
    margin: 0 0 var(--abstand-md, 10px);
}

.pdf-passwort-dialog__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--abstand-sm, 6px);
}

.pdf-passwort-dialog__label input {
    width: 100%;
}

.pdf-passwort-dialog__fehler {
    margin-bottom: var(--abstand-sm, 6px);
}

.pdf-passwort-dialog__speichern {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--abstand-sm, 6px) 0 var(--abstand-md, 10px);
}

.pdf-passwort-dialog__aktionen {
    display: flex;
    gap: var(--abstand-sm, 6px);
    justify-content: flex-end;
}