/*
 * UWC CRM - Stylesheet according to UWC Design System v1.0 (~/.claude/uwc-design-system.md).
 * All values come from design tokens (:root), no one-off values in components.
 * Sizes in rem (follows browser zoom / user font size, WCAG 1.4.4).
 * Goal: light Apple-style design, WCAG 2.2 AA. CRM = desktop density (DS Sec. 4.2).
 *
 * Font: Inter self-hosted (GDPR, no CDN), woff2 under fonts/ (via
 * @fontsource/inter, latin subset). Missing glyphs fall back to the system stack.
 * font-display:swap -> text immediately visible, switches to Inter.
 */

/* Inter (self-hosted, latin) - Apple-like, consistent appearance on all devices */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ============================================================== Tokens */
:root {
    /* Primary palette */
    --color-accent: #0066D6;
    --color-accent-hover: #0052B3;
    --color-accent-light: #E8F2FF;
    --color-destructive: #FF3B30;
    --color-warning: #FF9500;
    --color-success: #34C759;

    /* Gray scale (Apple neutral) */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-400: #9CA3AF;
    --color-gray-600: #4B5563;
    --color-gray-900: #111827;
    --color-white: #FFFFFF;

    /* Semantic color tokens */
    --color-bg-page: var(--color-gray-50);
    --color-bg-surface: var(--color-white);
    --color-bg-subtle: var(--color-gray-100);
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-muted: var(--color-gray-400);
    --color-border: var(--color-gray-200);
    --color-border-focus: var(--color-accent);

    /* Status chip surfaces/text (DS Sec. 9.1.2, accessibility-compliant) */
    --color-status-ok-surface: #E6F4EA;
    --color-status-ok-text: #137333;   /* 5.95:1 on white */
    --color-status-err-surface: #FDECEA;
    --color-status-err-text: #C5221F;  /* 5.80:1 on white */
    /* "warning" variant (DS Sec. 3.7 mentions it, but it was not previously implemented).
       Reuses text --chart-status-due (#B26A00, 4.24:1 on white, already verified
       as text contrast in DS Sec. 9.1.2) instead of --color-warning
       (2.10:1, explicitly NOT suitable for text according to DS). */
    --color-status-warn-surface: #FFF4E5;
    --color-status-warn-text: #B26A00;  /* 4.24:1 on white */

    /* Typography (sub-token convention DS Sec. 2.2.1) */
    --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --text-xs-size: 0.75rem;   --text-xs-weight: 400;   --text-xs-line: 1.5;
    --text-sm-size: 0.875rem;  --text-sm-weight: 400;   --text-sm-line: 1.5;
    --text-base-size: 1rem;    --text-base-weight: 400; --text-base-line: 1.6;
    --text-lg-size: 1.125rem;  --text-lg-weight: 600;   --text-lg-line: 1.4;
    --text-xl-size: 1.25rem;   --text-xl-weight: 600;   --text-xl-line: 1.3;
    --text-2xl-size: 1.5rem;   --text-2xl-weight: 700;  --text-2xl-line: 1.25;
    --text-3xl-size: 1.875rem; --text-3xl-weight: 700;  --text-3xl-line: 1.2;

    /* Spacing (8px grid) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows (elevation) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-focus: 0 0 0 3px rgba(0, 102, 214, 0.35);

    /* Motion */
    --duration-fast: 100ms;
    --duration-base: 200ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-width: 240px;
}

/* ============================================================== Reset/Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-family-base);
    font-size: var(--text-base-size);
    font-weight: var(--text-base-weight);
    line-height: var(--text-base-line);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}

h1 {
    font-size: var(--text-3xl-size);
    font-weight: var(--text-3xl-weight);
    line-height: var(--text-3xl-line);
}

h2 {
    font-size: var(--text-2xl-size);
    font-weight: var(--text-2xl-weight);
    line-height: var(--text-2xl-line);
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* Visible focus ring on all interactive elements (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* ============================================================== App shell (signed in) */
.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-bg-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-4);
    gap: var(--space-6);
}

.brand {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    font-size: var(--text-lg-size);
    font-weight: 700;
    color: var(--color-text-primary);
}

.brand:hover {
    text-decoration: none;
    color: var(--color-text-primary);
}

.brand .brand-uwc {
    color: var(--color-accent);
}

.brand .brand-sub {
    font-size: var(--text-xs-size);
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm-size);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.nav-item:hover {
    background: var(--color-gray-50);
    color: var(--color-text-primary);
    text-decoration: none;
}

.nav-item.is-active {
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-weight: 600;
}
.nav-group {
    font-size: var(--text-xs-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 600;
    padding: var(--space-4) var(--space-3) var(--space-1);
}
.nav-group:first-child { padding-top: var(--space-2); }
.nav-ic { width: 16px; height: 16px; fill: currentColor; flex: none; }
.nav-label { flex: 1 1 auto; min-width: 0; }
.nav-count {
    font-size: var(--text-xs-size);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    padding: 1px 7px;
    border-radius: var(--radius-full);
}
.nav-item.is-active .nav-count { color: var(--color-accent); background: var(--color-bg-surface); }

.app-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 64px;
    padding: 0 var(--space-8);
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
}
.topbar-titel { margin: 0; font-size: var(--text-lg-size); font-weight: 700; letter-spacing: -0.01em; }
.topbar-suche { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); width: min(320px, 32vw); color: var(--color-text-muted); }
.topbar-suche input { border: none; background: none; font-family: inherit; font-size: var(--text-sm-size); color: var(--color-text-primary); width: 100%; }
.topbar-suche input:focus { outline: none; }
.topbar-suche:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.topbar .user { margin-left: auto; }
.topbar-suche ~ .user { margin-left: 0; }

.topbar .user {
    font-size: var(--text-sm-size);
    color: var(--color-text-secondary);
}

.topbar .user strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.content {
    flex-grow: 1;
    padding: var(--space-8);
    width: 100%;
    /* No fixed maximum width: the content (especially the list) is based on
       the window width - at high resolution, more is directly visible. Forms
       and detail pages limit themselves through the card max-width. */
    min-width: 0;
}

/* ============================================================== Auth shell (signed out) */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8);
}

.auth-card .brand {
    justify-content: center;
    margin-bottom: var(--space-6);
    font-size: var(--text-xl-size);
}

/* ============================================================== Card (DS Sec. 3.3) */
.card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

.card + .card {
    margin-top: var(--space-6);
}

.lead {
    font-size: var(--text-base-size);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6);
}

/* ============================================================== Button (DS Sec. 3.1) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;               /* BFSG touch target */
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm-size);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--duration-base) var(--easing-default),
                border-color var(--duration-base) var(--easing-default);
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    text-decoration: none;
    color: var(--color-white);
}

.btn-secondary {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background: var(--color-gray-50);
    text-decoration: none;
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
}

.btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-text-primary);
    text-decoration: none;
}

.btn-block {
    width: 100%;
}

/* ============================================================== Form (DS Sec. 3.2) */
.field {
    margin-bottom: var(--space-4);
}

.field label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm-size);
    font-weight: 500;
    color: var(--color-text-primary);
}

.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-base-size);
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
}

.field textarea {
    min-height: 96px;
    resize: vertical;
}

.field input:disabled {
    background: var(--color-gray-50);
    color: var(--color-text-secondary);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

/* Error message (DS Sec. 3.2 / 5 Understandable) */
.form-error {
    display: block;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-status-err-surface);
    color: var(--color-status-err-text);
    font-size: var(--text-sm-size);
}

/* Success message (e.g. "Your password was changed") */
.form-ok {
    display: block;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-status-ok-surface);
    color: var(--color-status-ok-text);
    font-size: var(--text-sm-size);
}

/* Password field with eye toggle: field takes full width, button
   sits on the right inside the field. */
.pw-wrap {
    position: relative;
    display: block;
}
.pw-wrap input {
    /* Space for the eye button on the right. */
    padding-right: calc(var(--space-4) + 28px);
}
.pw-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.pw-toggle:hover { color: var(--color-text-primary); }
.pw-toggle:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.pw-toggle .ic {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
/* Default: open eye visible, crossed-out eye hidden. With
   aria-pressed=true (password visible), the reverse. */
.pw-toggle .ic-eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .ic-eye { display: none; }
.pw-toggle[aria-pressed="true"] .ic-eye-off { display: inline; }

/* Help/additional link below the auth form + step list. */
.auth-hilfe {
    margin-top: var(--space-4);
    margin-bottom: 0;
    text-align: center;
    font-size: var(--text-sm-size);
}
.auth-schritte {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    font-size: var(--text-sm-size);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ============================================================== Table (DS Sec. 3.6) */
.table-wrap {
    /* Bidirectionally scrollable grid area with limited height: this keeps the
       horizontal scrollbar always visible at the bottom (not only after
       50 rows) and keeps the header row at the top while scrolling. */
    overflow: auto;
    max-height: calc(100vh - 230px);
}

.table {
    /* Grows with the content (horizontal scrolling with many columns), but
       fills at least the width of the scrollable container. */
    width: max-content;
    min-width: 100%;
    border-collapse: separate;   /* for sticky header without border gaps */
    border-spacing: 0;
    font-size: var(--text-sm-size);
}

.table td, .table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   /* applies only when a column width is set */
}

/* Header row stays at the top during vertical scrolling. */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-gray-50);
}
/* Action column (chevron) fixed on the left AND (in the header) at the top. */
.table thead .spalte-oeffnen { z-index: 3; }

/* Column header: reorderable (drag) + width draggable (divider at right edge). */
.table th.th-spalte { position: sticky; }   /* sticky establishes the reference for the divider */
.table th.th-spalte[draggable="true"] { cursor: grab; }
.table th.th-dragging { opacity: 0.45; }
.table th.th-drop-links { box-shadow: inset 3px 0 0 var(--color-accent); }
.table th.th-drop-rechts { box-shadow: inset -3px 0 0 var(--color-accent); }
.th-inhalt { display: inline-block; pointer-events: auto; }
.col-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}
.col-resize:hover { background: var(--color-accent); opacity: 0.4; }

/* Expand/collapse sidebar (full workspace) */
.app.nav-aus .sidebar { display: none; }
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.nav-toggle:hover { background: var(--color-gray-50); color: var(--color-text-primary); }

/* Action column ("Open") remains fixed on the left during horizontal scrolling
   and always accessible. */
.spalte-oeffnen {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 1%;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    background: var(--color-bg-surface);
}
.table thead .spalte-oeffnen {
    background: var(--color-gray-50);
}
.table tbody tr:hover .spalte-oeffnen {
    background: var(--color-gray-50);
}
.oeffnen-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
}
.oeffnen-link:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

/* Inline editing: focused cell + cell editor */
.zelle-edit { cursor: pointer; }
.zelle-edit:hover { background: var(--color-gray-50); }
.zelle-fokus {
    box-shadow: inset 0 0 0 2px var(--color-accent);
    background: var(--color-accent-light);
}
.zelle-editor {
    width: 100%;
    box-sizing: border-box;
    min-width: 140px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm-size);
    font-family: inherit;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}

/* ============================================================== List engine (Prospects) */
.listen-layout {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

/* Left views panel (expandable/collapsible) */
.ansichten-panel {
    width: 220px;
    flex-shrink: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}
.ansichten-panel > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-primary);
    white-space: nowrap;
}
.ansichten-panel > summary::-webkit-details-marker { display: none; }
/* Open: arrow to the left (for sideward collapsing). Closed: arrow to the right
   (for expanding); the panel then shrinks to a narrow strip and the
   list becomes wider. */
.ansichten-panel[open] > summary::before { content: "‹ "; color: var(--color-text-muted); }
.ansichten-panel:not([open]) > summary::before { content: "›"; color: var(--color-text-muted); }
.ansichten-panel:not([open]) {
    width: auto;
}
.ansichten-panel:not([open]) .ansichten-label {
    display: none;
}
.ansichten-liste { margin-top: var(--space-2); }
.ansichten-liste a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm-size);
    color: var(--color-text-secondary);
}
.ansichten-liste a:hover {
    background: var(--color-gray-50);
    color: var(--color-text-primary);
    text-decoration: none;
}
.ansichten-liste a.is-active {
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-weight: 500;
}
.ansichten-titel {
    margin: var(--space-4) 0 var(--space-1);
    padding: 0 var(--space-3);
    font-size: var(--text-xs-size);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.ansichten-aktionen {
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2);
}

.listen-main {
    flex-grow: 1;
    min-width: 0; /* allows the table to scroll horizontally in the flex child */
}
.listen-kopf {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.listen-kopf h1 { margin: 0; }

/* Slim toolbar with menu buttons */
.toolbar {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin: var(--space-4) 0;
}
.dd { position: relative; }
.dd > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--text-sm-size);
    font-weight: 500;
    color: var(--color-text-primary);
}
.dd > summary::-webkit-details-marker { display: none; }
.dd[open] > summary {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}
.dd-badge {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: var(--text-xs-size);
    font-weight: 600;
}
.dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 260px;
    max-height: 70vh;
    overflow: auto;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
}
/* Long field selection scrolls on its own; the action button below remains visible. */
.dd-feldliste {
    max-height: 42vh;
    overflow-y: auto;
    margin-bottom: var(--space-2);
}
.dd-fuss {
    position: sticky;
    bottom: calc(-1 * var(--space-4));
    margin: var(--space-2) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
}
.dd-fuss .btn { width: 100%; }

/* --- Filter blocks (SmartSuite style: (A AND B) OR (C AND D)) --- */
/* The filter menu is wide; open right-aligned so it does not run out of the
   viewport, and never make it wider than the screen. */
.dd-menu.filter-menu {
    left: auto;
    right: 0;
    max-width: calc(100vw - 2 * var(--space-4));
}
.filter-menu .filter-bloecke-verkn {
    font-size: var(--text-sm-size);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.filter-menu .filter-bloecke-verkn select {
    width: auto;
    display: inline-block;
    margin-left: var(--space-1);
}
.filter-bloecke {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Make the connection BETWEEN the blocks visible (separator label). */
.filter-block + .filter-block {
    position: relative;
    margin-top: var(--space-3);
}
.filter-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: 0;
    background: var(--color-bg-subtle, var(--color-bg-surface));
}
.filter-block-kopf {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.filter-block-titel {
    font-size: var(--text-sm-size);
    color: var(--color-text-muted);
}
.filter-block .filter-innen-verkn { width: auto; display: inline-block; }
.filter-block-weg { margin-left: auto; padding: 2px var(--space-2); }
.filter-zeilen {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.filter-zeile {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.filter-zeile .filter-feld { flex: 1.2; min-width: 0; }
.filter-zeile .filter-op { flex: 1; min-width: 0; }
.filter-zeile .filter-wert { flex: 1; min-width: 0; }
.filter-zeile-weg {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    line-height: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}
.filter-zeile-weg:hover { color: var(--color-danger, #c0392b); border-color: currentColor; }
.filter-zeile-neu { margin-top: var(--space-2); padding: 2px var(--space-2); }
.filter-fuss {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-3);
}

/* --- Administration -> master list --- */
.admin-seite { max-width: 860px; }
.admin-seite .card { margin-bottom: var(--space-4); }
.admin-info p { margin: 0 0 var(--space-3); }
.admin-bereich-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.admin-bereich-kopf h2 { margin: 0; font-size: var(--text-lg-size); }
.admin-ansichten { list-style: none; margin: 0; padding: 0; }
.admin-ansichten li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
}
.admin-ansichten li:first-child { border-top: 0; }
.admin-ansichten a { font-weight: 600; }

@media (max-width: 900px) {
    .listen-layout { flex-direction: column; }
    .ansichten-panel { width: 100%; }
}

/* ============================================================== Detail view (two-part) */
.detail-layout {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}
.detail-haupt {
    flex-grow: 1;
    min-width: 0;
}
.detail-historie {
    width: 380px;
    flex-shrink: 0;
}
.feld-grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.feld-grid-1 { grid-template-columns: 1fr; }
.feld-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feld-grid .field { margin: 0; }
.feld-breit { grid-column: 1 / -1; }
.abschnitt-titel {
    margin: var(--space-5) 0 var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-lg-size);
}

/* Layout designer (drag and drop) */
.layout-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 640px;
}
.ll-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.ll-item.ll-drag { opacity: 0.5; }
.ll-trenner {
    background: var(--color-surface-subtle, #f5f7fa);
    border-style: dashed;
    flex-wrap: wrap;
}
.ll-mark {
    font-weight: 600;
    font-size: var(--text-sm-size);
    color: var(--color-text-secondary);
}
.ll-label { flex-grow: 1; }
.griff {
    cursor: grab;
    color: var(--color-text-secondary);
    font-size: var(--text-lg-size);
    user-select: none;
}
.ll-trenner .tr-titel { flex-grow: 1; min-width: 140px; }

/* Email/phone: input field + click icon (mail/dialer) side by side */
.feld-mit-launch {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}
.feld-mit-launch input { flex: 1 1 auto; min-width: 0; }
.feld-launch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-accent);
    font-size: 18px;
    text-decoration: none;
}
.feld-launch:hover { background: var(--color-accent-light); text-decoration: none; }

.historie-eintrag {
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) 0;
}
.historie-kopf {
    font-size: var(--text-xs-size);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

@media (max-width: 1000px) {
    .detail-layout { flex-direction: column; }
    .detail-historie { width: 100%; }
    .feld-grid-2, .feld-grid-3 { grid-template-columns: 1fr; }
}

.table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-xs-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--color-gray-50);
}

.table .muted {
    color: var(--color-text-muted);
}

/* ============================================================== Badge/Status chip (DS Sec. 3.7) */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs-size);
    font-weight: 500;
    white-space: nowrap;
}

.badge-neutral {
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
}

.badge-ok {
    background: var(--color-status-ok-surface);
    color: var(--color-status-ok-text);
}

.badge-err {
    background: var(--color-status-err-surface);
    color: var(--color-status-err-text);
}

.badge-warn {
    background: var(--color-status-warn-surface);
    color: var(--color-status-warn-text);
}

/* ============================================================== Empty state (DS Sec. 3.9) */
.empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-secondary);
}

.empty h2 {
    font-size: var(--text-xl-size);
    font-weight: var(--text-xl-weight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.empty p {
    font-size: var(--text-base-size);
    margin: 0 auto;
    max-width: 42ch;
}

/* ============================================================== Responsive (CRM up to 1024px, then nav at top) */
@media (max-width: 768px) {
    .app {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-3) var(--space-4);
        gap: var(--space-4);
    }

    .nav {
        flex-direction: row;
    }

    .content {
        padding: var(--space-6) var(--space-4);
    }

    .topbar {
        padding: 0 var(--space-4);
    }
}

/* ============================================================== reduced motion (DS Sec. 2.6) */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =====================================================================
   SmartSuite adoption: Organizations (list + detail according to draft)
   ===================================================================== */

.org-suche { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.org-suche input[type="search"] { flex: 1; max-width: 420px; }

/* Relationship status as chips (color + text, never color alone) */
.org-chip { display: inline-flex; align-items: center; font-size: var(--text-xs-size); font-weight: 600; padding: 2px 9px; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; }
.org-chip.chip-kunde { background: var(--color-status-ok-surface); color: var(--color-status-ok-text); }
.org-chip.chip-boarding { background: var(--color-accent-light); color: var(--color-accent); }
.org-chip.chip-partner { background: #F0EBFF; color: #5A3FC0; }
.org-chip.chip-lead { background: #FFF3E0; color: #8A5300; border-color: #F3D9AE; }
.org-chip.chip-archiv { background: var(--color-gray-100); color: var(--color-gray-600); }

/* Detail page */
.org-crumb { color: var(--color-text-muted); font-size: var(--text-sm-size); margin: 0 0 var(--space-3); }
.org-crumb a { color: var(--color-text-secondary); text-decoration: none; }
.org-head { margin-bottom: var(--space-4); }
.org-head-id { display: flex; gap: var(--space-3); align-items: flex-start; }
/* Record tab bar for switching record views (ELLE-118). */
.record-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin: 0 0 var(--space-4); }
.record-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); font-size: var(--text-sm-size); font-weight: 600; color: var(--color-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.record-tab:hover { color: var(--color-text-primary); }
.record-tab:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.record-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.org-avatar { width: 46px; height: 46px; border-radius: var(--radius-lg); background: var(--color-bg-subtle); border: 1px solid var(--color-border); display: grid; place-items: center; color: var(--color-text-secondary); flex: none; }
.org-title { font-size: var(--text-2xl-size); font-weight: var(--text-2xl-weight); line-height: var(--text-2xl-line); margin: 0; }
.org-sub { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-1); }
.org-sub .muted { font-size: var(--text-sm-size); }

/* Two columns: fixed tiles on the left, flexible history panel on the right */
.org-detail-body { display: grid; grid-template-columns: 544px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.org-col-left { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.org-card { padding: 0; }
.org-card-h { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.org-card-h h3 { margin: 0; font-size: var(--text-xs-size); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 600; }
.org-sensibel { margin-left: auto; font-size: var(--text-xs-size); color: var(--color-text-muted); font-weight: 500; }
.org-card-b { padding: var(--space-2) var(--space-4) var(--space-3); }
.org-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); }
.org-field { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-bg-subtle); min-width: 0; }
.org-field.breit { grid-column: 1 / -1; }
.org-field .lbl { font-size: var(--text-xs-size); color: var(--color-text-muted); margin-bottom: 2px; }
.org-field .v { font-size: var(--text-sm-size); color: var(--color-text-primary); word-break: break-word; }
.org-secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--text-sm-size); background: var(--color-bg-subtle); padding: 2px 8px; border-radius: var(--radius-sm); }

/* Emails per record */
.org-mails { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.org-mail { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-border); }
.org-mail.ein { border-left-color: var(--color-accent); }
.org-mail.aus { border-left-color: var(--color-success); }
.org-mail-top { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs-size); color: var(--color-text-muted); }
.org-mail-dir { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.org-mail-betreff { font-weight: 600; font-size: var(--text-sm-size); color: var(--color-text-primary); margin: 2px 0; word-break: break-word; }
.org-mail-peer { font-size: var(--text-xs-size); color: var(--color-text-secondary); word-break: break-word; }
.org-mail-snip { font-size: var(--text-xs-size); color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }

.org-col-hist { position: sticky; top: var(--space-4); }
.org-hist-platzhalter { padding: var(--space-6); }
.org-hist-platzhalter h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg-size); font-weight: var(--text-lg-weight); }

@media (max-width: 1180px) {
    .org-detail-body { grid-template-columns: 1fr; }
    .org-col-left { max-width: 640px; }
    .org-col-hist { position: static; }
    .org-hist { max-height: none; }
    .org-stream { max-height: 620px; }
}

/* Icons */
.ic { width: 16px; height: 16px; fill: currentColor; flex: none; }
.ic-lg { width: 22px; height: 22px; fill: currentColor; }
.org-card-h .ic { color: var(--color-text-muted); }

/* Contact channels */
.org-kk { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-bg-subtle); }
.org-kk:last-child { border-bottom: 0; }
.org-kk-ic { width: 30px; height: 30px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; }
.org-kk-ic.tel { background: #E8F2FF; color: #0066D6; }
.org-kk-ic.mail { background: #E4F6F8; color: #0E7C8C; }
.org-kk-ic.addr { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.org-kk-main { min-width: 0; display: flex; flex-direction: column; }
.org-kk-main .v { font-size: var(--text-sm-size); }
.org-kk-main .m { font-size: var(--text-xs-size); color: var(--color-text-muted); }
/* Preferred star: ALWAYS specify the size (otherwise the SVG renders at its original size) */
.org-kk-star { width: 15px; height: 15px; margin-left: auto; color: #B26A00; flex: none; }

/* Contacts */
.org-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-bg-subtle); }
.org-person:last-child { border-bottom: 0; }
.org-pav { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-accent-light); color: var(--color-accent); display: grid; place-items: center; font-weight: 600; font-size: var(--text-xs-size); flex: none; }
.org-person-main { min-width: 0; display: flex; flex-direction: column; }
.org-person-main .pn { font-size: var(--text-sm-size); font-weight: 500; }
.org-person-main .pm { font-size: var(--text-xs-size); color: var(--color-text-muted); }
.org-person .badge { margin-left: auto; }

/* History panel */
.org-hist { padding: 0; display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--space-4)); }
.org-hist-h { padding: var(--space-3) var(--space-4) 0; }
.org-hist-top { display: flex; align-items: center; gap: var(--space-2); }
.org-hist-top h2 { margin: 0; font-size: var(--text-lg-size); font-weight: var(--text-lg-weight); }
.org-hist-stat { margin-left: auto; font-size: var(--text-xs-size); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.org-hist-hint { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs-size); color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-3); }

.org-stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-3) var(--space-4) var(--space-4); scrollbar-width: thin; scrollbar-color: var(--color-gray-200) transparent; }
.org-stream::-webkit-scrollbar { width: 12px; }
.org-stream::-webkit-scrollbar-thumb { background: var(--color-gray-200); border-radius: 8px; border: 3px solid var(--color-bg-surface); }
.org-stream::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); }

.org-daysep { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.org-daysep span { font-size: var(--text-xs-size); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.org-daysep .ln { height: 1px; background: var(--color-border); flex: 1; }

/* History entry (color-coded by type) */
.org-ev { display: grid; grid-template-columns: 34px 1fr; gap: var(--space-2); margin-bottom: var(--space-2); align-items: start; }
.org-ev.t-call { --tc: #0066D6; } .org-ev.t-mail { --tc: #0E7C8C; }
.org-ev.t-termin { --tc: #6A3FD0; } .org-ev.t-note { --tc: #6B7280; }
.org-ev.t-comment { --tc: #C2255C; } .org-ev.t-task { --tc: #B26A00; }
.org-ev-ic { width: 34px; height: 34px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--tc); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 12%, transparent); }
/* Tile subtly tinted in the type color (as in the draft) + colored bar on the left */
.org-ev-c { min-width: 0; background: color-mix(in srgb, var(--tc) 6%, var(--color-bg-surface)); border: 1px solid var(--color-border); border-left: 3px solid var(--tc); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.org-ev-t { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.org-ev-t .k { font-size: var(--text-sm-size); font-weight: 600; }
.org-ev-m { font-size: var(--text-xs-size); color: var(--color-text-secondary); margin-top: 2px; }
.org-etype { color: var(--tc); font-weight: 600; }
.org-ev-b { font-size: var(--text-sm-size); color: var(--color-text-secondary); margin-top: var(--space-1); white-space: pre-line; }
.org-dir { font-size: var(--text-xs-size); color: var(--color-text-muted); }
/* Origin line of an entry: the "KI" mark is a small chip; system entries are shown restrained. */
.org-ev-who { color: var(--color-text-muted); }
.org-ki { font-weight: 600; padding: 1px 8px; border-radius: var(--radius-full); color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-surface)); }
.org-ev.org-system { opacity: .7; }
.org-artfilter { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs-size); }
/* Email direction visible: received (envelope, teal) vs. sent (paper plane, green).
   --tc automatically colors the icon, left edge, and bubble tint; the chip picks up the accent color. */
.org-ev.t-mail.dir-ein { --tc: #0E7C8C; }
.org-ev.t-mail.dir-aus { --tc: #157347; }
.org-ev.t-mail .org-dir { font-weight: 600; padding: 1px 8px; border-radius: var(--radius-full);
    color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, var(--color-bg-surface)); }

/* Three card sizes, switched by clicking:
   Default = short (header + meta + 2 lines); .sz-1 = top line only; .sz-3 = full. */
.org-ev-b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Full: text not truncated (reply form is shown separately). */
.org-ev.sz-3 .org-ev-b,
.org-todo.sz-3 .org-ev-b { -webkit-line-clamp: unset; overflow: visible; }
/* Top line only: hide meta + text. */
.org-ev.sz-1 .org-ev-m,
.org-ev.sz-1 .org-ev-b,
.org-todo.sz-1 .org-ev-m,
.org-todo.sz-1 .org-ev-b { display: none; }
/* Cards are clickable for changing size (JS excludes interactive elements). */
.org-ev .org-ev-c, .org-todo { cursor: pointer; }
/* IMPORTANT: .org-ev (display:grid) and .org-todo (display:flex) override
   the standard [hidden]{display:none}. So hiding via the hidden attribute (category/
   completion filters, search) requires higher specificity here. */
.org-ev[hidden], .org-todo[hidden] { display: none !important; }
/* Empty notice when filters/search leave nothing. */
.org-leer { padding: var(--space-5); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm-size); }
/* Global expand/collapse button in the panel header. */
.org-hist-toggle {
    margin-left: auto;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-xs-size);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
}
.org-hist-toggle:hover { color: var(--color-text-primary); border-color: var(--color-accent); }

/* Reply form per email: visible only at full card size (sz-3). */
.org-reply { display: none; margin-top: var(--space-2); }
.org-ev.sz-3 .org-reply { display: block; }
.org-reply > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: var(--text-xs-size); font-weight: 600; color: var(--color-accent); list-style: none; }
.org-reply > summary::-webkit-details-marker { display: none; }
.org-reply > summary .ic { width: 14px; height: 14px; }
.org-reply-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.org-reply-form .org-comp-feld { display: flex; flex-direction: column; gap: 2px; }
.org-reply-form .org-comp-feld .lbl { font-size: var(--text-xs-size); color: var(--color-text-muted); }
.org-reply-form input, .org-reply-form textarea { width: 100%; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--text-sm-size); }
.org-reply-form .org-comp-fuss { display: flex; align-items: center; gap: var(--space-3); }
.org-reply-hint { font-size: var(--text-xs-size); color: var(--color-status-warn-text); }

/* To-do card */
.org-todo { display: flex; gap: var(--space-2); align-items: flex-start; border: 1px solid #F3D9AE; background: #FFFBF4; border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
.org-todo.overdue { border-color: #F3C0BE; background: #FEF6F5; }
/* Organization/process tasks: neutral instead of action amber, with "Orga" marker.
   This clearly distinguishes real to-dos (amber) from process items (neutral). */
.org-todo.art-orga { border-color: #DCE0E6; background: #F7F8FA; }
.org-orga-badge { font-size: var(--text-xs-size); font-weight: 600; padding: 1px 7px; border-radius: var(--radius-full); background: #E4E8EF; color: #47536B; }
/* Completed tasks (process/boarding check): green check, muted, struck through. */
.org-todo.erledigt { border-color: #D7E3D9; background: #F5F9F6; }
.org-todo.erledigt .org-todo-t .k { color: var(--color-text-muted); text-decoration: line-through; }
.org-cbx-done { display: grid; place-items: center; border-color: #2E7D46; background: #2E7D46; color: #fff; }
.org-cbx-done .ic { width: 13px; height: 13px; }
.org-due-done { background: #E2F0E5; color: #2E7D46; }
.org-cbx { width: 20px; height: 20px; border: 2px solid var(--color-gray-400); border-radius: 6px; background: var(--color-bg-surface); flex: none; margin-top: 1px; }
.org-todo-b { min-width: 0; }
.org-todo-t { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.org-todo-t .k { font-size: var(--text-sm-size); font-weight: 600; }
.org-due { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs-size); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: #FBEBD0; color: #8A5300; }
.org-todo.overdue .org-due { background: #FADAD8; color: #B4231F; }
.org-pruef { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs-size); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-accent-light); color: var(--color-accent); }

/* Input (new entry) - collapsible so open to-dos remain visible */
.org-comp-box { margin: var(--space-2) 0 var(--space-3); }
.org-comp-box > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm-size); font-weight: 600; color: var(--color-accent); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-surface); list-style: none; }
.org-comp-box > summary::-webkit-details-marker { display: none; }
.org-comp-box > summary:hover { background: var(--color-accent-light); }
.org-comp-box[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.org-composer { border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-3); background: var(--color-bg-page); }
/* hidden must override the composer's display rules (tab/list switching
   with and without JavaScript). */
.org-composer [hidden] { display: none !important; }
/* Type tabs (visible only with JavaScript) */
.org-comp-tabs { display: flex; gap: 2px; background: var(--color-bg-subtle); border-radius: var(--radius-md); padding: 3px; margin-bottom: var(--space-3); }
.org-comp-tab { flex: 1; border: none; background: none; font-family: inherit; font-size: var(--text-xs-size); font-weight: 600; color: var(--color-text-secondary); padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.org-comp-tab:hover { color: var(--color-text-primary); }
.org-comp-tab[aria-selected="true"] { background: var(--color-bg-surface); color: var(--color-accent); box-shadow: var(--shadow-xs); }
.org-comp-zeile { display: flex; gap: var(--space-3); }
.org-comp-zeile > label { flex: 1; min-width: 0; }
.org-composer label { display: block; margin-bottom: var(--space-2); }
.org-composer .lbl { display: block; font-size: var(--text-xs-size); color: var(--color-text-secondary); font-weight: 500; margin-bottom: 2px; }
.org-composer select,
.org-composer input[type="text"],
.org-composer input[type="date"],
.org-composer textarea { width: 100%; font-family: inherit; font-size: var(--text-sm-size); color: var(--color-text-primary); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.org-composer textarea { resize: vertical; }
.org-composer select:focus, .org-composer input:focus, .org-composer textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.org-comp-fuss { display: flex; justify-content: flex-end; margin-top: var(--space-1); }

/* Panel control bar: ONE row - category toggles (on/off), sorting, search. */
.org-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.org-kats, .org-sortbtns { display: inline-flex; gap: 2px; background: var(--color-bg-subtle); border-radius: var(--radius-md); padding: 3px; }
.org-kat, .org-sortb { font-size: var(--text-xs-size); font-weight: 600; color: var(--color-text-secondary); padding: 5px 11px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; }
.org-kat:hover, .org-sortb:hover { color: var(--color-text-primary); }
.org-kat[aria-pressed="true"] { background: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: var(--shadow-xs); }
.org-kat[aria-pressed="false"] { opacity: 0.5; text-decoration: line-through; }
.org-sortb.is-active { background: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: var(--shadow-xs); }
.org-suche { flex: 1 1 110px; min-width: 88px; font-size: var(--text-xs-size); padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--color-text-primary); }
.org-suche::placeholder { color: var(--color-text-muted); }

/* Feedback */
.org-meldung { font-size: var(--text-sm-size); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin: var(--space-2) 0; }
.org-meldung.ok { background: var(--color-status-ok-surface); color: var(--color-status-ok-text); }
.org-meldung.fehler { background: var(--color-status-err-surface); color: var(--color-status-err-text); }

/* Mark complete (button in to-do) */
.org-cbx-form { margin: 0; flex: none; }
button.org-cbx { cursor: pointer; padding: 0; }
button.org-cbx:hover { border-color: var(--color-accent); background: var(--color-accent-light); }
button.org-cbx:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Inactive navigation items (functionality coming) */
.nav-item.disabled { color: var(--color-text-muted); cursor: default; }
.nav-item.disabled:hover { background: none; color: var(--color-text-muted); }
.nav-bald { font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-bg-subtle); padding: 1px 6px; border-radius: var(--radius-full); }

/* Grouping in lists (SmartSuite-like) */
.gruppe-kopf td { background: var(--color-bg-subtle); padding: 0; border-bottom: 1px solid var(--color-border); }
.gruppe-toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; border: none; background: none; font-family: inherit; font-size: var(--text-sm-size); font-weight: 600; color: var(--color-text-primary); padding: var(--space-2) var(--space-3); cursor: pointer; text-align: left; }
.gruppe-toggle:hover { background: var(--color-gray-100); }
.gruppe-caret { color: var(--color-text-muted); display: inline-block; }
.gruppe-toggle[aria-expanded="false"] .gruppe-caret { transform: rotate(-90deg); }
.gruppe-label { color: var(--color-text-secondary); font-weight: 500; }
.gruppe-anzahl { margin-left: var(--space-1); font-size: var(--text-xs-size); color: var(--color-text-muted); background: var(--color-bg-surface); padding: 1px 8px; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }
tr.zeile-zu { display: none; }

/* Row height S/M/XL (master list) */
.dichte-wahl { display: inline-flex; background: var(--color-bg-subtle); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.dichte-wahl button { border: none; background: none; font-family: inherit; font-size: var(--text-xs-size); font-weight: 600; color: var(--color-text-secondary); padding: 5px 10px; border-radius: 6px; cursor: pointer; min-width: 30px; }
.dichte-wahl button:hover { color: var(--color-text-primary); }
.dichte-wahl button[aria-selected="true"] { background: var(--color-bg-surface); color: var(--color-accent); box-shadow: var(--shadow-xs); }
/* S = compact (single-line), M = standard, XL = tall + wrap long text */
.table.dichte-s tbody td { padding-top: 4px; padding-bottom: 4px; }
.table.dichte-s tbody td .zelle-inhalt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table.dichte-xl tbody td { padding-top: var(--space-3); padding-bottom: var(--space-3); vertical-align: top; }
.table.dichte-xl tbody td .zelle-inhalt { display: block; white-space: normal; overflow: visible; }

/* ============================================================== Table/Kanban display + list length */
.darstellung-wahl, .laenge-wahl { display: inline-flex; background: var(--color-bg-subtle); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.darstellung-wahl a, .laenge-wahl a { font-size: var(--text-xs-size); font-weight: 600; color: var(--color-text-secondary); padding: 5px 12px; border-radius: 6px; }
.darstellung-wahl a:hover, .laenge-wahl a:hover { color: var(--color-text-primary); text-decoration: none; }
.darstellung-wahl a.is-active, .laenge-wahl a.is-active { background: var(--color-bg-surface); color: var(--color-accent); box-shadow: var(--shadow-xs); }
/* List length has more levels than display - narrower buttons. */
.laenge-wahl a { padding: 5px 8px; }
.laenge-wahl .laenge-titel { font-size: var(--text-xs-size); color: var(--color-text-secondary); padding: 5px 6px 5px 8px; }

/* --- Kanban board --- */
.kanban {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: var(--space-3);
}
.kanban-spalte {
    flex: 0 0 280px;
    max-width: 280px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 240px);
}
.kanban-spalten-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
}
.kanban-spalten-titel { font-weight: 600; font-size: var(--text-sm-size); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-spalten-anzahl {
    flex: 0 0 auto;
    min-width: 20px;
    text-align: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-xs-size);
    font-weight: 600;
}
.kanban-karten {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    overflow-y: auto;
    min-height: 40px;
    flex: 1 1 auto;
}
.kanban-karte {
    display: block;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: var(--shadow-xs);
    color: inherit;
}
.kanban-karte:hover { text-decoration: none; box-shadow: var(--shadow-sm); border-color: var(--color-accent); }
.kanban-karte[draggable="true"] { cursor: grab; }
.kanban-karte.dragging { opacity: 0.5; }
.karte-titel { font-weight: 600; font-size: var(--text-sm-size); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.karte-feld { display: flex; gap: var(--space-2); font-size: var(--text-xs-size); line-height: 1.5; }
.karte-feld .k-label { flex: 0 0 40%; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-feld .k-wert { flex: 1 1 60%; color: var(--color-text-secondary); min-width: 0; }
.karte-feld .k-wert .badge { font-size: var(--text-xs-size); }
/* Highlight the target column while dragging. */
.kanban-spalte.drop-ziel { border-color: var(--color-accent); background: var(--color-accent-light); }

/* =====================================================================
   Dashboard (home page)
   ===================================================================== */
.dash { max-width: 1080px; }
.dash-head { margin-bottom: var(--space-6); }
.dash-head h1 { margin: 0 0 var(--space-1); font-size: var(--text-2xl-size); font-weight: var(--text-2xl-weight); }
.dash-head .lead { margin: 0; }
.dash-sektion { margin-top: var(--space-8); }
.dash-h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-lg-size); font-weight: var(--text-lg-weight); }
.dash-tag { font-size: var(--text-xs-size); font-weight: 600; color: var(--color-accent); background: var(--color-accent-light); padding: 2px 9px; border-radius: var(--radius-full); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.dash-tile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--color-text-primary); }
a.dash-tile:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent-light); text-decoration: none; color: var(--color-text-primary); }
.dash-tile.disabled { opacity: 0.7; box-shadow: none; background: var(--color-bg-page); }
.dash-ic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-accent-light); color: var(--color-accent); display: grid; place-items: center; flex: none; }
.dash-ic .ic { width: 20px; height: 20px; }
.dash-tile.disabled .dash-ic { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.dash-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dash-tx .t { font-weight: 600; font-size: var(--text-base-size); }
.dash-tx .u { font-size: var(--text-xs-size); color: var(--color-text-muted); }
.dash-pfeil { color: var(--color-text-muted); flex: none; }
.dash-bald { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); background: var(--color-bg-subtle); padding: 1px 7px; border-radius: var(--radius-full); flex: none; }

/* Detail pages: always-editable fields (ELLE-125) */
.detail-edit-field .lbl { display: block; }
.detail-edit-field .v input, .detail-edit-field .v select, .detail-edit-field .v textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--text-sm-size); color: var(--color-text-primary); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); }
.detail-edit-field .v textarea { resize: vertical; }
.detail-edit-field .v input:focus, .detail-edit-field .v select:focus, .detail-edit-field .v textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.detail-edit-field .v .detail-input.is-invalid { border-color: var(--color-status-err-text); background: var(--color-status-err-surface); }
.detail-field-status { display: block; font-size: var(--text-xs-size); color: var(--color-text-muted); }
.detail-field-status.is-ok { color: var(--color-status-ok-text); }
.detail-field-status.is-error { color: var(--color-status-err-text); }
.detail-field-status:empty { display: none; }
/* File storage card (ELLE-121) */
.org-card-actions { margin-left: auto; font-size: var(--text-sm-size); }
.file-upload-form label { display: block; margin: var(--space-2) 0; }
.file-upload-form .lbl { display: block; font-size: var(--text-xs-size); color: var(--color-text-secondary); font-weight: 500; margin-bottom: 2px; }
.file-upload-form select, .file-upload-form input[type="file"] { max-width: 100%; }