/* Ritmano Staff-Backend — eingeloggter Bereich uebernimmt die Marken-Tokens aus docs/styling.md
   (semantische Namen --brand/--ink/...), bleibt aber ein schlankes Admin-Layout. Eigenes Bundle,
   kein gemeinsames Stylesheet mit Ritmano.Web (3b). Die LOGIN-Maske ist bewusst NEUTRAL (kein
   Brand, keine Hinweise nach aussen) und ueberschreibt die Marken-Optik lokal. */

:root {
    /* Marken-Tokens (Ritmano, semantisch — Quelle: docs/styling.md v0.15.0) */
    --brand: #E85234;
    --brand-deep: #D9462A;
    --brand-soft: #FFE2D4;
    --brand-softer: #FFF1EA;
    --ink: #24172F;
    --bg: #FBF8F0;
    --card: #FFFFFF;
    --text: #211A17;
    --muted: #6F6660;
    --border: #E9DDD4;
    --border-strong: #D8C7BA;
    --sage: #6FAF8D;
    --sage-soft: #EAF6EF;
    --sage-deep: #4E8E6E;
    --gold: #F2B84B;
    --gold-soft: #FFF4D8;
    --gold-deep: #9A6F12;
    --error: #D83A2E;
    --error-soft: #FBE6E3;
    --error-deep: #A82A21;
    /* Aus docs/styling.md Abschnitt 2 nachgezogen (Activities-Redesign 2026-09-23) - dort
       bereits definiert, im Staff-Bundle bisher nur nicht gebraucht. */
    --bg-alt: #F3EFE5;
    --shadow-xs: 0 1px 2px rgba(33, 26, 23, 0.05);
    --shadow-sm: 0 2px 6px rgba(33, 26, 23, 0.07);
    /* Nachgezogen fuer das Activity cockpit (UMBAU-005 Teil B) - Werte 1:1 aus docs/styling.md
       Abschnitt 2.1/2.2: Vorschlagsliste und Auswahldialog, Badge der Organisationsart. */
    --shadow-md: 0 6px 18px rgba(33, 26, 23, 0.10);
    --shadow-lg: 0 16px 40px rgba(33, 26, 23, 0.15);
    --aubergine-deep: #3A2347;
    --aubergine-soft: #F3EEF6;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* Neutrale Login-Tokens (bewusst markenlos) */
    --neutral-bg: #eef0f3;
    --neutral-card: #ffffff;
    --neutral-border: #d7dbe0;
    --neutral-ink: #2b2f36;
    --neutral-muted: #6b7280;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}

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

/* ---------- Shell (eingeloggt, warm/on-brand) ---------- */
.staff-shell { display: flex; min-height: 100vh; }

.staff-sidebar {
    width: 230px;
    background: var(--card);
    border-right: 1px solid var(--border);
    color: var(--text);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    /* Bediener 2026-09-26: Seitenleiste bleibt beim Scrollen stehen - "My profile" / "Sign out"
       sind immer sichtbar, ohne ans Seitenende zu scrollen. Ist die Navigation hoeher als das
       Fenster, scrollt nur sie (.staff-nav), der Fuss bleibt unten. */
    position: sticky;
    top: 0;
    z-index: 20; /* styling.md 3: sticky erzeugt einen Stacking-Context, ohne z-index malt .main darueber */
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    flex-shrink: 0;
}


.staff-brand { display: flex; align-items: center; gap: 8px; }
.staff-logo { height: 26px; width: auto; display: block; }
.staff-brand-badge {
    background: var(--brand-soft);
    color: var(--brand-deep);
    border-radius: var(--r-pill);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

.staff-nav { margin-top: 26px; display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow-y: auto; }
.staff-nav a {
    color: var(--text);
    padding: 9px 12px;
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 500;
}
.staff-nav a:hover { background: var(--brand-softer); }
.staff-nav a.active { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
/* Nav-Icons (styling.md 4.2 .nav-icon): 18px, Default --muted, Hover/aktiv --brand-deep.
   line-height 1 ist Pflicht - sonst sitzt der Text optisch gegen das 18px-Icon versetzt. */
.staff-nav a { display: flex; align-items: center; gap: 10px; line-height: 1; }
.staff-nav-icon { display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); }
.staff-nav-icon .staff-icon { width: 18px; height: 18px; }
.staff-nav a:hover .staff-nav-icon,
.staff-nav a.active .staff-nav-icon { color: var(--brand-deep); }
.staff-nav-label { min-width: 0; }
/* Unfertiger Call (UMBAU-024, StaffUnfinishedCall): Einstieg zurueck ins Call cockpit unter der Gruppe Sales - zweizeilig,
   Warnton wie "faellig" (Gold), Name mit Ellipse; in der Seitenleiste, damit der Seiteninhalt nicht hoeher wird. */
.staff-nav a.staff-nav-unfinished { align-items: flex-start; gap: 8px; margin: 4px 0 0 10px; padding: 8px 10px; border: 1px solid var(--gold); border-radius: var(--r-md); background: var(--gold-soft); line-height: 1.3; }
.staff-nav a.staff-nav-unfinished:hover { background: var(--brand-softer); }
.staff-nav-unfinished .staff-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--gold-deep); }
.staff-nav-unfinished-text { display: flex; flex-direction: column; min-width: 0; }
.staff-nav-unfinished-label { color: var(--gold-deep); font-size: 12px; font-weight: 700; }
.staff-nav-unfinished-name { overflow: hidden; color: var(--ink); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }

.staff-logout button {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--muted);
    padding: 9px 12px;
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 14px;
}
.staff-logout button:hover { background: var(--brand-softer); color: var(--brand-deep); }

/* min-width: 0 (styling.md 3, Overflow-Schutz): sonst waechst die Hauptspalte mit einer breiten Tabelle
   mit und die ganze Seite scrollt quer - so scrollt nur der Behaelter der Tabelle (UMBAU-021). */
.staff-main { flex: 1; min-width: 0; padding: 32px 40px; background: var(--bg); }

/* ---------- Cockpit-Kennzahlen ---------- */
.staff-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.staff-page-head h1 { margin: 0; font-size: 26px; color: var(--ink); }
.staff-user { color: var(--muted); font-size: 14px; }

.staff-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 24px 0; }
.staff-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
}
.staff-card-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--ink); }
.staff-card:first-child .staff-card-num { color: var(--brand); }
.staff-card-label { margin-top: 6px; color: var(--muted); font-size: 14px; }

.staff-hint { color: var(--muted); font-size: 13px; }
.staff-hint code { background: var(--brand-softer); padding: 1px 5px; border-radius: var(--r-sm); }

/* ---------- Auth / Login (NEUTRAL — kein Brand, KEINE "staff"-Klassennamen im Quelltext) ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--neutral-bg);
}
.auth-card {
    width: 100%;
    max-width: 340px;
    background: var(--neutral-card);
    border: 1px solid var(--neutral-border);
    border-radius: 12px;
    padding: 28px;
}
.auth-card h1 { font-size: 21px; margin: 0 0 16px; color: var(--neutral-ink); }
.auth-sub { color: var(--neutral-muted); font-size: 14px; margin: 0 0 18px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--neutral-muted); }
.auth-form input {
    padding: 10px 12px;
    border: 1px solid var(--neutral-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--neutral-ink);
    width: 100%;
}
.auth-form input:focus { outline: 2px solid var(--neutral-ink); outline-offset: 1px; }
.auth-btn {
    background: var(--neutral-ink);
    color: #fff;
    border: none;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}
.auth-btn:hover { filter: brightness(1.15); }
.auth-info { background: #eef6ec; color: #2f6b2a; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.auth-error { background: #fdecec; color: #a3261b; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }

/* ---------- Formulare (gemeinsam) ---------- */
.staff-form { display: flex; flex-direction: column; gap: 14px; }
.staff-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.staff-form input, .staff-form select, .staff-form textarea {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 15px;
    color: var(--text);
    font-family: inherit;
    width: 100%;
}
.staff-form input:focus, .staff-form select:focus, .staff-form textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}
/* Feststehender Wert als Feld (UMBAU-036: "Organisation type" beim neuen Verein bzw. der neuen Division) - lesbar, aber
   erkennbar nicht eingebbar. */
.staff-form input[readonly] { background: var(--bg-alt); color: var(--muted); }
.staff-check { flex-direction: row !important; align-items: center; gap: 8px; }
.staff-check input { width: auto; }

.staff-btn {
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 11px 16px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.staff-btn:hover { background: var(--brand-deep); }

.staff-auth-error { background: var(--error-soft); color: var(--error-deep); border-radius: var(--r-md); padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.staff-auth-info { background: var(--sage-soft); color: var(--sage-deep); border-radius: var(--r-md); padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }

/* ---------- CRM (Kontakte / Verlauf) ---------- */
.staff-grid-2 { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; margin-top: 18px; align-items: start; }
@media (max-width: 900px) { .staff-grid-2 { grid-template-columns: 1fr; } }
/* Eine Spalte mit demselben Abstand, wenn das Formular der Seite nur im Dialog erscheint (UMBAU-019). */
.staff-grid-1 { margin-top: 18px; }
/* Formular-Panel im Dialog (staff-form-dialog.js setzt hidden): die leere Huelle verschwindet, die Tabelle
   nimmt die volle Breite (UMBAU-019). */
[data-form-dialog][hidden] { display: none; }
.staff-grid-2:has(> [data-form-dialog][hidden]) { grid-template-columns: minmax(0, 1fr); }

.staff-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.staff-panel h2 { margin: 0 0 14px; font-size: 16px; color: var(--ink); }

.staff-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.staff-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--border); }
.staff-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.staff-table tr:last-child td { border-bottom: none; }
.staff-table tbody tr:hover { background: var(--brand-softer); }

.staff-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
.staff-tag { background: var(--brand-soft); color: var(--brand-deep); border-radius: var(--r-pill); padding: 2px 10px; font-size: 12px; font-weight: 600; }
.staff-notes { background: var(--brand-softer); border-left: 3px solid var(--brand-soft); padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; }

.staff-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.staff-timeline li { border-left: 3px solid var(--brand); padding: 2px 0 2px 12px; }
.staff-timeline-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: 14px; }
.staff-timeline-head span { color: var(--muted); font-size: 13px; }
.staff-timeline-body { margin-top: 4px; font-size: 14px; color: var(--text); white-space: pre-wrap; }

/* ---------- Buttons klein + Alt-Klassen (werden abgeloest) ---------- */
.staff-btn-sm { padding: 7px 12px; font-size: 13px; }



/* ---------- Filter-Leiste (Early-Access etc.) ---------- */
.staff-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.staff-filter a {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 13px;
    color: var(--muted);
}
.staff-filter a:hover { background: var(--brand-softer); }
.staff-filter a.active { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand-soft); font-weight: 600; }

/* ---------- Vertrieb: Ansprechpartner, Anruflisten, Bewertung ---------- */
.staff-person-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.staff-person-item { border-left: 3px solid var(--brand-soft); padding-left: 12px; }
.staff-person-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.staff-person-contact { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; margin: 2px 0; }
.staff-person-add summary { cursor: pointer; color: var(--brand); font-size: 14px; margin-bottom: 8px; }
.staff-inline-status { display: flex; gap: 6px; align-items: center; }
.staff-inline-status select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-md); font: inherit; font-size: 13px; }
/* Bewertungs-Badge: 1 Hoch (gruen), 2 Mittel (gelb), 3 Niedrig (orange), 4 Kein Interesse (rot) */
.staff-rating-1 { background: #e5f5e9; color: #1c7a3d; }
.staff-rating-2 { background: #fdf6df; color: #8a6d1a; }
.staff-rating-3 { background: #fdeee0; color: #9a5b1f; }
.staff-rating-4 { background: #fde5e5; color: #a03030; }

/* ---------- Suche & Blaetterung (Listen) ---------- */
.staff-search { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.staff-search input[type="search"] {
    flex: 1 1 260px;
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font: inherit;
}
.staff-pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 16px; }

/* ---------- Settings / Mail-Postfaecher ---------- */
.staff-link { background: none; border: none; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-decoration: none; }
.staff-link:hover { text-decoration: underline; }
.staff-link-danger { color: var(--error); }
.staff-muted { color: var(--muted); font-size: 13px; }
.staff-row-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.staff-row-actions form { display: inline; }
.staff-compose { max-width: 760px; }
.staff-actions { margin: 6px 0 12px; }
.staff-dkim-key { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; margin-bottom: 14px; }
.staff-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; word-break: break-all; color: var(--text); }

/* ============================================================================================
   CRM nach Myfactory-Begriffsmodell (2026-07-25): Cockpit, Pipeline, Kontaktprotokoll mit Ampel.
   Zielmodell + Begruendung: docs/crm_staff_backend_architecture.md Paragraf 13.
   ============================================================================================ */

/* ---------- Cockpit (Startseite): drei Spalten, umbricht auf schmalen Schirmen ---------- */
.staff-cockpit { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.staff-cockpit .staff-panel h2:not(:first-child) { margin-top: 24px; }
.staff-card-alert { border-color: var(--gold); background: var(--gold-soft); }
.staff-card-alert .staff-card-num { color: var(--gold-deep); }

/* ---------- Kopfzeile / Meta ---------- */
.staff-head-actions { display: flex; gap: 14px; align-items: center; }
.staff-meta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 4px 0 12px; font-size: 14px; color: var(--muted); }
.staff-link-active { font-weight: 700; text-decoration: underline; }

/* ---------- Formular-Zeilen (mehrere Felder nebeneinander) ---------- */
.staff-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.staff-field-row label { margin: 0; }
.staff-inline-form { display: inline-flex; gap: 6px; align-items: center; }
.staff-inline-form select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; font-family: inherit; }
.staff-details { margin-top: 14px; }
.staff-details summary { cursor: pointer; color: var(--brand); font-size: 14px; }
.staff-details > form { margin-top: 12px; }

/* ---------- Badges (Adressart, Chancen-Status, Bewertung) ---------- */
.staff-badge { display: inline-block; border-radius: var(--r-pill); padding: 2px 10px; font-size: 12px; font-weight: 600;
               background: var(--brand-softer); color: var(--brand-deep); }
.staff-badge-prospect { background: var(--gold-soft); color: var(--gold-deep); }
.staff-badge-member   { background: var(--sage-soft); color: var(--sage-deep); }
.staff-badge-partner  { background: var(--brand-soft); color: var(--brand-deep); }
.staff-badge-other    { background: #EFEDEA; color: var(--muted); }
.staff-badge-open     { background: var(--gold-soft); color: var(--gold-deep); }
.staff-badge-won      { background: var(--sage-soft); color: var(--sage-deep); }
.staff-badge-lost     { background: var(--error-soft); color: var(--error-deep); }
.staff-badge-postponed{ background: #EFEDEA; color: var(--muted); }
.staff-badge-rating   { background: var(--brand-softer); color: var(--brand-deep); }
.staff-badge-main     { background: var(--sage-soft); color: var(--sage-deep); }

/* ---------- Kontaktprotokoll: Ampel + Timeline ---------- */
.staff-timeline-item { display: flex; gap: 10px; border-left: none !important; padding: 0 !important; }
.staff-tone { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; border: 1px solid rgba(0,0,0,.08); }
.staff-tone-green  { background: var(--sage); }
.staff-tone-yellow { background: var(--gold); }
.staff-tone-grey   { background: #C9C3BD; }
.staff-tone-orange { background: #E08A3C; }
.staff-tone-blue   { background: #6C93C7; }
.staff-tone-red    { background: var(--error); }
.staff-timeline-body { flex: 1 1 auto; margin-top: 0 !important; white-space: normal !important; }
.staff-timeline-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.staff-timeline-text { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }

/* ---------- Listen (Ansprechpartner, Wiedervorlagen, Mein Tag) ---------- */
.staff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.staff-list-item { border-left: 3px solid var(--border-strong); padding-left: 12px; }
.staff-list-item.staff-overdue { border-left-color: var(--error); }
.staff-list-main { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.staff-list-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- Chance auf der Adressseite ---------- */
.staff-opp { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 14px; }
.staff-opp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px;
                     padding-top: 10px; border-top: 1px solid var(--border); }
.staff-btn-win  { background: var(--sage-deep); border-color: var(--sage-deep); }
.staff-btn-lose { background: var(--muted); border-color: var(--muted); }

/* ---------- Pipeline (Kanban je Vertriebsphase) ---------- */
.staff-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.staff-kanban-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; }
.staff-kanban-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.staff-kanban-head h2 { margin: 0; font-size: 15px; color: var(--ink); }
.staff-kanban-count { background: var(--brand-soft); color: var(--brand-deep); border-radius: var(--r-pill);
                      padding: 1px 9px; font-size: 12px; font-weight: 700; }
.staff-kanban-exit { margin: 6px 0 12px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.staff-kanban-card { border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
                     border-radius: var(--r-md); padding: 10px; margin-bottom: 10px; }
.staff-kanban-card.staff-rating-high   { border-left-color: var(--sage); }
.staff-kanban-card.staff-rating-medium { border-left-color: var(--gold); }
.staff-kanban-card.staff-rating-low    { border-left-color: var(--border-strong); }
.staff-kanban-title { font-weight: 700; font-size: 14px; }
.staff-kanban-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 8px; }

/* ---------- Phasen-Balken im Cockpit ---------- */
.staff-phasebars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.staff-phasebars li { display: grid; grid-template-columns: 130px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; }
.staff-phasebar-track { background: var(--brand-softer); border-radius: var(--r-pill); height: 10px; overflow: hidden; }
.staff-phasebar-fill { display: block; background: var(--brand); height: 100%; border-radius: var(--r-pill); }
.staff-phasebar-count { text-align: right; color: var(--muted); font-weight: 600; }

/* Arbeitsflaeche der Adressseite: zwei gleich breite Spalten. Links das hochfrequente Erfassen
   plus Protokoll, rechts Chance / Ansprechpartner / Wiedervorlagen / Stammdaten. Anders als
   .staff-grid-2 (schmale Formularspalte), weil hier BEIDE Seiten Arbeitsflaeche sind. */
.staff-grid-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; margin-top: 18px; align-items: start; }
.staff-grid-work > div { display: flex; flex-direction: column; gap: 20px; }
.staff-grid-work .staff-panel { margin: 0; }

/* ---------- Navigations-Gruppen (auf-/zuklappbar, Static SSR ohne Framework-JS) ----------
   <details>/<summary> statt eigener Klapp-Logik: funktioniert nativ auch ohne JavaScript.
   Serverseitig wird die Gruppe der aktuellen Seite offen gerendert, wwwroot/nav-groups.js
   merkt sich zusaetzlich die manuelle Entscheidung des Nutzers. */
.staff-navgroup { margin-top: 10px; }
.staff-navgroup > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    border-radius: var(--r-md);
    user-select: none;
}
.staff-navgroup > summary::-webkit-details-marker { display: none; }
.staff-navgroup > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
    flex: 0 0 auto;
}
.staff-navgroup[open] > summary::before { transform: rotate(90deg); }
.staff-navgroup > summary:hover { background: var(--brand-softer); color: var(--brand-deep); }
.staff-navgroup > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.staff-navgroup-items { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; margin-top: 2px; }
.staff-navgroup-items a { font-size: 14px; }
/* Hinweis in einer noch leeren Navigationsgruppe (z. B. Sales vor dem ersten Baustein). */
.staff-nav-empty { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 4px 0 2px; padding-right: 4px; }

/* Fuss der Seitenleiste: eigenes Konto + Abmelden, abgesetzt von den Sachgruppen. */
.staff-sidebar-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.staff-nav-foot-link {
    display: block;
    color: var(--text);
    padding: 9px 12px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}
.staff-nav-foot-link:hover { background: var(--brand-softer); }
.staff-nav-foot-link.active { background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; }

/* Cockpit steht als Startseite ueber den Gruppen und wird etwas kraeftiger gesetzt. */
.staff-nav-home { font-weight: 700; margin-bottom: 4px; }

/* Anrufliste: gesperrte Adressen deutlich zurueckgenommen - da wird nicht mehr angerufen. */
.staff-row-blocked { opacity: .62; }
.staff-row-blocked a { color: var(--muted); }
/* Vormerk-Schnellaktion unter dem Erfassungs-Formular. */
.staff-register-action { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---------- Pipeline: Drag & Drop der Karten ---------- */
.staff-hidden-form { display: none; }
.staff-kanban-drop { min-height: 60px; }
.staff-kanban-card[draggable="true"] { cursor: grab; }
.staff-kanban-card[draggable="true"]:active { cursor: grabbing; }
.staff-card-dragging { opacity: .45; }
.staff-kanban-col.staff-col-over { background: var(--brand-softer); border-color: var(--brand); }
.staff-kanban-col.staff-col-over .staff-kanban-drop { outline: 2px dashed var(--brand); outline-offset: 4px; border-radius: var(--r-md); }

/* ---------- Aenderungshistorie (UMBAU-002 Teil B) ----------
   Bewusst ANDERS gesetzt als die Activity-Timeline (.staff-timeline): dort steht, was WIR nach
   aussen getan haben (Ampelpunkt, Rand in Markenfarbe), hier steht, was am DATENSATZ passiert ist.
   Wuerden beide Stroeme gleich aussehen, verschwaemmen sie - und die Kommunikations-Timeline waere
   binnen Wochen unter Systemrauschen begraben. Deshalb: neutrale Graustufen, gestrichelter Rahmen
   am Panel, Werte in Monospace. Systemtechnik soll auch wie Systemtechnik aussehen. */
.staff-panel-history { border-style: dashed; border-color: var(--border-strong); background: transparent; }
.staff-panel-history > h2 { color: var(--muted); }

.staff-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.staff-history-item {
    border-left: 3px solid var(--border-strong);
    padding: 2px 0 2px 12px;
    font-size: 13px;
}
.staff-history-item.staff-history-create { border-left-color: var(--sage); }
.staff-history-item.staff-history-delete { border-left-color: var(--error); }
/* Die Admin-Korrektur ist der seltene, folgenreiche Eingriff - sie darf auffallen. */
.staff-history-item.staff-history-correction { border-left-color: var(--gold); background: var(--gold-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.staff-history-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; }
.staff-history-head strong { font-size: 13px; color: var(--ink); }
.staff-history-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 2px; font-size: 12px; color: var(--muted); }
.staff-history-op {
    background: #EFEDEA;
    color: var(--muted);
    border-radius: var(--r-pill);
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
/* Kraeftig statt gold-soft: die Korrektur-Zeile hat selbst schon einen gold-soften Hintergrund,
   ein gleichfarbiges Abzeichen waere darauf unsichtbar. */
.staff-history-op.staff-history-correction { background: var(--gold-deep); color: #fff; }
.staff-history-op.staff-history-delete { background: var(--error-soft); color: var(--error-deep); }
.staff-history-op.staff-history-create { background: var(--sage-soft); color: var(--sage-deep); }
.staff-history-activity { font-style: italic; }

.staff-history-values { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.staff-history-old, .staff-history-new {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    background: var(--brand-softer);
    border-radius: var(--r-sm);
    padding: 1px 6px;
    overflow-wrap: anywhere;
}
.staff-history-old { color: var(--muted); text-decoration: line-through; }
.staff-history-new { color: var(--text); }
.staff-history-arrow { color: var(--muted); }
.staff-history-reason { margin: 4px 0 0; font-size: 12px; color: var(--text); white-space: pre-wrap; }

/* Bewegungshistorie im Chancen-Kasten - abgesetzt von den Aktionen darueber. */
.staff-opp-history { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.staff-opp-history > h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
                          letter-spacing: .03em; color: var(--muted); }

/* ============================================================================================
   Telesales-Arbeitsmaske (UMBAU-003 Teil D). Eine Zeile je Verein; ein Klick klappt darunter das
   Detailfeld auf (Static SSR: das ist eine zweite Tabellenzeile, kein JavaScript).
   ============================================================================================ */

/* Arbeitsstatus-Badge. Die Farbe kommt aus StaffWorkStatuses.Css und beschreibt die ARBEITSLAGE,
   nicht den Enum-Namen: grau = noch nichts passiert, gelb = dran bleiben, blau = vorgemerkt,
   gruen = erledigt/freigeschaltet, orange = vertagt, rot = Absage. Die Palette entspricht den
   Ampelfarben des Activity logs (.staff-tone-*), damit die Maske nicht zwei Farbsprachen fuehrt. */
.staff-badge-grey   { background: #EFEDEA; color: var(--muted); }
.staff-badge-yellow { background: var(--gold-soft); color: var(--gold-deep); }
.staff-badge-blue   { background: var(--brand-soft); color: var(--brand-deep); }
.staff-badge-green  { background: var(--sage-soft); color: var(--sage-deep); }
.staff-badge-orange { background: #FDEEE0; color: #9A5B1F; }
.staff-badge-red    { background: var(--error-soft); color: var(--error-deep); }

/* Wellen-Badge: mehrere je Verein, deshalb schmal und mit Abstand. Es ist ein Link in die
   Verwaltungssicht der Welle. */
.staff-badge-wave {
    background: var(--brand-softer);
    color: var(--brand-deep);
    margin: 0 4px 3px 0;
    font-size: 11px;
    letter-spacing: .02em;
}
.staff-badge-wave:hover { background: var(--brand-soft); text-decoration: none; }

/* Faellige Wiedervorlage - der einzige Grund, aus der Wellen-Reihenfolge auszubrechen (R-05).
   Darf auffallen: ein zugesagter Rueckruf schlaegt jeden Kaltanruf. */
.staff-badge-due { background: var(--gold); color: #fff; }

.staff-telesales-table td { vertical-align: top; }
/* Die aufgeklappte Zeile bleibt sichtbar mit ihrem Detailfeld verbunden. */
.staff-telesales-table tr.staff-row-open > td { background: var(--brand-softer); font-weight: 500; }
.staff-telesales-detail > td {
    background: var(--brand-softer);
    border-bottom: 2px solid var(--brand-soft);
    padding: 4px 10px 18px;
}
/* Im Detailfeld ist der Platz schmaler als auf einer eigenen Seite - die Kaesten duerfen frueher
   umbrechen als auf der Account-Seite. */
.staff-telesales-detail .staff-grid-work {
    margin-top: 0;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* Audit-Seite: viele Spalten, teils lange Werte - die Tabelle scrollt fuer sich, statt die Seite
   in die Breite zu ziehen. */
.staff-audit-filter { margin-bottom: 16px; }
.staff-table-scroll { overflow-x: auto; }
.staff-audit-table { min-width: 900px; }
.staff-audit-when { white-space: nowrap; }
.staff-audit-value { max-width: 260px; overflow-wrap: anywhere; }
/* UMBAU-017 A1: Name des Datensatzes unter Vorgang und Typ (Spalte "Record"). */
.staff-audit-record { display: block; max-width: 260px; overflow-wrap: anywhere; }
.staff-audit-table .staff-history-activity { display: block; color: var(--muted); font-size: 12px; }

/* Activities-Maske (UMBAU-004): links die Adressliste, rechts die Arbeitsflaeche - Grundgeruest
   ist .staff-grid-2 (bricht unter 900px untereinander um). Hier nur der Abstand der Kaesten je
   Spalte und die Hervorhebung des ausgewaehlten Accounts. */
.staff-activities > div { display: flex; flex-direction: column; gap: 20px; }
.staff-activities .staff-panel { margin: 0; }
.staff-activities .staff-panel .staff-page-head h2 { margin: 0; }
.staff-list-item.staff-pick-active { border-left-color: var(--brand); background: var(--brand-softer); }

/* ============================================================================================
   Allgemeine UI-Bausteine (Activities-Redesign 2026-09-23). Bewusst allgemein benannt
   (styling.md NoGo 9), damit weitere Staff-Masken sie uebernehmen koennen. Bestehende Klassen
   (.staff-timeline, .staff-list, .staff-details, ...) bleiben unangetastet - andere Seiten sehen
   unveraendert aus. Farben ausschliesslich ueber Tokens bzw. die vorhandenen Ampel-Klassen
   .staff-badge-{green|yellow|grey|orange|blue|red} und .staff-tone-*.
   ============================================================================================ */

/* ---------- Icon (Components/Shared/StaffIcon.razor) ---------- */
.staff-icon { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -0.125em; }

/* ---------- Panel-Titel mit Icon + Zaehler ---------- */
.staff-panel-title { display: flex; align-items: center; gap: 8px; }
.staff-panel-title > .staff-icon { width: 18px; height: 18px; color: var(--muted); }
.staff-count {
    background: var(--bg-alt);
    color: var(--muted);
    border-radius: var(--r-pill);
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

/* ---------- Initialen-Avatar ---------- */
.staff-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
}
.staff-avatar-lg { flex-basis: 56px; width: 56px; height: 56px; font-size: 20px; }

/* ---------- Chips (Meta-Angaben). Farbe: .staff-chip-neutral / -muted ODER eine Ampel-Klasse ---------- */
.staff-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.staff-chip-neutral { background: var(--bg-alt); color: var(--text); }
.staff-chip-muted { background: transparent; border-color: var(--border); color: var(--muted); }

/* ---------- Pill-Link (Telefon, E-Mail) und runder Icon-Button ---------- */
.staff-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.staff-pill .staff-icon { width: 15px; height: 15px; color: var(--brand-deep); }
.staff-pill:hover { background: var(--brand-softer); border-color: var(--brand-soft); color: var(--brand-deep); }
.staff-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.staff-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--muted);
}
.staff-iconbtn .staff-icon { width: 18px; height: 18px; }
.staff-iconbtn:hover { background: var(--bg-alt); color: var(--ink); }
.staff-iconbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Primaer-Button mit Icon vor dem Text. */
.staff-btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.staff-btn-icon .staff-icon { width: 16px; height: 16px; }

/* ---------- Suchfeld mit Lupe im Feld ---------- */
.staff-searchfield { position: relative; display: flex; flex: 1 1 200px; min-width: 0; }
.staff-searchfield > .staff-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}
.staff-search .staff-searchfield input[type="search"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 9px 14px 9px 36px;
    border-radius: var(--r-pill);
    background: var(--card);
}
.staff-search .staff-searchfield input[type="search"]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-softer);
}

/* ---------- Leerer Zustand ---------- */
.staff-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}
.staff-empty p { margin: 0; }
.staff-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    background: var(--bg-alt);
    color: var(--muted);
}
.staff-empty-icon .staff-icon { width: 20px; height: 20px; }

/* ---------- Toast-artige Rueckmeldungen (Erfolg = Sage, Fehler = Error, Hinweis = Gold) ---------- */
.staff-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    padding: 11px 14px;
    border: 1px solid;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    font-size: 14px;
}
.staff-toast > .staff-icon { width: 18px; height: 18px; margin-top: 1px; }
.staff-toast-ok    { background: var(--sage-soft); color: var(--sage-deep); border-color: var(--sage); }
.staff-toast-error { background: var(--error-soft); color: var(--error-deep); border-color: var(--error); }
.staff-toast-info  { background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold); }
/* UMBAU-030: Versandstufe oben auf Compose (Local/Catch = Hinweis, nicht konfiguriert = Fehler) - kompakt rechts
   neben der Ueberschrift in .staff-page-head, damit sie keine Hoehe kostet ("Send" bleibt bei 1440 x 900 sichtbar).
   Der Link ist unterstrichen, sonst waere er vom Hinweistext nicht zu unterscheiden. */
.staff-mail-mode { align-self: center; align-items: center; margin: 0; padding: 4px 12px; font-size: 13px; }
.staff-mail-mode > .staff-icon { width: 16px; height: 16px; margin-top: 0; }
.staff-mail-mode a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Erfolg schwebend und fluechtig (UMBAU-019 Paragraf 5, staff-flash.js, styling.md 6.10): die Originale
   im Seitenfluss ([data-flash-params]) sind mit JavaScript von Anfang an ausgeblendet (keine
   Layout-Verschiebung), die Einblendung steht oben rechts bzw. schmal oben ueber die volle Breite.
   Fehler (.staff-toast-error) und Hinweise (.staff-toast-info) bleiben im Seitenfluss. */
.staff-flash-js [data-flash-params] { display: none; }
.staff-flash-region { position: fixed; top: 16px; right: 16px; z-index: 70; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.staff-toast.staff-flash { margin: 0; align-items: center; box-shadow: var(--shadow-md); cursor: pointer; pointer-events: auto; transition: opacity .2s ease, transform .2s ease; }
.staff-flash.is-entering,
.staff-flash.is-leaving { opacity: 0; transform: translateY(-6px); }
.staff-flash-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.staff-flash .staff-flash-close { flex: 0 0 auto; width: 28px; height: 28px; margin: -4px -6px -4px 0; color: inherit; }
.staff-flash .staff-flash-close:hover { background: var(--card); color: inherit; }
@media (max-width: 600px) {
    .staff-flash-region { left: 16px; right: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .staff-toast.staff-flash { transition: none; }
    .staff-flash.is-entering,
    .staff-flash.is-leaving { transform: none; }
}

/* ---------- Gefahren-Banner (z. B. Sperrvermerk) - nur Error-Toene, nie Brand ---------- */
.staff-banner-danger {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--error);
    border-left-width: 4px;
    border-radius: var(--r-md);
    background: var(--error-soft);
    color: var(--error-deep);
    font-size: 14px;
}
.staff-banner-danger > .staff-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--error); }
.staff-banner-note { display: block; margin-top: 4px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-banner-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--error-deep); font-weight: 600; }
.staff-banner-link .staff-icon { width: 14px; height: 14px; }

/* ---------- Aufklappbereich (<details>/<summary>, ohne JavaScript) ---------- */
.staff-disclosure { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
.staff-disclosure > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.staff-disclosure > summary::-webkit-details-marker { display: none; }
.staff-disclosure > summary .staff-icon { width: 16px; height: 16px; color: var(--brand-deep); }
.staff-disclosure > summary .staff-disclosure-caret { margin-left: auto; color: var(--muted); transition: transform .15s ease; }
.staff-disclosure[open] > summary .staff-disclosure-caret { transform: rotate(180deg); }
.staff-disclosure > summary:hover { background: var(--brand-softer); }
.staff-disclosure > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.staff-disclosure[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; }
.staff-disclosure > form,
.staff-disclosure > .staff-field-row { padding: 12px; }

/* ---------- Segment-Auswahl aus Pillen (echte Radio-Buttons, Input visuell versteckt) ---------- */
.staff-fieldset { min-width: 0; margin: 0; padding: 0; border: none; }
.staff-fieldset > legend { margin-bottom: 6px; padding: 0; font-size: 13px; color: var(--muted); }
.staff-pillgroup { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-pillgroup .staff-pill-option {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    margin: 0;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
/* Fokussierbar, aber unsichtbar - die Pille zeigt Zustand und Fokus. */
.staff-pillgroup .staff-pill-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.staff-pill-face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--text);
    font-weight: 600;
    line-height: 1.2;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.staff-pill-face .staff-icon { width: 15px; height: 15px; color: var(--muted); }
.staff-pill-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--r-pill); }
/* Nicht gewaehlt: neutral - auch wenn die Pille eine Ampel-Klasse fuer den gewaehlten Zustand traegt. */
.staff-pill-option input:not(:checked) + .staff-pill-face { background: var(--card); color: var(--text); }
.staff-pill-option:hover input:not(:checked) + .staff-pill-face { background: var(--bg-alt); }
/* Gewaehlt ohne Ampel-Klasse: aktiver Brand-Akzent. Mit Ampel-Klasse: deren Farben + Rahmen in Tonfarbe. */
.staff-pill-option input:checked + .staff-pill-face:not([class*="staff-badge-"]) {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
}
.staff-pill-option input:checked + .staff-pill-face:not([class*="staff-badge-"]) .staff-icon { color: var(--brand-deep); }
.staff-pill-option input:checked + .staff-pill-face[class*="staff-badge-"] { border-color: currentColor; }
.staff-pill-option input:focus-visible + .staff-pill-face { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Vertikale Timeline mit Icon-Knoten ----------
   Knotenfarbe = Ampel (Klasse .staff-badge-<tone> am Knoten: dezenter Grund, Icon in Tonfarbe).
   Getrennt von .staff-timeline (Bestand, andere Seiten). */
.staff-vtl { list-style: none; margin: 0; padding: 0; }
.staff-vtl-item { position: relative; display: flex; gap: 12px; padding-bottom: 18px; }
.staff-vtl-item:last-child { padding-bottom: 0; }
.staff-vtl-item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: 4px;
    width: 2px;
    border-radius: var(--r-pill);
    background: var(--border);
}
.staff-vtl-item:last-child::before { display: none; }
/* Sprungziel (#activity-<Id>, z. B. aus dem Sperrvermerk, UMBAU-015): Eintrag kurz hervorgehoben. */
.staff-vtl-item { scroll-margin-top: 16px; }
.staff-vtl-item:target .staff-vtl-body { border-radius: var(--r-sm); background: var(--brand-softer); box-shadow: 0 0 0 6px var(--brand-softer); }
.staff-vtl-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
}
.staff-vtl-node .staff-icon { width: 16px; height: 16px; }
.staff-vtl-body { flex: 1 1 auto; min-width: 0; padding-top: 5px; }
.staff-vtl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* Titel einzeilig mit Ellipse, voller Betreff im title-Tooltip (UMBAU-016: der Betreff ist bis 80 Zeichen lang);
   die Zeit rechts bleibt stehen (flex: 0 0 auto). */
.staff-vtl-title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.staff-vtl-time { flex: 0 0 auto; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.staff-vtl-account { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--brand-deep); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.staff-vtl-account .staff-icon { width: 13px; height: 13px; }
.staff-vtl-account:hover { text-decoration: underline; }
.staff-vtl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.staff-vtl-person { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.staff-vtl-person .staff-icon { width: 13px; height: 13px; color: var(--muted); }
.staff-vtl-by { color: var(--muted); }
.staff-vtl-note {
    margin: 8px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* Tages-Zwischenueberschrift (Feed) mit auslaufender Linie. */
.staff-vtl-day {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.staff-vtl-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.staff-vtl-day:first-of-type { margin-top: 4px; }

@media (max-width: 600px) {
    .staff-vtl-head { flex-direction: column; gap: 2px; }
}

/* ============================================================================================
   Activities-Maske (UMBAU-004) - seitenspezifisch, Praefix .act-*.
   ============================================================================================ */
.staff-activities > div { min-width: 0; }
.staff-activities .staff-toast { margin: 0; }

.act-page-head h1 { display: flex; align-items: center; gap: 10px; }
.act-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand-deep);
}
.act-page-icon .staff-icon { width: 20px; height: 20px; }

/* Adressliste links */
.act-search { margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.act-search .staff-searchfield { flex-basis: 100%; }
.act-reset { font-size: 13px; white-space: nowrap; }
.act-list-caption { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.act-accounts { list-style: none; margin: 0 -8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.act-account {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    color: var(--text);
}
.act-account:hover { background: var(--brand-softer); }
.act-account:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.act-account.is-active { background: var(--brand-softer); }
.act-account.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: var(--r-pill);
    background: var(--brand-deep);
}
.act-account.is-active .staff-avatar { background: var(--brand); color: var(--card); }
.act-account-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.act-account-name { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.act-account-city { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.act-account-city .staff-icon { width: 12px; height: 12px; }
.act-account-when { flex: 0 0 auto; align-self: flex-start; margin-top: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; }

/* Feed-Kopf: Titel links, Filter All/Mine rechts */
.act-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.act-panel-head h2 { margin: 0; }
.act-filter { margin: 0; }
.act-filter a { display: inline-flex; align-items: center; gap: 6px; }
.act-filter .staff-icon { width: 14px; height: 14px; }

/* Account-Kopf als Karte */
.act-head-top { display: flex; align-items: center; gap: 14px; }
.act-head-title { flex: 1 1 auto; min-width: 0; }
.act-head-title h2 { margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.act-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: 14px; }
.act-head-city, .act-head-number { display: inline-flex; align-items: center; gap: 5px; }
.act-head-city .staff-icon, .act-head-number .staff-icon { width: 14px; height: 14px; }
.act-head-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
/* UMBAU-022: Label "Club:" links, die Pillen als eigene umbrechende Gruppe daneben (Grundlinie = erste Zeile). */
.act-head-pills { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }

/* Log-activity-Formular */
.act-log .staff-disclosure { margin-top: 0; }
.act-log select { background-color: var(--card); cursor: pointer; }
.act-log input:not([type="radio"]):not([type="checkbox"]):focus,
.act-log select:focus,
.act-log textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-softer); }
.act-danger { padding: 10px 12px; border: 1px solid var(--error-soft); border-radius: var(--r-md); }
.act-danger .staff-check { color: var(--error-deep); font-size: 13px; }
.act-danger input[type="checkbox"] { accent-color: var(--error); }
.act-log-submit { display: flex; justify-content: flex-end; }

/* Log activity: Zeitpunkt, Richtung, Ergebnis (UMBAU-010). Die Richtung blendet sich per :has() nach der
   gewaehlten Art aus (data-direction am Radio, Quelle CrmActivityRules). Das Ergebnis gilt seit UMBAU-013
   fuer JEDE Art; nur "Not reached" verschwindet bei Arten ohne "nicht erreicht" (data-notreached).
   Ohne :has()-Unterstuetzung bleibt alles sichtbar - der Endpunkt setzt die Regel ohnehin durch. */
.act-log-when-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; }
.act-when { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; color: var(--muted); }
.act-when-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.staff-form .act-when-line input { width: auto; padding: 7px 10px; font-size: 14px; }
.act-when-quick { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.act-when-quick[hidden] { display: none; }
.act-when-quick button {
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.act-when-quick button:hover { background: var(--bg-alt); color: var(--ink); }
.act-when-quick button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.act-log:has(input[name="type"]:checked:not([data-notreached])) .act-result-nr,
.act-log:has(input[name="type"]:checked:not([data-direction])) .act-direction { display: none; }
.act-dir-chip .staff-icon { width: 12px; height: 12px; }

/* Personen als kompakte Karten */
.act-persons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.act-person { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
.act-person-main { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.act-person-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); overflow-wrap: anywhere; }
.act-person-contact { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 13px; }
.act-person-contact a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--brand-deep); overflow-wrap: anywhere; }
.act-person-contact .staff-icon { width: 13px; height: 13px; color: var(--muted); }

/* Offene Wiedervorlagen */
.act-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.act-task { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; }
.act-task-icon { display: inline-flex; color: var(--muted); }
.act-task-icon .staff-icon { width: 16px; height: 16px; }
.act-task-title { flex: 1 1 auto; min-width: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.act-task-due { flex: 0 0 auto; color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.act-task.is-overdue { border-color: var(--error-soft); background: var(--error-soft); }
.act-task.is-overdue .act-task-icon { color: var(--error); }
.act-task.is-overdue .act-task-due { color: var(--error-deep); font-weight: 700; }

@media (max-width: 600px) {
    .act-head-top { flex-wrap: wrap; }
    .act-search { flex-wrap: wrap; }
}

/* ============================================================================================
   Activity cockpit - Erweiterung UMBAU-005 Teil B (Kopf mit allen Daten, Ansprechpartner-Karten,
   Suche mit Vorschlaegen, Auswahldialog "Browse organisations", History). Farben nur ueber Tokens;
   Error-Toene ausschliesslich fuer Loeschen/Sperrvermerk.
   ============================================================================================ */

/* ---------- Allgemeine Ergaenzungen (Knopf-Varianten, Badge der Organisationsart) ---------- */
.staff-btn-outline { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }
.staff-btn-outline:hover { background: var(--bg-alt); color: var(--ink); }
.staff-btn-outline:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.staff-btn-outline:disabled { opacity: .5; cursor: default; }
.staff-btn-outline:disabled:hover { background: var(--card); }
.staff-btn-danger { background: var(--error); }
.staff-btn-danger:hover { background: var(--error-deep); }
.staff-badge-org { background: var(--aubergine-soft); color: var(--aubergine-deep); }

/* ---------- Suche mit Vorschlagsliste (account-lookup.js) ---------- */
.act-lookup-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 340px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--shadow-md);
}
.act-lookup-option { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.act-lookup-option:hover,
.act-lookup-option.is-active { background: var(--brand-softer); }
.act-lookup-name { color: var(--ink); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.act-lookup-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.act-lookup-empty { padding: 8px 10px; color: var(--muted); font-size: 13px; }

.act-lookup-help { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--muted); font-size: 13px; }
.act-lookup-help p { margin: 0 0 6px; color: var(--text); }
.act-lookup-help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.act-lookup-help li { display: flex; align-items: center; gap: 6px; }
.act-lookup-help li .staff-icon { width: 14px; height: 14px; }
.act-lookup-help .staff-empty-icon { flex: 0 0 40px; }

.act-account-extra { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; color: var(--muted); font-size: 12px; }
.act-account-extra > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.act-account-extra .staff-icon { width: 12px; height: 12px; }
.act-subfields { padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }

/* ---------- Kopf: Fakten, Hinweise, Herkunft, Stammdaten ---------- */
.act-facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--text); }
.act-facts li { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.act-facts .staff-icon { width: 15px; height: 15px; color: var(--muted); vertical-align: -0.2em; }
.act-facts a { color: var(--brand-deep); font-weight: 600; }
.act-facts a:hover { text-decoration: underline; }
.act-head-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--gold-deep); font-size: 13px; }
.act-head-note .staff-icon { width: 14px; height: 14px; }
.act-head-origin { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.act-master > form { padding: 14px; }
.act-origin { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg); font-size: 12px; }
.act-origin dt { color: var(--muted); font-weight: 600; }
.act-origin dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* ---------- Ansprechpartner-Karten ---------- */
/* Hauptansprechpartner (UMBAU-009): volle Breite, Brand-Soft-Rahmen, gefuellter Stern in Gold
   (styling.md 2.1: Gold = Sterne). .is-active steht danach und gewinnt beim Rahmen. */
.act-person.is-main { grid-column: 1 / -1; border-color: var(--brand-soft); background: var(--brand-softer); }
.act-main-label { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 3px; color: var(--brand-deep); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.act-main-label .staff-icon,
.act-head-main-label .staff-icon { width: 14px; height: 14px; color: var(--gold-deep); }
.act-main-label .staff-icon polygon,
.act-head-main-label .staff-icon polygon { fill: var(--gold); }
.act-main-origin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; color: var(--gold-deep); font-size: 12px; }
.act-main-origin .act-textbtn { font-size: 12px; font-weight: 700; }
.act-main-remove { align-self: center; }
.act-main-remove .act-textbtn { color: var(--muted); font-size: 12px; }
.act-main-remove .act-textbtn:hover { color: var(--brand-deep); }
.act-main-star { flex: 0 0 auto; margin: 0; }
.act-main-star .staff-iconbtn { width: 30px; height: 30px; cursor: pointer; }
.act-main-star .staff-iconbtn .staff-icon { width: 16px; height: 16px; }
.act-main-star .staff-iconbtn:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-deep); }
.act-head-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 0; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.act-head-main-label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 600; }
.act-head-main a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--brand-deep); font-weight: 600; }
.act-head-main a:hover { text-decoration: underline; }
.act-head-main a .staff-icon { width: 13px; height: 13px; color: var(--muted); }
.act-head-main.is-empty { gap: 5px; color: var(--muted); font-size: 13px; }
.act-head-main.is-empty .staff-icon { width: 14px; height: 14px; }
/* Zeilen-Label "Club:" vor den Kontakt-Pillen der Organisation (UMBAU-022 Abschnitt 2.2): gleiche Form wie
   "Main contact:", Icon aber neutral statt Gold (Gold = Stern des Main contact). */
.act-head-club-label .staff-icon { color: var(--muted); }
.act-person.is-active { border-color: var(--brand); background: var(--brand-softer); }
.act-person-note { margin: 6px 0 0; color: var(--text); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.act-person-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.act-person-stats .staff-icon { width: 13px; height: 13px; }
.act-person-stats a { color: var(--brand-deep); font-weight: 600; }
.act-person-stats a:hover { text-decoration: underline; }
.act-person-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.act-person-edit { margin-top: 10px; }
.act-person-edit > summary { padding: 7px 10px; font-size: 13px; }
.act-confirm { margin: 0 12px 12px; }
.act-confirm > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--error-deep); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.act-confirm > summary::-webkit-details-marker { display: none; }
.act-confirm > summary .staff-icon { width: 14px; height: 14px; }
.act-confirm > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.act-confirm-body { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--error-soft); border-radius: var(--r-md); font-size: 13px; }
.act-confirm-body p { margin: 0 0 8px; color: var(--text); }

/* ---------- Timeline-Filter und Wiedervorlagen ---------- */
.act-filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-alt); font-size: 13px; }
.act-filter-note .staff-icon { width: 14px; height: 14px; color: var(--muted); }
.act-filter-note a { margin-left: auto; }
a.staff-vtl-person:hover { color: var(--brand-deep); text-decoration: underline; }
.act-task-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.act-task-main .act-task-title { flex: none; }
.act-task-notes { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.act-task-action { display: inline-flex; margin: 0; }
.act-task .staff-iconbtn { width: 30px; height: 30px; }
.act-task .staff-iconbtn .staff-icon { width: 15px; height: 15px; }
.act-task .staff-iconbtn:hover { color: var(--error-deep); }

/* ---------- History (zugeklappt am Seitenende) ---------- */
.act-history { margin-top: 0; }
.act-history > summary { color: var(--muted); }
.act-disclosure-body { padding: 12px 14px 14px; }
.act-disclosure-body > .staff-hint:first-child { margin-top: 0; }

/* ---------- Auswahl "Browse organisations" (Seite ohne Skript und Dialog) ---------- */
.act-browse-page { margin-top: 18px; }
.act-browse-filters { gap: 10px; }
.act-browse-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; }
.act-browse-checks .staff-check { color: var(--text); }
.act-browse-checks .staff-btn { margin-left: auto; }
.act-browse-summary { margin: 12px 0 8px; color: var(--muted); font-size: 13px; }
/* Offener Modal-Dialog (staff-dialog.js, immer showModal): die Seite dahinter scrollt nicht mit - sonst stehen rechts zwei
   Scrollbalken (Seite + Dialog bzw. Tabelle darin), Bediener 17.10.2026. Die Dialoge scrollen selbst (max-height). */
html:has(dialog[open]) { overflow: hidden; }

/* position: relative - Bezugsrahmen fuer die absolut positionierten .act-sr-only in den Zeilen: ohne ihn ragten sie
   aus dem scrollenden Bereich, der Dialog wurde rund 4000 px hoch und bekam einen zweiten Scrollbalken (Bediener 17.10.2026). */
.act-browse-tablewrap { position: relative; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.act-browse-table { font-size: 13px; }
.act-browse-table th { position: sticky; top: 0; background: var(--card); }
.act-browse-table td { vertical-align: middle; overflow-wrap: anywhere; }
.act-browse-name { color: var(--ink); font-weight: 700; }
a.act-browse-name:hover { color: var(--brand-deep); text-decoration: underline; }
.act-browse-nowrap { white-space: nowrap; }
.act-browse-row { cursor: pointer; }
.act-browse-pager { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.act-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Gemeinsame Optik beider Cockpit-Dialoge (Auswahl und "New organisation", UMBAU-006 Teil C);
   Mechanik in staff-dialog.js. */
.act-dialog,
.act-browse-dialog,
.staff-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.act-dialog::backdrop,
.act-browse-dialog::backdrop,
.staff-dialog::backdrop { background: rgba(36, 23, 47, 0.35); }
.act-browse-inner,
.staff-dialog-inner { padding: 20px; }
/* Kopf eines allgemeinen Dialogs (ausserhalb des Cockpits; dort .act-panel-head). */
.staff-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.staff-dialog-head h2 { margin: 0; }

/* Formular fuer einen bestimmten Datensatz im Dialog (UMBAU-019, styling.md 6.8, staff-form-dialog.js).
   Breite fuer "Log activity" und die Admin-Formulare; die Ueberschrift (Anlass, z. B. langer Next step)
   bleibt einzeilig mit Ellipse, der volle Text steht im Tooltip. Schmal: nahezu vollflaechig. */
.staff-form-dialog { width: min(760px, calc(100vw - 32px)); }
.staff-dialog-title { flex: 1 1 0; min-width: 0; }
.staff-dialog-title > .staff-icon { flex: 0 0 auto; }
.staff-dialog-title-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Einstieg, waehrend das Formular geholt wird (staff-form-dialog.js, aria-busy). */
a[data-form-dialog-link][aria-busy="true"] { cursor: progress; opacity: 0.6; }
@media (max-width: 600px) {
    .staff-form-dialog { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
    .staff-dialog-inner { padding: 14px; }
}
.act-browse-dialog .act-browse-tablewrap { max-height: calc(100vh - 380px); min-height: 120px; }

@media (max-width: 600px) {
    .act-browse-inner { padding: 14px; }
    .act-browse-checks .staff-btn { margin-left: 0; }
}

/* Auswahldialog "Browse organisations": der Uebernehmen-Knopf in der letzten Spalte darf nicht
   umbrechen ("Sele / ct" bei schmaler Spalte, Befund 2026-09-23 im Browser). */
.act-browse-tablewrap td:last-child .staff-btn,
dialog table td:last-child .staff-btn { white-space: nowrap; }

/* ---------- Supervision > Organisations (UMBAU-021): Bausteine des Browse in erweiterter Form ----------
   Sortierbare Spaltenkoepfe (Link, Pfeil nur am sortierten Kopf, aria-sort), gekuerzte Namen/Sportarten
   mit Tooltip, Sperrvermerk als Icon neben dem Status. Die Tabelle bricht nirgends um; reicht die Breite
   nicht, scrollt nur .act-browse-tablewrap. */
.act-browse-sort { display: inline-flex; align-items: center; gap: 3px; color: inherit; white-space: nowrap; }
.act-browse-sort:hover,
.act-browse-sort:focus-visible { color: var(--brand-deep); text-decoration: underline; }
.act-browse-sort .staff-icon { width: 13px; height: 13px; }
.act-browse-table th[aria-sort] { color: var(--ink); }
.act-browse-clip { display: block; max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-browse-clip-sm { max-width: 10em; }
/* Maske Organisations: Name und Sportarten etwas schmaler, damit die Tabelle bei 1440 px ohne Querscrollen passt. */
.sup-org-table .act-browse-clip { max-width: 14em; }
.sup-org-table .act-browse-clip-sm { max-width: 8em; }
.act-dnc-mini { display: inline-flex; align-items: center; margin-left: 6px; color: var(--error); vertical-align: middle; }
.act-dnc-mini .staff-icon { width: 14px; height: 14px; }
.sup-org-table th,
.sup-org-table td { white-space: nowrap; overflow-wrap: normal; }
.sup-org-table .act-overdue-date { padding: 1px 8px; font-size: inherit; font-weight: 600; letter-spacing: 0; }

/* Uebersicht: Kacheln = Filter-Links. Zahl gross, Beschriftung klein; Status mit dem Farbpunkt der
   Status-Badges (.staff-badge-<Ton> liefert die Farbe), Hinweise mit Icon (Warnfarbe bzw. Error-Rot).
   Die angezeigte Auswahl ist wie der aktive Nav-Eintrag markiert. */
.sup-intro { margin: 6px 0 0; }
.sup-tiles { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.sup-tile-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-tile {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card);
    color: var(--text);
}
.sup-tile-row-attention .sup-tile { flex: 0 1 auto; min-width: 170px; }
.sup-tile:hover { background: var(--brand-softer); text-decoration: none; }
.sup-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sup-tile[aria-current="true"] { border-color: var(--brand-deep); background: var(--brand-softer); box-shadow: inset 3px 0 0 var(--brand-deep); }
.sup-tile-num { color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sup-tile-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sup-tile-label .staff-icon { width: 14px; height: 14px; }
.sup-tile-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; }
.sup-tile-warn .sup-tile-label .staff-icon { color: var(--gold-deep); }
.sup-tile-stop .sup-tile-label .staff-icon { color: var(--error); }
.sup-empty { margin-top: 12px; }

/* ============================================================================================
   Activity cockpit - Bedienleiste und Aufteilung (UMBAU-006 Teil C), Urheberzeilen (Teil B).
   Farben nur ueber Tokens; Coral nur am "+"-Knopf (Primaeraktion der Leiste).
   ============================================================================================ */

/* ---------- Bedienleiste ueber die volle Breite ---------- */
.act-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.act-toolbar .act-search { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; margin: 0; }
.act-toolbar .act-lookup { flex: 1 1 auto; }
/* Keine Lupe links mehr - sie ist hinten im Feld ein Knopf; rechts Platz fuer ihn. */
.act-search .act-lookup input[type="search"] { padding: 10px 48px 10px 16px; }
.act-lookup-browse {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.act-lookup-browse .staff-icon { width: 18px; height: 18px; }
.act-lookup-browse:hover { background: var(--bg-alt); color: var(--ink); }
.act-lookup-browse:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.act-new-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; }
.act-new-btn .staff-icon { width: 20px; height: 20px; }
.act-new-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Inhalt unter der Leiste: Feed, Seitenbereiche, Organisation in zwei Spalten ---------- */
.act-main { margin-top: 18px; }
.act-new-page { margin-top: 18px; max-width: 760px; }
.act-org { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; margin-top: 18px; align-items: start; }
.act-org-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .act-org { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Dialog "New organisation" ---------- */
.act-new-dialog { width: min(720px, calc(100vw - 32px)); }

/* ---------- Urheberzeilen (Kopf, Personenkarte, Wiedervorlage) ---------- */
.act-authorship { margin: 6px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.act-task-main .act-authorship { margin-top: 2px; }

/* ============================================================================================
   Activity cockpit - Divisionen, Verknuepfungen, Memo, Telefonfelder (UMBAU-007 Teil B).
   Farben nur ueber Tokens. Coral nur fuer den aktiven Reiter und "+ Division" (aktive Navigation
   bzw. Anlegen); Hinweise in Gold, Bestaetigungen in Sage, Error-Rot nur fuer Fehler.
   ============================================================================================ */

/* ---------- Pfad oben: Verband · Verein › Division (Punkt 2) ---------- */
.act-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 16px 2px 0; color: var(--muted); font-size: 13px; }
.act-path-part { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.act-path-part .staff-icon { width: 14px; height: 14px; flex: 0 0 auto; }
a.act-path-part:hover { color: var(--brand-deep); text-decoration: underline; }
.act-path-part.is-current { color: var(--ink); font-weight: 700; }
.act-path-sep { color: var(--border-strong); }

/* ---------- Reiterleiste der Organisationsfamilie (Punkt 3) ---------- */
.act-family { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.act-fam { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 600; }
.act-fam small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.act-fam-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.act-fam-name .staff-icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.act-fam:hover { background: var(--brand-softer); }
.act-fam:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.act-fam.is-active { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
.act-fam.is-active .act-fam-name .staff-icon { color: var(--brand-deep); }
.act-fam-add { border-style: dashed; color: var(--brand-deep); }
.act-fam-add .act-fam-name .staff-icon { color: var(--brand-deep); }
.act-family-more { margin: 6px 2px 0; }

/* ---------- Division ohne Verein (Punkt 4) - Hinweis in Gold, kein Fehler ---------- */
.act-orphan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: var(--r-md); background: var(--gold-soft); font-size: 14px; }
.act-orphan-text { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.act-orphan-text > .staff-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--gold-deep); }
.act-orphan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Kopf: Typ mit Icon, Sportarten (Punkt 1 und 8) ---------- */
.act-type-badge { display: inline-flex; align-items: center; gap: 5px; }
.act-type-badge .staff-icon { width: 13px; height: 13px; }
.act-sports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.act-sport-chip { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: var(--r-pill); background: var(--sage-soft); color: var(--sage-deep); font-size: 12px; font-weight: 600; }
.act-sport-picks { padding-top: 10px; border-top: 1px solid var(--border); }
/* UMBAU-008, seit Katalog 1.1 (MEMBER-016): Spaltenbreite fuer die laengsten Katalognamen
   ("Yoga, Pilates & Entspannung" 189px, "Kraftsport & Schwerathletik" 183px inkl. Haken) ohne Umbruch;
   "dense" + volle Breite des Richtungs-Bereichs = der Bereich steht direkt unter der Zeile seiner
   Sportart, die uebrigen Sportarten ruecken auf (Components/Shared/StaffSportPicker.razor). */
.act-sport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); grid-auto-flow: row dense; gap: 6px 12px; }
.act-sport-grid .staff-check { color: var(--text); font-size: 13px; }
.act-sport-picks .act-authorship { margin-top: 8px; }
.act-style-group { grid-column: 1 / -1; margin: 0 0 4px 22px; padding: 6px 10px 8px; border-left: 2px solid var(--brand-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--bg); }
.act-style-group > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--text); }
.act-style-group > summary::-webkit-details-marker { display: none; }
.act-style-group > summary .staff-muted { font-weight: 400; }
.act-style-caret { width: 13px; height: 13px; color: var(--muted); transform: rotate(-90deg); transition: transform .15s ease; }
.act-style-group[open] > summary .act-style-caret { transform: none; }
.act-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin-top: 6px; }
.act-style-grid .staff-check { color: var(--text); font-size: 12.5px; }
.act-style-deeper { color: var(--muted); font-size: 11.5px; }
/* Mit sport-picker.js: Richtungen nur bei angehakter Sportart (ohne Skript immer als <details> da). */
.act-sport-picks.is-enhanced .act-style-group:not(.is-shown) { display: none; }
.act-parent-club { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 14px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; }
.act-parent-club > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.act-parent-club .staff-icon { width: 14px; height: 14px; color: var(--muted); }
.act-parent-club a { color: var(--brand-deep); font-weight: 600; }
.act-inline-form { display: inline-flex; margin: 0; }
.act-textbtn { padding: 0; border: 0; background: none; color: var(--brand-deep); font: inherit; font-size: 13px; cursor: pointer; }
.act-textbtn:hover { text-decoration: underline; }
.act-textbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Personen: weitere Verknuepfungen als Chips (Punkt 5) ---------- */
.act-also { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; font-size: 12px; }
.act-also-label { color: var(--muted); }
.act-also-chip { display: inline-block; max-width: 100%; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); color: var(--ink); overflow-wrap: break-word; line-height: 1.4; }
.act-also-chip .staff-icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; color: var(--muted); }
.act-also-chip:hover { border-color: var(--brand-soft); background: var(--brand-softer); color: var(--brand-deep); }
.act-also-role { color: var(--muted); }
.act-also-more { color: var(--muted); }
.act-edit-hint { margin: 0; font-size: 12px; }
.act-confirm-body .act-confirm-check { margin-bottom: 8px; color: var(--error-deep); }
.act-confirm-check input { accent-color: var(--error); }

/* "Add person": bestehende verknuepfen ODER neu anlegen */
.act-add-person > .act-disclosure-body { display: flex; flex-direction: column; gap: 10px; }
.act-subhead { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.act-subhead .staff-icon { width: 14px; height: 14px; color: var(--muted); }
.act-person-search { display: flex; margin: 0; }
.act-person-search .staff-searchfield input[type="search"] { width: 100%; padding: 8px 44px 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.act-person-search .staff-searchfield input[type="search"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.act-person-hits:empty { display: none; }
.act-person-hits .staff-hint { margin: 0; }
.act-hit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.act-hit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; }
.act-hit-main { display: flex; flex-direction: column; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.act-hit-meta { color: var(--muted); font-size: 12px; }
.act-hit-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.act-hit-form input[name="role"] { width: 140px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font: inherit; font-size: 12px; }
.act-hit-form .staff-check { color: var(--text); font-size: 12px; }
.act-hit .staff-btn { white-space: nowrap; }
.act-add-person .act-link-form { padding: 10px 12px; border: 1px solid var(--brand-soft); border-radius: var(--r-md); background: var(--brand-softer); }
.act-link-chosen { margin: 0; color: var(--text); font-size: 13px; }
.act-link-form .act-link-main { align-self: end; color: var(--text); }
.act-link-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }

/* "From the club" - dezent, nur Anzeige */
.act-club-persons { border-style: dashed; }
.act-club-persons-hint { margin: 0 0 10px; }
.act-club-persons-hint a { color: var(--brand-deep); font-weight: 600; }
.act-club-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.act-club-person { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.act-club-person:first-child { border-top: 0; }
.act-club-person.is-active { background: var(--brand-softer); }
.act-avatar-muted { background: var(--bg-alt); color: var(--muted); }
.act-club-contact { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 4px; font-size: 12px; }
.act-club-contact a { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-deep); overflow-wrap: anywhere; }
.act-club-contact .staff-icon { width: 12px; height: 12px; color: var(--muted); }

/* ---------- Timeline-Umschalter und Chip der Organisation (Punkt 7) ---------- */
.act-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 12px; }
.act-seg a { padding: 4px 11px; color: var(--muted); white-space: nowrap; }
.act-seg a + a { border-left: 1px solid var(--border); }
.act-seg a:hover { background: var(--bg-alt); color: var(--ink); }
.act-seg a.is-on { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.act-seg a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
#timeline .act-panel-head { margin-bottom: 12px; }
.staff-vtl-account.is-here { color: var(--muted); }

/* ---------- AI memo rechts oben (UMBAU-032, styling.md 6.19; ersetzt das Memo aus Punkt 13) ---------- */
/* Knapp gepolstert (Nachbesserung nach Review): an einer Division mit Reiterleiste bleibt "Save activity" bei 1440 x 900
   sichtbar (gemessen 896 px, styling.md 6.19). */
.act-memo { padding-top: 8px; padding-bottom: 8px; }
.ai-memo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Kopf in EINER Zeile: Titel, offenes Follow-up (nimmt den Rest, Ellipse), rechts der Status. */
.ai-memo-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Hoehere Spezifitaet als ".call-block .act-subhead" (margin unten 6px) - der Titel sitzt auf einer Linie mit dem Rest. */
.ai-memo-head > .staff-panel-title, .ai-memo-head > .act-subhead, .call-block .ai-memo-head > .act-subhead { flex: 0 0 auto; margin: 0; }
.ai-memo-head > .staff-panel-title { line-height: 20px; }
.ai-memo-hint { padding: 0 7px; border-radius: var(--r-pill); background: var(--bg-alt); color: var(--muted); font-size: 11px; font-weight: 600; cursor: help; }
.ai-memo-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
.ai-memo-followup { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.ai-memo-followup > .staff-icon { flex: 0 0 auto; align-self: center; width: 14px; height: 14px; color: var(--muted); }
.ai-memo-due { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-memo-followup.is-overdue .ai-memo-due { color: var(--gold-deep); font-weight: 600; }
.ai-memo-step { flex: 0 1 auto; min-width: 6em; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
/* Der Next step hat Vorrang: die Besitzerin wird zuerst gekuerzt (Nachbesserung nach Review). */
.ai-memo-owner { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Call cockpit (kompakt): das Follow-up in einer eigenen zweiten Zeile unter Titel und Status. */
.ai-memo.is-compact .ai-memo-head { flex-wrap: wrap; row-gap: 2px; }
.ai-memo.is-compact .ai-memo-followup { order: 1; flex-basis: 100%; }
.ai-memo-notes { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ai-memo-notes li { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 17px; }
.ai-memo-date { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-memo-notes .staff-chip { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; line-height: 14px; }
.ai-memo-person { flex: 0 1 auto; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.ai-memo-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
a.ai-memo-text:hover { color: var(--brand-deep); text-decoration: underline; }
/* Call cockpit (kompakt): der Anfang der Notiz (bis 160 Zeichen) vollstaendig sichtbar unter der Kopfzeile der Notiz. */
.ai-memo.is-compact .ai-memo-notes { gap: 6px; }
.ai-memo.is-compact .ai-memo-notes li { flex-wrap: wrap; row-gap: 2px; }
.ai-memo.is-compact .ai-memo-text { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.ai-memo-empty { margin: 0; color: var(--muted); font-size: 13px; }
/* Division: das AI memo des Vereins in EINER Zeile (wie frueher "Club memo"), alles weitere im Tooltip. */
.ai-memo-club { display: flex; align-items: baseline; gap: 0 8px; min-width: 0; margin-top: 8px; font-size: 12.5px; white-space: nowrap; }
/* Langer Vereinsname: das Label wird mit Ellipse gekuerzt (hoechstens 60 %), der ganze Name steht im Tooltip. */
.ai-memo-club-label { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-weight: 600; }
.ai-memo-club-label .staff-icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -0.1em; }
.ai-memo-club-label a { color: var(--brand-deep); }
.ai-memo-club-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ai-memo-club-text .staff-badge, .ai-memo-club-text .act-dnc-flag { margin-right: 4px; }
/* Kopf: "Parent club derived from the DTV name - please verify" mit "Confirm" (UMBAU-032). */
.act-facts li.act-verify { align-items: center; color: var(--gold-deep); font-size: 13px; }
.act-facts li.act-verify > .staff-icon { color: var(--gold-deep); }
.act-verify .act-textbtn { font-size: 13px; font-weight: 700; }

/* Erfassen kompakter (Bedien-Durchsicht UMBAU-007: "Save activity" ohne Scrollen trotz Memo). */
.act-log { gap: 10px; }
.act-log .act-danger { padding: 2px 0; border: 0; }

/* ---------- Feldhinweise und Feldfehler (Telefon, Namen) ---------- */
.act-field-hint { color: var(--muted); font-size: 11.5px; }
.act-field-msg { display: inline-flex; align-items: flex-start; gap: 5px; font-size: 12px; line-height: 1.35; }
.act-field-msg .staff-icon { width: 13px; height: 13px; margin-top: 1px; flex: 0 0 auto; }
.act-field-msg.is-error { color: var(--error-deep); }
.act-field-msg.is-ok { color: var(--sage-deep); }
.staff-form input[aria-invalid="true"] { border-color: var(--error); }

/* ---------- Feed-Filter nach Mitarbeiter (Punkt 12) ---------- */
.act-feed-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act-feed-filters .staff-filter { margin: 0; }
.act-user-filter { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.act-user-filter select,
.act-feed-when select,
.act-feed-when input[type="date"] { max-width: 220px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.act-user-filter select.is-active,
.act-feed-when select.is-active,
.act-feed-when input[type="date"].is-active { border-color: var(--brand-soft); background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.act-user-filter select:focus-visible,
.act-feed-when select:focus-visible,
.act-feed-when input[type="date"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.act-filter-active { color: var(--brand-deep); font-size: 14px; font-weight: 600; }

/* ---------- Feed: Filter Tag und Art, Grenze und Weiterblaettern (UMBAU-031, styling.md 6.18) ---------- */
.act-feed-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.act-feed-when { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.act-feed-when > .staff-icon { width: 14px; height: 14px; color: var(--muted); }
.act-feed-when .staff-link { font-size: 13px; }
.act-feed-count { margin: 0; white-space: nowrap; }
.act-feed-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; }
.act-feed-more .staff-btn .staff-icon { width: 14px; height: 14px; }
/* Schmale Fenster: Filterzeile und Hinweis duerfen umbrechen, sonst entstuende ein waagrechter Scrollbalken. */
@media (max-width: 600px) {
    .act-feed-when { flex-wrap: wrap; }
    .act-feed-when, .act-feed-count { white-space: normal; }
}

/* ---------- Suche und Auswahldialog: Icon der Organisationsart, Sportarten (Punkt 9) ---------- */
.act-browse-type { width: 28px; color: var(--muted); }
.act-browse-type .staff-icon { width: 16px; height: 16px; }
.act-browse-sports { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.act-lookup-option { flex-direction: row; align-items: flex-start; gap: 8px; }
.act-lookup-icon { display: inline-flex; margin-top: 2px; color: var(--muted); }
.act-lookup-icon .staff-icon { width: 15px; height: 15px; }
.act-lookup-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.act-small-dialog { width: min(640px, calc(100vw - 32px)); }
.act-dialog-hint { margin: 0; }

/* ---------- Verein und Division verknuepfen (UMBAU-033, styling.md 6.20) ----------
   Dialoge "Parent club" / "Add division": zwei Abschnitte "Search and choose" und "Create new" untereinander, getrennt
   durch eine Linie; Typwechsel vorab als Hinweis in Gold. Bestaetigungsdialog: Satz, Liste der Typwechsel, Aktionen. */
.act-orglink-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.act-orglink-choice:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.act-orglink-choice .act-field-hint, .act-orglink-choice .act-dialog-hint { margin: 0; }
.act-orglink-choice > form { align-self: stretch; }
.act-orglink-note { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--gold-deep); font-size: 13px; }
.act-orglink-note .staff-icon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
.act-orglink-confirm { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; font-size: 14px; }
.act-orglink-confirm p { margin: 0; }
.act-orglink-lead { color: var(--ink); overflow-wrap: anywhere; }
.act-orglink-changes { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-alt); list-style: none; font-size: 13px; }
.act-orglink-changes li { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.act-orglink-changes .staff-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--muted); }
.act-orglink-confirm .act-orglink-note { margin: 0; }
.act-orglink-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.act-orglink-actions .staff-btn { white-space: nowrap; }
/* Treffer der Auswahl: aktueller Verein, wenn die Organisation nicht als Division typisiert ist. */
.act-browse-parent { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.act-add-person .act-link-form[hidden] { display: none; }

/* ---------- Account manager im Kopf der Organisation (UMBAU-011 Teil A) ----------
   Eine Zeile unter "Main contact". Deaktiviert/geloescht = Handlungsbedarf, deshalb in Error-Rot
   (styling.md Schema-Regel 2: negativ nie Brand-Coral). "Change" oeffnet die Auswahl darunter. */
.act-head-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.act-head-owner .act-owner-label .staff-icon { color: var(--muted); }
.act-owner-none { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.act-owner-none .staff-icon { width: 14px; height: 14px; }
.act-head-owner.is-inactive strong,
.act-owner-flag { color: var(--error-deep); }
.act-owner-flag { font-size: 13px; font-weight: 700; }
.act-owner-via { font-size: 12px; }
.act-owner-edit > summary { list-style: none; }
.act-owner-edit > summary::-webkit-details-marker { display: none; }
.act-owner-edit[open] { flex-basis: 100%; }
.act-owner-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.act-owner-form select { max-width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.act-owner-form select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.act-owner-form .staff-check { color: var(--text); font-size: 13px; }
.act-owner-inactive { color: var(--error-deep); }

/* History zugeklappt: die letzte Aenderung in einer Zeile (UMBAU-011 Teil B Punkt 3). */
.act-history-last { flex: 0 1 auto; min-width: 0; margin-left: 6px; overflow: hidden; color: var(--muted); font-size: 12.5px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Log activity kompakter (UMBAU-011 Abschnitt 3a) ----------
   Ziel: "Save activity" bei 1440 x 900 ohne Scrollen, auch mit der Zeile When/Direction. Nichts
   entfaellt - nur engere Abstaende, flachere Felder, Notiz zwei Zeilen (waechst beim Tippen,
   field-sizing bzw. staff-forms.js) und "Do not contact" neben dem Knopf. */
#log { padding-top: 16px; padding-bottom: 16px; }
#log > .staff-panel-title { margin-bottom: 10px; }
/* Schnellwahl unter das Feld "When": dann passt "Direction" daneben (eine Zeile statt zwei, gemessen
   bei 1440 px: Feld 178 px + Schnellwahl 230 px + Richtung 207 px waren breiter als das Formular). */
.act-log .act-when-line { flex-direction: column; align-items: flex-start; gap: 4px; }
.act-log { gap: 8px; }
.act-log label { gap: 3px; }
.act-log .staff-fieldset > legend { margin-bottom: 4px; }
.act-log .staff-pillgroup { gap: 6px; }
.act-log .staff-pill-face { padding: 5px 11px; }
.act-log input:not([type="radio"]):not([type="checkbox"]),
.act-log select,
.act-log textarea { padding: 7px 10px; font-size: 14px; }
.act-log textarea[data-autogrow] { field-sizing: content; min-height: calc(2lh + 16px); max-height: calc(12lh + 16px); resize: vertical; }
.act-log .act-followup > summary { padding: 7px 10px; font-size: 13px; }
.act-log-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.act-log-foot .act-danger { flex: 1 1 240px; min-width: 0; }
.act-log-save { margin-left: auto; }
.act-danger-hint { color: var(--muted); font-size: 12px; }

/* ---------- Log activity: "Live contact" neben "When" (UMBAU-022 Abschnitt 2.4, styling.md 6.12) ----------
   Richtung und Erlaubnis-Frage stehen untereinander rechts von "When" (.act-log-side) und nutzen so die
   Hoehe, die "When" mit seiner Schnellwahl ohnehin belegt - "Save activity" bleibt bei 1440 x 900 ohne
   Scrollen sichtbar. flex-basis statt Inhaltsbreite: wird es eng, rueckt die Spalte nicht als Ganzes unter
   "When", sondern "Live contact" bricht in sich um (Label ueber die Knoepfe). */
.act-log-side { display: flex; flex: 1 1 200px; flex-direction: column; gap: 6px; min-width: 0; }
/* UMBAU-027 Paragraf 6b: die Auswahl "Live contact" ist entfallen - statt ihrer die Einwilligung in unsere Mails direkt
   unter "Result" (.act-consent, styling.md 6.16). */

/* ---------- "Do not contact" an Person und Organisation (UMBAU-012) - nur Error-Toene, nie Brand ----------
   Log activity: das Haekchen gilt der im Feld "Person" gewaehlten Person. Ohne Person verborgen, bei einer
   schon gesperrten Person statt des Haekchens der Warnhinweis - per :has() am Personenfeld, ohne
   JavaScript. Ohne :has()-Unterstuetzung: Haekchen sichtbar, Warnhinweis verborgen (der Endpunkt
   ignoriert das Haekchen ohne Person und meldet das). Der Hinweis steht in derselben Zeile wie
   "Save activity" (Bedien-Durchsicht: "Save activity" bei 900 px Hoehe ohne Scrollen). */
.act-dnc-warning { display: none; align-items: flex-start; gap: 6px; flex: 1 1 240px; min-width: 0; margin: 0; color: var(--error-deep); font-size: 12.5px; line-height: 1.35; }
.act-dnc-warning .staff-icon { width: 14px; height: 14px; margin-top: 1px; flex: 0 0 auto; color: var(--error); }
.act-log:has(select[name="personId"] option[value=""]:checked) .act-person-dnc,
.act-log:has(select[name="personId"] option[data-dnc]:checked) .act-person-dnc { display: none; }
.act-log:has(select[name="personId"] option[data-dnc]:checked) .act-dnc-warning { display: flex; }

/* Kennzeichen an Namen (Kopfzeile "Main contact", "From the club") und Karte der gesperrten Person. */
.act-dnc-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--error-soft); color: var(--error-deep); font-size: 12px; font-weight: 600; white-space: nowrap; }
.act-dnc-flag .staff-icon { width: 12px; height: 12px; color: var(--error); }
.act-dnc-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--error-soft); border-left: 3px solid var(--error); border-radius: var(--r-sm); background: var(--error-soft); color: var(--error-deep); font-size: 12.5px; }
.act-dnc-card strong { display: inline-flex; align-items: center; gap: 5px; }
.act-dnc-card .staff-icon { width: 13px; height: 13px; color: var(--error); }
.act-dnc-reason { flex: 1 1 100%; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* UMBAU-015: Kennzeichen als Link auf den Eintrag im Activity log; an der Karte "Show entry" und
   "Lift do not contact..." (Link ins Formular). */
a.act-dnc-flag { text-decoration: none; }
a.act-dnc-flag:hover, a.act-dnc-flag:focus-visible { text-decoration: underline; }
.act-dnc-actions { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; }
.act-dnc-actions a { color: var(--error-deep); font-weight: 600; }
.act-person.is-dnc .staff-avatar { background: var(--error-soft); color: var(--error-deep); }
/* Telefon/Mail einer gesperrten Person: ausgegraut, ohne Link (Hinweis im Tooltip). */
.act-contact-blocked { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); cursor: not-allowed; overflow-wrap: anywhere; }
.act-contact-blocked .staff-icon { width: 13px; height: 13px; color: var(--muted); }
.act-head-main.is-dnc strong { color: var(--muted); }

/* Abschnitt "Do not contact" in "Edit organisation" (seit UMBAU-015 nur Links ins Formular "Log activity")
   und Hinweis an der Division eines gesperrten Vereins. */
.act-dnc-edit { display: flex; flex-direction: column; gap: 8px; margin: 0 14px 14px; }
.act-dnc-edit > .staff-btn { align-self: flex-start; }
.act-dnc-edit .act-field-hint { margin: 0; }
.act-head-note.act-dnc-club { color: var(--error-deep); }
.act-head-note.act-dnc-club .staff-icon { color: var(--error); }
.act-head-note.act-dnc-club a { color: var(--error-deep); font-weight: 600; }

/* ---------- Sales-Kreislauf im Activity cockpit (UMBAU-013) ----------
   Kopf: Schrittleiste (Paragraf 7), darunter Status note, "No follow-up set" und Account manager in einer
   umbrechenden Zeile. Warnungen ("No follow-up set", "Overdue") in Gold = Warnfarbe, bewusst NICHT
   Error-Rot (Auftrag Teil B Punkt 5, styling.md Schema-Regel 2). */
.act-head-sales { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 10px 0 0; }
.act-head-sales > .act-head-owner { margin: 0; }
.act-head-sales > div:has(> details[open]) { flex-basis: 100%; }
.act-status-edit { min-width: 0; }
.act-status-edit > summary { list-style: none; }
.act-status-edit > summary::-webkit-details-marker { display: none; }
.act-status-edit[open] { flex-basis: 100%; }
/* Status note: der Text selbst ist der Knopf (wie das Memo), Stift dahinter. */
.act-status-note-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; cursor: pointer; color: var(--muted); font-size: 13px; border-radius: var(--r-sm); }
.act-status-note-btn > .staff-icon { flex: 0 0 auto; width: 13px; height: 13px; }
.act-status-note-btn:hover > .staff-icon,
.act-status-note-btn:hover .act-status-note-add { color: var(--brand-deep); }
.act-status-note-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.act-status-note-add { font-weight: 600; }

/* ---------- Schrittleiste (UMBAU-013 Paragraf 7) ----------
   Sieben verbundene Pfeil-Segmente, reines CSS (clip-path, keine Grafik), EINE Zeile. Erledigt = Sage
   (styling.md Schema-Regel 3: positiv/bestaetigt), aktuell = Brand (einziger Coral-Akzent der Leiste),
   kommend = blass. Angebotene Stufen sind Links (Hover Brand-Softer). "Not interested" (.is-closed):
   gedaempft bis zur zuletzt erreichten Stufe, daneben der Marker in der Ergebnisfarbe - kein Error-Rot.
   Schmale Breite: Labels werden kleiner (Container-Query), nie umgebrochen, kein Seiten-Scrollen. */
.act-stagebar-row { display: flex; align-items: center; gap: 8px; flex-basis: 100%; min-width: 0; container-type: inline-size; }
.act-stagebar { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.act-stage { --stage-bg: var(--bg-alt); --stage-fg: var(--muted); --notch: 8px; flex: 1 1 auto; min-width: 0; margin-left: calc(var(--notch) / -2);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%); }
.act-stage:first-child { margin-left: 0; clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); }
.act-stage:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--notch) 50%); }
.act-stage > a,
.act-stage > span { display: block; overflow: hidden; padding: 0 var(--notch) 0 calc(var(--notch) + 6px); background: var(--stage-bg); color: var(--stage-fg);
    font-size: 12px; font-weight: 600; line-height: 24px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.act-stage:first-child > a,
.act-stage:first-child > span { padding-left: 10px; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.act-stage:last-child > a,
.act-stage:last-child > span { padding-right: 10px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.act-stage.is-done { --stage-bg: var(--sage-soft); --stage-fg: var(--ink); }
.act-stage.is-current { --stage-bg: var(--brand-deep); --stage-fg: #fff; }
.act-stage.is-current > span { font-weight: 800; }
/* Wird es ganz eng, kuerzt die Ellipse zuerst die anderen Stufen - die aktuelle bleibt lesbar. */
.act-stage.is-current, .act-stagebar.is-closed .act-stage.is-last { flex-shrink: 0; }
.act-stage > span[title] { cursor: help; }
.act-stage.is-offered > a { text-decoration: none; }
.act-stage.is-offered > a:hover { background: var(--brand-softer); color: var(--brand-deep); }
/* Fokus: der Umriss wuerde vom clip-path abgeschnitten - deshalb innen (Schatten) plus Unterstrich. */
.act-stage > a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); text-decoration: underline; }
.act-stagebar.is-closed .act-stage.is-done { --stage-bg: var(--border); --stage-fg: var(--muted); }
.act-stagebar.is-closed .act-stage.is-last { --stage-bg: var(--border-strong); --stage-fg: var(--text); }
.act-stage-marker { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.act-stage-marker .staff-icon { width: 13px; height: 13px; }
.act-stage-ni { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: var(--r-pill); color: var(--muted); }
.act-stage-ni .staff-icon { width: 14px; height: 14px; }
.act-stage-ni:hover { background: var(--bg-alt); color: var(--text); }
.act-stage-ni:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@container (max-width: 470px) {
    .act-stage { --notch: 6px; }
    .act-stage > a, .act-stage > span { padding: 0 5px 0 10px; font-size: 11px; }
    .act-stage:first-child > a, .act-stage:first-child > span { padding-left: 6px; }
    .act-stage:last-child > a, .act-stage:last-child > span { padding-right: 6px; }
}
/* Sehr schmal: flachere Pfeile, kleinere Labels; der Kurzweg "Not interested" entfaellt (das Ergebnis
   im Formular bleibt der Weg). Reicht es dann immer noch nicht, kuerzt die Ellipse - Tooltip voll. */
@container (max-width: 420px) {
    .act-stage { --notch: 5px; }
    .act-stage > a, .act-stage > span { padding: 0 3px 0 8px; font-size: 10px; letter-spacing: -0.01em; }
    .act-stage:first-child > a, .act-stage:first-child > span { padding-left: 5px; }
    .act-stage:last-child > a, .act-stage:last-child > span { padding-right: 5px; }
    .act-stage-ni { display: none; }
}
/* Hinweis "Moving status to ..." im Formular "Log activity" - Aufbau wie "Completing follow-up",
   neutral (Aubergine); bei "Not interested" in dessen Ergebnisfarbe. */
.act-completing.act-moving { border-color: var(--aubergine-deep); background: var(--aubergine-soft); color: var(--aubergine-deep); }
.act-completing.act-moving.is-lost { border-color: #9A5B1F; background: #FDEEE0; color: #9A5B1F; }
/* "Do not contact" ueber Log activity (UMBAU-015): Sperren in den Error-Toenen der Sperrvermerke, Aufheben
   im Sage-Ton von .act-completing (positiv). "Also for all divisions" in derselben Zeile. */
.act-completing.act-dnc-intent.is-set { border-color: var(--error); background: var(--error-soft); color: var(--error-deep); }
.act-completing.act-dnc-intent > span { flex: 1 1 14em; min-width: 0; }
.act-completing.act-dnc-intent .staff-check { color: inherit; font-size: 13px; white-space: nowrap; }
.act-completing.act-dnc-intent.is-set input[type="checkbox"] { accent-color: var(--error); }

/* ---------- Ergebnis einer Activity: Icon und Farbe (Bediener 2026-09-25) ----------
   EINE Zuordnung fuer Formular, Timeline und Feed (Schluessel aus StaffActivityResults.Css). Die
   Klasse .staff-res-<Schluessel> setzt nur die beiden Farben; .staff-res-chip (Chip, Knoten, Marker)
   und .staff-res-pill (Auswahl im Formular) wenden sie an.
   Farben (Bediener 2026-09-26, ersetzt die Zuordnung vom 25.09.): Interested = Sage (gruen, positiv),
   Not interested = Error (rot, negativ - bewusste Ausnahme von "Error nur fuer Fehler"), Contacted und
   neutral = Grau (neutral), Not reached = blasses Aubergine/Violett (leicht negativ), Reklamation =
   Error wie bisher. */
.staff-res-neutral,
.staff-res-contacted     { --res-soft: var(--bg-alt); --res-deep: var(--muted); }
.staff-res-notreached    { --res-soft: var(--aubergine-soft); --res-deep: var(--aubergine-deep); }
.staff-res-interested    { --res-soft: var(--sage-soft); --res-deep: var(--sage-deep); }
.staff-res-notinterested { --res-soft: var(--error-soft); --res-deep: var(--error-deep); }
.staff-res-complaint     { --res-soft: var(--error-soft); --res-deep: var(--error-deep); }
.staff-res-chip { background: var(--res-soft); color: var(--res-deep); }
/* Notiz-Blase im Activity log in der Ergebnisfarbe (Bediener 2026-09-26): zarter Grund plus Kante links.
   Contacted/neutral bleiben wie gehabt (warmer Grund), damit Farbe nur dort auffaellt, wo sie etwas sagt. */
.staff-vtl-note.staff-res-interested,
.staff-vtl-note.staff-res-notinterested,
.staff-vtl-note.staff-res-notreached,
.staff-vtl-note.staff-res-complaint { background: var(--res-soft); border-color: transparent; border-left: 3px solid var(--res-deep); padding-left: 11px; }
.staff-chip.staff-res-chip .staff-icon { width: 12px; height: 12px; }
/* Auswahl: dezent (weiss, Icon in Ergebnisfarbe), gewaehlt deutlich gefuellt in der Ergebnisfarbe. */
.staff-res-pill .staff-icon { color: var(--res-deep); }
.staff-pill-option input:checked + .staff-pill-face.staff-res-pill { background: var(--res-deep); border-color: var(--res-deep); color: #fff; }
.staff-pill-option input:checked + .staff-pill-face.staff-res-pill .staff-icon { color: #fff; }
/* Nicht gewaehlt (Bediener 2026-09-26): schon in der Ergebnisfarbe - zarter Grund, Text und Symbol im
   Ton, Rahmen halbtransparent -, damit die Knoepfe dieselbe Farbsprache sprechen wie der Activity log.
   Hover: Rahmen voll im Ton. Gewaehlt: gefuellt (siehe oben). */
.staff-pill-option input:not(:checked) + .staff-pill-face.staff-res-pill {
    background: var(--res-soft);
    color: var(--res-deep);
    border-color: color-mix(in srgb, var(--res-deep) 35%, transparent);
}
.staff-pill-option:hover input:not(:checked) + .staff-pill-face.staff-res-pill { background: var(--res-soft); border-color: var(--res-deep); }

.act-status-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); font-size: 13px; }
.act-status-form label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
.act-status-form textarea,
.act-status-form input:not([type="radio"]) { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.act-status-form textarea { min-height: calc(2lh + 12px); resize: vertical; }
.act-status-form textarea[aria-invalid="true"] { border-color: var(--error); }
.act-status-note { min-width: 0; max-width: 100%; padding: 1px 8px; border-left: 2px solid var(--border-strong); color: var(--text); font-size: 13px; font-style: italic; overflow-wrap: anywhere; }
.act-nofollowup { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-deep); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.act-nofollowup .staff-icon { width: 13px; height: 13px; }
.act-nofollowup-mini { display: inline-flex; align-items: center; margin-left: 6px; color: var(--gold-deep); vertical-align: middle; }
.act-nofollowup-mini .staff-icon { width: 14px; height: 14px; }
/* "mail OK" in der Statuszeile des Kopfes (UMBAU-027 Paragraf 6b, ersetzt den Chip "Live contact"; styling.md 6.16):
   Sage wie eine erteilte Erlaubnis, Link auf die Activity der Einwilligung; "no mail consent yet" gedaempft Gold
   (Hinweis zum Nachfragen, kein Fehler). Einzeilig - die Zeile bricht bei 1440 px nicht um. */
.act-mailok { display: inline-flex; align-items: center; gap: 4px; background: var(--sage-soft); color: var(--sage-deep); white-space: nowrap; }
a.act-mailok:hover { color: var(--sage-deep); text-decoration: underline; }
.act-mailok .staff-icon { width: 12px; height: 12px; }
.act-consent-given { margin-left: 6px; font-size: 11.5px; }
.act-nomail { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-deep); font-size: 12.5px; white-space: nowrap; cursor: help; }
.act-nomail .staff-icon { width: 13px; height: 13px; }
.act-browse-status { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.act-browse-status select { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); color: var(--text); font: inherit; font-size: 13px; }

/* Offene Follow-ups: ueberfaellig in Warnfarbe (vorher Error-Rot), Ursprungs-Notiz, Aktionen rechts. */
.act-task.is-overdue { border-color: var(--gold); background: var(--gold-soft); }
.act-task.is-overdue .act-task-icon { color: var(--gold-deep); }
.act-task.is-overdue .act-task-due { color: var(--gold-deep); font-weight: 700; }
.act-task.is-completing { border-color: var(--sage); box-shadow: 0 0 0 2px var(--sage-soft); }
.act-task-due { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.act-overdue { padding: 0 7px; border-radius: var(--r-pill); background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.act-task-notes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-task-actions { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.act-task-actions .staff-btn { white-space: nowrap; }
/* Geoeffnetes Admin-"Close": die Aktionen brechen in eine eigene Zeile um, statt Titel und Notiz zu quetschen. */
/* UMBAU-017 Teil B: "Close" am Follow-up ist entfallen. "Delete" in Tabellenzeilen (Early access, Mail templates)
   markiert nur noch zur Loeschung - kompakt aufklappbar mit Pflicht-Begruendung. */
.staff-mark-deletion { display: inline-block; }
.staff-mark-deletion > summary { list-style: none; cursor: pointer; color: var(--error); font-size: 13px; }
.staff-mark-deletion > summary::-webkit-details-marker { display: none; }
.staff-mark-deletion > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.staff-mark-deletion-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.staff-mark-deletion-form input { width: 200px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-md); font: inherit; font-size: 12.5px; }
.staff-mark-deletion-form input[aria-invalid="true"] { border-color: var(--error); }
/* Personenkarte: "Mark person for deletion..." ueber "Log activity". */
.act-del-person { margin: 0 12px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.act-del-person .staff-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.act-del-person .staff-icon { width: 14px; height: 14px; }
/* Deletion run (UMBAU-017 Teil B): Kopfdaten einer Markierung. */
.staff-deletion-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.staff-deletion-facts > div { display: contents; }
.staff-deletion-facts dt { color: var(--muted); }
.staff-deletion-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Log activity: "Log & complete"-Hinweis, Pflicht-Kennzeichen, Follow-up-Zeile (immer sichtbar). */
.act-completing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; border: 1px solid var(--sage); border-radius: var(--r-md); background: var(--sage-soft); color: var(--sage-deep); font-size: 13px; }
.act-completing .staff-icon { width: 14px; height: 14px; }
.act-completing strong { color: var(--ink); }
.act-completing .staff-link { margin-left: auto; }
.act-req { margin-left: 4px; color: var(--gold-deep); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.act-req.is-soft { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.act-followup-row { grid-template-columns: minmax(150px, 1fr) minmax(150px, 2fr); gap: 6px 12px; }
.act-followup-err { grid-column: 1 / -1; }

/* ---------- Next step, Follow-up-Dialog, Activity bearbeiten (UMBAU-016) ----------
   Nur vorhandene Tokens und Bausteine (styling.md). "Next step" steht vorn (was zu tun ist), das Datum
   dahinter. Pflicht-Kennzeichen je gewaehltem Ergebnis per :has() (data-next-required am Radio, dieselbe
   Regel wie beim Speichern) - ohne :has()-Unterstuetzung bleibt "required" stehen, der Endpunkt entscheidet. */
/* Abschnitt "Follow-up" im Formular (UMBAU-016 Paragraf 8): leicht abgesetzt durch eine feine Linie, Kopf
   wie die Unterueberschriften (.act-subhead, Wecker wie "Open follow-ups"), keine eigene Box. Zwei gleich
   breite Spalten, damit "Due on" mit der Schnellwahl (im Stil von "When") in EINER Kopfzeile Platz hat. */
.act-followup { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.act-followup > .act-subhead { margin: 0; }
.act-followup-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.act-due { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; color: var(--muted); }
.act-due-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; }
.act-due-quick { flex-wrap: nowrap; }
.act-due-quick button { padding: 0 7px; font-size: 11.5px; line-height: 15px; }
.act-when-quick button[aria-pressed="true"] { border-color: var(--brand-soft); background: var(--brand-softer); color: var(--brand-deep); }
@media (max-width: 600px) {
    .act-followup-row { grid-template-columns: minmax(0, 1fr); }
}
.act-req-next-soft { display: none; }
.act-log:has(input[name="result"]:checked:not([data-next-required])) .act-req-next { display: none; }
.act-log:has(input[name="result"]:checked:not([data-next-required])) .act-req-next-soft { display: inline; }
/* Offene Follow-ups: der Next step ist der Oeffner des Dialogs (ohne JavaScript ein Link auf ?task=). */
a.act-task-title.act-task-open { display: block; overflow: hidden; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
/* Next step und Urheberzeile einzeilig (Bedien-Durchsicht 2026-09-25), voller Text im Tooltip. */
.act-task-main .act-authorship { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Haekchen "Do not contact this person" einzeilig neben "Save activity", der lange Satz im Tooltip. */
.act-person-dnc-label { white-space: nowrap; }
a.act-task-title.act-task-open:hover,
a.act-task-title.act-task-open:focus-visible { color: var(--brand-deep); text-decoration: underline; }
.act-task-hint { margin: 8px 0 0; }
.act-task-view { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); scroll-margin-top: 16px; }
.act-task-view > .act-panel-head { margin-bottom: 6px; }
.act-task-view .act-subhead { margin: 0; }
.act-task-detail { display: flex; flex-direction: column; gap: 12px; }
.act-task-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.act-task-facts > div { display: contents; }
.act-task-facts dt { color: var(--muted); font-size: 13px; }
.act-task-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.act-task-facts strong { color: var(--ink); }
.act-task-origin { padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--r-sm); background: var(--card); }
.act-task-origin-label { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.act-task-origin-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 13px; }
.act-task-origin-link .staff-icon { width: 13px; height: 13px; }
/* Activity bearbeiten am Eintrag: "Edit" rechts in der Meta-Zeile, Formular unter dem Kopf. */
.act-edit-link { margin-left: auto; font-size: 12px; }
.act-edit-form { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); gap: 8px; }
.act-edit-form .act-field-hint { margin: 0; }
.act-edit-form input:not([type="radio"]):not([type="checkbox"]),
.act-edit-form select,
.act-edit-form textarea { padding: 7px 10px; font-size: 14px; background-color: var(--card); }
.act-edit-form textarea[data-autogrow] { field-sizing: content; min-height: calc(3lh + 16px); max-height: calc(12lh + 16px); resize: vertical; }
.act-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* "edited ... by X" mit aufklappbaren Aenderungen (aus dem Aenderungsprotokoll). */
.act-edited { margin-top: 6px; color: var(--muted); font-size: 12px; }
.act-edited > summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; }
.act-edited > summary::-webkit-details-marker { display: none; }
.act-edited > summary .staff-icon { width: 12px; height: 12px; }
.act-edited > summary:hover { color: var(--brand-deep); }
.act-edited > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.act-edited-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); list-style: none; }
.act-edited-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; overflow-wrap: anywhere; }
.act-edited-list strong { color: var(--text); font-weight: 600; }
.act-edited-old { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.act-edited-new { color: var(--text); }
.act-edited-reason { flex-basis: 100%; font-style: italic; }

/* ---------- Lokale Benutzer-Umschaltung (UMBAU-020, nur Development) ----------
   Seite /devlogin im neutralen Auth-Layout (deshalb --neutral-*), dazu die beiden dezenten Einstiege
   auf /login und im Fuss der Seitenleiste. Ausserhalb von Development wird keine dieser Klassen
   gerendert. */
.auth-card.devlogin-card { max-width: 980px; }
.devlogin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.devlogin-head h1 { margin: 0 0 6px; }
.devlogin-head .auth-sub { margin: 0; }
.devlogin-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.devlogin-actions form { margin: 0; }
.devlogin-btn {
    display: inline-block;
    background: var(--neutral-ink);
    color: #fff;
    border: 1px solid var(--neutral-ink);
    padding: 6px 12px;
    border-radius: var(--r-md);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
}
.devlogin-btn:hover { filter: brightness(1.15); }
.devlogin-btn-outline { background: transparent; color: var(--neutral-ink); border-color: var(--neutral-border); }
.devlogin-btn-outline:hover { background: var(--neutral-bg); filter: none; }
.devlogin-hint { font-size: 13px; color: var(--neutral-muted); background: var(--neutral-bg); border-radius: var(--r-md); padding: 8px 12px; margin: 0 0 14px; }
.devlogin-hint code { font-size: 12px; }
.devlogin-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.devlogin-filter input[type="search"] { flex: 1 1 240px; min-width: 160px; padding: 7px 12px; border: 1px solid var(--neutral-border); border-radius: var(--r-md); font: inherit; font-size: 14px; }
.devlogin-filter select { padding: 7px 10px; border: 1px solid var(--neutral-border); border-radius: var(--r-md); font: inherit; font-size: 14px; background: var(--neutral-card); }
.devlogin-reset { font-size: 13px; color: var(--neutral-muted); }
.devlogin-count { font-size: 13px; color: var(--neutral-muted); margin: 0 0 6px; }
.devlogin-table-wrap { overflow-x: auto; }
.devlogin-table td { vertical-align: middle; }
.devlogin-table tbody tr:hover { background: var(--neutral-bg); }
.devlogin-cell-action { text-align: right; white-space: nowrap; }
.devlogin-cell-action form { margin: 0; }
.devlogin-self { font-size: 12px; color: var(--neutral-muted); }
.devlogin-row-locked td { color: var(--neutral-muted); }
.auth-dev-link { display: block; margin-top: 14px; text-align: center; font-size: 12px; color: var(--neutral-muted); }
.auth-dev-link:hover { color: var(--neutral-ink); }
/* UMBAU-020 Nachtrag: schwebende Dev-Login-Schaltflaeche auf /login (Muster aus MEMBER-014,
   Member MainLayout.razor.css). Ruhezustand halbtransparent und nur Symbol, beim Ueberfahren mit
   Beschriftung. Die Anmeldeseite hat kein Logo links oben - nichts wird verdeckt. */
.devlogin-bubble {
    position: fixed; top: 16px; left: 16px; z-index: 2000;
    display: inline-flex; align-items: center; gap: 0; height: 34px; padding: 0 9px;
    border-radius: 999px; background: var(--brand); color: #fff; text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25); opacity: .55;
    transition: opacity .15s ease, gap .15s ease, padding .15s ease;
}
.devlogin-bubble:hover, .devlogin-bubble:focus-visible { opacity: 1; gap: 8px; padding: 0 14px 0 10px; color: #fff; }
.devlogin-bubble:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.devlogin-bubble-text { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 600; transition: max-width .15s ease; }
.devlogin-bubble:hover .devlogin-bubble-text, .devlogin-bubble:focus-visible .devlogin-bubble-text { max-width: 120px; }
/* Angemeldet (StaffMainLayout): "heisse Ecke" links oben. Nur die 14x14-px-Ecke nimmt die Maus an;
   dann erscheint die Schaltflaeche an der gewohnten Stelle und bleibt, solange die Maus auf ihr ist
   (sie ist Kind der Ecke, :hover bleibt erhalten). Per Tastatur erscheint sie mit dem Fokus. */
.devlogin-corner { position: fixed; top: 0; left: 0; width: 14px; height: 14px; z-index: 2000; }
.devlogin-bubble-shell { top: 6px; left: 6px; opacity: 0; pointer-events: none; } /* ueberlappt die Ecke - kein Spalt beim Hinueberfahren */
.devlogin-corner:hover .devlogin-bubble-shell,
.devlogin-bubble-shell:focus-visible { opacity: 1; pointer-events: auto; gap: 8px; padding: 0 14px 0 10px; }
.devlogin-corner:hover .devlogin-bubble-shell .devlogin-bubble-text,
.devlogin-bubble-shell:focus-visible .devlogin-bubble-text { max-width: 120px; }
/* UMBAU-030: "Switch user" und darunter "Mails" (Mailpit) stehen in EINER Spalte (.devlogin-stack) an der
   gewohnten Stelle (6/6 px, ueberlappt die Ecke). Solange die Ecke ueberfahren wird, nimmt die ganze Spalte die
   Maus an - samt dem 4-px-Abstand zwischen den Pillen; align-items: stretch macht beide gleich breit. So gibt es
   keine Stelle, an der :hover der Ecke abreisst, auch nicht senkrecht unter dem Wort "user" (lueckenlos, Review
   UMBAU-030). In Ruhe nimmt die Spalte keine Maus an - nur die 14x14-px-Ecke. */
.devlogin-stack { position: fixed; top: 6px; left: 6px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; pointer-events: none; }
.devlogin-corner:hover .devlogin-stack { pointer-events: auto; }
.devlogin-stack .devlogin-bubble-shell { position: relative; top: auto; left: auto; }
@media (prefers-reduced-motion: reduce) { .devlogin-bubble, .devlogin-bubble-text { transition: none; } }

/* ============================================================================================
   Pools (UMBAU-023, styling.md 6.13): Chip je Pool-Mitgliedschaft (Activity cockpit, Mitgliederliste,
   Legende), Zaehler (Liste), Punkt (Kacheln), Kurzzeichen (Namenszelle unter Supervision > Organisations).
   Farben NUR aus Tokens. Die FARBE kommt allein aus dem Kontaktzustand im Pool, je Zustand eine Klasse
   is-<css> (StaffPoolStates.Css, seit UMBAU-028 in den Woertern der Activity): New = Umriss neutral (is-new),
   Not reached = Warnton (is-warn), Contacted = gefuellt Erfolgston (is-ok). Ein geschlossener Pool ist grau
   gedaempft (.is-closed STATT der Farbe, Stand eingefroren, kein Wort "closed"). "done" ist ein zusaetzlicher
   Marker (Haekchen, .staff-pool-mark). Der Zustand steht immer auch in Worten im Chip bzw. im Tooltip - Farbe
   ist nie das einzige Signal.
   ============================================================================================ */
.staff-pool-chip {
    /* inline-block statt inline-flex: die Marker (Mittelpunkt, "done", "postponed") behalten ihre Leerzeichen wie Fliesstext. */
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: help;
}
.staff-pool-chip.is-new,
.staff-pool-count.is-new { background: transparent; border-color: var(--border-strong); color: var(--text); }
.staff-pool-chip.is-ok,
.staff-pool-count.is-ok { background: var(--sage-deep); color: var(--card); }
.staff-pool-chip.is-warn,
.staff-pool-count.is-warn { background: var(--gold); color: var(--ink); }
/* Gedaempft: nur noch Hinweis-Chips ("Closed <Datum>" im Kopf eines Pools, "already a member"), kein Zustand. */
.staff-pool-chip.is-muted { background: var(--bg-alt); color: var(--muted); }
/* Marker "done": Suffix mit Haekchen in der Textfarbe des Chips; Zaehler "done" gedaempft (quer zu den Zustaenden). */
.staff-pool-check { width: 11px; height: 11px; margin-right: 2px; vertical-align: -1px; }
.staff-pool-count.is-done { background: var(--bg-alt); color: var(--muted); }

/* Punkt in den Zaehler-Kacheln und in den Ueberschriften der Listen-Vorschau. */
.staff-pool-dot { flex: 0 0 auto; width: 9px; height: 9px; border: 1px solid transparent; border-radius: var(--r-pill); }
.staff-pool-dot.is-new { border-color: var(--border-strong); background: transparent; }
.staff-pool-dot.is-soft { border-color: var(--gold-deep); background: var(--gold-soft); }
.staff-pool-dot.is-ok { background: var(--sage-deep); }
.staff-pool-dot.is-warn { background: var(--gold); }

/* Fortschritt in der Pool-Liste: je Zustand eine kleine Zahl in der Chip-Farbe; 0 gedaempft ohne Flaeche. */
.pool-progress { display: inline-flex; gap: 4px; }
.staff-pool-count {
    display: inline-block;
    min-width: 30px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: help;
}
/* UMBAU-025: Fortschritt je Workflow-Schritt - neutral (die Farben gehoeren dem Kontaktzustand), dropped out gedaempft;
   etwas schmaler, damit sieben Zahlen in die Spalte passen. Vor .is-zero: eine 0 bleibt gedaempft. */
.staff-pool-count.is-step { border-color: var(--border-strong); background: var(--card); color: var(--ink); }
.staff-pool-count.is-dropped { background: var(--bg-alt); color: var(--muted); }
.pool-progress-steps { gap: 3px; }
.pool-progress-steps .staff-pool-count { min-width: 22px; padding: 0 3px; }
.pool-legend-sep { margin-left: 4px; }
.staff-pool-count.is-zero { background: transparent; border-color: var(--border); color: var(--muted); font-weight: 400; }
/* Geschlossener Pool (UMBAU-028): grau gedaempft wie .is-muted, der Text zeigt den eingefrorenen Stand des Zeitraums
   (Chip, Zaehler der Liste). Am Chip steht is-closed STATT der Farbklasse; an den Zaehlern steht es nach .is-zero und
   gewinnt dort Flaeche und Schrift. */
.staff-pool-chip.is-closed,
.staff-pool-count.is-closed { background: var(--bg-alt); border-color: var(--border); color: var(--muted); }
.pool-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }

/* Kurzzeichen eines Pools (W1) - klein, neutral; geschlossene gedaempft. Als Link in Administration > Call strategies. */
.staff-pool-tag {
    display: inline-block;
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    padding: 0 6px;
    background: var(--card);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    /* Ohne Code steht der volle Poolname im Kurzzeichen - gekuerzt mit Ellipse, voller Name im Tooltip. Alle
       Fundstellen sind Flex-Behaelter (Namenszelle, Call strategies), das Kurzzeichen ist dort ein Block. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.staff-pool-tag.is-closed { background: var(--bg-alt); color: var(--muted); font-weight: 600; }
a.staff-pool-tag:hover { border-color: var(--brand-deep); color: var(--brand-deep); text-decoration: none; }
/* Zweite Zeile der Namenszelle (Supervision > Organisations): Kurzzeichen, dann die Sportarten gekuerzt - so breit
   wie der gekuerzte Name, damit die Tabelle bei 1440 px ohne Querscrollen bleibt. */
.sup-name-line2 { display: flex; align-items: center; gap: 4px; max-width: 14em; margin-top: 2px; overflow: hidden; white-space: nowrap; }
.sup-name-line2 .staff-pool-tag { max-width: 8em; }
.sup-name-sports { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Activity cockpit: Zeile "Pools" im Kopf (gleiche Form wie "Club:" / "Main contact:"). */
.act-head-pools { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 10px; }
.act-pools-label .staff-icon { color: var(--muted); }
/* .act-head-main-label fuellt das Polygon seines Icons gold (Stern des Main contact, 6.12) - das Icon "layers"
   beginnt mit einem Polygon und bleibt hier ein Umriss (gleiche Spezifitaet, steht spaeter). */
.act-pools-label .staff-icon polygon { fill: none; }
/* Chip ohne Code (voller Poolname) laeuft nicht aus dem Panel: als Block im Flex-Behaelter .act-head-pills
   gekuerzt mit Ellipse; alles Weitere steht im Tooltip und fuer Screenreader im Chip. */
.act-head-pools .staff-pool-chip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Kopf ohne Umbruch (UMBAU-028 Paragraf 2, Nachbesserung nach Review): die Chips stehen in EINER Zeile. Ab zwei Chips
   zeigen geschlossene Pools und fertige Mitgliedschaften nur den Code (.is-short, schrumpft nicht); reicht der Platz
   dann noch nicht, kuerzen die uebrigen Chips mit Ellipse - der volle Text steht im Tooltip und fuer Screenreader. */
.act-head-pools .act-head-pills { flex-wrap: nowrap; overflow: hidden; }
.act-head-pools .staff-pool-chip.is-short { flex: 0 0 auto; }

/* Supervision > Organisations: Summenzeile und "Add to pool" in einer Zeile. */
.sup-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sup-list-head .act-browse-summary { margin-bottom: 8px; }

/* Supervision > Pools: Liste, Kopf, Zuweisung, Kacheln, Mitglieder, Vorschau "Add from a list". */
.pool-list-panel,
.pool-head,
.pool-import,
.pool-form-panel { margin-top: 18px; }
.pool-table th,
.pool-table td,
.pool-member-table th,
.pool-member-table td,
.pool-import-table th,
.pool-import-table td { white-space: nowrap; overflow-wrap: normal; }
.pool-table tr.is-closed td { color: var(--muted); }
.pool-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Breiten so, dass beide Tabellen bei 1440 x 900 ohne Querscrollen passen, auch mit senkrechtem Scrollbalken,
   Sperr-Symbol und dreistelligem Platz "#" (voller Text im Tooltip). */
/* UMBAU-025: Pool-Liste mit Spalte "Workflow", Mitgliederliste mit Spalte "Step" - die Kuerzungen dafuer schmaler, die
   Pool-Liste mit 8 px Zellenabstand (gemessen bei 1440 x 900: sieben dreistellige Zaehler, Code mit 3 Zeichen, geschlossener
   Pool - 1044 px bei 1072 px Platz mit senkrechtem Scrollbalken). */
.pool-table th,
.pool-table td { padding-left: 8px; padding-right: 8px; }
.pool-table .act-browse-clip { max-width: 10em; }
.pool-table .act-browse-clip-sm { max-width: 6.5em; }
.pool-member-table .act-browse-clip { max-width: 11em; }
.pool-member-table .act-browse-clip-sm { max-width: 7.5em; }
.pool-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pool-head-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--text); }
.pool-fact { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pool-fact .staff-icon { width: 14px; height: 14px; color: var(--muted); }
.pool-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pool-note { margin: 12px 0 0; color: var(--text); font-size: 14px; white-space: pre-line; }
.pool-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; }
.pool-assign .staff-check { display: inline-flex; gap: 6px; color: var(--text); }
.pool-assign-label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 600; }
.pool-assign-label .staff-icon { width: 14px; height: 14px; }
.pool-tiles .sup-tile { flex: 0 1 auto; min-width: 130px; }
/* UMBAU-025: Kacheln der Workflow-Schritte (plus Done, Dropped out, Postponed, Do not contact) teilen sich die Zeile. */
.pool-tile-steps .sup-tile { flex: 1 1 auto; min-width: 0; }
/* Zweite, kleinere Filterzeile: alle Mitglieder und die Kontaktzustaende im Pool. */
.pool-subfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.pool-subfilter { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--text); white-space: nowrap; }
.pool-subfilter strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pool-subfilter:hover { background: var(--brand-softer); text-decoration: none; }
.pool-subfilter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pool-subfilter[aria-current="true"] { border-color: var(--brand-deep); background: var(--brand-softer); }
.pool-subfilter-label { margin-left: 6px; color: var(--muted); white-space: nowrap; }
/* Spalte "Step" der Mitgliederliste: fertig im Erfolgston, dropped out gedaempft. */
.pool-step { max-width: 7.5em; }
.pool-step.is-done { color: var(--sage-deep); font-weight: 600; }
.pool-step.is-dropped { color: var(--muted); }
/* Seitenkopf der Detailseite: langer Poolname einzeilig mit Ellipse, "All pools" bricht nicht um. */
.pool-page-head h1 { flex: 1 1 auto; min-width: 0; }
.pool-page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-back-link { flex: 0 0 auto; white-space: nowrap; }
.pool-form-row { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; }
/* UMBAU-028: Code nur lesend (vom Server vergeben) - beschriftet wie ein Feld, der Wert ohne Rahmen in der Hoehe eines
   Eingabefelds; vor dem Anlegen gedaempft "automatic". */
.pool-form-code { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.pool-form-code-value { padding: 10px 0; border: 1px solid transparent; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pool-form-code-value.is-pending { font-weight: 400; color: var(--muted); }
/* Zweite Zeile (Strategy, Parameter, Locked): nur drei Felder - der Parameter bekommt so viel Platz wie die Strategie. */
.pool-form-row-strategy { grid-template-columns: 2fr 2fr 1fr; }
/* Dritte Zeile (UMBAU-025): Workflow und Auto-add, seit UMBAU-027 dazu Routing - drei gleich breite Spalten. */
.pool-form-row-workflow { grid-template-columns: 1fr 1fr 1fr; }
.pool-form-lock { padding-bottom: 8px; }
.pool-import h2 { display: flex; align-items: center; gap: 8px; }
.pool-import-head { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 14px; color: var(--ink); }
.pool-import-warn { display: flex; align-items: center; gap: 6px; }
.pool-import-warn .staff-icon { color: var(--gold-deep); }
.pool-import-wrap { max-height: 360px; }
.pool-import-table tr.is-member td { color: var(--muted); }
.pool-import-form .staff-head-actions { margin-top: 16px; }
/* Knopfzeile der Vorschau klebt am unteren Fensterrand, solange das Formular reicht: bei langen Listen (drei
   Tabellen) bleibt "Add ... sure + ticked suggestions" ohne Scrollen sichtbar. */
.pool-import-actions { position: sticky; bottom: 0; padding: 10px 0; border-top: 1px solid var(--border); background: var(--card); }
@media (max-width: 760px) {
    .pool-form-row,
    .pool-form-row-strategy,
    .pool-form-row-workflow { grid-template-columns: 1fr; }
}

/* Administration > Call strategies (lesend). */
.strategy-card { margin-top: 18px; }
.strategy-card h2 { display: flex; align-items: baseline; gap: 8px; }
.strategy-key { background: var(--brand-softer); padding: 1px 6px; border-radius: var(--r-sm); font-size: 12px; color: var(--brand-deep); }
.strategy-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.strategy-facts > div { display: contents; }
.strategy-facts dt { color: var(--muted); }
.strategy-facts dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.strategy-sample-head { margin: 16px 0 6px; font-size: 14px; color: var(--ink); }
.strategy-sample { margin: 0; padding-left: 22px; font-size: 13px; columns: 2; column-gap: 32px; }
.strategy-sample li { break-inside: avoid; padding: 1px 0; }
/* Nachbesserung UMBAU-026: eine Zeile je Organisation, zu lang = "..." (volle Zeile im title am <li>). Am inneren Block,
   nicht am <li> - overflow am <li> schneidet die Nummer (Marker aussen) ab. */
.strategy-sample-line { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 760px) {
    .strategy-sample { columns: 1; }
}

/* ---------- Follow-up: Datum und optionale Uhrzeit (UMBAU-024 Paragraf 5, beide Cockpits, styling.md 6.14) ----------
   "Due on" und "at" in EINER Zeile: das Datum nimmt den Rest, die Uhrzeit ist schmal. Ohne Uhrzeit gilt 08:00. */
.act-due-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.act-log .act-due-line input[type="date"] { flex: 1 1 auto; width: auto; min-width: 0; }
.act-log .act-due-line .act-due-time { flex: 0 0 6.5em; width: 6.5em; }
.act-due-at { color: var(--muted); font-size: 12px; }
/* Timeline: "via Call cockpit · W1" (UMBAU-024). */
.act-via-call { color: var(--muted); }

/* ---------- Call cockpit (UMBAU-024, styling.md 6.14) ----------
   Nur Tokens aus styling.md 2 und vorhandene Bausteine (.staff-panel, .staff-pill, .staff-chip, .staff-badge,
   .staff-btn, .act-log, .act-subhead). Links (CURRENT) ca. 60 %, rechts (NEXT) ca. 40 %; die Hauptknoepfe stehen
   jeweils direkt unter dem Kopf der Organisation, damit sie bei 1440 x 900 ohne Scrollen sichtbar sind. */
.call-home-link { font-size: 13px; }
.call-banner { align-items: center; margin-top: 14px; }
.call-banner > span { flex: 1 1 auto; min-width: 0; }
.call-start { margin-top: 18px; max-width: 1040px; }
.call-start-counts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.call-start-counts li { display: flex; align-items: baseline; gap: 6px; }
.call-start-counts li > span:first-child { color: var(--muted); }
.call-start-counts li.is-due strong { color: var(--gold-deep); }
.call-start-rule { margin: 6px 0 0; }
.call-start .call-start-pools-title { margin: 20px 0 10px; }
.call-pools { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.call-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; }
.call-pool:has(input[type="radio"]:checked) { border-color: var(--brand-soft); background: var(--brand-softer); }
.call-pool-pick { display: inline-flex; flex: 1 1 280px; align-items: center; gap: 8px; min-width: 0; color: var(--ink); cursor: pointer; }
.call-pool-name { min-width: 0; max-width: 22em; overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.call-pool-progress { color: var(--muted); white-space: nowrap; }
.call-pool-strategy { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text); white-space: nowrap; }
.call-pool-strategy label { display: inline-flex; align-items: center; gap: 6px; }
.call-pool-strategy select { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.call-start-form { margin: 4px 0 0; }
.call-today { margin: 14px 0 0; }
/* Nachbesserung UMBAU-026: "What do the strategies mean?" (styling.md 6.14) - Liste wie Administration > Call strategies. */
.call-strategy-help > .strategy-facts { margin-top: 10px; font-size: 13px; }

/* Arbeitsbildschirm: Kopfzeile, zwei Spalten. */
.call-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 48px; margin-top: 14px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); font-size: 13px; }
.call-bar-pool { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.call-bar-pool strong { color: var(--ink); }
.call-bar-queue { color: var(--muted); white-space: nowrap; }
.call-bar-queue strong { color: var(--ink); }
.call-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.call-timer { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.call-timer.is-talking { color: var(--sage-deep); }
.call-paused { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-deep); font-weight: 600; }
.call-paused .staff-icon { width: 14px; height: 14px; }
.call-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-top: 12px; align-items: start; }
@media (max-width: 900px) {
    .call-grid { grid-template-columns: minmax(0, 1fr); }
}
.call-current,
.call-next { padding: 14px 16px; }
.call-next .call-next-title { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Kopf einer Organisation (links voll, im Gespraech einzeilig). */
.call-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.call-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.call-head .call-name { margin: 0; min-width: 0; overflow: hidden; color: var(--ink); font-size: 18px; white-space: nowrap; text-overflow: ellipsis; }
.call-open-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.call-open-link .staff-icon { width: 12px; height: 12px; }
/* Unterzeile EINZEILIG (Review UMBAU-034): lange Ort-/Club-/Association-Angabe kuerzt mit Ellipse (voll im title),
   die Badges Art und Status bleiben in derselben Zeile - sonst rutschten "Call"/"Save & next" nach unten. */
.call-head-sub { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 13px; }
.call-head-sub > .staff-badge { flex: 0 0 auto; white-space: nowrap; }
.call-head-sub .call-head-number { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.call-head-sub .call-head-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.call-head-pools { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.call-head-pools .staff-pool-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.call-reason { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--brand-deep); font-size: 13px; font-weight: 600; }
.call-reason .staff-icon { width: 13px; height: 13px; }
.call-dnc { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--error-deep); font-size: 13px; font-weight: 600; }
.call-dnc .staff-icon { width: 14px; height: 14px; }
.call-head-line { flex-direction: row; align-items: baseline; gap: 10px; white-space: nowrap; }
.call-head-line .call-name { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ink); font-size: 16px; text-overflow: ellipsis; }
.call-head-line .call-head-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.call-head-line .call-reason { flex: 0 0 auto; }

/* Knoepfe je Zustand direkt unter dem Kopf. */
.call-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 4px; }
.call-actions-hint { flex: 1 1 200px; min-width: 0; margin: 0; }
.call-paused-note { display: flex; align-items: center; gap: 6px; margin: 12px 0; color: var(--gold-deep); font-size: 13px; }
.call-paused-note .staff-icon { width: 14px; height: 14px; }
.call-talk { gap: 6px; margin-top: 10px; }
.call-talk > label { display: block; }
.call-talk .call-actions { margin: 4px 0 0; }

/* Nachbearbeitung: das Formular "Log activity" des Call cockpit (.act-log), kompakt in Zeilen. */
.call-log { margin-top: 10px; }
.call-log-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 16px; }
.call-log-row .act-when { flex: 0 0 auto; }
/* "Log note instead": Chip im Kopf (Aubergine wie "Not reached" - zurueckgestellt, kein Kontakt). */
.call-mode-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--aubergine-soft); color: var(--aubergine-deep); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: help; }
.call-mode-chip .staff-icon { width: 12px; height: 12px; }
.call-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11.5px; }
.call-starters[hidden] { display: none; }
.call-starters button { padding: 1px 7px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--card); color: var(--text); font: inherit; font-size: 11.5px; cursor: pointer; }
.call-starters button:hover { background: var(--bg-alt); color: var(--ink); }
.call-starters button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.call-nr-hint { display: none; grid-column: 1 / -1; align-items: center; gap: 5px; margin: 0; }
.call-nr-hint .staff-icon { width: 12px; height: 12px; }
.act-log:has(input[name="result"][value="NotReached"]:checked) .call-nr-hint { display: flex; }
/* "Save & next" zuerst - im Quelltext (Enter = Standard-Knopf) UND sichtbar, damit Tab-Folge und Anzeige uebereinstimmen. */
.call-save-buttons { display: flex; gap: 8px; margin-left: auto; }

/* Details: Club, Personen, Follow-up, letzte Activities, Memo. */
.call-details { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.call-block .act-subhead { margin: 0 0 6px; }
.call-block-action { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 600; }
.call-block-action .staff-icon { width: 12px; height: 12px; }
.call-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.call-persons { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.call-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; }
.call-person.is-main { border-color: var(--brand-soft); background: var(--brand-softer); }
.call-person-name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink); }
.call-star { width: 13px; height: 13px; color: var(--gold); }
.call-person-contact { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.call-person-contact a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); overflow-wrap: anywhere; }
.call-person-contact .staff-icon { width: 13px; height: 13px; color: var(--brand-deep); }
.call-person-actions { display: inline-flex; align-items: baseline; gap: 10px; margin-left: auto; font-size: 12px; }
.call-person-actions .act-textbtn { font-size: 12px; font-weight: 600; }
.call-none { margin: 0; }
/* Division: Personen des Vereins (nur lesend) unter den eigenen - kleine Zwischenzeile wie "From the club" im Activity cockpit. */
.call-club-persons { margin: 8px 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
/* UMBAU-032: .call-task und .call-memo sind entfallen - Follow-up und Notizen zeigt das AI memo (.ai-memo); "Last activities"
   (alle Arten, auch ohne Notiz, z. B. "Not reached") bleibt daneben stehen (Nachbesserung nach Review). */
.call-recent { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.call-recent li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.call-recent-date { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.call-recent .staff-chip { flex: 0 0 auto; }
.call-recent-subject { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.call-recent-by { flex: 0 0 auto; }
.call-lease { margin: 6px 0 0; }
.call-next-actions { margin-top: 14px; }
.call-research { margin-top: 10px; }
/* Links: Recherche (DTV source, Search the board) als eigene kurze Zeile unter den Vereinsdaten. */
.call-research-line { margin-top: 6px; }
.call-dialog-panel { margin-top: 18px; }
/* Dialog "Add person": bestehende verknuepfen (StaffPersonLinkForm) ODER neu anlegen - wie im Activity cockpit. */
.call-add-person { display: flex; flex-direction: column; gap: 10px; }
.call-empty { padding: 24px 10px; }

/* Supervision > Open calls und Work time (UMBAU-024 Paragraf 7, styling.md 6.14): Tabellen einzeilig wie unter Pools. */
.open-calls-table th,
.open-calls-table td,
.work-table th,
.work-table td { white-space: nowrap; overflow-wrap: normal; }
.open-calls-table .act-browse-clip { max-width: 16em; }
.open-calls-actions { display: flex; gap: 12px; }
.open-calls-note td { padding-top: 0; border-top: 0; font-size: 12px; white-space: normal; }
.staff-panel .open-calls-pauses-title { margin: 22px 0 10px; }
.open-calls-pauses { margin: 0; padding-left: 20px; font-size: 14px; }
.work-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 14px; }
.work-filter label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
.work-filter select,
.work-filter input { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); color: var(--text); font: inherit; font-size: 14px; }
.work-filter select { max-width: 22em; }
.work-table .act-browse-clip { max-width: 12em; }
.work-table tfoot th,
.work-table tfoot td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 700; }
.work-unclear { color: var(--gold-deep); font-weight: 700; }
.work-note { margin: 10px 0 0; }

/* ============================================================================================
   Workflows und Onboarding cockpit (UMBAU-025, styling.md 6.15). Nur Tokens aus Paragraf 2.
   ============================================================================================ */
/* Administration > Workflows (lesend, Karten wie Call strategies): Schritte als nummerierte Liste mit Kanal-Chip. */
.workflow-steps { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding-left: 0; font-size: 14px; list-style: none; }
.workflow-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.workflow-channel .staff-icon { width: 12px; height: 12px; }
.workflow-step-rule { display: block; color: var(--text); }
.workflow-step-hint { display: block; color: var(--muted); font-size: 13px; }
.workflow-end { margin: 12px 0 0; }

/* Call cockpit: Workflow-Zeile im Kopf (links voll mit "Next in the workflow", rechts kompakt nur der aktuelle Schritt). */
.call-workflow { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--text); font-size: 13px; white-space: nowrap; }
.call-workflow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.call-workflow .staff-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--muted); }
.call-workflow.is-compact { color: var(--muted); font-size: 12.5px; }
.call-workflow-next { margin: 0 0 0 20px; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.call-workflow-next strong { color: var(--ink); }

/* Onboarding cockpit: Startseite (Pools), Kopfzeile, Spalten = Workflow-Schritte plus Done, kompakte Karten. */
.onb-back-link { flex: 0 0 auto; white-space: nowrap; }
.onb-start { max-width: 1040px; margin-top: 18px; }
.onb-pools { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.onb-pool { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.onb-pool-name { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.onb-pool-steps { display: flex; flex: 1 1 auto; gap: 12px; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.onb-pool-steps strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.onb-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 48px; margin-top: 14px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); font-size: 13px; }
.onb-bar-pool { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.onb-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.onb-bar .staff-btn { flex: 0 0 auto; white-space: nowrap; }
.onb-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 12px; }
.onb-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-alt); }
.onb-col-head { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: 13.5px; white-space: nowrap; }
.onb-col-head .staff-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--muted); }
.onb-col-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.onb-col-count { flex: 0 0 auto; min-width: 24px; margin-left: auto; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.onb-col-hint { margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.onb-col-empty { margin: 0; font-size: 12.5px; }
.onb-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-xs); }
.onb-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.onb-card-name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.onb-card-head .staff-pool-chip { flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.onb-card-line { display: flex; align-items: center; gap: 5px; min-width: 0; margin: 0; color: var(--text); font-size: 12.5px; white-space: nowrap; }
.onb-card-line.staff-muted { color: var(--muted); }
.onb-card-line .staff-icon { flex: 0 0 auto; width: 12px; height: 12px; color: var(--muted); }
.onb-card-line.is-overdue { color: var(--gold-deep); }
.onb-card-line .act-overdue { flex: 0 0 auto; }
.onb-card-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.onb-card-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.onb-card-actions .staff-btn { white-space: nowrap; }
.onb-card-open { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.onb-card-open .staff-icon { width: 11px; height: 11px; }
/* Dialog "Log activity": Schritt mit Regel oben, Statuswechsel des Schritts als angehaktes Kaestchen vor der Notiz. */
.onb-dialog-panel { margin-top: 18px; }
.onb-log-step { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; }
.onb-log-step .staff-icon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; color: var(--muted); }
.onb-log-move { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; color: var(--text); font-size: 13px; }
@media (max-width: 900px) {
    .onb-board { grid-auto-flow: row; grid-template-columns: 1fr; }
}

/* ---------- UMBAU-027: Absicherung und Supervision (styling.md 6.16) ---------- */
/* Einwilligung in unsere Mails im Formular "Log activity" (StaffMailConsentField): sichtbar, sobald "Interested" gewaehlt
   ist (:has am Formular, ohne JavaScript), immer mit .is-open (Stufenwechsel ab Interested, Fehler). */
.act-consent { display: none; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 0 4px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sage-soft); font-size: 13px; }
.act-log:has(input[name="result"][value="Interested"]:checked) .act-consent,
.act-consent.is-open { display: flex; }
.act-consent-q { color: var(--ink); font-weight: 600; }
.act-consent-check { margin: 0; white-space: nowrap; }
/* Einwilligung liegt schon vor: Hinweis statt Kaestchen (nie vorbelegt, sonst ginge es mit jeder Activity mit). */
.act-consent-known { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); white-space: nowrap; }
.act-consent-known .staff-icon { width: 13px; height: 13px; }
.act-consent .act-field-msg { flex-basis: 100%; }
/* Account manager an der Karte des Call cockpit (Paragraf 5b): in der Grund-Zeile, EINE Zeile - der Grund bleibt ganz
   (.call-reason-text), der Account manager schrumpft und wird am inneren Text gekuerzt (text-overflow wirkt nicht am
   Flex-Container selbst, Review UMBAU-027). */
.call-reason { flex-wrap: nowrap; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; }
.call-reason-text { flex: 0 0 auto; }
.call-owner { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; margin-left: 8px; overflow: hidden;
    color: var(--muted); font-weight: 400; }
.call-owner .staff-icon { flex: 0 0 auto; }
.call-owner-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-next-hint { margin: 14px 0 0; }
/* Supervision > Organisations: Aktionen ueber der Liste, "In call by" und Pool-Chips (Kurzform) in der zweiten Zeile. */
.sup-list-actions { display: inline-flex; gap: 8px; }
/* Chips zuerst und ungekuerzt, "In call by" danach schrumpfbar mit Ellipse am inneren Text (Review UMBAU-027). */
.sup-incall { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 3px; min-width: 0; overflow: hidden; color: var(--brand-deep); font-size: 11.5px; font-weight: 600; cursor: help; }
.sup-incall .staff-icon { flex: 0 0 auto; width: 11px; height: 11px; }
.sup-incall-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-name-line2 .staff-pool-chip { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; font-size: 11px; }
/* Work time: Einheit im Spaltenkopf, Kennzeichen "sums" (Tagessummen nach dem Aufbewahrungslauf). */
.work-unit { color: var(--muted); font-weight: 400; }
.work-sums { margin-left: 6px; font-size: 11px; }
/* Activity cockpit: "Reassign" am offenen Follow-up (nur Admin), Begruendung beim Wechsel des Account managers. */
.act-reassign-form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.act-reassign-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.act-reassign-line select, .act-reassign-line input { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); font: inherit; font-size: 13px; }
.act-reassign-line input { flex: 1 1 160px; min-width: 0; }
.act-owner-form .act-field-msg { flex-basis: 100%; }
.act-owner-reason { min-width: 12em; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-md); font: inherit; font-size: 13px; }
/* Pools: Erklaerung der Verteilung im Formular zugeklappt (staff-disclosure, ohne eigenen Abstand oben - die Luecke des
   Formulars genuegt); Administration: Zahlen in Staff members und Work time retention. */
.staff-disclosure.pool-routing-help { margin-top: 0; }
.pool-routing-help > ul { margin: 0; padding: 10px 12px 10px 30px; }
.staff-member-load, .retention-counts { margin: 0; padding-left: 18px; }
.staff-table tr.is-inactive td { color: var(--muted); }

/* ---------- Supervision > Data quality (UMBAU-035, styling.md 6.21) ----------
   Kacheln wie Supervision > Organisations (je Fallart eine), Listen einzeilig wie Open calls - reicht die Breite nicht,
   scrollt nur .act-browse-tablewrap. Dialoge nach 6.8 (EIN Dialog #dq-dialog). Nur Tokens aus styling.md 2. */
.sup-tile-row.dq-tiles { flex-wrap: nowrap; }
.dq-tiles .sup-tile { flex: 1 1 auto; min-width: 0; padding: 10px 8px; }
.dq-tiles .sup-tile-label { min-width: 0; }
.dq-tiles .sup-tile-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.staff-panel .dq-title { margin: 0; }
.dq-explain { margin: 4px 0 0; }
.dq-table th,
.dq-table td { white-space: nowrap; overflow-wrap: normal; }
.dq-table .act-browse-clip { max-width: 12em; }
.dq-table .dq-clip-sm { max-width: 9em; }
.dq-table .dq-why { max-width: 18em; }
/* Name mit Zeichen (Kontakt, Sperre) in EINER Zeile - .act-browse-clip ist ein Block. */
.dq-name { display: flex; align-items: center; min-width: 0; }
.dq-name .act-dnc-mini, .dq-name .dq-contact { flex: 0 0 auto; }
.dq-contact { display: inline-flex; margin-left: 6px; color: var(--muted); vertical-align: middle; cursor: help; }
.dq-contact .staff-icon { width: 13px; height: 13px; }
.dq-hint { padding-top: 0; padding-bottom: 0; font-size: 11.5px; }
.dq-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Aktionen: die Zelle bleibt Tabellenzelle (sonst wirkt rowspan nicht), Flex am inneren Block. */
.dq-actions { display: flex; gap: 12px; }
.dq-more { font-size: 12px; }
.dq-phone { color: var(--error-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Gruppen (Dubletten, gleicher Name): Personen einer Gruppe untereinander, feine gestrichelte Linie innerhalb der Gruppe. */
.dq-group-table tr.dq-group-inner td { border-bottom-style: dashed; }
.dq-group-table tr td[rowspan] { border-bottom-style: solid; vertical-align: top; }
/* Dialoge */
.staff-form.dq-form { gap: 12px; }
.dq-lead { margin: 0; color: var(--text); font-size: 14px; }
.dq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dq-dnc-note { margin: 0; color: var(--error-deep); }
.dq-note-hint { margin: 0; }
.dq-take { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px 12px 10px; border: 1px solid var(--border); border-radius: var(--r-md); }
.dq-take legend { padding: 0 4px; color: var(--muted); font-size: 13px; }
.dq-take .staff-check { color: var(--text); }
.dq-members { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.dq-members li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-md); white-space: nowrap; }
.dq-members li.is-keep { border-color: var(--sage); background: var(--sage-soft); }
.dq-member-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 700; }
.dq-member-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.dq-members .staff-chip,
.dq-members .staff-link { flex: 0 0 auto; }
.dq-preview { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.dq-preview .act-subhead { margin: 0; }
.dq-preview-list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.dq-preview-list li { display: flex; align-items: flex-start; gap: 6px; }
.dq-preview-list .staff-icon { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 3px; color: var(--sage-deep); }
.dq-preview-list li.staff-muted .staff-icon { color: var(--muted); }
.dq-conflicts li,
.dq-conflicts .staff-icon { color: var(--gold-deep); }
.act-log-submit.dq-submit { align-items: center; gap: 12px; }
@media (max-width: 600px) {
    .dq-row { grid-template-columns: 1fr; }
}