/* == css/base.css == */
/* ── CI Color System: Orange + White / Orange + Anthracite ───────────────
   Light mode (default): white backgrounds, orange accents
   Dark  mode (OS pref or [data-theme="dark"]): near-black surfaces, orange accents
   Sidebar stays dark in both modes for strong brand contrast.
──────────────────────────────────────────────────────────────────────── */

/* ── Light mode — default ─────────────────────────────────────────────── */
:root {
    color-scheme: light dark;

    /* Brand orange */
    --accent:        #F97316;    /* Orange-500 – buttons, CTAs, highlights */
    --accent-strong: #EA580C;    /* Orange-600 – hover, borders, text on white */
    --accent-soft:   rgba(249, 115, 22, 0.10);
    --accent-soft-2: rgba(249, 115, 22, 0.18);

    /* Backgrounds */
    --bg:   #FFFFFF;
    --bg-2: #F8F8F8;
    --bg-3: #F1F1F1;

    /* Content surfaces */
    --surface:       #FFFFFF;
    --surface-solid: #FFFFFF;
    --surface-2:     #F5F5F5;
    --surface-3:     #EEEEEE;
    --surface-muted: #E5E5E5;
    --surface-soft:  #DCDCDC;
    --surface-hover: #D2D2D2;

    /* Sidebar — light mode */
    --sidebar:            #FFFFFF;
    --sidebar-2:          #FAFAFA;
    --sidebar-3:          #F3F3F3;
    --sidebar-text:       #111111;
    --sidebar-text-muted: #666666;
    --sidebar-border:     rgba(0, 0, 0, 0.08);

    /* Nav active / pill */
    --nav-active-text:    #111111;
    --sidebar-pill-bg:    rgba(0, 0, 0, 0.04);
    --sidebar-pill-border: rgba(0, 0, 0, 0.08);

    /* Nav item overlay colours (light sidebar uses dark-alpha) */
    --nav-icon-bg:            rgba(0, 0, 0, 0.05);
    --nav-icon-border:        rgba(0, 0, 0, 0.07);
    --nav-hover-bg:           rgba(0, 0, 0, 0.045);
    --nav-hover-border:       rgba(0, 0, 0, 0.07);
    --nav-hover-color:        #111111;
    --nav-hover-icon-bg:      rgba(0, 0, 0, 0.07);
    --nav-hover-icon-border:  rgba(0, 0, 0, 0.10);
    /* Aktiver Eintrag: Akzent nur hier, in beiden Themes gleich */
    --nav-active-border:      rgba(249, 115, 22, 0.28);
    --nav-active-icon-bg:     rgba(249, 115, 22, 0.22);
    --nav-active-icon-border: rgba(249, 115, 22, 0.38);
    --nav-pill-bg:            rgba(0, 0, 0, 0.06);
    --nav-pill-border:        rgba(0, 0, 0, 0.10);
    --nav-thumb-bg:           rgba(0, 0, 0, 0.28);

    /* Borders */
    --border:        rgba(0, 0, 0, 0.09);
    --border-soft:   rgba(0, 0, 0, 0.05);
    --border-strong: rgba(0, 0, 0, 0.16);

    /* Text */
    --text-1: #111111;
    --text-2: #2E2E2E;
    --text-3: #6B6B6B;
    --text-4: #A8A8A8;

    /* Semantic status colors */
    --success:      #16A34A;
    --success-soft: rgba(22, 163, 74, 0.10);
    --warning:      #D97706;
    --warning-soft: rgba(217, 119, 6, 0.10);
    --danger:       #DC2626;
    --danger-soft:  rgba(220, 38, 38, 0.10);
    --info:         #2563EB;
    --info-soft:    rgba(37, 99, 235, 0.10);

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.13);

    /* Kantenlicht — farbtragende Flächen zeigen ihre Trägerfarbe nur leicht
       im 1px-Rahmen. Einen farbigen Lichtschein gibt es bewusst nicht mehr:
       die --edge-light-Werte sind ein Schatten ohne Ausdehnung, damit die
       bestehenden box-shadow-Listen gültig bleiben und nichts zeichnen.
       Anwenden: --edge-tint auf die Trägerfarbe setzen, dann
         border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
         box-shadow: var(--edge-light) var(--edge-tint), var(--shadow-xs);
       --edge-light-sm ist die Variante für Zeilen und kompakte Flächen. */
    --edge-tint: var(--accent);
    --edge-border: 22%;
    --edge-border-hover: 40%;
    --edge-light: 0 0 0 0;
    --edge-light-hover: 0 0 0 0;
    --edge-light-sm: 0 0 0 0;

    /* Radii */
    --r-xs: 4px;
    --r-sm: 7px;
    --r:    10px;
    --r-md: 13px;
    --r-lg: 16px;
    --r-xl: 20px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* Motion */
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    --content-max: 1440px;
}

/* ── Dark mode — OS preference ────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* Brand orange shifts slightly lighter for dark surfaces */
        --accent:        #FB923C;    /* Orange-400 */
        --accent-strong: #F97316;    /* Orange-500 */
        --accent-soft:   rgba(251, 146, 60, 0.13);
        --accent-soft-2: rgba(251, 146, 60, 0.22);

        --bg:   #0E0E0E;
        --bg-2: #141414;
        --bg-3: #1A1A1A;

        --surface:       #1C1C1C;
        --surface-solid: #1C1C1C;
        --surface-2:     #252525;
        --surface-3:     #2E2E2E;
        --surface-muted: #383838;
        --surface-soft:  #424242;
        --surface-hover: #4C4C4C;

        --sidebar:            #0E0E0E;
        --sidebar-2:          #121212;
        --sidebar-3:          #181818;
        --sidebar-text:       #F0F0F0;
        --sidebar-text-muted: #777777;
        --sidebar-border:     rgba(255, 255, 255, 0.06);

        --nav-active-text:    #ffffff;
        --sidebar-pill-bg:    rgba(255, 255, 255, 0.04);
        --sidebar-pill-border: rgba(255, 255, 255, 0.06);

        --nav-icon-bg:            rgba(255, 255, 255, 0.07);
        --nav-icon-border:        rgba(255, 255, 255, 0.09);
        --nav-hover-bg:           rgba(255, 255, 255, 0.10);
        --nav-hover-border:       rgba(255, 255, 255, 0.10);
        --nav-hover-color:        #ffffff;
        --nav-hover-icon-bg:      rgba(255, 255, 255, 0.12);
        --nav-hover-icon-border:  rgba(255, 255, 255, 0.13);
        --nav-pill-bg:            rgba(255, 255, 255, 0.11);
        --nav-pill-border:        rgba(255, 255, 255, 0.16);
        --nav-thumb-bg:           rgba(255, 255, 255, 0.50);

        --border:        rgba(255, 255, 255, 0.08);
        --border-soft:   rgba(255, 255, 255, 0.05);
        --border-strong: rgba(255, 255, 255, 0.14);

        --text-1: #EFEFEF;
        --text-2: #C8C8C8;
        --text-3: #858585;
        --text-4: #525252;

        --success:      #22C55E;
        --success-soft: rgba(34, 197, 94, 0.13);
        --warning:      #F59E0B;
        --warning-soft: rgba(245, 158, 11, 0.13);
        --danger:       #F87171;
        --danger-soft:  rgba(248, 113, 113, 0.13);
        --info:         #60A5FA;
        --info-soft:    rgba(96, 165, 250, 0.13);

        --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.32);
        --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.38);
        --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.44);
        --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.52);
    }
}

/* ── Manual theme overrides (for future toggle) ───────────────────────── */
[data-theme="dark"] {
    color-scheme: dark;

    --accent:        #FB923C;
    --accent-strong: #F97316;
    --accent-soft:   rgba(251, 146, 60, 0.13);
    --accent-soft-2: rgba(251, 146, 60, 0.22);

    --bg:   #0E0E0E;
    --bg-2: #141414;
    --bg-3: #1A1A1A;

    --surface:       #1C1C1C;
    --surface-solid: #1C1C1C;
    --surface-2:     #252525;
    --surface-3:     #2E2E2E;
    --surface-muted: #383838;
    --surface-soft:  #424242;
    --surface-hover: #4C4C4C;

    --sidebar:            #0E0E0E;
    --sidebar-2:          #121212;
    --sidebar-3:          #181818;
    --sidebar-text:       #F0F0F0;
    --sidebar-text-muted: #777777;
    --sidebar-border:     rgba(255, 255, 255, 0.06);

    --nav-active-text:    #ffffff;
    --sidebar-pill-bg:    rgba(255, 255, 255, 0.04);
    --sidebar-pill-border: rgba(255, 255, 255, 0.06);

    --nav-icon-bg:            rgba(255, 255, 255, 0.07);
    --nav-icon-border:        rgba(255, 255, 255, 0.09);
    --nav-hover-bg:           rgba(255, 255, 255, 0.10);
    --nav-hover-border:       rgba(255, 255, 255, 0.10);
    --nav-hover-color:        #ffffff;
    --nav-hover-icon-bg:      rgba(255, 255, 255, 0.12);
    --nav-hover-icon-border:  rgba(255, 255, 255, 0.13);
    --nav-pill-bg:            rgba(255, 255, 255, 0.11);
    --nav-pill-border:        rgba(255, 255, 255, 0.16);
    --nav-thumb-bg:           rgba(255, 255, 255, 0.50);

    --border:        rgba(255, 255, 255, 0.08);
    --border-soft:   rgba(255, 255, 255, 0.05);
    --border-strong: rgba(255, 255, 255, 0.14);

    --text-1: #EFEFEF;
    --text-2: #C8C8C8;
    --text-3: #858585;
    --text-4: #525252;

    --success:      #22C55E;
    --success-soft: rgba(34, 197, 94, 0.13);
    --warning:      #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.13);
    --danger:       #F87171;
    --danger-soft:  rgba(248, 113, 113, 0.13);
    --info:         #60A5FA;
    --info-soft:    rgba(96, 165, 250, 0.13);

    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.32);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.38);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.44);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.52);
}

/* ── Reset ────────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    height: 100dvh;
}

html {
    background: var(--bg);
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}

button, input, select, textarea {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 12px;
    z-index: 500;
    background: var(--accent);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    transition: top 0.14s ease;
}
.skip-link:focus {
    top: 0;
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(249, 115, 22, 0.80);
    outline-offset: 2px;
}

/* == css/layout.css == */
/* Layout */

.app-shell {
    display: flex;
    flex-direction: row;
    height: 100vh;
    height: 100dvh;
}

.sidebar {
    position: relative;
    flex-shrink: 0;
    width: 270px;
    min-height: 0;
    overflow: visible;
    transition: width var(--dur) var(--ease);
    background: var(--sidebar);
    color: var(--sidebar-text);
    padding: 24px 18px 24px;
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.main-content {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: 30px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.content-frame,
.main-content > * {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
}

/* Sidebar */

.logo-section {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 5px 11px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sidebar-border);
}

/* ── Sidebar collapse toggle ──────────────────────────────────── */

.sidebar-toggle-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--nav-icon-bg);
    border: 1px solid var(--sidebar-border);
    color: var(--sidebar-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-toggle-btn:hover {
    background: var(--nav-hover-bg);
    color: var(--sidebar-text);
    border-color: var(--nav-hover-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Niedrige Fenster: Untertitel weglassen, damit die Navigation ohne Scrollen passt. */
@media (min-width: 981px) and (max-height: 760px) {
    .logo-sub {
        display: none;
    }

    .logo-section {
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
}

/* ── Collapsed state ──────────────────────────────────────────── */

@media (min-width: 981px) {
    body.sidebar-collapsed .sidebar {
        width: 64px;
        padding-inline: 8px;
    }

    body.sidebar-collapsed .sidebar-toggle-btn {
        transform: translateY(-50%) rotate(180deg);
        right: 8px;
    }

    body.sidebar-collapsed .logo-img {
        width: 0;
        opacity: 0;
        transition: width 0.2s ease, opacity 0.15s ease;
    }

    body.sidebar-collapsed .logo-img-wrap {
        display: none;
    }

    body.sidebar-collapsed .logo-sub {
        opacity: 0;
        height: 0;
        margin: 0;
        transition: opacity 0.12s ease, height 0.2s ease;
    }

    body.sidebar-collapsed .logo-section {
        padding: 5px 5px 14px;
        min-height: 48px;
        justify-content: center;
    }

    body.sidebar-collapsed .nav-label {
        opacity: 0;
        transition: opacity 0.12s ease;
    }

    /* Eingeklappt: keine sichtbare Scrollleiste (sie nähme den 48px
       schmalen Inhalt ein und verschöbe die Icons), Scrollen per Rad bleibt. */
    body.sidebar-collapsed .nav-menu {
        gap: 0;
        scrollbar-width: none;
    }

    body.sidebar-collapsed .nav-menu::-webkit-scrollbar {
        display: none;
    }

    /* Statt der ausgeblendeten Gruppen-Labels trennt eine feine Linie. */
    body.sidebar-collapsed .nav-group + .nav-group {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--sidebar-border);
    }

    body.sidebar-collapsed .nav-group {
        gap: 2px;
    }

    /* Der Zustand liegt allein am Icon-Chip; die Zeile selbst bleibt leer,
       damit Hover und Aktiv als gleich große Quadrate erscheinen. */
    body.sidebar-collapsed .nav-item,
    body.sidebar-collapsed .nav-item:hover,
    body.sidebar-collapsed .nav-item.active {
        padding: 3px 0;
        justify-content: center;
        width: 100%;
        background: transparent;
        border-color: transparent;
        overflow: visible;
    }

    body.sidebar-collapsed .nav-icon {
        position: relative;
        margin-right: 0;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 15px;
        background: transparent;
        border-color: transparent;
    }

    body.sidebar-collapsed .nav-item:hover .nav-icon {
        background: var(--nav-hover-icon-bg);
        border-color: var(--nav-hover-icon-border);
        color: var(--sidebar-text);
    }

    body.sidebar-collapsed .nav-item.active .nav-icon {
        background: var(--nav-active-icon-bg);
        border-color: var(--nav-active-icon-border);
        color: var(--accent-strong);
    }

    body.sidebar-collapsed .nav-item:focus-visible {
        outline: none;
    }

    body.sidebar-collapsed .nav-item:focus-visible .nav-icon {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

    body.sidebar-collapsed .nav-group-label {
        opacity: 0;
        height: 0;
        margin-bottom: 0;
        padding: 0;
    }

    /* Zahl-Abzeichen werden eingeklappt zu einem Punkt oben rechts am Icon. */
    body.sidebar-collapsed .nav-badge {
        position: absolute;
        top: 3px;
        left: calc(50% + 11px);
        min-width: 0;
        width: 8px;
        height: 8px;
        padding: 0;
        font-size: 0;
        background: var(--accent);
        box-shadow: 0 0 0 2px var(--sidebar);
        pointer-events: none;
    }

    body.sidebar-collapsed .nav-label {
        width: 0;
        overflow: hidden;
    }

    body.sidebar-collapsed .sidebar-footer {
        padding-top: 10px;
    }

    body.sidebar-collapsed .sidebar-user {
        justify-content: center;
        padding: 6px;
    }

    body.sidebar-collapsed .sidebar-user .user-name,
    body.sidebar-collapsed .sidebar-user .user-caret,
    body.sidebar-collapsed .sidebar-legal-links,
    body.sidebar-collapsed .status-pill {
        display: none;
    }

    body.sidebar-collapsed .user-menu {
        width: 230px;
        right: auto;
    }
}

.logo-img-wrap {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    margin: 0;
    background: #1A1A1A;
    border: none;
    border-radius: 10px;
    box-shadow: none;
}

.logo-img {
    display: block;
    width: 150px;
    height: auto;
    object-fit: contain;
}

.logo-sub {
    font-size: 11.5px;
    color: var(--sidebar-text-muted);
    font-weight: 500;
    padding-left: 2px;
    letter-spacing: 0.01em;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 18px;
}

/* Die Leiste liegt im rechten Sidebar-Innenabstand statt über den Einträgen;
   der reservierte Platz hält die Einträge gleich breit, ob sie scrollt oder nicht. */
@media (min-width: 981px) {
    .nav-menu {
        margin-right: -12px;
        padding-right: 6px;
        scrollbar-gutter: stable;
    }

    body.sidebar-collapsed .nav-menu {
        margin-right: 0;
        padding-right: 0;
        scrollbar-gutter: auto;
    }
}

/* Schmale Leiste ohne Pfeiltasten, Daumen dezent, beim Überfahren deutlicher.
   Chrome ignoriert ::-webkit-scrollbar, sobald scrollbar-width/-color gesetzt
   sind; deshalb gelten diese nur für Browser ohne die Pseudo-Elemente (Firefox). */
.nav-menu::-webkit-scrollbar {
    width: 6px;
}

.nav-menu::-webkit-scrollbar-button {
    display: none;
}

.nav-menu::-webkit-scrollbar-track {
    background: transparent;
}

.nav-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--sidebar-text-muted) 25%, transparent);
}

.nav-menu:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--sidebar-text-muted) 50%, transparent);
}

.nav-menu::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-text-muted);
}

@supports not selector(::-webkit-scrollbar) {
    .nav-menu {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--sidebar-text-muted) 25%, transparent) transparent;
    }

    .nav-menu:hover {
        scrollbar-color: color-mix(in srgb, var(--sidebar-text-muted) 50%, transparent) transparent;
    }
}

.nav-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 4px;
}

.nav-group-label {
    padding: 0 14px;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--sidebar-text-muted);
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--dur-fast) ease;
}

.nav-badge {
    flex-shrink: 0;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-soft-2);
    color: var(--accent-strong);
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

.nav-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--sidebar-text-muted);
    text-align: left;
    padding: 10px 14px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition:
        background var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        color var(--dur-fast) ease,
        padding var(--dur) var(--ease);
}

/* Nav icon chip */
.nav-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1;
    margin-right: 10px;
    background: var(--nav-icon-bg);
    border: 1px solid var(--nav-icon-border);
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        margin-right 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item:hover .nav-icon {
    background: var(--nav-hover-icon-bg);
    border-color: var(--nav-hover-icon-border);
}

.nav-item.active .nav-icon {
    background: var(--nav-active-icon-bg);
    border-color: var(--nav-active-icon-border);
    color: var(--accent-strong);
}

.nav-item:hover {
    background: var(--nav-hover-bg);
    border-color: var(--nav-hover-border);
    color: var(--nav-hover-color);
}

.nav-item.active {
    color: var(--nav-active-text, #fff);
    background: var(--accent-soft);
    border-color: var(--nav-active-border);
}

/* ── User menu (sidebar footer) ───────────────────────────────── */

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--sidebar-border);
    background: var(--sidebar-pill-bg);
    color: var(--sidebar-text);
    cursor: pointer;
    text-align: left;
    margin-bottom: 10px;
    transition:
        background var(--dur-fast) ease,
        border-color var(--dur-fast) ease;
}

.sidebar-user:hover {
    background: var(--nav-hover-bg);
    border-color: var(--nav-hover-border);
}

.user-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-soft-2);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.user-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-caret {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--sidebar-text-muted);
    transition: transform var(--dur-fast) ease;
}

.sidebar-user[aria-expanded="true"] .user-caret {
    transform: rotate(180deg);
}

.user-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface-solid);
    box-shadow: var(--shadow-lg);
}

.user-menu[hidden] {
    display: none;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    transition:
        background var(--dur-fast) ease,
        color var(--dur-fast) ease;
}

.user-menu-item:hover {
    background: var(--surface-2);
    color: var(--text-1);
}

.user-menu-item--danger {
    color: var(--danger);
}

.user-menu-item--danger:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.menu-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: var(--text-3);
}

.user-menu-item--danger .menu-icon {
    color: inherit;
}

.menu-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--border-soft);
}

/* Pill switch */

.nav-theme-pill {
    margin-left: auto;
    flex-shrink: 0;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--nav-pill-bg);
    border: 1px solid var(--nav-pill-border);
    position: relative;
    pointer-events: none;
    transition:
        background 0.22s ease,
        border-color 0.22s ease;
}

.nav-theme-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--nav-thumb-bg);
    transition:
        transform 0.22s ease,
        background 0.22s ease;
}

/* Dark state via data-theme on html */
[data-theme="dark"] .nav-theme-pill {
    background: rgba(251, 146, 60, 0.26);
    border-color: rgba(251, 146, 60, 0.38);
}

[data-theme="dark"] .nav-theme-thumb {
    transform: translateX(16px);
    background: #FB923C;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav-theme-pill {
        background: rgba(251, 146, 60, 0.26);
        border-color: rgba(251, 146, 60, 0.38);
    }

    :root:not([data-theme="light"]) .nav-theme-thumb {
        transform: translateX(16px);
        background: #FB923C;
    }
}

.nav-lang-pill {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--nav-pill-bg);
    border: 1px solid var(--nav-pill-border);
    border-radius: 999px;
    padding: 2px 4px;
    pointer-events: none;
}

.nav-lang-opt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 999px;
    color: var(--text-3);
    transition: background 0.18s ease, color 0.18s ease;
}

.nav-lang-opt.active {
    background: var(--accent);
    color: #fff;
}

.sidebar-footer {
    position: relative;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-legal-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.sidebar-legal-links a {
    color: var(--sidebar-text-muted);
    font-size: 10.5px;
    text-decoration: none;
}

.sidebar-legal-links a:hover {
    color: var(--sidebar-text);
}

.status-pill[hidden] {
    display: none;
}

.status-pill {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sidebar-pill-bg);
    color: var(--sidebar-text-muted);
    border: 1px solid var(--sidebar-pill-border);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.status-pill.offline {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger-soft);
}

.status-pill::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

/* Topbar */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.topbar > div {
    min-width: 0;
}

.topbar h2,
.topbar p {
    overflow-wrap: anywhere;
}

.breadcrumb {
    margin-bottom: 10px;
}

.topbar h2 {
    font-size: 28px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-1);
    margin-bottom: 6px;
}

.topbar p {
    max-width: 780px;
    font-size: 13px;
    color: var(--text-4);
    line-height: 1.55;
}

/* == css/components.css == */
/* Buttons */

.btn-primary,
.btn-secondary,
.btn-danger,
.copy-btn,
.cat-filter-btn,
.day-type-btn {
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.12s ease;
}

.btn-primary {
    height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(249, 115, 22, 0.20);
    border-radius: 9px;
    background: var(--accent);
    color: #ffffff;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}
.btn-primary:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}

.btn-secondary {
    height: 44px;
    padding: 0 18px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}
.btn-secondary:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
    transform: translateY(-1px);
}

.btn-danger {
    height: 44px;
    padding: 0 18px;
    border-radius: 9px;
    border: 1px solid rgba(224, 78, 100, 0.30);
    background: var(--danger-soft);
    color: #f0a8b4;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
}
.btn-danger:hover {
    background: rgba(224, 78, 100, 0.22);
    transform: translateY(-1px);
}

.btn-sm {
    height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
}

.btn-json-export {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: none;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.12s ease;
}
.btn-json-export:hover {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.34);
    color: var(--accent-strong);
    box-shadow: none;
    transform: translateY(-1px);
}
.btn-json-export:active {
    transform: translateY(0);
}
.btn-json-export--primary {
    min-height: 44px;
    padding: 0 20px;
    border-color: rgba(249, 115, 22, 0.26);
    background: var(--accent);
    color: #ffffff;
    font-size: 13.5px;
    box-shadow: var(--shadow-xs);
}
.btn-json-export--primary:hover {
    background: var(--accent-strong);
    border-color: rgba(249, 115, 22, 0.34);
    color: #ffffff;
}
.btn-json-export.btn-sm {
    height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xs);
}
.btn-icon:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-4);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.16s ease;
}
.btn-link:hover {
    color: var(--text-2);
}

/* Panels */

.panel,
.section-block,
.project-list-card,
.note-card,
.prompt-card,
.cal-day,
.day-budget {
    background: var(--surface);
}

.panel {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-xs);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.panel-header h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-1);
}

.empty-hint {
    color: var(--text-4);
    font-size: 13px;
    font-weight: 500;
    padding: 32px 20px;
    text-align: center;
    border: 1px dashed var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    line-height: 1.6;
}

/* Tight variant — used inside panels that already provide context */
.panel > .empty-hint,
.section-block .empty-hint {
    padding: 16px 12px;
    border: none;
    background: none;
    text-align: left;
}

.loading {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text-3);
    font-size: 13px;
    padding: 10px 0;
}

.loading::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: inline-loader-spin 0.75s linear infinite;
}

@keyframes inline-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loading::before { animation: none; }
}

/* Stat cards */

.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card {
    position: relative;
    padding: 22px 22px 20px;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    cursor: pointer;
}

.stat-card-accent {
    width: 38px;
    height: 5px;
    border-radius: 999px;
    margin-bottom: 14px;
    opacity: 0.98;
}

.stat-card-value {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.06em;
    color: var(--text-1);
    margin-bottom: 8px;
}

.stat-card-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Progress bars */

.progress-bar,
.section-prog-bar,
.cal-bar,
.budget-bar {
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    height: 7px;
    margin-bottom: 8px;
}

.progress-fill,
.section-prog-fill,
.cal-bar-fill,
.budget-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

/* Badges and chips */

.task-work-mode-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    white-space: nowrap;
}

.task-work-mode-badge--exploration {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border-soft));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}

.task-work-mode-badge--planning {
    color: var(--text-2);
    border-color: var(--border);
    background: var(--surface-3);
}

.task-work-mode-badge--verification {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 32%, var(--border-soft));
    background: color-mix(in srgb, var(--success) 8%, var(--surface-2));
}

/* Task wartet auf eine Entscheidung: Link nach #decisions/<dec_id>.
   Offen = Wartezustand (Warnton), beantwortet = ruhig. */
.task-decision-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
}

.task-decision-chip:hover,
.task-decision-chip:focus-visible {
    border-color: var(--border-strong);
    color: var(--text-1);
}

.task-decision-chip--open {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 32%, var(--border-soft));
    background: var(--warning-soft);
}

.prompt-cat-badge,
.prompt-model-badge,
.step-status-tag,
.planned-chip,
.cal-type,
.tag-chip,
.step-pill,
.col-count,
.section-count {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-weight: 700;
}

.step-status-tag {
    padding: 4px 8px;
    font-size: 10.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.step-pill {
    padding: 4px 8px;
    font-size: 11px;
    color: var(--text-2);
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
    gap: 4px;
}

.step-pill--ist {
    cursor: default;
}

.step-pill--section {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-4);
    font-style: italic;
}

.planned-chip {
    padding: 4px 8px;
    font-size: 10.5px;
    color: var(--info);
    background: var(--info-soft);
    border: 1px solid rgba(37, 99, 235, 0.22);
}

/* Executor badge: Human / AI (Step-Karten auf Board, Today usw.) */
.executor-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
    line-height: 1.2;
    user-select: none;
    white-space: nowrap;
}

.executor-badge--human {
    color: var(--text-2);
    background: var(--surface-2);
    border-color: var(--border);
}

.executor-badge--human:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
}

.executor-badge--ai {
    color: #0891b2;
    background: rgba(8, 145, 178, 0.08);
    border-color: rgba(8, 145, 178, 0.3);
}

.executor-badge--ai:hover {
    background: rgba(8, 145, 178, 0.16);
    border-color: rgba(8, 145, 178, 0.5);
}

/* Recurrence badge (step cards) */
.recurrence-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: var(--accent);
    background: rgba(99, 102, 241, 0.08);
    vertical-align: middle;
    margin-left: 6px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Filter Panel: Executor Toggle Buttons (Export-Panels) ─── */
.fp-exec-label {
    display: inline-flex;
    position: relative;
    cursor: pointer;
    max-width: 100%;
}

.fp-exec-label input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.fp-exec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-3);
    transition: all 0.14s;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    min-width: 58px;
    pointer-events: none;
}

.fp-exec-label input[type="radio"]:focus-visible + .fp-exec-btn {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fp-exec-btn:hover {
    border-color: var(--border-strong);
    color: var(--text-2);
    background: var(--surface-2);
}

.fp-exec-btn--human { }

.fp-exec-btn--ai { }

.fp-exec-btn--instr {
    min-width: auto;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

.fp-exec-label input[type="radio"]:checked + .fp-exec-btn {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-1);
    box-shadow: 0 0 0 1.5px var(--accent);
}

.fp-exec-label input[type="radio"]:checked + .fp-exec-btn--human {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
    box-shadow: 0 0 0 1.5px var(--border-strong);
}

.fp-exec-label input[type="radio"]:checked + .fp-exec-btn--ai {
    background: rgba(8, 145, 178, 0.12);
    border-color: #0891b2;
    color: #0891b2;
    box-shadow: 0 0 0 1.5px #0891b2;
}

/* ── Filter Panel: Story Chips ──────────────────────────────── */
.fp-story-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1.5px solid var(--border);
    background: var(--surface-3);
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.14s;
    user-select: none;
    white-space: nowrap;
}

.fp-story-chip:hover {
    border-color: var(--accent);
    color: var(--text-1);
    background: var(--accent-soft);
}

.fp-story-chip--off {
    opacity: 0.38;
    border-style: dashed;
    background: var(--surface-2);
    color: var(--text-4);
    text-decoration: line-through;
}

.fp-story-chip--off:hover {
    opacity: 0.7;
    text-decoration: none;
    border-style: solid;
}

.tag-chip {
    padding: 4px 8px;
    font-size: 10.5px;
    color: var(--text-2);
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
}

/* Status tags */

.status-offen {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid rgba(249, 115, 22, 0.24);
}
.status-in_arbeit {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid rgba(212, 149, 46, 0.24);
}
.status-erledigt {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid rgba(28, 184, 112, 0.24);
}

/* Step check button */

.step-check {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--surface-2);
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        transform 0.12s ease,
        box-shadow 0.16s ease;
}

.step-check:hover {
    transform: scale(1.04);
}

.step-check--offen {
    border-color: rgba(249, 115, 22, 0.52);
}
.step-check--offen:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.10);
}
.step-check--in_arbeit {
    border-color: rgba(212, 149, 46, 0.52);
    background: rgba(212, 149, 46, 0.08);
}
.step-check--in_arbeit:hover {
    border-color: var(--warning);
}
.step-check--erledigt {
    border-color: rgba(28, 184, 112, 0.52);
    background: var(--success-soft);
}
.step-check--erledigt::after {
    content: "✓";
    font-size: 10px;
    font-weight: 800;
    color: var(--success);
}

/* Inline number input */

.inline-num {
    width: 34px;
    border: none;
    background: transparent;
    color: var(--text-2);
    font-size: 11.5px;
    text-align: right;
    padding: 0;
    -moz-appearance: textfield;
}
.inline-num::-webkit-inner-spin-button,
.inline-num::-webkit-outer-spin-button {
    opacity: 0;
}
.inline-num:focus {
    outline: 1px solid rgba(249, 115, 22, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Loading and misc */

.step-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}
.step-row:last-child {
    border-bottom: none;
}
.step-row.step-done {
    opacity: 0.54;
}
.step-row.step-done .step-title {
    text-decoration: line-through;
}
.step-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-1);
    font-weight: 600;
}

.notes-section-label,
.prompt-section-label {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.label-optional {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-4);
    margin-left: 3px;
}

/* Week navigation in the dashboard */

.week-nav-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.week-nav-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
    padding: 0 4px;
}

.btn-icon-sm {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
    line-height: 1;
}
.btn-icon-sm:hover {
    background: var(--surface-2);
    color: var(--text-1);
}

/* Two-click confirm state */

.btn-confirm-pending {
    background: var(--warning-soft) !important;
    border-color: rgba(212, 149, 46, 0.38) !important;
    color: var(--warning) !important;
    transform: none !important;
}

/* View fade-in transition */

@keyframes view-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; }
}

.view-fade-in {
    /* fill "backwards" statt "both": Sobald transform in den Keyframes
       vorkommt, hält ein Forwards-Fill nach Animationsende die interpolierte
       End-Matrix (matrix(1,0,0,1,0,0) ≠ "none") dauerhaft am Wrapper — auch
       ohne transform im End-Frame. Das spannt einen Containing-Block auf, der
       position:fixed-Kinder (z. B. die herausgelöste Historie-Karte + ihr
       Backdrop) an den Wrapper statt ans Viewport bindet. */
    animation: view-fade-in 0.22s ease backwards;
    /* Bewusst KEIN will-change: transform — das würde ebenfalls einen
       Containing-Block für fixed-positionierte Nachfahren aufspannen. */
    will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
    .view-fade-in { animation: none; }
}

.assignee-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:999px; background:var(--surface-2); color:var(--text-2); font-size:11px; font-weight:600; }

/* == css/components/tokens.css == */
/* ==========================================================================
   tp-tokens — Design-Tokens der Komponenten-Library
   --------------------------------------------------------------------------
   Alle Werte leiten sich aus den Theme-Variablen in base.css ab (--accent,
   --surface, --border, ...). Dadurch folgen die Komponenten automatisch dem
   Light-/Dark-Theme, ohne dass hier pro Theme ein eigener Block nötig ist.

   Konvention: Klassen der Library tragen den Präfix `tp-` und folgen BEM
   (`tp-block__element--modifier`). Zustände werden als Modifier gesetzt,
   nicht über Utility-Klassen.
   ========================================================================== */

:root {
    /* ── Fokus-Ring ──────────────────────────────────────────────────────
       Ein einziger Ring für alle interaktiven Komponenten. */
    --tp-focus-ring:   0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    --tp-focus-border: color-mix(in srgb, var(--accent) 60%, var(--border-strong));

    --tp-danger-ring:   0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
    --tp-danger-border: color-mix(in srgb, var(--danger) 55%, var(--border-strong));

    /* ── Kontrollhöhen ──────────────────────────────────────────────────
       Eine gemeinsame Höhe hält Inputs, Selects und Segmented-Controls in
       einer Zeile exakt bündig. */
    --tp-control-h:    38px;
    --tp-control-h-sm: 32px;

    /* ── Dialog-Geometrie ───────────────────────────────────────────────── */
    --tp-dialog-pad-x:   24px;
    --tp-dialog-pad-y:   18px;
    --tp-dialog-radius:  var(--r-lg);
    --tp-dialog-max-h:   min(94dvh, 1080px);
    --tp-dialog-side-w:  clamp(240px, 26%, 300px);

    /* Abstand zwischen Feldern innerhalb einer Spalte. */
    --tp-field-gap:    15px;
    --tp-fieldset-gap: 20px;
}

/* == css/components/dialog.css == */
/* ==========================================================================
   tp-dialog — Overlay-Dialog mit fixem Kopf, scrollendem Rumpf, fixem Fuß
   --------------------------------------------------------------------------
   Aufbau:

     .tp-dialog-overlay
       └── .tp-dialog[.tp-dialog--lg]
             ├── .tp-dialog__head    (bleibt sichtbar)
             ├── .tp-dialog__body    (einzige Scroll-Fläche)
             │     └── optional: __main + __aside bei --split
             └── .tp-dialog__foot    (bleibt sichtbar)

   Nur der Rumpf scrollt. Titel und Aktionen sind dadurch immer erreichbar —
   der Speichern-Button kann nicht aus dem Blick rutschen.
   ========================================================================== */

.tp-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3dvh, 28px) 20px;
    background: color-mix(in srgb, #0a101c 62%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tp-overlay-in 0.16s ease both;
}

@keyframes tp-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Shell ───────────────────────────────────────────────────────────────── */

.tp-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    max-width: 560px;                     /* --md, per Modifier überschrieben */
    max-height: var(--tp-dialog-max-h);
    min-height: 0;
    border-radius: var(--tp-dialog-radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;                     /* Scroll gehört dem Rumpf */
    animation: tp-dialog-in 0.2s cubic-bezier(0.34, 1.28, 0.64, 1) both;
}

@keyframes tp-dialog-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Das Formular muss das Raster der Shell erben, damit __body als einziges
   Element wächst und scrollt. */
.tp-dialog__form {
    display: contents;
}

/* ── Größen ──────────────────────────────────────────────────────────────── */

.tp-dialog--sm { max-width: 440px; }
.tp-dialog--md { max-width: 600px; }
.tp-dialog--lg { max-width: 880px; }
.tp-dialog--xl { max-width: 1240px; }

/* Ein Dialog mit wachsendem Textfeld (Notiz, Beschreibung, Kontext) nimmt
   die volle Höhe ein. Ohne feste Höhe hätte das `--grow`-Feld keine Resthöhe
   zu füllen und fiele auf seine Mindesthöhe zurück — der Text stünde dann in
   einem Schlitz, während der Bildschirm leer bleibt. */
.tp-dialog:has(.tp-field--grow) {
    height: var(--tp-dialog-max-h);
}

.tp-dialog--full {
    max-width: min(1560px, 96vw);
    max-height: min(94dvh, 960px);
    height: min(94dvh, 960px);
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */

.tp-dialog__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: var(--tp-dialog-pad-y) var(--tp-dialog-pad-x) 15px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}

.tp-dialog__headings {
    flex: 1;
    min-width: 0;
}

.tp-dialog__kicker {
    margin: 0 0 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.tp-dialog__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-1);
}

.tp-dialog__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-3);
}

/* Destruktive Bestätigung: der Kicker trägt die Warnfarbe, der Titel bleibt
   neutral lesbar. */
.tp-dialog--danger .tp-dialog__kicker {
    color: var(--danger);
}

.tp-dialog__close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -3px -6px 0 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-3);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.tp-dialog__close:hover {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-1);
}

.tp-dialog__close:focus-visible {
    outline: none;
    border-color: var(--tp-focus-border);
    box-shadow: var(--tp-focus-ring);
}

/* ── Rumpf ───────────────────────────────────────────────────────────────── */

.tp-dialog__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--tp-dialog-pad-y) var(--tp-dialog-pad-x);
}

/* Zweispaltig: Fließtext links, Metadaten in der rechten Schiene.
   Das Padding wandert in die Spalten, damit die Trennlinie durchläuft. */
.tp-dialog__body--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--tp-dialog-side-w);
    gap: 0;
    padding: 0;
}

.tp-dialog__main,
.tp-dialog__aside {
    min-width: 0;
    padding: var(--tp-dialog-pad-y) var(--tp-dialog-pad-x);
}

/* Der Hauptbereich ist eine Flex-Spalte, damit ein als `--grow` markiertes
   Textfeld die Resthöhe füllt statt eine feste Zeilenzahl zu behalten. */
.tp-dialog__main {
    display: flex;
    flex-direction: column;
    gap: var(--tp-field-gap);
}

.tp-dialog__aside {
    display: flex;
    flex-direction: column;
    gap: var(--tp-field-gap);
    border-left: 1px solid var(--border-soft);
    background: var(--surface-2);
}

/* ── Fuß ─────────────────────────────────────────────────────────────────── */

.tp-dialog__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px var(--tp-dialog-pad-x);
    border-top: 1px solid var(--border-soft);
    background: var(--surface);
}

/* Icon und Beschriftung bleiben in einer Zeile (svg ist global block). */
.tp-dialog__foot button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Destruktives links, bestätigendes rechts. */
.tp-dialog__foot-start {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Statuszeile (z. B. Zeichenzähler) neben den Aktionen. */
.tp-dialog__foot-note {
    margin-right: auto;
    font-size: 12px;
    color: var(--text-4);
}

/* ── Fehlermeldung des Submit-Vorgangs ───────────────────────────────────── */

.tp-dialog__error {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}

/* Im Fuß sitzt die Meldung links neben den Buttons. */
.tp-dialog__foot > .tp-dialog__error {
    margin-right: auto;
    padding: 7px 12px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Unterhalb dieser Breite bringt die Schiene keinen Gewinn mehr — sie würde
   nur schmaler werden. Stattdessen wandert sie unter den Hauptbereich. */
@media (max-width: 860px) {
    .tp-dialog__body--split {
        grid-template-columns: minmax(0, 1fr);
    }

    .tp-dialog__aside {
        border-left: none;
        border-top: 1px solid var(--border-soft);
    }

    /* Einspaltig scrollt der Rumpf als Ganzes; das Hauptfeld hat dann keine
       Resthöhe mehr, die es füllen könnte, und bekommt eine eigene. */
    .tp-dialog__body--split .tp-field--grow textarea.tp-field__control {
        min-height: 45dvh;
    }
}

@media (max-width: 560px) {
    :root {
        --tp-dialog-pad-x: 18px;
        --tp-dialog-pad-y: 16px;
    }

    .tp-dialog-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .tp-dialog,
    .tp-dialog--sm,
    .tp-dialog--md,
    .tp-dialog--lg,
    .tp-dialog--xl,
    .tp-dialog--full {
        max-width: 100%;
        height: auto;
        max-height: 96dvh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    /* Auf schmalen Geräten dürfen die Aktionen umbrechen statt zu quetschen. */
    .tp-dialog__foot {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-dialog-overlay,
    .tp-dialog {
        animation: none;
    }
}

/* == css/components/field.css == */
/* ==========================================================================
   tp-field — Formularfeld (Label + Kontrolle + Hinweis/Fehler)
   --------------------------------------------------------------------------
   Aufbau:

     .tp-field[.tp-field--error]
       ├── .tp-field__label       (optional mit __required / __optional)
       ├── input|select|textarea .tp-field__control
       ├── .tp-field__hint        (erklärender Text)
       └── .tp-field__error       (Validierungsmeldung)

   Layout-Helfer: .tp-field-row (nebeneinander), .tp-fieldset (Gruppe mit
   Überschrift). Die Kontrollhöhe kommt aus --tp-control-h, damit Inputs,
   Selects und Segmented-Controls in einer Zeile bündig sitzen.
   ========================================================================== */

.tp-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Label ───────────────────────────────────────────────────────────────── */

.tp-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text-2);
}

.tp-field__required::after {
    content: " *";
    color: var(--danger);
    font-weight: 700;
}

.tp-field__optional {
    margin-left: 4px;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--text-4);
}

/* ── Kontrolle ───────────────────────────────────────────────────────────── */

.tp-field__control {
    width: 100%;
    min-width: 0;
    min-height: var(--tp-control-h);
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-1);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition:
        border-color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}

.tp-field__control::placeholder {
    color: var(--text-4);
}

.tp-field__control:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: var(--border-strong);
}

.tp-field__control:focus {
    outline: none;
    border-color: var(--tp-focus-border);
    box-shadow: var(--tp-focus-ring);
    background: var(--surface);
}

.tp-field__control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tp-field__control[readonly] {
    color: var(--text-2);
    border-style: dashed;
    cursor: text;
}

/* Textbereiche ──────────────────────────────────────────────────────────── */

textarea.tp-field__control {
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
}

/* Füllt die Resthöhe der Spalte — dadurch bleibt der Dialog auf einer Seite,
   statt mit fester Zeilenzahl über den Rand zu wachsen. */
.tp-field--grow {
    flex: 1;
    min-height: 0;
}

/* Ein wachsendes Feld ist das Dokument des Dialogs (Notiz, Beschreibung,
   Kontext) — es bekommt Lesegröße und Luft statt Formularmaß. */
.tp-field--grow textarea.tp-field__control {
    flex: 1;
    height: 100%;
    min-height: 260px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.7;
    resize: none;
}

.tp-field--grow textarea.tp-field__control--mono {
    font-size: 13.5px;
    line-height: 1.65;
}

/* Auswahllisten ─────────────────────────────────────────────────────────── */

select.tp-field__control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    cursor: pointer;
    /* Chevron aus zwei Verläufen — folgt dem Theme über var(--text-3),
       ohne dass ein Icon-Asset geladen werden muss. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
        linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position:
        calc(100% - 17px) calc(50% - 1px),
        calc(100% - 12px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Datums-Eingaben ───────────────────────────────────────────────────────── */

input[type="date"].tp-field__control {
    cursor: pointer;
}

input[type="date"].tp-field__control::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease);
}

input[type="date"].tp-field__control::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Monospace-Variante für JSON, Tokens, Prompts ──────────────────────────── */

.tp-field__control--mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Hinweis & Fehler ────────────────────────────────────────────────────── */

.tp-field__hint {
    margin: 5px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-4);
}

.tp-field__error {
    margin: 5px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--danger);
}

.tp-field--error .tp-field__label {
    color: var(--danger);
}

.tp-field--error .tp-field__control {
    border-color: var(--tp-danger-border);
}

.tp-field--error .tp-field__control:focus {
    box-shadow: var(--tp-danger-ring);
}

/* ── Layout-Helfer ───────────────────────────────────────────────────────── */

/* Zwei (oder mehr) Felder nebeneinander. */
.tp-field-row {
    display: grid;
    grid-template-columns: repeat(var(--tp-row-cols, 2), minmax(0, 1fr));
    gap: var(--tp-field-gap);
    align-items: start;
}

.tp-field-row--3 { --tp-row-cols: 3; }

/* Vertikaler Stapel mit einheitlichem Abstand. */
.tp-field-stack {
    display: flex;
    flex-direction: column;
    gap: var(--tp-field-gap);
    min-width: 0;
}

/* Beschriftete Gruppe — ersetzt die frühere .form-section-Trennlinie.
   Wird als div[role=group] gerendert, nicht als fieldset/legend: ein <legend>
   verhält sich in Flex-Containern je nach Browser anders. */
.tp-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--tp-field-gap);
    min-width: 0;
}

.tp-fieldset + .tp-fieldset {
    margin-top: calc(var(--tp-fieldset-gap) - var(--tp-field-gap));
}

.tp-fieldset__legend {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-4);
}

.tp-fieldset__legend::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

@media (max-width: 560px) {
    .tp-field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* == css/components/segmented.css == */
/* ==========================================================================
   tp-segmented — Segmentierte Auswahl (Radiogroup als Button-Leiste)
   --------------------------------------------------------------------------
   Für kurze, sich ausschließende Auswahlen mit 2–4 Optionen (Executor,
   Status, Ansichtsmodus). Bei mehr Optionen ist ein Select die bessere Wahl.

     .tp-segmented[role="radiogroup"]
       └── label.tp-segmented__option
             ├── input[type=radio]      (visuell verborgen)
             └── span.tp-segmented__label

   Die Spaltenzahl kommt aus --tp-seg-cols und wird vom Builder gesetzt.
   Optionen können über --accent hinaus eingefärbt werden (siehe --ai).
   ========================================================================== */

.tp-segmented {
    display: grid;
    grid-template-columns: repeat(var(--tp-seg-cols, 2), minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    min-height: var(--tp-control-h);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.tp-segmented__option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.tp-segmented__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tp-segmented__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: calc(var(--tp-control-h) - 8px);
    padding: 0 8px;
    border-radius: calc(var(--r-sm) - 2px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease);
}

.tp-segmented__label:hover {
    color: var(--text-1);
}

.tp-segmented__option input:checked + .tp-segmented__label {
    background: var(--surface);
    color: var(--text-1);
    box-shadow: var(--shadow-xs);
}

.tp-segmented__option input:focus-visible + .tp-segmented__label {
    outline: none;
    box-shadow: var(--tp-focus-ring);
}

/* ── Farbige Varianten ───────────────────────────────────────────────────── */

/* Hebt die KI-Ausführung von der menschlichen ab, ohne eine zweite
   Komponente zu brauchen. */
.tp-segmented__option input:checked + .tp-segmented__label--ai {
    color: var(--info);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--info) 35%, transparent),
        var(--shadow-xs);
}

.tp-segmented__option input:checked + .tp-segmented__label--accent {
    color: var(--accent-strong);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent),
        var(--shadow-xs);
}

/* == css/components/swatch.css == */
/* ==========================================================================
   tp-swatch — Farbauswahl als Punktreihe
   --------------------------------------------------------------------------
     .tp-swatch-picker
       └── label.tp-swatch
             ├── input[type=radio]   (visuell verborgen)
             └── span.tp-swatch__dot (Farbe via --tp-swatch-color)

   Die Farbe kommt über eine Custom Property statt über ein style-Attribut auf
   dem Punkt, damit Hover- und Checked-Zustände sie weiterverwenden können.
   ========================================================================== */

.tp-swatch-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.tp-swatch {
    position: relative;
    display: block;
    cursor: pointer;
    line-height: 0;
}

.tp-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tp-swatch__dot {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tp-swatch-color, var(--accent));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
    transition:
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease);
}

.tp-swatch:hover .tp-swatch__dot {
    transform: scale(1.1);
}

/* Der Ring nimmt die Farbe des Punkts auf, statt einen neutralen Rahmen zu
   setzen — dadurch bleibt die Auswahl auch bei vielen Punkten eindeutig. */
.tp-swatch input:checked + .tp-swatch__dot {
    transform: scale(1.1);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        0 0 0 2px var(--surface),
        0 0 0 4px var(--tp-swatch-color, var(--accent));
}

.tp-swatch input:focus-visible + .tp-swatch__dot {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        0 0 0 2px var(--surface),
        0 0 0 4px var(--text-1);
}

/* In der Dialog-Schiene liegt der Punkt auf --surface-2; der Trennring muss
   dieselbe Fläche treffen, sonst entsteht ein heller Saum. */
.tp-dialog__aside .tp-swatch input:checked + .tp-swatch__dot,
.tp-dialog__aside .tp-swatch input:focus-visible + .tp-swatch__dot {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.10),
        0 0 0 2px var(--surface-2),
        0 0 0 4px var(--tp-swatch-color, var(--accent));
}

/* == css/components/choice.css == */
/* ==========================================================================
   tp-check / tp-option-list — Mehrfachauswahl und klickbare Listen
   --------------------------------------------------------------------------
   .tp-check       Einzelne Checkbox mit Beschriftung (auch als Karte)
   .tp-check-group Mehrere Checkboxen nebeneinander (Filterzeile)
   .tp-option-list Scrollbare Liste auswählbarer Zeilen (.tp-option)

   Die Liste begrenzt ihre Höhe selbst und scrollt intern, damit sie den
   Dialog nicht in die Länge zieht.
   ========================================================================== */

/* ── Checkbox ────────────────────────────────────────────────────────────── */

.tp-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.tp-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.tp-check__text {
    min-width: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-check:hover .tp-check__text {
    color: var(--text-1);
}

.tp-check input:focus-visible {
    outline: 2px solid var(--tp-focus-border);
    outline-offset: 2px;
}

/* Karten-Variante — für eine hervorgehobene Einzeloption. */
.tp-check--card {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-weight: 600;
    transition:
        border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}

.tp-check--card:hover {
    border-color: var(--border-strong);
}

.tp-check--card:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: var(--accent-soft);
}

/* ── Checkbox-Gruppe ─────────────────────────────────────────────────────── */

.tp-check-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

.tp-check-group--bar {
    padding: 9px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

/* Zwischenüberschrift innerhalb einer Gruppe — bricht die Zeile um, damit
   die folgenden Checkboxen darunter beginnen. */
.tp-check-group__label {
    width: 100%;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-4);
}

.tp-check-group__divider {
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: var(--border-soft);
}

/* Vollbreiter Slot für eingebettete Auswahlblöcke (z. B. Notizliste). */
.tp-check-group__block {
    width: 100%;
    min-width: 0;
}

/* ── Auswahlliste ────────────────────────────────────────────────────────── */

.tp-option-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: var(--tp-option-list-h, 260px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.tp-option-list__empty {
    display: block;
    padding: 18px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-4);
}

.tp-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    background: transparent;
    font-size: 13px;
    color: var(--text-2);
    text-align: left;
    line-height: 1.4;
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.tp-option:hover {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-1);
}

.tp-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.tp-option__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zusatz rechts (Kategorie, Status, Datum). */
.tp-option__meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-4);
}

/* Abgeschwächte Zeilen — erledigt bzw. archiviert. */
.tp-option--muted .tp-option__text {
    color: var(--text-4);
    text-decoration: line-through;
}

.tp-option--archived .tp-option__text {
    color: var(--text-4);
    font-style: italic;
}

/* == css/components/repeater.css == */
/* ==========================================================================
   tp-repeater — Liste einklappbarer, entfernbarer Einträge
   --------------------------------------------------------------------------
   Für wiederholbare Teilformulare (Prompt-Schritte, Kriterien, Unterpunkte).

     .tp-repeater
       ├── .tp-repeater__list
       │     └── .tp-repeater__item[.is-collapsed]
       │           ├── .tp-repeater__head    (klickbar, klappt um)
       │           │     ├── .tp-repeater__caret
       │           │     ├── .tp-repeater__label
       │           │     └── .tp-repeater__remove
       │           └── .tp-repeater__body
       └── button.tp-repeater__add

   Eingeklappt wird über eine Klasse am Item gesteuert, nicht über inline
   styles — dadurch bleibt der Zustand aus dem JS heraus lesbar.
   ========================================================================== */

.tp-repeater {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.tp-repeater__list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── Eintrag ─────────────────────────────────────────────────────────────── */

.tp-repeater__item {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease);
}

.tp-repeater__item:hover {
    border-color: var(--border-strong);
}

.tp-repeater__item:focus-within {
    border-color: var(--tp-focus-border);
}

/* Zeile aus zwei gleichrangigen Buttons: Umschalten und Entfernen. Ein
   verschachteltes Bedienelement in einem <button> wäre ungültig und würde
   beide Aktionen gleichzeitig auslösen. */
.tp-repeater__head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
}

.tp-repeater__toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 5px 4px;
    border: none;
    border-radius: var(--r-xs);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tp-repeater__toggle:focus-visible {
    outline: none;
    box-shadow: var(--tp-focus-ring);
}

.tp-repeater__caret {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--text-4);
    font-size: 10px;
    line-height: 1;
    transition: transform var(--dur-fast) var(--ease);
}

.tp-repeater__item.is-collapsed .tp-repeater__caret {
    transform: rotate(-90deg);
}

.tp-repeater__label {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vorschau des Inhalts, solange der Eintrag eingeklappt ist. */
.tp-repeater__preview {
    flex: 2;
    min-width: 0;
    font-size: 12px;
    color: var(--text-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-repeater__item:not(.is-collapsed) .tp-repeater__preview {
    display: none;
}

.tp-repeater__remove {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-4);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.tp-repeater__remove:hover {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--danger);
}

.tp-repeater__remove:focus-visible {
    outline: none;
    border-color: var(--tp-danger-border);
    box-shadow: var(--tp-danger-ring);
}

/* ── Rumpf ───────────────────────────────────────────────────────────────── */

.tp-repeater__body {
    padding: 0 8px 8px;
}

.tp-repeater__item.is-collapsed .tp-repeater__body {
    display: none;
}

/* Ein Eintrag ist meist ein ganzer Prompt: das Feld wächst mit dem Inhalt
   (wo der Browser `field-sizing` kennt), bleibt aber unter der Dialoghöhe,
   damit der Rumpf scrollbar bleibt. */
.tp-repeater__body .tp-field__control {
    min-height: 110px;
    max-height: 60dvh;
    field-sizing: content;
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.65;
    background: var(--surface);
}

/* ── Hinzufügen ──────────────────────────────────────────────────────────── */

.tp-repeater__add {
    align-self: flex-start;
}

/* == css/components/readout.css == */
/* ==========================================================================
   tp-readout — Beschrifteter Nur-Lese-Textblock mit Aktionsslot
   --------------------------------------------------------------------------
   Für Inhalte, die man ansieht und kopiert, aber nicht bearbeitet:
   Prompt-Vorschau, JSON-Export, Kontextauszüge.

     .tp-readout
       ├── .tp-readout__head
       │     ├── .tp-readout__label
       │     └── (Aktion, z. B. Kopieren-Button)
       └── .tp-readout__body   (oder ein textarea.tp-field__control[readonly])
   ========================================================================== */

.tp-readout {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
}

.tp-readout__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
}

.tp-readout__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-4);
}

.tp-readout__body {
    flex: 1;
    min-height: 0;
    max-height: var(--tp-readout-max-h, 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.6;
    /* Vorformatierter Text ohne <pre>: Zeilenumbrüche bleiben erhalten,
       lange Zeilen brechen trotzdem um statt seitlich zu scrollen. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tp-readout__body--mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* ── Nummerierte Teilstücke (z. B. Prompt-Schritte) ──────────────────────── */

.tp-readout__steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: var(--tp-readout-max-h, 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tp-readout__step {
    padding: 8px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.tp-readout__step-label {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-4);
}

.tp-readout__step-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* == css/components/pane.css == */
/* ==========================================================================
   tp-pane — Abgegrenzter Arbeitsbereich mit Kopf, Scroll-Rumpf und Fuß
   --------------------------------------------------------------------------
   Dasselbe Prinzip wie der Dialog, eine Ebene tiefer: nebeneinanderliegende
   Werkzeugbereiche (Export | Import), deren Aktionen sichtbar bleiben,
   während der Inhalt scrollt.

     .tp-pane-grid
       └── .tp-pane
             ├── .tp-pane__head  (__title, __sub, Aktion rechts)
             ├── .tp-pane__body  (scrollt)
             └── .tp-pane__foot
   ========================================================================== */

.tp-pane-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.tp-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    overflow: hidden;
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */

.tp-pane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 15px 10px;
    border-bottom: 1px solid var(--border-soft);
}

.tp-pane__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-1);
}

.tp-pane__sub {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--text-3);
}

/* ── Rumpf ───────────────────────────────────────────────────────────────── */

.tp-pane__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 13px 15px;
}

/* Das Haupt-Textfeld eines Panes füllt die Resthöhe. */
.tp-pane__fill {
    flex: 1;
    min-height: 180px;
}

/* ── Fuß ─────────────────────────────────────────────────────────────────── */

.tp-pane__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
    padding: 11px 15px;
    border-top: 1px solid var(--border);
}

/* ── Ergebnis-/Hinweisblock innerhalb eines Panes ────────────────────────── */

.tp-pane__notice {
    flex-shrink: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-2);
}

.tp-pane__meta {
    flex-shrink: 0;
    margin: 0;
    font-size: 11.5px;
    color: var(--text-3);
}

@media (max-width: 980px) {
    .tp-pane-grid {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }

    /* Ohne feste Höhe würden gestapelte Panes auf ihre Mindesthöhe fallen. */
    .tp-pane {
        min-height: 340px;
    }
}

/* == css/forms.css == */
/* ==========================================================================
   Seitenformulare (nicht-Dialog)
   --------------------------------------------------------------------------
   Diese Klassen stammen aus der Zeit vor der Komponenten-Library und werden
   noch von den Formularen genutzt, die direkt auf einer Seite liegen statt in
   einem Dialog: Login/Registrierung (views/auth.js) und die
   Account-Einstellungen (views/account.js).

   Für alles Neue gehört stattdessen `css/components/field.css` (`tp-field`)
   verwendet. Wenn auth.js und account.js auf `tp-field` umgestellt sind, kann
   diese Datei ersatzlos entfallen.
   ========================================================================== */

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-1);
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-3);
    opacity: 0.7;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--tp-focus-border);
    box-shadow: var(--tp-focus-ring);
    background: var(--surface-3);
}

.form-group input[readonly],
.form-group textarea[readonly] {
    color: var(--text-2);
    background: var(--surface-2);
    border-style: dashed;
    cursor: text;
}

.form-help {
    margin: 6px 0 0;
    color: var(--text-4);
    font-size: 12px;
    line-height: 1.4;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.form-actions .btn-danger {
    margin-right: auto;
}

/* ── Validierungszustände ────────────────────────────────────────────────── */

.form-group.error label {
    color: var(--danger);
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: var(--tp-danger-border);
    box-shadow: var(--tp-danger-ring);
}

.form-error-msg {
    margin-top: 5px;
    font-size: 12px;
    color: var(--danger);
}

label.required::after {
    content: " *";
    color: var(--danger);
    font-weight: 400;
}

.label-optional {
    font-weight: 400;
    color: var(--text-4);
    font-size: 11.5px;
}

/* == css/dashboard.css == */
/* Dashboard */

@keyframes dash-shell-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes dash-card-in {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.dashboard-shell .panel {
    padding: 18px;
}

.dash-loading-panel {
    width: 100%;
    height: 330px;
}

.dash-loading-week {
    height: 300px;
}

.dash-loading-achievements {
    height: 220px;
}

.dash-loading-bottom {
    height: 240px;
}

.dashboard-shell.is-revealing > .stat-cards,
.dashboard-shell.is-revealing > .dash-main-row,
.dashboard-shell.is-revealing > #panel-human-work,
.dashboard-shell.is-revealing > #panel-week,
.dashboard-shell.is-revealing > #panel-achievements,
.dashboard-shell.is-revealing > .dash-bottom-row {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 360ms ease;
    will-change: opacity, transform, filter;
}

.dashboard-shell > .dash-main-row { transition-delay: 45ms; }
.dashboard-shell > #panel-human-work { transition-delay: 90ms; }
.dashboard-shell > #panel-week { transition-delay: 135ms; }
.dashboard-shell > #panel-achievements { transition-delay: 180ms; }
.dashboard-shell > .dash-bottom-row { transition-delay: 225ms; }

.dashboard-shell.is-ready > .stat-cards,
.dashboard-shell.is-ready > .dash-main-row,
.dashboard-shell.is-ready > #panel-human-work,
.dashboard-shell.is-ready > #panel-week,
.dashboard-shell.is-ready > #panel-achievements,
.dashboard-shell.is-ready > .dash-bottom-row {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-shell.is-revealing > .stat-cards,
    .dashboard-shell.is-revealing > .dash-main-row,
    .dashboard-shell.is-revealing > #panel-human-work,
    .dashboard-shell.is-revealing > #panel-week,
    .dashboard-shell.is-revealing > #panel-achievements,
    .dashboard-shell.is-revealing > .dash-bottom-row {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.18fr 0.92fr;
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.dashboard-grid > * {
    min-width: 0;
}

.dash-main-row {
    display: grid;
    grid-template-columns: minmax(300px, 0.88fr) minmax(420px, 1.12fr);
    gap: 16px;
    align-items: stretch;
    min-width: 0;
}

.dash-main-row > * {
    display: flex;
    min-width: 0;
}

.dash-main-row .panel {
    width: 100%;
    height: 100%;
}

.dash-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    min-width: 0;
}

.dash-bottom-row > * {
    min-width: 0;
}

/* Generic interactive reset */

.dash-proj-row,
.dash-proj-summary,
.dash-human-work-row,
.dash-note-card,
.dash-prompt-row,
.btn-icon-sm {
    font: inherit;
    color: inherit;
    text-align: left;
}

.dash-proj-row,
.dash-proj-summary,
.dash-human-work-row,
.dash-note-card,
.dash-prompt-row {
    appearance: none;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
}

.dash-proj-row:focus-visible,
.dash-proj-summary:focus-visible,
.dash-human-work-row:focus-visible,
.dash-note-card:focus-visible,
.dash-prompt-row:focus-visible,
.btn-icon-sm:focus-visible,
.btn-link:focus-visible,
.btn-primary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Human work: open human tasks "Bei mir" / "Nicht zugewiesen" */

/* Without data the container stays empty and must not take a gap slot. */
#panel-human-work:empty {
    display: none;
}

.dash-human-work-panel {
    min-width: 0;
}

.dhw-panel-head {
    align-items: flex-start;
    margin-bottom: 14px;
}

.dhw-panel-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-4);
}

.dhw-section-head span {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--accent-soft-2);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 800;
}

.dash-human-work-section {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.dhw-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.dhw-section-head h4 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.dash-human-work-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 330px;
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-hover) transparent;
}

/* Kantenlicht in der Projektfarbe (siehe --edge-* in base.css). */
.dash-human-work-row {
    --edge-tint: var(--accent);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 11px 12px;
    border-radius: var(--r);
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light-sm) var(--edge-tint);
    background: var(--surface);
    cursor: pointer;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.dash-human-work-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border-hover), var(--border));
    box-shadow: var(--edge-light-sm) var(--edge-tint), var(--shadow-sm);
}

.dhw-row-copy {
    min-width: 0;
}

.dhw-row-copy strong,
.dhw-row-copy > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dhw-row-copy strong {
    color: var(--text-1);
    font-size: 13px;
    font-weight: 700;
}

.dhw-row-copy > span {
    margin-top: 3px;
    color: var(--text-4);
    font-size: 11px;
}

.dhw-row-arrow {
    color: var(--text-4);
    font-size: 14px;
}

.dhw-empty {
    padding: 10px 2px;
    font-size: 12px;
}

.dhw-more {
    margin-top: 10px;
    font-size: 12px;
}

/* Open decisions: own section below the task sections (or alone). The rows
   are links to #decisions/<id>, styled like the task rows. */
.dash-decisions-section {
    margin-top: 16px;
}

.dhw-panel-head + .dash-decisions-section {
    margin-top: 0;
}

.dash-decision-row,
.dash-decisions-section .dhw-more {
    text-decoration: none;
}

.dash-decision-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.dash-decisions-section .dhw-more {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .dash-human-work-row,
    .dash-human-work-row:hover {
        transition: none;
        transform: none;
    }
}

/* Intro / Hero */

.dash-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 20px 22px 19px;
    box-shadow: none;
    min-width: 0;
}

.dash-hero-top {
    position: relative;
}

.dash-hero-copy h2 {
    font-size: 22px;
    letter-spacing: -0.02em;
}

.dash-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.dash-hero-copy {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dash-hero-copy h2 {
    margin-bottom: 6px;
}

.dash-hero-copy p {
    margin: 0;
    color: var(--text-3);
    max-width: 560px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dash-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Insight tiles */

.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.stat-cards > * {
    min-width: 0;
}

.stat-card {
    position: relative;
    overflow: hidden;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface-2);
    box-shadow: none;
    cursor: default;
    min-width: 0;
    transition:
        border-color 0.14s ease;
}

.stat-card:hover {
    border-color: var(--border-strong);
}

.stat-card-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.stat-card-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: var(--r);
    display: grid;
    place-items: center;
    line-height: 1;
    color: var(--text-2);
    background: var(--surface-3);
}

.stat-card-value {
    margin-bottom: 0;
    font-size: 25px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.04em;
    line-height: 1.08;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.stat-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Today panel */

.dash-today-panel {
    overflow: hidden;
    min-width: 0;
}

.dtp-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.dtp-layout > * {
    min-width: 0;
}

.dtp-visual {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    min-width: 0;
}

.dtp-ring {
    --ring-pct: 0;
    position: relative;
    width: 100%;
    min-height: 156px;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
}

.dtp-ring.overload {
    background: var(--surface-2);
}

.dtp-ring-inner {
    position: absolute;
    inset: 14px;
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-soft);
    text-align: center;
}

.dtp-ring-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-1);
    letter-spacing: -0.04em;
}

.dtp-ring-sub {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dtp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-width: 0;
}

.dtp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    min-width: 0;
}

.dtp-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.dtp-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.dtp-count-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--success-soft);
    border: 1px solid rgba(28, 184, 112, 0.22);
    color: var(--success);
}

.dtp-type-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--danger-soft);
    border: 1px solid rgba(224, 78, 100, 0.22);
    color: var(--danger);
}

.dtp-type-badge--andere {
    background: var(--warning-soft);
    border-color: rgba(212, 149, 46, 0.22);
    color: var(--warning);
}

.dtp-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    min-width: 0;
}

.dtp-metrics > * {
    min-width: 0;
}

.dtp-metric {
    padding: 12px 12px 11px;
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    min-width: 0;
}

.dtp-metric-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
    margin-bottom: 6px;
}

.dtp-metric-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dtp-stream {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.dtp-step {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    transition:
        transform 0.12s ease,
        border-color 0.12s ease,
        background 0.12s ease;
    min-width: 0;
}

.dtp-step:hover {
    transform: translateY(-1px);
    border-color: var(--accent-soft-2);
    background: var(--accent-soft);
}

.dtp-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.95;
}

.dtp-step-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.dtp-step--done .dtp-step-title {
    color: var(--text-4);
    text-decoration: line-through;
}

.dtp-step--done .dtp-step-dot {
    opacity: 0.45;
}

.dtp-step-more {
    padding-top: 4px;
    font-size: 12px;
    color: var(--text-4);
    font-style: italic;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Projects */

.dash-projects-panel .panel-header {
    margin-bottom: 10px;
}

.dash-projects-sub {
    display: block;
    margin-top: 2px;
    color: var(--text-4);
    font-size: 11px;
}

.dash-projects-panel {
    display: flex;
    flex-direction: column;
}

.dash-proj-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.dash-proj-row {
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 8px 10px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    box-shadow: none;
    background: var(--surface-2);
    transition:
        border-color 0.14s ease,
        background 0.14s ease;
    min-width: 0;
}

.dash-proj-row:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
}

.dpr-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    min-width: 0;
}

.dpr-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--proj-color, var(--accent));
    box-shadow: none;
}

.dpr-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpr-pct {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-3);
    flex-shrink: 0;
}

.dpr-bar {
    display: flex;
    height: 4px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.dpr-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.dpr-bar-fill--today {
    background: var(--accent-strong);
    border-left: 1px solid rgba(255, 255, 255, 0.55);
}

.dpr-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 10.5px;
    color: var(--text-4);
    min-width: 0;
}

.dpr-open-chip {
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-3);
    border: 1px solid var(--border-soft);
    flex-shrink: 0;
}

.dpr-today-chip {
    color: var(--text-2);
    font-weight: 700;
    white-space: nowrap;
}

.dpr-movement {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--text-4);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dash-proj-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 700;
    transition:
        border-color 0.14s ease,
        background 0.14s ease,
        color 0.14s ease;
}

.dash-proj-summary:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--text-1);
}

/* Notes */

.dash-notes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    min-width: 0;
}

.dash-note-card {
    position: relative;
    padding: 14px 15px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: none;
    background: var(--surface-2);
    cursor: pointer;
    transition:
        border-color 0.14s ease;
    min-width: 0;
}

.dash-note-card:hover {
    border-color: var(--border-strong);
}

.dash-note-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.dash-note-pin {
    display: inline-flex;
    color: var(--warning);
    flex-shrink: 0;
}

.dash-note-preview {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-3);
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Prompts */

.dash-prompt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dash-prompt-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: var(--surface-2);
    cursor: pointer;
    transition:
        transform 0.12s ease,
        border-color 0.12s ease,
        background 0.12s ease;
    min-width: 0;
}

.dash-prompt-row:hover {
    transform: translateX(2px);
    border-color: var(--accent-soft-2);
    background: var(--accent-soft);
}

.dash-prompt-index {
    width: 24px;
    height: 24px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    background: var(--surface-3);
    flex-shrink: 0;
}

.dash-prompt-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
}

.dash-prompt-cat {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-2);
    color: var(--accent-strong);
}

.dash-prompt-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.dash-prompt-model {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-4);
    white-space: nowrap;
}

/* All-time achievements */

.dash-achievements-panel .panel-header {
    margin-bottom: 16px;
}

.dash-achievements-sub {
    margin-top: 5px;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.45;
}

.dash-achievements-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dash-achievement-lead,
.dash-achievement-detail {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.dash-achievement-lead {
    display: flex;
    flex-direction: column;
}

.dash-achievement-total {
    color: var(--text-1);
    font-size: clamp(32px, 3.5vw, 46px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
}

.dash-achievement-label,
.dash-achievement-detail > span {
    margin-top: 6px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.dash-achievement-progress {
    margin-top: auto;
    padding-top: 20px;
}

.dash-achievement-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--text-3);
    font-size: 11.5px;
}

.dash-achievement-progress-copy strong {
    color: var(--text-2);
}

.dash-achievement-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-3);
}

.dash-achievement-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.dash-achievement-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dash-achievement-detail > strong {
    color: var(--text-1);
    font-size: clamp(27px, 2.5vw, 34px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.dash-achievement-detail small {
    margin-top: 10px;
    color: var(--text-3);
    font-size: 11.5px;
}

@media (max-width: 680px) {
    .dash-achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-achievement-lead {
        grid-column: 1 / -1;
    }
}

/* Activity trend (retrospektiver Durchsatz) */

#panel-week {
    min-width: 0;
}

.dash-activity-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dash-activity-sub {
    font-size: 12px;
    color: var(--text-4);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dash-act-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 4px 0 16px;
    min-width: 0;
}

.dash-act-summary > * {
    min-width: 0;
}

.dash-act-tile {
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    min-width: 0;
}

.dash-act-tile--accent {
    border-color: var(--accent-soft-2);
    background: linear-gradient(180deg, var(--accent-soft), var(--surface-2) 70%);
}

.dash-act-tile-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-1);
}

.dash-act-tile--accent .dash-act-tile-value {
    color: var(--accent-strong);
}

.dash-act-tile-label {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-4);
}

.dash-act-chart-wrap {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-hover) transparent;
}

.dash-act-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(30px, 1fr);
    align-items: end;
    gap: 6px;
    min-height: 132px;
    padding-top: 6px;
    min-width: 0;
}

.dash-act-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dash-act-count {
    min-height: 15px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    line-height: 1;
}

.dash-act-col.is-today .dash-act-count {
    color: var(--accent-strong);
}

.dash-act-track {
    position: relative;
    width: 100%;
    max-width: 28px;
    height: 92px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    overflow: hidden;
}

.dash-act-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--accent);
    transition: height 0.28s ease;
}

.dash-act-col.is-weekend .dash-act-bar {
    background: var(--accent-soft-2);
}

.dash-act-col.is-today .dash-act-track {
    border-color: var(--accent-soft-2);
    box-shadow: 0 4px 12px var(--accent-soft-2);
}

.dash-act-col.is-today .dash-act-bar {
    background: var(--accent-strong);
}

.dash-act-daynum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-4);
    line-height: 1.1;
    text-align: center;
}

.dash-act-daynum span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
}

.dash-act-col.is-today .dash-act-daynum,
.dash-act-col.is-today .dash-act-daynum span {
    color: var(--accent-strong);
}

.dash-act-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-4);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Responsive */

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

    .dash-main-row {
        grid-template-columns: 1fr;
    }

    .dash-bottom-row {
        grid-template-columns: 1fr;
    }

    .dtp-layout {
        grid-template-columns: 1fr;
    }

    .dtp-visual {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-hero-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-header {
        gap: 10px;
        flex-wrap: wrap;
    }

    .dash-act-summary {
        grid-template-columns: 1fr;
    }
}

/* Hero KI Button */

.btn-ai-hero {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--accent-strong);
    border-radius: var(--r-md);
    background:
        linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow:
        0 10px 24px var(--accent-soft-2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease,
        filter 0.14s ease,
        border-color 0.14s ease;
    white-space: nowrap;
}

.btn-ai-hero:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px var(--accent-soft-2),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    filter: brightness(1.03);
}

.btn-ai-hero:active {
    transform: translateY(0);
    box-shadow:
        0 6px 14px var(--accent-soft-2),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-ai-hero:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.btn-ai-hero::before {
    content: "AI";
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}

/* Authorized global work context across dashboard, board and calendar. */
.global-work-context { display:block; font-size:.8rem; color:var(--text-muted); overflow-wrap:anywhere; }
.global-work-list { list-style:none; padding:0; margin:0; }
.global-work-list li { padding:12px 0; border-bottom:1px solid var(--border); }
.global-work-list a, .step-card-title a { color:inherit; text-decoration:none; }
.global-work-list a:hover, .step-card-title a:hover { text-decoration:underline; }
.global-cal-task { width:100%; border:0; background:none; text-align:left; color:inherit; cursor:pointer; padding:2px 0; }
.global-cal-task:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.product-detail [data-product-search-host] { margin:12px 0; }
.overview-tools .proj-view-toggle { display:flex; }

/* == css/human-work.css == */
.human-work-view { min-width: 0; }
.human-work-view .topbar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.human-work-view .topbar p { color: var(--text-2); }
.hw-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.hw-toolbar label { display: grid; gap: 5px; flex: 1 1 160px; max-width: 360px; font-size: 13px; color: var(--text-2); min-width: 0; }
.hw-toolbar select { min-width: 0; width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-1); }
.hw-layout { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.5fr); align-items: start; gap: 20px; }
.hw-layout > .panel { min-width: 0; padding: 18px; }
#hw-list { list-style: none; padding: 0; margin: 12px 0; max-height: 65vh; overflow-y: auto; overflow-x: hidden; }
#hw-list li { min-width: 0; }
.hw-row { display: grid; gap: 5px; width: 100%; padding: 14px 12px; text-align: left; font: inherit; border: 1px solid transparent; border-bottom-color: var(--border); background: transparent; color: var(--text-1); border-radius: 8px; cursor: pointer; min-height: 44px; }
.hw-row strong { font-size: 14px; line-height: 1.5; }
.hw-row span, .hw-row small { font-size: 12px; color: var(--text-2); }
.hw-row:hover { background: var(--surface-2); }
.hw-row[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.hw-row:focus-visible, .human-work-view a:focus-visible, .hw-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#hw-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
#hw-pagination button, .human-work-view .btn-link, #hw-detail .btn-secondary { min-height: 44px; }
.hw-detail-head h3 { font-size: 20px; line-height: 1.5; margin: 12px 0; }
.hw-meta, .hw-context { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-2); }
.hw-meta span { padding: 3px 8px; border-radius: 6px; background: var(--surface-2); }
.hw-text-section { margin-top: 24px; }
.hw-text-section h4 { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.hw-text-section p { white-space: pre-wrap; line-height: 1.65; font-size: 14px; }
.hw-artifacts { padding-left: 20px; font-size: 13px; }
.hw-artifacts li { margin: 10px 0; }
.hw-artifacts small { display: block; color: var(--text-2); }
.human-work-view :is(h2, h3, h4, p, a, strong, span, small) { overflow-wrap: anywhere; min-width: 0; }
#hw-notice:empty { display: none; }
#hw-notice.is-error { color: var(--danger, #b91c1c); }
.hw-back { display: none; }
.hw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.hw-actions button { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.hw-actions .empty-hint { width: 100%; margin: 0; }
@media (max-width: 760px) {
    .hw-layout { grid-template-columns: minmax(0, 1fr); }
    .human-work-view:not(.hw-show-detail) #hw-detail { display: none; }
    .human-work-view.hw-show-detail #hw-list-panel { display: none; }
    .human-work-view .hw-back { display: inline-flex; align-items: center; }
    .hw-toolbar label { max-width: none; }
    .hw-layout > .panel { padding: 14px; }
    .hw-detail-head h3 { font-size: 18px; }
}

/* == css/hygiene.css == */
/* Aufräumen: the dashboard's signal tabs with one compact finding list, and
   the #hygiene view with every finding, its rule text and all decisions */

.hygiene-panel,
.hygiene-view {
    --hygiene-muted: var(--text-3);
    --hygiene-tint: var(--text-3);
}

.hygiene-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hygiene-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hygiene-view-link {
    appearance: none;
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 0;
    background: none;
    color: var(--hygiene-muted);
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.hygiene-view-link:hover {
    color: var(--accent-strong);
}

.hygiene-panel-header h3,
.hygiene-panel-header p,
.hygiene-action-error {
    margin: 0;
}

.hygiene-panel-header p {
    margin-top: 2px;
    color: var(--text-4);
    font-size: 11px;
    line-height: 1.4;
}

/* Signal tints: a signal's dashboard tab and its #hygiene section match */

.hygiene-tab[data-signal="project_completable"],
.hygiene-section[data-hygiene-group="project_completable"] { --hygiene-tint: var(--success); }
.hygiene-tab[data-signal="epic_completable"],
.hygiene-section[data-hygiene-group="epic_completable"] { --hygiene-tint: var(--success); }
.hygiene-tab[data-signal="task_stalled"],
.hygiene-section[data-hygiene-group="task_stalled"] { --hygiene-tint: var(--warning); }
.hygiene-tab[data-signal="task_overdue"],
.hygiene-section[data-hygiene-group="task_overdue"] { --hygiene-tint: var(--danger); }
.hygiene-tab[data-signal="task_idle"],
.hygiene-section[data-hygiene-group="task_idle"] { --hygiene-tint: var(--text-3); }
.hygiene-tab[data-signal="project_idle"],
.hygiene-section[data-hygiene-group="project_idle"] { --hygiene-tint: var(--accent); }

/* Signal tabs */

.hygiene-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.hygiene-tab,
.hygiene-finding-main,
.hygiene-action,
.hygiene-show-all {
    appearance: none;
    border: 0;
    font: inherit;
}

.hygiene-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 4px 5px 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}

.hygiene-tab:hover {
    border-color: var(--border-strong);
    color: var(--text-1);
}

.hygiene-tab.is-active {
    border-color: color-mix(in srgb, var(--hygiene-tint) 45%, var(--border));
    background: color-mix(in srgb, var(--hygiene-tint) 10%, var(--surface-2));
    color: var(--text-1);
}

.hygiene-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hygiene-count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hygiene-tint) 16%, var(--surface-2));
    color: var(--hygiene-tint);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
}

.hygiene-tab[data-signal="task_idle"] .hygiene-count,
.hygiene-section[data-hygiene-group="task_idle"] .hygiene-count {
    color: var(--text-2);
}

/* Finding list */

.hygiene-group {
    min-width: 0;
}

.hygiene-findings {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hygiene-finding {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 7px 6px;
    border-radius: var(--r);
    transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.hygiene-finding + .hygiene-finding {
    box-shadow: 0 -1px 0 var(--border-soft);
}

.hygiene-finding:hover {
    background: var(--surface-2);
    box-shadow: none;
}

.hygiene-finding:hover + .hygiene-finding {
    box-shadow: none;
}

.hygiene-finding.is-busy {
    opacity: 0.55;
}

.hygiene-project-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hygiene-project, var(--accent));
}

.hygiene-finding-main {
    display: block;
    min-width: 0;
    padding: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.hygiene-finding-title,
.hygiene-finding-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hygiene-finding-title {
    color: var(--text-1);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.hygiene-finding-main:hover .hygiene-finding-title {
    color: var(--accent-strong);
}

.hygiene-finding-meta {
    margin-top: 1px;
    color: var(--hygiene-muted);
    font-size: 11px;
    line-height: 1.35;
}

.hygiene-finding-meta > span + span::before {
    content: "\00b7";
    margin: 0 5px;
}

.hygiene-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hygiene-action {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}

.hygiene-action:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: var(--accent-soft);
    color: var(--text-1);
}

.hygiene-action--primary {
    border-color: color-mix(in srgb, var(--hygiene-tint) 40%, var(--border));
    background: color-mix(in srgb, var(--hygiene-tint) 10%, transparent);
    color: var(--text-1);
}

.hygiene-action:disabled {
    cursor: progress;
}

.hygiene-tab:focus-visible,
.hygiene-view-link:focus-visible,
.hygiene-finding-main:focus-visible,
.hygiene-row-main:focus-visible,
.hygiene-chip:focus-visible,
.hygiene-action:focus-visible,
.hygiene-show-all:focus-visible,
.hygiene-show-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.hygiene-action-error {
    grid-column: 2 / -1;
    color: var(--danger);
    font-size: 11px;
    line-height: 1.3;
}

.hygiene-show-all {
    display: block;
    margin: 6px 0 0 auto;
    padding: 3px 6px;
    background: none;
    color: var(--hygiene-muted);
    font-size: 11px;
    cursor: pointer;
}

.hygiene-show-all:hover {
    color: var(--accent-strong);
}

.hygiene-empty {
    margin: 0;
    padding: 18px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    color: var(--hygiene-muted);
    font-size: 13px;
    text-align: center;
}

/* #hygiene view */

.hygiene-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 16px;
}

.hygiene-toolbar:empty {
    display: none;
}

.hygiene-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.hygiene-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 6px 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.hygiene-chip strong {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 750;
    text-align: center;
}

.hygiene-chip.is-decision {
    border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
    color: var(--text-2);
}

.hygiene-chip.is-decision strong {
    background: color-mix(in srgb, var(--warning) 16%, var(--surface-2));
    color: var(--warning);
}

.hygiene-chip:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-3);
}

.hygiene-chip[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.hygiene-chip:disabled {
    opacity: 0.45;
    cursor: default;
}

.hygiene-project-filter select {
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
}

.hygiene-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.hygiene-section {
    padding: 16px 18px;
}

.hygiene-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.hygiene-section-head h3 {
    margin: 0;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 700;
}

.hygiene-rule {
    margin: 2px 0 0;
    color: var(--hygiene-muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.hygiene-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hygiene-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 2px;
    border-top: 1px solid var(--border-soft);
}

.hygiene-row:first-child {
    border-top: 0;
}

.hygiene-row .hygiene-action-error {
    grid-column: 1 / -1;
}

.hygiene-row-main {
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hygiene-row-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-1);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hygiene-row-main:hover .hygiene-row-title {
    color: var(--accent-strong);
}

.hygiene-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--hygiene-muted);
    font-size: 10.5px;
    line-height: 1.3;
    white-space: nowrap;
}

.hygiene-row-meta .hygiene-project-dot {
    flex: 0 0 7px;
}

.hygiene-project-name,
.hygiene-story-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hygiene-project-name {
    max-width: 45%;
}

.hygiene-story-name {
    max-width: 35%;
}

.hygiene-story-name::before,
.hygiene-project-name + .hygiene-fact::before,
.hygiene-story-name + .hygiene-fact::before {
    content: "\00b7";
    margin-right: 6px;
}

.hygiene-fact {
    flex: 0 0 auto;
}

.hygiene-row-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--text-3);
    font-size: 10.5px;
    line-height: 1.3;
}

.hygiene-row .hygiene-actions {
    justify-content: flex-end;
}

.hygiene-show-more {
    appearance: none;
    display: block;
    margin: 6px auto 0;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: var(--text-3);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.hygiene-show-more:hover {
    color: var(--accent-strong);
}

.hygiene-truncated {
    margin: 6px 0 0;
    color: var(--hygiene-muted);
    font-size: 11px;
    text-align: center;
}

.hygiene-retry {
    margin-top: 12px;
}

@media (max-width: 680px) {
    .hygiene-finding {
        grid-template-columns: 8px minmax(0, 1fr);
        row-gap: 6px;
    }

    .hygiene-actions {
        grid-column: 2;
        flex-wrap: wrap;
    }

    .hygiene-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .hygiene-row .hygiene-actions {
        grid-column: auto;
        justify-content: flex-start;
    }

    .hygiene-project-filter,
    .hygiene-project-filter select {
        width: 100%;
        max-width: none;
    }

    .hygiene-section {
        padding: 14px;
    }
}

/* == css/decisions.css == */
/* Entscheidungen (#decisions): open and answered decisions grouped by
   project. Project sections and decision cards carry the project color as
   Kantenlicht (see --edge-* in base.css). */

.decisions-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.decisions-view .topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.decisions-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.decisions-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.decisions-toolbar:empty {
    display: none;
}

.decisions-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.decisions-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.decisions-chip strong {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 750;
    text-align: center;
}

.decisions-chip:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
}

.decisions-chip[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.decisions-project-filter select {
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
}

.decisions-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.decisions-empty {
    margin: 0 0 10px;
    color: var(--text-3);
    font-size: 13px;
}

/* Project section */

.decisions-project {
    --edge-tint: var(--accent);
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light) var(--edge-tint), var(--shadow-xs);
}

.decisions-project-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.decisions-project-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.decisions-project-head h3 a {
    overflow: hidden;
    color: var(--text-1);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decisions-project-head h3 a:hover {
    color: var(--accent-strong);
}

.decisions-project-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--edge-tint);
}

.decisions-open-count {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning) 16%, var(--surface-2));
    color: var(--warning);
    font-size: 11px;
    font-weight: 700;
}

.decisions-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Decision card */

.decision-card {
    --edge-tint: var(--accent);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--r);
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light-sm) var(--edge-tint);
    background: var(--surface);
}

.decision-card.is-answered {
    border-color: var(--border);
    box-shadow: none;
    background: var(--surface-2);
}

.decision-card:focus-visible,
.decisions-chip:focus-visible,
.decision-card a:focus-visible,
.decisions-project-head a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.decision-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.decision-question {
    margin: 0;
    min-width: 0;
    color: var(--text-1);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.decision-question a {
    color: inherit;
    text-decoration: none;
}

.decision-question a:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.decision-status {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.decision-status--open {
    background: color-mix(in srgb, var(--warning) 16%, var(--surface-2));
    color: var(--warning);
}

.decision-status--answered {
    background: color-mix(in srgb, var(--success) 16%, var(--surface-2));
    color: var(--success);
}

.decision-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    color: var(--text-4);
    font-size: 11.5px;
}

.decision-meta a,
.decision-waiting-task {
    color: var(--accent-strong);
    text-decoration: none;
}

.decision-meta a:hover,
a.decision-waiting-task:hover {
    text-decoration: underline;
}

.decision-context {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.decision-waiting-label {
    margin: 0 0 4px;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
}

.decision-waiting-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
}

.decision-notice {
    margin: 0;
    color: var(--text-2);
    font-size: 12px;
}

/* Answer form */

.decision-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}

.decision-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.decision-options legend {
    margin-bottom: 6px;
    padding: 0;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
}

.decision-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12.5px;
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.decision-option:hover {
    border-color: var(--border-strong);
}

.decision-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--edge-tint) 60%, var(--border));
    background: color-mix(in srgb, var(--edge-tint) 10%, var(--surface));
    color: var(--text-1);
}

.decision-option input {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--edge-tint);
}

.decision-answer-field {
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
}

.decision-form textarea {
    width: 100%;
    min-height: 64px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-1);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}

.decision-meta,
.decision-waiting-list,
.decision-answer-option,
.decision-answer-meta {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .decision-form textarea,
    .decisions-project-filter select {
        font-size: 16px;
    }

    .decision-option,
    .decisions-chip,
    .decisions-project-filter select {
        min-height: 44px;
    }
}

.decision-form textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.decision-final-hint {
    margin: 0;
    color: var(--text-4);
    font-size: 11px;
}

.decision-error {
    margin: 0;
    color: var(--danger);
    font-size: 12px;
}

.decision-no-right {
    margin: 0;
    color: var(--text-4);
    font-size: 12px;
}

.decision-form-actions {
    display: flex;
    justify-content: flex-end;
}

/* Answered decision */

.decision-answer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}

.decision-answer-option {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--text-3);
    font-size: 12px;
}

.decision-answer-option strong {
    color: var(--text-1);
    font-size: 13px;
}

.decision-answer-text {
    margin: 0;
    color: var(--text-1);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.decision-answer-meta {
    margin: 0;
    color: var(--text-4);
    font-size: 11px;
}

@media (max-width: 680px) {
    .decisions-project {
        padding: 12px;
    }

    .decision-card {
        padding: 10px 12px;
    }

    .decision-option {
        flex: 1 1 100%;
    }

    .decision-card-head,
    .decisions-project-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .decision-card-head .decision-question {
        order: 1;
    }

    .decisions-project-head h3 a {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .decision-form-actions .btn-sm {
        width: 100%;
        min-height: 44px;
        height: auto;
        padding-block: 10px;
        white-space: normal;
    }

    .decisions-project-filter,
    .decisions-project-filter select {
        width: 100%;
        max-width: none;
    }
}

/* == css/board.css == */
/* Board */

.board-container {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 28px;
    min-height: 240px;
}

.board-column {
    width: 320px;
    flex-shrink: 0;
    padding: 16px;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.col-header-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.col-header h3 {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-2);
}

.col-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.col-count {
    padding: 4px 9px;
    font-size: 11px;
    color: var(--text-2);
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
}

.col-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 54px;
    border-radius: 14px;
    padding: 2px;
    transition: background 0.14s ease;
}

.col-steps.drag-over,
.board-column.drag-over .col-steps {
    background: var(--accent-soft);
    outline: 2px dashed rgba(249, 115, 22, 0.52);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.20);
}

.step-card {
    position: relative;
    padding: 14px 15px;
    border-radius: var(--r-md);
    background: var(--surface-3);
    border: 1px solid var(--border);
    cursor: pointer;
    transition:
        transform 0.14s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
    box-shadow: var(--shadow-xs);
}

/* The full task could not be loaded for the edit dialog or the export. */
.step-card.is-load-failed {
    border-color: var(--danger);
}

.step-card-json-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    opacity: 0;
    transition:
        opacity 0.14s ease,
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

.step-card:hover .step-card-json-btn,
.step-card-json-btn:focus {
    opacity: 1;
}

.step-card-json-btn:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
}

.step-card-json-btn.is-copied {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 36%, transparent);
}

@media (hover: none) {
    .step-card-json-btn {
        opacity: 1;
    }
}
.step-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(249, 115, 22, 0.28);
}
.step-card.dragging {
    opacity: 0.38;
    transform: scale(0.97);
}

.step-card-project {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-2);
    margin-bottom: 8px;
    padding-right: 32px;
}

.step-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-card-section {
    color: var(--text-4);
}

.step-card-title {
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.015em;
}

.step-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-3);
}

.step-card .task-id-chip {
    background: var(--surface-2);
}

/* ── Mobile Tab Navigation ───────────────────────────────────── */

.board-mobile-tabs {
    display: none;
}

@media (max-width: 768px) {
    .board-mobile-tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 14px;
        padding: 4px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
    }

    .bmt-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 9px 8px;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: var(--text-3);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.14s, color 0.14s;
    }

    .bmt-tab.active {
        background: var(--surface-3);
        color: var(--text-1);
        box-shadow: var(--shadow-xs);
    }

    .bmt-count {
        font-size: 11px;
        font-weight: 700;
        padding: 1px 7px;
        border-radius: 999px;
        background: var(--surface-3);
        color: var(--text-3);
        transition: background 0.14s, color 0.14s;
    }

    .bmt-tab.active .bmt-count {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .board-col-hidden {
        display: none !important;
    }

    .board-container {
        overflow-x: unset;
        flex-direction: column;
        gap: 0;
        padding-bottom: 0;
    }

    .board-column {
        width: 100%;
        min-width: unset;
    }
}

/* == css/project-contract-ui.css == */
.project-contract-ui {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    min-width: 0;
}
.project-contract-ui__header,
.project-contract-ui__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.project-contract-ui__header h3,
.project-contract-ui__intro h3,
.project-contract-ui__criteria h3 { margin: 0; font-size: 1rem; }
.project-contract-ui__intro p,
.project-contract-ui__criteria > p,
.project-contract-ui__reference { color: var(--text-3); font-size: .875rem; margin: 8px 0 16px; }
.project-contract-ui__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0 0; }
.project-contract-ui__value { min-width: 0; }
.project-contract-ui__value:nth-child(3),
.project-contract-ui__value:last-child { grid-column: 1 / -1; }
.project-contract-ui__value dt { font-size: .8125rem; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
.project-contract-ui__value dd { margin: 0; }
.project-contract-ui__value p,
.project-contract-ui__value li { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.project-contract-ui__value ul { padding-left: 20px; margin: 0; }
.project-contract-ui__value li + li { margin-top: 8px; }
.project-contract-ui__empty { color: var(--text-3); font-style: italic; }
.project-contract-ui__criteria { min-width: 0; }
.project-contract-ui__criterion { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; }
.project-contract-ui__criterion .tp-field { flex: 1; min-width: 0; }
.project-contract-ui__criterion > button { margin-top: 25px; }
.project-contract-ui-panel .cs-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 650px) {
    .project-contract-ui { padding: 14px; }
    .project-contract-ui__values,
    .project-contract-ui-panel .cs-cards-row { grid-template-columns: minmax(0, 1fr); }
    .project-contract-ui__criterion { flex-wrap: wrap; }
    .project-contract-ui__criterion > button { margin-top: 0; }
}

/* == css/projects.css == */
/* Topbar action group */

.epic-block.is-route-target,
.step-item.is-route-target {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
    outline-offset: 2px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.proj-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.proj-detail-actions {
    align-items: stretch;
    gap: 12px;
}

.proj-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.proj-action-group + .proj-action-group {
    padding-left: 0;
    border-left: none;
}

.proj-action-group--primary {
    flex-shrink: 0;
}

.proj-action-group--mode {
    flex-shrink: 0;
}

.proj-action-group--json {
    margin-left: auto;
}

.proj-action-group--create .btn-secondary {
    font-weight: 700;
}

/* Sekundäre Verwaltungsaktionen als Ghost-Buttons — weniger visuelles Gewicht */
.proj-action-group--manage .btn-secondary {
    color: var(--text-3);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.proj-action-group--manage .btn-secondary:hover {
    color: var(--text-1);
    background: var(--surface-2);
    border-color: var(--border);
    transform: none;
}

.proj-action-group--manage .btn-proj-done-toggle.is-active {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--text-2);
}

.project-id-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    border-radius: 999px;
    min-height: 28px;
    padding: 4px 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

.project-id-chip:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
}

.project-id-chip.is-copied {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 36%, transparent);
    background: color-mix(in srgb, var(--success) 10%, var(--surface-2));
}

/* View toggle */

.proj-view-toggle {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

.view-toggle-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.view-toggle-btn:hover {
    color: var(--text-1);
}

.view-toggle-btn.active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: var(--shadow-xs);
}

/* Completed-toggle button in topbar */

.btn-completed-toggle {
    font-size: 12px;
    font-weight: 600;
}

.btn-completed-toggle.is-active {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-2);
}

/* Completed project cards */

.project-list-card.plc-card-done {
    opacity: 0.65;
    border-style: dashed;
    box-shadow: none;
    background: var(--surface-2);
}

.project-list-card.plc-card-done:hover {
    opacity: 0.92;
}

.plc-done-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    padding: 2px 9px;
    border-radius: 20px;
    margin-bottom: 4px;
    width: fit-content;
}

/* Completed section */

.plc-done-section {
    margin-top: 28px;
}

.plc-done-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.plc-done-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.plc-done-section-count {
    font-size: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 7px;
    color: var(--text-3);
}

/* Done/Reopen button in detail topbar */

.btn-proj-done-toggle.is-active {
    border-color: var(--border-strong);
    color: var(--text-2);
}

/* Projects grid */

@keyframes proj-shell-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 18px;
    position: relative;
    animation: proj-shell-in 0.30s ease both;
}

.projects-grid.drop-target {
    outline: 2px dashed color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 6px;
    border-radius: var(--r-lg);
}

/* Empty spacer slots in the project grid */

.proj-grid-spacer {
    min-height: 120px;
    border-radius: var(--r-lg);
    border: 2px dashed var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.proj-grid-spacer:hover {
    border-color: var(--border-strong);
}

.proj-grid-spacer.swap-target {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.proj-grid-spacer-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.14s ease, background 0.12s ease, color 0.12s ease;
    padding: 0;
}

.proj-grid-spacer:hover .proj-grid-spacer-remove {
    opacity: 1;
}

.proj-grid-spacer-remove:hover {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 24%, transparent);
    color: var(--danger);
}

/* "Lücke einfügen" — ruhiger Ghost-Button, fügt sich in die Topbar ein */
.btn-add-gap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.12s ease;
}

.btn-add-gap:hover {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-1);
    transform: translateY(-1px);
}

.project-list-card {
    --plc-color: var(--accent);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 184px;
    padding: 16px 20px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: none;
    cursor: pointer;
    transition:
        transform 0.18s var(--ease),
        box-shadow 0.2s var(--ease),
        border-color 0.2s var(--ease),
        opacity 0.14s ease;
}

.project-list-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--plc-color);
    pointer-events: none;
}

.project-list-card:hover,
.project-list-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xs);
    border-color: var(--plc-color);
}

.project-list-card[draggable="true"] {
    cursor: grab;
}

.project-list-card[draggable="true"]:active {
    cursor: grabbing;
}

.project-list-card.dragging {
    opacity: 0.42;
    transform: scale(0.985);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.project-list-card.swap-target {
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
}

.plc-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.plc-title-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.plc-btn-group {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.project-list-card:hover .plc-btn-group,
.project-list-card:focus-within .plc-btn-group {
    opacity: 1;
    transform: none;
}

.plc-dot {
    width: 12px;
    height: 12px;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 4px;
    background: var(--plc-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--plc-color) 15%, transparent);
    cursor: copy;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.plc-dot:hover,
.plc-dot:focus-visible {
    transform: scale(1.18);
    filter: brightness(1.18);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--plc-color) 22%, transparent), 0 0 18px color-mix(in srgb, var(--plc-color) 55%, transparent);
    outline: none;
}

.plc-dot:active {
    transform: scale(.88);
    transition-duration: .08s;
}

.plc-dot.plc-copy-confirmed {
    animation: plc-copy-confirm .5s ease;
}

@keyframes plc-copy-confirm {
    0% { transform: scale(1); }
    45% { transform: scale(1.28); box-shadow: 0 0 0 7px color-mix(in srgb, var(--plc-color) 30%, transparent), 0 0 24px color-mix(in srgb, var(--plc-color) 70%, transparent); }
    100% { transform: scale(1); }
}

.plc-name {
    font-size: 17px;
    font-weight: 750;
    color: var(--text-1);
    letter-spacing: -0.02em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.plc-body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.plc-footer {
    position: relative;
    z-index: 2;
    padding-top: 12px;
}

.plc-desc {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fortschritts-Kopf: prominente Prozentzahl + Zähler */
.plc-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.plc-pct {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.plc-pct-sign {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-3);
    margin-left: 1px;
}

.plc-frac {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.plc-frac-sep {
    color: var(--text-4);
    margin: 0 1px;
}

.project-list-card .progress-bar {
    height: 6px;
    margin-bottom: 0;
}

.project-list-card .progress-fill {
    background: var(--plc-color);
    transition: width 0.4s var(--ease);
}

.plc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}

.plc-meta-open {
    font-variant-numeric: tabular-nums;
}

/* Card-Aktionen: dezente Ghost-Buttons, klare Semantik beim Hover */
.plc-btn-group .btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
}

.plc-btn-group .btn-icon:hover {
    background: var(--surface-2);
    border-color: var(--border);
}

.plc-btn-group .plc-complete:hover,
.plc-btn-group .plc-reopen:hover {
    color: var(--success);
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 24%, transparent);
}

.plc-btn-group .plc-del:hover {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 24%, transparent);
}

/* Touch: Aktionen dauerhaft sichtbar (kein Hover-Zustand) */
@media (hover: none) {
    .plc-btn-group {
        opacity: 1;
        transform: none;
    }
}

/* Kontext & Scope in Project-Karten */

.plc-cs-row {
    display: flex;
    gap: 10px;
    margin: 8px 0 4px;
}

.plc-cs-block {
    flex: 1;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 0;
}

.plc-cs-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: 4px;
}

.plc-cs-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Project overview top */

.project-overview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.project-overview-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.project-overview-main {
    min-width: 0;
}

.project-overview-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.project-overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-overview-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}

.project-overview-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-info-panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.project-info-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}

.project-info-panel-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
}

.project-info-panel-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.45;
}

.project-info-panel-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.project-info-list {
    display: flex;
    flex-direction: column;
}

.project-info-empty {
    margin: 0;
    padding: 14px 18px;
}

/* Items für Prompts und Notizen */

.pmd-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.14s ease;
}

.pmd-item:last-child {
    border-bottom: none;
}

.pmd-item:hover {
    background: var(--surface-2);
}

.pmd-item-main {
    flex: 1;
    min-width: 0;
}

.pmd-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.4;
}

.pmd-item-meta {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 4px;
    line-height: 1.45;
}

.pmd-item-preview {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.pmd-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: flex-start;
}

.pmd-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 3px 7px;
    line-height: 1;
}

/* Kontext, Scope & Dokumentation, Card Design */

.cs-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 16px;
}

.cs-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    transition:
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}

.cs-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-strong);
}

.cs-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
}

.cs-card-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cs-card--context .cs-card-icon-wrap {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.cs-card--scope .cs-card-icon-wrap {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.cs-card--doc .cs-card-icon-wrap {
    background: var(--success-soft);
    color: var(--success);
}

.cs-card-label {
    flex: 1;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
}

.cs-card-edit-btn,
.cs-card-expand-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-4);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition:
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease;
}

.cs-card-edit-btn:hover,
.cs-card-expand-btn:hover {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-2);
}

.cs-card-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 0 14px;
}

.cs-card-body {
    padding: 10px 14px 14px;
    flex: 1;
}

.cs-card-text {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-card-empty {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-4);
    font-style: italic;
    line-height: 1.5;
}

.cs-card-edit-form {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-card-textarea {
    width: 100%;
    min-height: 90px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text-1);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.14s;
}

.cs-card-textarea:focus {
    border-color: var(--accent);
}

.cs-card-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cs-card-form-actions {
    display: flex;
    gap: 8px;
}

.cs-char-count {
    font-size: 11px;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Section blocks */

#sortable-sections-host {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

#sortable-sections-host.drop-target {
    outline: 2px dashed color-mix(in srgb, var(--accent) 28%, transparent);
    outline-offset: 6px;
    border-radius: var(--r-lg);
}

.section-block {
    margin-bottom: 14px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
    transition:
        transform 0.14s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        opacity 0.14s ease;
}

.section-block:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.section-block[data-section-id][draggable="true"] {
    cursor: grab;
}

.section-block[data-section-id][draggable="true"]:active {
    cursor: grabbing;
}

.section-block.dragging {
    opacity: 0.46;
    transform: scale(0.992);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.bereich-color-bar {
    width: 4px;
    height: 18px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.section-title-block {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.section-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-id-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 999px;
    min-height: 32px;
    padding: 5px 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px var(--surface-2);
    flex-shrink: 0;
    cursor: pointer;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

.section-id-chip:hover,
.section-id-chip:focus-visible {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
}

.section-id-chip.is-copied {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 36%, transparent);
    background: color-mix(in srgb, var(--success) 10%, var(--surface-2));
}

.section-epic-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 190px;
    border: 1px solid color-mix(in srgb, var(--section-epic-accent, var(--accent)) 28%, var(--border));
    background: color-mix(in srgb, var(--section-epic-accent, var(--accent)) 9%, var(--surface));
    color: var(--text-2);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

.section-epic-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--section-epic-accent, var(--accent));
    flex-shrink: 0;
}

.task-id-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 999px;
    padding: 2px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px var(--surface-2);
    white-space: nowrap;
    cursor: copy;
}

.task-id-chip:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.task-id-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.task-id-chip.is-copied {
    color: var(--success, #16a34a);
    border-color: currentColor;
}

.section-edit-btn {
    margin-left: auto;
}

.section-title-block .section-name {
    flex: 0 1 auto;
    min-width: 0;
}

.section-title-block .section-edit-btn,
.section-title-block .section-copy-btn,
.section-title-block .section-archive-btn,
.section-title-block .section-archived-badge {
    flex-shrink: 0;
}

.section-toggle {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-4);
    transition: color 0.16s ease;
}

.section-toggle:hover {
    color: var(--text-1);
}

.section-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-count {
    padding: 4px 9px;
    font-size: 11px;
    color: var(--text-2);
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
}

.section-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-3);
}

.overbudget {
    color: var(--danger);
    font-weight: 700;
}

.section-prog-text {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.section-prog-bar {
    width: 110px;
    height: 6px;
}

.section-context {
    padding: 8px 20px;
    font-size: 12.5px;
    color: var(--text-3);
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    white-space: pre-wrap;
    line-height: 1.55;
}

.story-proposals {
    margin: 12px 0;
    padding: 10px 0;
    min-width: 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    font-size: .85rem;
}
.story-proposals--compact { margin: 0; padding: 8px 20px; font-size: 12px; }
.story-proposals summary { cursor: pointer; color: var(--text-3); }
.story-proposals__count { margin-left: 6px; font-weight: 600; }
.story-proposals ul { list-style: none; margin: 8px 0; padding: 0; }
.story-proposals li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0; }
.story-proposals a { min-width: 0; overflow-wrap: anywhere; }
.story-proposals__stage, .story-proposals__status { color: var(--text-3); font-size: .8rem; }
.story-proposals__status { margin: 8px 0; }

.section-edit-btn,
.section-copy-btn,
.section-export-btn,
.section-archive-btn,
.section-focus-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 13px;
}

.section-header:hover .section-edit-btn,
.section-edit-btn:focus,
.section-header:hover .section-copy-btn,
.section-copy-btn:focus,
.section-header:hover .section-export-btn,
.section-export-btn:focus,
.section-header:hover .section-archive-btn,
.section-archive-btn:focus,
.section-header:hover .section-focus-btn,
.section-focus-btn:focus {
    opacity: 1;
}

/* Fokus öffnet die Story-Ansicht: gleiches Icon-Button-Format wie die
   übrigen Header-Aktionen, nur der Hover ist akzentuiert */
.section-focus-btn.btn-icon:hover {
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.section-steps {
    padding: 2px 0;
    position: relative;
    transition: background 0.14s ease, outline-color 0.14s ease;
}

/* Step rows and items */

.step-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
    transition:
        background 0.14s ease,
        opacity 0.14s ease,
        transform 0.12s ease,
        box-shadow 0.14s ease;
}

.step-item:last-of-type {
    border-bottom: none;
}

.step-item:hover {
    background: var(--surface-2);
}

.step-item:hover .step-row-actions,
.step-item:focus-within .step-row-actions {
    opacity: 1;
    pointer-events: auto;
}

.step-item[draggable="true"] {
    cursor: grab;
}

.step-item[draggable="true"]:active {
    cursor: grabbing;
}

.step-item.dragging {
    opacity: 0.38;
    transform: scale(0.992);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.step-item.step-done {
    opacity: 0.6;
}

.step-item.step-done .step-item-title {
    color: var(--text-4);
    text-decoration: line-through;
}

.step-item-body {
    flex: 1;
    min-width: 0;
}

.step-item-title {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.step-item-desc {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 520px;
}

.step-item.is-expanded .step-item-desc {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    overflow-wrap: anywhere;
}

.step-expand-btn {
    background: none;
    border: none;
    padding: 0 4px;
    margin-left: 2px;
    cursor: pointer;
    color: var(--text-3);
    font-size: 11px;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease;
}

.step-expand-btn:hover {
    color: var(--text-1);
}

.step-item.is-expanded .step-expand-btn {
    transform: rotate(90deg);
}

/* Nur auf schmalen Bildschirmen sichtbar (Mobile-Block unten). */
.step-more-btn {
    display: none;
}

.step-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.step-row-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
    flex-shrink: 0;
    margin-top: 1px;
}

.step-act-btn {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.step-act-btn:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
}

.step-act-btn.is-copied {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 36%, transparent);
    background: color-mix(in srgb, var(--success) 10%, var(--surface-2));
    font-size: 10px;
    font-weight: 800;
}

.step-act-del:hover {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 24%, transparent);
    color: var(--danger);
}

@media (hover: none) {
    .step-row-actions {
        opacity: 1;
        pointer-events: auto;
    }}

.step-add-row {
    padding: 12px 20px 16px;
}

.btn-add-step {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    transition: color 0.16s ease;
}

.btn-add-step:hover {
    color: var(--accent-strong);
}

/* Backlog panel */

.backlog-block {
    border: 1.5px dashed var(--border-strong);
    background: transparent;
    box-shadow: none;
    margin-bottom: 20px;
}

.backlog-block:hover {
    box-shadow: none;
}

.backlog-header {
    background: transparent;
}

.backlog-icon {
    font-size: 16px;
    color: var(--text-4);
    line-height: 1;
}

.backlog-count {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
    color: var(--text-3);
}

/* Drag handle on backlog steps */

.drag-handle {
    font-size: 16px;
    color: var(--text-4);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    padding: 2px 4px;
    margin-top: 1px;
    transition: color 0.12s ease;
}

.drag-handle:active {
    cursor: grabbing;
}

.backlog-step-item:hover .drag-handle {
    color: var(--text-2);
}

/* Dragging state */

.backlog-step-item.dragging {
    opacity: 0.4;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Drop target on section step lists */

.section-steps.drop-target,
#backlog-steps.drop-target {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    outline: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: -2px;
    border-radius: 0 0 20px 20px;
}

/* Drop zone hint */

.drop-zone-hint {
    display: none;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-strong);
    letter-spacing: 0.04em;
}

.section-steps.drop-target .drop-zone-hint,
#backlog-steps.drop-target .drop-zone-hint {
    display: block;
}

/* Quick add form in backlog */

.backlog-add-area {
    padding: 10px 20px 16px;
}

.backlog-quick-add {
    display: flex;
    align-items: center;
    gap: 8px;
}

.backlog-input {
    flex: 1;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-1);
    font-size: 14px;
    outline: none;
    transition: border-color 0.14s ease;
}

.backlog-input:focus {
    border-color: var(--accent);
}

/* btn-xs utility */

.btn-xs {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--r-xs, 6px);
}

/* Prompt/Note card sections */

.proj-pn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 16px;
}

.proj-pn-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.proj-pn-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.proj-pn-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
}

.proj-pn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 700;
    padding: 0 5px;
}

.proj-pn-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.proj-pn-empty {
    font-size: 12px;
    color: var(--text-4);
    font-style: italic;
    padding: 6px 0;
    margin: 0;
}

.proj-pn-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual cards */

.proj-pn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 160px;
    min-height: 90px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
    overflow: hidden;
}

.proj-pn-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.proj-pn-card-icon {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1;
}

.proj-pn-card-body {
    flex: 1;
    min-width: 0;
}

.proj-pn-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.4;
    word-break: break-word;
}

.proj-pn-card-tag {
    font-size: 10px;
    color: var(--text-4);
    margin-top: 3px;
}

.proj-pn-card-preview {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.45;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.proj-pn-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.14s;
}

.proj-pn-card:hover .proj-pn-card-actions {
    opacity: 1;
}

.proj-pn-card-copy {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

.proj-pn-card-copy:hover {
    background: var(--surface-3);
    color: var(--text-1);
}

.proj-pn-card-unlink {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

.proj-pn-card-unlink:hover {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 24%, transparent);
    color: var(--danger);
}

/* Completed section */

.section-all-done .section-header {
    background: color-mix(in srgb, var(--success) 4%, var(--surface));
}

.section-done-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--success);
    background: var(--success-soft);
    border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
    border-radius: 999px;
    padding: 2px 7px;
}

/* Overview icon badges (Kontext / Scope / Doku) */

.plc-cs-icons {
    display: flex;
    gap: 6px;
    margin: 0;
    flex-shrink: 0;
}

.plc-cs-icon-badge {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    cursor: default;
}

.plc-cs-icon-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.plc-cs-icon-badge--context {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.16);
    color: #6366f1;
}

.plc-cs-icon-badge--scope {
    background: var(--accent-soft);
    border-color: var(--accent-soft-2);
    color: var(--accent-strong);
}

.plc-cs-icon-badge--doc {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 18%, transparent);
    color: var(--success);
}

/* ── Projekt-Detail Redesign: ruhigere, klarere Oberfläche ─────────── */

/* Titelzeile mit Projekt-Farbakzent */

.proj-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

.proj-title-row h2 {
    margin-bottom: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.proj-title-dot {
    width: 13px;
    height: 13px;
    border-radius: 4.5px;
    flex-shrink: 0;
    margin-top: 7px;
    background: var(--proj-accent, var(--accent));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--proj-accent, var(--accent)) 14%, transparent);
}

/* Story-Löschen erst bei Hover zeigen — wie Bearbeiten/Kopieren/Archivieren */

.section-meta [data-action="del-section"] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.section-header:hover .section-meta [data-action="del-section"],
.section-meta [data-action="del-section"]:focus {
    opacity: 1;
}

/* Touch-Geräte: alle Header-Aktionen dauerhaft sichtbar */

@media (hover: none) {
    .section-edit-btn,
    .section-copy-btn,
    .section-export-btn,
    .section-archive-btn,
    .section-focus-btn,
    .section-meta [data-action="del-section"] {
        opacity: 1;
    }
}

/* Mobile responsive */

@media (max-width: 768px) {
    .project-id-chip,
    .proj-detail-topbar .btn-link {
        min-height: 44px;
    }

    .proj-view-toggle {
        display: none;
    }

    .proj-topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .proj-detail-actions {
        align-items: flex-start;
    }

    .proj-action-group + .proj-action-group {
        padding-left: 0;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .project-overview-bar {
        padding: 12px 14px;
    }

    .project-info-panel-head {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 14px;
    }

    .project-info-panel-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .project-info-empty {
        padding: 12px 14px;
    }

    .section-header {
        padding: 10px 12px;
        gap: 8px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .section-title-row {
        flex: 1 1 100%;
        align-items: flex-start;
    }

    .section-title-block {
        flex-wrap: wrap;
    }

    .section-title-block .section-name {
        flex: 1 1 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.45;
    }

    .section-header .btn-icon,
    .section-toggle {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        opacity: 1;
    }

    .section-id-chip {
        min-height: 44px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        flex-shrink: 1;
    }

    .section-title-block .story-tag,
    .section-epic-chip {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .section-edit-btn {
        margin-left: 0;
    }

    .section-meta [data-action="del-section"] {
        opacity: 1;
    }

    .section-meta {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }

    .section-prog-bar {
        width: 100%;
        flex: 1;
        min-width: 40px;
    }

    /* Task-Zeilen: Inhalt zuerst. Im Ruhezustand zeigt eine Zeile Status,
       Titel und nur die informativen Chips; Aktionen, Task-ID und der
       Mensch/Agent-Umschalter liegen hinter „⋯“ (.actions-open). */
    .step-item {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
        padding: 4px 4px 6px 2px;
        gap: 0 4px;
        min-width: 0;
    }

    .step-item-body {
        display: contents;
    }

    .step-item-title {
        grid-column: 2;
        display: flex;
        align-items: flex-start;
        gap: 0;
        min-width: 0;
        margin-bottom: 0;
        font-size: 14.5px;
        overflow-wrap: anywhere;
    }

    /* Erste Titelzeile auf Höhe des Statuskreises. */
    .step-title-text {
        flex: 1;
        min-width: 0;
        padding: 11px 0 2px;
    }

    .step-archived .step-item-title {
        grid-column: 1 / -1;
        padding: 6px 0 2px 12px;
    }

    .step-item-desc,
    .step-item-meta {
        grid-column: 2 / -1;
        min-width: 0;
        max-width: 100%;
    }

    .step-item-desc {
        margin: 0 8px 4px 0;
        font-size: 12.5px;
    }

    .step-item-meta {
        gap: 4px 6px;
        padding-right: 8px;
        margin-bottom: 4px;
    }

    .step-archived .step-item-meta {
        grid-column: 1 / -1;
        padding-left: 12px;
    }

    .step-item.is-expanded .step-item-desc {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .step-item-meta > * {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Ruhezustand: nichts Bedienbares in der Meta-Zeile außer Links.
       „Offen“/„Erledigt“ zeigt der Statuskreis, „In Arbeit“ bleibt stehen. */
    .step-item:not(.step-archived):not(.actions-open) .step-item-meta > .task-id-chip,
    .step-item:not(.actions-open) .step-item-meta > .executor-badge,
    .step-item-meta > .step-status-tag.status-offen,
    .step-item-meta > .step-status-tag.status-erledigt {
        display: none;
    }

    /* Agent-Tasks bleiben ohne den Umschalter erkennbar. */
    .step-item[data-executor="ai"]:not(.actions-open) .step-item-meta::before {
        content: attr(data-ai-label);
        padding: 2px 7px;
        border-radius: 6px;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        color: var(--accent-strong);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .step-item .step-check,
    .step-item .step-expand-btn,
    .step-item .step-more-btn,
    .step-item-meta > button,
    .step-item-meta > a {
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }

    .step-item .step-check,
    .step-item .step-expand-btn,
    .step-item .step-more-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        margin: 0;
    }

    /* Der sichtbare Kreis bleibt klein, die Trefferfläche 44px. */
    .step-item .step-check {
        grid-column: 1;
        grid-row: 1;
        border-width: 0;
        background: transparent;
        position: relative;
    }

    .step-item .step-check::before {
        content: "";
        position: absolute;
        inset: 11px;
        border-radius: 50%;
        border: 2px solid var(--step-check-ring, var(--border-strong));
        background: var(--step-check-fill, transparent);
    }

    .step-item .step-check--offen { --step-check-ring: rgba(249, 115, 22, 0.52); }
    .step-item .step-check--in_arbeit {
        --step-check-ring: rgba(212, 149, 46, 0.7);
        --step-check-fill: rgba(212, 149, 46, 0.14);
    }
    .step-item .step-check--erledigt {
        --step-check-ring: rgba(28, 184, 112, 0.52);
        --step-check-fill: var(--success-soft);
    }

    .step-item .step-check--erledigt::after {
        position: relative;
    }

    .step-item .step-expand-btn,
    .step-item .step-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 10px;
        background: none;
        color: var(--text-3);
        cursor: pointer;
    }

    .step-item .step-more-btn {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.05em;
    }

    .step-item.actions-open .step-more-btn {
        background: var(--surface-3, var(--surface-2));
        color: var(--text-1);
    }

    /* Aktionen erst nach „⋯“, dann mit Text statt Symbolrätsel. */
    .step-row-actions {
        grid-column: 1 / -1;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin: 4px 8px 6px;
        opacity: 1;
        pointer-events: auto;
    }

    .step-item.actions-open .step-row-actions,
    .step-archived .step-row-actions {
        display: grid;
    }

    .step-act-btn {
        width: auto;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
        gap: 8px;
        padding: 0 10px;
        justify-content: flex-start;
        border-radius: 10px;
        font-size: 13px;
    }

    .step-act-btn::after {
        content: attr(aria-label);
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.2;
        text-align: left;
    }

    /* Bearbeiten ist die häufigste Aktion, Löschen steht zuletzt. */
    .step-act-btn[data-action^="edit"] {
        order: -1;
    }

    .step-act-btn.step-act-del {
        order: 1;
    }

    .step-act-btn.btn-confirm-pending::after,
    .step-act-btn.is-copied::after {
        content: none;
    }

    .step-add-row {
        padding: 4px 12px 8px;
    }

    .backlog-add-area {
        padding: 8px 16px 14px;
    }
}

@media (max-width: 680px) {
    .proj-pn-grid {
        grid-template-columns: 1fr;
    }

    .cs-cards-row {
        grid-template-columns: 1fr;
        padding: 12px 14px;
    }}

@media (max-width: 480px) {
    .proj-topbar-actions {
        width: 100%;
        justify-content: stretch;
    }

    .proj-detail-actions {
        flex-direction: column;
        gap: 8px;
    }

    .proj-action-group {
        width: 100%;
        justify-content: stretch;
    }

    .proj-action-group--mode {
        justify-content: flex-start;
    }

    .proj-action-group + .proj-action-group {
        padding-left: 0;
        padding-top: 8px;
        border-left: 0;
        border-top: 1px solid var(--border-soft);
    }

    .proj-topbar-actions:not(.proj-detail-actions) > button,
    .proj-action-group > button {
        flex: 1;
    }

    .pmd-item {
        padding: 12px 14px;
    }

    .pmd-item-title {
        font-size: 13.5px;
    }

    .section-header {
        padding: 12px 14px;
    }


    .project-list-card {
        padding: 16px;
    }

    .plc-name {
        font-size: 15px;
    }}

/* ── Archived / Done story grouping ─────────────────────────────── */

.section-archived-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-4);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 6px;
}

.section-creator-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 1px 8px;
    flex-shrink: 0;
    line-height: 1.6;
}

.section-creator-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
}

.story-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 20px;
    padding: 1px 7px;
    flex-shrink: 0;
    line-height: 1.6;
}

.section-block.section-archived {
    opacity: 0.6;
}

.section-block.section-archived .section-header {
    background: var(--surface-2);
}

/* Done-sections group */

.done-sections-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.done-sections-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    background: var(--surface-2);
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.12s;
}

.done-sections-toggle-row:hover {
    background: var(--surface);
}

.done-sections-toggle-row.is-open {
    border-bottom-color: var(--border-soft);
}

.done-sections-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 1;
}

.done-sections-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 1px 8px;
    min-width: 22px;
    text-align: center;
}

.done-sections-chevron {
    font-size: 11px;
    color: var(--text-4);
    transition: transform 0.15s;
}

.done-sections-toggle-row.is-open .done-sections-chevron {
    transform: rotate(0deg);
}

.done-sections-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.done-sections-body .section-block {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border-soft);
}

.done-sections-body .section-block:last-child {
    border-bottom: none;
}

.done-epics-body {
    gap: 0;
}

.done-epics-body .epic-block {
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--edge-light-sm) var(--edge-tint);
}

.done-epics-body .epic-block:last-child {
    border-bottom: none;
}

/* Archived sections group */

.archived-sections-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0.75;
}

.archived-sections-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    background: var(--surface-2);
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.12s;
}

.archived-sections-toggle-row:hover {
    background: var(--surface);
}

.archived-sections-toggle-row.is-open {
    border-bottom-color: var(--border-soft);
}

.archived-sections-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-4);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 1;
}

.archived-sections-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 1px 8px;
    min-width: 22px;
    text-align: center;
}

.archived-sections-chevron {
    font-size: 11px;
    color: var(--text-4);
}

.archived-sections-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.archived-sections-body .section-block {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border-soft);
}

.archived-sections-body .section-block:last-child {
    border-bottom: none;
}
/* Project detail reveal: the loaded layout is already in place while its
   primary regions enter, avoiding the abrupt skeleton-to-content jump. */
.project-detail-shell > .proj-detail-topbar,
.project-detail-shell > .project-panel {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 360ms ease;
    will-change: opacity, transform, filter;
}

.project-detail-shell > .project-panel {
    transition-delay: 110ms;
}

.project-detail-shell.is-ready > .proj-detail-topbar,
.project-detail-shell.is-ready > .project-panel {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .project-detail-shell > .proj-detail-topbar,
    .project-detail-shell > .project-panel {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* Projektbereiche: Arbeit, Wissen, Historie und Einstellungen. */
.project-panel[hidden],
.project-history-results[hidden],
#project-panel-active .project-mine-hidden {
    display: none !important;
}

/* Ein Kopf statt zwei Zeilen: links Titel, Kennung und Beschreibung, rechts
   oben das Paar Intake ⇢ Arbeit mit dem Projektmenü und darunter die kleinen
   Bereiche. So beginnt der Inhalt des Bereichs direkt unter dem Kopf. */
.proj-detail-topbar {
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.proj-detail-head { flex: 1 1 320px; }
.proj-detail-head .breadcrumb { margin-bottom: 6px; }
.proj-detail-head .proj-title-row { flex-wrap: wrap; row-gap: 6px; margin-bottom: 0; }
.proj-detail-head .project-id-chip { margin-top: 2px; }
.proj-detail-desc {
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.proj-detail-side {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
}
.proj-detail-side > .proj-detail-actions { min-height: 56px; align-items: center; }

/* Intake und Arbeit sind die beiden Arbeitsbereiche: ein hervorgehobenes
   Paar, verbunden durch den Übergabe-Pfeil. Wissen, Historie und
   Einstellungen stehen klein darunter. */
.project-tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
}

.project-tabs__work {
    display: flex;
    align-items: stretch;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    min-width: 0;
}

.project-tabs__more { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }

.project-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    padding: 11px 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
}

.project-tab:hover { background: var(--surface-2); color: var(--text-1); }
.project-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.project-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.project-tab-count { font-size: 11px; background: var(--surface-2); border-radius: 12px; padding: 2px 6px; }
.project-tab-count[hidden] { display: none; }

.project-tab--minor { min-height: 34px; padding: 6px 11px; font-size: 13px; font-weight: 600; }

.project-tab--work {
    gap: 10px;
    min-height: 46px;
    padding: 5px 12px 5px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text-2);
    text-align: left;
}
.project-tab--work[aria-selected="true"], .project-tab--work[aria-current="page"] {
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
    color: var(--intake-accent-text, var(--accent-strong));
}
.project-tab--work[aria-current="page"] { background: var(--accent-soft); cursor: default; }
.project-tab__icon { display: inline-flex; flex: none; }
.project-tab__text { display: grid; gap: 0; }
.project-tab__label { font-size: 14px; font-weight: 700; line-height: 1.3; }
.project-tab-count--work { min-width: 24px; padding: 2px 7px; font-size: 11.5px; font-weight: 700; text-align: center; background: var(--surface-3); color: var(--text-2); }
.project-tab--work[aria-selected="true"] .project-tab-count--work { background: var(--surface); color: var(--intake-accent-text, var(--accent-strong)); }

.project-tabs__flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 64px;
    padding: 0 6px;
}
.project-tabs__flow svg { display: block; overflow: visible; }
.project-tabs__flow-base { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.project-tabs__flow-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; animation: project-tabs-flow 1.4s linear infinite; }
.project-tabs__flow-head { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.project-tabs__flow-label { font-size: 11px; font-weight: 650; color: var(--text-3); white-space: nowrap; }
.project-tabs__flow-label:empty { display: none; }
@keyframes project-tabs-flow { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .project-tabs__flow-line { animation: none; } }
.project-panel { min-width: 0; }
.project-work-toolbar, .project-work-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.project-work-toolbar { justify-content: space-between; margin-bottom: 14px; }
.project-backlog { margin-bottom: 20px; }
.project-backlog .backlog-block { border-style: solid; background: var(--surface); }
.project-completed:empty { display: none; }
.project-completed > * { margin-bottom: 14px; }
.project-history-results { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 18px; }
.project-history-results > h3 { margin: 0 0 14px; font-size: 15px; }
.project-panel-heading { margin-bottom: 20px; }
.project-panel-heading h3 { margin: 0 0 6px; }
.project-panel-heading p, .project-settings-card > p { color: var(--text-3); line-height: 1.6; }
.project-panel-heading p { margin: 0; }
.project-knowledge .cs-cards-row { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 16px; }
.project-knowledge .cs-card-text { display: block; -webkit-line-clamp: unset; }
.project-knowledge .cs-card-textarea { min-height: 220px; }
.project-knowledge .proj-pn-grid { padding: 0; margin-top: 24px; }
.project-settings { display: grid; gap: 18px; }
.project-settings-card { padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0; overflow-wrap: anywhere; }
.project-settings-card > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.project-settings-card h3 { margin: 0; font-size: 16px; }
.project-settings .members-panel { margin-top: 0; }
.project-policy-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0 0; }
.project-policy-summary dt { font-weight: 650; margin-bottom: 6px; }
.project-policy-summary dd { margin: 0; color: var(--text-3); line-height: 1.6; font-size: 13px; }
.project-policy-summary ul { margin: 0; padding-left: 18px; }
.project-color-label { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-3); }
.project-color-label > span { width: 12px; height: 12px; border-radius: 50%; }
.project-menu { position: relative; }
.project-menu > summary { cursor: pointer; list-style: none; }
.project-menu > summary::-webkit-details-marker { display: none; }
.project-menu > summary::after { content: " ▾"; }
.project-menu-items { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: max-content; max-width: min(300px, calc(100vw - 48px)); padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-md); display: grid; gap: 6px; }
.project-menu-items button { text-align: left; white-space: normal; }
.proj-detail-topbar { position: relative; z-index: 2; }
.project-status-label { color: var(--text-3); font-size: 13px; }

.project-automation-button.is-active { border-color: var(--accent); color: var(--accent); }
.project-automation-list, .project-automation-create { display: grid; gap: 16px; }
.project-automation-create { border-top: 1px solid var(--border); padding-top: 20px; }
.project-automation-create > button { justify-self: start; }
.project-automation-grant { display: grid; gap: 12px; padding: 16px; margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; }
.project-automation-grant__heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.project-automation-grant strong { white-space: pre-wrap; overflow-wrap: anywhere; }
.project-automation-grant code { overflow-wrap: anywhere; font-size: 12px; color: var(--text-3); }
.project-automation-status { font-size: 12px; color: var(--text-3); }
.project-automation-status.is-active { color: var(--accent); }
.project-automation-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.project-automation-message { margin: 0; min-height: 1.5em; }
.project-automation-message.is-error { color: var(--danger); }

@media (max-width: 768px) {
    .project-tab--minor { min-height: 44px; }
}

@media (max-width: 680px) {
    .proj-detail-head { flex: 0 0 auto; }
    .proj-detail-side { flex-direction: column; align-items: stretch; margin-left: 0; }
    .proj-detail-side > .proj-detail-actions { order: -1; min-height: 0; flex-direction: row; justify-content: flex-end; align-items: center; }
    .project-tabs { align-items: stretch; }
    .project-tabs__more { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .project-tab { padding: 10px 12px; font-size: 13px; }
    .project-tab--work { padding: 6px 10px; }
    .project-tabs__work .project-tab--work { flex: 1 1 0; }
    .project-tabs__flow { min-width: 48px; padding: 0 4px; }
    .project-tabs__flow svg { width: 36px; }
    .project-settings-card { padding: 16px; }
    .project-policy-summary { grid-template-columns: minmax(0, 1fr); }
    .project-knowledge .proj-pn-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .project-tabs__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .project-tab { justify-content: center; min-height: 44px; }
    .project-tab--work { justify-content: flex-start; }
    .project-tabs__flow-label { display: none; }
    .project-work-toolbar { align-items: stretch; gap: 12px; }
    .project-work-filters,
    .project-work-toolbar .proj-action-group { width: 100%; }
    .project-work-toolbar .btn-sm { flex: 1 1 110px; min-width: 0; height: auto; min-height: 44px; white-space: normal; }
    .project-settings-card > header { flex-wrap: wrap; }
    .plc-header { flex-wrap: wrap; }
    .plc-title-group { flex: 1 1 100%; }
    .plc-name { white-space: normal; overflow-wrap: anywhere; }
}

/* The same closure view is used by the overview and project detail. */
.project-closure { display: flex; flex-direction: column; gap: 1.1rem; }
.project-closure h3 { font-size: 1rem; margin: 0 0 .6rem; }
.project-closure h4 { margin: 0 0 .5rem; }
.project-closure-prose { white-space: pre-wrap; overflow-wrap: anywhere; margin: .5rem 0; }
.project-closure-work { display: grid; gap: .7rem; padding-left: 1.25rem; }
.project-closure-work li { overflow-wrap: anywhere; }
.project-closure-work li > span { display: block; color: var(--text-secondary); font-size: .85rem; }
.project-closure-check { display: flex; align-items: flex-start; gap: .6rem; margin: .6rem 0; }
.project-closure-check input { flex-shrink: 0; margin-top: .2rem; }
.project-closure-story { border-top: 1px solid var(--border); padding-top: .8rem; margin-top: .8rem; }
.project-closure textarea { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin-top: .4rem; }

/* == css/products.css == */
.product-entry {
    margin: 0 0 22px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.product-entry h3 { margin: 0 0 12px; font-size: 15px; }
.product-entry-links { display: flex; flex-wrap: wrap; gap: 8px; }
.product-entry-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-1);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.product-entry-link:hover, .product-entry-link:focus-visible { border-color: var(--accent); }
.product-entry-link small { color: var(--text-3); white-space: nowrap; }
.product-entry-empty { margin: 0; color: var(--text-3); }

.product-detail { max-width: 1120px; margin: 0 auto; min-width: 0; }
.product-detail-topbar { align-items: flex-end; }
.product-detail-kicker {
    margin: 0 0 4px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.product-detail-topbar h2 { overflow-wrap: anywhere; }
.product-action-error { margin: 0 0 12px; color: var(--danger, #c22); }
.product-action-error:empty { display: none; }
.product-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product-metadata-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.product-metadata-card h3 { margin: 0 0 10px; font-size: 15px; }
.product-metadata-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.product-metadata-empty { margin: 0; color: var(--text-3); }

.product-members-panel { min-width: 0; }
.product-members-panel .members-panel-head { align-items: flex-start; }
.product-members-panel .members-panel-head p,
.product-assignees > p { max-width: 70ch; color: var(--text-3); }
.product-members-panel .member-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.product-members-panel .member-actions { flex-shrink: 0; }
.product-assignees h3 { margin: 0 0 6px; }
.product-assignees > p { margin: 0 0 12px; }
.product-assignees--after-members { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.product-assignee-list { display: flex; flex-wrap: wrap; gap: 8px; }
.product-assignee { display: inline-flex; flex-wrap: wrap; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; overflow-wrap: anywhere; }
.product-assignee span { color: var(--text-3); }
.product-members-error:empty { display: none; }

@media (max-width: 680px) {
    .product-metadata { grid-template-columns: minmax(0, 1fr); }
    .product-metadata-card { padding: 16px; }
    .product-detail-topbar { align-items: flex-start; }
}

@media (max-width: 420px) {
    .product-entry-link { width: 100%; justify-content: space-between; }
    .product-detail-topbar .proj-topbar-actions { width: 100%; }
    .product-detail-topbar .proj-topbar-actions button { flex: 1; }
    .product-members-panel .members-panel-head { flex-wrap: wrap; }
    .product-members-panel .members-panel-head > button { width: 100%; }
}

/* == css/container-policies.css == */
.container-policies { padding: 1rem; border: 1px solid var(--border, #ddd); border-radius: 12px; background: var(--surface, #fff); }
.container-policies > header p, .container-policies__editor-hint { color: var(--text-3); font-size: .9rem; line-height: 1.55; }
.container-policies__section { margin-top: 1.2rem; }
.container-policies__section > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.container-policies__section h4 { margin: 0; }
.container-policies__mode { padding: .7rem 0; border-top: 1px solid var(--border, #ddd); }
.container-policies__mode summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.container-policies__mode summary span { font-weight: 400; color: var(--text-3); }
.container-policies__mode ul { margin: .7rem 0 0; padding-left: 1.2rem; }
.container-policies__mode li { margin-bottom: .8rem; }
.container-policies__mode li p { white-space: pre-wrap; overflow-wrap: anywhere; margin: .2rem 0; }
.container-policies__sources { display: flex; flex-wrap: wrap; gap: .3rem; }
.container-policies__sources span { font-size: .75rem; border-radius: 6px; padding: .2rem .4rem; background: var(--surface-2); overflow-wrap: anywhere; }
.container-policies__kind { display: block; font-size: .8rem; color: var(--text-3); margin-bottom: .3rem; }
.container-policies__conflict { padding: .75rem; border-radius: 8px; color: var(--danger, #a72525); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); line-height: 1.5; overflow-wrap: anywhere; }
.product-detail > [data-product-policy-host] { margin: 1.5rem 0; }
@media (max-width: 600px) { .container-policies { padding: .8rem; } .container-policies__section > header { align-items: flex-start; } }

/* == css/product-detail.css == */
.product-detail [hidden] { display: none !important; }
.product-detail-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.product-detail-tabs button { flex: 0 0 auto; border: 0; border-radius: 8px; padding: 12px 16px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; }
.product-detail-tabs button[aria-selected="true"] { color: var(--text-1); background: var(--surface-2, var(--surface)); box-shadow: inset 0 -3px var(--accent, #f97316); font-weight: 700; }
.product-detail :is(summary, button, a):focus-visible { outline: 2px solid var(--accent, #f97316); outline-offset: 3px; }
.product-detail-panel { min-width: 0; }
.product-panel-heading h3 { margin: 0 0 8px; }
.product-panel-heading p { margin: 0 0 20px; color: var(--text-3); max-width: 75ch; line-height: 1.6; }
.product-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-overview-next { margin-top: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.product-overview-next p { color: var(--text-2); line-height: 1.6; }
.product-overview-actions, .product-backlog-toolbar, .product-work-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.product-backlog-toolbar { justify-content: space-between; margin: 0 0 18px; }
.product-work-switch [aria-pressed="true"] { box-shadow: inset 0 -2px var(--accent, #f97316); color: var(--text-1); }
.product-tree-group, .product-epic, .product-story, .product-intake-entry { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.product-detail summary { cursor: pointer; padding: 15px; overflow-wrap: anywhere; line-height: 1.5; }
.product-detail summary::marker { color: var(--text-3); }
.product-detail summary > :is(span, code, a) { margin-right: 9px; }
.product-detail summary > code { font-size: 10px; color: var(--text-3); }
.product-epic > summary, .product-story > summary { font-weight: 600; }
.product-tree-group-body, .product-epic-body, .product-story-body { padding: 0 14px 14px; }
.product-tree-count { display: inline-block; border-radius: 20px; padding: 0 7px; color: var(--text-3); font-size: 12px; background: var(--bg, transparent); }
.product-work-kind, .product-work-status, .product-delivery { display: inline-block; font-size: 11px; font-weight: 500; color: var(--text-3); }
.product-delivery { padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; text-decoration: none; }
a.product-delivery:hover { color: var(--accent, #f97316); }
.product-epic-description, .product-task-field > div, .product-intake-summary { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.product-epic-description { margin: 4px 0 16px; color: var(--text-2); }
.product-ungrouped > h3 { font-size: 15px; margin: 18px 0 12px; color: var(--text-2); }
.product-task-row { border-top: 1px solid var(--border); }
.product-task-row > summary { font-size: 13px; padding: 12px 8px; }
.product-task-row.is-archived { opacity: .8; }
.product-task-title { font-weight: 500; }
.product-task-detail { padding: 0 12px 16px; }
.product-task-field { margin-top: 14px; }
.product-task-field :is(h4, h5) { margin: 0 0 5px; color: var(--text-2); font-size: 12px; }
.product-task-contract { font-size: 12px; color: var(--text-3); margin-top: 15px; }
.product-delivery-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-delivery-card { display: block; min-width: 0; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; overflow-wrap: anywhere; }
.product-delivery-card:hover { border-color: var(--accent, #f97316); }
.product-delivery-card h4 { margin: 0 0 9px; }
.product-delivery-card p { white-space: pre-wrap; line-height: 1.6; color: var(--text-2); }
.product-delivery-card > span { color: var(--text-3); font-size: 12px; }
.product-intake-entry > :is(p, div) { margin: 0; padding: 0 16px 16px; }
.product-detail [data-product-policy-host], .product-detail .product-members-panel { margin-top: 22px; }
@media (max-width: 700px) {
    .product-overview-grid, .product-delivery-projects { grid-template-columns: minmax(0, 1fr); }
    .product-detail-tabs button { padding: 11px 13px; }
    .product-overview-next { padding: 16px; }
    .product-detail-topbar { flex-wrap: wrap; gap: 16px; }
    .product-tree-group-body, .product-epic-body, .product-story-body { padding: 0 8px 10px; }
    .product-detail summary { padding: 12px 10px; }
    .product-task-row > summary > code { display: block; margin-top: 5px; }
}

/* Product work actions: native buttons also support narrow viewports. */
.product-work-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
.product-work-actions [data-work-error] { flex-basis:100%; }
.project-work-toolbar [hidden], .backlog-add-area[hidden], .step-add-row[hidden] { display:none !important; }

/* Source-labelled Product/Project context, including narrow screens. */
.context-source-heading { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--border); }
.context-source-heading h3 { margin:4px 0; }
.context-source-kind { margin:0; font-size:.8rem; color:var(--text-muted); }
.context-source-card, .context-own-project { margin:0 0 20px; padding:18px; border:1px solid var(--border); border-radius:12px; min-width:0; }
.context-source-card .product-metadata { margin-top:16px; }
.context-source-version { max-width:100%; }
.context-source-version summary, .context-policy-source summary { cursor:pointer; }
.context-source-version dl, .context-policy-source dl { margin:10px 0 0; font-size:.8rem; }
.context-source-version dd, .context-policy-source dd { margin:2px 0 10px; }
.context-source-version code, .context-policy-source code { overflow-wrap:anywhere; white-space:normal; }
.context-reference-hint, .context-specification-note { color:var(--text-muted); line-height:1.6; }
.context-source-actions, .context-policy-sources { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.context-policy-source { flex:1 1 220px; min-width:0; padding:10px; border:1px solid var(--border); border-radius:8px; }
.context-overview-source { display:flex; flex-wrap:wrap; gap:8px; color:var(--text-muted); font-size:.8rem; }
@media(max-width:600px) { .context-source-card, .context-own-project { padding:12px; } }

/* Explicit assignment and prepared Project transfer. */
.product-assignment-counts { display:flex; flex-wrap:wrap; gap:12px 24px; }
.product-assignment-counts dt { color:var(--text-muted); font-size:.85rem; }
.product-assignment-counts dd { margin:4px 0; font-weight:600; }
.product-assignment-confirm { display:flex; gap:10px; align-items:flex-start; padding:16px 0; line-height:1.5; }
.product-assignment-inherited { color:var(--text-muted); font-size:.8rem; }
.product-assignment-preview { overflow-wrap:anywhere; }

/* == css/container-overview.css == */
/* Shared container overview. Product metadata has no aggregate task progress. */
.overview-topbar { align-items: flex-start; gap: 20px; }
.overview-toolbar, .overview-tools, .overview-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.overview-toolbar { justify-content: space-between; margin: 0 0 18px; }
.overview-filter { min-height: 40px; }
.overview-filter.is-active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.overview-notice { margin: 0 0 12px; color: var(--text-2); }
.overview-notice:empty { display: none; }
.overview-grid { align-items: stretch; }
.overview-grid .container-card { min-width: 0; position: relative; overflow-wrap: anywhere; }
.overview-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.overview-type { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.overview-card-title, .overview-grid h3.plc-name { margin: 0; font-size: 18px; line-height: 1.35; }
.overview-open { color: var(--text-1); text-decoration: none; }
.overview-open:hover, .overview-parent:hover, .overview-product-projects a:hover { color: var(--accent); text-decoration: underline; }
.overview-grid a:focus-visible, .overview-grid button:focus-visible, .overview-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 5px; }
.overview-grid .plc-dot { padding: 0; border: 0; flex-shrink: 0; }
.overview-grid .plc-title-group { min-width: 0; }
.overview-grid .plc-btn-group { flex-shrink: 0; }
.overview-parent { display: inline-block; font-size: 12px; color: var(--text-2); margin: 6px 0 12px; text-decoration: none; }
.overview-product-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-top: 3px solid var(--accent); border-radius: var(--r-lg, 14px); background: var(--surface); box-shadow: var(--shadow-sm); }
.overview-product-status { align-self: flex-start; margin-top: 12px; padding: 4px 9px; border-radius: 20px; font-size: 12px; font-weight: 650; background: var(--surface-2); color: var(--text-2); }
.overview-product-status--active { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.overview-product-status--paused { background: color-mix(in srgb, var(--warning, #bd7c16) 12%, var(--surface)); }
.overview-product-goal { color: var(--text-2); font-size: 13px; line-height: 1.65; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.overview-product-projects { margin-top: auto; padding-top: 20px; }
.overview-product-projects h4 { margin: 0 0 8px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.overview-product-projects ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.overview-product-projects a { display: block; padding: 7px 0; font-size: 13px; color: var(--text-1); text-decoration: none; }
.overview-projects-empty { font-size: 13px; line-height: 1.6; margin: 0; color: var(--text-3); }
.overview-order-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 12px; }
.overview-order-actions button { min-width: 32px; min-height: 32px; color: var(--text-3); }
.overview-grid .container-card.dragging { opacity: .45; }
.overview-grid .swap-target { outline: 2px dashed var(--accent); outline-offset: 3px; }
@media (max-width: 600px) {
    .overview-topbar { flex-direction: column; }
    .overview-topbar .proj-topbar-actions { justify-content: flex-start; }
    .overview-toolbar { align-items: flex-start; gap: 12px; }
    .overview-filters { width: 100%; }
    .overview-filter { flex: 1; padding-inline: 10px; }
    .overview-grid { grid-template-columns: minmax(0, 1fr); }
    .overview-product-card { padding: 18px; }
    .overview-order-actions button { min-width: 40px; min-height: 40px; }
    .overview-grid .plc-header { flex-wrap: wrap; gap: 12px; }
}

/* == css/intakes.css == */
/* Projekteingang (#intakes, Projekt-Tab „Intake“): eine Arbeitsfläche aus
   drei getrennten Flächen – links die leise Liste nach Phasen, in der Mitte
   das Dossier mit Reitern, rechts die Eigenschaften –, dazu „Ergebnisse
   prüfen“ und die Intake-Runde. Farben kommen aus den Theme-Variablen; eine
   Phase zeigt ihre Farbe nur als helle Fläche mit 1px-Rahmen (Kantenlicht),
   nie als Leuchten oder einseitige Kante. */

:root {
    --intake-accent-text: #C2410C;
    --intake-success-text: #15803D;
    --intake-warning-text: #B45309;
    --intake-dot-high: #DC2626;
    --intake-dot-medium: #F59E0B;
    --intake-dot-low: #D4D4D4;
    /* Phasen: helle Fläche, Text, Punkt */
    --intake-st-neu-bg: #EEF1F5;          --intake-st-neu-fg: #3D4757;
    --intake-st-klaerung-bg: #E8F0FD;     --intake-st-klaerung-fg: #1D4ED8;
    --intake-st-planung-bg: #FFF1E6;      --intake-st-planung-fg: #C2410C;
    --intake-st-umsetzung-bg: #F1EBF6;    --intake-st-umsetzung-fg: #5A3E7C;
    --intake-st-hold-bg: #FBF3E3;         --intake-st-hold-fg: #8A5613;
    --intake-st-erledigt-bg: #E8F5EC;     --intake-st-erledigt-fg: #15803D;
    --intake-st-verworfen-bg: #F3ECEC;    --intake-st-verworfen-fg: #7A3A3A;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --intake-accent-text: #FDBA74;
        --intake-success-text: #4ADE80;
        --intake-warning-text: #FBBF24;
        --intake-dot-high: #F87171;
        --intake-dot-medium: #D9952F;
        --intake-dot-low: #555555;
        --intake-st-neu-bg: #232A34;          --intake-st-neu-fg: #C6CEDA;
        --intake-st-klaerung-bg: #18263D;     --intake-st-klaerung-fg: #93B8F5;
        --intake-st-planung-bg: #33241A;      --intake-st-planung-fg: #FDBA74;
        --intake-st-umsetzung-bg: #2A2236;    --intake-st-umsetzung-fg: #C6AEE6;
        --intake-st-hold-bg: #2D281F;         --intake-st-hold-fg: #E3C58F;
        --intake-st-erledigt-bg: #1A2E21;     --intake-st-erledigt-fg: #86E0A5;
        --intake-st-verworfen-bg: #2F2020;    --intake-st-verworfen-fg: #E3A3A3;
    }
}
[data-theme="dark"] {
    --intake-accent-text: #FDBA74;
    --intake-success-text: #4ADE80;
    --intake-warning-text: #FBBF24;
    --intake-dot-high: #F87171;
    --intake-dot-medium: #D9952F;
    --intake-dot-low: #555555;
    --intake-st-neu-bg: #232A34;          --intake-st-neu-fg: #C6CEDA;
    --intake-st-klaerung-bg: #18263D;     --intake-st-klaerung-fg: #93B8F5;
    --intake-st-planung-bg: #33241A;      --intake-st-planung-fg: #FDBA74;
    --intake-st-umsetzung-bg: #2A2236;    --intake-st-umsetzung-fg: #C6AEE6;
    --intake-st-hold-bg: #2D281F;         --intake-st-hold-fg: #E3C58F;
    --intake-st-erledigt-bg: #1A2E21;     --intake-st-erledigt-fg: #86E0A5;
    --intake-st-verworfen-bg: #2F2020;    --intake-st-verworfen-fg: #E3A3A3;
}

/* ── Gemeinsame Bausteine ─────────────────────────────────────────────── */
.intake-host { min-width: 0; container: intake / inline-size; }
.intake-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.intake-actions > button, .intake-actions > a { display: inline-flex; align-items: center; gap: 8px; }
.intake-meta { color: var(--text-3); font-size: 12.5px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.intake-unfilled { color: var(--text-3); margin: 0; }
.intake-error { color: var(--danger); overflow-wrap: anywhere; margin: 0; }
.intake-error[hidden] { display: none; }
.intake-loading { color: var(--text-3); padding: 24px 0; }
.intake-failed { display: grid; gap: 12px; justify-items: start; padding: 24px 0; }
.intake-kicker { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.intake-count {
    min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 700; flex: none;
}
.intake-pill {
    display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap;
}
/* Eine Phase trägt ihre Farbe als helle Fläche, Text und gleichmäßigen 1px-Rahmen. */
:is(.intake-status-pill, .intake-status-chip)[data-stage="neu"] { --stage-bg: var(--intake-st-neu-bg); --stage-fg: var(--intake-st-neu-fg); }
:is(.intake-status-pill, .intake-status-chip)[data-stage="in_klaerung"] { --stage-bg: var(--intake-st-klaerung-bg); --stage-fg: var(--intake-st-klaerung-fg); }
:is(.intake-status-pill, .intake-status-chip)[data-stage="zur_planung"] { --stage-bg: var(--intake-st-planung-bg); --stage-fg: var(--intake-st-planung-fg); }
:is(.intake-status-pill, .intake-status-chip)[data-stage="in_umsetzung"] { --stage-bg: var(--intake-st-umsetzung-bg); --stage-fg: var(--intake-st-umsetzung-fg); }
:is(.intake-status-pill, .intake-status-chip)[data-stage="on_hold"] { --stage-bg: var(--intake-st-hold-bg); --stage-fg: var(--intake-st-hold-fg); }
:is(.intake-status-pill, .intake-status-chip)[data-stage="erledigt"] { --stage-bg: var(--intake-st-erledigt-bg); --stage-fg: var(--intake-st-erledigt-fg); }
:is(.intake-status-pill, .intake-status-chip)[data-stage="verworfen"] { --stage-bg: var(--intake-st-verworfen-bg); --stage-fg: var(--intake-st-verworfen-fg); }
.intake-status-pill {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 5px; white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: var(--stage-bg, var(--surface-3)); color: var(--stage-fg, var(--text-2));
    border: 1px solid color-mix(in srgb, var(--stage-fg, var(--text-3)) 25%, transparent);
}
.intake-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; border: 1.5px solid transparent; }
.intake-dot[data-urgency="high"] { background: var(--intake-dot-high); border-color: var(--intake-dot-high); }
.intake-dot[data-urgency="medium"] { background: var(--intake-dot-medium); border-color: var(--intake-dot-medium); }
.intake-dot[data-urgency="low"] { background: var(--intake-dot-low); border-color: var(--intake-dot-low); }
.intake-dot[data-urgency="none"] { background: transparent; border-color: var(--text-4); }
.intake-avatar {
    width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 700;
}
.intake-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.intake-bar--large { height: 9px; max-width: 520px; }
.intake-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.intake-bar__fill.is-done { background: var(--success); }
.intake-icon-button { width: 40px; min-width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.intake-label { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.intake-label__hint { font-weight: 500; color: var(--text-3); }
/* Leise Textaktion: „ändern“, „Später“, „Diskutieren“ */
.intake-textlink {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--text-2); font: inherit; font-size: 13px; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.intake-textlink:hover { color: var(--text-1); text-decoration-color: currentColor; }
.intake-textlink:disabled { opacity: .55; cursor: not-allowed; }
.intake-host button:focus-visible, .intake-host a:focus-visible, .intake-host [tabindex]:focus-visible, .intake-host summary:focus-visible,
.intake-host select:focus-visible, .intake-round button:focus-visible, .intake-round a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.intake-field__current { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--warning-soft); }
.intake-field__current p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: var(--text-1); }
[data-dossier-reload][hidden], [data-decision-saved][hidden], [data-status-reload][hidden], [data-rating-reload][hidden],
[data-decision-reload][hidden], [data-decision-form][hidden], [data-hold-fields][hidden] { display: none; }

/* ── Arbeitsfläche: Kopfleiste, Liste, Dossier, Eigenschaften ──────────── */
.intake-workspace { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.intake-appbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.intake-appbar__start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.intake-appbar__title { margin: 0; font-size: 16px; font-weight: 700; }
.intake-appbar__toggle {
    width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--text-3); cursor: pointer;
}
.intake-appbar__toggle:hover { background: var(--surface-2); color: var(--text-1); }
.intake-appbar__toggle[aria-expanded="false"] { border-color: var(--border); }
.intake-appbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.intake-appbar__tools > button { display: inline-flex; align-items: center; gap: 6px; }
.intake-search { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.intake-search > svg { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.intake-search input { width: 220px; max-width: 100%; min-height: 34px; padding-left: 34px; }

.intake-menu { position: relative; }
.intake-menu__button { min-width: 38px; justify-content: center; font-size: 18px; line-height: 1; padding-inline: 10px; }
.intake-menu__list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 250px; margin: 0; padding: 6px; list-style: none;
    background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md);
}
.intake-menu__list[hidden] { display: none; }
.intake-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--r-sm);
    background: none; color: var(--text-1); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.intake-menu__item:hover, .intake-menu__item:focus-visible { background: var(--surface-2); }
.intake-menu__item > svg { color: var(--text-3); }

.intake-work { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.intake-work.is-nav-hidden { grid-template-columns: minmax(0, 1fr); }
.intake-nav[hidden] { display: none; }
.intake-main { min-width: 0; }

/* Liste: kurze Titel klein und gedämpft, Gruppen nach Phase. */
.intake-nav {
    position: sticky; top: 12px; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.intake-nav__group + .intake-nav__group { margin-top: 2px; }
.intake-nav__heading { margin: 0; }
.intake-nav__toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 8px 4px; border: 0; border-radius: var(--r-sm);
    background: none; color: var(--text-3); font: inherit; cursor: pointer; text-align: left;
}
.intake-nav__name { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.intake-nav__total { font-size: 11px; font-variant-numeric: tabular-nums; }
.intake-nav__chevron { margin-left: auto; display: inline-flex; transition: transform .15s ease; }
.intake-nav__toggle[aria-expanded="true"] .intake-nav__chevron { transform: rotate(90deg); }
.intake-nav__toggle:hover { color: var(--text-1); }
.intake-nav__rows { list-style: none; margin: 0; padding: 0 0 4px; }
.intake-nav__rows[hidden] { display: none; }
.intake-nav__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 8px; border: 0;
    border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; text-align: left; cursor: pointer;
}
.intake-nav__row:hover { background: var(--surface-2); }
.intake-nav__row[aria-current="true"] { background: var(--surface-3); }
.intake-nav__title {
    font-size: 13px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.intake-nav__row[aria-current="true"] .intake-nav__title { color: var(--text-1); font-weight: 600; }
.intake-nav__urgent { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--danger); vertical-align: 2px; }
.intake-nav__count { flex: none; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.intake-nav__later { color: var(--text-4); }
.intake-nav__empty { margin: 0; padding: 12px; font-size: 12.5px; color: var(--text-3); }

.intake-empty, .intake-main > .intake-source-view, .intake-main > .intake-sources-view, .intake-main > .intake-failed, .intake-main > .intake-loading {
    padding: 28px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.intake-empty { display: grid; gap: 10px; justify-items: start; }
.intake-empty__title { margin: 0; font-size: 18px; font-weight: 700; }

/* Dossier und Eigenschaften als zwei Flächen nebeneinander. */
.intake-dossier { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; align-items: start; min-width: 0; }
.intake-doc { min-width: 0; padding: 0 40px 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.intake-tabs {
    display: flex; gap: 2px; margin: 0 -40px 24px; padding: 0 28px; overflow-x: auto;
    background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--r) var(--r) 0 0;
}
.intake-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 13px 12px; margin-bottom: -1px; white-space: nowrap; cursor: pointer;
    border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-3); font: inherit; font-size: 14px; font-weight: 600;
}
.intake-tab:hover { color: var(--text-1); }
.intake-tab[aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--text-1); }
.intake-tab__count { font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--surface-3); border-radius: 9px; padding: 1px 7px; }
.intake-tab__count.is-done { background: var(--intake-st-erledigt-bg); color: var(--intake-st-erledigt-fg); }
.intake-doc__head, .intake-tabpanel { max-width: 680px; margin-inline: auto; }
.intake-doc__head { display: flex; flex-direction: column; gap: 8px; }
.intake-dossier__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--text-3); }
.intake-dossier__origin { overflow-wrap: anywhere; }
.intake-dossier__title { margin: 0; font-size: 27px; line-height: 1.22; font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; text-wrap: balance; }
.intake-dossier__title.is-small { font-size: 19px; }
.intake-host .intake-dossier__title:focus, .intake-host .intake-edit__title:focus { outline: none; }
.intake-tabpanel { display: flex; flex-direction: column; gap: 22px; padding-top: 20px; min-width: 0; }
.intake-tabpanel[hidden] { display: none; }
.intake-tabpanel:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.intake-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-1); overflow-wrap: anywhere; }
.intake-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.intake-pair__item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.intake-doc__label { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-1); }
.intake-prose { display: grid; gap: 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 76ch; overflow-wrap: anywhere; }
.intake-prose p { margin: 0; white-space: pre-line; }
.intake-prose__list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
[data-review-rest][hidden] { display: none; }
.intake-jumps { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.intake-jumps:empty { display: none; }
.intake-jump {
    padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    color: var(--intake-accent-text); font: inherit; font-size: 14px; font-weight: 600;
}
.intake-jump:hover { text-decoration: underline; }

/* Zu klären: nummerierte Fragen als Karten, Optionen als gerahmte Liste mit
   Radiokreis, beantwortete als eine Zeile, zurückgestellte gefaltet darunter.
   Auswahl und Empfehlung über helle Fläche und Text, nie über eine farbige Kante. */
.intake-qprogress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13.5px; color: var(--text-2); }
.intake-qprogress strong { color: var(--text-1); font-weight: 650; }
.intake-qprogress__later { color: var(--text-3); }
.intake-qprogress .intake-bar { flex: 1; min-width: 120px; }
.intake-qnotice { margin: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.intake-qnotice[hidden], .intake-qcard__notice[hidden], .intake-qopts__other[hidden], .intake-qedit__reason[hidden] { display: none; }
.intake-qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.intake-qcard { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.intake-qcard__head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 14px 16px 10px; }
.intake-qcard__number { font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.5; }
.intake-qcard__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-1); overflow-wrap: anywhere; }
.intake-qcard__edit { font-size: 12.5px; color: var(--text-3); min-height: 22px; }
.intake-qcard__body { display: grid; gap: 8px; padding: 0 16px 12px 48px; }
.intake-qcard__input { width: 100%; font-size: 14px; resize: vertical; }
.intake-qcard__notice { margin: 0; font-size: 13px; color: var(--text-2); }
.intake-qcard__notice.is-error { color: var(--danger); }
.intake-qcard__actions {
    display: flex; align-items: center; gap: 16px; padding: 8px 16px 8px 48px;
    background: var(--surface-2); border-top: 1px solid var(--border-soft);
}
.intake-qcard__actions .btn-primary { margin-left: auto; }
.intake-qcard.is-answered, .intake-qcard.is-deferred { background: var(--surface-2); border-color: var(--border-soft); }
.intake-qcard.is-answered .intake-qcard__head { padding-bottom: 2px; }
.intake-qcard.is-answered .intake-qcard__text, .intake-qcard.is-deferred .intake-qcard__text {
    font-size: 14px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.intake-qcard.is-deferred .intake-qcard__head { padding-bottom: 12px; align-items: center; }
.intake-qcard__answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 0 16px 12px 48px; font-size: 14px; color: var(--text-1); }
.intake-qcard__answer-text { flex: 1 1 12em; min-width: 0; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.intake-qcard__by { font-size: 12.5px; color: var(--text-3); }
.intake-qcard__check { color: var(--intake-success-text); }

/* Optionen: eine gerahmte Liste, eine Zeile je Option; die gewählte Zeile hat eine helle Fläche. */
.intake-qopts { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.intake-qopts__group { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.intake-qopt {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 10px; width: 100%;
    margin: 0; padding: 10px 12px; border: 0; border-top: 1px solid var(--border-soft); border-radius: 0;
    background: var(--surface); color: var(--text-1); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.intake-qopt:first-child { border-top: 0; }
.intake-qopt:hover { background: var(--surface-2); }
.intake-qopt[aria-checked="true"] { background: var(--surface-2); }
.intake-qopt.is-static { cursor: default; }
.intake-qopt.is-static:hover { background: var(--surface); }
.intake-qopt.is-static .intake-qopt__radio { visibility: hidden; }
.intake-host .intake-qopt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.intake-qopt__radio {
    width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--text-4);
    display: grid; place-items: center; box-sizing: border-box;
}
.intake-qopt[aria-checked="true"] .intake-qopt__radio { border-color: var(--text-1); }
.intake-qopt[aria-checked="true"] .intake-qopt__radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-1); }
.intake-qopt__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.intake-qopt[aria-checked="true"] .intake-qopt__text { font-weight: 600; }
.intake-qopt__why { font-weight: 400; font-size: 12.5px; color: var(--text-3); }
.intake-qopt__rec {
    align-self: start; margin-top: 1px; padding: 1px 6px; border-radius: var(--r-xs);
    background: var(--accent-soft); color: var(--intake-accent-text);
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
}
.intake-qopt.is-other .intake-qopt__text { color: var(--text-2); }
.intake-qopt.is-other[aria-checked="true"] .intake-qopt__text { color: var(--text-1); }
.intake-qopts__other { padding: 0 12px 12px 40px; background: var(--surface-2); }

/* Zurückgestellte Fragen: gefaltete Gruppe unter der Liste. */
.intake-qlater { display: grid; gap: 8px; }
.intake-qlater__summary { cursor: pointer; width: fit-content; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.intake-qlater__summary:hover { color: var(--text-1); }

/* Optionen bearbeiten: kleiner Editor in der Karte. */
.intake-qedit { display: grid; gap: 10px; }
.intake-qedit__set { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.intake-qedit__set legend { padding: 0; margin-bottom: 4px; }
.intake-qedit__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.intake-qedit__row input[type="radio"], .intake-qedit__none input { width: 16px; height: 16px; margin: 0; accent-color: var(--text-1); }
.intake-qedit__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding-left: 28px; }
.intake-qedit__none { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.intake-qedit__reason { display: grid; gap: 4px; }
.intake-qedit__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Volltext: nach Überschriften gegliedert, jeder Abschnitt klappt. */
.intake-fulltext { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.intake-section { border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--surface); min-width: 0; }
.intake-section__summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; }
.intake-section__summary::-webkit-details-marker { display: none; }
.intake-section__summary::before {
    content: ""; flex: none; width: 6px; height: 6px; margin-right: 2px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
    transform: rotate(-45deg); transition: transform .15s ease;
}
.intake-section[open] > .intake-section__summary::before { transform: rotate(45deg); }
.intake-section__title { font-size: 14.5px; font-weight: 700; color: var(--text-1); overflow-wrap: anywhere; }
.intake-md { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }
.intake-section > .intake-md { padding: 0 16px 14px 30px; }
.intake-md > * { margin: 0; }
.intake-md h1, .intake-md h2, .intake-md h3 { font-size: 15px; font-weight: 700; color: var(--text-1); }
.intake-md ul, .intake-md ol { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.intake-md blockquote { padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); }
.intake-md pre { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); overflow-x: auto; font-size: 13px; }
.intake-md code { font-size: .92em; }
.intake-md a { color: var(--intake-accent-text); }

/* Verlauf: Weg, Umsetzung, Diskussion, Entscheidungen, Belege, AI untereinander. */
.intake-trail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.intake-trail + .intake-trail, .intake-tabpanel > .intake-track + .intake-trail { padding-top: 20px; border-top: 1px solid var(--border-soft); }
.intake-trail:empty { display: none; }
.intake-trail__head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.intake-trail__title, .intake-doc .intake-panel__title, .intake-doc .intake-delivery h4, .intake-doc .intake-ai h4, .intake-doc .visual-header h4 {
    margin: 0; font-size: 15px; font-weight: 700; color: var(--text-1);
}
.intake-doc .intake-panel, .intake-doc .intake-delivery, .intake-doc .intake-ai, .intake-doc .visual-attachments {
    margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; min-width: 0;
}
.intake-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.intake-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.intake-doc .visual-error:empty, .intake-doc .intake-delivery [data-delivery-status]:empty { display: none; }
.intake-delivery__head-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intake-delivery__head-actions .intake-icon-button { width: 32px; min-width: 32px; height: 32px; }
.intake-doc .intake-delivery > header { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.intake-doc .intake-delivery-pending { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.intake-delivery-pending > summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--text-2); }
.intake-delivery-pending > p { margin: 8px 0 0; }
.intake-doc .intake-delivery-targets code, .intake-doc .intake-delivery-kind,
.intake-doc .intake-delivery-pending > p, .intake-doc .intake-delivery-pending li > span { color: var(--text-3); }
.intake-ai { display: grid; gap: 10px; }
.intake-ai h4 { margin: 0; }
.intake-ai .intake-actions { display: grid; gap: 8px; }
.intake-ai button, .intake-merge-history button { min-height: 44px; white-space: normal; text-align: left; }
.intake-dossier__failed { display: grid; gap: 12px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.intake-doc > [data-dossier-error]:not([hidden]) { max-width: 680px; margin: 16px auto 0; }

/* Ein Bearbeiten-Modus: alle Texte in einem Formular, eine Vorschau für den Volltext. */
.intake-edit { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; padding-top: 28px; }
.intake-edit__head { display: grid; gap: 4px; }
.intake-edit__title { margin: 0; font-size: 19px; font-weight: 700; }
.intake-edit__field { display: grid; gap: 6px; min-width: 0; }
.intake-edit__field textarea { font-size: 14.5px; line-height: 1.55; resize: vertical; }
.intake-edit__field input[name="title"] { font-size: 17px; font-weight: 650; }
.intake-edit__preview-box { border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.intake-edit__preview-box > summary { padding: 8px 12px; cursor: pointer; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.intake-edit__preview { padding: 0 12px 12px; max-height: 420px; overflow: auto; }
.intake-edit__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.intake-edit__actions [data-dossier-reload] { margin-right: auto; }

/* Eigenschaften: Status als Chips, darunter eine ruhige Liste. */
.intake-side {
    position: sticky; top: 12px; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.intake-side__label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.intake-status { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.intake-status__derived { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.intake-status__readonly { margin: 0; }
.intake-status__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.intake-status-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500;
}
.intake-status-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--stage-fg); }
.intake-status-chip:hover { color: var(--text-1); border-color: var(--text-4); }
.intake-status-chip[aria-pressed="true"] {
    font-weight: 700; background: var(--stage-bg); color: var(--stage-fg);
    border-color: color-mix(in srgb, var(--stage-fg) 30%, transparent);
}
.intake-status-chip.is-pending { border-style: dashed; border-color: var(--text-2); color: var(--text-1); }
.intake-status-chip:disabled { opacity: .6; cursor: progress; }
.intake-status__form { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.intake-status__form textarea, .intake-status__form input { font-size: 13px; min-width: 0; }
.intake-status__form textarea { resize: vertical; }
.intake-status__hold { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.intake-status__hold > .intake-label { grid-column: 1 / -1; }
.intake-status__form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.intake-status__saved { margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--success-soft); color: var(--intake-success-text); font-size: 12.5px; font-weight: 650; }
.intake-status__reason { display: grid; gap: 2px; }
.intake-status__reason p, .intake-status__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.intake-status__result { display: grid; gap: 6px; justify-items: start; }
.intake-status__result p { margin: 0; font-size: 13px; }
.intake-props__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 0; font-size: 13px; }
.intake-props__list dt { color: var(--text-3); }
.intake-props__list dd { margin: 0; min-width: 0; }
.intake-props__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--text-1); }
.intake-props__none { color: var(--text-3); }
.intake-prop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.intake-prop .intake-dot { width: 8px; height: 8px; }
.intake-prop__select {
    width: 100%; min-width: 0; margin-left: -5px; padding: 3px 4px; border: 1px solid transparent; border-radius: 4px;
    background: transparent; color: var(--text-1); font: inherit; font-size: 13px; cursor: pointer;
}
.intake-prop__select:hover:not(:disabled) { border-color: var(--border-strong); }
.intake-prop__select:disabled { cursor: default; opacity: 1; }
.intake-prop[data-value=""] .intake-prop__select { color: var(--text-3); }
.intake-prop__select option { color: var(--text-1); background: var(--surface-solid); }
.intake-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.intake-bars i { display: block; width: 3px; border-radius: 1px; background: var(--border-strong); }
.intake-bars i:nth-child(1) { height: 5px; }
.intake-bars i:nth-child(2) { height: 8px; }
.intake-bars i:nth-child(3) { height: 12px; }
.intake-bars[data-effort="small"] i:nth-child(1), .intake-bars[data-effort="medium"] i:nth-child(-n+2), .intake-bars[data-effort="large"] i { background: var(--text-1); }
.intake-side__stamp { margin: 0; font-size: 12px; color: var(--text-3); }
.intake-side__actions { display: flex; flex-direction: column; gap: 6px; }
.intake-side__actions > button { width: 100%; justify-content: center; }
.intake-side__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.intake-id-ref { display: inline-flex; min-width: 0; }
/* Ruhiger ID-Chip: Mono, klein, getönte Fläche statt Eingabefeld-Rahmen. */
.intake-id-chip {
    appearance: none; display: inline-flex; align-items: center; max-width: 100%; padding: 2px 7px; border: 0; border-radius: 6px;
    background: var(--surface-2); color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
    font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: copy; transition: background .14s ease, color .14s ease;
}
.intake-id-chip:hover { background: var(--surface-3); color: var(--text-1); }
.intake-id-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--text-1); }
.intake-id-chip.is-copied { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface-2)); }
.intake-id-chip.is-copy-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.intake-public-link { font-size: 12px; color: var(--text-3); }
.intake-public-link:hover { color: var(--text-1); }

/* Schmaler Platz: erst die Eigenschaften unter das Dossier, dann die Liste darüber. */
@container intake (max-width: 1099px) {
    .intake-dossier { grid-template-columns: minmax(0, 1fr); }
    .intake-side { position: static; max-height: none; overflow: visible; }
}
@container intake (max-width: 759px) {
    .intake-work { grid-template-columns: minmax(0, 1fr); }
    .intake-nav { position: static; max-height: 40vh; }
    .intake-doc { padding: 0 18px 28px; }
    .intake-tabs { margin: 0 -18px 18px; padding: 0 6px; }
    .intake-tab { padding: 12px 9px; }
    .intake-dossier__title { font-size: 22px; }
    .intake-pair { grid-template-columns: minmax(0, 1fr); }
    .intake-qcard__body, .intake-qcard__actions, .intake-qcard__answer { padding-left: 16px; }
    .intake-qopt { min-height: 44px; }
    .intake-qopts__other { padding-left: 12px; }
    .intake-qcard__head { grid-template-columns: 24px minmax(0, 1fr); }
    .intake-qcard__head > .intake-textlink { grid-column: 2; justify-self: start; }
    .intake-qcard__actions { flex-wrap: wrap; }
    .intake-search, .intake-search input { width: 100%; }
    .intake-appbar__tools { width: 100%; }
    .intake-appbar__tools > .intake-search { flex: 1 1 100%; }
    .intake-appbar__tools > [data-intake-create] { flex: 1 1 auto; justify-content: center; }
    .intake-empty, .intake-main > .intake-source-view, .intake-main > .intake-sources-view { padding: 20px 18px; }
    .intake-status-chip, .intake-nav__row, .intake-textlink, .intake-menu__item { min-height: 40px; }
}

/* ── Bausteine anderer Ansichten (Runde, Prüfen, Quellen, Diskussion) ── */
/* Ablaufgrafik der Intake-Runde (present.js) */
.intake-flow { display: block; width: 100%; min-width: 860px; height: auto; font-family: inherit; overflow: visible; }
.intake-flow__box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.25; }
.intake-flow__box--work { fill: var(--surface-2); }
.intake-flow__box--side { stroke-dasharray: 5 4; }
.intake-flow__label { font-size: 13px; font-weight: 650; fill: var(--text-2); }
.intake-flow__count { font-size: 30px; font-weight: 750; fill: var(--text-1); }
.intake-flow__sub { font-size: 12px; fill: var(--text-3); }
.intake-flow__sub--warn { fill: var(--intake-warning-text); font-weight: 650; }
.intake-flow__dot.dot-high { fill: var(--intake-dot-high); }
.intake-flow__dot.dot-medium { fill: var(--intake-dot-medium); }
.intake-flow__dot.dot-low { fill: var(--intake-dot-low); }
.intake-flow__dot.dot-none { fill: var(--surface); stroke: var(--text-3); stroke-width: 1.5; }
.intake-flow__more { font-size: 11px; font-weight: 650; fill: var(--text-3); }
.intake-flow__doc { fill: var(--surface-3); stroke: var(--text-3); stroke-width: 1.2; }
.intake-flow__bar { fill: var(--surface-3); }
.intake-flow__bar-fill { fill: var(--accent); }
.intake-flow__base { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.intake-flow__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; animation: intake-flow 1.4s linear infinite; }
.intake-flow__branch { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.intake-flow__head { fill: var(--accent); stroke: none; }
.intake-flow__head--muted { fill: var(--border-strong); }
.intake-flow__caption { font-size: 11px; font-weight: 650; fill: var(--intake-accent-text); text-anchor: middle; }
@keyframes intake-flow { to { stroke-dashoffset: -18; } }

.intake-source-card {
    display: grid; gap: 4px; padding: 9px 10px; min-width: 0; border: 1px dashed var(--border-strong);
    border-radius: 10px; background: var(--surface);
}
.intake-source-card__type { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; color: var(--text-3); }
.intake-source-card__title {
    padding: 0; border: 0; background: none; color: var(--text-1); font: inherit; font-size: 13px; font-weight: 650;
    line-height: 1.35; text-align: left; cursor: pointer; overflow-wrap: break-word; hyphens: auto;
}
.intake-source-card__title:hover { color: var(--intake-accent-text); text-decoration: underline; }
.intake-source-view, .intake-sources-view { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.intake-source-view__head { display: grid; gap: 8px; }
.intake-source-view__nav, .intake-dossier__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.intake-back { font-weight: 650; min-height: 40px; }
.intake-dossier__pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intake-dossier__spacer { flex: 1; }
.intake-prose--lead { color: var(--text-1); font-size: 16px; }

/* Der Weg eines Intakes als eine Zeile oben im Verlauf. */
.intake-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; font-size: 12.5px; min-width: 0; }
.intake-track__step { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); white-space: nowrap; }
.intake-track__step + .intake-track__step::before { content: ""; width: 16px; height: 1.5px; margin: 0 4px 0 2px; border-radius: 1px; background: var(--border-strong); }
.intake-track__step.is-done + .intake-track__step::before { background: var(--text-3); }
.intake-track__dot {
    width: 14px; height: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface);
}
.intake-track__dot svg { display: block; fill: none; stroke: var(--surface); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.intake-track__step.is-done .intake-track__dot { background: var(--text-3); border-color: var(--text-3); }
.intake-track__step.is-current .intake-track__dot { background: var(--accent); border-color: var(--accent); }
.intake-track__step.is-paused .intake-track__dot { background: var(--warning); border-color: var(--warning); }
.intake-track__step.is-stopped .intake-track__dot { background: var(--text-3); border-color: var(--text-3); }
.intake-track__step.is-next .intake-track__dot { border-color: var(--accent); border-style: dashed; }
.intake-track__label { font-weight: 600; }
.intake-track__step.is-done .intake-track__label { color: var(--text-2); }
.intake-track__step:is(.is-current, .is-paused, .is-stopped) .intake-track__label { color: var(--text-1); font-weight: 700; }
.intake-track__date { font-size: 12px; color: var(--text-3); }
.intake-track__step.is-current .intake-track__date { color: var(--intake-accent-text); font-weight: 650; }
.intake-track__step.is-paused .intake-track__date { color: var(--intake-warning-text); font-weight: 650; }
.intake-journey { display: block; width: 100%; min-width: 600px; max-width: 980px; height: auto; font-family: inherit; }
.intake-journey__line { stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }
.intake-journey__line.is-done { stroke: var(--text-2); }
.intake-journey__dot { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.intake-journey__step.is-done .intake-journey__dot { fill: var(--text-2); stroke: var(--text-2); }
.intake-journey__step.is-current .intake-journey__dot { fill: var(--accent); stroke: var(--accent); }
.intake-journey__step.is-paused .intake-journey__dot { fill: var(--warning); stroke: var(--warning); }
.intake-journey__step.is-stopped .intake-journey__dot { fill: var(--text-3); stroke: var(--text-3); }
.intake-journey__step.is-next .intake-journey__dot { fill: var(--surface); stroke: var(--accent); stroke-dasharray: 3 3; }
.intake-journey__halo { display: none; fill: var(--accent-soft-2); }
.intake-journey__step.is-current .intake-journey__halo { display: inline; animation: intake-pulse 2.4s ease-in-out infinite; }
.intake-journey__glyph { fill: none; stroke: var(--surface); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.intake-journey__label { font-size: 14px; font-weight: 650; fill: var(--text-3); text-anchor: middle; }
.intake-journey__step.is-done .intake-journey__label, .intake-journey__step.is-current .intake-journey__label,
.intake-journey__step.is-paused .intake-journey__label, .intake-journey__step.is-stopped .intake-journey__label { fill: var(--text-1); }
.intake-journey__step.is-next .intake-journey__label { fill: var(--intake-accent-text); }
.intake-journey__date { font-size: 12px; fill: var(--text-3); text-anchor: middle; }
@keyframes intake-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.intake-evidence-card { margin: 0; display: grid; gap: 10px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.intake-evidence-card__quote {
    margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere;
    max-height: 300px; overflow: auto; quotes: "„" "“";
}
.intake-evidence-card__quote::before { content: open-quote; color: var(--accent); font-weight: 700; }
.intake-evidence-card__quote::after { content: close-quote; color: var(--accent); font-weight: 700; }
.intake-evidence-card__caption { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }

.intake-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.intake-comment { display: flex; gap: 10px; min-width: 0; }
.intake-comment--reply { margin-left: 24px; }
.intake-comment:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.intake-comment__main { display: grid; gap: 3px; min-width: 0; }
.intake-comment__meta { margin: 0; font-size: 12.5px; color: var(--text-3); }
.intake-comment__meta strong { color: var(--text-1); font-weight: 650; }
.intake-comment-body { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.intake-comment__reply { justify-self: start; font-size: 12.5px; min-height: 28px; }
.intake-comment-form { display: grid; gap: 8px; }
.intake-comment-form__reply { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-3); }
.intake-comment-form__reply[hidden] { display: none; }
.intake-comment-form__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.intake-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.intake-timeline__entry { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; }
.intake-timeline__dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--text-3); }
.intake-timeline__entry[data-history-kind="zur_planung"] .intake-timeline__dot { background: var(--accent); }
.intake-timeline__entry[data-history-kind="in_klaerung"] .intake-timeline__dot { background: var(--info); }
.intake-timeline__entry[data-history-kind="on_hold"] .intake-timeline__dot { background: var(--warning); }
.intake-timeline__entry[data-history-kind="result"] .intake-timeline__dot { background: var(--success); }
.intake-timeline__entry[data-history-kind="created"] .intake-timeline__dot { background: var(--surface-3); border: 1.5px solid var(--text-3); }
.intake-timeline__body { display: grid; gap: 2px; min-width: 0; }
.intake-timeline__title { font-size: 13.5px; font-weight: 650; }
.intake-timeline__reason, .intake-timeline__detail { font-size: 13px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

.intake-source-original {
    margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; font: inherit;
    font-size: 15px; line-height: 1.6; padding: 16px; background: var(--surface-2); border-radius: var(--r-md);
}
.intake-sources-view__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; }

/* Zusammenführungs-Verlauf (Dialog aus ai.js) */
.intake-merge-history { min-width: 0; overflow-wrap: anywhere; }
.intake-merge-history label { display: block; margin: 16px 0; }
.intake-merge-events { padding-left: 20px; }
.intake-merge-events li { margin: 12px 0; }
.intake-merge-events span { display: block; color: var(--text-2); font-size: 12px; }
.intake-merge-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; font-family: inherit; }
.intake-merge-proof { border-top: 1px solid var(--border); padding-top: 10px; }

/* ── Ergebnisse prüfen (review.js) ───────────────────────────────────── */
/* Ein Intake nach dem anderen: Problem, was umgesetzt wurde, eine Entscheidung. */
.intake-review-start { color: var(--intake-success-text); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.intake-review-start:hover { background: var(--success-soft); }
.intake-review { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 880px; }
.intake-review__head { display: grid; gap: 8px; }
.intake-review__titles { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.intake-review__titles h3 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -0.01em; }
.intake-review__bar { height: 5px; }
.intake-review__card {
    display: grid; gap: 16px; padding: 20px 22px; min-width: 0;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs);
}
.intake-review__meta { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.intake-review__status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.intake-review__status.is-finished { color: var(--intake-success-text); }
.intake-review__progress { width: 120px; }
.intake-review__title { margin: 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.25; font-weight: 750; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.intake-review__title:focus { outline: none; }
.intake-review__section { display: grid; gap: 8px; min-width: 0; }
.intake-review__label { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.intake-review__hint { margin: 0; font-size: 13px; color: var(--intake-warning-text); }
.intake-review__form { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.intake-review__form textarea { font-size: 14.5px; line-height: 1.5; resize: vertical; }
.intake-review__done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--success-soft); color: var(--intake-success-text); font-weight: 650; }
.intake-review__done .btn-primary { margin-left: auto; }
.intake-review__outcome {
    justify-self: start; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; margin: 0; border-radius: 999px;
    font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text-3); white-space: nowrap;
}
.intake-review__outcome[data-outcome="confirmed"] { background: var(--success-soft); color: var(--intake-success-text); }
.intake-review__outcome[data-outcome="later"] { background: var(--warning-soft); color: var(--intake-warning-text); }
.intake-review__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.intake-review__list-item {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; text-align: left;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-1); font: inherit; font-weight: 600; cursor: pointer;
}
.intake-review__list-item:hover { border-color: var(--border-strong); }

/* Umgesetzte Tasks: Review, Runde und Dossier teilen die Liste. */
.intake-tasks { list-style: none; margin: 0; padding: 0; display: grid; }
.intake-tasks__item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--border); }
.intake-tasks__item:first-child { border-top: 0; }
.intake-tasks__icon {
    width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border-strong); color: var(--surface);
}
.intake-tasks__item[data-task-status="erledigt"] .intake-tasks__icon { background: var(--success); border-color: var(--success); }
.intake-tasks__item[data-task-status="in_arbeit"] .intake-tasks__icon { border-color: var(--accent); color: var(--intake-accent-text); }
.intake-tasks__text { display: grid; gap: 1px; min-width: 0; }
.intake-tasks__text a { color: var(--text-1); font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; text-decoration: none; }
.intake-tasks__text a:hover { color: var(--intake-accent-text); text-decoration: underline; }
.intake-tasks__status { font-size: 12px; color: var(--text-3); white-space: nowrap; margin-top: 2px; }

/* ── Intake-Runde (Präsentation) ─────────────────────────────────────── */
html.intake-round-open, html.intake-round-open body { overflow: hidden; }
.intake-round { position: fixed; inset: 0; z-index: 1200; background: var(--bg); color: var(--text-1); }
.intake-round__frame { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.intake-round__bar, .intake-round__nav {
    display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap;
    padding: 12px clamp(16px, 3vw, 40px); background: var(--surface); border-color: var(--border); border-style: solid; border-width: 0;
}
.intake-round__bar { border-bottom-width: 1px; }
.intake-round__nav { border-top-width: 1px; }
.intake-round__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.intake-round__badge { width: 36px; height: 36px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--intake-accent-text); }
.intake-round__brand-text { display: grid; gap: 1px; min-width: 0; }
.intake-round__brand-text strong { font-size: 14px; }
.intake-round__progress { flex: 1 1 220px; max-width: 460px; display: grid; gap: 6px; text-align: center; }
.intake-round__stage { overflow: auto; padding: 28px clamp(16px, 4vw, 56px) 24px; }
.intake-round__slide { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; animation: intake-enter .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes intake-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.intake-round__title { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; font-weight: 750; letter-spacing: -0.02em; max-width: 30em; }
.intake-round__title:focus { outline: none; }
.intake-round__lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.intake-round__meta { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.intake-round__flow { padding: 22px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow-x: auto; }
.intake-round__agenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.intake-round__agenda-item {
    display: grid; gap: 6px; padding: 18px 20px; text-align: left; border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface); color: var(--text-1); font: inherit; cursor: pointer;
}
.intake-round__agenda-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.intake-round__agenda-title { font-size: 18px; font-weight: 700; }
/* Je Folie: das Problem groß, Details erst auf Klick. */
.intake-round__problem .intake-round__text { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; max-width: 62ch; -webkit-line-clamp: 8; }
.intake-round__hold { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; color: var(--text-2); }
.intake-round__details-toggle, .intake-round__work-toggle { justify-self: start; align-self: flex-start; font-size: 14px; min-height: 32px; }
.intake-round__details { display: grid; gap: 14px; animation: intake-row-open .26s cubic-bezier(.22, 1, .36, 1); }
.intake-round__group { display: grid; gap: 10px; }
.intake-round__group-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.intake-round__group-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.intake-round__delivery-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intake-round__delivery-progress .intake-bar { width: min(260px, 100%); }
.intake-round__work { padding: 4px 0 0; max-width: 720px; }
.intake-round__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.intake-round__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 14px; }
.intake-round__card { display: grid; align-content: start; gap: 10px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); min-width: 0; }
.intake-round__card h3 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.intake-round__text { margin: 0; font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.intake-round__text--muted { color: var(--text-3); }
.intake-round__questions { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.intake-round__quote { margin: 0; font-size: 19px; line-height: 1.5; overflow-wrap: anywhere; max-height: 9.5em; overflow: auto; }
.intake-round__warn { margin: 0; font-size: 14px; font-weight: 650; color: var(--intake-warning-text); }
.intake-round__decide { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 16px; background: var(--surface); }
.intake-round__decide-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.intake-round__decide-head h3 { margin: 0; font-size: 15px; }
.intake-round__choices { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.intake-round__choice {
    min-height: 48px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text-1); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
}
.intake-round__choice:hover { background: var(--surface-2); }
.intake-round__choice[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--intake-accent-text); }
.intake-round__note { flex: 1 1 280px; min-width: 0; min-height: 48px; font-size: 15px; }
.intake-round__delivery { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.intake-round__delivery-row {
    display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; padding: 12px 18px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.intake-round__delivery-main { flex: 999 1 380px; display: grid; gap: 6px; min-width: 0; }
.intake-round__delivery-title { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.intake-round__delivery-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intake-round__summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.intake-round__summary-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap;
    padding: 14px 16px 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.intake-round__summary-row[data-result="failed"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.intake-round__summary-main { flex: 999 1 360px; display: grid; gap: 4px; min-width: 0; }
.intake-round__summary-title { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.intake-round__summary-detail { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.intake-round__summary-detail.is-missing { color: var(--intake-warning-text); font-weight: 650; }
.intake-round__summary-row[data-result="failed"] .intake-round__summary-detail { color: var(--danger); }
.intake-round__summary-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intake-round__summary-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--text-3); }
.intake-round__summary-pill[data-tone="marked"] { background: var(--accent-soft); color: var(--intake-accent-text); }
.intake-round__summary-pill[data-tone="note"] { background: var(--surface-3); color: var(--text-2); }
.intake-round__apply { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); font-size: 15px; color: var(--text-2); }
.intake-round__dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.intake-round__dot { width: 34px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.intake-round__dot:hover { background: var(--surface-2); }
.intake-round__dot > span { display: block; width: 10px; height: 10px; border-radius: 999px; background: var(--border-strong); transition: width .2s ease, background .2s ease; }
.intake-round__dot.is-marked > span { background: var(--accent); }
.intake-round__dot.is-current > span { width: 26px; background: var(--text-1); }
.intake-round__nav .btn-primary, .intake-round__nav .btn-secondary { display: inline-flex; align-items: center; gap: 8px; }
.intake-round:fullscreen { overflow: auto; }

/* ── Kleine Breiten ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .intake-track__step:not(.is-current):not(.is-paused):not(.is-stopped) :is(.intake-track__label, .intake-track__date) {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .intake-track__step + .intake-track__step::before { width: 10px; }
    .intake-comment--reply { margin-left: 12px; }
    .intake-review__card { padding: 16px; }
    .intake-review__form .intake-actions > button { flex: 1 1 auto; min-height: 44px; }
    .intake-round__stage { padding: 18px 16px; }
    .intake-round__progress { order: 3; flex-basis: 100%; max-width: none; }
    .intake-round__lead { font-size: 16px; }
    .intake-round__text { font-size: 16px; }
    .intake-round__nav .btn-primary, .intake-round__nav .btn-secondary { flex: 1 1 40%; justify-content: center; }
    .intake-round__dots { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .intake-flow__line, .intake-journey__step.is-current .intake-journey__halo, .intake-round__slide, .intake-round__details { animation: none; }
    .intake-bar__fill, .intake-nav__chevron, .intake-section__summary::before, .intake-qopt { transition: none; }
}
.intake-host button > svg, .intake-host .intake-search > svg, .intake-round button > svg, .project-tab svg { flex-shrink: 0; }

/* == css/intake-delivery.css == */
.intake-delivery { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; min-width: 0; }
.intake-delivery > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.intake-delivery h4, .intake-delivery h5 { margin: 0; }
.intake-delivery-targets, .intake-delivery-pending ul { list-style: none; padding: 0; }
.intake-delivery-targets li { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 8px; overflow-wrap: anywhere; }
.intake-delivery-targets li > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.intake-delivery-targets code { font-size: .75rem; color: var(--text-muted); }
.intake-delivery-targets p { margin: 6px 0 0; font-size: .85rem; }
.intake-delivery-kind { font-size: .75rem; color: var(--text-muted); }
.intake-delivery-pending { margin-top: 16px; background: var(--surface); border-radius: 8px; padding: 12px; }
.intake-delivery-pending > p { color: var(--text-muted); font-size: .85rem; }
.intake-delivery-pending li { margin-top: 8px; overflow-wrap: anywhere; }
.intake-delivery-pending li > span { font-size: .75rem; color: var(--text-muted); }
.intake-delivery-choices { max-height: 48vh; overflow: auto; }
.intake-delivery-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.intake-delivery-choice > input { flex: 0 0 auto; margin-top: 4px; }
.intake-delivery-choice > span { min-width: 0; overflow-wrap: anywhere; }
.intake-delivery-choice strong, .intake-delivery-choice small { display: block; }
.intake-delivery-choice small { color: var(--text-muted); }
.intake-origins { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; min-width: 0; max-width: 100%; margin: 8px 0; font-size: .85rem; }
.intake-origins a { min-width: 0; overflow-wrap: anywhere; }
.intake-origins__label { color: var(--text-muted); }
.intake-origins--compact { font-size: .75rem; }
@media (max-width: 480px) { .intake-delivery .intake-actions { align-items: stretch; } .intake-delivery .intake-actions > button { flex: 1 1 45%; white-space: normal; } }

/* == css/visual-attachments.css == */
.visual-attachments { min-width: 0; margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--border); }
.visual-header, .visual-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.visual-header { justify-content: space-between; margin-bottom: 16px; }
.visual-header h4 { margin: 0; }
.visual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; min-width: 0; }
.visual-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.visual-thumbnail { width: 100%; display: block; padding: 0; border: 0; cursor: zoom-in; background: var(--surface); }
.visual-thumbnail img { display: block; width: 100%; height: 160px; object-fit: contain; }
.visual-card__body { padding: 14px; }
.visual-caption { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.visual-version, .visual-empty { color: var(--text-3); }
.visual-version { font-size: 12px; margin: 0 0 12px; }
.visual-actions { margin-top: 8px; }
.visual-error, .visual-image-error { color: var(--danger); overflow-wrap: anywhere; }
.visual-error:empty { display: none; }
.visual-enlarged { margin: 0; min-width: 0; }
.visual-enlarged img { display: block; width: 100%; max-height: 65vh; object-fit: contain; }
.visual-enlarged figcaption { margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.visual-enlarged figcaption span { color: var(--text-3); }
.diagram-preview { display: block; position: relative; min-height: 160px; overflow: auto; padding: 12px; }
.diagram-preview svg { display: block; width: 100%; height: auto; max-height: 220px; }
.diagram-enlarged svg { max-height: 65vh; min-height: 180px; }
.diagram-scratch { position: absolute; visibility: hidden; width: 100%; left: 0; top: 0; }
.diagram-error { color: var(--danger); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; text-align: left; }
[data-visual-media-fields][hidden], [data-visual-diagram-fields][hidden] { display: none; }
.visual-attachments button:focus-visible, .visual-thumbnail:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.story-visuals { margin: 12px 0; min-width: 0; }
.story-visuals > summary { cursor: pointer; color: var(--text-2); padding: 8px 0; }
.story-visuals > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-visuals .visual-attachments { margin: 0 0 16px; padding-top: 12px; }
@media (max-width: 480px) { .visual-grid { grid-template-columns: minmax(0, 1fr); } .visual-header .visual-actions { width: 100%; } }

/* == css/readiness-policy.css == */
.readiness-policy-editor { display:grid; gap:14px; }
.readiness-policy-editor__head h3 { margin:0; font-size:15px; }
.readiness-policy-editor__head p { margin:4px 0 0; color:var(--text-3); font-size:13px; }
.readiness-policy-editor__modes { display:grid; gap:10px; }
.readiness-policy-mode { border:1px solid var(--border); border-radius:var(--r-sm); padding:10px; background:var(--surface-2); }
.readiness-policy-mode > header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.readiness-policy-mode h4 { margin:0; font-size:13px; }
.readiness-policy-mode__empty { margin:8px 0 0; color:var(--text-3); font-size:12px; }
.readiness-policy-mode__criteria { display:grid; gap:7px; margin-top:8px; }
.readiness-policy-criterion { display:grid; grid-template-columns:minmax(0,1fr) 150px 150px auto; gap:6px; align-items:center; }
.readiness-policy-criterion input,.readiness-policy-criterion select { min-width:0; padding:7px 8px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-1); color:var(--text-1); }
@media (max-width:700px) { .readiness-policy-criterion { grid-template-columns:1fr 1fr auto; } .readiness-policy-criterion input { grid-column:1 / -1; } }

.done-policy-criterion { grid-template-columns:minmax(0,1fr) auto; }
@media (max-width:700px) { .done-policy-criterion { grid-template-columns:minmax(0,1fr) auto; } .done-policy-criterion input { grid-column:auto; } }

/* == css/readiness-declaration.css == */
.readiness-declaration { display:grid; gap:8px; }
.readiness-declaration header h3 { margin:0; font-size:15px; }
.readiness-declaration header p,.readiness-declaration__criterion span { margin:2px 0 0; color:var(--text-3); font-size:12px; }
.readiness-declaration__state,.readiness-declaration__notice,.readiness-declaration__empty { margin:0; font-size:13px; }
.readiness-declaration__state--ready { color:var(--success,#287a3d); }
.readiness-declaration__state--missing,.readiness-declaration__state--stale { color:var(--warning,#9a5b00); }
.readiness-declaration__criteria { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.readiness-declaration__criterion { display:grid; gap:2px; padding:8px; border:1px solid var(--border); border-radius:var(--r-sm); }
.readiness-declaration__criterion.ready { border-color:var(--success,#287a3d); }
.readiness-declaration__criterion.missing,.readiness-declaration__criterion.stale { border-color:var(--warning,#9a5b00); }
.readiness-declaration__criterion label { cursor:pointer; }

/* == css/freshness.css == */
.freshness-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.freshness-badge--current { color: var(--text-3); }
.freshness-badge--deferred { color: var(--accent); }
.freshness-badge--outdated { color: var(--danger, #dc2626); }

/* == css/project-search.css == */
/* Projektsuche (#project/<id>) — Suchleiste, Trefferansicht, Hervorhebung.
   Standardmaessig blendet die Suche nichts aus: Treffer werden hervorgehoben
   und ueber die Trefferleiste angesteuert. Erst der Umschalter "Nur Treffer"
   (.proj-search-filtering) blendet Nichttreffer aus.

   Das Aufklappen eines Trefferpfads passiert in search.js ueber Inline-Styles,
   nicht hier per !important: nur so bleibt ein Header-Klick waehrend der Suche
   wirksam und der persistierte Collapse-Zustand (storage.js, epic-groups.js)
   erhalten. */

/* Der Host bleibt beim Scrollen im jeweiligen Scroll-Container verfügbar.
   Dadurch bleiben Eingabe, Trefferzähler und Navigation zusammen sichtbar. */
#project-search-host {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 6px 0;
    margin-bottom: 8px;
    background: var(--bg);
}

.proj-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.proj-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.proj-search-icon {
    flex-shrink: 0;
    color: var(--text-4);
    font-size: 17px;
    line-height: 1;
}

.proj-search-input {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    border: 0;
    background: transparent;
    color: var(--text-1);
    font-size: 14px;
}

.proj-search-input:focus {
    outline: none;
}

.proj-search-input::placeholder {
    color: var(--text-4);
}

.proj-search-input::-webkit-search-cancel-button {
    display: none;
}

.proj-search-result {
    flex-shrink: 0;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.proj-search-result.is-empty {
    color: var(--warning);
}

/* ── Treffernavigation ──────────────────────────────────────────── */

.proj-search-nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.proj-search-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.proj-search-nav-btn:hover {
    background: var(--surface);
    color: var(--text-1);
}

.proj-search-nav-pos {
    min-width: 34px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

.proj-search-toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.proj-search-toggle:hover {
    color: var(--text-1);
}

/* Ein aktiver Umschalter aendert, was die Suche ueberhaupt betrachtet — das
   muss an der Leiste ablesbar sein, sonst wirkt das Ergebnis unerklaerlich. */
.proj-search-toggle:has(input:checked) {
    color: var(--accent);
}

.proj-search-toggle input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.proj-search-clear {
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    cursor: pointer;
}

.proj-search-clear:hover {
    border-color: var(--border-strong);
    color: var(--text-1);
}

/* Die Leiste schaltet Elemente per [hidden] frei — ohne diese Regel wuerde
   das display der Flex-Container das UA-Stylesheet ueberstimmen. */
.proj-search-nav[hidden],
.proj-search-toggle[hidden],
.proj-search-clear[hidden] {
    display: none;
}

/* ── Trefferansicht ─────────────────────────────────────────────── */

.search-miss {
    display: none !important;
}

mark.proj-search-hit {
    padding: 0 1px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    color: inherit;
    font-weight: 700;
}

/* Treffer bleiben im Kontext stehen und werden nur ausgezeichnet. */
.proj-search-active .proj-search-row.step-item {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

.proj-search-active .proj-search-row.section-block > .section-header,
.proj-search-active .proj-search-row.epic-block > .epic-header {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Der aktuell angesteuerte Treffer ist die einzige Stelle, die den Blick
   fuehren darf — deshalb deutlich staerker als die uebrigen Treffer. */
.proj-search-current {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 1px;
    border-radius: 8px;
}

.proj-search-current mark.proj-search-hit {
    background: color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (max-width: 680px) {
    .proj-search {
        flex-wrap: wrap;
    }

    .proj-search-input {
        flex: 1 1 100%;
        order: -1;
    }
}

/* == css/members.css == */
.members-panel { margin-top:16px; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.members-panel-head,.member-row,.member-actions,.members-date-fields { display:flex; align-items:center; gap:12px; }
.members-panel-head { justify-content:space-between; margin-bottom:12px; }
.members-panel-head h3 { margin:0; }
.members-panel-head p,.member-period,.plc-shared-by { margin:3px 0 0; color:var(--text-muted); font-size:.82rem; }
.members-list { display:grid; gap:8px; }
.member-row { padding:10px 0; border-top:1px solid var(--border); }
.member-row>:first-child { flex:1; }
.member-role,.plc-role-badge { padding:3px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-size:.75rem; font-weight:700; }
.member-role--reviewer { color:var(--accent); } .member-role--viewer { color:var(--text-muted); } .members-error { color:var(--danger); }
.project-readonly .proj-action-group--create,.project-readonly #btn-proj-status-toggle,.project-readonly #btn-edit-proj,.project-readonly .step-add-row,.project-readonly .section-actions,.project-readonly .epic-actions { display:none!important; }
@media(max-width:640px){.member-row{align-items:flex-start;flex-wrap:wrap}.member-actions{width:100%}}
/* == css/epics.css == */
/* ── Epic-Ebene (zwischen Projekt und Story) ─────────────────── */

.container-owner-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--text-2);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.epic-title-block,
.section-title-block {
    flex-wrap: wrap;
}

.epic-title-block .container-owner-chip,
.section-title-block .container-owner-chip {
    flex: 0 1 auto;
}

.epic-block {
    --epic-accent: var(--accent);
    --edge-tint: var(--epic-accent);
    margin-bottom: 18px;
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    background: var(--surface-2);
    box-shadow: var(--edge-light) var(--edge-tint);
    overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.epic-block:hover {
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border-hover), var(--border));
    box-shadow: var(--edge-light-hover) var(--edge-tint), var(--shadow-xs);
}

.epic-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
}

.epic-toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.14s, color 0.14s;
}

.epic-toggle:hover {
    background: var(--surface);
    color: var(--text-1);
}

.epic-title-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.epic-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--epic-accent);
    background: color-mix(in srgb, var(--epic-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--epic-accent) 30%, transparent);
}

.epic-id-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 999px;
    padding: 2px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px var(--surface-2);
    white-space: nowrap;
    cursor: pointer;
}

.epic-id-chip:hover {
    border-color: var(--epic-accent);
    color: var(--epic-accent);
}

.epic-id-chip.is-copied {
    color: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
}

.epic-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epic-story-count {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--text-4);
}

.epic-status-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.epic-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.epic-prog-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.epic-prog-bar {
    width: 110px;
    height: 6px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.epic-prog-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.epic-est {
    font-size: 12px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.epic-description {
    appearance: none;
    display: block;
    width: 100%;
    border: 0;
    padding: 10px 18px;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3);
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.epic-description[hidden] {
    display: none;
}

.epic-description > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.epic-description:hover {
    color: var(--text-2);
    background: color-mix(in srgb, var(--epic-accent) 5%, var(--surface));
}

.epic-description:focus-visible {
    outline: 2px solid var(--epic-accent);
    outline-offset: -3px;
}

.epic-description-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(8, 10, 20, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.42s ease;
}

.epic-description-backdrop.is-visible {
    opacity: 1;
}

.epic-description-detail {
    z-index: 71;
    overflow: auto;
    padding: 24px 28px;
    border: 1px solid var(--epic-accent);
    border-radius: 18px;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.65;
    background:
        radial-gradient(520px 260px at 0% 0%, color-mix(in srgb, var(--epic-accent) 12%, transparent), transparent 72%),
        var(--surface);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--epic-accent),
        0 0 0 8px color-mix(in srgb, var(--epic-accent) 12%, transparent);
    cursor: zoom-out;
    will-change: left, top, width, height;
}

.epic-description-detail > span {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.epic-sections-body {
    padding: 14px 16px 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 48px;
}

.epic-sections-body.drop-target,
.ungrouped-sections-body.drop-target {
    outline: 2px dashed color-mix(in srgb, var(--epic-accent, var(--accent)) 50%, transparent);
    outline-offset: -4px;
    border-radius: var(--r-md, 10px);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.epic-drop-hint {
    display: none;
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-4);
    border: 1.5px dashed var(--border);
    border-radius: 10px;
}

/* Leere Epic / leere "Ohne Epic"-Gruppe: Drop-Hinweis sichtbar machen */
.epic-sections-body:not(:has(.section-block)) .epic-drop-hint,
.ungrouped-sections-body:not(:has(.section-block)) .epic-drop-hint {
    display: block;
}

/* ── "Ohne Epic"-Region ───────────────────────────────────────── */

.ungrouped-sections {
    margin-bottom: 14px;
}

.ungrouped-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-4);
    margin: 6px 2px 10px;
}

.ungrouped-sections-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 8px;
}

/* Stories innerhalb einer Epic etwas kompakter einrücken */
.epic-sections-body .section-block {
    margin-bottom: 0;
}

/* Verschachtelte Rahmen kosten auf dem Telefon die meiste Breite. */
@media (max-width: 768px) {
    .epic-header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
        gap: 8px;
        padding: 10px 12px;
    }

    .epic-toggle,
    .epic-header .btn-icon {
        width: 44px;
        height: 44px;
    }

    .epic-title-block {
        gap: 6px 8px;
    }

    .epic-name {
        order: -1;
        flex-basis: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.4;
    }

    .epic-title-block .container-owner-chip,
    .section-title-block .container-owner-chip {
        flex-basis: 100%;
    }

    .epic-id-chip,
    .epic-header .btn-xs {
        min-height: 44px;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .epic-meta {
        grid-column: 2;
        flex-wrap: wrap;
        min-width: 0;
        gap: 8px;
    }

    .epic-prog-bar {
        flex: 1 1 calc(100% - 40px);
        min-width: 40px;
    }

    .epic-description {
        padding: 10px 12px;
        overflow-wrap: anywhere;
    }

    .epic-sections-body {
        padding: 6px 4px 4px;
        gap: 8px;
    }
}

/* == css/history.css == */
/* Projekt-Historie: Zeitleiste erledigter Tasks und Stories. */

/* ---------- Historie: Grundlayout ---------- */

.history-view {
    animation: history-fade 0.35s ease both;
}

@keyframes history-fade {
    from { opacity: 0; }
}

/* ---------- Hero-Panel mit Statistiken ---------- */

.history-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(600px 220px at 0% 0%, var(--accent-soft), transparent 70%),
        var(--surface);
    margin-bottom: 26px;
    position: relative;
    overflow: hidden;
}

.history-hero-stats {
    display: flex;
    gap: 12px;
}

.history-stat {
    min-width: 108px;
    padding: 12px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.history-stat-label {
    font-size: 11px;
    color: var(--text-4);
    letter-spacing: 0.02em;
}

/* ---------- Timeline ---------- */

.history-timeline {
    position: relative;
    padding: 6px 0 30px;
}

.history-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--history-accent, var(--accent)) 0%,
        var(--border) 28%,
        var(--border) 85%,
        transparent 100%
    );
    opacity: 0.7;
}

.history-day {
    position: relative;
    margin-bottom: 30px;
}

.history-day:last-child {
    margin-bottom: 0;
}

.history-day-header {
    position: sticky;
    top: 6px;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.history-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-1);
    font-weight: 700;
    font-size: 12.5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.history-day-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--history-accent, var(--accent));
}

.history-day-meta {
    font-size: 12px;
    color: var(--text-4);
}

/* ---------- Einträge ---------- */

.history-entries {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 40px;
    margin-top: 14px;
}

.history-entry {
    position: relative;
    /* fill "backwards" (nicht "both"): Ein Forwards-Fill hielte nach der
       Animation die interpolierte End-Matrix als transform — ein dauerhafter
       Containing-Block, der die fixed-positionierte Fokus-Karte an den Eintrag
       statt ans Viewport binden würde. Backwards deckt weiterhin die
       animation-delay-Phase ab. */
    animation: history-entry-in 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

@keyframes history-entry-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.history-node {
    position: absolute;
    left: -30px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--entry-accent, var(--accent));
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    box-sizing: content-box;
    z-index: 1;
}

.history-card {
    --edge-tint: var(--entry-accent, var(--accent));
    position: relative;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light-sm) var(--edge-tint);
    border-radius: 14px;
    padding: 13px 16px 12px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
        padding 0.34s cubic-bezier(0.2, 0.8, 0.25, 1), border-radius 0.34s ease,
        background 0.34s ease;
}

.history-entry {
    cursor: pointer;
    outline: none;
    /* Sanftes Zurücksinken beim Fokuswechsel */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
        filter 0.3s ease;
}

.history-entry:hover .history-card {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border-hover), var(--border));
    box-shadow: var(--edge-light-sm) var(--edge-tint), 0 10px 26px rgba(0, 0, 0, 0.12);
}

.history-entry:focus-visible .history-card {
    border-color: var(--history-accent, var(--accent));
    box-shadow: var(--edge-light-sm) var(--edge-tint), 0 0 0 3px var(--accent-soft);
}

/* ---------- Fokus-Effekt: angeklickter Eintrag löst sich heraus ---------- */

/* Abdunkelnder Backdrop hinter dem herausgelösten Panel */
.history-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(8, 10, 20, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.42s ease;
}

.history-backdrop.is-visible {
    opacity: 1;
}

/* Die herausgelöste Karte liegt frei über dem Backdrop; ihre Position/Größe
   wird per JS (left/top/width/height) animiert — daher hier KEIN transform. */
.history-card.is-lifted {
    z-index: 50;
    transform: none !important;
    overflow: auto;
    background:
        radial-gradient(520px 260px at 0% 0%, var(--accent-soft), transparent 72%),
        var(--surface);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--history-accent, var(--accent)),
        0 0 0 8px var(--accent-soft);
    will-change: left, top, width, height;
}

/* Übrige Einträge treten deutlich zurück, sobald einer hervorgehoben ist */
.history-timeline.has-focus .history-entry:not(.is-focused) {
    opacity: 0.32;
    transform: scale(0.965);
    filter: saturate(0.55) blur(0.5px);
}

.history-timeline.has-focus .history-entry:not(.is-focused):hover {
    opacity: 0.6;
    filter: saturate(0.8);
}

.history-entry.is-focused {
    /* Muss ÜBER dem Backdrop (z-index 40) liegen: der Eintrag bildet durch
       position + z-index einen eigenen Stacking-Context, aus dem die
       herausgelöste Karte (z-index 50) nicht ausbrechen kann. Mit einem Wert
       unter 40 läge die Lese-Karte hinter dem Backdrop — abgedunkelt und
       nicht klickbar. 45 bleibt unter Topbar (60) und Modals (100). */
    z-index: 45;
}

/* Angeklickte Karte morpht in ein größeres, gut lesbares Panel:
   sie wächst per Scale UND per echtem Layout (Padding, Radius, Typo). */
.history-entry.is-focused .history-card {
    transform: translateY(-8px) scale(1.06);
    transform-origin: left center;
    padding: 20px 24px 18px;
    border-radius: 18px;
    border-color: var(--history-accent, var(--accent));
    background:
        radial-gradient(420px 200px at 0% 0%, var(--accent-soft), transparent 72%),
        var(--surface);
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.30),
        0 0 0 1px var(--history-accent, var(--accent)),
        0 0 0 7px var(--accent-soft);
    transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.25, 1),
        box-shadow 0.36s ease, border-color 0.36s ease,
        padding 0.36s cubic-bezier(0.2, 0.9, 0.25, 1),
        border-radius 0.36s ease, background 0.36s ease;
    will-change: transform;
}

/* Der farbige Kantenstreifen wird beim Fokus kräftiger */
.history-entry.is-focused .history-card::before {
    width: 5px;
    opacity: 1;
}

/* Der Knoten am Zeitstrahl wächst mit und pulst kurz auf */
.history-entry.is-focused .history-node {
    transform: scale(1.5);
    box-shadow: 0 0 0 1px var(--border), 0 0 0 8px var(--accent-soft);
    transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.36s ease;
}

.history-entry--story.is-focused .history-node--story {
    transform: scale(1.2);
}

/* Volle Beschreibung sichtbar, keine 2-Zeilen-Kürzung mehr, größer & luftiger */
.history-entry.is-focused .history-desc {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
    overflow: visible;
    margin-top: 11px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
}

.history-entry.is-focused .history-title {
    font-size: 20px;
    letter-spacing: -0.01em;
}

.history-entry.is-focused .history-story-name {
    font-size: 21px;
}

.history-entry.is-focused .history-card-top {
    margin-bottom: 2px;
}

.history-entry.is-focused .history-badges {
    margin-top: 13px;
    gap: 8px;
}

.history-entry.is-focused .history-chip {
    font-size: 13px;
    padding: 3px 11px;
}

.history-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.history-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-1);
}

.history-time {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 1px 6px;
    background: var(--surface-2);
}

.history-desc {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.history-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.history-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

.history-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--entry-accent, var(--accent));
}

.history-chip--backlog {
    color: var(--text-4);
    border-style: dashed;
}

.history-chip--epic {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: transparent;
}

.history-chip--ai {
    color: var(--accent);
    border-color: var(--accent);
    background: transparent;
}

/* ---------- Story-Meilensteine ---------- */

.history-node--story {
    left: -37px;
    top: 14px;
    width: 26px;
    height: 26px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--entry-accent, var(--accent)), var(--success));
    box-shadow: 0 0 0 4px var(--surface), 0 4px 12px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.history-card--story {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, var(--entry-accent, var(--accent)), var(--success)) border-box;
}

.history-card--story::before {
    display: none;
}

.history-story-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--success);
}

.history-story-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    margin-top: 3px;
}

/* ---------- Empty State ---------- */

.history-empty {
    text-align: center;
    padding: 64px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
    background: var(--surface-2);
}

.history-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 24px;
    font-weight: 700;
}

.history-empty h3 {
    margin: 0 0 6px;
    color: var(--text-1);
    font-size: 16px;
}

.history-empty p {
    margin: 0 auto;
    color: var(--text-3);
    font-size: 13px;
    max-width: 380px;
}

/* ---------- Responsive + Reduced Motion ---------- */

@media (max-width: 680px) {
    .history-hero {
        padding: 18px;
    }

    .history-hero-stats {
        width: 100%;
    }

    .history-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 12px;
    }


}

@media (prefers-reduced-motion: reduce) {
    .history-view,
    .history-entry {
        animation: none;
    }

    .history-entry:hover .history-card {
        transform: none;
    }

    .history-entry,
    .history-entry.is-focused .history-card,
    .history-entry.is-focused .history-node,
    .history-timeline.has-focus .history-entry:not(.is-focused) {
        transition: none;
    }

    .history-entry.is-focused .history-card {
        transform: none;
    }
}

/* == css/calendar.css == */
/* Calendar */

.week-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.week-nav-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
}

.cal-day {
    min-height: 190px;
    padding: 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition:
        transform 0.14s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}

.cal-day:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(249, 115, 22, 0.30);
    background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
}

.cal-today {
    border-color: rgba(249, 115, 22, 0.50);
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.10) 0%, var(--surface) 100%);
    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.10),
        var(--shadow-sm);
}

.cal-day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.cal-weekday {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-4);
    margin-bottom: 6px;
}

.cal-date {
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.06em;
}

.cal-date-today {
    color: var(--accent-strong);
}

.cal-type {
    margin-bottom: 0;
    padding: 5px 10px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    align-self: flex-start;
}

.type-arbeit {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid rgba(28, 184, 112, 0.24);
}
.type-blockiert {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid rgba(224, 78, 100, 0.24);
}
.type-andere {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid rgba(212, 149, 46, 0.24);
}

.cal-steps-count {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}

.cal-bar {
    height: 8px;
    margin-bottom: 8px;
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
}

.cal-bar-fill {
    background: var(--accent);
}

.cal-bar-over {
    background: var(--danger);
}

.cal-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
}

.cal-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-3);
    font-style: normal;
    line-height: 1.5;
}

.cal-day > .cal-note:last-child {
    margin-top: auto;
    padding-top: 10px;
}

.cal-day.is-empty .cal-steps-count,
.cal-day.is-empty .cal-bar,
.cal-day.is-empty .cal-bar-label,
.cal-day.is-empty .cal-note {
    opacity: 0.7;
}

/* Calendar enhancements */

.cal-day.day-blockiert {
    background: linear-gradient(180deg, rgba(224,78,100,0.12) 0%, var(--surface) 100%);
    border-color: rgba(224, 78, 100, 0.26);
}
.cal-day.day-andere {
    background: linear-gradient(180deg, rgba(212,149,46,0.12) 0%, var(--surface) 100%);
    border-color: rgba(212, 149, 46, 0.26);
}

.cal-day-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-type-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.cal-type-label {
    display: none;
    font-size: 10px;
    letter-spacing: 0;
    font-weight: 700;
}

.cal-type-btn {
    flex: 1;
    height: 30px;
    min-width: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    gap: 3px;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cal-type-btn:hover {
    background: var(--surface-3);
    color: var(--text-1);
}
.cal-type-btn.active {
    background: var(--success-soft);
    border-color: rgba(28,184,112,0.32);
    color: var(--success);
}
.cal-type-btn--block.active {
    background: var(--danger-soft);
    border-color: rgba(224,78,100,0.32);
    color: var(--danger);
}
.cal-type-btn--other.active {
    background: var(--warning-soft);
    border-color: rgba(212,149,46,0.32);
    color: var(--warning);
}

.cal-step-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}

.cal-step-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cal-step-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cal-step-name {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.cal-empty-hint {
    font-size: 11.5px;
    color: var(--text-4);
    margin-bottom: 6px;
    font-style: italic;
}

.cal-more {
    font-size: 10.5px;
    color: var(--text-4);
    font-weight: 700;
    padding-left: 12px;
}

.cal-blocked-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* KW badge & mode toggle */

.kw-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid rgba(249, 115, 22, 0.26);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cal-kw-inline {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-strong);
    letter-spacing: 0.06em;
    margin-top: 2px;
    opacity: 0.8;
}

.cal-mode-toggle {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.cal-mode-btn {
    height: 34px;
    padding: 0 14px;
    border: none;
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    transition: background 0.14s ease, color 0.14s ease;
}
.cal-mode-btn:hover {
    background: var(--surface-3);
    color: var(--text-1);
}
.cal-mode-btn.active {
    background: var(--accent);
    color: #ffffff;
}

/* Month view */

.month-outer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.month-header-row {
    display: grid;
    grid-template-columns: 36px repeat(7, minmax(0, 1fr));
    gap: 6px;
    padding: 0 2px;
}

.month-kw-hdr {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    padding-top: 4px;
}

.month-wday-hdr {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
    padding: 4px 0;
}

.month-grid {
    display: grid;
    grid-template-columns: 36px repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.month-kw-cell {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-4);
    letter-spacing: 0.04em;
}

.month-cell {
    min-height: 80px;
    padding: 10px 10px 8px;
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: transform 0.12s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.month-cell:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(249, 115, 22, 0.28);
}
.month-cell.cal-today {
    border-color: rgba(249, 115, 22, 0.50);
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.10) 0%, var(--surface) 100%);
}
.month-cell.day-blockiert {
    background: linear-gradient(180deg, rgba(224,78,100,0.11) 0%, var(--surface) 100%);
    border-color: rgba(224, 78, 100, 0.22);
}
.month-cell.day-andere {
    background: linear-gradient(180deg, rgba(212,149,46,0.11) 0%, var(--surface) 100%);
    border-color: rgba(212, 149, 46, 0.22);
}
.month-cell--out {
    opacity: 0.38;
}

.month-cell-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.04em;
    line-height: 1;
}

.month-cell-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.month-cell-h {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-4);
}

.month-cell-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
}

/* ─── Responsive: Kalender ────────────────────────────────────── */

/* Ab column-Topbar: Woche-Nav in einer Zeile halten */
@media (max-width: 680px) {
    .week-nav {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

/* Ab 2-spaltigem Layout: Typ-Labels sichtbar, Buttons größer */
@media (max-width: 980px) {
    .cal-type-label {
        display: inline;
    }

    .cal-type-btn {
        height: 36px;
        font-size: 12px;
        border-radius: 10px;
    }

    .btn-icon-sm {
        width: 38px;
        height: 38px;
        font-size: 18px;
        border-radius: 12px;
    }

    .cal-mode-btn {
        height: 38px;
        padding: 0 16px;
        font-size: 13px;
    }

    .week-nav-controls {
        gap: 8px;
    }
}

/* Vollbild-Mobilansicht */
@media (max-width: 480px) {
    .week-nav {
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: space-between;
    }

    .week-nav-controls {
        gap: 4px;
    }

    .btn-icon-sm {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 10px;
    }

    .cal-mode-btn {
        height: 36px;
        padding: 0 10px;
        font-size: 12px;
    }

    .cal-type-btn {
        height: 40px;
        font-size: 12px;
        border-radius: 10px;
    }

    .cal-date {
        font-size: 22px;
    }
}
/* == css/todos.css == */
.todos-shell {
    max-width: 780px;
    margin: 0 auto;
}

.todos-form {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.todos-form-label {
    padding-left: 4px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.todos-composer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 58px;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        linear-gradient(135deg, var(--accent-soft) 0, transparent 38%),
        var(--surface-solid);
    box-shadow: var(--shadow-sm);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.todos-composer:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm);
    transform: translateY(-1px);
}

.todos-composer-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.todos-composer-icon svg,
.todos-add svg,
.todo-complete svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.todos-composer input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-1);
    font-size: 15px;
}

.todos-composer input::placeholder {
    color: var(--text-4);
}

.todos-add {
    display: inline-flex;
    height: 44px;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    border: 0;
    border-radius: 11px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: background .16s ease, transform .12s ease, opacity .16s ease;
}

.todos-add:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

.todos-add:disabled {
    cursor: not-allowed;
    opacity: .5;
    transform: none;
}

.todos-filters {
    display: inline-flex;
    gap: 3px;
    margin: 18px 0 8px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
}

.todos-filters button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.todos-filters button:hover {
    color: var(--text-1);
}

.todos-filters button.is-active {
    background: var(--surface-solid);
    color: var(--accent-strong);
    box-shadow: var(--shadow-xs);
}

.todos-list {
    display: grid;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.todo-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-solid);
    box-shadow: var(--shadow-xs);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.todo-row:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.todo-complete {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface-2);
    color: transparent;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
}

.todo-complete:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
    transform: scale(1.04);
}

.todo-complete:disabled {
    cursor: wait;
    opacity: .5;
    transform: none;
}

.todo-complete--done {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    cursor: default;
}

.todo-title {
    min-width: 0;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 550;
    overflow-wrap: anywhere;
}

.todos-empty {
    padding: 2.5rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 13px;
    color: var(--text-4);
    text-align: center;
}

.todos-live {
    min-height: 1.3em;
    margin: 2px 0 0;
    color: var(--text-3);
    font-size: 12px;
}

.todos-live:empty {
    min-height: 0;
    margin: 0;
}

.todos-live.is-error,
.todos-error {
    color: var(--danger);
}

@media (max-width: 520px) {
    .todos-composer {
        grid-template-columns: auto minmax(0, 1fr);
        padding-right: 8px;
    }

    .todos-add {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 2px;
    }
}

/* == css/notes.css == */
/* Notes */

.notes-shell.is-revealing > #notes-container {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 360ms ease;
    will-change: opacity, transform, filter;
}

.notes-shell.is-ready > #notes-container {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .notes-shell.is-revealing > #notes-container {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.note-card {
    /* Ohne Zustand trägt die Notiz keine Farbe: neutraler Ton statt Akzent. */
    --edge-tint: var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 190px;
    padding: 18px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition:
        transform 0.14s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}
.note-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--edge-light) var(--edge-tint), var(--shadow-md);
}
.note-card.pinned {
    /* Der Verlauf ist hier schon das Licht von oben — es bleibt beim Rahmen. */
    --edge-tint: var(--warning);
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--shadow-sm);
    background: linear-gradient(180deg, var(--warning-soft) 0%, var(--surface) 100%);
}

.note-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.note-card-title {
    flex: 1;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--text-1);
}

.note-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.note-card:hover .note-card-actions,
.note-card:focus-within .note-card-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.note-card-content {
    flex: 1;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.65;
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.note-card-date {
    margin-top: auto;
    font-size: 11px;
    color: var(--text-4);
}

.btn-pin {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0;
    cursor: pointer;
    color: var(--text-3);
    opacity: 0.62;
    transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.btn-pin:hover {
    opacity: 1;
    color: var(--warning);
    background: var(--warning-soft);
}

.btn-copy-note {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 0;
    cursor: pointer;
    color: var(--text-3);
    border-radius: 7px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.btn-copy-note:hover {
    color: var(--accent);
    background: var(--accent-soft);
}
.btn-copy-note.copied {
    color: var(--success);
}

.btn-edit-note {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 0;
    cursor: pointer;
    color: var(--text-4);
    border-radius: 7px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.btn-edit-note:hover {
    color: var(--text-1);
    background: var(--surface-3);
}

.note-card--copied {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px rgba(55, 211, 155, 0.18), var(--shadow-sm) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.note-card-empty-hint {
    font-size: 12px;
    padding: 4px 0;
    color: var(--text-4);
    font-style: italic;
}

/* Note card heading, title row, meta, badges */

.note-card-heading {
    flex: 1;
    min-width: 0;
}

.note-card-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.note-card-meta {
    font-size: 11px;
    color: var(--text-4);
    margin-top: 3px;
    line-height: 1.4;
}

.note-state-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
    flex-shrink: 0;
}

.note-state-badge--editing {
    background: rgba(249, 115, 22, 0.12);
    color: var(--accent);
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.note-state-badge--pinned {
    background: rgba(234, 179, 8, 0.12);
    color: var(--warning);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.note-card-editing-top {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.note-modal-content-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.note-modal-content-label-row label {
    margin-bottom: 0;
}

/* Note inline editing */

.note-card--editing {
    cursor: default;
    border-color: rgba(249, 115, 22, 0.40);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.14), var(--shadow-md);
}
.note-card--editing:hover {
    transform: none;
}

.note-card--dragging {
    opacity: 0.48;
    cursor: grabbing;
}

.note-card--drop-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16), var(--shadow-md);
    transform: translateY(-2px);
}

/* Notizblock: Karte in Notiz-Größe mit Stapel-Optik */

.note-block-card {
    --edge-tint: var(--accent);
    position: relative;
    z-index: 0;
    background: var(--surface);
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light) var(--edge-tint), var(--shadow-sm);
    cursor: pointer;
}

.note-block-card::before,
.note-block-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease;
}

.note-block-card::before { transform: translate(5px, 5px); opacity: 0.7; }
.note-block-card::after { transform: translate(10px, 10px); opacity: 0.4; }
.note-block-card:hover::before { transform: translate(6px, 7px); }
.note-block-card:hover::after { transform: translate(12px, 13px); }

.note-block-glyph {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}

.note-block-preview {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.note-block-preview li {
    padding: 6px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-block-preview .note-block-preview-more {
    padding: 2px 10px 0;
    border: none;
    background: none;
    font-size: 11px;
    color: var(--text-4);
}

/* Seiten-Handle zum Auffächern */

.note-stack-handle {
    position: absolute;
    z-index: 5;
    inset: 0 auto 0 -5px;
    width: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--r) 0 0 var(--r);
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    cursor: pointer;
    opacity: 0.55;
    transition: width 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.note-stack-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 24px;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px 6px);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.note-block-card:hover .note-stack-handle,
.note-stack-handle:hover,
.note-stack-handle:focus-visible {
    width: 16px;
    opacity: 1;
    outline: none;
    box-shadow: 3px 0 10px rgba(249, 115, 22, 0.22);
}

.note-block-card:hover .note-stack-handle::after,
.note-stack-handle:hover::after,
.note-stack-handle:focus-visible::after {
    opacity: 0.9;
}

/* Aufgefächerter Notizblock */

.note-block-open {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px 16px;
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    border-radius: var(--r);
    background: var(--surface-2);
    box-shadow: var(--edge-light) var(--edge-tint), var(--shadow-sm);
}

.note-block-open.note-card--drop-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16), var(--shadow-md);
}

.note-block-open-head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.note-block-open-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-1);
}

.note-block-count {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}

.note-block-open-hint {
    font-size: 11px;
    color: var(--text-4);
}

.note-block-open-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.note-block-collapse svg {
    transform: rotate(180deg);
}

.note-block-open-grid .note-card {
    background: var(--surface);
}

.note-block-open-grid.is-animated .note-card {
    animation: note-stack-open 330ms cubic-bezier(.2, .8, .2, 1) both;
}

.note-block-open-grid.is-animated .note-card:nth-child(2) { animation-delay: 45ms; }
.note-block-open-grid.is-animated .note-card:nth-child(3) { animation-delay: 90ms; }
.note-block-open-grid.is-animated .note-card:nth-child(4) { animation-delay: 135ms; }
.note-block-open-grid.is-animated .note-card:nth-child(n + 5) { animation-delay: 180ms; }

@keyframes note-stack-open {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }}

.note-edit-title {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    outline: none;
    transition: border-color 0.14s ease;
}
.note-edit-title:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.14);
}

.note-edit-content {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.55;
    resize: vertical;
    font-family: inherit;
    outline: none;
    transition: border-color 0.14s ease;
}
.note-edit-content:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.14);
}

.note-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* Document-style note modal */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.note-pin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    user-select: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.note-pin-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.note-pin-toggle strong {
    font-size: 12.5px;
    font-weight: 700;
}

.note-pin-toggle:has(input:checked) {
    border-color: rgba(217, 119, 6, 0.34);
    background: var(--warning-soft);
    color: var(--warning);
}

.note-link-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 18px;
}
.note-link-fields label {
    display: grid;
    gap: 6px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
}
.note-link-fields select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-1);
}
.note-block-modal-icon { float: right; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 20px; }

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

    .note-pin-toggle {
        width: fit-content;
    }

    .note-link-fields { grid-template-columns: 1fr; }}

/* == css/prompts.css == */
/* Prompts */

.prompts-shell.is-revealing > #category-filter,
.prompts-shell.is-revealing > #prompts-container {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 360ms ease;
    will-change: opacity, transform, filter;
}

.prompts-shell > #category-filter {
    transition-delay: 55ms;
}

.prompts-shell > #prompts-container {
    transition-delay: 100ms;
}

.prompts-shell.is-ready > #category-filter,
.prompts-shell.is-ready > #prompts-container {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .prompts-shell.is-revealing > #category-filter,
    .prompts-shell.is-revealing > #prompts-container {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

.prompts-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

.prompt-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
}

.prompt-card:hover {
    border-color: rgba(249, 115, 22, 0.36);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.prompt-card.card-copied {
    border-color: rgba(249, 115, 22, 0.46);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12), var(--shadow-sm);
}

.prompt-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.prompt-card-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.025em;
}

.prompt-badges,
.prompt-tags,
.prompt-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.prompt-model-badge {
    padding: 4px 9px;
    font-size: 10.5px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid rgba(249, 115, 22, 0.24);
}

.prompt-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prompt-view-compact,
.prompt-view-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prompt-view-compact[hidden],
.prompt-view-detail[hidden] {
    display: none !important;
}

.prompt-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.prompt-preview {
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11.5px;
    line-height: 1.65;
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", "Fira Code", monospace;
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.prompt-compact-step {
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-2);
    padding: 10px 12px;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.prompt-compact-step:hover {
    border-color: rgba(249, 115, 22, 0.28);
    background: var(--accent-soft);
}

.prompt-compact-step.is-copyable {
    cursor: pointer;
}

.prompt-compact-step.is-copied {
    border-color: rgba(249, 115, 22, 0.40);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10);
}

.prompt-compact-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.prompt-compact-step-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prompt-compact-step-hint {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-strong);
    opacity: 0.9;
}

.prompt-compact-step-preview {
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.55;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.copy-btn {
    height: 34px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid rgba(249, 115, 22, 0.28);
    background: var(--accent-soft);
    color: var(--accent-strong);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}

.copy-btn:hover {
    background: var(--accent-soft-2);
    border-color: rgba(249, 115, 22, 0.38);
    transform: translateY(-1px);
}

.copy-btn.copied {
    background: var(--accent-soft-2);
    border-color: rgba(249, 115, 22, 0.40);
    font-weight: 800;
}

.btn-remove-step {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.btn-remove-step:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.18);
    color: #dc2626;
}

.btn-remove-step:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.cat-filter-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
}

.cat-filter-btn:hover {
    border-color: rgba(249, 115, 22, 0.30);
    color: var(--accent-strong);
}

.cat-filter-btn.active {
    background: var(--accent);
    border-color: rgba(249, 115, 22, 0.40);
    color: #ffffff;
}

/* Prompt note */

.prompt-note-area {
    margin-top: 4px;
    margin-bottom: -2px;
}

.prompt-note-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text-3);
    resize: vertical;
    min-height: 90px;
    transition: border-color 0.14s ease, background 0.14s ease;
    line-height: 1.55;
}

.prompt-note-input::placeholder {
    color: var(--text-4);
    font-style: italic;
}

.prompt-note-input:focus {
    outline: none;
    border-color: var(--accent);
    border-style: solid;
    background: var(--accent-soft);
    color: var(--text-2);
}

/* == css/updates.css == */
/* Update-Note-Tracker */

.updates-loading {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.updates-loading-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 0.95fr);
    gap: 16px;
}

.updates-loading-panel {
    height: 420px;
}

.updates-shell > .topbar,
.updates-shell > .upd-workspace > .panel {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 360ms ease;
    will-change: opacity, transform, filter;
}

.updates-shell > .upd-workspace > .upd-pool-panel {
    transition-delay: 55ms;
}

.updates-shell > .upd-workspace > .upd-notes-panel {
    transition-delay: 110ms;
}

.updates-shell.is-ready > .topbar,
.updates-shell.is-ready > .upd-workspace > .panel {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media (max-width: 820px) {
    .updates-loading-grid {
        grid-template-columns: 1fr;
    }

    .updates-loading-panel:last-child {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .updates-shell > .topbar,
    .updates-shell > .upd-workspace > .panel {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

.upd-pool-total {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
}

.upd-workspace {
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 0.95fr);
    gap: 16px;
    align-items: start;
}

.upd-pool-panel,
.upd-notes-panel {
    min-width: 0;
}

/* ── Pool ─────────────────────────────────────────────── */
.upd-pool-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.upd-group {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease, margin 0.18s ease;
}

.upd-group-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    cursor: grab;
}

.upd-group-head.is-dragging {
    cursor: grabbing;
    opacity: 0.6;
}

.upd-story-groups {
    display: flex;
    flex-direction: column;
}

.upd-story-group + .upd-story-group {
    border-top: 1px solid var(--border);
}

.upd-story-group {
    transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease;
}

.upd-story-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    cursor: grab;
}

.upd-story-head.is-dragging {
    cursor: grabbing;
    opacity: 0.6;
}

.upd-story-name {
    min-width: 0;
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upd-group-grip {
    color: var(--text-4);
    font-size: 13px;
    line-height: 1;
}

.upd-group-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}

.upd-group-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
}

.upd-new-dropzone,
.upd-discard-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border-radius: var(--r-lg);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    min-height: 74px;
    text-align: center;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.upd-new-dropzone {
    border: 2px dashed var(--border-strong);
    background: var(--surface-2);
}

.upd-discard-dropzone {
    border: 2px dashed var(--border);
    background: var(--surface);
}

.upd-pool-dropbar,
.upd-note-dropbar {
    position: sticky;
    top: 0;
    z-index: 8;
    margin: 0 0 14px;
    background: var(--surface);
}

.upd-pool-dropbar .upd-discard-dropzone,
.upd-note-dropbar .upd-new-dropzone {
    margin-bottom: 0;
}

.upd-new-dropzone.drag-over {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-1);
}

.upd-discard-dropzone.drag-over {
    border-color: var(--danger);
    background: var(--danger-soft, rgba(214, 69, 69, 0.12));
    color: var(--text-1);
}

.upd-new-dropzone-icon {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}

.upd-group-items {
    display: flex;
    flex-direction: column;
}

.upd-pool-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    cursor: grab;
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.12s ease, opacity 0.12s ease;
}

.upd-pool-item:last-child { border-bottom: none; }
.upd-pool-item:hover { background: var(--surface-2); }
.upd-pool-item.is-dragging { opacity: 0.45; }
.upd-pool-item:active { cursor: grabbing; }

.upd-pool-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.upd-pool-task {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.35;
}

.upd-pool-desc {
    font-size: 12px;
    color: var(--text-4);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Note-Liste ───────────────────────────────────────── */
.upd-note-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.upd-published-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.upd-published-list {
    margin-top: 12px;
}

.upd-note-card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.upd-note-card.is-published {
    border-color: rgba(28, 184, 112, 0.45);
}

.upd-note-card.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.upd-note-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.upd-note-head { flex: 1; min-width: 220px; }

.upd-note-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
}

.upd-note-card-desc {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.4;
}

.upd-note-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.upd-note-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 2px 10px;
}

.upd-status-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--success);
    background: var(--success-soft, rgba(28, 184, 112, 0.14));
    border: 1px solid rgba(28, 184, 112, 0.28);
    border-radius: 999px;
    padding: 2px 10px;
}

.upd-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 9px;
}

.upd-note-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.upd-toggle {
    margin-top: 12px;
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

.upd-toggle:hover { color: var(--accent); }

.upd-note-detail {
    margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}

.upd-note-group { margin-bottom: 10px; }
.upd-note-group:last-child { margin-bottom: 0; }

.upd-note-group-name {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-4);
    margin-bottom: 5px;
}

.upd-note-story {
    margin-bottom: 8px;
}

.upd-note-story:last-child {
    margin-bottom: 0;
}

.upd-note-story-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    margin: 0 0 4px;
}

.upd-note-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.upd-note-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: var(--surface-2);
    border-radius: var(--r-sm, 8px);
}

.upd-note-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.upd-note-task {
    font-size: 13px;
    color: var(--text-2);
}

.upd-note-desc {
    font-size: 12px;
    color: var(--text-4);
    line-height: 1.4;
}

.upd-item-remove {
    background: none;
    border: none;
    color: var(--text-4);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.12s ease, background 0.12s ease;
}

.upd-item-remove:hover {
    color: var(--danger);
    background: var(--danger-soft, rgba(214, 69, 69, 0.12));
}

.upd-empty {
    font-size: 13px;
    color: var(--text-4);
    padding: 4px 0;
}

.upd-undo-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(520px, calc(100vw - 32px));
    padding: 12px 14px;
    color: var(--surface);
    background: var(--text-1);
    border-radius: var(--r-md, 10px);
    box-shadow: var(--shadow-lg, 0 14px 34px rgba(15, 23, 42, 0.24));
    transform: translateX(-50%);
}

.upd-undo-toast span {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.upd-undo-btn {
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: var(--r-sm, 8px);
    padding: 6px 10px;
    color: var(--surface);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.upd-undo-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 980px) {
    .upd-workspace {
        grid-template-columns: 1fr;
    }
}

/* == css/agent-review.css == */
/* Agent-Review — Vorschläge aus Agent-Läufen prüfen */

@keyframes ar-shell-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.ar-workspace {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1080px;
    width: 100%;
    animation: ar-shell-in 0.30s ease both;
}

.ar-page {
    width: min(100%, 1160px);
    margin-inline: auto;
}

/* Kompakter Seitenkopf: Titel, Zählung, Aktualisieren — darunter Filter und
   Sammelaktion. Keine Deko-Fläche, damit die erste Karte früh sichtbar ist. */
.ar-hero {
    position: relative;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.ar-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ar-hero-count {
    margin: 0;
    color: var(--text-3);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ar-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ar-hero-topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Ohne Umbruch schneidet die Hero-Breite die Aktionen auf schmalen
       Viewports ab — sie waren dort nicht mehr erreichbar. */
    flex-wrap: wrap;
    gap: 12px 18px;
}

.ar-hero-copy {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.ar-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ar-hero-actions .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ar-hero-icon {
    display: inline-flex;
    font-size: 15px;
    line-height: 1;
}

/* Der Filterknopf fasst die Filter auf schmalen Bildschirmen zusammen. */
.ar-filter-toggle {
    display: none;
}

.ar-hero h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
}

.ar-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ar-refresh,
.ar-run-meta .btn-sm {
    min-height: 36px;
    height: 36px;
    padding-inline: 12px;
    border-radius: 9px;
}

.ar-refresh span,
.ar-proposal-actions .btn-sm span {
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

.ar-bulk-actions {
    padding: 4px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

/* Die Sammelaktion gehört zum Filter, nicht zum Seitentitel: sie steht in
   einer eigenen Zeile darunter und benennt die Menge, auf die sie wirkt. */
.ar-bulk-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.ar-bulk-scope {
    margin: 0;
    color: var(--text-2);
    font-size: 12.5px;
}

.ar-bulk-scope strong {
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.ar-refresh {
    margin-left: auto;
}

.ar-refresh.is-refreshing {
    cursor: wait;
}

.ar-review-outcome {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-2);
    font-size: 12.5px;
}

.ar-review-outcome[hidden] {
    display: none;
}

.ar-review-outcome.is-success { color: var(--success); }
.ar-review-outcome.is-warning { color: var(--warning); }
.ar-review-outcome.is-error { color: var(--danger); }

.ar-review-outcome-icon {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 11px;
    font-weight: 800;
}

.ar-review-outcome-message {
    color: currentColor;
    font-weight: 650;
}

.ar-review-outcome-links {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.ar-review-outcome-project {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--ar-project-color) 30%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--ar-project-color) 7%, var(--surface));
    color: var(--text-2);
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}

.ar-review-outcome-project:hover { border-color: var(--ar-project-color); }
.ar-review-outcome-project > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ar-project-color);
}
.ar-review-outcome-project b { color: var(--ar-project-color); }

/* ── Lauf-Karte ───────────────────────────────────────── */
.ar-run {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.ar-run:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.ar-run-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
}

.ar-run-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.ar-actor {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: var(--text-1);
}

.ar-actor::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
}

.ar-run-time {
    font-size: 12px;
    color: var(--text-4);
}

.ar-run-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ar-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
}

/* ── Vorschlag-Zeile ──────────────────────────────────── */
.ar-proposals {
    display: flex;
    flex-direction: column;
}

.ar-project-group {
    border-bottom: 1px solid var(--border-soft);
}

.ar-project-group:last-child {
    border-bottom: none;
}

.ar-project-group > .ar-project-card {
    max-width: none;
    margin: 10px 18px 0;
}

.ar-project-group-items {
    display: flex;
    flex-direction: column;
}

/* Entschieden wird nach dem Lesen: die Aktionen schließen den Vorschlag ab,
   statt oben rechts auf Titelhöhe zu stehen, während der Beleg darunter
   weiterläuft. Damit ist die Reihenfolge auf Desktop und Mobile dieselbe. */
.ar-proposal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.12s ease;
}

.ar-proposal:hover {
    background: linear-gradient(90deg, var(--surface), var(--surface-2));
}

.ar-proposal-id {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--text-3);
    font-size: 11px;
}

.ar-proposal.is-route-target {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--accent-soft);
}

.ar-proposal:last-child {
    border-bottom: none;
}

.ar-proposal.is-busy,
.ar-run.is-busy .ar-proposal {
    overflow: hidden;
}

.ar-proposal.is-busy > :not(.ar-action-feedback),
.ar-run.is-busy .ar-proposal > :not(.ar-action-feedback) {
    opacity: 0.28;
    filter: saturate(0.55);
    transition: opacity 180ms ease, filter 180ms ease;
}

.ar-proposal.is-busy button,
.ar-run.is-busy button {
    cursor: wait;
}

.ar-action-feedback {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.01em;
    background: color-mix(in srgb, var(--surface-solid) 76%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: ar-feedback-in 180ms ease both;
}

.ar-feedback-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ar-feedback-spin 0.72s linear infinite;
}

.ar-proposal.is-rejecting .ar-action-feedback {
    color: var(--danger);
}

.ar-proposal.is-accepted {
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}

.ar-proposal.is-accepted .ar-action-feedback {
    color: var(--success);
    background: color-mix(in srgb, var(--success-soft) 74%, var(--surface-solid));
}

.ar-feedback-check {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: white;
    background: var(--success);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--success) 11%, transparent);
    animation: ar-feedback-check 360ms cubic-bezier(0.2, 1.5, 0.5, 1) both;
}

@keyframes ar-feedback-spin {
    to { transform: rotate(360deg); }
}

@keyframes ar-feedback-in {
    from { opacity: 0; }
}

@keyframes ar-feedback-check {
    from { transform: scale(0.45) rotate(-18deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ar-action-feedback,
    .ar-feedback-spinner,
    .ar-feedback-check {
        animation: none !important;
    }
}

.ar-proposal-body {
    min-width: 0;
    flex: 1;
}

.ar-current-revision {
    --edge-tint: var(--border-strong);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    border-radius: var(--r-sm);
    background: var(--surface-2);
    box-shadow: var(--edge-light-sm) var(--edge-tint);
    color: var(--text-2);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.ar-current-revision strong { color: var(--text-1); }

/* ── Karte: Kopf, Essenz, offene Punkte ────────────────── */
/* Die Absicht unterscheiden Text und Symbol, nicht die Farbe: alle
   Abzeichen sind neutral, nur die Hauptaktion trägt den Akzent. */
.ar-proposal { --ar-intent: var(--text-3); }

.ar-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 8px;
}

.ar-intent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-1);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

.ar-intent-icon,
.ar-apply-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ar-intent);
    color: var(--surface);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.ar-review-state {
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ar-next-actor {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
}

.ar-next-actor::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ar-intent);
    vertical-align: 1px;
}

/* Proposal-ID im Kartenkopf: ein Klick kopiert sie, wie die ID-Chips im
   Projektdetail. Im Kartenkopf rechtsbündig, im Verlauf an erster Stelle. */
.ar-id-ref {
    display: inline-flex;
    min-width: 0;
}

.ar-card-head .ar-id-ref {
    margin-left: auto;
}

.ar-id-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 999px;
    padding: 2px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.ar-id-chip:hover,
.ar-id-chip:focus-visible {
    border-color: var(--border-strong);
    color: var(--text-1);
}

.ar-id-chip.is-copied {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 36%, transparent);
}

.ar-id-chip.is-copy-failed {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 36%, transparent);
}

.ar-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 4px 0 0;
    color: var(--text-2);
    font-size: 12.5px;
}

.ar-target {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ar-target-type,
.ar-effect-label {
    margin-right: 5px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ar-target-flag {
    margin-left: 4px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-3);
    font-size: 11px;
}

.ar-target-flag--missing {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    color: var(--danger);
}

.ar-effect {
    margin: 8px 0 0;
    color: var(--text-1);
    font-size: 13.5px;
    line-height: 1.45;
}

.ar-effect--staged {
    margin-top: 4px;
    color: var(--text-2);
}

.ar-effect--staged .ar-effect-label {
    color: var(--info);
}

.ar-effect--effective {
    margin-top: 4px;
    color: var(--text-2);
}

.ar-effect--effective .ar-effect-label {
    color: var(--success);
}

/* Offene Punkte: vor den Aktionen, nie eingeklappt. */
.ar-open-points {
    --edge-tint: var(--warning);
    margin-top: 14px;
    padding: 10px 14px 12px;
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    border-radius: var(--r);
    box-shadow: var(--edge-light-sm) var(--edge-tint);
    background: color-mix(in srgb, var(--warning) 5%, var(--surface));
}

.ar-open-points-heading {
    margin: 0 0 6px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ar-open-points-heading::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--warning);
    color: #fff;
    font-size: 10px;
    vertical-align: 1px;
}

.ar-open-point-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ar-open-points .ar-criteria-flag + .ar-open-point-list {
    margin-top: 8px;
}

.ar-open-point-label {
    display: block;
    color: var(--text-1);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ar-open-point .ar-text {
    margin-top: 3px;
    font-size: 13.5px;
}

.ar-open-point-note {
    display: block;
    color: var(--text-3);
    font-size: 12px;
}

/* ── Agententext (sicher gerendertes Markdown) ─────────── */
.ar-text {
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ar-text.is-rendered { white-space: normal; }
.ar-text > :first-child { margin-top: 0; }
.ar-text > :last-child { margin-bottom: 0; }
.ar-text p { margin: 0 0 0.55em; white-space: pre-wrap; }
.ar-text ul,
.ar-text ol { margin: 0.25em 0 0.55em; padding-left: 1.35em; }
.ar-text li + li { margin-top: 2px; }
.ar-text h5,
.ar-text h6 {
    margin: 0.7em 0 0.25em;
    color: var(--text-1);
    font-size: 13.5px;
    font-weight: 750;
}
.ar-text code {
    padding: 0 4px;
    border-radius: 4px;
    background: var(--surface-2);
    font-size: 0.92em;
}
.ar-text pre {
    max-width: 100%;
    margin: 0.4em 0 0.6em;
    padding: 8px 10px;
    overflow-x: auto;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 12.5px;
    white-space: pre;
}
.ar-text pre code { padding: 0; background: none; }
.ar-text blockquote {
    margin: 0.4em 0;
    padding-left: 10px;
    border-left: 2px solid var(--border-strong);
    color: var(--text-2);
}
.ar-text a { color: var(--accent-strong); }

/* Lange Texte bleiben vollständig im DOM; gekürzt wird nur die Anzeige. */
.ar-text.is-clamped {
    max-height: 12.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

/* Kontext einer Entscheidung: vier Zeilen, damit die Optionen darunter mit
   der Frage im Blick bleiben. */
.ar-text.is-preview.is-clamped {
    max-height: 6.2em;
}

.ar-text-toggle {
    margin-top: 4px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--accent-strong);
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
}

.ar-text-toggle:hover { text-decoration: underline; }

.ar-artifact-evidence {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    background: var(--surface-2);
    overflow-wrap: anywhere;
}

.ar-artifact-evidence--unverified { border-left-color: var(--border-strong); }

.ar-artifact-list { margin: 3px 0 0; padding-left: 18px; }
.ar-artifact-list li { margin-top: 4px; color: var(--text-1); font-size: 13px; }
.ar-artifact-version { margin-left: 8px; color: var(--text-3); font-size: 12px; }
.ar-artifact-unverified { margin: 0; color: var(--text-2); font-size: 13px; }
.ar-artifact-unchanged { margin: 9px 0 0; color: var(--success); font-size: 12px; font-weight: 700; }
.ar-artifact-origin { margin-top: 9px; color: var(--text-3); font-size: 12px; }
.ar-artifact-origin summary { cursor: pointer; width: max-content; max-width: 100%; }

/* Unter den Aktionen: Details, frühere Fassungen, technischer Kontext — alle
   aufklappbar, mit derselben Zusammenfassungszeile. */
.ar-card-foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ar-card-foot > details > summary {
    width: max-content;
    max-width: 100%;
    padding: 4px 0;
    color: var(--text-2);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
}

.ar-card-foot > details > summary:hover { color: var(--text-1); }
.ar-details-body { padding: 2px 0 6px; }
.ar-details-body > .ar-work-summary:first-child,
.ar-details-body > .ar-meta:first-child { margin-top: 4px; }
.ar-history-content { margin-top: 8px; }
.ar-history-empty { margin: 0; color: var(--text-3); font-size: 12px; }
.ar-history-item { padding: 10px 0; border-top: 1px solid var(--border-soft); }
.ar-history-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 7px; color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }

.ar-project-card {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 5px 8px;
    color: inherit;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--ar-project-color) 24%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--ar-project-color) 7%, var(--surface));
    transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.ar-project-card:hover {
    border-color: color-mix(in srgb, var(--ar-project-color) 48%, var(--border));
    background: color-mix(in srgb, var(--ar-project-color) 12%, var(--surface));
}

.ar-project-card:focus-visible {
    outline: 2px solid var(--ar-project-color);
    outline-offset: 2px;
}

.ar-project-card-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ar-project-color);
}

.ar-project-card-name {
    overflow: hidden;
    color: var(--text-1);
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-project-card-target {
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
}

.ar-project-card-arrow {
    color: var(--ar-project-color);
    font-size: 14px;
    line-height: 1;
}

.ar-row-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.ar-title {
    min-width: 0;
    margin: 0;
    font-size: 15.5px;
    font-weight: 650;
    color: var(--text-1);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ar-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 1px 7px;
    white-space: nowrap;
}

.ar-tag--new {
    color: var(--text-1);
    border-color: var(--border-strong);
}

.ar-desc {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-3);
    white-space: pre-wrap;
    word-break: break-word;
}

.ar-context {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-3);
}

.ar-context-label { font-weight: 700; }
.ar-context ul { margin: 4px 0 0; padding-left: 20px; }
.ar-context ol { margin: 4px 0 0; padding-left: 20px; }
.ar-decision-options li { color: var(--text-1); }
.ar-decision-open { margin: 8px 0 0; font-size: 13px; }

/* Der Beleg des Agents ist Lesestoff, keine Handlung: er bleibt neutral und
   ohne eigene Fläche — Überschrift und Text, keine Box in der Karte. */
.ar-work-summary {
    margin-top: 12px;
}

.ar-work-label {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 750;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}


.ar-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ar-routing {
    margin: 10px 0 0;
    color: var(--text-3);
}

.ar-routing summary {
    cursor: pointer;
    width: max-content;
    max-width: 100%;
    font-size: 12px;
    font-weight: 650;
    color: var(--text-3);
}

.ar-routing summary:hover {
    color: var(--text-1);
}

.ar-routing dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 12px;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}

.ar-routing dl div {
    min-width: 0;
}

.ar-routing dt {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
}

.ar-routing dd {
    margin: 0;
    font-size: 12px;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.ar-chip {
    font-size: 12px;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 9px;
}

.ar-plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* Stories und Tasks als gegliederte Liste statt Box in Box. */
.ar-plan-story + .ar-plan-story {
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

.ar-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ar-plan-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 750;
    color: var(--text-1);
    overflow-wrap: anywhere;
}

.ar-plan-story > .ar-text {
    margin-top: 4px;
    color: var(--text-2);
    font-size: 13px;
}

.ar-select-story {
    flex-shrink: 0;
    min-height: 30px;
    height: 30px;
    padding-inline: 9px;
    border-radius: 7px;
    font-size: 12px;
}

.ar-plan-tasks {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ar-plan-task {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text-2);
    transition: background 0.12s ease;
}

.ar-plan-task-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.ar-plan-task-title {
    color: var(--text-1);
    font-weight: 600;
}

.ar-plan-task.is-applied {
    background: color-mix(in srgb, var(--info) 6%, transparent);
}

.ar-chip--completion {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    color: var(--text-2);
}

.ar-status-change--completion .ar-status--next {
    color: var(--text-1);
}

.ar-status-change--completion .ar-status--next::before {
    content: "◷ ";
    color: var(--success);
}

.ar-plan-task.is-rejected {
    opacity: 0.6;
}

.ar-plan-task.is-rejected .ar-plan-task-title {
    text-decoration: line-through;
}

.ar-plan-task-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ar-plan-task-content {
    min-width: 0;
    flex: 1 1 auto;
}

.ar-plan-task-details {
    margin-top: 5px;
}

.ar-plan-task-details summary {
    width: max-content;
    max-width: 100%;
    color: var(--accent-strong);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.ar-plan-task-details > .ar-text {
    margin-top: 6px;
    color: var(--text-2);
    font-size: 13px;
}

.ar-plan-task-content .ar-work-summary {
    margin-top: 8px;
}

.ar-plan-empty {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-4);
    font-style: italic;
}

/* Paket E: fehlende Akzeptanzkriterien direkt am betroffenen Task. Icon-Form
   und Text tragen die Bedeutung, nicht die Farbe allein (WCAG 1.4.1) - der
   Fließtext bleibt in --text-1 lesbar, nur Rahmen/Icon nutzen --warning. */
/* Der Hinweis bleibt an seinem Task, nimmt aber nur noch die Breite seines
   Textes ein — als Band über die volle Zeile hat er in einem Arbeitsplan die
   Task-Titel optisch überlagert. */
.ar-criteria-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    padding: 3px 10px 3px 4px;
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.4;
}

.ar-criteria-flag-icon {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--warning);
    color: var(--surface);
    font-size: 10px;
    font-weight: 800;
}

.ar-criteria-flag-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ar-criteria-flag code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11.5px;
}

.ar-hint {
    font-size: 12px;
    color: var(--text-4);
}

.ar-item-actions {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.ar-item-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.ar-item-reject:hover {
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.ar-item-state {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Vorgemerkt ist nicht übernommen: eigene Farbe, eigenes Symbol. */
.ar-item-state--staged {
    color: var(--info);
}

.ar-item-state--rejected {
    color: var(--text-4);
}

.ar-status-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ar-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}

.ar-status--next {
    color: var(--success);
}

.ar-arrow {
    color: var(--text-4);
}

.ar-proposal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    flex-wrap: wrap;
    align-self: stretch;
    padding: 12px 0 0;
    border-top: 1px solid var(--border-soft);
}

.ar-action-context {
    display: grid;
    gap: 4px;
    flex: 1 1 260px;
    min-width: 0;
}

.ar-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.ar-parts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--text-2);
    font-size: 12.5px;
}

.ar-part {
    padding: 1px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-1);
}

.ar-action-note {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.ar-action-note--blocked {
    color: var(--danger);
    font-weight: 650;
}

.ar-proposal-actions .btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 136px;
    min-height: 36px;
    height: 36px;
    padding-inline: 14px;
    border-radius: 8px;
    box-shadow: none;
}

/* Die Hauptaktion ist bei jeder Absicht gleich gefärbt; ihre Beschriftung
   („Plan freigeben“, „Änderung übernehmen“ …) sagt, was sie tut. Der Text
   bleibt in --text-1, damit der Kontrast nicht an der Farbe hängt. */
.ar-proposal-actions .ar-apply {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--text-1);
}

.ar-proposal-actions .ar-apply .ar-apply-icon {
    background: var(--accent);
    color: #fff;
}

.ar-proposal-actions .ar-apply:hover:not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    color: var(--text-1);
    box-shadow: none;
}

.ar-proposal-actions .ar-apply:disabled .ar-apply-icon {
    background: var(--text-4);
}

/* Frage an einen Menschen: das Antwortformular (decisions.css .decision-form)
   steht über den Knöpfen; „Frage offen lassen“ ist bewusst die Nebenaktion. */
.ar-question {
    flex: 1 1 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
}

/* Die Fläche trägt schon den Rahmen; die Trennlinie des Formulars entfällt. */
.ar-question .decision-form {
    padding-top: 0;
    border-top: 0;
}

.ar-proposal-actions .ar-apply--leave-open {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-2);
}

.ar-proposal-actions .ar-apply--leave-open:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--text-1);
}

.ar-run-hold {
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
}

.ar-proposal-actions .ar-endorse {
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 88%, var(--surface));
    color: var(--accent-strong);
}

.ar-proposal-actions .ar-reject {
    border-color: color-mix(in srgb, var(--danger) 24%, transparent);
    background: transparent;
    color: var(--text-3);
}

.ar-proposal-actions .ar-reject:hover,
.ar-proposal-actions .ar-reject.btn-confirm-pending {
    border-color: color-mix(in srgb, var(--danger) 38%, transparent) !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    box-shadow: none;
}

/* Human-Tasks: Ankündigung und Personenwahl. Nur Karten, deren Übernahme
   Arbeit für einen Menschen anlegt, tragen diesen Block. */
.ar-human-assignment {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.ar-human-announcement {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-2);
}

.ar-human-icon {
    display: inline-flex;
    color: var(--text-3);
}

.ar-assignee-field {
    display: grid;
    gap: 5px;
    color: var(--text-3);
    font-size: .82rem;
    font-weight: 650;
}

.ar-assignee-select {
    width: min(100%, 360px);
    min-height: 38px;
    padding: 7px 34px 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-1);
    font: inherit;
    font-weight: 500;
}

.ar-assignee-select:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
    outline-offset: 2px;
}

.ar-assignee-select:disabled {
    opacity: .6;
    cursor: progress;
}

.ar-assignee-load-error,
.ar-proposal-error {
    margin: 0;
    font-size: .8rem;
}

.ar-assignee-load-error {
    color: var(--text-3);
}

.ar-proposal-error {
    margin-top: 10px;
    color: var(--danger);
    font-weight: 650;
}

@media (max-width: 920px) {
    .ar-hero-topline {
        align-items: flex-start;
    }

    .ar-proposal {
        flex-direction: column;
        gap: 12px;
    }

    .ar-proposal-actions {
        align-self: stretch;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .ar-page {
        width: 100%;
    }

    .ar-hero {
        padding: 12px 14px;
    }

    .ar-bulk-actions {
        width: 100%;
    }

    .ar-bulk-actions .btn-sm {
        flex: 1 1 auto;
    }

    /* Aktualisieren bleibt eine kleine Aktion rechts, keine eigene Zeile. */
    .ar-hero-actions {
        margin-left: auto;
    }

    .ar-run-head {
        align-items: stretch;
    }

    .ar-run-title,
    .ar-run-meta {
        width: 100%;
    }

    .ar-run-meta {
        justify-content: space-between;
    }

}

@media (max-width: 680px) {
    .ar-workspace {
        gap: 14px;
    }

    .ar-run-head,
    .ar-proposal {
        padding-inline: 14px;
    }

    .ar-project-group > .ar-project-card {
        margin-inline: 14px;
    }

    .ar-proposal-actions {
        flex-direction: row;
        width: 100%;
    }
    .ar-action-buttons {
        width: 100%;
        margin-left: 0;
    }
    .ar-proposal-actions .btn-sm {
        flex: 1;
        min-width: 0;
    }

    .ar-plan-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ar-project-card-target {
        display: none;
    }
}

/* ── Filterleiste & gescopte Sammelaktionen ─────────────────────────────
   Die Queue enthält auch Einreichungen anderer Mitglieder. Der aktive Filter
   bestimmt zugleich den Umfang der Sammelaktion. */
.ar-review-controls {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.ar-controls-bottomline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ar-filter-groups,
.ar-project-filters,
.ar-project-filter-chips,
.ar-person-filters,
.ar-person-filter-chips {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.ar-filter-groups {
    gap: 12px;
}

.ar-project-filter-label,
.ar-person-filter-label {
    color: var(--text-4);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ar-project-filter-chip,
.ar-person-filter-chip {
    min-height: 29px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.ar-project-filter-chip span,
.ar-person-filter-chip span {
    display: inline-flex;
    min-width: 18px;
    justify-content: center;
    margin-left: 3px;
    padding: 1px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 10px;
}

.ar-project-filter-chip:hover,
.ar-person-filter-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    color: var(--text-1);
}

.ar-project-filter-chip.is-active,
.ar-person-filter-chip.is-active {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.ar-project-filter-chip:focus-visible,
.ar-person-filter-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ar-filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.ar-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 170px;
}

.ar-filter-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
}

.ar-filter-select {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text-1);
    font-size: 13px;
}

.ar-filter-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.ar-filter-reset {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    line-height: 1;
    transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.ar-filter-reset:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.ar-filter-reset:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ar-filter-notice {
    --edge-tint: var(--warning);
    margin: 0;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    border-radius: 8px;
    box-shadow: var(--edge-light-sm) var(--edge-tint);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--text-2);
    font-size: 12.5px;
}

.ar-bulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

/* Fremde Einreichungen bleiben als sicherheitsrelevante Herkunft sichtbar. */
.ar-owner-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.ar-owner-chip--foreign {
    border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
}

.ar-run--foreign {
    --edge-tint: var(--warning);
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light) var(--edge-tint), var(--shadow-xs);
}

/* Zwei-Stufen-Freigabe: Gegenlesen steht als eigene Bahn vor der Abnahme. */
.ar-lane {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ar-lane + .ar-lane {
    margin-top: 28px;
}

.ar-lane-head {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--accent);
}

.ar-lane--pre-review .ar-lane-head {
    border-left-color: var(--warning);
}

.ar-lane--questions {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 0 0;
    background: var(--surface);
}

.ar-lane--questions .ar-lane-head {
    margin-inline: 16px;
}

.ar-lane-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
}

.ar-lane-head p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-3);
}

.ar-run--pre-review {
    --edge-tint: var(--border-strong);
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light) var(--edge-tint), var(--shadow-xs);
}

/* Der Hover der Basisregel steht weiter oben und würde das Kantenlicht löschen. */
.ar-run--foreign:hover,
.ar-run--pre-review:hover {
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border-hover), var(--border));
    box-shadow: var(--edge-light-hover) var(--edge-tint), var(--shadow-sm);
}

/* Ohne Entscheidungsrecht bleibt die Karte lesbar statt klickbar. */
.ar-stage-hint {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-3);
    font-style: italic;
}

@media (max-width: 680px) {
    .ar-filter-field {
        min-width: 0;
        flex: 1 1 100%;
    }

    .ar-bulk-actions {
        width: 100%;
    }

    .ar-bulk-actions .btn-sm {
        flex: 1;
    }
}

/* ── Rückmeldung: Kommentar, Rückfrage, Überarbeitung, Klärung ──────────
   Eigene Fläche unter den Aktionen: Rückmeldung ist keine Freigabe. Offene
   Klärungen tragen einen Rahmen in Warnfarbe und stehen immer sichtbar
   oben; Kommentare und geklärte Fäden folgen als Verlauf. */
.ar-feedback {
    --edge-tint: var(--border-strong);
    display: grid;
    gap: 10px;
    padding: 10px 14px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--r);
    background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}

.ar-feedback.has-open {
    --edge-tint: var(--warning);
    border-style: solid;
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light-sm) var(--edge-tint);
}

.ar-fb-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.ar-fb-heading {
    margin: 0;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ar-fb-summary {
    color: var(--text-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.ar-feedback .btn-sm {
    min-height: 32px;
    border-radius: 8px;
}

.ar-fb-toggle {
    margin-left: auto;
}

.ar-fb-threads {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ar-fb-thread {
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.ar-fb-thread.is-open {
    --edge-tint: var(--warning);
    border-color: color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    box-shadow: var(--edge-light-sm) var(--edge-tint);
}

.ar-fb-thread:focus-visible,
.ar-fb-answers > li:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ar-fb-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    color: var(--text-3);
    font-size: 12px;
}

.ar-fb-author {
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
}

.ar-fb-author--agent {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.ar-fb-username {
    color: var(--text-2);
    font-weight: 600;
}

.ar-fb-kind {
    color: var(--text-1);
    font-weight: 700;
}

.ar-fb-kind--question,
.ar-fb-kind--revision_request { color: var(--warning); }
.ar-fb-kind--rejection_reason { color: var(--danger); }

.ar-fb-target {
    overflow-wrap: anywhere;
}

.ar-fb-state {
    font-weight: 650;
}

.ar-fb-state--open { color: var(--warning); }
.ar-fb-state--resolved { color: var(--success); }

.ar-fb-entry .ar-text {
    margin-top: 3px;
    font-size: 13.5px;
}

.ar-fb-answers {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--border-soft);
    list-style: none;
}

.ar-fb-entry--agent .ar-text {
    color: var(--text-1);
}

.ar-fb-thread-actions,
.ar-fb-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
}

.ar-fb-hint {
    margin: 0;
    color: var(--text-3);
    font-size: 12px;
}

.ar-fb-history > summary {
    cursor: pointer;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 650;
}

.ar-fb-history > summary:hover { color: var(--text-1); }

.ar-fb-history[open] > summary {
    margin-bottom: 8px;
}

.ar-fb-composer,
.ar-fb-reply-form,
.ar-reject-panel {
    display: grid;
    gap: 8px;
}

.ar-fb-composer[hidden] {
    display: none;
}

.ar-fb-reply-form,
.ar-reject-panel {
    margin-top: 8px;
}

.ar-fb-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.ar-fb-kinds legend {
    width: 100%;
    margin-bottom: 4px;
    padding: 0;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 650;
}

.ar-fb-kind-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
}

.ar-fb-kind-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: var(--accent-soft);
    color: var(--text-1);
    font-weight: 650;
}

.ar-fb-kind-option:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ar-fb-field {
    display: grid;
    gap: 4px;
}

.ar-fb-field label,
.ar-fb-reply-form label,
.ar-reject-panel label {
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 650;
}

.ar-fb-target-select {
    max-width: 100%;
}

.ar-fb-target-fixed {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.ar-fb-input {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    font: inherit;
    font-size: 13.5px;
}

.ar-fb-effect {
    margin: 0;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
}

.ar-fb-effect-label {
    color: var(--text-1);
    font-weight: 700;
}

.ar-fb-count {
    margin-left: auto;
    color: var(--text-4);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.ar-fb-count.is-over {
    color: var(--danger);
    font-weight: 700;
}

.ar-fb-error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
    border-radius: var(--r-sm);
    background: var(--danger-soft);
    color: var(--text-1);
    font-size: 13px;
}

.ar-fb-error p {
    flex: 1 1 220px;
    margin: 0;
}

.ar-fb-error:focus-visible {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

.ar-fb-loading {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.is-busy.ar-fb-composer,
.is-busy.ar-fb-reply-form,
.is-busy.ar-reject-panel {
    opacity: 0.7;
}

.ar-fb-status {
    margin: 0;
    color: var(--success);
    font-size: 12.5px;
    font-weight: 650;
}

.ar-fb-status:empty {
    display: none;
}

/* Verwerfen: Begründung direkt an der Aktion bzw. am Plan-Task. */
.ar-reject-slot {
    list-style: none;
}

.ar-reject-panel {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

.ar-proposal-actions > .ar-reject-slot {
    flex: 1 1 100%;
}

.ar-reject-target {
    margin: 0;
    color: var(--text-1);
    font-size: 13px;
}

/* Offene Rückfrage an einem Plan-Task: Annehmen gesperrt, Grund sichtbar. */
.ar-fb-item-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--border));
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--text-1);
    font-size: 11.5px;
    font-weight: 650;
}

.ar-item-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

@media (max-width: 680px) {
    .ar-feedback {
        padding-inline: 10px;
    }

    .ar-fb-toggle {
        margin-left: 0;
        flex: 1 1 100%;
    }

    .ar-fb-form-actions .btn-sm {
        flex: 1 1 auto;
    }

    .ar-fb-count {
        flex: 1 1 100%;
        margin-left: 0;
    }
}

/* ── Offene Entscheidungen (decisions-section.js) ─────────────────────────
   Bereits angelegte Fragen, die hier in der Sache beantwortet werden. Der
   Abschnitt ist bewusst keine Lauf-Karte: eigener, neutraler Rahmen; die
   Entscheidungskarten selbst kommen aus decisions.css (.decision-card,
   .decision-form) und tragen die Projektfarbe als Kantenlicht. */

.ar-decisions-slot:empty {
    display: none;
}

.ar-decisions {
    --edge-tint: var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--edge-light) var(--edge-tint), var(--shadow-xs);
}

.ar-decisions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
}

.ar-decisions-heading {
    min-width: 0;
    flex: 1 1 320px;
}

.ar-decisions-heading h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    font-size: 15px;
}

.ar-decisions-heading p {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.45;
}

/* Ein Link im Knopfstil: .btn-secondary zentriert nur <button>-Text. */
.ar-decisions-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 36px;
    padding-inline: 12px;
    text-decoration: none;
}

.ar-decisions-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 750;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ar-decisions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ar-decisions-empty {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.ar-decision.is-new {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

.ar-decision:focus-visible,
.ar-decision-outcome:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ar-decision-right {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ar-decision-right--yes {
    background: var(--surface-2);
    color: var(--text-2);
}

.ar-decision-right--no {
    background: var(--surface-2);
    color: var(--text-3);
}

.ar-decision-new {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}

.ar-decision .decision-meta {
    align-items: center;
}

.ar-decision-project {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.ar-decision-project-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--edge-tint);
}

.ar-decision-context.ar-text {
    color: var(--text-2);
    font-size: 13px;
}

.ar-decision-outcome {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
    border-radius: var(--r);
    background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.ar-decision-outcome.is-elsewhere,
.ar-decision-outcome.is-refused {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.ar-decision-outcome-title {
    margin: 0;
    color: var(--text-1);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ar-decision-outcome .decision-answer {
    padding-top: 0;
    border-top: 0;
}

.ar-decision-outcome-note {
    margin: 0;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.45;
}

.ar-decision-outcome-link {
    align-self: flex-start;
    color: var(--accent-strong);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.ar-decision-outcome-link:hover {
    text-decoration: underline;
}

.ar-decisions-readonly > summary {
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.ar-decisions-readonly[open] > summary {
    margin-bottom: 8px;
}

.ar-decisions-readonly > .decision-no-right {
    margin-bottom: 8px;
}

@media (max-width: 680px) {
    .ar-decisions {
        padding: 12px;
    }

    .ar-decisions-all {
        width: 100%;
        justify-content: center;
    }

    .ar-decision .decision-card-head {
        flex-wrap: wrap;
    }
}

/* ── Teilübernahme eines Arbeitsplans (selection.js) ──────────────────────
   Ein Häkchen ist "vorgesehen", keine Entscheidung: eigene Farbe (Akzent),
   eigenes Symbol (◉) und Text. "Übernommen" (✓, Erfolg) steht nur an
   wirksam angelegten Tasks. Text und Symbol tragen die Bedeutung, die Farbe
   unterstützt nur (WCAG 1.4.1). */
.ar-item-select-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    min-height: 28px;
    margin: -3px -4px 0 -4px;
}

.ar-item-select {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.ar-item-select:disabled {
    cursor: not-allowed;
}

.ar-item-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

label.ar-plan-task-title {
    cursor: pointer;
}

.ar-plan-task.is-selected {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.ar-plan-task.is-effective {
    background: color-mix(in srgb, var(--success) 6%, transparent);
}

.ar-plan-task.is-superseded .ar-plan-task-title,
.ar-plan-task.is-closed .ar-plan-task-title {
    color: var(--text-3);
}

.ar-plan-task.is-conflict {
    background: color-mix(in srgb, var(--danger) 7%, transparent);
    outline: 1px dashed color-mix(in srgb, var(--danger) 55%, transparent);
    outline-offset: -1px;
}

.ar-item-state-slot:empty {
    display: none;
}

.ar-item-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.5;
}

.ar-item-state--selected {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.ar-item-state--effective {
    border-color: color-mix(in srgb, var(--success) 50%, var(--border));
    background: var(--success-soft);
    color: var(--success);
}

.ar-item-state--staged {
    border-color: color-mix(in srgb, var(--info) 45%, var(--border));
    background: var(--info-soft);
}

.ar-item-state--revision {
    border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
    background: var(--warning-soft);
    color: var(--text-1);
}

.ar-item-state--superseded {
    border-style: dashed;
}

.ar-item-link {
    color: var(--accent-strong);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.ar-selection {
    --edge-tint: var(--border-strong);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    border-radius: var(--r-md, 10px);
    background: var(--surface);
    box-shadow: var(--edge-light-sm) var(--edge-tint), var(--shadow-xs);
    font-size: 13px;
    color: var(--text-2);
}

.ar-selection:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ar-selection.is-busy {
    opacity: 0.85;
}

.ar-selection-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
}

.ar-selection-heading {
    margin: 0;
    color: var(--text-1);
    font-size: 13.5px;
    font-weight: 750;
}

.ar-selection-count {
    color: var(--text-3);
    font-size: 12px;
}

.ar-selection-hint,
.ar-selection-scope,
.ar-selection-effective,
.ar-selection-remainder-state,
.ar-selection-notice {
    margin: 0;
    overflow-wrap: anywhere;
}

.ar-selection-hint,
.ar-selection-scope {
    color: var(--text-3);
    font-size: 12.5px;
}

.ar-selection-effective {
    color: var(--text-1);
}

.ar-selection-effective span[aria-hidden] {
    color: var(--success);
    font-weight: 800;
}

.ar-selection-remainder-state,
.ar-selection-notice {
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--info) 40%, var(--border));
    border-radius: var(--r-sm);
    background: var(--info-soft);
    color: var(--text-1);
}

.ar-selection-remainder-state {
    border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
    background: var(--warning-soft);
}

.ar-selection-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.ar-selection-scope-line {
    margin: 0;
    color: var(--text-1);
}

.ar-selection-scope-line span {
    color: var(--text-3);
    font-size: 12px;
}

.ar-selection-items,
.ar-selection-lines {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 2px;
    overflow-wrap: anywhere;
}

.ar-selection-items {
    color: var(--text-1);
    font-weight: 600;
}

.ar-selection-lines--blocking {
    color: var(--danger);
    font-weight: 650;
}

.ar-selection-fixes,
.ar-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.ar-selection .btn-sm {
    min-height: 32px;
    height: auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ar-selection-error {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
    border-radius: var(--r-sm);
    background: var(--danger-soft);
    color: var(--text-1);
}

.ar-selection-error p {
    margin: 0;
    font-weight: 650;
}

.ar-selection-error ul {
    margin: 0;
    padding-left: 18px;
}

.ar-selection-error-action {
    justify-self: start;
}

.ar-bulk-selection-note {
    display: block;
    margin-top: 2px;
    color: var(--text-1);
    font-weight: 650;
}

/* Neue Fassung eines Planrests: Vergleich mit der Vorfassung. */
.ar-revision-of {
    --edge-tint: var(--border-strong);
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--edge-tint) var(--edge-border), var(--border));
    border-radius: var(--r-sm);
    background: var(--surface-2);
    box-shadow: var(--edge-light-sm) var(--edge-tint);
    color: var(--text-2);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.ar-revision-of p {
    margin: 0;
}

.ar-revision-title {
    color: var(--text-1);
    font-size: 13.5px;
}

.ar-revision-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ar-revision-count {
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-1);
}

.ar-revision-count--changed { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.ar-revision-count--new { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ar-revision-count--dropped { border-style: dashed; }

.ar-revision-label {
    color: var(--text-1);
    font-weight: 650;
}

.ar-revision-kept span[aria-hidden] {
    color: var(--success);
}

.ar-revision-kept ul,
.ar-revision-dropped ul {
    margin: 2px 0 0;
    padding-left: 18px;
}

.ar-revision-history {
    justify-self: start;
}

.ar-diff {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.ar-diff-label {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-1);
    font-weight: 650;
}

.ar-diff--changed .ar-diff-label { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); background: var(--warning-soft); }
.ar-diff--new .ar-diff-label { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: var(--accent-soft); }
.ar-diff--unchanged .ar-diff-label { color: var(--text-3); }

.ar-diff-old {
    color: var(--text-3);
}

@media (max-width: 680px) {
    .ar-selection {
        padding: 10px;
    }

    .ar-selection-actions .btn-sm,
    .ar-selection-fixes .btn-sm {
        flex: 1 1 100%;
    }

    .ar-item-state {
        white-space: normal;
    }
}

/* Zuletzt entschieden: unter den Bahnen, eingeklappt, nur lesend. */
.ar-decided {
    margin-top: 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.ar-decided-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.ar-decided-summary::-webkit-details-marker { display: none; }

.ar-decided-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--r-lg);
}

.ar-decided-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-1);
    font-size: 15px;
    font-weight: 700;
}

.ar-decided-heading::before {
    content: "▸";
    color: var(--text-3);
    font-size: 12px;
    transition: transform 0.12s ease;
}

.ar-decided[open] .ar-decided-heading::before { transform: rotate(90deg); }

.ar-decided-content {
    padding: 0 16px 14px;
}

.ar-decided-loading,
.ar-decided-more {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.ar-decided-more { padding-top: 10px; }

.ar-decided-list {
    display: flex;
    flex-direction: column;
}

/* Gesuchter Vorschlag (#agent-review/prp_…) über der Liste, Hinweis, wenn
   er nicht sichtbar ist, und Fehler mit „Erneut laden“. */
.ar-decided-search {
    margin: 4px 0 8px;
    padding: 10px 12px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.ar-decided-search-label {
    margin: 0;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ar-decided-search .ar-decided-item {
    padding-top: 8px;
    border-top: 0;
}

.ar-decided-search-note {
    margin: 4px 0 10px;
    color: var(--text-2);
    font-size: 13px;
}

.ar-decided-search-note--missing {
    padding: 8px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
}

.ar-decided-search-error { margin-bottom: 10px; }

.ar-decided-search-note:focus,
.ar-decided-search-error:focus { outline: none; }

.ar-decided-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px 0;
    border-top: 1px solid var(--border-soft);
}

.ar-decided-item:focus { outline: none; }

.ar-decided-item.is-route-target {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    background: var(--accent-soft);
}

.ar-decided-outcome {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 700;
}

.ar-decided-outcome--applied,
.ar-decided-outcome--applied_no_changes {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    color: var(--success);
}

.ar-decided-outcome--partially_applied {
    border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
    background: var(--warning-soft);
    color: var(--text-1);
}

.ar-decided-outcome--rejected {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    color: var(--danger);
}

.ar-decided-successor {
    color: var(--text-3);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.ar-decided-successor a {
    color: var(--accent-strong);
    font-weight: 650;
}

.ar-decided-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    color: var(--text-3);
    font-size: 12px;
}


.ar-decided-project {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
    font-weight: 650;
}

.ar-decided-project span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ar-project-color);
}

.ar-decided-created { margin: 0; font-size: 12.5px; }

.ar-decided-reason {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
    border-radius: var(--r-sm);
    background: var(--danger-soft);
    color: var(--text-1);
    overflow-wrap: anywhere;
}

.ar-decided-reason-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 4px;
    font-size: 12.5px;
}

.ar-decided-no-reason {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.ar-fb-read-only > summary,
.ar-decided-details > summary {
    cursor: pointer;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 650;
}

.ar-fb-read-only > summary:hover,
.ar-decided-details > summary:hover { color: var(--text-1); }

.ar-fb-read-only[open] > summary,
.ar-decided-details[open] > summary { margin-bottom: 8px; }

.ar-history-item .ar-decided-reason,
.ar-history-item .ar-fb-read-only { margin-top: 8px; }

.ar-plan-existing {
    margin-left: 6px;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
}

/* Content must fit inside the card, including long names and action labels. */
.ar-page,
.ar-workspace,
.ar-run,
.ar-lane,
.ar-project-group,
.ar-decisions-slot,
.ar-proposal,
.ar-feedback {
    min-width: 0;
}

.ar-page :is(.ar-actor, .ar-owner-chip, .ar-count, .ar-review-outcome,
    .ar-project-filter-chip, .ar-person-filter-chip, .ar-decided-heading,
    .ar-decision-project, .ar-action-note) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ar-review-outcome {
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .ar-page .btn-sm,
    .ar-page .ar-project-filter-chip,
    .ar-page .ar-person-filter-chip,
    .ar-page .ar-filter-reset,
    .ar-page .ar-item-actions button,
    .ar-page .ar-text-toggle {
        min-height: 44px;
    }

    /* Die gesamte Trefferfläche bleibt innerhalb des Kartenkopfs. */
    .ar-page .ar-id-chip {
        min-height: 44px;
    }

    .ar-page .btn-sm {
        height: auto;
        max-width: 100%;
        padding-block: 10px;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .ar-page .ar-item-actions button,
    .ar-page .ar-filter-reset {
        min-width: 44px;
    }

    .ar-page :is(textarea, select) {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .ar-hero-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .ar-hero-actions .btn-sm {
        flex: 1 1 120px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .ar-bulk-actions .btn-sm,
    .ar-action-buttons .btn-sm {
        flex: 1 1 100%;
    }

    .ar-run-head,
    .ar-proposal,
    .ar-decisions {
        padding-inline: 10px;
    }

    .ar-decisions-heading {
        flex-basis: 100%;
    }

    .ar-decision-project {
        min-width: 0;
    }
}

@media (max-width: 680px) {
    .ar-decided-summary,
    .ar-decided-content {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* Intake proposals keep complete dossier/evidence text available before Apply. */
.review-intake-fields { margin: 16px 0; }
.review-intake-fields > div { border-top: 1px solid var(--border); padding: 12px 0; }
.review-intake-fields dt { font-size: 12px; color: var(--text-2); }
.review-intake-fields dd { margin: 6px 0 0; }
.review-intake-value, .review-intake-evidence pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.review-intake-evidence { margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0; }
.review-intake-evidence header { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.review-intake-evidence pre { font-family: inherit; }
.review-intake-notice { padding: 12px; background: var(--surface-2); border-left: 3px solid var(--accent); }
.review-intake-participants { overflow-wrap: anywhere; }
.review-intake-absorb { margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0; overflow-wrap: anywhere; }
.review-intake-absorb h5 { margin: 0 0 6px; font-size: 12px; color: var(--text-2); }
.review-intake-absorb ul { margin: 6px 0 0; padding-left: 18px; }

/* Origin Intakes of a work plan stay visible in the card head; a stale pin explains why apply fails. */
.ar-plan-origins { margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0; }
.ar-plan-origins h5 { margin: 0 0 8px; font-size: 12px; color: var(--text-2); }
.ar-plan-origins ul { margin: 0; padding-left: 18px; }
.ar-origin-groups { display: grid; gap: 12px; }
.ar-origin-group { min-width: 0; }
.ar-origin-group + .ar-origin-group { padding-top: 10px; border-top: 1px solid var(--border); }
.ar-origin-group h6 { margin: 0 0 6px; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.ar-origin { margin: 4px 0; overflow-wrap: anywhere; }
.ar-origin .ar-meta-text { font-size: 12px; color: var(--text-3); }
.ar-origin-stale { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--warning); background: var(--surface-2); }
.ar-plan-origins [data-plan-replan-error]:empty { display: none; }

/* Typed Product review and current quality contracts. */
.ar-project-card-name small { display: block; font-size: .72rem; font-weight: 500; opacity: .75; }
.ar-quality-context { margin: .65rem 0; padding: .65rem; border: 1px solid var(--border); border-radius: 8px; }
.ar-quality-context summary { cursor: pointer; font-weight: 600; }
.ar-quality-context li { margin-block: .4rem; }
.ar-quality-context small, .ar-quality-sources code { display: block; overflow-wrap: anywhere; }
.ar-quality-context h6 { margin: .8rem 0 .3rem; font-size: .85rem; }
.ar-quality-context p, .ar-quality-unknown { font-size: .82rem; color: var(--text-muted); overflow-wrap: anywhere; }
.ar-product-delta { margin-block: .75rem; }
.ar-scope-card--product { border-inline-start: 3px solid var(--accent); }
@media (max-width: 480px) { .ar-project-card { flex-wrap: wrap; } .ar-project-card-name { min-width: 0; overflow-wrap: anywhere; } .ar-human-assignment select { max-width: 100%; } }

/* ── Mobil: eine Rahmenebene, Entscheidung vor Erklärung ─────────────────
   Auf dem Handy kostet jeder verschachtelte Rahmen Breite und jeder
   Erklärsatz eine Bildschirmzeile. Der Seitenkopf ist deshalb keine Karte,
   nur Lauf und Frage tragen einen Rahmen, Seitenaktionen sind Symbole in der
   Titelzeile, die Filter stehen eingeklappt hinter einem Knopf mit dem
   aktiven Filter, und Aktionen teilen sich eine Zeile. Steht am Dateiende,
   damit es die früheren Breakpoint-Regeln ablöst. */
@media (max-width: 680px) {
    .ar-hero {
        margin-bottom: 12px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .ar-hero-topline {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .ar-hero-copy {
        flex: 1 1 auto;
    }

    .ar-hero-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        width: auto;
        margin-left: auto;
    }

    .ar-hero-actions .btn-sm {
        flex: 0 0 44px;
        width: 44px;
        padding: 0;
    }

    .ar-hero-icon {
        font-size: 18px;
    }

    .ar-hero-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Filter: eingeklappt ein Knopf mit dem aktiven Filter; aufgeklappt je
       Gruppe eine Zeile, Chiptexte passen sich der Breite an. */
    .ar-review-controls {
        margin-top: 10px;
        padding-top: 0;
        border-top: 0;
    }

    .ar-filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid var(--border);
        border-radius: var(--r);
        background: var(--surface-2);
        color: var(--text-2);
        font: inherit;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }

    .ar-filter-toggle-icon {
        display: inline-flex;
        color: var(--text-3);
    }

    .ar-filter-toggle-value {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: var(--text-1);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ar-filter-toggle-caret {
        color: var(--text-3);
        transition: transform var(--dur-fast) ease;
    }

    .ar-review-controls.is-open .ar-filter-toggle-caret {
        transform: rotate(180deg);
    }

    .ar-review-controls:not(.is-open) .ar-controls-bottomline {
        display: none;
    }

    .ar-review-controls.is-open .ar-controls-bottomline {
        margin-top: 10px;
    }

    .ar-filter-groups {
        width: 100%;
        gap: 6px;
    }

    .ar-project-filters,
    .ar-person-filters {
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
    }

    .ar-project-filter-label,
    .ar-person-filter-label {
        flex: 0 0 auto;
        font-size: 10px;
    }

    .ar-project-filter-chips,
    .ar-person-filter-chips {
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ar-project-filter-chips::-webkit-scrollbar,
    .ar-person-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .ar-page :is(.ar-project-filter-chip, .ar-person-filter-chip) {
        flex: 0 1 auto;
        min-width: 0;
        white-space: normal;
    }

    .ar-project-filters {
        flex: 1 1 100%;
    }

    .ar-person-filters {
        flex: 1 1 0;
    }

    .ar-filter-reset {
        flex: 0 0 auto;
    }

    .ar-bulk-bar {
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
    }

    .ar-bulk-actions {
        flex-wrap: nowrap;
        padding: 0;
        border: 0;
        background: none;
    }

    .ar-bulk-actions .btn-sm {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Bahnen: Überschrift ohne Einzug, Fragen ohne eigenen Außenrahmen. */
    .ar-lane {
        gap: 12px;
    }

    .ar-lane + .ar-lane {
        margin-top: 20px;
    }

    .ar-lane-head {
        padding: 2px 0 2px 10px;
    }

    .ar-lane-head p {
        font-size: 12px;
    }

    .ar-lane--questions {
        gap: 12px;
        padding: 0;
        border: 0;
        background: none;
    }

    .ar-lane--questions .ar-lane-head {
        margin-inline: 0;
    }

    .ar-lane--questions .ar-project-group,
    .ar-lane--questions .ar-project-group:last-child {
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        background: var(--surface);
        overflow: hidden;
    }

    .ar-run:hover {
        transform: none;
    }

    .ar-run-head {
        gap: 8px;
        padding: 10px 12px;
    }

    .ar-run-head,
    .ar-proposal {
        padding-inline: 12px;
    }

    .ar-count {
        padding: 0;
        border: 0;
        background: none;
    }

    .ar-proposal {
        gap: 10px;
        padding-block: 14px 12px;
    }

    .ar-project-group > .ar-project-card {
        margin: 10px 12px 0;
    }

    .ar-card-head {
        gap: 4px 8px;
        margin-bottom: 4px;
    }

    .ar-card-head .ar-id-chip {
        padding-block: 1px;
        font-size: 11px;
    }

    .ar-title {
        font-size: 15px;
    }

    .ar-project-card-name small {
        display: inline;
        margin-right: 4px;
    }

    /* Was der Kopf schon sagt, steht nicht noch einmal darunter: das Project
       nennt die Projektkarte, die Art einer Frage ihr Absichtsabzeichen, den
       geänderten Task die Überschrift, die gehaltenen Tasks die Zielzeile
       (mit Titel statt ID). */
    .ar-targets :is(.ar-target--project, .ar-target--product, .ar-target--self),
    .ar-proposal--decision .ar-row-main > .ar-tag,
    .ar-proposal--decision:has(.ar-target--task) .ar-decision-tasks {
        display: none;
    }

    /* Aktionen nebeneinander; die Hauptaktion bekommt mehr Platz. */
    .ar-proposal-actions {
        padding-top: 10px;
    }

    .ar-action-buttons {
        flex-wrap: wrap;
    }

    .ar-action-buttons .btn-sm {
        flex: 1 1 auto;
    }

    .ar-action-buttons :is(.ar-apply:not(.ar-apply--leave-open), .ar-endorse) {
        flex-grow: 2;
    }

    /* Frage an einen Menschen: Optionen direkt unter dem kurzen Kontext. */
    .ar-question {
        padding: 10px;
    }

    .ar-question .decision-form textarea {
        height: 4.6em;
        min-height: 0;
    }

    .ar-decision-tasks ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        padding: 0;
        list-style: none;
    }

    .ar-feedback {
        gap: 8px;
        padding: 8px 10px;
    }

    .ar-fb-toggle {
        flex: 0 1 auto;
        margin-left: auto;
    }
}

/* ── Handy: Karten bis an den Bildschirmrand ─────────────────────────────
   Seitenrand, Kartenrahmen und Karteninnenabstand nahmen zusammen gut 50 px
   jeder Zeile. Lauf- und Fragenkarten heben deshalb den Seitenrand von
   .main-content auf (Werte wie in responsive.css: max(12px, Safe-Area), bis
   360 px 10 px) und tragen keinen seitlichen Rahmen; der Text steht so auf
   derselben Linie wie der Seitentitel. Kästen in der Karte verlieren ihren
   eigenen Rahmen, die Optionen behalten ihre; die Rückmeldung nur, solange
   keine Klärung offen ist (die trägt den Warnrahmen). */
@media (max-width: 480px) {
    .ar-page {
        --ar-bleed-left: max(12px, env(safe-area-inset-left, 0px));
        --ar-bleed-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .ar-run,
    .ar-lane--questions .ar-project-group,
    .ar-lane--questions .ar-project-group:last-child {
        margin-inline: calc(-1 * var(--ar-bleed-left)) calc(-1 * var(--ar-bleed-right));
        border-inline: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .ar-run-head,
    .ar-proposal {
        padding-inline: var(--ar-bleed-left) var(--ar-bleed-right);
    }

    .ar-project-group > .ar-project-card {
        margin-inline: var(--ar-bleed-left) var(--ar-bleed-right);
    }

    .ar-question,
    .ar-decisions,
    .ar-feedback:not(.has-open) {
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
}

@media (max-width: 360px) {
    .ar-page {
        --ar-bleed-left: 10px;
        --ar-bleed-right: 10px;
    }
}

/* == css/auth.css == */
/* Auth-Screen-Styles leben in auth-landing.css (immer-dunkler Landing-Look).
   Diese Datei enthält nur noch die Account-Seite. */

/* Account page */

.acc-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 860px;
}

/* Profile header card */

.acc-header-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
}

.acc-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.28);
}

.acc-header-info {
    flex: 1;
    min-width: 0;
}

.acc-header-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acc-header-meta {
    font-size: 12.5px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.acc-header-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-4);
    flex-shrink: 0;
}

/* 2-column grid for paired panels */

.acc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* Danger zone */

.account-danger {
    border-color: rgba(220, 38, 38, 0.22);
}

.account-danger .panel-header h3 {
    color: var(--danger);
}

/* Admin badge */

.account-admin-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid rgba(249, 115, 22, 0.28);
}

/* Appearance row */

.acc-appearance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}

.acc-appearance-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.acc-row-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.acc-row-sub {
    font-size: 12px;
    color: var(--text-4);
    margin-top: 2px;
}

/* ── API-Token ──────────────────────────────────────── */
.acc-token-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.acc-token-form input {
    flex: 1 1 160px;
    min-width: 120px;
    padding: 8px 11px;
    font-size: 13px;
    color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 8px);
}

.acc-token-reveal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.acc-token-code {
    flex: 1 1 240px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text-1);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 8px);
    padding: 8px 10px;
    word-break: break-all;
}

.acc-token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.acc-token-row:last-child {
    border-bottom: none;
}

.acc-token-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.acc-token-name {
    font-weight: 600;
    color: var(--text-1);
}

.acc-token-used {
    font-size: 12px;
    color: var(--text-4);
}

@media (max-width: 680px) {
    .acc-grid-2 {
        grid-template-columns: 1fr;
    }

    .acc-header-card {
        flex-wrap: wrap;
        gap: 14px;
    }

    .acc-header-card > .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Account page v2 */

.acc-topbar {
    align-items: center;
}

.acc-layout--modern {
    max-width: 1120px;
    gap: 18px;
}

.acc-hero-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 150px;
    padding: 26px 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background:
        radial-gradient(circle at 92% 12%, var(--accent-soft-2), transparent 34%),
        linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow: var(--shadow-sm);
}

.acc-hero-card::after {
    content: "";
    position: absolute;
    inset: auto -18% -68% 52%;
    height: 180px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.08);
    filter: blur(22px);
    pointer-events: none;
}

.acc-hero-main,
.acc-hero-status {
    position: relative;
    z-index: 1;
}

.acc-hero-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.acc-avatar--lg {
    width: 68px;
    height: 68px;
    font-size: 24px;
    border-radius: 18px;
}

.acc-kicker {
    margin-bottom: 4px;
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.acc-hero-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.acc-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.acc-status-chip--ok {
    color: var(--success);
    background: var(--success-soft);
    border-color: rgba(22, 163, 74, 0.22);
}

.acc-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.acc-quick-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 74px;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text-2);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.acc-quick-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.acc-quick-card--static {
    cursor: default;
}

.acc-quick-card.btn-theme-toggle {
    color: var(--text-1);
    font-size: 13px;
    font-weight: 800;
}

.acc-quick-title {
    color: var(--text-1);
    font-size: 13px;
    font-weight: 800;
}

.acc-quick-sub {
    color: var(--text-4);
    font-size: 12px;
    font-weight: 600;
}

.acc-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 18px;
    align-items: start;
}

.acc-content-main,
.acc-content-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.acc-panel {
    padding: 22px;
}

.acc-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.acc-panel-head h3 {
    margin: 0 0 5px;
    color: var(--text-1);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.acc-panel-head p {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.55;
}

.acc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.acc-form .form-group {
    margin-bottom: 0;
}

.acc-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.acc-msg {
    min-height: 18px;
    color: var(--text-4);
    font-size: 13px;
    font-weight: 600;
}

.acc-token-form--modern {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.acc-token-form--modern input {
    min-height: 36px;
}

.acc-token-reveal {
    display: none;
    margin: 14px 0 8px;
    padding: 12px;
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: var(--r);
    background: var(--success-soft);
}

.acc-token-list {
    margin-top: 12px;
}

.acc-token-row {
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm, 8px);
    background: var(--surface-2);
    margin-bottom: 8px;
}

.acc-token-row:last-child {
    margin-bottom: 0;
}

.acc-appearance-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}

.acc-appearance-preview span {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-3);
}

.acc-appearance-preview span:nth-child(1) {
    width: 72%;
    background: var(--accent-soft-2);
}

.acc-appearance-preview span:nth-child(2) {
    width: 92%;
}

.acc-appearance-preview span:nth-child(3) {
    width: 54%;
}

.account-danger {
    background:
        linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.account-danger .btn-danger {
    width: 100%;
    justify-content: center;
}

@media (max-width: 980px) {
    .acc-content-grid {
        grid-template-columns: 1fr;
    }

    .acc-content-side {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .acc-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .acc-hero-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .acc-hero-status {
        justify-content: flex-start;
    }

    .acc-quick-grid,
    .acc-content-side {
        grid-template-columns: 1fr;
    }

    .acc-form-row,
    .acc-token-form--modern {
        grid-template-columns: 1fr;
    }

    .acc-token-form--modern .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .acc-hero-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .acc-avatar--lg {
        width: 58px;
        height: 58px;
        border-radius: 16px;
        font-size: 21px;
    }

    .acc-header-name {
        white-space: normal;
    }
}

/* == css/auth-landing.css == */
/* ==========================================================================
   TaskPilot Auth — Landing-Look (immer dunkel, unabhängig vom App-Theme)
   Setzt die Scroll-Story der Landingpage als "Kapitel 04" fort.
   Tokens sind bewusst eine Kopie der --lp-* Werte aus landing.css,
   gescoped auf #auth-overlay (landing.css enthält globale Resets und
   darf deshalb nicht in die App geladen werden).
   ========================================================================== */

#auth-overlay {
    --lp-accent: #f97316;
    --lp-accent-2: #fb923c;
    --lp-accent-hover: #ea580c;
    --lp-accent-soft: rgba(249, 115, 22, 0.12);
    --lp-accent-soft-2: rgba(249, 115, 22, 0.22);
    --lp-accent-glow: rgba(249, 115, 22, 0.18);

    --lp-bg: #0b0b0d;

    --lp-surface: rgba(255, 255, 255, 0.03);
    --lp-surface-2: rgba(255, 255, 255, 0.05);
    --lp-surface-3: rgba(255, 255, 255, 0.07);

    --lp-border: rgba(255, 255, 255, 0.08);
    --lp-border-soft: rgba(255, 255, 255, 0.05);
    --lp-border-strong: rgba(255, 255, 255, 0.14);
    --lp-border-accent: rgba(249, 115, 22, 0.28);

    --lp-text-1: #fafafc;
    --lp-text-2: #d9d9df;
    --lp-text-3: #a3a3ad;
    --lp-text-4: #71717e;

    --lp-radius-sm: 10px;
    --lp-radius: 16px;
    --lp-radius-lg: 24px;

    --lp-shadow-lg: 0 40px 100px rgba(0, 0, 0, 0.45);
    --lp-ease: cubic-bezier(0.4, 0, 0.2, 1);

    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: radial-gradient(1200px 800px at 70% -10%, #131318 0%, var(--lp-bg) 55%);
    color: var(--lp-text-2);
}

/* ── Ambiente: Glows + Partikel ─────────────────────────────── */

.auth-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.auth-glow--1 {
    top: -180px;
    right: -120px;
    width: 460px;
    height: 460px;
    background: rgba(249, 115, 22, 0.10);
}

.auth-glow--2 {
    bottom: -220px;
    left: -160px;
    width: 520px;
    height: 520px;
    background: rgba(249, 115, 22, 0.06);
}

.auth-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.35);
    animation: auth-drift 14s ease-in-out infinite;
}

.auth-particle:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.auth-particle:nth-child(2) { top: 68%; left: 8%;  animation-delay: -3s; width: 3px; height: 3px; }
.auth-particle:nth-child(3) { top: 28%; left: 86%; animation-delay: -6s; }
.auth-particle:nth-child(4) { top: 76%; left: 82%; animation-delay: -9s; width: 3px; height: 3px; }
.auth-particle:nth-child(5) { top: 10%; left: 55%; animation-delay: -5s; width: 2px; height: 2px; }
.auth-particle:nth-child(6) { top: 88%; left: 42%; animation-delay: -11s; width: 2px; height: 2px; }

@keyframes auth-drift {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.5; }
    50%      { transform: translate3d(14px, -22px, 0); opacity: 1; }
}

/* ── Karte: Glas-Panel ──────────────────────────────────────── */

.auth-card {
    position: relative;
    width: 100%;
    max-width: min(420px, calc(100vw - 32px));
    padding: 36px 32px 32px;
    background: var(--lp-surface-2);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.auth-eyebrow {
    display: block;
    margin-bottom: 14px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lp-accent);
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.auth-logo-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 24px rgba(249, 115, 22, 0.25));
}

.auth-logo h1 {
    display: none;
    margin: 0;
}

/* ── Tabs ───────────────────────────────────────────────────── */

.auth-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
    margin-bottom: 24px;
}

.auth-tab {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--lp-text-3);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s var(--lp-ease), color 0.16s var(--lp-ease);
}

.auth-tab:hover {
    color: var(--lp-text-1);
    background: var(--lp-surface-3);
}

.auth-tab.active {
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-hover));
    color: #fff;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.30);
}

/* ── Formulare (Overrides der theme-aware modals.css-Regeln) ── */

.auth-form .form-group {
    margin-bottom: 14px;
}

#auth-overlay .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--lp-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#auth-overlay .form-group input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-1);
}

#auth-overlay .form-group input::placeholder {
    color: var(--lp-text-4);
    opacity: 1;
}

#auth-overlay .form-group input:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.56);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

.auth-error {
    min-height: 20px;
    font-size: 13px;
    color: #f87171;
    margin-bottom: 14px;
    font-weight: 600;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lp-text-3);
    cursor: pointer;
    margin-bottom: 6px;
    user-select: none;
}

.auth-remember input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--lp-accent);
    cursor: pointer;
}

/* ── Buttons im Landing-Stil ────────────────────────────────── */

#auth-overlay .auth-form .btn-primary {
    width: 100%;
    justify-content: center;
    height: 46px;
    margin-top: 4px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-hover));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.28);
    transition: transform 0.18s var(--lp-ease), box-shadow 0.18s var(--lp-ease), filter 0.18s var(--lp-ease);
}

#auth-overlay .auth-form .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(249, 115, 22, 0.36);
    filter: brightness(1.05);
}

#auth-overlay .auth-form .btn-primary:disabled {
    opacity: 0.65;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    color: var(--lp-text-4);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lp-border);
}

.auth-ki-btn {
    width: 100%;
    height: 46px;
    border: 1px solid var(--lp-border-accent);
    background: var(--lp-accent-soft);
    color: var(--lp-accent-2);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s var(--lp-ease), border-color 0.16s var(--lp-ease), color 0.16s var(--lp-ease);
    font-family: inherit;
    letter-spacing: -0.01em;
    padding: 0 16px;
}

.auth-ki-btn:hover {
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-hover));
    color: #fff;
    border-color: transparent;
}

.auth-legal-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.auth-legal-links a {
    color: var(--lp-text-4);
    font-size: 11px;
    text-decoration: none;
}

.auth-legal-links a:hover {
    color: var(--lp-text-2);
}

/* ── Choreografie: Entrance & Exit ──────────────────────────── */

@keyframes auth-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Standard: kurzer Fade (z. B. nach Logout) */
.auth-card {
    animation: auth-rise 0.45s var(--lp-ease) both;
}

/* Von der Landing kommend: volle gestaffelte Entrance */
.auth-card--arrive > * {
    animation: auth-rise 0.6s var(--lp-ease) both;
}

.auth-card--arrive .auth-eyebrow    { animation-delay: 0.05s; }
.auth-card--arrive .auth-logo       { animation-delay: 0.12s; }
.auth-card--arrive .auth-tabs       { animation-delay: 0.20s; }
.auth-card--arrive .auth-form       { animation-delay: 0.28s; }
.auth-card--arrive .auth-divider    { animation-delay: 0.38s; }
.auth-card--arrive .auth-ki-btn     { animation-delay: 0.44s; }
.auth-card--arrive .auth-legal-links{ animation-delay: 0.52s; }

/* Exit nach erfolgreichem Login */
#auth-overlay.auth-leave {
    opacity: 0;
    transition: opacity 0.3s var(--lp-ease);
    pointer-events: none;
}

/* ── Reduced Motion (Codebase-Standard, vgl. landing.css) ───── */

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-card--arrive > * {
        animation: none;
    }

    .auth-particle {
        animation: none;
        opacity: 0.5;
    }

    #auth-overlay.auth-leave {
        transition: none;
    }

    #auth-overlay .auth-form .btn-primary:hover:not(:disabled) {
        transform: none;
    }
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .auth-card {
        padding: 28px 20px 24px;
        border-radius: 20px;
    }

    .auth-logo-img {
        width: 64px;
        height: 64px;
    }
}

/* == css/import.css == */
/* Import */

/* ── Workflow Guide ─────────────────────────────────────────────────────── */

.wf-guide {
    margin-bottom: 28px;
}

.wf-guide-head {
    text-align: center;
    margin-bottom: 22px;
}

.wf-guide-eyebrow {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border: 1px solid rgba(249, 115, 22, 0.22);
    border-radius: 999px;
    padding: 3px 12px;
    margin-bottom: 10px;
}

.wf-guide-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin: 0 0 8px;
}

.wf-guide-sub {
    font-size: 13.5px;
    color: var(--text-3);
    line-height: 1.55;
    max-width: 560px;
    margin: 0 auto;
}

.wf-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wf-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.wf-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.04;
    pointer-events: none;
}

.wf-card--new::before    { background: linear-gradient(135deg, #4f68e8, transparent 60%); }
.wf-card--continue::before { background: linear-gradient(135deg, var(--accent), transparent 60%); }
.wf-card--update::before { background: linear-gradient(135deg, var(--accent), transparent 60%); }

.wf-card--new    { border-color: rgba(79, 104, 232, 0.22); }
.wf-card--continue { border-color: rgba(249, 115, 22, 0.22); }
.wf-card--update { border-color: rgba(249, 115, 22, 0.22); }

.wf-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.wf-card-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    font-style: normal;
}

.wf-card--new    .wf-card-icon { background: rgba(79, 104, 232, 0.12); color: #4f68e8; }
.wf-card--continue .wf-card-icon { background: var(--accent-soft); color: var(--accent-strong); }
.wf-card--update .wf-card-icon { background: var(--accent-soft); color: var(--accent-strong); }

.wf-card-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
    margin-bottom: 2px;
}

.wf-card-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin: 0;
}

.wf-card-desc {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.55;
    margin: 0;
}

.wf-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.wf-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wf-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.wf-card--new    .wf-step-num { background: rgba(79, 104, 232, 0.12); color: #4f68e8; }
.wf-card--continue .wf-step-num { background: var(--accent-soft); color: var(--accent-strong); }
.wf-card--update .wf-step-num { background: var(--accent-soft); color: var(--accent-strong); }

.wf-step-text {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.5;
}

.wf-step-text strong {
    color: var(--text-1);
    font-weight: 700;
}

.wf-step-text em {
    font-style: normal;
    color: var(--text-2);
    font-weight: 600;
}

.wf-llm-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--border-soft);
}

.wf-llm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}

.wf-llm-chip:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-strong);
}

@media (max-width: 980px) {
    .wf-cards {
        grid-template-columns: 1fr;
    }
    .wf-guide-title {
        font-size: 17px;
    }
}

@media (max-width: 680px) {
    .wf-guide-sub {
        font-size: 13px;
    }
}

/* ── Import Layout ─────────────────────────────────────────────────────── */

/* Seit dem Umzug von Guide/Instruktion/Schema in die "So funktioniert's"-View
   ist der Import einspaltig — begrenzte Breite hält die Panels lesbar. */
.import-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(440px, 1.1fr);
    gap: 24px;
    align-items: start;
    max-width: 1280px;
}

.import-side,
.import-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.import-side {
    position: sticky;
    top: 24px;
}

.import-instruction-panel,
.import-export-panel,
.import-input-panel {
    min-width: 0;
}

.import-panel-desc {
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 14px;
    line-height: 1.5;
}

/* Tabs */

.import-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 4px;
}

.import-tab {
    flex: 1;
    padding: 7px 14px;
    border-radius: calc(var(--r-sm) - 2px);
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

.import-tab:hover {
    color: var(--text-1);
}

.import-tab.active {
    background: var(--surface);
    color: var(--text-1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* Format toggle (JSON / CSV-Text) */

.import-format-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.import-format-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.import-format-btns {
    display: flex;
    gap: 4px;
}

.import-fmt-btn {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}

.import-fmt-btn:hover {
    color: var(--text-1);
    border-color: var(--accent);
}

.import-fmt-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-strong);
}

/* Text / JSON textarea */

.import-textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-1);
    font-size: 12.5px;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    line-height: 1.55;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
    margin-bottom: 2px;
}

.import-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.import-textarea::placeholder {
    color: var(--text-4);
}

/* Drop zone */

.import-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    border-radius: var(--r-lg);
    border: 2px dashed var(--border-strong);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    cursor: pointer;
    text-align: center;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
    min-height: 180px;
}

.import-dropzone:hover,
.import-dropzone.drag-over {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 100%);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.10);
}

.import-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.import-drop-icon {
    font-size: 36px;
    line-height: 1;
    color: var(--text-4);
    transition: color 0.16s ease;
}

.import-dropzone:hover .import-drop-icon,
.import-dropzone.drag-over .import-drop-icon {
    color: var(--accent-strong);
}

.import-drop-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
}

.import-drop-sub {
    font-size: 12px;
    color: var(--text-4);
}

.import-drop-filename {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-strong);
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid rgba(249, 115, 22, 0.28);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Import actions */

.import-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Result panel */

.import-result {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.import-result.visible {
    display: flex;
}

.import-result-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
}

.import-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.import-stat {
    padding: 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    text-align: center;
}

.import-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 4px;
}

.import-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.import-stat--success .import-stat-value { color: var(--success); }
.import-stat--info    .import-stat-value { color: var(--accent); }
.import-stat--warn    .import-stat-value { color: var(--warning); }
.import-stat--error   .import-stat-value { color: var(--danger); }

/* Created breakdown */

.import-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.import-breakdown-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--accent-soft);
    border: 1px solid rgba(249, 115, 22, 0.22);
    color: var(--accent-strong);
}

.import-breakdown-chip.zero {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-soft);
    color: var(--text-4);
}

/* Error list */

.import-errors {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.import-errors-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--danger);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.import-error-item {
    font-size: 12.5px;
    color: var(--text-3);
    padding: 7px 10px;
    border-radius: var(--r-sm);
    background: var(--danger-soft);
    border: 1px solid rgba(224, 78, 100, 0.18);
    line-height: 1.45;
}

/* Template info panel */

.import-template-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Feldübersicht unter dem Import-Feld (features/import/schema-table.js) */

.import-schema {
    margin-top: 18px;
    border-top: 1px solid var(--border-soft);
    padding-top: 14px;
}

.import-schema > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    cursor: pointer;
    list-style: none;
}

.import-schema > summary::-webkit-details-marker {
    display: none;
}

.import-schema > summary::before {
    content: "▸";
    color: var(--text-4);
    transition: transform 0.15s ease;
}

.import-schema[open] > summary::before {
    transform: rotate(90deg);
}

.import-schema-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}

.import-schema-hint {
    font-size: 12px;
    color: var(--text-4);
}

.import-schema[open] > summary {
    margin-bottom: 14px;
}

.import-schema-notes {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-4);
}

.import-schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.import-schema-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-4);
    padding: 0 10px 8px 0;
    border-bottom: 1px solid var(--border-soft);
}

.import-schema-table td {
    padding: 7px 10px 7px 0;
    color: var(--text-2);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
    line-height: 1.45;
}

.import-schema-table tr:last-child td {
    border-bottom: none;
}

.import-schema-table td:first-child {
    font-weight: 700;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    color: var(--accent-strong);
    white-space: nowrap;
}

.import-schema-table td:nth-child(2) {
    color: var(--text-3);
    font-size: 11.5px;
    white-space: nowrap;
}

.import-col-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-soft);
    color: var(--text-3);
    margin: 1px 2px;
    white-space: nowrap;
}

.import-step-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: step-counter;
}

.import-step {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: flex-start;
    counter-increment: step-counter;
}

.import-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid rgba(249, 115, 22, 0.26);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.import-step-text {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    padding-top: 4px;
}

.import-step-text strong {
    color: var(--text-1);
}

/* GPT-Instruktionsbox */

.import-gpt-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.import-gpt-textarea {
    width: 100%;
    min-height: 220px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-family: ui-monospace, "SFMono-Regular", monospace;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    cursor: text;
}

.import-gpt-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.import-gpt-copy-btn {
    align-self: flex-start;
    padding: 7px 18px;
    border-radius: var(--r-sm);
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}

.import-gpt-copy-btn:hover {
    background: var(--accent);
    color: #fff;
}

.export-filter-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-filter-group {
    padding: 12px;
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%),
        var(--surface-2);
}

.export-filter-group--executor {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.export-filter-group--executor > div,
.export-filter-group--executor > span[style] {
    width: 100% !important;
    border-top: 0 !important;
    margin: 0 !important;
}

.export-filter-kicker {
    display: block;
    margin-bottom: 9px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.export-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.export-choice-grid--types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.export-choice {
    position: relative;
    display: flex;
    min-width: 0;
    cursor: pointer;
}

.export-choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.export-choice span {
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease;
}

.export-choice:hover span {
    border-color: var(--border-strong);
    color: var(--text-1);
}

.export-choice input:checked + span {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.export-choice input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.export-picker-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
}

.export-picker-chevron {
    display: inline-block;
    font-size: 10px;
    color: var(--text-4);
    transition: transform 0.15s ease;
}

.export-picker-summary {
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.export-picker-chips {
    display: none;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.export-output-box {
    display: none;
    margin-top: 14px;
}

.export-output-text {
    height: 220px;
}

.export-error {
    display: none;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--danger-soft);
    border: 1px solid rgba(224, 78, 100, 0.18);
    color: var(--danger);
    font-size: 13px;
}

#export-output-count {
    font-size: 12px;
    color: var(--text-3);
}

.export-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-filter-label {
    font-size: 13px;
    color: var(--text-3);
    white-space: nowrap;
}

.export-filter-select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-size: 13px;
    padding: 5px 10px;
    cursor: pointer;
}

.export-filter-select:focus {
    outline: none;
    border-color: var(--accent);
}

.export-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

@media (max-width: 1120px) {
    .import-layout {
        grid-template-columns: 1fr;
    }

    .import-side {
        position: static;
    }
}

@media (max-width: 480px) {
    .export-choice-grid,
    .export-choice-grid--types {
        grid-template-columns: 1fr;
    }

    .import-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .import-dropzone {
        padding: 28px 16px;
        min-height: 140px;
    }

    .import-drop-icon {
        font-size: 28px;
    }
}

/* == css/guide.css == */
/* ==========================================================================
   Guide-View "So funktioniert's" — mit Agenten arbeiten
   Theme-aware (App-Tokens) mit Orange-Akzenten im Landing-Geist.
   ========================================================================== */

.guide-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: var(--content-max);
}

/* ── Hero ───────────────────────────────────────────────────── */

.guide-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 32px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background:
        radial-gradient(circle at 88% 8%, var(--accent-soft-2, rgba(249, 115, 22, 0.22)), transparent 38%),
        linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow: var(--shadow-sm);
}

.guide-hero::after {
    content: "";
    position: absolute;
    inset: auto -14% -70% 48%;
    height: 200px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.08);
    filter: blur(26px);
    pointer-events: none;
}

.guide-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-strong, var(--accent));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.guide-hero-title {
    margin: 0 0 8px;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-1);
}

.guide-hero-sub {
    margin: 0;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-3);
}

/* ── Sektionen ──────────────────────────────────────────────── */

.guide-section {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.guide-section-head {
    margin-bottom: 18px;
}

.guide-label {
    display: block;
    margin-bottom: 6px;
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-4);
}

.guide-section-head h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-1);
}

.guide-section-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-3);
}

/* ── Sprungmarken im Einstieg ───────────────────────────────── */

.guide-jumps {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.guide-jump {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.guide-jump:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    color: var(--text-1);
}

/* ── Wer macht was ──────────────────────────────────────────── */

.guide-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.guide-role {
    padding: 16px 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}

.guide-role-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-1);
}

.guide-role--you .guide-role-title {
    color: var(--accent-strong, var(--accent));
}

/* ── Erster Auftrag ─────────────────────────────────────────── */

.guide-first-run {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

.guide-first-run-desc {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-3);
}

.guide-code {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-2);
    white-space: pre-wrap;
}

/* ── Wo du was findest ──────────────────────────────────────── */

.guide-place-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.guide-place {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
    text-decoration: none;
    transition: border-color 0.16s ease;
}

.guide-place:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.guide-place-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}

.guide-place-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3);
}

/* ── Werkzeuge (eingeklappt) ────────────────────────────────── */

.guide-details-lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-3);
}

.guide-verbs {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guide-verb {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    align-items: baseline;
}

.guide-verb dt code {
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-strong, var(--accent));
}

.guide-verb dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}

/* ── Punkte-Listen (Rollen / Regeln) ───────────────────────── */

.guide-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guide-points li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}

.guide-points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent)));
}

.guide-section--safety {
    background:
        radial-gradient(circle at 92% 0%, var(--accent-soft, rgba(249, 115, 22, 0.12)), transparent 42%),
        var(--surface);
}

/* ── Setup-Schritte ─────────────────────────────────────────── */

.guide-setup-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: guide-setup;
}

.guide-setup-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background: var(--surface-2);
}

.guide-setup-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent)));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.guide-setup-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
}

.guide-setup-text code {
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--surface-3);
    border: 1px solid var(--border-soft);
    color: var(--accent-strong, var(--accent));
}

/* ── Ablauf-Diagramm ────────────────────────────────────────── */

.guide-figure {
    margin: 0;
    padding: 4px 0 0;
    overflow-x: auto;
}

.guide-figure svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    min-width: 660px;
    color: var(--text-2);
}

.guide-figure figcaption {
    margin: 12px auto 0;
    max-width: 60ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-3);
    text-align: center;
}

/* ── Downloads innerhalb des Setup-Blocks ───────────────────── */

.guide-dl-block {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

.guide-sub-head {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-1);
}

/* ── Vertiefung: einklappbare Referenzblöcke ────────────────── */

.guide-more {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guide-details {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.guide-details > summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    transition: background var(--dur-fast, 0.12s) ease;
}

.guide-details > summary::-webkit-details-marker {
    display: none;
}

.guide-details > summary::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
    transition: transform 0.16s ease;
    align-self: center;
}

.guide-details[open] > summary::before {
    transform: rotate(45deg);
}

.guide-details > summary:hover {
    background: var(--surface-2);
}

.guide-details > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.guide-details-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-1);
}

.guide-details-hint {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3);
}

.guide-details-body {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--border-soft);
}

.guide-details-body .wf-guide {
    margin-bottom: 0;
}

/* ── Download-Grid ──────────────────────────────────────────── */

.guide-dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.guide-dl-card {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.guide-dl-card:hover {
    border-color: rgba(249, 115, 22, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(249, 115, 22, 0.10);
}

.guide-dl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.guide-dl-name {
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-1);
    background: transparent;
    word-break: break-all;
}

.guide-dl-tag {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.guide-dl-tag--md {
    background: var(--accent-soft);
    color: var(--accent-strong, var(--accent));
}

.guide-dl-tag--py {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.guide-dl-tag--txt {
    background: var(--surface-3);
    color: var(--text-3);
}

.guide-dl-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3);
}

/* ── Link-Zeilen ────────────────────────────────────────────── */

.guide-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
}

.guide-links-row a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-strong, var(--accent));
    text-decoration: none;
}

.guide-links-row a:hover {
    text-decoration: underline;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 980px) {
    .guide-roles {
        grid-template-columns: 1fr;
    }

    .guide-place-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .guide-hero {
        padding: 26px 20px;
    }

    .guide-section {
        padding: 18px;
    }

    .guide-verb {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .guide-place-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-dl-card:hover {
        transform: none;
    }

    .guide-details > summary,
    .guide-details > summary::before {
        transition: none;
    }
}

/* == css/agent-setup.css == */
/* ── Agent-Einrichtung: URL und Befehle zum Kopieren ───────────
   components/agent-setup.js, im Guide (#guide-setup, Schritt 2) und im
   Account nach dem Erzeugen eines Tokens. */

.agent-setup {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    min-width: 0;
}

.agent-setup-row,
.agent-setup-token {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agent-setup-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-3);
}

.agent-setup-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.agent-setup-url {
    flex: 1 1 260px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 8px);
    background: var(--surface);
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-1);
    word-break: break-all;
}

.agent-setup-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.agent-setup-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-3);
}

.agent-setup-note code {
    font-size: 11.5px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--surface-3, var(--surface-2));
    border: 1px solid var(--border-soft);
    color: var(--text-2);
}

.agent-setup-warn {
    color: var(--warning);
}

.agent-setup-code {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.agent-setup-code pre {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-1);
    white-space: pre;
}

.guide-setup-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.acc-token-setup {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(22, 163, 74, 0.22);
}

.acc-token-setup h4 {
    margin: 0 0 4px;
    font-size: 13.5px;
    color: var(--text-1);
}

.acc-token-setup > p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-2);
}

/* Agent richtet ein: vier kurze Schritte, zwei davon mit Kopierknopf. */
.agent-setup-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.agent-setup [hidden] {
    display: none;
}

.agent-setup-steps {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}

.agent-setup-steps li > span {
    margin-right: 8px;
}

.agent-setup-steps .btn-sm {
    vertical-align: middle;
}

.agent-setup-prompt summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-3);
}

.agent-setup-prompt .agent-setup-code {
    margin-top: 8px;
}

.agent-setup-prompt pre {
    max-height: 320px;
    white-space: pre-wrap;
}

/* == css/admin.css == */
/* ── Admin Portal ─────────────────────────────────────────────── */

/* Tabs */
.admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 5px;
    width: fit-content;
}

.admin-tab {
    padding: 9px 22px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.admin-tab:hover {
    background: var(--surface-2);
    color: var(--text-1);
}

.admin-tab.active {
    background: var(--accent);
    color: #fff;
}

/* User list */
.admin-user-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-user-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.15s;
}

.admin-user-row:hover {
    border-color: var(--border-strong);
}

.admin-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-email {
    font-size: 12px;
    color: var(--text-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-user-date {
    font-size: 12px;
    color: var(--text-4);
    white-space: nowrap;
}

.admin-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Role badges */
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.admin-badge--admin {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.admin-badge--user {
    background: var(--surface-2);
    color: var(--text-4);
    border: 1px solid var(--border);
}

/* Extra-small buttons */
.btn-xs {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 8px;
}

.btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

/* System stats */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.admin-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: center;
}

.admin-stat-icon {
    font-size: 22px;
    line-height: 1;
}

.admin-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.1;
}

.admin-stat-label {
    font-size: 12px;
    color: var(--text-4);
    font-weight: 500;
}

/* ── Instructions (admin grid) ───────────────────────────────── */

.instr-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 8px;
}

/* ── Instructions (public grid) ─────────────────────────────── */

.instr-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.instr-filter-btn {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.instr-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.instr-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.instr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.instr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.instr-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.instr-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.instr-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.instr-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.3;
}

.instr-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(99, 102, 241, 0.2);
    white-space: nowrap;
}

.instr-card-header-actions {
    flex-shrink: 0;
}

.instr-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.instr-preview,
.instr-full {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-align: left;
    width: fit-content;
}

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

.instr-card-preview {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.instr-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.instr-card-footer {
    margin-top: auto;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}

.instr-date {
    font-size: 11px;
    color: var(--text-4);
}

/* ── Instruction active/inactive states ─────────────────────── */

.instr-card--inactive {
    opacity: 0.55;
    border-style: dashed;
}

.instr-card--inactive:hover {
    opacity: 0.75;
}

.instr-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    flex-shrink: 0;
    transition: background 0.15s;
}

.instr-status-dot--on {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(28, 184, 112, 0.18);
}

.instr-active-count {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(28, 184, 112, 0.14);
    color: var(--success);
    border: 1px solid rgba(28, 184, 112, 0.24);
    white-space: nowrap;
}

/* ── GPT Export Panel ────────────────────────────────────────── */

.instr-export-textarea {
    width: 100%;
    min-height: 200px;
    max-height: 420px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-2);
    font-size: 12.5px;
    font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
    line-height: 1.65;
    resize: vertical;
    box-sizing: border-box;
}

.instr-export-textarea:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.45);
}

/* == css/copilot.css == */
/* Global Project Copilot shell. Conversation behavior is intentionally separate. */

.app-shell {
    min-height: 100dvh;
}

.copilot-shell {
    --copilot-bubble-width: clamp(360px, 30vw, 440px);
    position: fixed;
    z-index: 90;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    width: var(--copilot-bubble-width);
    height: min(720px, 74dvh, calc(100dvh - 40px));
    pointer-events: none;
    visibility: hidden;
    color: var(--text-1);
    transition:
        visibility 0s linear var(--dur);
}

.copilot-shell.is-open {
    visibility: visible;
    transition-delay: 0s;
}

.copilot-dialog {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    pointer-events: auto;
    border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    border-radius: calc(var(--r-xl) + 4px);
    background: var(--surface-solid);
    box-shadow: 0 24px 70px color-mix(in srgb, #000 28%, transparent), var(--shadow-lg);
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transform-origin: bottom right;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.copilot-shell.is-open .copilot-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.copilot-companion {
    position: absolute;
    right: calc(100% + var(--space-3));
    bottom: 0;
    display: grid;
    align-content: end;
    gap: var(--space-3);
    width: min(360px, calc(100vw - var(--copilot-bubble-width) - 64px));
    max-height: 100%;
    overflow: auto;
    pointer-events: auto;
}

.copilot-companion:empty {
    display: none;
}

.copilot-companion > * {
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface-solid);
    box-shadow: var(--shadow-lg);
}

.copilot-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.copilot-eyebrow {
    margin-bottom: 2px;
    color: var(--accent-strong);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.copilot-header h2 {
    font-size: 17px;
    line-height: 1.3;
}

.copilot-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
}

.copilot-icon-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
    color: var(--text-1);
}

.copilot-threads {
    min-height: 48px;
    padding: var(--space-2) var(--space-4);
    overflow-x: auto;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-2);
}

.copilot-thread-navigation:empty::before {
    content: "Noch keine Unterhaltung";
    color: var(--text-3);
    font-size: 12px;
}

.copilot-thread-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: max-content;
}

.copilot-thread,
.copilot-thread-new,
.copilot-history-more {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-solid);
    color: var(--text-2);
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.copilot-thread:hover,
.copilot-thread-new:hover,
.copilot-history-more:hover,
.copilot-thread.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-1);
}

.copilot-thread.is-active {
    font-weight: 700;
}

.copilot-transcript {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space-5);
}

.copilot-message {
    display: grid;
    gap: 3px;
    max-width: 88%;
    margin-bottom: var(--space-4);
}

.copilot-message--user {
    margin-left: auto;
}

.copilot-message-role {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.copilot-message--user .copilot-message-role {
    text-align: right;
}

.copilot-message-content {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-1);
    overflow-wrap: anywhere;
}

.copilot-message-content > :first-child { margin-top: 0; }
.copilot-message-content > :last-child { margin-bottom: 0; }
.copilot-message-content p { margin: 0.55em 0; white-space: pre-wrap; }
.copilot-message-content h1,
.copilot-message-content h2,
.copilot-message-content h3 { margin: 0.8em 0 0.35em; line-height: 1.25; }
.copilot-message-content h1 { font-size: 1.2em; }
.copilot-message-content h2 { font-size: 1.1em; }
.copilot-message-content h3 { font-size: 1em; }
.copilot-message-content ul,
.copilot-message-content ol { margin: 0.55em 0; padding-left: 1.35em; }
.copilot-message-content li + li { margin-top: 0.25em; }
.copilot-message-content code { padding: 0.1em 0.3em; border-radius: 4px; background: var(--surface-3); font-size: 0.9em; }
.copilot-message-content pre { margin: 0.65em 0; padding: 0.7em; overflow-x: auto; border-radius: var(--r-sm); background: var(--surface-3); }
.copilot-message-content pre code { padding: 0; background: transparent; }
.copilot-message-content blockquote { margin: 0.6em 0; padding-left: 0.7em; border-left: 3px solid var(--accent); color: var(--text-2); }
.copilot-message-content a { color: var(--accent-strong); text-decoration: underline; }

.copilot-entity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

.copilot-message-content .copilot-entity-action {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.copilot-message-usage {
    margin: 1px 2px 0;
    color: var(--text-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.copilot-message-options {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.copilot-message-option {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--text-1);
    text-align: left;
    cursor: pointer;
}

.copilot-message-option:hover,
.copilot-message-option:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface-2));
}

.copilot-message--user .copilot-message-content {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    background: var(--accent-soft);
}

.copilot-message.is-optimistic {
    opacity: 0.72;
}

.copilot-message.is-streaming .copilot-message-content::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 1em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--accent);
    animation: copilot-caret 900ms steps(1, end) infinite;
}

@keyframes copilot-caret {
    50% { opacity: 0; }
}

/* Aktivitätsansicht: welche Kontextquellen der Copilot gelesen hat */
.copilot-activity {
    margin: var(--space-2) 0;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.copilot-activity-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.copilot-activity-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-2);
}

.copilot-activity-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-4);
}

.copilot-activity-step.is-started .copilot-activity-dot {
    background: var(--accent);
    animation: copilot-activity-pulse 1200ms ease-in-out infinite;
}

.copilot-activity-step.is-completed .copilot-activity-dot {
    background: var(--success);
}

.copilot-activity-step.is-failed .copilot-activity-dot {
    background: var(--danger);
}

.copilot-activity-step.is-failed .copilot-activity-label {
    color: var(--danger);
}

.copilot-activity-label {
    overflow-wrap: anywhere;
}

.copilot-activity-meta {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--text-4);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.copilot-activity-args {
    display: block;
    margin-left: 15px;
    color: var(--text-3);
    font-size: 11px;
    overflow-wrap: anywhere;
}

@keyframes copilot-activity-pulse {
    50% { opacity: 0.35; }
}

/* Welcher Scope beantwortet wurde: Typ und Public ID, keine Inhalte */
.copilot-scope-chip {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
    color: var(--text-2);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.copilot-scope-chip:not(:last-child) {
    margin-bottom: 6px;
}

.copilot-reasoning {
    margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    padding-top: 6px;
}

.copilot-reasoning-summary {
    cursor: pointer;
    color: var(--text-3);
    font-size: 12px;
}

.copilot-reasoning-text {
    margin: 6px 0 0;
    color: var(--text-2);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.copilot-run-status {
    margin: var(--space-2) 0;
    color: var(--text-3);
    font-size: 12px;
}

.copilot-run-status[role="alert"] {
    color: var(--danger);
}

.copilot-history-more {
    display: block;
    margin: 0 auto var(--space-4);
}

.copilot-empty-state {
    max-width: 30ch;
    margin: min(18vh, 120px) auto 0;
    color: var(--text-3);
    text-align: center;
}

.copilot-empty-title {
    margin-bottom: var(--space-2);
    color: var(--text-1);
    font-weight: 700;
}

.copilot-composer-slot {
    min-height: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--surface-solid) 82%, transparent), var(--surface-solid));
}

.copilot-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: 22px;
    background: var(--surface-2);
    box-shadow: 0 6px 20px color-mix(in srgb, #000 8%, transparent);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.copilot-composer:focus-within {
    border-color: color-mix(in srgb, var(--accent) 75%, var(--border-strong));
    background: var(--surface-solid);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 8px 24px color-mix(in srgb, #000 10%, transparent);
}

.copilot-composer-input {
    width: 100%;
    min-height: 42px;
    max-height: 144px;
    resize: none;
    overflow-y: auto;
    padding: 10px 8px 9px 13px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-1);
    line-height: 1.45;
}

.copilot-composer-input::placeholder {
    color: var(--text-3);
}

.copilot-composer-actions {
    display: flex;
    gap: var(--space-2);
}

.copilot-send,
.copilot-stop,
.copilot-retry {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
}

.copilot-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #111;
    font-size: 21px;
    line-height: 1;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.copilot-send:hover:not(:disabled) {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

.copilot-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.copilot-stop,
.copilot-retry {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-1);
}

.copilot-error-actions:empty,
.copilot-error-actions:has(> [hidden]) {
    display: none;
}

.copilot-error-actions {
    margin-top: var(--space-2);
    text-align: right;
}

.copilot-live-status {
    position: fixed;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.copilot-launcher {
    position: fixed;
    z-index: 80;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
    border-radius: 999px;
    background: var(--accent);
    color: #111;
    box-shadow: var(--shadow-lg);
    font-weight: 750;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.copilot-launcher:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

.copilot-shell.is-open + .copilot-launcher {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 980px) {
    .copilot-shell,
    .copilot-shell.is-open {
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: color-mix(in srgb, var(--bg) 32%, transparent);
        backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
    }

    .copilot-shell.is-open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transition-delay: 0s;
    }

    .copilot-shell,
    .copilot-shell.is-open {
        top: var(--copilot-viewport-top, 0);
        bottom: auto;
        height: var(--copilot-viewport-height, 100dvh);
    }

    .copilot-dialog {
        inset: auto 0 0;
        width: 100%;
        height: min(720px, calc(var(--copilot-viewport-height, 100dvh) - max(12px, env(safe-area-inset-top, 0px))));
        max-height: none;
        border-width: 1px 0 0;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        box-shadow: var(--shadow-lg);
        transform: translateY(24px) scale(1);
        transform-origin: bottom center;
    }

    .copilot-shell.is-open .copilot-dialog {
        transform: translateY(0) scale(1);
    }

    .copilot-companion {
        display: none;
    }

    .copilot-launcher {
        right: max(14px, env(safe-area-inset-right, 0px));
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .copilot-header {
        padding: var(--space-3) var(--space-4);
    }

    .copilot-transcript {
        padding: var(--space-4);
    }

    .copilot-stop,
    .copilot-retry {
        min-width: 72px;
        min-height: 44px;
    }

    .copilot-launcher span:last-child {
        display: none;
    }

    .copilot-launcher {
        width: 48px;
        min-height: 48px;
        justify-content: center;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .copilot-shell,
    .copilot-dialog,
    .copilot-launcher {
        transition: none;
    }

    .copilot-message.is-streaming .copilot-message-content::after,
    .copilot-activity-step.is-started .copilot-activity-dot {
        animation: none;
    }
}

/* Current conversation binding is distinct from historical response evidence. */
.copilot-scope-bar { display:flex; align-items:flex-start; gap:.5rem; padding:.55rem .75rem; border-block-start:1px solid var(--border); }
.copilot-scope-info { flex:1; min-width:0; }
.copilot-scope-info p, .copilot-answer-scope { margin:.2rem 0; font-size:.73rem; color:var(--text-muted); overflow-wrap:anywhere; }
.copilot-scope-reload { font:inherit; font-size:.73rem; cursor:pointer; color:var(--text); background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:.35rem; }
.copilot-scope-unavailable, .copilot-protected-answer { padding:.5rem; border-inline-start:3px solid var(--accent); overflow-wrap:anywhere; }
.copilot-scope-difference { font-weight:600; }
@media(max-width:480px) { .copilot-scope-bar { flex-wrap:wrap; } .copilot-scope-reload { min-height:36px; } }

/* == css/responsive.css == */
/* Responsive */

/* Global safety */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove tap highlight on interactive elements globally */
button,
[role="button"],
a,
.nav-item,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-icon,
.btn-sm {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 1400px */

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

/* 1180px: tablet landscape */

@media (max-width: 1180px) {
    .dashboard-grid,
    .dash-bottom-row,
    .notes-grid,
    .prompts-grid-layout,
    .instr-admin-grid,
    .instr-grid {
        grid-template-columns: 1fr;
    }

    .calendar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .month-grid,
    .month-header-row {
        grid-template-columns: 30px repeat(7, minmax(0, 1fr));
        gap: 4px;
    }

    .dtp-layout {
        grid-template-columns: 1fr;
    }

    .dtp-visual {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .admin-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 980px: tablet */

@media (max-width: 980px) {
    html,
    body {
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-shell {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        height: auto;
    }

    .main-content {
        flex: 1;
        min-height: 0;
        overflow-x: clip;
        overflow-y: visible;
        padding: 20px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .sidebar {
        position: relative;
        z-index: 20;
        flex-shrink: 0;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
        height: auto;
        padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
        border-right: none;
        border-bottom: 1px solid var(--sidebar-border);
        overflow: visible;
    }

    .nav-group-label,
    .sidebar-toggle-btn {
        display: none;
    }

    /* Gruppen im horizontalen Topbar-Layout auflösen — Items fließen direkt */
    .nav-group {
        display: contents;
    }

    .logo-section {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        margin: 0;
        border: none;
    }

    .logo-img {
        width: 120px;
    }

    .logo-sub {
        display: none;
    }

    .logo-mark {
        width: 34px;
        height: 34px;
        font-size: 14px;
        border-radius: 10px;
        box-shadow: none;
    }

    .logo-copy h1 {
        margin: 0;
        font-size: 14px;
        white-space: nowrap;
    }

    .logo-copy p {
        display: none;
    }

    .nav-menu {
        grid-column: 1 / -1;
        grid-row: 2;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        padding: 2px 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        -webkit-mask-image: none;
        mask-image: none;
        scrollbar-width: thin;
    }

    .nav-item {
        flex: 0 0 auto;
        width: auto;
        height: 44px;
        display: flex;
        align-items: center;
        padding: 7px 12px;
        font-size: 13px;
        white-space: nowrap;
        border-radius: 10px;
    }

    /* Reset the vertical-nav hover transform for horizontal layout */
    .nav-item:hover {
        transform: none;
    }

    .nav-icon {
        width: 22px;
        height: 22px;
        margin-right: 7px;
        border-radius: 7px;
        font-size: 11px;
    }

    .sidebar-footer {
        grid-column: 2;
        grid-row: 1;
        flex-shrink: 0;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sidebar-legal-links {
        display: none;
    }

    /* Kompakter User-Button in der horizontalen Topbar: nur Avatar + Caret */
    .sidebar-user {
        width: auto;
        margin-bottom: 0;
        padding: 4px 6px;
        gap: 6px;
        min-width: 44px;
        min-height: 44px;
    }

    .sidebar-user .user-name {
        display: none;
    }

    /* Popover öffnet in der Topbar nach unten, rechtsbündig */
    .user-menu {
        left: auto;
        right: 0;
        bottom: auto;
        top: calc(100% + 8px);
        width: 230px;
    }

    .status-pill {
        min-height: 30px;
        padding: 4px 10px;
        font-size: 11px;
        white-space: nowrap;
        border-radius: 10px;
    }

    .main-content {
        padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
    }

    .calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .board-container {
        overflow-x: auto;
        padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
    }
}

/* 768px: large phone / small tablet */

@media (max-width: 768px) {
    /* Shrink logo in compact top bar */
    .logo-img {
        width: 110px;
    }

    .panel {
        padding: 18px;
    }

    .topbar {
        margin-bottom: 22px;
        gap: 12px;
    }

    .topbar h2 {
        font-size: 26px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .main-content input:not([type="checkbox"]):not([type="radio"]),
    .main-content textarea,
    .main-content select,
    .prompt-note-input,
    .backlog-input,
    .auth-form input {
        font-size: 16px;
    }

    .btn-icon {
        width: 40px;
        height: 40px;
    }

    .btn-sm {
        height: 38px;
        padding: 0 14px;
    }

    .stat-cards,
    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-hero-top,
    .panel-header {
        flex-wrap: wrap;
    }

    .dash-hero {
        padding: 18px;
    }

    .dash-hero-top {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-hero-actions {
        width: 100%;
        justify-content: stretch;
    }

    .admin-tabs {
        width: 100%;
        justify-content: stretch;
    }

    .admin-tab {
        flex: 1;
        padding: 9px 12px;
        text-align: center;
        font-size: 13px;
    }

    .admin-user-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .admin-user-meta,
    .admin-user-actions {
        flex-wrap: wrap;
    }
}

/* 680px */

@media (max-width: 680px) {
    .plc-cs-row,
    .proj-detail-cs {
        flex-direction: column;
    }

    /* Aktivitäts-Trend: engere Balken, damit alle Tage ohne Scrollen passen */
    .dash-act-chart {
        grid-auto-columns: minmax(18px, 1fr);
        gap: 4px;
    }

    .dash-act-daynum {
        font-size: 9px;
    }

    .topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar h2 {
        font-size: 23px;
    }

    .main-content {
        padding: 14px;
    }

    .calendar-grid,
    .prompts-grid-layout,
    .notes-grid {
        grid-template-columns: 1fr;
    }

    .board-container {
        display: flex;
        flex-direction: column;
    }

    .board-column {
        width: 100%;
    }

    .panel,
    .section-block {
        border-radius: 18px;
    }

    .panel {
        padding: 16px;
    }

    .day-type-controls {
        width: 100%;
    }

    .day-type-btn {
        flex: 1;
        height: 40px;
        text-align: center;
    }

    .day-budget {
        gap: 12px;
        padding: 14px 16px;
    }

    .topbar .btn-primary,
    .topbar .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .dtp-metrics {
        grid-template-columns: 1fr;
    }

    .admin-stat-grid {
        gap: 10px;
    }

    .admin-stat-card {
        padding: 16px 10px;
    }

    .admin-stat-value {
        font-size: 22px;
    }

    .instr-filter-row {
        gap: 6px;
    }

    .instr-filter-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* 480px: phone with bottom navigation */

@media (max-width: 480px) {
    :root {
        --mobile-bottom-nav-height: 64px;
    }

    html,
    body {
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-shell {
        display: block;
        min-height: 100dvh;
        height: auto;
    }

    .main-content {
        min-height: 100dvh;
        overflow-x: clip;
        overflow-y: visible;
        /* Keep the last interactive element clear of the nav and launcher. */
        padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(var(--mobile-bottom-nav-height) + 72px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .logo-section {
        display: none;
    }

    .sidebar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        min-height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        padding: 4px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 4px) max(6px, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--sidebar-border);
        border-bottom: none;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%),
            linear-gradient(180deg, var(--sidebar-2) 0%, var(--sidebar) 100%);
        overflow: visible;
    }

    /* Fußzeile wird zum kompakten Avatar-Tab im Bottom-Nav */
    .sidebar-footer {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0 2px;
    }

    .sidebar-footer .status-pill {
        display: none;
    }

    .sidebar-user {
        padding: 4px;
    }

    .sidebar-user .user-caret {
        display: none;
    }

    /* Popover öffnet über dem Bottom-Nav */
    .user-menu {
        top: auto;
        bottom: calc(100% + 10px);
        right: 0;
        left: auto;
        width: 230px;
    }

    /* Badge klein oben rechts am Tab */
    .nav-badge {
        position: absolute;
        top: 3px;
        right: 6px;
        min-width: 16px;
        padding: 0 4px;
        font-size: 9px;
    }

    .nav-menu {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        padding: 2px 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* Keep edge tabs and their labels fully visible and tappable. */
        -webkit-mask-image: none;
        mask-image: none;
    }

    .nav-menu::-webkit-scrollbar {
        display: none;
    }

    .nav-item {
        flex: 0 0 64px;
        min-width: 58px;
        max-width: 72px;
        min-height: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 4px 6px;
        font-size: 9.5px;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        border: none;
        border-radius: 10px;
        transform: translateZ(0);
        /* Improve tap responsiveness on mobile */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition:
            background 0.14s ease,
            color 0.14s ease,
            opacity 0.14s ease;
    }

    .nav-icon {
        width: 26px;
        height: 26px;
        margin-right: 0;
        border-radius: 8px;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid transparent;
        transition:
            background 0.14s ease,
            border-color 0.14s ease,
            box-shadow 0.14s ease,
            color 0.14s ease;
    }

    .nav-label {
        overflow: hidden;
        max-width: 100%;
        text-overflow: ellipsis;
    }

    .nav-item:hover,
    .nav-item:active {
        transform: none;
    }

    .nav-item:active .nav-icon {
        background: rgba(255, 255, 255, 0.12);
    }

    .nav-item.active {
        background: rgba(249, 115, 22, 0.12);
        border-color: transparent;
        box-shadow: none;
        color: var(--sidebar-text);
    }

    .nav-item.active .nav-icon {
        background: rgba(249, 115, 22, 0.22);
        border-color: rgba(249, 115, 22, 0.28);
        box-shadow: 0 0 8px rgba(249, 115, 22, 0.18);
        color: var(--accent);
    }

    .nav-item.active::before {
        display: none;
    }

    .copilot-launcher {
        bottom: calc(var(--mobile-bottom-nav-height) + 14px + env(safe-area-inset-bottom, 0px));
    }

    .topbar {
        margin-bottom: 14px;
        gap: 10px;
        flex-direction: column;
        align-items: stretch;
    }

    .topbar h2 {
        margin-bottom: 6px;
        font-size: 20px;
        letter-spacing: -0.03em;
    }

    .topbar p {
        font-size: 13px;
    }

    .panel {
        padding: 14px;
        border-radius: 16px;
    }

    .panel-header {
        margin-bottom: 14px;
    }

    .section-block {
        border-radius: 16px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        height: 48px;
        padding: 0 16px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .btn-sm,
    .copy-btn,
    .cat-filter-btn {
        height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }

    .form-actions,
    .prompt-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .form-actions .btn-primary,
    .form-actions .btn-secondary,
    .form-actions .btn-danger {
        flex: 1;
        min-width: 0;
    }

    .stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .board-container {
        display: flex;
        flex-direction: column;
    }

    .board-column {
        width: 100%;
    }

    .calendar-grid,
    .prompts-grid-layout,
    .notes-grid {
        grid-template-columns: 1fr;
    }

    .day-budget {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }

    .budget-info {
        gap: 12px;
        font-size: 12.5px;
    }

    .budget-bar {
        width: 100%;
        min-width: unset;
    }

    .month-grid,
    .month-header-row {
        grid-template-columns: 24px repeat(7, minmax(0, 1fr));
        gap: 2px;
    }

    .month-cell {
        min-height: 36px;
        padding: 3px;
        border-radius: 6px;
    }

    .month-kw-cell {
        font-size: 8px;
    }

    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-user-actions .btn-xs {
        height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .instr-card {
        padding: 14px 16px;
        border-radius: 14px;
    }

    .dashboard-grid,
    .dash-bottom-row,
    .dtp-layout,
    .dtp-metrics {
        grid-template-columns: 1fr;
    }
}

/* 360px: very small phones */

@media (max-width: 360px) {
    .nav-item {
        min-width: 52px;
        padding: 6px 2px;
        font-size: 9px;
    }

    .main-content {
        padding: 10px 10px calc(var(--mobile-bottom-nav-height) + 72px + env(safe-area-inset-bottom, 0px));
    }

    .stat-cards,
    .admin-stat-grid {
        grid-template-columns: 1fr;
    }

    .topbar h2 {
        font-size: 18px;
    }

    .panel {
        padding: 12px;
    }
}

/* == css/skeleton.css == */
/* ── Skeleton & Page Progress ─────────────────────────────────── */

/* Shimmer keyframe */

@keyframes skel-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* Base skeleton block
   Die Fläche ist die Textfarbe mit geringer Deckkraft: dunkel auf hellem,
   hell auf dunklem Grund — sichtbar in beiden Themes und auf Karten
   (--surface-2) genauso wie auf dem Seitenhintergrund. */

.skel {
    --skel-base: color-mix(in srgb, var(--text-1) 6%, transparent);
    --skel-peak: color-mix(in srgb, var(--text-1) 11%, transparent);
    display: block;
    border-radius: 8px;
    background:
        linear-gradient(
            90deg,
            var(--skel-base) 0%,
            var(--skel-peak) 50%,
            var(--skel-base) 100%
        );
    background-size: 1200px 100%;
    animation: skel-shimmer 1.7s ease-in-out infinite;
}

/* Stagger for sibling skeletons */

.skel:nth-child(2) { animation-delay: 0.12s; }
.skel:nth-child(3) { animation-delay: 0.22s; }
.skel:nth-child(4) { animation-delay: 0.32s; }
.skel:nth-child(5) { animation-delay: 0.40s; }

/* Size helpers */

.skel-sm    { height: 10px; border-radius: 5px; }
.skel-line  { height: 13px; }
.skel-lg    { height: 18px; }
.skel-title { height: 24px; border-radius: 8px; }
.skel-card  { border-radius: 18px; } /* use with height inline */
.skel-round { border-radius: 999px; }
.skel-circle{ border-radius: 50%; }

/* ── Projektdetail ────────────────────────────────────────────────
   projectDetailSkeletonHtml (features/projects/detail-shell.js). Der Kopf
   trägt die echten Klassen .topbar/.proj-detail-topbar/-head/-side; die Maße
   hier folgen den gerenderten Elementen (Desktop: Kopf 185 px, Werkzeugleiste
   36 px; mobil: Kopf ca. 375 px), damit beim Einblenden nichts springt. */

.pd-skel-crumb { width: 84px; height: 12px; margin: 5px 0 11px; border-radius: 6px; }
.pd-skel-title { width: min(260px, 70%); height: 30px; }

.pd-skel-task { flex: 0 0 auto; width: 142px; height: 36px; }

.pd-skel-tabs {
    flex: 0 0 auto;
    width: 404px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.pd-skel-pair { width: 100%; height: 56px; border-radius: 14px; }
.pd-skel-more { width: 315px; max-width: 100%; height: 34px; }

.pd-skel-actions { flex: 0 0 auto; display: flex; gap: 10px; padding-top: 10px; }
.pd-skel-actions .skel { width: 96px; height: 36px; }
.pd-skel-actions .skel + .skel { width: 112px; }

.pd-skel-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pd-skel-button { width: 96px; height: 36px; }
.pd-skel-button:nth-child(2) { width: 128px; }
.pd-skel-button:nth-child(3) { margin-left: auto; width: 76px; }
.pd-skel-button:nth-child(4) { width: 72px; }

.pd-skel-story { height: 150px; }
.pd-skel-story + .pd-skel-story { margin-top: 12px; }

@media (max-width: 768px) {
    /* Zurück-Link und ID-Chip haben hier 44 px Mindesthöhe. */
    .pd-skel-crumb { margin: 16px 0 30px; }
    .pd-skel-title { margin-bottom: 8px; }
}

@media (max-width: 680px) {
    /* .proj-detail-side stapelt hier; Automodus und Projektmenü stehen oben. */
    .pd-skel-task { width: 100%; height: 40px; }
    .pd-skel-tabs { width: auto; align-items: stretch; }
    .pd-skel-pair { height: 54px; }
    .pd-skel-more { width: 100%; height: 44px; }
    .pd-skel-actions { order: -1; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 0; }
    .pd-skel-actions .skel { width: 100%; height: 40px; }
    .pd-skel-actions .skel + .skel { width: 130px; }
}

@media (max-width: 480px) {
    .pd-skel-button,
    .pd-skel-button:nth-child(n) { flex: 1 1 140px; width: auto; height: 44px; margin-left: 0; }
}

/* ── Page transition progress bar ─────────────────────────────── */

#page-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 60%, #FDBA74 100%);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.55);
    opacity: 0;
    overflow: hidden;
}

#page-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
    transform: translateX(-120%);
}

#page-progress.loading {
    opacity: 1;
    width: 72%;
    transition: width 2.8s cubic-bezier(0.05, 0.6, 0.3, 1), opacity 0.12s ease;
}

#page-progress.loading::after {
    animation: page-progress-glint 1.15s ease-in-out infinite;
}

#page-progress.done {
    width: 100%;
    opacity: 0;
    transition: width 0.18s ease, opacity 0.28s ease 0.08s;
}

@keyframes page-progress-glint {
    to { transform: translateX(390%); }
}

@media (prefers-reduced-motion: reduce) {
    .skel,
    #page-progress.loading::after {
        animation: none !important;
    }

    #page-progress {
        transition-duration: 1ms !important;
    }
}

/* == css/tour.css == */
/* ── TaskPilot Guided Tour — Landing-Look ──────────────────────────────────────
   Immer-dunkles Glas-Chrome mit Orange-Akzent, unabhängig vom App-Theme
   (bewusst — die Tour setzt die Landing-Story fort). */

/* Backdrop — full-screen click blocker; background set by JS */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: all;
    transition: background 0.26s ease;
}

/* Spotlight ring — box-shadow creates the surrounding dim + accent outline.
   Längere Transition → der Spot GLEITET zwischen den Zielen. */
.tour-spotlight {
    position: fixed;
    z-index: 9001;
    border-radius: 16px;
    pointer-events: none;
    box-shadow:
        0 0 0 9999px rgba(5, 5, 8, 0.78),
        0 0 0 2px #f97316,
        0 0 24px rgba(249, 115, 22, 0.35);
    transition:
        left   0.5s cubic-bezier(0.4, 0, 0.2, 1),
        top    0.5s cubic-bezier(0.4, 0, 0.2, 1),
        width  0.5s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tooltip: dunkles Glas-Panel im Landing-Stil */
.tour-tooltip {
    position: fixed;
    z-index: 9002;
    width: min(380px, calc(100vw - 32px));
    background: rgba(22, 22, 28, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.14),
        0 40px 100px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    animation: tour-tt-in 0.32s cubic-bezier(0.34, 1.28, 0.64, 1) both;
    pointer-events: all;
}

@keyframes tour-tt-in {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Center-Mode braucht die translate(-50%,-50%)-Position — Keyframe-Transform
   würde sie überschreiben, daher dort nur Fade. */
.tour-tooltip[style*="translate(-50%"] {
    animation-name: tour-tt-in-center;
}

@keyframes tour-tt-in-center {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Progress bar strip */
.tour-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    width: 100%;
}

.tour-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #fb923c);
    border-radius: 0 999px 999px 0;
    transition: width 0.32s ease;
}

/* Inner padding wrapper */
.tour-inner {
    padding: 20px 20px 18px;
    position: relative;
}

/* Close button */
.tour-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: #a3a3ad;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
    z-index: 1;
}
.tour-close:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fafafc;
}

/* Step counter */
.tour-counter {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #f97316;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Title */
.tour-h {
    font-size: 17px;
    font-weight: 800;
    color: #fafafc;
    letter-spacing: -0.03em;
    line-height: 1.22;
    margin-bottom: 10px;
    padding-right: 28px;
}

/* Body text */
.tour-p {
    font-size: 13.5px;
    line-height: 1.62;
    color: #d9d9df;
    margin-bottom: 0;
}

/* Footer row */
.tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 16px;
}

.tour-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Buttons — Landing-Pill-Stil */
.tour-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
}
.tour-btn:hover { transform: translateY(-1px); }
.tour-btn:active { transform: none; }

.tour-btn--pri {
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: none;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.30);
}
.tour-btn--pri:hover {
    box-shadow: 0 8px 26px rgba(249, 115, 22, 0.40);
    filter: brightness(1.05);
}

.tour-btn--sec {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d9d9df;
}
.tour-btn--sec:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.20);
    color: #fafafc;
}

.tour-btn--ghost {
    background: transparent;
    border: 1px solid transparent;
    color: #a3a3ad;
}
.tour-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    color: #d9d9df;
}

/* Done step: stacked CTA buttons */
.tour-done-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.tour-btn--full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

/* Footer layout when done-actions is present */
.tour-footer:has(.tour-done-actions) {
    flex-direction: column;
    align-items: stretch;
}
.tour-footer:has(.tour-done-actions) > span:first-child {
    display: none;
}
.tour-footer:has(.tour-done-actions) .tour-footer-right {
    width: 100%;
}

/* ── Center mode overlay (no spotlight target) ───────────────── */
.tour-overlay--dim {
    background: rgba(5, 5, 8, 0.78);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 680px) {
    .tour-tooltip {
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: auto !important;
        top: auto !important;
        bottom: 16px !important;
        transform: none !important;
        position: fixed !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 20px 20px 16px 16px;
    }

    .tour-spotlight {
        display: none !important;
    }

    .tour-overlay {
        background: rgba(5, 5, 8, 0.72) !important;
    }
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tour-spotlight {
        transition: none;
    }

    .tour-tooltip {
        animation: none;
    }

    .tour-progress-fill {
        transition: none;
    }

    .tour-btn:hover {
        transform: none;
    }
}

/* == css/intro.css == */
/* ==========================================================================
   TaskPilot First-Run Intro — Vollbild-Sequenz im Landing-Stil
   Immer dunkel, Orange-Akzent, Partikel-Canvas im Hintergrund.
   ========================================================================== */

#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: radial-gradient(1200px 800px at 70% -10%, #131318 0%, #0b0b0d 55%);
    color: #d9d9df;
    overflow: hidden;
    cursor: pointer;
    animation: intro-fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

#intro-overlay.intro-leave {
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

@keyframes intro-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#intro-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ── Skip ───────────────────────────────────────────────────── */

.intro-skip {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 3;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #a3a3ad;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.intro-skip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fafafc;
}

/* ── Bühne & Szenen ─────────────────────────────────────────── */

.intro-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.intro-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 24px 96px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px);
    transition:
        opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.55s;
}

.intro-scene.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

.intro-scene.is-past {
    transform: translateY(-22px);
}

.intro-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #f97316;
    margin-bottom: 10px;
}

.intro-title {
    margin: 0 0 10px;
    font-size: clamp(2rem, 6vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fafafc;
}

.intro-sub {
    margin: 0 0 34px;
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    color: #a3a3ad;
    max-width: 520px;
    line-height: 1.55;
}

/* Kaskadierter Aufbau innerhalb der aktiven Szene */
.intro-scene .intro-kicker,
.intro-scene .intro-title,
.intro-scene .intro-sub,
.intro-scene .intro-mock,
.intro-scene .intro-logo-wrap,
.intro-scene .intro-actions {
    opacity: 0;
    transform: translateY(22px);
}

.intro-scene.is-active .intro-kicker,
.intro-scene.is-active .intro-title,
.intro-scene.is-active .intro-sub,
.intro-scene.is-active .intro-mock,
.intro-scene.is-active .intro-logo-wrap,
.intro-scene.is-active .intro-actions {
    animation: intro-rise 0.65s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.intro-scene.is-active .intro-kicker   { animation-delay: 0.15s; }
.intro-scene.is-active .intro-title    { animation-delay: 0.28s; }
.intro-scene.is-active .intro-sub      { animation-delay: 0.42s; }
.intro-scene.is-active .intro-mock,
.intro-scene.is-active .intro-logo-wrap,
.intro-scene.is-active .intro-actions  { animation-delay: 0.58s; }

@keyframes intro-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Szene 1: Logo ──────────────────────────────────────────── */

.intro-logo {
    width: clamp(84px, 14vw, 128px);
    height: auto;
    filter: drop-shadow(0 10px 40px rgba(249, 115, 22, 0.35));
}

/* ── Mini-Mockups (gemeinsam) ───────────────────────────────── */

.intro-mock {
    width: min(460px, calc(100vw - 48px));
}

/* ── Szene 2: Board-Struktur ────────────────────────────────── */

.intro-mock--board {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
}

.im-project {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.im-project-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.5);
}

.im-project-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #fafafc;
    letter-spacing: -0.02em;
}

.im-epic-pill {
    margin-left: auto;
    padding: 2px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fb923c;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.28);
}

.im-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.im-col {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.im-col-head {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #71717e;
    margin-bottom: 8px;
}

.im-card {
    position: relative;
    height: 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 7px;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
}

.im-card:last-child { margin-bottom: 0; }

.intro-scene.is-active .im-card {
    animation: intro-card-pop 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) both;
    animation-delay: var(--d, 1s);
}

@keyframes intro-card-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.im-card--done {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.25);
}

.im-card--done::after {
    content: "✓";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 800;
    color: #22c55e;
}

.im-card--ai {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.30);
}

.im-card--ai span {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    color: #fb923c;
}

/* ── Szene 3: Tagesplanung ──────────────────────────────────── */

.intro-mock--day {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.im-budget-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #a3a3ad;
    margin-bottom: 8px;
}

.im-budget-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.im-budget-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #f97316, #fb923c);
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.45);
}

.intro-scene.is-active .im-budget-fill {
    animation: intro-budget-fill 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1s both;
}

@keyframes intro-budget-fill {
    from { width: 0; }
    to   { width: 68%; }
}

.im-week {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
}

.im-week span {
    flex: 1;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.im-week .im-week--today {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.25);
}

.im-week .im-week--off {
    opacity: 0.35;
}

/* ── Szene 4: Agents-Terminal ───────────────────────────────── */

.im-term {
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    background: rgba(13, 13, 17, 0.92);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.im-term-bar {
    display: flex;
    gap: 6px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.im-term-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.im-term-bar i:first-child { background: rgba(249, 115, 22, 0.55); }

.im-term-body {
    padding: 16px 18px 18px;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 2;
}

.im-line {
    color: #a3a3ad;
    opacity: 0;
    transform: translateY(6px);
}

.intro-scene.is-active .im-line {
    animation: intro-line-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: var(--d, 1s);
}

@keyframes intro-line-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.im-line--cmd { color: #fafafc; }

.im-line--cmd::before {
    content: "$ ";
    color: #f97316;
    font-weight: 700;
}

.im-line--ok { color: #22c55e; }

/* ── Szene 5: Bereit ────────────────────────────────────────── */

.intro-scene--ready .intro-title {
    font-size: clamp(2.6rem, 8vw, 4.6rem);
}

.intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.intro-btn {
    height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.16s ease, color 0.16s ease;
}

.intro-btn--pri {
    border: none;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    box-shadow: 0 12px 34px rgba(249, 115, 22, 0.35);
}

.intro-btn--pri:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 42px rgba(249, 115, 22, 0.45);
}

.intro-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #d9d9df;
}

.intro-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fafafc;
}

/* ── Fortschritts-Dots ──────────────────────────────────────── */

.intro-dots {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.intro-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
}

.intro-dot:hover { background: rgba(255, 255, 255, 0.35); }

.intro-dot.is-active {
    width: 26px;
    background: linear-gradient(90deg, #f97316, #fb923c);
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .intro-skip { top: 14px; right: 14px; }
    .intro-dots { bottom: 24px; }
    .im-columns { grid-template-columns: 1fr; }
}

/* ── Reduced Motion: statische Click-Through-Variante ───────── */

@media (prefers-reduced-motion: reduce) {
    #intro-overlay {
        animation: none;
    }

    #intro-overlay.intro-leave {
        transition: none;
    }

    .intro-scene,
    .intro-scene.is-active {
        transition: none;
        transform: none;
    }

    .intro-scene.is-active .intro-kicker,
    .intro-scene.is-active .intro-title,
    .intro-scene.is-active .intro-sub,
    .intro-scene.is-active .intro-mock,
    .intro-scene.is-active .intro-logo-wrap,
    .intro-scene.is-active .intro-actions,
    .intro-scene.is-active .im-card,
    .intro-scene.is-active .im-line,
    .intro-scene.is-active .im-budget-fill {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .intro-scene.is-active .im-budget-fill { width: 68%; }
}

/* == css/story.css == */
/* ── Story Focus View ──────────────────────────────────────── */

.story-focus {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0 60px;
}

/* Header */

.sf-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.sf-topbar-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sf-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-4);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: color 0.14s;
}

.sf-back:hover {
    color: var(--text-1);
}

.sf-project-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sf-project-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sf-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.04em;
    line-height: 1.2;
    word-break: break-word;
}

.sf-id-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 999px;
    min-height: 32px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px var(--surface-2);
    cursor: pointer;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

.sf-id-chip:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
}

.sf-id-chip.is-copied {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 36%, transparent);
    background: color-mix(in srgb, var(--success) 10%, var(--surface-2));
}

.sf-id-chip--story {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 14px;
    border-color: var(--border-strong);
    color: var(--text-1);
}

.sf-id-chip--task {
    padding: 6px 12px;
    font-size: 12.5px;
}

.sf-topbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    padding-top: 4px;
}

/* Stats strip */

.sf-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
}

.sf-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 10px;
    border-right: 1px solid var(--border-soft);
}

.sf-stat:last-child {
    border-right: none;
}

.sf-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sf-stat-value--accent {
    color: var(--accent);
}

.sf-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Progress bar */

.sf-progress-wrap {
    margin-bottom: 28px;
}

.sf-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sf-progress-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sf-progress-pct {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.sf-progress-bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.sf-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* Context strip (story_context) */

.sf-context {
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.6;
    white-space: pre-wrap;
    margin-bottom: 20px;
}

/* Section labels */

.sf-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
    margin-top: 24px;
}

.sf-section-label:first-of-type {
    margin-top: 0;
}

.sf-section-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 1px 8px;
    color: var(--text-4);
}

/* Step list */

.sf-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Individual step card */

.sf-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition:
        background 0.12s ease,
        border-color 0.14s ease,
        opacity 0.14s ease;
    cursor: default;
}

.sf-step:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.sf-step.is-route-target {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sf-step.sf-step--done {
    opacity: 0.5;
}

.sf-step.sf-step--done .sf-step-title {
    text-decoration: line-through;
    color: var(--text-4);
}

.sf-step.sf-step--active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

/* Status toggle button */

.sf-step-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        transform 0.1s ease;
    padding: 0;
    margin-top: 1px;
    position: relative;
}

.sf-step-check:hover {
    transform: scale(1.1);
}

.sf-step-check--offen {
    border-color: var(--border-strong);
    background: transparent;
}

.sf-step-check--offen:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.sf-step-check--in_arbeit {
    border-color: var(--warning, #f59e0b);
    background: color-mix(in srgb, var(--warning, #f59e0b) 15%, transparent);
}

.sf-step-check--in_arbeit::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--warning, #f59e0b);
}

.sf-step-check--erledigt {
    border-color: var(--success, #22c55e);
    background: var(--success, #22c55e);
}

.sf-step-check--erledigt::after {
    content: "✓";
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

/* Step body */

.sf-step-body {
    flex: 1;
    min-width: 0;
}

.sf-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin-bottom: 4px;
    word-break: break-word;
}

.sf-step-desc {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.55;
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

.sf-step-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sf-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    color: var(--text-3);
    white-space: nowrap;
}

.sf-step-badge--status-offen {
    color: var(--text-3);
}

.sf-step-badge--status-in_arbeit {
    color: var(--warning, #f59e0b);
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 30%, transparent);
    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
}

.sf-step-badge--status-erledigt {
    color: var(--success, #22c55e);
    border-color: color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
    background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
}

/* Step actions (edit button on hover) */

.sf-step-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
    margin-top: 1px;
}

.sf-step:hover .sf-step-actions {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    .sf-step-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

.sf-step-act-btn {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

.sf-step-act-btn:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-1);
}

.sf-step-act-btn.is-copied {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 36%, transparent);
    background: color-mix(in srgb, var(--success) 10%, var(--surface-2));
    font-size: 10px;
    font-weight: 800;
}

/* Done group toggle */

.sf-done-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    width: 100%;
    text-align: left;
    margin-top: 20px;
    transition: color 0.14s;
}

.sf-done-toggle:hover {
    color: var(--text-2);
}

.sf-done-chevron {
    font-size: 10px;
    transition: transform 0.18s ease;
}

.sf-done-toggle.is-open .sf-done-chevron {
    transform: rotate(90deg);
}

.sf-done-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

/* Empty state */

.sf-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-4);
    font-size: 14px;
    font-style: italic;
}

/* All done celebration */

.sf-all-done-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--success, #22c55e) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--success, #22c55e);
}

/* Responsive */

@media (max-width: 680px) {
    .sf-title {
        font-size: 20px;
    }

    .sf-stats {
        flex-wrap: wrap;
    }

    .sf-stat {
        flex: 1 1 calc(50% - 1px);
        border-bottom: 1px solid var(--border-soft);
    }

    .sf-stat:nth-child(2n) {
        border-right: none;
    }

    .sf-stat:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .sf-step {
        padding: 14px 14px;
        gap: 12px;
    }

    .sf-step-title {
        font-size: 14px;
    }

    .sf-topbar {
        flex-direction: column;
        gap: 12px;
    }

    .sf-topbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}