/* ============================================================
   Kampagnenkompass — App Styles
   Light: weiss + SP-Akzente · Dark: schwarz + SP-Akzente
   Brand: SP-Rot #E2001A, Hellblau-Grau #C6CED5, Dunkelblau-Grau #788C97
   ============================================================ */

:root {
    /* Brand */
    --sp-red:        #E2001A;
    --sp-red-dark:   #B70015;
    --sp-red-soft:   #FCE8EB;
    --sp-grey-dark:  #788C97;
    --sp-grey-light: #C6CED5;
    --sp-grey-mute:  #E8ECEF;

    /* Light theme */
    --bg:            #FAFAFB;
    --bg-elev:       #FFFFFF;
    --bg-overlay:    rgba(255,255,255,.85);
    --surface:       #FFFFFF;
    --surface-2:     #F4F5F7;
    --border:        #E5E7EB;
    --border-strong: #CBD0D6;
    --text:          #1A1D21;
    --text-muted:    #6B7280;
    --text-dim:      #9CA3AF;
    --shadow-sm:     0 1px 2px rgba(0,0,0,.04);
    --shadow:        0 4px 16px rgba(0,0,0,.06);
    --shadow-lg:     0 10px 40px rgba(0,0,0,.10);

    /* Semantic — ux-auditor M4: WCAG 2.2 AA-Kontrast gegen weisses Surface.
       Alle Token jetzt mit ≥ 4.5:1 (normaler Text) bzw. ≥ 3:1 (UI-Komponenten). */
    --status-offen:     #4A5560;  /* war #788C97 (3.5:1) → ~7.5:1 */
    --status-arbeit:    #0277A8;  /* war #06AED5 (2.62:1) → ~5.4:1 */
    --status-erledigt:  #1A6B5D;  /* war #2A9D8F (3.32:1) → ~5.7:1 */
    --status-vertagt:   #A85510;  /* war #F4A261 (2.06:1) → ≈4.9:1 */
    --status-abgelehnt: #5A6470;  /* war #9CA3AF (2.54:1) → ≈6.5:1 */
    --overdue:          #C20018;  /* dunkleres Rot, ≈6.2:1 */
    --soon:             #A85510;  /* gleich wie vertagt, ≥4.5:1 */

    /* Sizing */
    --radius:    10px;
    --radius-lg: 16px;
    --topbar-h:  56px;
    --legend-h:  42px;
    --ruler-h:   38px;
    --row-h:     54px;
    --phaseband-h: 28px;
    --milestone-row-h: 56px;

    /* Strategic-Timeline-Kategorien (Mockup wahlkampf_zeitplan_optimal.html).
       Pastell-Fills mit dunkler Schrift für ruhige Lesbarkeit; --*-strong für Akzente. */
    --crit:        #D6342C;  --crit-fill: #FBE7E5;  --crit-ink: #9A2620;  --crit-border: #F0CECB;
    --mob:         #2563A8;  --mob-fill:  #E6EEF8;  --mob-ink:  #1C4A80;  --mob-border:  #CFDCF0;
    --gov:         #5B6470;  --gov-fill:  #ECEBE6;  --gov-ink:  #454C56;  --gov-border:  #DCDAD2;
    --ph1:         #ECEBE6;  --ph1-ink:   #5B6470;
    --ph2:         #F7ECD6;  --ph2-ink:   #8A6516;
    --ph3:         #FBE7E5;  --ph3-ink:   #9A2620;
}

[data-theme="dark"] {
    --bg:            #0E1013;
    --bg-elev:       #15181D;
    --bg-overlay:    rgba(14,16,19,.85);
    --surface:       #1A1E24;
    --surface-2:     #232830;
    --border:        #2A2F37;
    --border-strong: #3A4049;
    --text:          #F0F2F5;
    --text-muted:    #9AA3AE;
    --text-dim:      #6B7280;
    --sp-red-soft:   #3A1A1F;
    --sp-grey-mute:  #2A2F37;
    --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
    --shadow:        0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:     0 10px 40px rgba(0,0,0,.6);

    /* Strategic-Timeline-Kategorien — Dark-Variante: gedaempfte Fills, helle Inks */
    --crit-fill:   #3A1E1C;  --crit-ink:  #F4B4AE;  --crit-border: #5A2D2A;
    --mob-fill:    #16273E;  --mob-ink:   #A8C6EC;  --mob-border:  #243F62;
    --gov-fill:    #2A2C2E;  --gov-ink:   #B8BDC4;  --gov-border:  #3A3D40;
    --ph1:         #2A2C2E;  --ph1-ink:   #B8BDC4;
    --ph2:         #3A2F1A;  --ph2-ink:   #E0BC78;
    --ph3:         #3A1E1C;  --ph3-ink:   #F4B4AE;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ==================== LOGIN ==================== */
.login-screen {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    background:
        radial-gradient(1200px 600px at 80% -20%, var(--sp-red-soft) 0%, transparent 60%),
        var(--bg);
    z-index: 100;
}
.login-box {
    width: min(420px, 92vw);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-lg);
}
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; min-width: 0; }
.sp-logo {
    width: 48px; height: auto;
    aspect-ratio: 102 / 108;
    flex-shrink: 0;
    display: block;
}
.brand-title {
    font-size: 22px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .02em; line-height: 1;
    /* Mobile-Fix 2026-05-26: vorher uebersteigt KAMPAGNENKOMPASS@22px
       die 92vw-Box auf 360px-Devices. min-width:0 + flex-shrink erlauben
       der Schrift sich anzupassen. */
    flex: 1; min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
@media (max-width: 460px) {
    .login-box { padding: 24px 22px; }
    .brand-title { font-size: 17px; letter-spacing: .01em; }
    .sp-logo { width: 40px; }
    .brand { gap: 10px; margin-bottom: 20px; }
}
.brand-sub { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.login-form label {
    display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.login-form input {
    display: block; margin-top: 6px; width: 100%;
    padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text);
    font-size: 15px; font-family: inherit;
}
.login-form input:focus { outline: 2px solid var(--sp-red); outline-offset: -1px; border-color: transparent; }
.error { color: var(--sp-red); font-size: 13px; margin-top: 8px; }

/* ==================== TOPBAR ==================== */
.app { display: grid; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; }
.topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 0 16px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    z-index: 10;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-left { flex: 0 0 auto; }
.topbar-right { flex: 0 0 auto; margin-left: auto; }
.brand-compact { gap: 10px; margin-bottom: 0; }
.brand-compact .sp-logo { width: 32px; }
.brand-title-compact { font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; }
/* Sidebar-Layout */
.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.sidenav {
    width: 240px;
    flex-shrink: 0;
    background: var(--surface, #f7f9fb);
    border-right: 1px solid var(--border, #e3e6ea);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 8px;
    gap: 4px;
    transition: width .18s ease;
    position: relative;
}
.sidenav.collapsed { width: 60px; padding: 12px 4px; }
.sidenav.collapsed .sidenav-group-title,
.sidenav.collapsed .navlink-label,
.sidenav.collapsed .navlink .badge {
    display: none;
}
.sidenav.collapsed .navlink {
    padding: 8px 6px;
    justify-content: center;
}
.sidenav.collapsed .navlink-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
/* Im Icon-Modus: ALLE Phase-Items immer zeigen, egal ob die details aufgeklappt ist */
.sidenav.collapsed details.sidenav-group { padding: 0; display: block; }
.sidenav.collapsed details.sidenav-group > .sidenav-group-items {
    display: flex !important;
    flex-direction: column;
    padding-left: 0;
    border-top: 1px solid var(--border, #e3e6ea);
    padding-top: 4px;
    margin-top: 4px;
}
.sidenav.collapsed details.sidenav-group:first-of-type > .sidenav-group-items {
    border-top: 0; padding-top: 0; margin-top: 0;
}
.sidenav-collapse-btn {
    align-self: flex-end;
    width: 24px; height: 24px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 1px solid var(--border, #e3e6ea);
    background: var(--bg-elev, #fff);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted, #5b6770);
    flex-shrink: 0;
}
.sidenav-collapse-btn:hover { color: var(--sp-red, #E2001A); }
.sidenav.collapsed .sidenav-collapse-btn { align-self: center; }
.sidenav-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sidenav-bottom {
    border-top: 1px solid var(--border, #e3e6ea);
    padding-top: 10px;
    margin-top: 10px;
    display: flex; flex-direction: column; gap: 4px;
}

.sidenav-group { border-radius: 8px; }
.sidenav-group-title {
    cursor: pointer;
    list-style: none;
    padding: 6px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted, #5b6770);
    font-weight: 700;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sidenav-group-title::-webkit-details-marker { display: none; }
.sidenav-group-title::before {
    content: '▸';
    font-size: 9px;
    transition: transform .15s;
    color: var(--text-muted, #5b6770);
}
.sidenav-group[open] > .sidenav-group-title::before { transform: rotate(90deg); }
.sidenav-group-items {
    display: flex; flex-direction: column;
    gap: 2px;
    padding-left: 2px;
}

.sidenav .navlink {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    font-size: 14px;
    color: var(--text, #1a1d20);
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.sidenav .navlink:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
.sidenav .navlink.active {
    background: var(--sp-red, #E2001A); color: white;
}
.sidenav .navlink-icon { width: 20px; text-align: center; flex-shrink: 0; }
.sidenav .navlink-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidenav .badge {
    background: var(--sp-red, #E2001A); color: white;
    margin-left: auto;
}
.sidenav .navlink.active .badge { background: white; color: var(--sp-red, #E2001A); }

/* Mobile: Sidebar als Drawer */
@media (max-width: 800px) {
    .sidenav {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 4px 0 14px rgba(0,0,0,.1);
    }
    .sidenav.open { transform: translateX(0); }
}

/* Mobile-Bottom-Bar — nur auf Mobile sichtbar */
.bottombar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    background: var(--bg-elev, #fff);
    border-top: 1px solid var(--border, #e3e6ea);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    justify-content: space-around;
    box-shadow: 0 -2px 10px rgba(0,0,0,.05);
}
.bottombar-btn {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    color: var(--text-muted, #5b6770);
    font-size: 11px;
}
.bottombar-btn:hover, .bottombar-btn.active { color: var(--sp-red, #E2001A); }
.bottombar-icon { font-size: 22px; line-height: 1; }
.bottombar-label { font-weight: 600; }

@media (max-width: 800px) {
    /* Bottom-Bar entfernt 2026-05-26 (open_tasks/Bottom_Menu.md), Navigation
       laeuft komplett ueber den Hamburger-Sidenav. Chat-Bubble jetzt direkt
       unten-rechts (kein bottombar-Offset noetig). */
    .bottombar { display: none !important; }
    .chat-toggle { bottom: 20px; }
}
.navlink {
    appearance: none; background: transparent; border: 0;
    padding: 8px 16px; border-radius: 999px;
    font-weight: 600; font-size: 14px; color: var(--text-muted);
    cursor: pointer; position: relative;
    transition: all .15s ease;
}
.navlink:hover { background: var(--surface-2); color: var(--text); }
.navlink.active { background: var(--sp-red); color: white; }
.badge {
    display: inline-block; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px;
    background: var(--sp-red); color: white;
    font-size: 11px; font-weight: 700;
    line-height: 18px; text-align: center;
    margin-left: 4px; vertical-align: 1px;
}
.navlink.active .badge { background: white; color: var(--sp-red); }

.iconbtn {
    appearance: none; background: transparent; border: 0;
    width: 36px; height: 36px; border-radius: 8px;
    font-size: 16px; cursor: pointer; color: var(--text);
    display: inline-grid; place-items: center;
}
.iconbtn:hover { background: var(--surface-2); }
#nav-toggle { display: none; }

.user-menu { position: relative; }
.user-chip {
    appearance: none; background: var(--surface-2); border: 0;
    padding: 4px 12px 4px 4px; gap: 8px;
    display: flex; align-items: center;
    border-radius: 999px; cursor: pointer;
    font-weight: 600; font-size: 13px; color: var(--text);
}
.avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--sp-red); color: white;
    display: inline-grid; place-items: center;
    font-weight: 700; font-size: 12px;
    text-transform: uppercase;
}
.user-dropdown {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    min-width: 200px; padding: 6px; z-index: 50;
}
.user-dropdown button {
    appearance: none; background: transparent; border: 0;
    width: 100%; text-align: left; padding: 8px 12px;
    font-size: 14px; color: var(--text); cursor: pointer;
    border-radius: 6px;
}
.user-dropdown button:hover { background: var(--surface-2); }

.public-badge {
    background: var(--surface-2); color: var(--text-muted);
    padding: 6px 12px; border-radius: 999px; font-size: 13px;
}

/* ==================== CONTENT / VIEWS ==================== */
.content {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.view[hidden] { display: none; }

.toolbar {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    flex-wrap: wrap;
}
.toolbar h2 { margin: 0; font-size: 18px; font-weight: 700; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-group:last-child { margin-left: auto; }

.btn {
    appearance: none; border: 1px solid var(--border); background: var(--surface);
    color: var(--text);
    padding: 8px 14px; border-radius: 8px;
    font-weight: 600; font-size: 13px; cursor: pointer;
    transition: all .12s ease;
}
.btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.btn.primary { background: var(--sp-red); color: white; border-color: var(--sp-red); }
.btn.primary:hover { background: var(--sp-red-dark); border-color: var(--sp-red-dark); }
.btn.block { width: 100%; padding: 12px; font-size: 15px; }
.btn.quick.active { background: var(--sp-red); color: white; border-color: var(--sp-red); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { background: transparent; border-color: var(--sp-red); color: var(--sp-red); }
.btn.danger:hover { background: var(--sp-red); color: white; }

.seg {
    display: inline-flex; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; background: var(--surface);
}
.seg button {
    appearance: none; background: transparent; border: 0;
    padding: 8px 14px; font-weight: 600; font-size: 13px;
    color: var(--text-muted); cursor: pointer;
    border-right: 1px solid var(--border);
}
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--sp-red); color: white; }
.seg button:hover:not(.active) { background: var(--surface-2); color: var(--text); }
.seg button:disabled {
    color: var(--text-muted);
    opacity: .4;
    cursor: not-allowed;
}
.seg button:disabled:hover { background: transparent; color: var(--text-muted); }

/* ==================== PRÄSENTATIONSMODUS ==================== */
body.presentation-mode { overflow: hidden; }

/* ── Legacy-Overlay (wird nicht mehr geöffnet, CSS bleibt für Kompatibilität) ── */
.presentation-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--bg);
    display: flex; flex-direction: column;
    color: var(--text);
}
.presentation-header {
    flex: 0 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
}
.presentation-title { display: flex; align-items: center; gap: 14px; }
.presentation-title h1 { margin: 0; font-size: 22px; font-weight: 700; }
.presentation-badge {
    background: var(--sp-red); color: white;
    padding: 4px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
}
.presentation-header-actions { display: flex; gap: 10px; }
.presentation-header-actions .btn.ghost {
    background: transparent; border: 1px solid var(--border); color: var(--text);
    padding: 8px 14px; font-weight: 600;
}
.presentation-header-actions .btn.ghost:hover { background: var(--surface-2); }

.presentation-body {
    flex: 1; display: flex; min-height: 0;
}
.presentation-sidebar {
    flex: 0 0 260px;
    padding: 20px;
    border-right: 1px solid var(--border);
    background: var(--bg-elev);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 24px;
}
.pres-section h3 {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .06em;
}
.pres-pillars { display: flex; flex-direction: column; gap: 4px; }
.pres-pillar-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 6px;
    cursor: pointer; user-select: none;
    font-size: 14px; font-weight: 500;
    transition: background .1s ease, opacity .15s ease;
}
.pres-pillar-row:hover { background: var(--surface-2); }
.pres-pillar-row.off { opacity: .4; }
.pres-pillar-row input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--sp-red); flex-shrink: 0; cursor: pointer;
}
.pres-pillar-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.pres-pillar-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-pillar-actions { margin-top: 6px; font-size: 12px; color: var(--text-muted); padding: 0 8px; }
.btn-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--sp-red); font-weight: 600; font-size: 12px;
}
.btn-link:hover { text-decoration: underline; }

.pres-nav-row { display: flex; gap: 6px; }
.pres-nav-btn {
    flex: 1; padding: 10px 12px;
    font-size: 13px; font-weight: 600;
}
.pres-nav-today { width: 100%; margin-top: 6px; }

.pres-help { margin-top: auto; }
.pres-keys {
    display: grid; grid-template-columns: auto 1fr; gap: 8px 12px;
    font-size: 12px; color: var(--text-muted);
}
.pres-keys kbd {
    display: inline-block; min-width: 28px; text-align: center;
    padding: 2px 6px; font-family: ui-monospace, monospace; font-size: 11px;
    background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px;
    border-radius: 4px; color: var(--text);
}

.presentation-main {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; position: relative;
    padding: 0;
}
.presentation-timeline-host {
    flex: 1; min-height: 0;
    overflow: hidden;
    position: relative;
}
/* Timeline darin nimmt 100% — Detail-Card überlagert oben rechts */
.presentation-timeline-host > #timeline-scroll {
    height: 100%; max-height: 100%;
}

/* Größere Bars + Schrift im Präsentationsmodus */
body.presentation-mode .tl-bar { height: 40px; font-size: 14px; }
body.presentation-mode .tl-bar-text { padding: 0 14px; font-size: 14px; }
body.presentation-mode .tl-milestone-diamond { width: 18px; height: 18px; }
body.presentation-mode .tl-milestone-label { font-size: 13px; padding: 4px 12px; }
body.presentation-mode .tl-row-label { font-size: 14px; font-weight: 600; padding: 10px 16px; }
body.presentation-mode .tl-ruler .tick { font-size: 13px; padding: 8px 10px; }
body.presentation-mode { --row-h: 64px; --ruler-h: 42px; }

/* ===== Slide-Deck-Praesentation (open_tasks/Präsentation.md) ===== */
.presentation-overlay.deck {
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
.pres-deck-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    gap: 16px;
}
.pres-deck-title { display: flex; align-items: center; gap: 12px; }
.pres-deck-badge {
    background: var(--sp-red); color: white;
    padding: 4px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pres-deck-campaign { font-size: 16px; font-weight: 600; color: var(--text-muted); }
.pres-deck-audience { display: flex; gap: 14px; }
.pres-deck-audience label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; cursor: pointer; user-select: none;
}
.pres-deck-audience input { accent-color: var(--sp-red); cursor: pointer; }
.pres-deck-actions { display: flex; gap: 8px; }
.pres-deck-stage {
    flex: 1; min-height: 0;
    overflow: auto;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
}
.pres-deck-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 16px;
    padding: 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
}
.pres-deck-pager {
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
    min-width: 80px; text-align: center;
}
.pres-deck-foot .btn.ghost {
    width: 44px; height: 36px;
    font-size: 18px; font-weight: 700;
    background: var(--surface); border: 1px solid var(--border);
}
.pres-deck-foot .btn.ghost:disabled { opacity: .3; cursor: not-allowed; }

/* Slide-Grundlayout */
.slide {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.slide-eyebrow {
    font-size: 12px; font-weight: 700;
    color: var(--sp-red);
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 10px;
}
.slide-title {
    font-size: 34px; font-weight: 700; line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -.01em;
}
.slide-title-xl {
    font-size: 56px; font-weight: 800; line-height: 1.1;
    margin: 8px 0 18px;
    letter-spacing: -.02em;
}
.slide-lead {
    font-size: 18px; line-height: 1.5;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 0 24px;
}

/* Slide 1: Intro */
.slide-intro { justify-content: center; padding: 60px 0; }
.slide-meta { margin-top: 32px; display: flex; gap: 24px; }
.slide-wahltag {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--crit-fill); color: var(--crit-ink);
    border: 1px solid var(--crit-border);
    padding: 12px 20px; border-radius: 12px;
    font-weight: 700;
}
.slide-wahltag-lbl { text-transform: uppercase; font-size: 11px; letter-spacing: .06em; opacity: .7; }
.slide-wahltag-date { font-size: 18px; }
.slide-wahltag-days { font-size: 14px; opacity: .8; }

/* Slide 2: Rahmen */
.slide-rahmen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 20px;
}
.rahmen-block h3 {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); margin: 0 0 14px;
}
.rahmen-list { list-style: none; padding: 0; margin: 0; }
.rahmen-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    font-size: 18px; font-weight: 500;
    border-bottom: 1px solid var(--border);
}
.rahmen-list li:last-child { border-bottom: 0; }
.rahmen-dot { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.rahmen-hint { font-size: 16px; line-height: 1.55; color: var(--text-muted); }

/* Slide 3: Overview-Cards */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.overview-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gov);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.overview-card.cat-crit { border-left-color: var(--crit); }
.overview-card.cat-mob  { border-left-color: var(--mob); }
.overview-card.cat-gov  { border-left-color: var(--gov); }
.overview-card h4 { margin: 0; font-size: 16px; font-weight: 700; }
.overview-card-meta { display: flex; align-items: center; gap: 8px; }
.overview-progress {
    flex: 1; height: 6px;
    background: var(--surface-2); border-radius: 99px; overflow: hidden;
}
.overview-progress-fill {
    display: block; height: 100%;
    background: var(--sp-red);
    transition: width .3s ease;
}
.overview-card.cat-crit .overview-progress-fill { background: var(--crit); }
.overview-card.cat-mob  .overview-progress-fill { background: var(--mob); }
.overview-card.cat-gov  .overview-progress-fill { background: var(--gov); }
.overview-stats { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.overview-dates { font-size: 12px; color: var(--text-dim); }

/* Slide 4: Element-Detail */
.slide-detail .detail-head {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.slide-detail .detail-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.slide-detail .detail-cat-pill,
.slide-detail .detail-tag-pill,
.slide-detail .detail-date-pill {
    font-size: 11px; font-weight: 700;
    padding: 5px 12px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
}
.slide-detail .detail-cat-pill.cat-crit { background: var(--crit-fill); color: var(--crit-ink); }
.slide-detail .detail-cat-pill.cat-mob  { background: var(--mob-fill);  color: var(--mob-ink); }
.slide-detail .detail-cat-pill.cat-gov  { background: var(--gov-fill);  color: var(--gov-ink); }
.slide-detail .detail-date-pill { background: var(--surface-2); color: var(--text-muted); }
.slide-detail .detail-desc {
    font-size: 17px; line-height: 1.55;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 0 22px;
}
.slide-detail .detail-body {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 40px;
    align-items: start;
}
.slide-detail .detail-tasks h3 {
    font-size: 13px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 12px;
}
.detail-tasks-list { list-style: none; padding: 0; margin: 0; }
.detail-task-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0;
    font-size: 15px; line-height: 1.4;
    border-bottom: 1px solid var(--border);
}
.detail-task-item:last-child { border-bottom: 0; }
.detail-task-item.done { color: var(--text-muted); }
.detail-task-item.done .detail-task-title { text-decoration: line-through; }
.detail-task-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface-2);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.detail-task-item.done .detail-task-check { background: var(--status-erledigt); color: white; }
.detail-task-item.in_arbeit .detail-task-check { background: var(--status-arbeit); color: white; }
.detail-task-more { color: var(--text-dim); font-style: italic; padding-top: 8px; }
.detail-empty { font-size: 15px; color: var(--text-dim); font-style: italic; }
.detail-progress-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
}
.detail-progress-label { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.detail-progress-bar {
    height: 8px; background: var(--surface-2);
    border-radius: 99px; overflow: hidden;
    margin: 10px 0 8px;
}
.detail-progress-fill { height: 100%; background: var(--sp-red); transition: width .3s ease; }
.detail-progress-fill.cat-crit { background: var(--crit); }
.detail-progress-fill.cat-mob  { background: var(--mob); }
.detail-progress-fill.cat-gov  { background: var(--gov); }
.detail-progress-hint { font-size: 12px; color: var(--text-muted); }

/* Slide 5: Zeitplan */
.slide-timeline { flex: 1; }
.slide-timeline-host {
    flex: 1; min-height: 360px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}
.slide-timeline-host > #timeline-scroll { height: 100%; max-height: 100%; }
.slide-timeline-legend {
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 16px;
    font-size: 12px; color: var(--text-muted);
}
.slide-timeline-legend .cat-crit { color: var(--crit); }
.slide-timeline-legend .cat-mob  { color: var(--mob); }
.slide-timeline-legend .cat-gov  { color: var(--gov); }

/* Slide 6a: Schluss Vorstand */
.close-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin: 28px 0;
}
.close-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.close-stat.warn {
    background: var(--crit-fill);
    border-color: var(--crit-border);
}
.close-stat-num { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.close-stat.warn .close-stat-num { color: var(--crit-ink); }
.close-stat-lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.close-vorstand-hint {
    background: var(--surface-2);
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 15px; line-height: 1.5;
}

/* Slide 6b: Schluss Kandidat:innen */
.kandidat-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 28px 0;
}
.kandidat-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 28px;
}
.kandidat-block h3 {
    font-size: 16px; font-weight: 700;
    margin: 0 0 14px;
    color: var(--sp-red);
}
.kandidat-block ul { list-style: none; padding: 0; margin: 0; }
.kandidat-block li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 15px; line-height: 1.45;
    border-bottom: 1px solid var(--border);
}
.kandidat-block li:last-child { border-bottom: 0; }
.kandidat-block li::before {
    content: '→'; position: absolute; left: 0;
    color: var(--sp-red); font-weight: 700;
}
.kandidat-hint {
    background: var(--mob-fill); color: var(--mob-ink);
    padding: 14px 20px; border-radius: 10px;
    font-size: 14px;
}

/* Mobile: einspaltig */
@media (max-width: 800px) {
    .pres-deck-stage { padding: 24px 20px; }
    .slide-title { font-size: 26px; }
    .slide-title-xl { font-size: 36px; }
    .slide-lead { font-size: 16px; }
    .slide-rahmen-grid,
    .kandidat-grid,
    .slide-detail .detail-body { grid-template-columns: 1fr; }
}

/* Highlight-Puls beim Fokussieren via ← → */
.tl-bar.pres-focus-pulse {
    animation: pres-pulse 1s ease-in-out;
    box-shadow: 0 0 0 4px rgba(226,0,26,.35), var(--shadow-lg);
    z-index: 5;
}

/* ==================== PRÄSENTATION v2 ==================== */
/* Neues Slide-Deck: Zeitstrahl zuerst, reine Element-Karten, kein Fortschritt */

/* ── Rahmen ── */
.pres-v2 {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
}

/* ── Header-Leiste ── */
.pres-v2-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    height: 52px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
}
.pres-v2-logo { display: flex; align-items: center; gap: 10px; }
.pres-v2-badge {
    background: var(--sp-red); color: #fff;
    padding: 3px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.pres-v2-name { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.pres-v2-nav  { display: flex; align-items: center; gap: 8px; }
.pres-v2-pager {
    min-width: 64px; text-align: center;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.pres-v2-actions { display: flex; gap: 4px; }
.pres-v2-btn {
    display: grid; place-items: center;
    min-width: 36px; height: 34px; padding: 0 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer;
    color: var(--text); font-size: 14px; font-weight: 600;
    transition: background .12s ease, border-color .12s ease;
}
.pres-v2-btn:hover:not(:disabled) { background: var(--surface-2); }
.pres-v2-btn:disabled { opacity: .3; cursor: not-allowed; }
.pres-v2-btn--ghost { background: transparent; border-color: transparent; }
.pres-v2-btn--ghost:hover { background: var(--surface-2); border-color: var(--border); }

/* ── Stage (Slide-Container) ── */
.pres-v2-stage {
    flex: 1; min-height: 0;
    overflow: hidden;
    position: relative;
}
@keyframes pres-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pres-slide-enter { animation: pres-enter .22s ease both; }

/* ── Gemeinsame Slide-Basis ── */
.pres-slide {
    height: 100%;
    display: flex; flex-direction: column;
    padding: 36px 52px 28px;
    overflow-y: auto;
    box-sizing: border-box;
}
@media (max-width: 800px) {
    .pres-slide { padding: 22px 20px 18px; }
}

/* ── Folie 1: Intro ── */
.pres-slide--intro {
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}
.pres-intro-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--sp-red) 0%, var(--crit-ink) 100%);
    opacity: .07;
    pointer-events: none;
}
/* Roter Akzent-Streifen links */
.pres-slide--intro::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    background: var(--sp-red);
}
.pres-intro-content { position: relative; max-width: 820px; padding-left: 8px; }
.pres-intro-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--sp-red); margin: 0 0 16px;
}
.pres-intro-title {
    font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.08;
    letter-spacing: -.025em; margin: 0 0 14px;
}
.pres-intro-sub {
    font-size: clamp(14px, 2vw, 18px); color: var(--text-muted);
    margin: 0 0 36px; line-height: 1.5;
}
.pres-intro-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.pres-intro-chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border);
    padding: 10px 18px; border-radius: 12px;
    font-size: 14px;
}
.pres-intro-chip--red {
    background: var(--crit-fill); border-color: var(--crit-border);
}
.pres-intro-chip-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted);
}
.pres-intro-chip--red .pres-intro-chip-label { color: var(--crit-ink); opacity: .7; }
.pres-intro-chip-date { font-weight: 700; }
.pres-intro-chip-days {
    font-size: 12px; font-weight: 700;
    background: var(--sp-red); color: #fff;
    padding: 2px 8px; border-radius: 999px;
}
.pres-intro-hint {
    position: absolute; bottom: 24px; right: 52px;
    font-size: 12px; color: var(--text-dim);
    display: flex; align-items: center; gap: 6px;
}
.pres-intro-hint::before { content: '→'; color: var(--sp-red); font-weight: 700; }

/* ── Folie 2: Zeitstrahl ── */
.pres-slide--timeline {
    padding-bottom: 0;
    gap: 0;
}
.pres-tl-header {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.pres-tl-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--sp-red); margin: 0; white-space: nowrap;
}
.pres-tl-title {
    font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; margin: 0;
    letter-spacing: -.01em; white-space: nowrap;
}
.pres-tl-legend {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin-left: auto; font-size: 12px;
}
.pres-tl-leg-item {
    display: flex; align-items: center; gap: 6px; color: var(--text-muted);
}
.pres-tl-leg-item::before {
    content: ''; display: block;
    width: 12px; height: 10px; border-radius: 3px;
    background: var(--gov);
}
.pres-tl-leg--crit::before { background: var(--crit); }
.pres-tl-leg--mob::before  { background: var(--mob); }
.pres-tl-leg--gov::before  { background: var(--gov); }
.pres-tl-leg--ms::before   { background: none; }
.pres-tl-leg--ms { color: var(--sp-red); }
.pres-tl-host {
    flex: 1; min-height: 0;
    overflow: hidden;
    margin: 0 -52px;
}
.pres-tl-host > #timeline-scroll { height: 100%; max-height: 100%; }
/* Im Präsentationsmodus: grössere Bars */
body.presentation-mode .tl-bar              { height: 40px; font-size: 14px; cursor: pointer; }
body.presentation-mode .tl-bar:hover        { filter: brightness(.92); box-shadow: 0 0 0 3px rgba(226,0,26,.25); }
body.presentation-mode .tl-bar-text         { padding: 0 14px; font-size: 14px; }
body.presentation-mode .tl-milestone-diamond{ width: 18px; height: 18px; }
body.presentation-mode .tl-milestone-label  { font-size: 13px; padding: 4px 12px; }
body.presentation-mode .tl-row-label        { font-size: 14px; font-weight: 600; padding: 10px 16px; }
body.presentation-mode .tl-ruler .tick      { font-size: 13px; padding: 8px 10px; }
body.presentation-mode                      { --row-h: 64px; --ruler-h: 42px; }
.pres-tl-hint {
    flex: 0 0 auto;
    font-size: 11px; color: var(--text-dim); text-align: center;
    padding: 8px 0 10px; margin: 0;
}

/* ── Folie 3: Übersicht-Grid ── */
.pres-slide--overview { gap: 0; }
.pres-ov-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--sp-red); margin: 0 0 6px;
}
.pres-ov-title {
    font-size: clamp(22px, 3vw, 32px); font-weight: 700; margin: 0 0 20px;
    letter-spacing: -.015em;
}
.pres-ov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    flex: 1; align-content: start;
}
.pres-ov-card {
    display: flex; align-items: stretch;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
    text-align: left; cursor: pointer;
    padding: 0; gap: 0;
    transition: box-shadow .15s ease, transform .12s ease;
}
.pres-ov-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pres-ov-card.now { border-color: var(--crit-border); background: var(--crit-fill); }
.pres-ov-card.past { opacity: .65; }
.pres-ov-card-accent {
    width: 5px; flex-shrink: 0;
    background: var(--gov);
}
.pres-ov-card--crit .pres-ov-card-accent { background: var(--crit); }
.pres-ov-card--mob  .pres-ov-card-accent { background: var(--mob); }
.pres-ov-card--gov  .pres-ov-card-accent { background: var(--gov); }
.pres-ov-card-body {
    flex: 1; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.pres-ov-card-title {
    font-size: 14px; font-weight: 700; margin: 0; line-height: 1.3;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pres-ov-card-range {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-muted); margin: 0;
}
.pres-ov-card-footer {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto;
}
.pres-ov-cat-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 8px; border-radius: 999px;
    background: var(--gov-fill); color: var(--gov-ink);
}
.pres-ov-cat--crit { background: var(--crit-fill); color: var(--crit-ink); }
.pres-ov-cat--mob  { background: var(--mob-fill);  color: var(--mob-ink); }
.pres-ov-cat--gov  { background: var(--gov-fill);  color: var(--gov-ink); }
.pres-ov-pillar-badge {
    font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
}
.pres-ov-now-badge {
    font-size: 10px; font-weight: 700;
    background: var(--sp-red); color: #fff;
    padding: 2px 8px; border-radius: 999px;
}

/* ── Folien 4-N: Element-Detail ── */
.pres-slide--element {
    display: flex; flex-direction: column;
    gap: 0;
}

/* Farbiger Header-Bereich (links Streifen via border-left) */
.pres-el-header {
    flex: 0 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}
.pres-el--crit .pres-el-header { border-bottom-color: var(--crit-border); }
.pres-el--mob  .pres-el-header { border-bottom-color: var(--mob-border); }
.pres-slide--element::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}
.pres-slide--element { position: relative; padding-left: 57px; }
.pres-el--crit::before { background: var(--crit); }
.pres-el--mob::before  { background: var(--mob);  }
.pres-el--gov::before  { background: var(--gov);  }

.pres-el-header-top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px;
}
.pres-el-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pres-el-cat-pill {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 4px 12px; border-radius: 999px;
    background: var(--gov-fill); color: var(--gov-ink);
}
.pres-el-cat--crit { background: var(--crit-fill); color: var(--crit-ink); }
.pres-el-cat--mob  { background: var(--mob-fill);  color: var(--mob-ink); }
.pres-el-cat--gov  { background: var(--gov-fill);  color: var(--gov-ink); }
.pres-el-phase-pill {
    font-size: 11px; font-weight: 600;
    padding: 4px 12px; border-radius: 999px;
    background: var(--surface-2); color: var(--text-muted);
    border: 1px solid var(--border);
}
.pres-el-phase--ph1 { background: var(--mob-fill);  color: var(--mob-ink);  border-color: var(--mob-border); }
.pres-el-phase--ph2 { background: #fdf0d6;           color: #8a6516;         border-color: #f0d28a; }
.pres-el-phase--ph3 { background: var(--crit-fill); color: var(--crit-ink); border-color: var(--crit-border); }
.pres-el-status-pill {
    font-size: 11px; font-weight: 700;
    padding: 4px 12px; border-radius: 999px;
}
.pres-el-status--past { background: var(--surface-2); color: var(--text-dim); }
.pres-el-status--now  { background: var(--sp-red); color: #fff; }
.pres-el-range {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.pres-el-title {
    font-size: clamp(26px, 3.5vw, 44px); font-weight: 800; line-height: 1.1;
    letter-spacing: -.025em; margin: 0;
}

/* Body: 2-spaltig */
.pres-el-body {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: 1fr 220px;
    gap: 40px; align-items: start;
    overflow-y: auto;
}
.pres-el-main { display: flex; flex-direction: column; gap: 24px; }
.pres-el-desc {
    font-size: clamp(14px, 1.8vw, 17px); line-height: 1.6;
    color: var(--text-muted); margin: 0;
}
.pres-el-desc--empty { font-style: italic; color: var(--text-dim); }

/* Mini-Zeitstrahl */
.pres-el-tl-section { display: flex; flex-direction: column; gap: 8px; }
.pres-el-tl-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted); margin: 0;
}
.elem-mini-tl { position: relative; }
.elem-mini-tl-track {
    height: 10px;
    background: var(--surface-2); border-radius: 99px;
    position: relative; overflow: visible;
}
.elem-mini-tl-bar {
    position: absolute; top: 0; height: 100%;
    background: var(--sp-red); border-radius: 99px;
    min-width: 8px;
    opacity: .85;
}
.pres-el--mob  .elem-mini-tl-bar { background: var(--mob); }
.pres-el--gov  .elem-mini-tl-bar { background: var(--gov); }
.elem-mini-tl-today {
    position: absolute; top: -4px; bottom: -4px;
    width: 2px; background: var(--sp-red);
    border-radius: 2px;
    transform: translateX(-50%);
}
.elem-mini-tl-labels {
    position: relative; height: 18px; margin-top: 6px;
}
.elem-mini-tl-labels span {
    position: absolute; transform: translateX(-50%);
    font-size: 10px; color: var(--text-dim); white-space: nowrap;
}

/* Verwandte Elemente */
.pres-el-related { display: flex; flex-direction: column; gap: 8px; }
.pres-el-related-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted); margin: 0;
}
.pres-el-related-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pres-el-related-chip {
    font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    cursor: pointer;
    transition: background .12s ease;
}
.pres-el-related-chip:hover { background: var(--surface-2); }
.pres-el-related-chip--crit { border-color: var(--crit-border); color: var(--crit-ink); }
.pres-el-related-chip--mob  { border-color: var(--mob-border);  color: var(--mob-ink); }

/* Meta-Sidebar */
.pres-el-meta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    position: sticky; top: 0;
}
.pres-el-meta-list {
    display: flex; flex-direction: column; gap: 0;
    margin: 0; padding: 0;
}
.pres-el-meta-row {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.pres-el-meta-row:last-child { border-bottom: 0; }
.pres-el-meta-key {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted);
}
.pres-el-meta-val {
    font-size: 13px; font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 6px;
}
.pres-el-meta-cat { font-size: 12px; }
.pres-el-pillar-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

/* Responsive */
@media (max-width: 800px) {
    .pres-el-body { grid-template-columns: 1fr; gap: 20px; }
    .pres-el-meta { position: static; }
    .pres-slide--element { padding-left: 26px; }
    .pres-tl-host { margin: 0 -20px; }
    .pres-ov-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .pres-tl-header { gap: 10px; }
    .pres-tl-legend { margin-left: 0; }
}

/* ===== Globale Suche (open_tasks/Suche.md) ===== */
.gsearch-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 300;
    display: flex; justify-content: center;
    padding-top: 10vh;
}
.gsearch-box {
    background: var(--surface);
    width: min(680px, 92vw);
    max-height: 80vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.gsearch-head {
    display: flex; align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.gsearch-icon { font-size: 18px; color: var(--text-muted); }
.gsearch-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    font-size: 16px;
    color: var(--text);
}
.gsearch-close {
    background: transparent; border: none;
    color: var(--text-muted);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
}
.gsearch-close:hover { background: var(--surface-2); color: var(--text); }

.gsearch-filters {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
}
.gsearch-filters:empty { display: none; }
.gsearch-chip {
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s ease, color .12s ease;
}
.gsearch-chip:hover { background: var(--bg); color: var(--text); }
.gsearch-chip.active {
    background: var(--sp-red-soft);
    color: var(--sp-red);
    border-color: var(--sp-red);
}
.gsearch-chip-count {
    font-size: 11px;
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 99px;
    color: var(--text-muted);
}
.gsearch-chip.active .gsearch-chip-count {
    background: white;
    color: var(--sp-red);
}

.gsearch-results {
    flex: 1; overflow-y: auto;
    padding: 8px 0;
    min-height: 100px;
}
.gsearch-hint {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}
.gsearch-hint.error { color: var(--overdue); }
.gsearch-truncated {
    padding: 8px 18px;
    color: var(--text-dim);
    font-size: 11.5px;
    font-style: italic;
    margin: 0;
}
.gsearch-hit-list { display: flex; flex-direction: column; }
.gsearch-hit {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background .1s ease;
}
.gsearch-hit:last-child { border-bottom: 0; }
.gsearch-hit:hover { background: var(--surface-2); }
.gsearch-hit:focus { background: var(--sp-red-soft); outline: none; }
.gsearch-hit-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--bg-elev);
    color: var(--text-muted);
    font-size: 14px;
}
.gsearch-hit-body { flex: 1; min-width: 0; }
.gsearch-hit-head {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 2px;
}
.gsearch-hit-type {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--bg-elev);
    padding: 1px 7px; border-radius: 99px;
    flex-shrink: 0;
}
.gsearch-hit-title {
    font-size: 14px; font-weight: 600;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.gsearch-hit-snippet {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 800px) {
    .gsearch-box { width: 96vw; max-height: 92vh; border-radius: 12px; }
    .gsearch-backdrop { padding-top: 4vh; }
}

/* ===== Multiselect-Dropdown ===== */
.multiselect-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    color: var(--text);
    transition: background .12s ease, border-color .12s ease;
}
.multiselect-trigger:hover { background: var(--surface-2); }
.multiselect-trigger.has-selection {
    background: var(--sp-red-soft);
    border-color: var(--sp-red);
    color: var(--sp-red);
}
.multiselect-label { font-weight: 700; }
.multiselect-summary { font-weight: 500; }
.multiselect-caret { font-size: 10px; opacity: .6; }

.multiselect-menu {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 220px; max-width: 280px;
    overflow: hidden;
}
.multiselect-bulk {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted);
}
.multiselect-bulk .btn-link { font-size: 11px; }
.multiselect-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
.multiselect-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: background .1s ease;
}
.multiselect-row:hover { background: var(--surface-2); }
.multiselect-row.selected { background: var(--sp-red-soft); }
.multiselect-row input { accent-color: var(--sp-red); cursor: pointer; flex-shrink: 0; }
.multiselect-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.multiselect-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filterbar wird zu Flex-Row mit Multiselect-Dropdowns statt Chip-Liste */
.filterbar {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    align-items: center;
}

/* Disabled-Checkbox (kein Toggle-Recht) */
.check.disabled,
.detail-list-check.disabled {
    cursor: not-allowed;
    opacity: .35;
}
.check.disabled:hover,
.detail-list-check.disabled:hover { background: var(--bg); }

/* ===== Responsive Toggle-Klassen (UX-Audit 2026-05-26 Round 2) ===== */
.mobile-only { display: none !important; }
@media (max-width: 800px) {
    .mobile-only { display: inline-flex !important; }
    .desktop-only { display: none !important; }
    .mobile-hidden { display: none !important; }
}

/* Group-by-Select (mobile) */
.group-by-select {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    min-width: 130px;
}

/* ===== Speed-Dial-FAB (mobile-only) ===== */
.tl-add-fab {
    position: absolute;
    right: 16px;
    bottom: 76px;  /* ueber dem Zoom-FAB */
    z-index: 6;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
@media (max-width: 800px) {
    .tl-add-fab { display: flex; }
    /* Zoom-FAB auf Mobile: kleiner */
    .tl-zoom-fab { right: 12px; bottom: 12px; }
}
.tl-add-fab-main {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--sp-red);
    color: white;
    border: none;
    font-size: 28px; font-weight: 300;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(226,0,26,.35), 0 2px 4px rgba(0,0,0,.15);
    display: grid; place-items: center;
    transition: transform .2s ease, background .12s ease;
    line-height: 1;
}
.tl-add-fab-main:hover { background: var(--sp-red-dark); }
.tl-add-fab-main.open { transform: rotate(45deg); }
.tl-add-fab-menu {
    display: flex; flex-direction: column;
    gap: 8px;
    padding-bottom: 4px;
}
.tl-add-fab-menu[hidden] { display: none; }
.tl-add-fab-action {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 18px 10px 12px;
    font: inherit;
    font-size: 13px; font-weight: 600;
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow);
    animation: fab-action-in .2s ease;
}
.tl-add-fab-action:hover { background: var(--surface-2); }
.tl-add-fab-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--sp-red);
    color: white;
    display: grid; place-items: center;
    font-size: 16px; font-weight: 700;
}
@keyframes fab-action-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Bottom-Sheet ===== */
.bs-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 400;
    display: flex; align-items: flex-end; justify-content: center;
    animation: bs-backdrop-in .2s ease;
}
.bs-backdrop.closing { animation: bs-backdrop-out .2s ease forwards; }
.bs-sheet {
    background: var(--surface);
    width: 100%; max-width: 640px;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    display: flex; flex-direction: column;
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);
    animation: bs-sheet-in .25s cubic-bezier(.2,.9,.3,1.1);
    overflow: hidden;
}
.bs-backdrop.closing .bs-sheet { animation: bs-sheet-out .2s ease forwards; }
.bs-head {
    position: relative;
    display: flex; align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    touch-action: pan-y;
}
.bs-grabber {
    position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px;
    border-radius: 99px;
    background: var(--border-strong);
}
.bs-head h3 { flex: 1; font-size: 15px; font-weight: 700; margin: 0; }
.bs-close {
    background: transparent; border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
}
.bs-close:hover { background: var(--surface-2); color: var(--text); }
.bs-body {
    flex: 1; overflow-y: auto;
    padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
}
.bs-foot {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
    display: flex; gap: 8px; justify-content: flex-end;
}
.bs-search-body { padding: 4px 0 12px; }
.bs-search-body .bs-search-input { width: 100%; font-size: 15px; padding: 12px 14px; }

/* Bottom-Sheet auf Desktop: zentriertes Modal statt slide-up */
@media (min-width: 801px) {
    .bs-backdrop { align-items: center; }
    .bs-sheet { border-radius: 16px; max-width: 480px; max-height: 70vh; }
    .bs-grabber { display: none; }
}

@keyframes bs-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes bs-sheet-out {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}
@keyframes bs-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes bs-backdrop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Multiselect-Inhalt im Bottom-Sheet braucht mehr Padding (statt schmalem Popover) */
.bs-sheet .multiselect-bulk { background: transparent; }
.bs-sheet .multiselect-list { max-height: none; }
.bs-sheet .multiselect-row { padding: 10px 8px; font-size: 14px; }
.bs-sheet .multiselect-row input { width: 18px; height: 18px; }

/* ===== PWA-Install-Hint auf Login-Screen (mobile-only) ===== */
.pwa-install-hint {
    margin-top: 24px;
    /* Kein Box-Char mehr — bloss eine zarte Trennlinie + dezente
       Untergrund-Tinte. Soll als optionaler Hinweis lesen, nicht als
       zweite CTA-Komponente. */
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 16px 0 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}
.pwa-hint-close {
    position: absolute;
    top: 12px; right: 0;
    width: 22px; height: 22px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    border-radius: 50%;
}
.pwa-hint-close:hover { background: rgba(0,0,0,.05); color: var(--text-muted); }
.pwa-hint-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
    opacity: .85;
}
.pwa-hint-body { flex: 1; min-width: 0; padding-right: 24px; }
.pwa-hint-title {
    font-size: 13px; font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.pwa-hint-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
}
.pwa-install-hint .btn-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-red);
    background: none; border: none; padding: 0; cursor: pointer;
}
.pwa-install-hint .btn-link:hover { text-decoration: underline; }
.pwa-hint-mode {
    position: static;
    display: inline-block;
    margin-bottom: 8px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 99px;
}
.pwa-hint-mode[data-mode="pwa"] { color: var(--status-erledigt); background: rgba(26,107,93,.1); }
.pwa-hint-mode[data-mode="browser"] { color: var(--text-muted); }
/* Auf Desktop ausblenden — nur Mobile relevant */
@media (min-width: 801px) {
    .pwa-install-hint { display: none !important; }
}

/* ===== Right-Sidebar (Mobile-Aktions-Panel) ===== */
.rs-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 400;
    display: flex; justify-content: flex-end;
    animation: rs-backdrop-in .2s ease;
}
.rs-backdrop.closing { animation: rs-backdrop-out .2s ease forwards; }
.rs-panel {
    background: var(--surface);
    width: min(360px, 88vw);
    height: 100%;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 24px rgba(0,0,0,.18);
    animation: rs-panel-in .25s cubic-bezier(.2,.9,.3,1.1);
}
.rs-backdrop.closing .rs-panel { animation: rs-panel-out .2s ease forwards; }
.rs-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
}
.rs-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.rs-close {
    background: transparent; border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
}
.rs-close:hover { background: var(--surface-2); color: var(--text); }
.rs-body {
    flex: 1; overflow-y: auto;
    padding: 14px 16px;
}
.rs-foot {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
}

@keyframes rs-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes rs-panel-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
@keyframes rs-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rs-backdrop-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Action-Buttons in der Sidebar — vollbreit, gestapelt */
.rs-actions { display: flex; flex-direction: column; gap: 8px; }
.rs-action-btn {
    display: block; width: 100%;
    text-align: left;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit; font-size: 14px; font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.rs-action-btn:hover { background: var(--surface-2); }
.rs-action-btn.primary {
    background: var(--sp-red);
    color: white;
    border-color: var(--sp-red);
    font-weight: 700;
    margin-top: 4px;
}
.rs-action-btn.primary:hover { background: var(--sp-red-dark); }
.rs-action-btn.toggled {
    background: var(--crit-fill);
    color: var(--crit-ink);
    border-color: var(--crit-border);
}
.rs-section-label {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted);
    margin: 6px 2px;
}
.rs-quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-quick-row .rs-action-btn { flex: 1; min-width: 120px; }
.rs-filter-host { display: flex; flex-direction: column; gap: 8px; }
.rs-filter-host .multiselect-trigger {
    width: 100%; justify-content: space-between;
    padding: 12px 14px;
    font-size: 14px;
}

/* ===== Nachrichten-Modul (open_tasks/Inbox.md, Phase 1) ===== */
.nachr-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    flex: 1; min-height: 0;
    overflow: hidden;
}
.nachr-sidebar {
    border-right: 1px solid var(--border);
    background: var(--bg-elev);
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.nachr-sidebar-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky; top: 0; z-index: 1;
}
.nachr-new { font-size: 12px; padding: 6px 10px; }
.nachr-conv-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s ease;
}
.nachr-conv-row:hover { background: var(--surface-2); }
.nachr-conv-row.active { background: var(--sp-red-soft); }
.nachr-conv-row.has-unread { font-weight: 600; }
.nachr-conv-title { display: flex; align-items: center; gap: 6px; }
.nachr-conv-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nachr-unread-badge {
    background: var(--sp-red); color: white;
    font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
    min-width: 20px; text-align: center;
}
.nachr-mute-icon { font-size: 11px; opacity: .6; }
.nachr-conv-meta {
    display: flex; justify-content: space-between;
    margin-top: 4px;
    font-size: 11px; color: var(--text-muted);
}
.nachr-conv-type {
    background: var(--surface-2);
    padding: 1px 6px; border-radius: 99px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}

.nachr-thread {
    display: flex; flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}
.nachr-thread-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
}
.nachr-thread-title { display: flex; flex-direction: column; gap: 2px; }
.nachr-thread-sub { font-size: 11.5px; color: var(--text-muted); }
.nachr-thread-actions { display: flex; gap: 6px; }
.nachr-thread-actions .btn { font-size: 12px; padding: 6px 10px; }

.nachr-messages {
    flex: 1; overflow-y: auto;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.nachr-msg {
    max-width: 70%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px; line-height: 1.45;
    align-self: flex-start;
}
.nachr-msg.mine {
    background: var(--sp-red); color: white; border-color: var(--sp-red);
    align-self: flex-end;
}
.nachr-msg.system {
    align-self: center;
    background: var(--surface-2); color: var(--text-muted);
    border: 1px dashed var(--border);
    font-size: 12.5px; font-style: italic;
    text-align: center;
}
.nachr-msg-sender { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
.nachr-msg-body { white-space: pre-wrap; word-break: break-word; }
.nachr-msg-time {
    font-size: 10px; opacity: .65;
    margin-top: 3px;
}
.nachr-msg.mine .nachr-msg-time { text-align: right; }

/* E2E-Status-Tags + System/Notif-Cards (FR #23-Iter5) */
.nachr-msg-cryptotag { font-size: 9.5px; opacity: .7; margin-left: 4px; }
.nachr-msg-cryptotag.plain { color: var(--crit, #c2410c); }
.nachr-msg.fail .nachr-msg-body { color: var(--text-muted); font-style: italic; }
.nachr-msg.e2e   { border-color: var(--mob, #2563a8); }
.nachr-msg.e2e.mine { border-color: rgba(255,255,255,.3); }
.nachr-msg.plain { border-color: var(--crit, #c2410c); }
.nachr-msg.plain.mine { border-color: rgba(255,255,255,.4); }

/* System-Conversation (virtuelle "🛎 System") in der Sidebar */
.nachr-conv-row.system {
    background: var(--mob-fill, var(--surface-2));
    border-bottom: 1px solid var(--border-strong);
    margin-bottom: 4px;
}
.nachr-conv-row.system.active { background: var(--mob, var(--sp-red)); color: white; }
.nachr-conv-icon { font-size: 14px; margin-right: 4px; }

/* Einzelne Notification-Cards im System-Thread */
.nachr-msg.system.notif {
    align-self: stretch;
    max-width: 100%;
    text-align: left;
    font-style: normal;
    cursor: pointer;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.nachr-msg.system.notif:hover { background: var(--surface-2); }
.nachr-msg.system.notif.unread {
    background: var(--mob-fill, var(--sp-red-soft));
    border-color: var(--mob, var(--sp-red));
    font-weight: 600;
}
.nachr-msg.system.notif .nachr-msg-sender { color: var(--text); }
.nachr-msg.system.notif .nachr-msg-body { color: var(--text-muted); font-size: 12.5px; }

/* Inline-Refs (#task-N etc.) */
.nachr-ref {
    background: var(--mob-fill, var(--surface-2));
    border: 1px solid var(--mob, var(--border-strong));
    color: var(--mob-ink, var(--text));
    padding: 1px 8px;
    border-radius: 99px;
    font: inherit;
    font-family: ui-monospace, monospace;
    font-size: .9em;
    cursor: pointer;
    margin: 0 2px;
    transition: background .12s ease;
}
.nachr-ref:hover { background: var(--mob, var(--sp-red)); color: white; }
.nachr-msg.mine .nachr-ref { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: white; }
.nachr-msg.mine .nachr-ref:hover { background: rgba(255,255,255,.32); }

.nachr-input-bar {
    display: flex; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
}
.nachr-input-bar textarea {
    flex: 1;
    resize: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit; font-size: 14px;
    line-height: 1.4;
    color: var(--text);
    min-height: 40px; max-height: 120px;
}
.nachr-input-bar .btn { align-self: flex-end; }

.nachr-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.nachr-member-list {
    margin: 10px 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}
.nachr-member-row,
.nachr-member-edit-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px;
    font-size: 13px;
}
.nachr-member-edit-row { justify-content: space-between; border-bottom: 1px solid var(--border); }
.nachr-member-edit-row:last-child { border-bottom: 0; }
.nachr-members-modal-list { max-height: 320px; overflow-y: auto; }

/* ===== Feature-Requests — Card-Layout (Mobile-first) ===== */
.fr-section { position: relative; }
.fr-filter-bar {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 10px;
    padding: 6px 0;
    overflow-x: auto;
}
.fr-filter-pill {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    padding: 7px 12px;
    font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.fr-filter-pill:hover { background: var(--surface-2); color: var(--text); }
.fr-filter-pill.active {
    background: var(--sp-red); color: white; border-color: var(--sp-red);
}
.fr-filter-count {
    background: rgba(0,0,0,.1);
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 10.5px; font-weight: 800;
}
.fr-filter-pill.active .fr-filter-count { background: rgba(255,255,255,.25); }

.fr-search {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 14px;
    font-size: 14px;
}

/* Toolbar mit Refresh-Button + Letzter-Stand-Timestamp.
   Ersatz fuer Auto-Polling (Feedback #25-Iter4). */
.fr-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.fr-refresh-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 8px;
}
.fr-refresh-icon { font-size: 14px; }
.fr-refresh-stamp {
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* "In-Arbeit"-Banner — User sieht live an welchem Feature Claude gerade arbeitet */
.fr-inprogress-banner {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--mob-fill);
    border: 1px solid var(--mob-border);
    border-radius: 12px;
    border-left: 4px solid var(--mob);
    animation: fr-pulse-glow 2.5s ease-in-out infinite;
}
@keyframes fr-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 168, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(37, 99, 168, .12); }
}
.fr-inprogress-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.fr-inprogress-body { flex: 1; font-size: 13px; color: var(--mob-ink); }
.fr-inprogress-list {
    margin: 4px 0 0; padding-left: 18px;
    font-size: 13px; line-height: 1.5;
}
.fr-inprogress-list li { font-weight: 500; }

.fr-card-list { display: flex; flex-direction: column; gap: 8px; }
.fr-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--surface-2);
    border-radius: 12px;
}

.fr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fr-card:hover { box-shadow: var(--shadow-sm); }
.fr-card[data-status="open"]          { border-left-color: var(--status-offen); }
.fr-card[data-status="in_progress"]   { border-left-color: var(--status-arbeit); }
.fr-card[data-status="review_pending"]{ border-left-color: var(--status-vertagt); background: rgba(168, 85, 16, .03); }
.fr-card[data-status="verified"]      { border-left-color: var(--status-erledigt); opacity: .85; }
.fr-card[data-status="rejected"]      { border-left-color: var(--status-abgelehnt); opacity: .55; }
.fr-card[data-prio="high"]            { box-shadow: 0 0 0 1px var(--crit) inset; }
.fr-card.expanded { box-shadow: var(--shadow); }

.fr-card-header {
    padding: 12px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,.05);
}
.fr-card-title-row {
    display: flex; align-items: baseline; gap: 8px;
}
.fr-card-id {
    font-size: 11px; font-weight: 700;
    color: var(--text-dim);
    font-family: ui-monospace, monospace;
    flex-shrink: 0;
}
.fr-card-title {
    flex: 1;
    margin: 0;
    font-size: 15px; font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}
.fr-feedback-marker {
    font-size: 14px;
    flex-shrink: 0;
}
.fr-card-meta {
    display: flex; flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    align-items: center;
}
.fr-status-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: white;
    background: var(--status-offen);
}
.fr-status-pill[data-status="open"]           { background: var(--status-offen); }
.fr-status-pill[data-status="in_progress"]    { background: var(--status-arbeit); }
.fr-status-pill[data-status="review_pending"] { background: var(--status-vertagt); }
.fr-status-pill[data-status="verified"]       { background: var(--status-erledigt); }
.fr-status-pill[data-status="rejected"]       { background: var(--status-abgelehnt); }
.fr-prio-pill {
    font-size: 10.5px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--text-muted);
}
.fr-prio-pill[data-prio="high"] { background: var(--crit-fill); color: var(--crit-ink); }
.fr-card-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

.fr-card-expanded {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--border);
}
.fr-edit-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 8px 10px;
    margin: 10px 0 14px;
    align-items: center;
}
.fr-edit-grid > .fr-detail-label { margin: 0; align-self: center; }
.fr-edit-grid > .input { margin: 0; }
.fr-detail-label {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
    display: block;
    margin: 14px 0 4px;
}
.fr-detail-label.fr-feedback-label { color: var(--sp-red); }
.fr-detail-hint { font-size: 11.5px; color: var(--text-muted); margin: 0 0 4px; }
.fr-body-readonly,
.fr-readonly-block {
    background: var(--surface-2);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    white-space: pre-wrap;
    margin: 0;
}
.fr-feedback-readonly {
    background: var(--sp-red-soft) !important;
    border-left: 3px solid var(--sp-red);
}
.fr-feedback {
    background: var(--sp-red-soft);
    border-color: #f0cecb !important;
}

/* Wiederverwendbarer Markdown-Editor — siehe public/js/components/md-editor.js.
   Wird aktuell in FR-Cards (Beschreibung + Iter-Composer + Add-Modal) genutzt
   und ist fuer weitere Module gedacht (Tasks-Body, Entscheide etc.). */
.md-editor {
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.md-editor:focus-within {
    border-color: var(--accent, var(--sp-red));
    box-shadow: 0 0 0 2px rgba(168, 85, 16, .15);
}
.md-editor-toolbar {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 6px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.md-editor-toolbar.compact { padding: 4px 4px; gap: 2px; }
.md-editor-toolbar-spacer { flex: 1; }
.md-editor-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 5px 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    min-width: 30px;
    line-height: 1;
    transition: background .1s ease, border-color .1s ease;
}
.md-editor-btn:hover { background: var(--surface); border-color: var(--border-strong); }
.md-editor-btn.active {
    background: var(--sp-red);
    color: white;
    border-color: var(--sp-red);
}
.md-editor-btn.b { font-weight: 800; }
.md-editor-btn.i { font-style: italic; }
.md-editor-preview-btn {
    font-size: 12px;
    padding: 5px 10px;
}
.md-editor-ai-btn {
    font-size: 16px;
    padding: 4px 8px;
    background: linear-gradient(135deg, rgba(168,85,16,.08), rgba(37,99,168,.08));
    border-color: var(--mob, var(--border-strong));
}
.md-editor-ai-btn:hover { background: linear-gradient(135deg, rgba(168,85,16,.18), rgba(37,99,168,.18)); }
.md-editor-ai-btn:disabled { opacity: .55; cursor: wait; }
.md-editor-undo-btn {
    font-size: 16px;
    padding: 4px 9px;
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.md-editor-undo-btn:hover { background: var(--sp-red-soft); border-color: var(--sp-red); }
.md-editor-input {
    width: 100%;
    border: 0;
    outline: none;
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
    font-family: inherit;
    min-height: 220px;
}
.md-editor.compact .md-editor-input { min-height: 110px; font-size: 13.5px; padding: 10px 12px; }
.md-editor-preview {
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text);
    min-height: 220px;
    overflow-wrap: break-word;
}
.md-editor.compact .md-editor-preview { min-height: 110px; padding: 10px 12px; font-size: 13.5px; }
.md-editor-preview p { margin: 0 0 8px; }
.md-editor-preview ul, .md-editor-preview ol { margin: 4px 0 10px; padding-left: 22px; }
.md-editor-preview h1, .md-editor-preview h2, .md-editor-preview h3 { margin: 12px 0 6px; }
.md-editor-preview blockquote {
    margin: 6px 0; padding: 4px 12px;
    border-left: 3px solid var(--border-strong);
    color: var(--text-muted);
}
.md-editor-preview code {
    background: var(--surface-2);
    padding: 1px 5px; border-radius: 4px;
    font-family: ui-monospace, monospace; font-size: .92em;
}
.md-editor-preview pre {
    background: var(--surface-2);
    padding: 8px 10px; border-radius: 6px;
    overflow-x: auto;
}
.md-editor-preview pre code { background: transparent; padding: 0; }
.md-editor-preview a { color: var(--sp-red); text-decoration: underline; }
.md-editor-empty { color: var(--text-muted); font-style: italic; }

/* Read-only Markdown-Rendering (FR-Iter-Text, FR-Body-Read-Only) */
.md-rendered p:first-child { margin-top: 0; }
.md-rendered p:last-child  { margin-bottom: 0; }
.md-rendered ul, .md-rendered ol { margin: 4px 0; padding-left: 22px; }
.md-rendered code {
    background: rgba(0,0,0,.06);
    padding: 1px 5px; border-radius: 4px;
    font-family: ui-monospace, monospace; font-size: .92em;
}
.md-rendered pre {
    background: rgba(0,0,0,.06);
    padding: 6px 9px; border-radius: 6px;
    overflow-x: auto;
}
.md-rendered blockquote {
    margin: 4px 0; padding: 2px 10px;
    border-left: 3px solid var(--border-strong);
    color: var(--text-muted);
}

@media (max-width: 800px) {
    .md-editor-input { min-height: 160px; }
    .md-editor.compact .md-editor-input { min-height: 90px; }
    .md-editor-preview { min-height: 160px; }
    .md-editor-btn { padding: 6px 9px; }
}

/* Iteration-Thread */
.fr-iter-thread {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 8px;
}
.fr-iter-entry {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    border-left: 3px solid var(--border-strong);
}
.fr-iter-entry.kind-claude { background: var(--mob-fill); border-left-color: var(--mob); }
.fr-iter-entry.kind-user   { background: var(--sp-red-soft); border-left-color: var(--sp-red); }
.fr-iter-head {
    display: flex; justify-content: space-between;
    font-size: 11px;
    margin-bottom: 4px;
}
.fr-iter-author { font-weight: 700; color: var(--text); }
.fr-iter-time { color: var(--text-muted); }
.fr-iter-text { font-size: 13px; line-height: 1.45; white-space: pre-wrap; }

.fr-iter-composer {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 8px;
    padding: 10px;
    background: var(--bg);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
}
.fr-iter-composer textarea { width: 100%; }
.fr-iter-composer .btn { align-self: flex-end; }

.fr-screenshots {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 4px 0 8px;
}
.fr-screenshots a img {
    max-width: 160px; max-height: 120px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.fr-card-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}
.fr-card-actions .btn { font-size: 13px; padding: 8px 14px; }
.fr-card-actions .fr-delete-btn { margin-left: auto; }

/* ===== Einstellungen-View (open_tasks #22) ===== */
.einst-theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 8px 0;
}
.einst-theme-option {
    display: flex; flex-direction: column;
    padding: 14px 16px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.einst-theme-option:hover { background: var(--surface-2); }
.einst-theme-option.active {
    border-color: var(--sp-red);
    background: var(--sp-red-soft);
}
.einst-theme-option input { margin-bottom: 6px; accent-color: var(--sp-red); align-self: flex-start; }
.einst-theme-label { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.einst-theme-hint { font-size: 12px; color: var(--text-muted); }

/* FR #39: Mein Stammblatt */
.einst-stamm-form { display: flex; flex-direction: column; gap: 8px; }
.einst-stamm-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.einst-field { display: flex; flex-direction: column; font-size: 13px; gap: 4px; }
.einst-field.einst-field-full { grid-column: 1 / -1; }
.einst-field input:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }

.einst-checkbox-row {
    display: flex; gap: 12px; align-items: center;
    padding: 12px;
    background: var(--surface-2);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 6px;
}
.einst-checkbox-row input { width: 18px; height: 18px; accent-color: var(--sp-red); }

/* Floating Add-FAB (sticky innerhalb der Section) */
.fr-add-fab {
    position: sticky;
    bottom: 16px;
    margin-left: auto;
    margin-top: 16px;
    display: block;
    padding: 12px 20px;
    border-radius: 99px;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    z-index: 2;
}

@media (max-width: 800px) {
    .fr-card-title { font-size: 14.5px; }
    .fr-card-header { padding: 14px 12px; }  /* mehr Touch-Target */
    .fr-card-expanded { padding: 4px 12px 14px; }
    .fr-edit-grid { grid-template-columns: 1fr; gap: 4px; }
    .fr-edit-grid > .fr-detail-label { margin-top: 6px; }
    .fr-filter-bar { padding-bottom: 8px; flex-wrap: nowrap; }  /* horizontal scroll */
    .fr-card-actions .btn { flex: 1; min-width: 110px; }
    .fr-card-actions .fr-delete-btn { flex: 0 0 auto; margin-left: auto; }
    .fr-body-input { min-height: 160px; }
    .fr-iter-composer .fr-feedback { min-height: 100px; }
    .fr-add-fab {
        position: fixed;
        bottom: 20px; right: 16px;
        width: auto;
    }
}

/* Sidenav-Unread-Badge (offen verlinkt von entry.js dispatch event) */
.navlink-badge {
    background: var(--sp-red); color: white;
    font-size: 10px; font-weight: 800;
    padding: 1px 6px; border-radius: 99px;
    margin-left: 6px;
    min-width: 18px; text-align: center;
    display: inline-block;
}

/* Mobile: Sidebar oben, Thread darunter (klassisches Inbox-Mobile-Layout) */
@media (max-width: 800px) {
    .nachr-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .nachr-sidebar { max-height: 40vh; }
    .nachr-msg { max-width: 88%; }
}

/* ===== SW-Update-Toast ===== */
.sw-update-toast {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg-elev);
    padding: 12px 16px 12px 20px;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; font-weight: 500;
    z-index: 9999;
    animation: sw-toast-in .3s ease-out;
    max-width: 92vw;
}
@keyframes sw-toast-in {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}
.sw-update-btn {
    background: var(--sp-red);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 99px;
    font: inherit;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
}
.sw-update-btn:hover { background: var(--sp-red-dark); }
.sw-update-dismiss {
    background: transparent;
    border: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
}
.sw-update-dismiss:hover { opacity: 1; }
@keyframes pres-pulse {
    0%   { transform: translateY(-50%) scale(1); }
    50%  { transform: translateY(-50%) scale(1.08); }
    100% { transform: translateY(-50%) scale(1); }
}

/* Detail-Card */
.presentation-detail {
    position: absolute;
    right: 24px; top: 24px;
    width: 380px; max-width: calc(100% - 48px);
    z-index: 4;
}
.pres-detail-card {
    background: var(--bg); color: var(--text);
    border-radius: 12px;
    border-left: 6px solid var(--sp-red);
    box-shadow: 0 10px 40px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
    padding: 20px 24px;
}
.pres-detail-meta {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.pres-detail-pillar {
    color: white; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pres-detail-type, .pres-detail-status {
    padding: 3px 10px; border-radius: 12px;
    background: var(--surface-2); color: var(--text-muted);
    font-size: 11px; font-weight: 600;
}
.pres-detail-status.done { background: #1f8a4c; color: white; }
.pres-detail-title {
    margin: 0 0 8px;
    font-size: 20px; font-weight: 700; line-height: 1.25;
}
.pres-detail-date {
    color: var(--text-muted); font-size: 13px; font-weight: 600;
    margin-bottom: 12px;
}
.pres-detail-desc {
    font-size: 14px; line-height: 1.55;
    margin: 12px 0;
    color: var(--text);
    max-height: 200px; overflow-y: auto;
}
.pres-detail-assignees {
    font-size: 13px; color: var(--text-muted);
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.pres-detail-counter {
    position: absolute; right: 16px; top: 16px;
    font-size: 11px; color: var(--text-muted);
    font-weight: 700;
}

/* Mobile: Sidebar auf voller Breite oben, Detail-Card schmaler */
@media (max-width: 800px) {
    .presentation-body { flex-direction: column; }
    .presentation-sidebar {
        flex: 0 0 auto; width: 100%; max-height: 35vh;
        border-right: 0; border-bottom: 1px solid var(--border);
        flex-direction: row; flex-wrap: wrap; gap: 16px;
    }
    .pres-section { flex: 1; min-width: 160px; }
    .pres-help { display: none; }
    .presentation-detail { right: 12px; top: 12px; width: calc(100% - 24px); max-width: 360px; }
    .presentation-title h1 { font-size: 16px; }
}

/* Timeline-Zoom-Buttons (− / +): kompakter, monospace-bold für gleiche Breite,
   auf Mobile versteckt (dort gibt's pinch-zoom + die Auflösungs-Pills). */
.tl-zoom-buttons button {
    padding: 8px 12px;
    min-width: 36px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 16px;
    line-height: 1;
    text-align: center;
}
@media (max-width: 800px) {
    .tl-zoom-buttons { display: none; }
}

.input {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text);
    font-size: 14px; font-family: inherit; min-width: 220px;
}
.input:focus { outline: 2px solid var(--sp-red); outline-offset: -1px; border-color: transparent; }

/* ==================== TIMELINE ==================== */
.timeline-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

.timeline-legend {
    display: flex; gap: 8px 12px; flex-wrap: wrap;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    align-items: center;
    min-height: var(--legend-h);
    overflow-x: auto;
}
.legend-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--surface-2); font-size: 12px; font-weight: 600;
    cursor: pointer; user-select: none;
    transition: opacity .15s ease;
}
.legend-chip[data-off="1"] { opacity: .3; }
.legend-chip .dot { width: 10px; height: 10px; border-radius: 50%; }
/* Strategie-Kategorien-Chips: Pastell-Fill in Kategorien-Farbe, dunkler Ink */
.legend-chip.cat-crit { background: var(--crit-fill); color: var(--crit-ink); border: 1px solid var(--crit-border); }
.legend-chip.cat-mob  { background: var(--mob-fill);  color: var(--mob-ink);  border: 1px solid var(--mob-border); }
.legend-chip.cat-gov  { background: var(--gov-fill);  color: var(--gov-ink);  border: 1px solid var(--gov-border); }
.legend-chip.shape    { background: transparent; cursor: default; padding: 4px 6px; }
.legend-chip.shape .swatch-diamond {
    width: 11px; height: 11px; background: var(--crit);
    transform: rotate(45deg); display: inline-block; border-radius: 1px;
}
.legend-chip.shape .swatch-flag {
    width: 11px; height: 11px; background: var(--crit);
    display: inline-block; border-radius: 2px;
}
.legend-divider {
    height: 18px; width: 1px;
    background: var(--border-strong);
    margin: 0 4px;
    flex-shrink: 0;
}
.legend-section-label {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted);
    padding: 0 4px;
}

/* Toolbar-Toggle "Kritischen Pfad isolieren" — active = SP-rot Pill (im Mockup-Stil) */
.btn#tl-crit-toggle[aria-pressed="true"] {
    background: var(--crit-fill);
    color: var(--crit-ink);
    border-color: var(--crit-border);
}

/* Floating Zoom-FAB unten-rechts ueber dem Zeitstrahl-Scroll. Bewusst klein,
   semi-transparent, ueber den Bars (z-index 5) aber unter Modals (>=100).
   Pointer-events nur auf den Buttons, damit die Bars NICHT von der Container-
   Hitbox ueberdeckt werden (sonst ist die untere rechte Ecke unklickbar). */
.tl-zoom-fab {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;  /* Container blockt nicht — siehe Kommentar oben */
}
.tl-zoom-fab button {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .12s ease, transform .12s ease;
    pointer-events: auto;  /* Buttons selbst sind klickbar */
}
.tl-zoom-fab button:hover { background: var(--surface-2); transform: scale(1.05); }
.tl-zoom-fab button:disabled { opacity: .25; cursor: default; transform: none; }
@media (max-width: 800px) {
    .tl-zoom-fab { right: 10px; bottom: 10px; }
    .tl-zoom-fab button { width: 40px; height: 40px; font-size: 22px; }  /* Touch-Target ≥44 inkl. padding */
}

/* Inline-Checkbox in Detail-Panel-Sub-Tasks (klickbar ohne Modal zu oeffnen).
   Verhindert via stopPropagation, dass der Row-onclick (Modal) feuert. */
.timeline-detail .detail-list-item .detail-list-check {
    width: 18px; height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    flex-shrink: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: background .12s ease, border-color .12s ease;
}
.timeline-detail .detail-list-item .detail-list-check:hover {
    border-color: var(--text-muted);
}
.timeline-detail .detail-list-item.done .detail-list-check {
    background: var(--status-erledigt);
    border-color: var(--status-erledigt);
    color: white;
}
.timeline-detail .detail-list-item.done .detail-list-check::after {
    content: '✓';
    font-size: 12px;
    font-weight: 700;
}

/* "Im Zeitstrahl zeigen"-Button auf List-Rows fuer Sub-Tasks */
.list-row .list-goto-bar {
    margin-left: 6px;
    width: 26px; height: 26px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.list-row .list-goto-bar:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}

/* Detail-Panel unterhalb der Timeline (Mockup-Vorbild: .detail in
   wahlkampf_zeitplan_optimal.html). Erscheint statisch, scrollt intern wenn
   die Sub-Task-Liste lang wird. */
.timeline-detail {
    flex: 0 0 auto;
    margin: 14px 20px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    min-height: 100px;
    max-height: 38vh;
    overflow-y: auto;
}
.timeline-detail .placeholder {
    color: var(--text-dim);
    font-size: 13px;
    margin: 0;
}
.timeline-detail .detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
}
.timeline-detail .detail-meta h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.timeline-detail .detail-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.timeline-detail .detail-pill.cat-crit { background: var(--crit-fill); color: var(--crit-ink); }
.timeline-detail .detail-pill.cat-mob  { background: var(--mob-fill);  color: var(--mob-ink); }
.timeline-detail .detail-pill.cat-gov  { background: var(--gov-fill);  color: var(--gov-ink); }
.timeline-detail .detail-when {
    font-size: 12.5px;
    color: var(--text-muted);
}
.timeline-detail .detail-edit {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.timeline-detail .detail-edit:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
.timeline-detail .detail-desc {
    margin: 6px 0 12px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.timeline-detail .detail-section-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 12px 0 6px;
}
.timeline-detail .detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.timeline-detail .detail-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background .12s ease;
}
.timeline-detail .detail-list-item:hover { background: var(--surface-2); }
.timeline-detail .detail-list-item.done {
    color: var(--text-muted);
}
.timeline-detail .detail-list-item.done .detail-list-title {
    text-decoration: line-through;
}
.timeline-detail .detail-list-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
    background: var(--status-offen);
}
.timeline-detail .detail-list-item.status-in_arbeit .detail-list-dot { background: var(--status-arbeit); }
.timeline-detail .detail-list-item.status-erledigt  .detail-list-dot { background: var(--status-erledigt); }
.timeline-detail .detail-list-item.status-vertagt   .detail-list-dot { background: var(--status-vertagt); }
.timeline-detail .detail-list-item.status-abgelehnt .detail-list-dot { background: var(--status-abgelehnt); }
.timeline-detail .detail-list-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-detail .detail-list-meta { font-size: 11.5px; color: var(--text-dim); flex-shrink: 0; }
.timeline-detail .detail-empty {
    color: var(--text-dim);
    font-size: 12.5px;
    font-style: italic;
    margin: 8px 0;
}
.timeline-detail .detail-resp {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.timeline-detail .detail-pillar-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Aktive Selektion: dezenter Outline am ausgewaehlten Bar/Diamond/Label */
.active-el {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

/* ===== Inline-Assignee-Picker (Avatar-Chips + Popover) ===== */
.assignee-picker {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.assignee-avatar {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    flex-shrink: 0;
    border: 1.5px solid var(--bg-elev);
    margin-left: -4px;
}
.assignee-avatar:first-child { margin-left: 0; }
.assignee-avatar.assignee-overflow {
    background: var(--surface-2) !important;
    color: var(--text-muted);
    text-shadow: none;
}
.assignee-picker-trigger {
    width: 22px;
    height: 22px;
    margin-left: 2px;
    border-radius: 50%;
    border: 1.5px dashed var(--border-strong);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.assignee-picker-trigger:hover {
    background: var(--surface-2);
    border-color: var(--text-muted);
    border-style: solid;
    color: var(--text);
}
.assignee-popover {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    width: 240px;
    overflow: hidden;
}
.assignee-popover-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.assignee-popover-list { max-height: 280px; overflow-y: auto; }
.assignee-popover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .12s ease;
}
.assignee-popover-row:hover { background: var(--surface-2); }
.assignee-popover-row.selected { background: var(--sp-red-soft); }
.assignee-popover-row .assignee-avatar { width: 26px; height: 26px; font-size: 11px; margin: 0; border-color: transparent; }
.assignee-popover-name { flex: 1; font-size: 13px; }
.assignee-popover-check { color: var(--sp-red); font-weight: 800; }

/* ===== Tag-Manager-Modal ===== */
.tag-manager-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 20px;
}
.tag-manager-modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(520px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: 22px 24px;
    position: relative;
}
.tag-manager-head h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.tag-manager-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.45; }
.tag-manager-close {
    position: absolute; top: 14px; right: 14px;
    background: transparent; border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
}
.tag-manager-close:hover { background: var(--surface-2); }
.tag-manager-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tag-manager-row, .tag-manager-new {
    display: flex; align-items: center; gap: 8px;
    padding: 6px;
    border-radius: 8px;
    background: var(--surface-2);
}
.tag-manager-row .tag-color, .tag-manager-new .tag-color {
    width: 32px; height: 32px;
    border: none; border-radius: 6px; padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
}
.tag-manager-row .tag-name { flex: 1; background: var(--bg); }
.tag-manager-row .tag-usage {
    font-size: 11px;
    color: var(--text-muted);
    padding: 0 6px;
}
.tag-manager-row .tag-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.tag-manager-row .tag-delete:hover { background: var(--sp-red-soft); color: var(--sp-red); }
.tag-manager-new { background: var(--bg); border: 1px dashed var(--border-strong); }
.tag-manager-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ===== Admin-Tabs ===== */
.admin-tabs { display: flex; flex-direction: column; }
.admin-tabs-nav {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    overflow-x: auto;
    background: var(--bg-elev);
    position: sticky;
    top: 0;
    z-index: 2;
}
.admin-tab {
    background: transparent;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color .12s ease, border-color .12s ease;
    white-space: nowrap;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active {
    color: var(--sp-red);
    border-bottom-color: var(--sp-red);
}
.admin-tab-panel { padding: 20px; }
@media (max-width: 800px) {
    .admin-tabs-nav { padding: 0 12px; }
    .admin-tab { padding: 10px 12px; font-size: 12px; }
    .admin-tab-panel { padding: 14px 12px; }
}

/* ===== Legenden-Akkordeon (Toggle + Collapsed-State) ===== */
.legend-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.legend-toggle:hover { background: var(--surface-2); color: var(--text); }
.legend-toggle-caret { font-size: 9px; opacity: .7; }
.timeline-legend .legend-items { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.timeline-legend.collapsed .legend-items { display: none; }
.timeline-legend.collapsed { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }

/* ===== Mobile Zeitstrahl-Toolbar Konsolidierung ===== */
/* UX-Audit 2026-05-26: Mobile-Toolbar war frueher 4+ Reihen. Reduktion:
   - Zoom-Level-Segment kompakt (T/W/M/Q ohne Padding)
   - "Heute"-Text wird zu ⌖ Icon
   - Praesentation, Tags-Manager, Meilenstein, ⚠Kritisch werden zu Icon-Only
   - "+ Aufgabe" bleibt sichtbar mit Text (primaere Aktion)
   - Sucheingabe schrumpft, kein min-width auf Mobile */
@media (max-width: 800px) {
    /* Zoom-Level-Buttons: text auf 1 Buchstabe schneiden */
    .toolbar .seg button[data-zoom="day"]::first-letter,
    .toolbar .seg button[data-zoom="week"]::first-letter,
    .toolbar .seg button[data-zoom="month"]::first-letter,
    .toolbar .seg button[data-zoom="quarter"]::first-letter { font-weight: 800; }
    .toolbar .seg button { padding: 8px 8px; font-size: 12px; min-width: 36px; }

    /* "Heute"-Button: nur Icon */
    #tl-today { font-size: 0; padding: 8px 10px; }
    #tl-today::before { content: '⌖'; font-size: 16px; font-weight: 700; }

    /* Sekundaere Buttons: Icon-Only auf Mobile */
    #tl-presentation { font-size: 0; padding: 8px 10px; }
    #tl-presentation::before { content: '🎤'; font-size: 14px; }
    #tl-crit-toggle { font-size: 0; padding: 8px 10px; }
    #tl-crit-toggle::before { content: '⚠'; font-size: 14px; }
    #tl-manage-tags { font-size: 0; padding: 8px 10px; }
    #tl-manage-tags::before { content: '⚙'; font-size: 14px; }
    #tl-add-milestone { font-size: 0; padding: 8px 10px; }
    #tl-add-milestone::before { content: '◆'; font-size: 14px; }

    /* "+ Aufgabe" bleibt mit Text aber kompakter */
    #tl-add { padding: 8px 12px; font-size: 13px; }

    /* Sucheingabe schrumpft */
    .toolbar .input { min-width: 90px; flex: 1; max-width: 140px; }

    /* Filter-bar in Liste-Ansicht: Multiselect-Buttons stacken */
    .filterbar { padding: 8px 12px; gap: 6px; }
    .multiselect-trigger { font-size: 12px; padding: 6px 8px; }

    /* Toolbar selbst: weniger Padding, kompaktere Gaps */
    .toolbar { padding: 8px 10px !important; gap: 6px !important; }
    .toolbar-group { gap: 4px !important; }
}

.timeline-scroll {
    flex: 1; overflow: auto;
    background:
        linear-gradient(to right, transparent calc(var(--week-w, 56px) - 1px), var(--border) calc(var(--week-w, 56px) - 1px), var(--border) var(--week-w, 56px), transparent var(--week-w, 56px))
        0 var(--ruler-h) / var(--week-w, 56px) calc(100% - var(--ruler-h)) repeat-x;
    position: relative;
}
.timeline {
    position: relative;
    min-width: 100%;
    min-height: 100%;
}
.tl-ruler {
    position: sticky; top: 0; z-index: 5;
    height: var(--ruler-h); display: flex;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}
.tl-ruler .tick {
    position: relative; border-right: 1px solid var(--border);
    font-size: 11px; color: var(--text-muted);
    padding: 6px 8px;
    flex: 0 0 var(--week-w, 56px);
    white-space: nowrap;
}
.tl-ruler .tick.month-start { font-weight: 700; color: var(--text); background: var(--surface-2); }
.tl-ruler .tick.year-start::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sp-red);
}

.tl-row {
    display: flex; align-items: stretch;
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.tl-row-label {
    position: sticky; left: 0; z-index: 4;
    flex: 0 0 200px;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    /* Schatten nach rechts, damit klar wird: Bars scrollen DAHINTER */
    box-shadow: 4px 0 8px -4px rgba(0,0,0,.08);
    padding: 8px 14px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Subtile Streifung der Zeilen, hilft beim horizontalen Scrollen den Faden zu halten */
.tl-row:nth-child(even) .tl-row-area { background: rgba(0,0,0,.012); }
[data-theme="dark"] .tl-row:nth-child(even) .tl-row-area { background: rgba(255,255,255,.02); }
[data-theme="dark"] .tl-row-label {
    box-shadow: 4px 0 8px -4px rgba(0,0,0,.4);
}
.tl-row-label > span:not(.pillar-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.tl-row-label .pillar-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.tl-row-area {
    flex: 1; position: relative; min-width: 0;
}

.tl-today-line {
    position: absolute; top: var(--ruler-h); bottom: 0;
    width: 2px; background: var(--sp-red); z-index: 3;
    pointer-events: none;
}
.tl-today-line::before {
    content: "Heute";
    position: absolute; top: -22px; left: -28px;
    background: var(--sp-red); color: white;
    padding: 2px 8px; font-size: 11px; font-weight: 700;
    border-radius: 4px;
}

/* Strategische Phasen-Band-Zeile (Mockup wahlkampf_zeitplan_optimal.html):
   eigene Zeile am Top der Timeline mit 3 satten farbigen Bloecken pro Phase.
   Liegt OBERHALB des Rulers (vorher: Hintergrund-Toenung ueber die volle Hoehe). */
.tl-phaseband-row {
    position: sticky; top: 0; z-index: 6;
    height: var(--phaseband-h);
    display: flex;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}
.tl-phaseband-row .label-spacer {
    flex: 0 0 200px;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
}
.tl-phaseband-row .lanes-area {
    flex: 1; position: relative; min-width: 0;
}
.tl-phaseband {
    position: absolute; top: 1px; bottom: 1px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap; overflow: hidden;
    padding: 0 10px;
}

/* Wahltag: harter Endpunkt, retrograde Planung. Dickere Linie als "Heute",
   eigene Goldfarbe + Flag-Pill oben — soll als „nicht verhandelbar" gelesen werden. */
.tl-election-line {
    position: absolute; top: var(--ruler-h); bottom: 0;
    width: 3px; background: #B45309; z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(180, 83, 9, .2);
}
.tl-election-flag {
    position: absolute; top: -22px;
    transform: translateX(-50%);
    background: #B45309; color: white;
    padding: 2px 10px; font-size: 11px; font-weight: 800;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    z-index: 4; pointer-events: auto; cursor: default;
    white-space: nowrap;
    letter-spacing: .02em;
}

.tl-milestone {
    position: absolute; top: 0; bottom: 0;
    width: 1px; background: var(--text); z-index: 2;
    pointer-events: none;
    opacity: .15;
}
.tl-milestone-diamond {
    position: absolute; width: 14px; height: 14px;
    /* Default: gefuelltes Critical-Path-Rot. Per Inline-Style auf weiss + Border
       gesetzt fuer non-crit Milestones (siehe timeline.js). Pillar-Farbe kommt
       optional via --pillar-color als Border. */
    background: var(--crit);
    transform: translate(-50%, -50%) rotate(45deg);
    top: 50%;
    z-index: 3;
    border: 2px solid var(--bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    cursor: pointer;
}
.tl-milestone-diamond.soft {
    background: var(--bg);
    border-color: var(--pillar-color, var(--gov));
}
/* Sitzungen + Veranstaltungen — eigene Marker-Zeile zwischen Meilensteinen
   und Lanes (open_tasks/Sitzungen.md). Klein, klickbar, Modul-Navigation
   beim Tap. Sitzungen = dezent grau, Events = mob-blau (Anlass-Charakter). */
.tl-events-row { border-bottom: 1px dashed var(--border); background: rgba(0,0,0,.015); }
[data-theme="dark"] .tl-events-row { background: rgba(255,255,255,.02); }
.tl-event-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 22px; height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    display: inline-grid; place-items: center;
    font-size: 12px; line-height: 1;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    transition: transform .12s ease, box-shadow .12s ease;
}
.tl-event-marker:hover { transform: translate(-50%, -50%) scale(1.15); box-shadow: var(--shadow); z-index: 3; }
.tl-event-marker.meeting { background: var(--gov-fill); color: var(--gov-ink); border-color: var(--gov-border); }
.tl-event-marker.event   { background: var(--mob-fill); color: var(--mob-ink); border-color: var(--mob-border); }

/* Flag fuer harte gesetzliche Fristen (Eingabe, Stichtag) — quadratisch + rot.
   Liest aus Mockup wahlkampf_zeitplan_optimal.html. */
.tl-milestone-flag {
    position: absolute; width: 13px; height: 13px;
    background: var(--crit);
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 3;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    cursor: pointer;
}
/* Label-Pill rechts vom Diamond — klar abgetrennt, keine Kollision mit folgenden Bars */
.tl-milestone-label {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 2px 8px;
    font-size: 11px; font-weight: 600;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    z-index: 3;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .tl-milestone-label {
    background: var(--surface-2);
}

.tl-bar {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 32px;
    /* Standard: gov-Look. Konkrete Farbe kommt aus .tl-bar.crit/.mob/.gov Modifier. */
    background: var(--gov-fill);
    color: var(--gov-ink);
    border: 1px solid var(--gov-border);
    border-radius: 6px;
    display: flex; align-items: center;
    font-size: 12px; font-weight: 600;
    /* Truncate-in-Bar: Titel bleibt INNERHALB der Bar (Ellipsis). data-narrow=true
       zeigt vollen Titel rechts vom Balken via ::after — kein Overlap mit Nachbarn. */
    overflow: hidden;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: box-shadow .12s ease, transform .12s ease, opacity .12s ease;
    z-index: 1;
    user-select: none;
}
/* 3px-Akzent-Streifen links in Pillar-Farbe: Pillar-Identitaet bleibt erkennbar,
   ohne die Kategorie-Hierarchie zu uebertoenen. Pillar-Farbe kommt via Inline-
   Custom-Property --pillar-color aus timeline.js. */
.tl-bar::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--pillar-color, transparent);
    border-radius: 5px 0 0 5px;
    pointer-events: none;
}
.tl-bar.crit { background: var(--crit-fill); color: var(--crit-ink); border-color: var(--crit-border); }
.tl-bar.mob  { background: var(--mob-fill);  color: var(--mob-ink);  border-color: var(--mob-border); }
.tl-bar.gov  { background: var(--gov-fill);  color: var(--gov-ink);  border-color: var(--gov-border); }
.tl-bar.dim, .tl-milestone-diamond.dim, .tl-milestone-label.dim, .tl-milestone-flag.dim { opacity: .22; }
.tl-bar-text {
    padding: 0 10px 0 12px;  /* 12 links wegen 3px-Pillar-Akzent + Abstand */
    white-space: nowrap;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    letter-spacing: .01em;
}
/* Schmale Bars: Titel daneben statt drin */
.tl-bar[data-narrow="true"] { overflow: visible; }
.tl-bar[data-narrow="true"] .tl-bar-text { opacity: 0; }
.tl-bar[data-narrow="true"]::after {
    content: attr(data-title);
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text);
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
.tl-bar.done .tl-bar-text {
    text-decoration: line-through;
    opacity: .9;
}
.tl-bar:hover { box-shadow: var(--shadow); z-index: 2; }
.tl-bar.dragging { cursor: grabbing; box-shadow: var(--shadow-lg); z-index: 4; opacity: .85; }
.tl-bar.done { opacity: .55; }
.tl-bar.overdue { box-shadow: 0 0 0 2px var(--overdue), var(--shadow); }
.tl-bar.overdue::before {
    content: "⚠"; margin-right: 4px;
}
.tl-bar.dependency-pulse { animation: pulse 1s ease-in-out 2; }
.tl-bar .resize-handle {
    position: absolute; top: 0; bottom: 0; width: 6px;
    cursor: ew-resize;
}
.tl-bar .resize-handle.right { right: 0; }
.tl-bar .dep-handle {
    position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: white; border: 2px solid var(--text);
    cursor: crosshair; opacity: 0;
}
.tl-bar:hover .dep-handle { opacity: 1; }

.tl-dep-line {
    position: absolute; pointer-events: none; z-index: 2;
}
.tl-dep-line path { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tl-dep-line .arrow { fill: var(--text-muted); }

@keyframes pulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.06); }
}

/* ==================== LIST ==================== */
.filterbar {
    padding: 10px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    display: flex; gap: 8px; flex-wrap: wrap;
    align-items: center; font-size: 13px;
}
.filterbar .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--surface-2); cursor: pointer; user-select: none;
    border: 1px solid transparent;
}
.filterbar .chip.active { background: var(--sp-red); color: white; }
.filterbar .chip.active .dot { background: white !important; }

.list { flex: 1; overflow: auto; padding: 12px 20px; }
.list-group { margin-bottom: 18px; }
.list-group-head {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px;
    font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text);
    position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.list-group-head .pillar-dot { width: 12px; height: 12px; border-radius: 3px; }
.list-group-head .count { color: var(--text-muted); font-weight: 600; font-size: 12px; }
.list-group-head .group-caret {
    border: none; background: none; cursor: pointer; padding: 0;
    width: 18px; font-size: 11px; line-height: 1; color: var(--text-muted);
    flex-shrink: 0;
}
.list-group-head .group-caret:hover { color: var(--text); }
.list-group-head .list-group-title.clickable { cursor: pointer; }
.list-group-head .list-group-title.clickable:hover { text-decoration: underline; }
.list-group-head .group-add {
    flex: 0 0 auto; width: 24px; height: 24px; margin-left: 6px;
    display: grid; place-items: center; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface); color: var(--el-color, var(--sp-red));
    font-size: 17px; line-height: 1; cursor: pointer; font-weight: 600;
}
.list-group-head .group-add:hover { background: color-mix(in srgb, var(--el-color, var(--sp-red)) 14%, var(--surface)); }
/* Element-Überschriften etwas prominenter + abgesetzt (Akzentlinie links). */
.list-group-head.element-head {
    text-transform: none; letter-spacing: 0; font-size: 15px;
    border-left: 3px solid var(--sp-red, #E2001A); padding-left: 8px;
    border-radius: 2px;
}
.list-group-empty {
    color: var(--text-muted); font-size: 13px; font-style: italic;
    padding: 6px 0 10px 30px;
}
/* Prioritäts-Pills */
.list-meta .pill.prio { font-weight: 700; }
.list-meta .pill.prio-high { color: var(--overdue, #C81E1E); }
.list-meta .pill.prio-mid  { color: var(--text); }
.list-meta .pill.prio-low  { color: var(--text-muted); }

/* ── Card-Layout der Kampagnen-Element-Ansicht ────────────────────────── */
.list.cards {
    /* Masonry über CSS-Columns: Cards packen dicht, kein zeilen-aligntes Lücken-Grid. */
    column-width: 380px;
    column-gap: 16px;
}
.list.cards .list-group {
    --el-color: var(--sp-red, #E2001A);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin: 0 0 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--el-color);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}
.list.cards .list-group:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .10); transform: translateY(-1px); }
/* Kopf der Card: statisch (nicht sticky), abgesetzt */
.list.cards .list-group-head {
    position: static;
    margin: 0;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--el-color) 7%, var(--surface));
    border-bottom: 1px solid var(--border);
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
}
.list.cards .list-group-head.element-head { border-left: none; padding-left: 14px; }
.list.cards .list-group.collapsed .list-group-head { border-bottom: none; }
.list.cards .list-group-head .list-group-title { flex: 1; }
.list.cards .list-group-head .count {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 1px 9px; font-size: 11px; white-space: nowrap;
}
/* Aufgaben-Zeilen werden in der Card kompakt (flex statt breitem Spalten-Grid) */
.list.cards .list-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 0; padding: 10px 14px;
    border: none; border-bottom: 1px solid var(--border);
    border-radius: 0; box-shadow: none;
}
.list.cards .list-row:last-child { border-bottom: none; }
.list.cards .list-row:hover { transform: none; border-color: var(--border); background: color-mix(in srgb, var(--el-color) 4%, transparent); }
.list.cards .list-row.overdue { border-left: 3px solid var(--overdue); }
.list.cards .list-row > .check { flex: 0 0 auto; }                          /* Checkbox klein */
.list.cards .list-row > div:nth-of-type(2) { flex: 1 1 240px; min-width: 0; }  /* Titel+Meta füllt Zeile 1 neben Check */
.list.cards .list-row .list-title { white-space: normal; }
/* Status / Deadline / Assignees wrappen links-bündig unter den Titel — kein margin-auto, kein Clipping */
.list.cards .list-group-empty { padding: 14px; }
.list-row {
    display: grid;
    grid-template-columns: 28px 1fr 110px 140px 140px;
    gap: 12px; align-items: center;
    padding: 12px 12px; margin-bottom: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .12s ease;
    position: relative;
}
.list-row:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.list-row.overdue { border-left: 4px solid var(--overdue); }
.list-row.done .list-title { text-decoration: line-through; color: var(--text-muted); }
.list-row .check {
    width: 20px; height: 20px; border-radius: 4px;
    border: 2px solid var(--border-strong);
    cursor: pointer; display: grid; place-items: center;
    background: var(--surface); flex-shrink: 0;
}
.list-row .check.checked { background: var(--status-erledigt); border-color: var(--status-erledigt); }
.list-row .check.checked::after { content: "✓"; color: white; font-size: 14px; font-weight: 700; }
.list-title { font-weight: 600; font-size: 14px; }
.list-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--surface-2); font-size: 11px; font-weight: 600;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-pill[data-status=erledigt]  { background: rgba(42,157,143,.15);  color: var(--status-erledigt); }
.status-pill[data-status=in_arbeit] { background: rgba(6,174,213,.15);   color: var(--status-arbeit); }
.status-pill[data-status=offen]     { background: var(--surface-2);      color: var(--status-offen); }
.status-pill[data-status=vertagt]   { background: rgba(244,162,97,.15);  color: var(--status-vertagt); }
.status-pill[data-status=abgelehnt] { background: rgba(156,163,175,.15); color: var(--status-abgelehnt); }

.list-row .deadline.overdue-text { color: var(--overdue); font-weight: 700; }
.list-row .deadline.soon { color: var(--soon); font-weight: 700; }

/* ==================== INBOX ==================== */
.inbox { flex: 1; overflow: auto; padding: 12px 20px; max-width: 760px; width: 100%; margin: 0 auto; }
.notif {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); cursor: pointer;
}
.notif:hover { background: var(--surface-2); }
.notif.unread { border-left: 3px solid var(--sp-red); background: var(--sp-red-soft); }
.notif .ntype {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-2); font-size: 14px; flex-shrink: 0;
}
.notif.unread .ntype { background: var(--sp-red); color: white; }
.notif-body { flex: 1; }
.notif-title { font-weight: 600; font-size: 14px; }
.notif-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ==================== MODAL ==================== */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 200;
    display: grid; place-items: center;
    padding: 20px;
    animation: fade .15s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 720px; width: 100%;
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: slideup .2s ease;
}
@keyframes slideup { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-head {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
}
.modal-head .pillar-dot { width: 14px; height: 14px; border-radius: 3px; }
.modal-title {
    flex: 1; font-size: 18px; font-weight: 700;
    border: 0; background: transparent; color: var(--text);
    font-family: inherit; outline: none;
}
.modal-title:focus { outline: 2px solid var(--sp-red); outline-offset: 2px; border-radius: 4px; }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-foot {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end;
    background: var(--surface-2);
}
.modal-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--surface); }
.modal-tabs button {
    appearance: none; background: transparent; border: 0;
    padding: 10px 14px; font-weight: 600; font-size: 13px;
    color: var(--text-muted); cursor: pointer;
    border-bottom: 2px solid transparent;
}
.modal-tabs button.active { color: var(--sp-red); border-bottom-color: var(--sp-red); }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em; margin-bottom: 4px; }
.field input[type=text], .field input[type=date], .field input[type=number], .field select, .field textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text);
    font-family: inherit; font-size: 14px;
}
.field textarea { min-height: 80px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal-advanced { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 12px; }
.modal-advanced > summary {
    cursor: pointer; user-select: none;
    font-weight: 600; font-size: 12px; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: .04em;
    padding: 4px 0 10px; list-style: none;
    display: flex; align-items: center; gap: 6px;
}
.modal-advanced > summary::-webkit-details-marker { display: none; }
.modal-advanced > summary::before {
    content: '›'; display: inline-block;
    transition: transform .15s ease;
    font-size: 16px; line-height: 1; color: var(--text-muted);
}
.modal-advanced[open] > summary::before { transform: rotate(90deg); }
.modal-advanced > summary:hover { color: var(--text); }

.tag-list, .assignee-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--surface-2); font-size: 12px; font-weight: 600;
}
.tag .x { cursor: pointer; opacity: .6; }
.tag .x:hover { opacity: 1; }

/* Entscheid ↔ Element-Verknüpfungen (M:N) */
.decision-links, .sitz-decision-elements { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.decision-chip-list { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.decision-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 12px; font-weight: 600; max-width: 100%;
}
.decision-chip .x { cursor: pointer; opacity: .55; font-weight: 700; }
.decision-chip .x:hover { opacity: 1; color: var(--sp-red); }
.decision-add {
    font-size: 12px; padding: 3px 8px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); font-family: inherit;
}

/* Admin: Element-Reihenfolge */
.admin-reorder { display: flex; flex-direction: column; gap: 4px; }
.admin-reorder-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface);
}
.admin-reorder-pos { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 22px; }
.admin-reorder-title { flex: 1; font-weight: 600; font-size: 14px; }
.admin-reorder-btns { display: flex; gap: 2px; }
.admin-reorder-btns .btn { padding: 2px 8px; }
.admin-reorder-row { cursor: grab; transition: background .1s; }
.admin-reorder-row:hover { background: var(--surface-2); }
.admin-reorder-row.dragging { opacity: .45; cursor: grabbing; }
.admin-reorder-row.drag-over { border-top: 2px solid var(--sp-red); }
.admin-reorder-handle { color: var(--text-muted); cursor: grab; user-select: none; font-size: 15px; line-height: 1; }
.admin-elem-color { width: 30px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: none; flex: 0 0 auto; }
.admin-elem-title {
    flex: 1; min-width: 0; padding: 5px 8px;
    border: 1px solid transparent; border-radius: 6px; background: transparent;
    font: inherit; font-weight: 600; font-size: 14px; color: var(--text);
}
.admin-elem-title:hover { border-color: var(--border); }
.admin-elem-title:focus { border-color: var(--sp-red); outline: none; background: var(--surface); }
.admin-export-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Admin: Tab-Leiste */
/* Admin-Gruppen-Tabs (renderAdmin) — eigene Klasse, um Kollision mit der
   .admin-tabs-Spalte der Einstellungen-View zu vermeiden. */
.admin-grouptabs { display: flex; flex-direction: row; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.admin-grouptab {
    appearance: none; background: transparent; border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 16px; font: inherit; font-weight: 600; font-size: 14px;
    color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.admin-grouptab:hover { color: var(--text); }
.admin-grouptab.active { color: var(--sp-red); border-bottom-color: var(--sp-red); }

/* ── Task/Element-Compose-Modal (Quick-Edit-Stil) ───────────────────────── */
.task-compose { max-width: 620px; width: 100%; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.compose-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 2px; flex: 0 0 auto; }
.compose-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.compose-head-actions { display: flex; gap: 2px; }
.compose-head-actions .iconbtn { width: 30px; height: 30px; border-radius: 999px; font-size: 15px; }
.compose-scroll { flex: 1 1 auto; overflow-y: auto; }
.compose-main { padding: 4px 18px 10px; }
.compose-title {
    width: 100%; border: 0; background: transparent; outline: none;
    font: inherit; font-size: 20px; font-weight: 700; color: var(--text); padding: 6px 0;
}
.compose-title::placeholder { color: var(--text-muted); font-weight: 600; }
.compose-desc {
    width: 100%; border: 0; background: transparent; outline: none; resize: vertical;
    min-height: 150px; overflow-y: auto; font: inherit; font-size: 14px; line-height: 1.5; color: var(--text); padding: 2px 0;
}
.compose-desc::placeholder { color: var(--text-muted); }
/* Schlanke Toolbar (Standard) — Datum links, Icons rechts */
.compose-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.tb-item {
    position: relative; display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.tb-item:hover { color: var(--text); border-color: var(--text-muted); }
.tb-item.set { color: var(--accent, var(--text)); border-color: var(--accent, var(--border)); }
.tb-icononly { padding: 0 9px; }
.tb-ico { font-size: 15px; line-height: 1; }
.tb-label { font-weight: 600; }
.tb-badge { background: var(--accent, var(--sp-red)); color: #fff; border-radius: 999px; font-size: 9px; font-weight: 800; padding: 0 5px; line-height: 14px; min-width: 14px; text-align: center; }
.tb-overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.tb-more { font-size: 16px; padding: 0 11px; }
.compose-more { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 12px; }

.compose-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--border); }
.meta-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2); font-size: 12px; max-width: 100%; cursor: default;
}
.meta-pill:focus-within { border-color: var(--accent, var(--sp-red)); }
.meta-ico { font-size: 13px; line-height: 1; flex: 0 0 auto; }
.meta-select, .meta-input {
    border: 0; background: transparent; outline: none; font: inherit; font-size: 12px;
    color: var(--text); max-width: 170px; cursor: pointer;
}
.meta-input { cursor: text; }
.meta-input.meta-num { width: 38px; text-align: right; cursor: text; }
.meta-color { width: 22px; height: 18px; border: 1px solid var(--border); border-radius: 4px; padding: 0; background: none; cursor: pointer; }
.meta-sep, .meta-suffix { color: var(--text-muted); font-size: 11px; }
.meta-pill-wide { flex-basis: 100%; align-items: flex-start; }
.meta-assignees { flex-wrap: wrap; }
.assignee-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 1px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 600; }
.assignee-chip .x { cursor: pointer; opacity: .55; }
.assignee-chip .x:hover { opacity: 1; color: var(--sp-red); }
.compose-advanced { flex-basis: 100%; margin-top: 2px; }
.compose-advanced > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); list-style: none; padding: 2px 0; }
.compose-advanced > summary::-webkit-details-marker { display: none; }
.compose-advanced > summary:hover { color: var(--text); }
.compose-advanced .compose-meta { padding: 8px 0 0; border-top: 0; }
.compose-tabs { display: flex; gap: 2px; padding: 0 14px; border-top: 1px solid var(--border); }
.compose-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.compose-tab:hover { color: var(--text); }
.compose-tab.active { color: var(--sp-red); border-bottom-color: var(--sp-red); }
.compose-subpanel { padding: 12px 16px; }
.compose-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); flex: 0 0 auto; }
.compose-ctx { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; color: var(--text); min-width: 0; }
.compose-ctx span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compose-ctx-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.compose-foot-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.compose-send {
    width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: pointer;
    background: var(--sp-red); color: #fff; font-size: 16px; display: grid; place-items: center;
}
.compose-send:hover { filter: brightness(1.08); }
.iconbtn.danger:hover { color: var(--sp-red); }

.comments { margin-top: 16px; }
.comment {
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2);
}
.comment-head { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: flex; gap: 8px; }
.comment-author { font-weight: 700; color: var(--text); }
.comment-body { font-size: 14px; white-space: pre-wrap; }
.comment-form { display: flex; gap: 8px; margin-top: 12px; }
.comment-form textarea { flex: 1; min-height: 60px; }

.audit-feed { font-size: 13px; }
.audit-entry {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    display: flex; gap: 8px; align-items: flex-start;
}
.audit-entry:last-child { border-bottom: 0; }
.audit-entry .who { font-weight: 600; }
.audit-entry .when { color: var(--text-muted); font-size: 11px; }
.audit-entry .undo-link { color: var(--sp-red); cursor: pointer; font-weight: 600; }
.audit-batch-divider { padding: 6px 10px; background: var(--surface-2); border-radius: 6px; margin: 6px 0; font-size: 11px; color: var(--text-muted); }

/* ==================== ADMIN ==================== */
.admin { padding: 20px; overflow: auto; }
.admin-section { margin-bottom: 28px; }
.admin-section h3 { margin: 0 0 10px; font-size: 16px; }
.admin-table {
    width: 100%; border-collapse: collapse;
    background: var(--surface); border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border);
}
.admin-table th, .admin-table td { padding: 10px 14px; text-align: left; font-size: 13px; }
.admin-table th { background: var(--surface-2); font-weight: 700; }
.admin-table tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.admin-table .role-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--surface-2); }
.admin-table .role-pill[data-role=admin] { background: var(--sp-red); color: white; }

/* ==================== TOASTS ==================== */
/* Position oben rechts, damit kein Konflikt mit Chat-FAB / Bottom-Bar */
.toast-root {
    position: fixed; top: 70px; right: 16px; z-index: 300;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
    max-width: 360px;
}
.toast {
    background: var(--text); color: var(--bg);
    padding: 12px 16px; border-radius: 8px;
    box-shadow: var(--shadow-lg);
    font-size: 14px; font-weight: 500;
    max-width: 360px;
    /* Nur Toasts mit Undo-Action sind klickbar; Standard-Toasts blockieren keine Klicks dahinter */
    pointer-events: none;
    animation: toastin .2s ease;
    display: flex; gap: 12px; align-items: center;
}
.toast.undo-link, .toast:has(.toast-action) {
    pointer-events: auto;
}
.toast.undo-link {
    cursor: pointer;
}
.toast .toast-action {
    background: var(--sp-red); color: white;
    padding: 4px 10px; border-radius: 6px; font-weight: 700;
    cursor: pointer;
}
@keyframes toastin { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ==================== MOBILE ==================== */
@media (max-width: 880px) {
    :root { --row-h: 64px; }
    #nav-toggle { display: inline-grid; }
    .topnav {
        position: fixed; left: 0; top: var(--topbar-h); right: 0;
        background: var(--bg-elev);
        border-bottom: 1px solid var(--border);
        flex-direction: column; padding: 8px;
        gap: 0;
        transform: translateY(-110%);
        transition: transform .18s ease;
        z-index: 9;
    }
    .topnav.open { transform: translateY(0); }
    .topnav .navlink {
        text-align: left; border-radius: 8px; padding: 12px 14px;
        font-size: 15px;
    }
    .brand-title-compact { display: none; }
    .user-name { display: none; }
    .toolbar { padding: 10px 12px; gap: 8px; }
    .toolbar-group { gap: 6px; }
    .input { min-width: 100px; }
    .list { padding: 10px 12px; }
    .list-row { grid-template-columns: 28px 1fr; }
    .list-row .list-meta-cell, .list-row .deadline, .list-row .assignees-cell { display: none; }
    .tl-row-label { flex: 0 0 116px; padding: 6px 10px; font-size: 11px; line-height: 1.2; gap: 6px; }
    .tl-row-label .pillar-dot { width: 10px; height: 10px; }
    .tl-phaseband-row .label-spacer { flex: 0 0 116px; }
    .tl-phaseband { font-size: 9.5px; padding: 0 6px; }
    /* Auf Mobile sind Spill-Right-Titel zu lang — strikt truncated */
    .tl-bar[data-narrow="true"]::after { max-width: 140px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
    .tl-milestone-label { max-width: 110px; }
}

/* PWA standalone */
@media all and (display-mode: standalone) {
    .topbar { padding-top: env(safe-area-inset-top, 0); }
    .app { height: 100vh; }
}

/* mobile-ux MAJOR-1..4 + DoD §D12: Touch-Targets ≥44px auf Mobile.
   Verletzte Selektoren laut Iteration-1-Audit: Topbar-iconbtns 36×36, User-Chip,
   Drawer-Navlinks 31px, Dashboard-Listen-Items 17px, Karten-Close 25×22. */
@media (pointer: coarse), (max-width: 800px) {
    .topbar .iconbtn,
    .iconbtn,
    #user-chip {
        min-width: 44px;
        min-height: 44px;
    }
    .sidenav .navlink,
    .sidenav-group-title {
        min-height: 44px;
        padding: 10px 14px;
    }
    .sidenav-collapse,
    #sidenav-collapse { display: none; }
    .btn-icon,
    .modal .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
    /* Dashboard-Listen-Items (Veranstaltungen, Schichten, Sitzungen) ≥44px */
    .dash-list a,
    .dash-quicklink,
    .dash-chat-prompt {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 12px;
    }
    /* Onboarding-Card-Anker */
    .dash-onboarding a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 10px;
    }
    .onboarding-close {
        min-width: 44px;
        min-height: 44px;
    }
    /* Mob-detail Buttons hinter Bottombar entzerren */
    .mob-detail,
    .module-detail {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
    }
}

/* ux-auditor B3: Dark-Mode-Surface-Tokens greifen für ALLE Modal-Implementierungen.
   Vorher überschrieb nur .modal — die modul-spezifischen Klassen
   (.sitz-modal-*, .kand-modal-*) blieben auf weiss → Kontrast < 3:1. */
[data-theme="dark"] {
    --card-bg: var(--surface);
    --modal-bg: var(--surface);
}
[data-theme="dark"] .modal,
[data-theme="dark"] .sitz-modal-form,
[data-theme="dark"] .kand-modal,
[data-theme="dark"] .modal-content {
    background: var(--surface);
    color: var(--text);
}
[data-theme="dark"] .modal label,
[data-theme="dark"] .modal .modal-title,
[data-theme="dark"] .modal h2,
[data-theme="dark"] .sitz-modal-form label,
[data-theme="dark"] .sitz-modal-form h2,
[data-theme="dark"] .kand-modal label,
[data-theme="dark"] .kand-modal h2 {
    color: var(--text);
}