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

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

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

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

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

/* 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;
    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;
    overflow: hidden;
    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,
.modal--email .email-modal__body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    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 Ladezustand */
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--primaer {
    background: var(--farbe-primaer);
    color: #fff;
}

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

.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__eintrag--aktiv .filterbaum__zaehler {
    background: var(--farbe-akzent-rand);
    color: var(--farbe-akzent);
}

/* --------------------------------------------------------------------------
   Ergebnisleiste
   -------------------------------------------------------------------------- */
.ergebnisleiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-lg) var(--abstand-xl);
    background: transparent;
}

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

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

.elementliste {
    flex: 1;
    overflow-y: auto;
    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;
}

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

.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;
}

.elementliste__titel {
    color: #2a3140;
    font-weight: 500;
    font-size: 0.90625rem;
    text-decoration: none;
}

.elementliste__titel:hover {
    color: var(--farbe-akzent);
    text-decoration: 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;
}

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

.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;
}

/* --- 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__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: column;
    height: calc(100vh - var(--topbar-hoehe) - 60px);
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-lg);
    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;
}

.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 */
.workflow-designer__konfiguration {
    position: absolute;
    right: 290px;
    top: 60px;
    width: 320px;
    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;
}

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

/* 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: 4px 8px 4px 16px;
    background: linear-gradient(to bottom, #fff 0%, #f3f3f3 100%);
    border-bottom: 1px solid #d6d6d6;
    flex-shrink: 0;
    min-height: 32px;
}

.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%;
}

/* 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 den restlichen Platz --- */
.ev__editor {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.ev__editor .ProseMirror {
    flex: 1;
    padding: 16px 24px;
    min-height: 200px;
    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;
}

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

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

.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;
    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;
    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: 300px;
}

.email-lesen__html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #1a1a1a;
    padding: 16px 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

.email-lesen__html img { max-width: 100%; height: auto; }
.email-lesen__html a { color: #2563eb; }
.email-lesen__html pre,
.email-lesen__html code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}
.email-lesen__html table { border-collapse: collapse; max-width: 100%; }
.email-lesen__html blockquote {
    margin: 8px 0;
    padding-left: 12px;
    border-left: 3px solid #ddd;
    color: #555;
}

.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;
}

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

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

.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__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: 1fr 140px 1fr 32px;
    gap: var(--abstand-sm);
    align-items: center;
}

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

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

.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;
}

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

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

/* --------------------------------------------------------------------------
   Filterbaum: Erweiterungen
   -------------------------------------------------------------------------- */
.filterbaum__eintrag-wrapper {
    position: relative;
}

.filterbaum__leer {
    padding: 0;
}

/* --------------------------------------------------------------------------
   Responsive: Phase 6
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .filtereditor__bedingung {
        grid-template-columns: 1fr 1fr;
        gap: var(--abstand-xs);
    }

    .filtereditor__bedingung-aktion {
        grid-column: 2;
        justify-content: flex-end;
    }

    .ergebnisleiste__sortierung-select {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .filtereditor__bedingung {
        grid-template-columns: 1fr;
    }

    .filtereditor__bedingung-aktion {
        grid-column: 1;
        justify-content: flex-start;
    }

    .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__filtereditor {
        padding: 0 var(--abstand-md);
    }

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

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

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

/* --------------------------------------------------------------------------
   Massenaktionen-Leiste
   -------------------------------------------------------------------------- */
.massenaktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-md);
    padding: var(--abstand-sm) var(--abstand-lg);
    background: var(--farbe-primaer-50);
    border-bottom: 1px solid var(--farbe-primaer-200);
}

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

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

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

/* 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 */
@media (max-width: 768px) {
    .kontakt-uebersicht {
        grid-template-columns: 1fr;
    }

    .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--archiv {
    background: var(--farbe-primaer-100);
    color: var(--farbe-primaer-700);
}

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

.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;
}

/* ==============================
   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__aktuell {
    background-color: var(--farbe-primaer-hell, #eff6ff);
}

.revisionen__aktuell td:first-child .badge {
    background-color: var(--farbe-primaer, #2563eb);
    color: #fff;
}

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

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