/* == 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(249, 115, 22, 0.07);
    --nav-hover-border:       rgba(249, 115, 22, 0.14);
    --nav-hover-color:        #111111;
    --nav-hover-icon-bg:      rgba(249, 115, 22, 0.10);
    --nav-hover-icon-border:  rgba(249, 115, 22, 0.18);
    --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;
    font-size: 16px;
    line-height: 1;
    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);
}

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

    body.sidebar-collapsed .nav-item {
        padding: 9px 0;
        justify-content: center;
        width: 100%;
    }

    body.sidebar-collapsed .nav-icon {
        margin-right: 0;
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

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

    body.sidebar-collapsed .nav-badge {
        display: 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;
    scrollbar-width: thin;
    gap: 18px;
}

.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: rgba(249, 115, 22, 0.26);
    border-color: rgba(249, 115, 22, 0.32);
    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: rgba(249, 115, 22, 0.28);
}

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

/* == 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/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-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.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: 32px;
    padding: 6px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    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;
}

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

.backlog-hint {
    font-size: 11.5px;
    color: var(--text-4);
    font-style: italic;
}

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

    .backlog-hint {
        display: none;
    }

    .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-tabs,
.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-tabs {
    transition-delay: 55ms;
}

.project-detail-shell > .project-panel {
    transition-delay: 110ms;
}

.project-detail-shell.is-ready > .proj-detail-topbar,
.project-detail-shell.is-ready > .project-tabs,
.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-tabs,
    .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;
}

.project-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    padding: 0 0 6px;
}

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

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

@media (max-width: 640px) {
    .project-tab { padding: 10px 12px; font-size: 13px; }
    .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 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-tab { justify-content: center; min-height: 44px; }
    .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; }
}

/* == 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-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 6px;
}

.history-hero-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--history-accent, var(--accent));
}

.history-hero-title {
    margin: 0 0 4px;
    font-size: 20px;
    color: var(--text-1);
}

.history-hero-sub {
    margin: 0;
    color: var(--text-3);
    font-size: 13px;
    max-width: 480px;
}

.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-hero-hint {
    margin: 10px 0 0;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.5;
}

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

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

.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-fb-binding {
    flex: 1 1 260px;
    margin: 0;
    color: var(--text-3);
    font-size: 12px;
}

.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-hint {
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.45;
}

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

.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-meta code { font-size: 11.5px; }

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

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

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

/* nav admin item accent */
.nav-item--admin {
    color: #a5b4fc;
}

.nav-item--admin.active,
.nav-item--admin:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #c7d2fe;
}

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

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

.skel {
    display: block;
    border-radius: 8px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.085) 50%,
            rgba(255, 255, 255, 0.035) 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%; }

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