/* =========================================================
   SAA CRM – Globales Grundlayout
   Diese Styles gelten für alle Seiten.
   Design (KONTEXT §20): Farben/Schrift wie saamarketing.de, Aufbau auf
   Leadtable-Niveau. Alle gemeinsamen Werte stehen als Variablen in :root
   (--ds-…); Farben statt fester Werte immer über diese Variablen.
   ========================================================= */

@font-face {
    font-family: "Satoshi";
    src: url("vendor/satoshi/Satoshi-Variable.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Marke (saamarketing.de) */
    --ds-primary: #3c6392;
    --ds-primary-hover: #325580;
    --ds-primary-soft: #ebf1f8;
    --ds-primary-ring: rgba(60, 99, 146, 0.22);

    /* Text und Flächen */
    --ds-ink: #121519;
    --ds-text: #434a57;
    --ds-muted: #858c97;
    --ds-faint: #b4bbc3;
    --ds-bg: #f6f9fc;
    --ds-surface: #ffffff;
    --ds-column: #eef2f7;
    --ds-border: #e3e9ef;
    --ds-border-strong: #d7dde2;

    /* Seitenleiste */
    --ds-sidebar: #121519;
    --ds-sidebar-text: rgba(255, 255, 255, 0.68);
    --ds-sidebar-hover: rgba(255, 255, 255, 0.06);
    --ds-sidebar-active: rgba(255, 255, 255, 0.1);

    /* Zustände */
    --ds-success: #2fb37c;
    --ds-success-text: #1f7f57;
    --ds-success-soft: #e6f7ef;
    --ds-warning: #c99a16;
    --ds-warning-text: #8a6a0c;
    --ds-warning-soft: #fdf6dd;
    --ds-danger: #e04848;
    --ds-danger-text: #c23434;
    --ds-danger-soft: #fdecec;

    /* Farbpunkte (Spalten, Kampagnen) */
    --ds-dot-blue: #3c6392;
    --ds-dot-orange: #f08c2e;
    --ds-dot-green: #2fb37c;
    --ds-dot-red: #e04848;
    --ds-dot-teal: #1a9a9a;
    --ds-dot-purple: #7c5cc4;
    --ds-dot-pink: #d0508f;
    --ds-dot-slate: #64748b;
    --ds-dot-gray: #a3aab4;

    /* Form */
    --ds-radius-sm: 8px;
    --ds-radius: 12px;
    --ds-radius-lg: 16px;
    --ds-shadow-sm: 0 1px 2px rgba(18, 21, 25, 0.05);
    --ds-shadow: 0 4px 14px -4px rgba(18, 21, 25, 0.1);
    --ds-shadow-lg: 0 18px 40px -12px rgba(18, 21, 25, 0.28);

    /* Bewegung */
    --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ds-fast: 0.15s;
}

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

body {
    font-family: "Satoshi", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    background: var(--ds-bg);
    color: var(--ds-ink);
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3 {
    color: var(--ds-ink);
    letter-spacing: -0.01em;
}

/* Schmale, unauffällige Scrollbalken */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ds-border-strong) transparent;
}

/* Linien-Icons aus dem Sprite customers/_icons.html: <svg class="icon"><use href="#i-…"/></svg> */
.icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.icon-sm {
    width: 13px;
    height: 13px;
}

.app {
    display: flex;
    min-height: 100vh;
}


/* =========================================================
   Sidebar
   ========================================================= */

.sidebar {
    position: sticky;
    top: 0;
    width: 248px;
    min-width: 248px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 14px 14px;
    overflow-y: auto;
    background: var(--ds-sidebar);
    color: var(--ds-sidebar-text);
}

.brand {
    display: block;
    margin: 4px 8px 18px;
}

.brand img {
    display: block;
    height: 26px;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-label {
    margin: 12px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-sidebar-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--ds-fast), color var(--ds-fast);
}

.nav-item:hover {
    background: var(--ds-sidebar-hover);
    color: white;
}

.nav-item.active {
    background: var(--ds-sidebar-active);
    color: white;
    font-weight: 600;
}

.sidebar-search-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ds-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ds-sidebar-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background var(--ds-fast), border-color var(--ds-fast);
}

.sidebar-search-button:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.07);
}

.shortcut-hint {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

.sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


/* =========================================================
   Hauptbereich
   ========================================================= */

.main {
    flex: 1;
    padding: 24px 28px 28px;
    min-width: 0;
}


/* Handy: Kopfleiste mit Menü-Knopf, Seitenleiste schiebt sich von links
   herein (toggleSidebar in base.html, Klasse sidebar-open am body). */

.mobile-bar,
.sidebar-backdrop {
    display: none;
}

@media (max-width: 900px) {
    .mobile-bar {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 52px;
        padding: 0 10px;
        background: var(--ds-sidebar);
    }

    .mobile-bar-brand {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .mobile-bar-brand img {
        display: block;
        height: 22px;
    }

    .mobile-bar-button {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: var(--ds-radius-sm);
        background: transparent;
        color: white;
        cursor: pointer;
    }

    .mobile-bar-button:hover {
        background: var(--ds-sidebar-hover);
    }

    .mobile-bar-button .icon {
        width: 20px;
        height: 20px;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 97;
        height: 100vh;
        height: 100dvh;
        box-shadow: var(--ds-shadow-lg);
        transform: translateX(-100%);
        transition: transform 0.25s var(--ds-ease);
    }

    body.sidebar-open .sidebar {
        transform: none;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 96;
        display: block;
        background: rgba(18, 21, 25, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .main {
        padding: 16px 16px 24px;
    }
}


/* =========================================================
   Buttons
   ========================================================= */

.primary-button,
.secondary-button,
.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--ds-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ds-fast), border-color var(--ds-fast), box-shadow var(--ds-fast), transform var(--ds-fast);
}

.primary-button:active,
.secondary-button:active,
.danger-button:active {
    transform: translateY(1px);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.danger-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

.primary-button {
    border: 1px solid var(--ds-primary);
    background: var(--ds-primary);
    color: white;
}

.primary-button:hover {
    border-color: var(--ds-primary-hover);
    background: var(--ds-primary-hover);
}

/* Gesperrt, z. B. "📞 Anrufen" ohne gültige Nummer oder während des Speicherns. */
.primary-button:disabled,
.primary-button:disabled:hover {
    border-color: var(--ds-border);
    background: var(--ds-column);
    color: var(--ds-muted);
    cursor: not-allowed;
    transform: none;
}

.secondary-button {
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-ink);
}

.secondary-button:hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow-sm);
}

.secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   Eingabefelder (alle Seiten)
   ========================================================= */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
    border-color: var(--ds-border);
    color: var(--ds-ink);
    transition: border-color var(--ds-fast), box-shadow var(--ds-fast);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

::placeholder {
    color: var(--ds-faint);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--ds-primary);
}


/* =========================================================
   Allgemeine Badges
   ========================================================= */

.badge {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.search {
    flex: 1;
    max-width: 450px;
    padding: 11px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: white;
    outline: none;
}

.search:focus {
    border-color: var(--ds-primary);
}

.toolbar select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    background: white;
    color: var(--ds-ink);
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ds-success);
    margin-top: 5px;
}


/* Modals */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 21, 25, 0.42);
    backdrop-filter: blur(2px);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 24px;
    z-index: 100;
}

.modal-backdrop.open {
    display: flex;
}

.modal {
    width: 460px;
    max-width: 100%;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-lg);
    padding: 22px 22px 20px;
    box-shadow: var(--ds-shadow-lg);
    animation: modal-in 0.25s var(--ds-ease);
}

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

.modal h3 {
    margin-bottom: 18px;
    font-size: 17px;
    font-weight: 700;
}

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

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    font-family: inherit;
    font-size: 14px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
}


/* Status-Marke (z. B. „Aktiv“) */

.status {
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--ds-success-soft);
    color: var(--ds-success-text);
}


/* Tabs */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 20px;
}

.tab {
    border: none;
    background: transparent;
    padding: 0 0 10px;
    margin-bottom: -1px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-muted);
    border-bottom: 2px solid transparent;
    transition: color var(--ds-fast);
}

.tab:hover {
    color: var(--ds-ink);
}

.tab.active {
    color: var(--ds-ink);
    border-bottom-color: var(--ds-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/* Pipeline */

.pipeline-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.pipeline-toolbar h2 {
    font-size: 19px;
    margin-bottom: 4px;
}

.pipeline-toolbar p {
    color: var(--ds-muted);
    font-size: 14px;
}

.pipeline {
    /* Beliebig viele schmale Spalten nebeneinander, bei Bedarf seitlich scrollen
       (kompakt wie bei Leadtable). */
    display: flex;
    gap: 10px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
}

.column {
    flex: 0 0 232px;
    width: 232px;
    background: var(--ds-column);
    border-radius: 10px;
    padding: 8px;
    min-height: 520px;
}

.column-header {
    margin-bottom: 8px;
    position: relative;
}

/* Titelzeile einer Spalte: daran wird die Spalte verschoben. */
.column-drag-handle {
    cursor: grab;
}

.column-dragging {
    opacity: 0.5;
}

.column-menu-button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    color: var(--ds-text);
    border-radius: 6px;
}

.column-menu-button:hover {
    background: white;
}

.column-menu {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 20;
    background: white;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(18, 21, 25, 0.12);
    padding: 4px;
    min-width: 190px;
}

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

.column-menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.column-menu button:hover {
    background: var(--ds-column);
}

.column-menu .column-menu-danger {
    color: var(--ds-danger);
}

.archive-list {
    max-height: 50vh;
    overflow-y: auto;
    margin: 12px 0;
}

.archive-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    border: 1px solid var(--ds-border);
    background: white;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: pointer;
}

.archive-row:hover {
    background: #fafbfd;
}

.archive-name {
    font-weight: 700;
    font-size: 14px;
}

.column-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.column-title {
    font-weight: 700;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.count {
    background: white;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
}

.column-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.column-filter-button {
    border: 1px solid var(--ds-border);
    background: white;
    border-radius: 999px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.column-filter-button.active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
}

.column-filter-info {
    font-size: 12px;
    color: var(--ds-text);
    margin-bottom: 10px;
}

.column-filter-info[hidden],
.lead-card[hidden] {
    display: none;
}

.link-button {
    border: none;
    background: none;
    color: var(--ds-primary);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.call-column-button {
    width: 100%;
    border: none;
    background: var(--ds-primary);
    color: white;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.lead-list {
    min-height: 420px;
}

.pool-column {
    background: var(--ds-success-soft);
    border: 1px dashed #bfe8d4;
}

.pool-subtitle {
    font-size: 12px;
    color: var(--ds-success-text);
    margin: -4px 0 8px;
}

.pool-in-campaign {
    color: var(--ds-success-text);
    font-weight: 600;
}

.lead-card {
    background: white;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    padding: 7px 9px;
    margin-bottom: 5px;
    cursor: grab;
}

.lead-card:hover {
    box-shadow: 0 4px 14px rgba(18, 21, 25, 0.08);
}

.lead-distance {
    margin-left: 6px;
    color: var(--ds-ink);
}

.lead-name {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-phone {
    font-size: 12px;
    color: var(--ds-muted);
    margin-bottom: 1px;
}

.lead-meta {
    font-size: 11px;
    color: var(--ds-faint);
}


/* Automationen */

.automation-list {
    display: grid;
    gap: 14px;
}

.automation-card {
    background: white;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: 18px;
}

.automation-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.automation-name {
    font-weight: 700;
}

.automation-active {
    color: var(--ds-success-text);
    background: var(--ds-success-soft);
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 12px;
}

.automation-flow {
    color: var(--ds-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* Echte Automationen (App automations) */
.automation-active {
    border: none;
    cursor: pointer;
}

.automation-inactive {
    color: var(--ds-muted);
    background: var(--ds-border);
}

.automation-card-off .automation-name,
.automation-card-off .automation-flow {
    opacity: 0.55;
}

.automation-warning {
    color: var(--ds-warning-text);
}

.automation-edit {
    margin-top: 10px;
}

.automation-edit > summary {
    cursor: pointer;
    color: var(--ds-primary);
    font-size: 14px;
}

.automation-new > summary {
    display: inline-block;
    list-style: none;
}

.automation-new > summary::-webkit-details-marker {
    display: none;
}

.automation-form {
    display: grid;
    gap: 12px;
    margin: 14px 0;
}

.automation-form-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: start;
}

.automation-form-row > span:first-child {
    padding-top: 7px;
    font-weight: 600;
    font-size: 14px;
}

.automation-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.automation-form input[type="number"] {
    width: 90px;
}

.automation-actions {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.automation-action-row {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: #fafbfd;
}

.automation-action-row textarea {
    width: 100%;
    font: inherit;
}

.automation-placeholders code {
    background: var(--ds-column);
    padding: 1px 4px;
    border-radius: 4px;
}


/* Kampagneneinstellungen */

.settings-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: 18px 22px 20px;
    box-shadow: var(--ds-shadow-sm);
    max-width: 700px;
}

.settings-card h3 {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
}

/* Seite "Mein Telefon" (App telephony) */
.phone-card {
    max-width: 520px;
}

.phone-hint {
    font-size: 13px;
    margin-top: 6px;
}

.phone-status {
    font-size: 15px;
    margin-bottom: 6px;
}

.phone-status-ok {
    color: var(--ds-success-text);
}

.phone-code-box {
    margin: 14px 0;
}

.phone-code {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 6px;
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}

.phone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.field-settings-empty {
    padding: 10px 0;
}

/* Mapping-Tabelle: Lead-Feld × Quelle */
.mapping-scroll {
    overflow-x: auto;
}

.mapping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mapping-table th,
.mapping-table td {
    text-align: left;
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
}

.mapping-table th {
    font-size: 12px;
    color: var(--ds-muted);
    font-weight: 700;
}

.mapping-table th .review-label {
    font-weight: 400;
}

.mapping-table input {
    width: 100%;
    min-width: 150px;
    padding: 7px 9px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font: inherit;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.hangup {
    background: var(--ds-danger);
    color: white;
    border: none;
}


/* Lead-Nachbearbeitung */

.lead-review-modal {
    width: 620px;
    max-height: 85vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px;
    padding: 26px;
}

.review-status {
    padding: 9px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: white;
}

.review-data-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 9px 0;
    font-size: 14px;
}

.review-label {
    color: var(--ds-muted);
}

.review-value {
    font-weight: 600;
}

.review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}


/* Lead-Info-Fenster */

.lead-card {
    cursor: pointer;
}

.lead-detail-modal {
    width: 960px;
    max-width: calc(100vw - 32px);
}

.lead-jump-button {
    text-decoration: none;
    white-space: nowrap;
}

.lead-jump-button[hidden] {
    display: none;
}

.call-outcome-reached {
    background: var(--ds-success-soft);
    color: var(--ds-success-text);
}

.call-outcome-not-reached {
    background: var(--ds-danger-soft);
    color: var(--ds-danger-text);
}

.call-outcome-mailbox {
    background: var(--ds-warning-soft);
    color: var(--ds-warning-text);
}

/* Eingehender Rückruf (angenommen blau, verpasst rot) */
.call-outcome-inbound {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
}

.call-outcome-inbound.call-outcome-missed {
    background: var(--ds-danger-soft);
    color: var(--ds-danger-text);
}

.queue-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--ds-primary-soft);
    border: 1px solid var(--ds-primary-ring);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 14px;
}

.queue-bar-actions {
    display: flex;
    gap: 8px;
}

/* Power Dialer: "Nächster Lead in 5 …" und "Pausiert" (campaign_detail.html) */
.queue-countdown,
.queue-paused {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.queue-countdown {
    background: var(--ds-primary);
    color: white;
}

.queue-paused {
    background: var(--ds-warning-soft);
    color: var(--ds-warning-text);
}

.assign-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--ds-warning-soft);
    border: 1px solid #ecd68f;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.assign-text {
    flex: 1;
    min-width: 200px;
}

.assign-success {
    color: var(--ds-success-text);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.lead-inline-form {
    display: flex;
    gap: 8px;
}

.lead-inline-form input {
    width: 100px;
    padding: 7px 10px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font-family: inherit;
}

.lead-inline-form button {
    padding: 7px 12px;
}

.lead-form-error {
    color: var(--ds-danger);
    font-size: 12px;
    margin-top: 4px;
}

/* Kontaktdaten anzeigen / bearbeiten (_contact_section.html):
   .editing blendet die Anzeige aus und das Formular ein. */
.contact-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.contact-heading .link-button {
    font-size: 13px;
    font-weight: 500;
}

.contact-form,
.contact-block.editing .contact-view,
.contact-block.editing .contact-edit-toggle {
    display: none;
}

.contact-block.editing .contact-form {
    display: block;
    margin-bottom: 12px;
}

.contact-hint {
    margin-bottom: 8px;
    font-size: 12px;
}

.contact-field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
}

.contact-field input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ds-primary-soft);
    color: #3730a3;
    border-radius: 999px;
    padding: 3px 4px 3px 10px;
    font-size: 13px;
    font-weight: 600;
}

.pool-chip {
    background: var(--ds-success-soft);
    color: var(--ds-success-text);
}

.pool-select {
    padding: 7px 10px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font-family: inherit;
    max-width: 200px;
}

.tag-chip button {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 4px;
}

.lead-inline-form input.tag-input {
    width: 200px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 8px 0;
    cursor: pointer;
}

.pool-choice {
    border-top: 1px solid var(--ds-border);
    margin-top: 14px;
    padding-top: 12px;
}


/* Suche */

.search-backdrop {
    align-items: flex-start;
}

.search-modal {
    width: 640px;
    max-width: calc(100vw - 32px);
    margin-top: 10vh;
    background: white;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.search-scope {
    font-size: 12px;
    color: var(--ds-muted);
    margin-bottom: 8px;
}

.search-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.search-tags .tag-list {
    margin-bottom: 0;
}

.search-tags-label {
    font-size: 12px;
    color: var(--ds-muted);
}

.search-tag-input {
    flex: 1;
    min-width: 160px;
    padding: 5px 10px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    font-size: 13px;
    font-family: inherit;
}

.search-tag-input.invalid {
    border-color: var(--ds-danger);
}

.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ds-muted);
}

.search-filters label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.search-filters label[hidden] {
    display: none;
}

.search-filters select,
.search-filters input {
    padding: 4px 8px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ds-ink);
    background: white;
    max-width: 180px;
}

.search-filters .search-plz-input {
    width: 70px;
}

.search-result-distance {
    font-weight: 700;
    color: var(--ds-ink);
}

.search-results {
    margin-top: 12px;
    max-height: 60vh;
    overflow-y: auto;
}

.search-result {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.search-result:hover {
    background: var(--ds-column);
}

.search-result-main {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.search-result-name {
    font-weight: 700;
}

.search-result-phone {
    color: var(--ds-text);
    font-size: 14px;
}

.search-result-meta {
    color: var(--ds-muted);
    font-size: 13px;
    margin-top: 3px;
}

.search-result-tags {
    margin: 6px 0 0;
}

.search-hint {
    color: var(--ds-muted);
    font-size: 14px;
    padding: 10px 12px;
}

/* Suche: Block "Personen ohne Kampagne" unter den Lead-Treffern */
.search-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 12px 4px;
    border-top: 1px solid var(--ds-border);
    margin-top: 6px;
}

.note-delete {
    float: right;
    margin-left: 8px;
}

.note-delete button {
    border: none;
    background: none;
    color: var(--ds-faint);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.note-delete button:hover {
    color: var(--ds-danger);
}

.danger-button {
    border: 1px solid #f6c9c9;
    background: var(--ds-surface);
    color: var(--ds-danger-text);
}

.danger-button:hover {
    border-color: var(--ds-danger);
    background: var(--ds-danger-soft);
}

.danger-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.messages {
    margin-bottom: 18px;
}

.message {
    border-radius: var(--ds-radius);
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.message-success {
    background: var(--ds-success-soft);
    color: var(--ds-success-text);
    border: 1px solid #bfe8d4;
}

.message-error {
    background: var(--ds-danger-soft);
    color: var(--ds-danger-text);
    border: 1px solid #f6c9c9;
}

.message-warning {
    background: var(--ds-warning-soft);
    color: var(--ds-warning-text);
    border: 1px solid #ecd68f;
}

.lead-note-date {
    color: var(--ds-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

/* Reiter im Info-Fenster: Notizen · Verlauf · Dateien · E-Mails */
.lead-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 14px;
}

.lead-tab {
    border: none;
    background: none;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.lead-tab:hover {
    color: var(--ds-ink);
}

.lead-tab.active {
    color: var(--ds-ink);
    border-bottom-color: var(--ds-primary);
}

.lead-tab-count {
    font-size: 11px;
    font-weight: 600;
    background: var(--ds-column);
    color: var(--ds-text);
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 2px;
}

.lead-activity-created { border-left-color: var(--ds-primary); }
.lead-activity-stage_changed { border-left-color: var(--ds-warning); }
.lead-activity-description_changed { border-left-color: #8b5cf6; }
.lead-activity-automation { border-left-color: var(--ds-success); }
.lead-activity-call_logged { border-left-color: #0ea5e9; }
.lead-activity-tag_added,
.lead-activity-tag_removed { border-left-color: #6366f1; }
.lead-activity-postal_code_changed { border-left-color: var(--ds-muted); }

.lead-activity-title {
    font-weight: 600;
}

.lead-activity-text {
    color: var(--ds-text);
    margin-top: 2px;
}

/* Menü "⋯" oben rechts im Info-Fenster */
.lead-menu-wrap {
    position: relative;
}

.lead-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    background: white;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(18, 21, 25, 0.12);
    padding: 4px;
    min-width: 220px;
}

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

.lead-menu button,
.lead-menu a {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 8px 10px;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.lead-menu button:hover,
.lead-menu a:hover {
    background: var(--ds-column);
}

/* Bereiche unter dem Kopf: Verschieben, Export */
.lead-panel {
    border: 1px solid var(--ds-border);
    background: #fafbfd;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.lead-panel[hidden] {
    display: none;
}

.lead-panel-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

.lead-transfer-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lead-transfer-fields select {
    flex: 1;
    min-width: 200px;
}

.lead-panel-hint {
    font-size: 12px;
    margin-top: 10px;
}

.lead-panel .review-actions {
    margin-top: 12px;
}

.lead-export-formats {
    display: flex;
    gap: 18px;
}

.lead-export-more {
    margin-top: 10px;
}

.lead-transfer-message {
    margin-bottom: 12px;
}

/* Reiter "Dateien" */
.lead-file-form input[type="file"] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
}

.lead-file a {
    font-weight: 600;
    color: var(--ds-primary-hover);
    text-decoration: none;
    word-break: break-word;
}

.lead-file a:hover {
    text-decoration: underline;
}

/* Aufklappbare Bereiche links (Shared Pools, Potenzielle Kampagnen) */
.lead-fold > summary {
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.lead-fold > summary::-webkit-details-marker {
    display: none;
}

.lead-fold > summary::before {
    content: "▸ ";
    color: var(--ds-muted);
}

.lead-fold[open] > summary {
    margin-bottom: 12px;
}

.lead-fold[open] > summary::before {
    content: "▾ ";
}

/* =========================================================
   Funktions-Ideen / Roadmap
   ========================================================= */

.page-header {
    margin-bottom: 26px;
}

.page-header h1 {
    font-size: 26px;
    margin-bottom: 7px;
}

.page-header p {
    color: var(--ds-muted);
    font-size: 14px;
    max-width: 760px;
    line-height: 1.6;
}

.idea-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 18px;
}

.idea-card {
    background: white;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: 20px;
}

.idea-card h2 {
    font-size: 17px;
    margin-bottom: 14px;
}

.idea-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.idea-item {
    border-top: 1px solid var(--ds-border);
    padding-top: 12px;
}

.idea-item:first-child {
    border-top: none;
    padding-top: 0;
}

.idea-title-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 5px;
}

.idea-title {
    font-weight: 700;
    font-size: 14px;
}

.idea-description {
    color: var(--ds-muted);
    font-size: 13px;
    line-height: 1.5;
}

.roadmap-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.roadmap-planned {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
}

.roadmap-later {
    background: var(--ds-column);
    color: var(--ds-text);
}

.roadmap-important {
    background: var(--ds-success-soft);
    color: var(--ds-success-text);
}

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

/* =========================================================
   Anmeldung
   ========================================================= */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-ink);
}

.login-card {
    width: 380px;
    max-width: calc(100vw - 32px);
    background: white;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.login-card h1 {
    font-size: 22px;
    margin-bottom: 18px;
}

.login-error {
    background: var(--ds-danger-soft);
    color: var(--ds-danger-text);
    border: 1px solid #f6c9c9;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    margin-bottom: 14px;
}

.login-button {
    width: 100%;
    margin-top: 6px;
}

/* Angemeldeter Mitarbeiter unten in der Seitenleiste */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ds-radius);
    font-size: 11px;
}

.sidebar-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ds-primary);
    color: white;
    font-size: 12px;
    font-weight: 700;
}

.sidebar-user-text {
    min-width: 0;
    flex: 1;
}

.sidebar-user-name,
.sidebar-user-mail {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-user-name {
    color: white;
    font-size: 13px;
    font-weight: 600;
}

.sidebar-logout {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: none;
    color: var(--ds-sidebar-text);
    cursor: pointer;
    transition: background var(--ds-fast), color var(--ds-fast);
}

.sidebar-logout:hover {
    background: var(--ds-sidebar-hover);
    color: white;
}

/* =========================================================
   CSV-Import: Vorschau (leadflow)
   ========================================================= */

.import-problems {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
}

.import-problems ul {
    margin: 6px 0 6px 18px;
}

.import-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.import-count {
    background: white;
    border: 1px solid var(--ds-border);
    border-left: 4px solid var(--ds-faint);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
}

.import-count strong {
    font-size: 18px;
    margin-right: 4px;
}

.import-new { border-left-color: var(--ds-success); }
.import-existing { border-left-color: var(--ds-primary); }
.import-error { border-left-color: var(--ds-danger); }

.import-card {
    max-width: none;
}

.import-run {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.import-run label {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-run button:disabled {
    opacity: 0.5;
    cursor: default;
}

.import-hint {
    font-size: 13px;
    margin: 12px 0 16px;
}

/* Pool-Import: Zuordnung der Spalten (Grundfeld → Spalte der Datei) */
.pool-mapping-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 14px;
}

.pool-mapping-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.pool-mapping-form select {
    min-width: 170px;
    padding: 6px 8px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    background: white;
}

.import-table td {
    white-space: nowrap;
}

.import-status {
    font-weight: 600;
    font-size: 13px;
}

.import-row-new .import-status { color: var(--ds-success-text); }
.import-row-existing .import-status { color: var(--ds-primary-hover); }
.import-row-in_campaign,
.import-row-duplicate { color: var(--ds-faint); }
.import-row-error { color: var(--ds-danger-text); }

/* Ankreuz-Zeilen in Formularen: Kästchen links neben dem Text, nicht volle Breite */
.form-group .checkbox-row {
    display: flex;
    font-weight: 400;
    margin: 6px 0;
}

.form-group .checkbox-row input {
    width: auto;
}

/* Reiter "Anrufe" im Info-Fenster */
.lead-call-summary {
    font-size: 13px;
    color: var(--ds-text);
    margin-bottom: 10px;
}

.lead-call {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ds-column);
}

.lead-call .lead-note-date {
    margin: 0;
}

.lead-call-outcome {
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* Ergebnis-Schild als Auswahl "Ergebnis ändern": sieht aus wie das Schild,
   mit kleinem Pfeil; die Farbe kommt weiter von .call-outcome-*. */
select.lead-call-outcome {
    appearance: none;
    border: 1px solid transparent;
    padding-right: 24px;
    font-family: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}

select.lead-call-outcome:hover,
select.lead-call-outcome:focus {
    border-color: currentColor;
    outline: none;
}

select.lead-call-outcome option {
    background: white;
    color: var(--ds-ink);
}

/* Info-Fenster: "Kampagnen in der Nähe" */
.nearby-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ds-column);
    font-size: 14px;
}

.nearby-row button {
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
}

/* Fünf Reiter: nicht umbrechen, bei sehr schmalem Fenster seitlich scrollen */
/* Seit dem Reiter "Termine" passen nicht mehr alle Reiter in eine Zeile:
   umbrechen statt seitlich scrollen (sonst ist der letzte Reiter versteckt). */
.lead-tabs {
    flex-wrap: wrap;
    gap: 0;
}

.lead-tab {
    white-space: nowrap;
    padding: 8px 7px;
    font-size: 13px;
}

.mapping-table select {
    width: 100%;
    min-width: 150px;
    padding: 7px 9px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    background: white;
}

/* Seite "Auswertung" (App reports) */
.report-filters {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 18px;
}

.report-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.report-filters select,
.report-filters input {
    padding: 6px 8px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    background: white;
    min-width: 140px;
}

.report-period {
    margin: 16px 0 8px;
    font-size: 13px;
    color: var(--ds-muted);
}

.report-card {
    max-width: none;
}

.report-table th:not(:first-child),
.report-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.report-table tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--ds-border);
}

.report-row-idle td {
    color: var(--ds-faint);
}

/* Zielspalte einer Kampagne (Spaltenkopf auf der Kampagnenseite) */
.goal-mark {
    margin-right: 2px;
}

.report-table a {
    color: inherit;
    text-decoration: none;
}

.report-table a:hover {
    color: var(--ds-primary);
    text-decoration: underline;
}


/* =========================================================
   Anrufleiste (Anrufen im Browser, base.html)
   Liegt über dem Lead-Fenster (z-index > .modal-backdrop),
   damit Auflegen immer erreichbar ist.
   ========================================================= */

.softphone {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 16px;
    background: white;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(18, 21, 25, 0.18);
}

/* display: flex würde sonst das hidden-Attribut überstimmen. */
.softphone[hidden] {
    display: none;
}

.softphone-info {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    max-width: 240px;
}

.softphone-name {
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-ink);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.softphone-name:hover {
    color: var(--ds-primary);
}

.softphone-status {
    font-size: 13px;
    color: var(--ds-muted);
    font-variant-numeric: tabular-nums;
}

.softphone .secondary-button,
.softphone .danger-button {
    padding: 7px 12px;
    font-size: 13px;
}

.softphone .secondary-button.active {
    background: var(--ds-warning-soft);
    border-color: #ecd68f;
}

.softphone .secondary-button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Lead-Fenster, Reiter "Termine" (App appointments) */
.appointment-form {
    margin-bottom: 14px;
}

.appointment-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}

.appointment-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--ds-muted);
}

.appointment-fields input,
.appointment-fields select {
    padding: 7px 10px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ds-ink);
    background: white;
}

.appointment-note-input {
    min-height: 54px;
}

.appointment-day {
    font-size: 13px;
    color: var(--ds-text);
}

.appointment-day-title {
    margin: 6px 0 2px;
    font-weight: 600;
}

.appointment-day-row {
    padding: 2px 0 2px 10px;
    border-left: 3px solid var(--ds-primary-ring);
}

.appointment-conflict {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #ecd68f;
    border-radius: 8px;
    background: var(--ds-warning-soft);
    color: var(--ds-warning-text);
    font-size: 13px;
}

.appointment-conflict ul {
    margin: 6px 0 10px;
    padding-left: 18px;
}

.lead-appointment {
    padding: 10px 0;
    border-bottom: 1px solid var(--ds-column);
    font-size: 14px;
}

.lead-appointment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.lead-appointment.appointment-cancelled .lead-appointment-head strong {
    text-decoration: line-through;
    color: var(--ds-faint);
}

.appointment-status-planned {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
}

.appointment-status-attended {
    background: var(--ds-success-soft);
    color: var(--ds-success-text);
}

.appointment-status-no_show {
    background: var(--ds-danger-soft);
    color: var(--ds-danger-text);
}

.appointment-status-cancelled {
    background: var(--ds-column);
    color: var(--ds-text);
}

.appointment-move summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--ds-primary);
    margin-top: 4px;
}

.appointment-move form {
    margin-top: 8px;
}

/* Lead-Karte: nächster geplanter Termin */
.lead-next-appointment {
    margin-top: 2px;
    color: var(--ds-primary-hover);
    font-weight: 600;
}

.lead-next-appointment:empty {
    display: none;
}

/* Kalender (Kampagne / Gesamtkalender): _calendar_week.html */
.calendar-hint {
    margin-bottom: 12px;
}

.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.calendar-title {
    margin-left: 8px;
    font-size: 15px;
}

.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    gap: 8px;
    overflow-x: auto;
}

.calendar-day {
    min-height: 220px;
    padding: 8px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: white;
}

.calendar-today {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 1px var(--ds-primary);
}

.calendar-day-label {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-text);
}

.calendar-today .calendar-day-label {
    color: var(--ds-primary-hover);
}

.calendar-item {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    text-align: left;
    line-height: 1.35;
}

button.calendar-item {
    cursor: pointer;
}

button.calendar-item:hover {
    filter: brightness(0.95);
}

.calendar-item-time {
    font-weight: 700;
}

.calendar-item-name {
    font-weight: 600;
}

.calendar-item-campaign {
    margin-top: 2px;
    opacity: 0.8;
}

.calendar-cancelled .calendar-item-time,
.calendar-cancelled .calendar-item-name {
    text-decoration: line-through;
}

.calendar-busy {
    background: repeating-linear-gradient(135deg, var(--ds-column), var(--ds-column) 6px, var(--ds-border) 6px, var(--ds-border) 12px);
    color: var(--ds-muted);
}

.calendar-empty {
    color: var(--ds-border-strong);
    font-size: 12px;
}

.settings-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ds-text);
    cursor: pointer;
}

.settings-check input {
    margin-top: 3px;
}

/* display: flex oben würde hidden überschreiben (Automationen: Häkchen "Abbrechen") */
.settings-check[hidden] {
    display: none;
}

.settings-check strong {
    color: var(--ds-ink);
}

#customerCalendar {
    margin-bottom: 30px;
}

/* Schalter im Einstellungsformular der Kampagne: nicht wie ein normales Feld */
.form-group .settings-check {
    display: flex;
    font-weight: 400;
    margin-bottom: 0;
}

.form-group .settings-check input {
    width: auto;
    padding: 0;
}

/* Seite "Datenschutz" einer Person (nur Admins, leads/privacy_views.py) */
.privacy-card {
    margin-bottom: 18px;
}

.privacy-card h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.privacy-list {
    margin: 0 0 16px;
    padding-left: 20px;
    line-height: 1.7;
    color: var(--ds-text);
}

.privacy-report-button {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 6px;
}

.privacy-danger {
    border-color: #f6c9c9;
}

.privacy-danger h2 {
    color: var(--ds-danger-text);
}

.privacy-delete-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.privacy-delete-form input {
    width: 140px;
    padding: 7px 10px;
    border: 1px solid #f6c9c9;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}

/* Beratungszeiten im Lead-Fenster: nächste freie Zeiten, Slots, "📅 Kalender öffnen" */
.appointment-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.slot-button {
    border: 1px solid var(--ds-primary-ring);
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
    border-radius: 999px;
    padding: 3px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.slot-button:hover {
    background: var(--ds-primary-soft);
}

.slot-picked {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-success-text);
}

.slot-picked:empty {
    display: none;
}

.appointment-day-slots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
}

.appointment-conflict > div {
    margin-top: 8px;
}

/* Über dem Lead-Fenster (z-index 100), unter der Anrufleiste (110). */
.slot-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(18, 21, 25, 0.45);
}

.slot-picker-overlay[hidden] {
    display: none;
}

.slot-picker-panel {
    width: min(1000px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 18px;
    border-radius: 14px;
    background: white;
    box-shadow: 0 20px 50px rgba(18, 21, 25, 0.3);
}

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

.slot-picker-jump {
    padding: 6px 8px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
}

.slot-picker-hint {
    margin-bottom: 10px;
}

.slot-picker-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    gap: 6px;
    overflow-x: auto;
}

.slot-picker-day {
    min-height: 160px;
    padding: 7px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
}

.slot-picker-day .slot-button {
    display: block;
    width: 100%;
    margin-bottom: 4px;
}

.slot-busy {
    margin-bottom: 4px;
    padding: 3px 6px;
    border-radius: 6px;
    background: repeating-linear-gradient(135deg, var(--ds-column), var(--ds-column) 6px, var(--ds-border) 6px, var(--ds-border) 12px);
    color: var(--ds-muted);
    font-size: 11px;
    line-height: 1.3;
}

.appointment-conflict strong {
    display: block;
}

.appointment-day-blocked,
.calendar-blocked {
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--ds-danger-soft);
    color: var(--ds-danger-text);
    font-size: 12px;
    font-weight: 600;
}

.calendar-day.calendar-blocked-day,
.slot-picker-day.calendar-blocked-day {
    background: var(--ds-danger-soft);
}

/* Kalender: Umschalter "Woche | Monat" und Monatsansicht */
.calendar-view-switch {
    display: inline-flex;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    overflow: hidden;
}

.calendar-view-switch button {
    padding: 7px 12px;
    border: none;
    background: white;
    color: var(--ds-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.calendar-view-switch button + button {
    border-left: 1px solid var(--ds-border);
}

.calendar-view-switch button.active {
    background: var(--ds-primary);
    color: white;
}

.calendar-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    gap: 6px;
    overflow-x: auto;
}

.calendar-month-weekday {
    padding: 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-muted);
    text-transform: uppercase;
}

.calendar-month-day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-height: 105px;
    padding: 6px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: white;
    font: inherit;
    text-align: left;
    min-width: 0;
}

.calendar-other-month {
    background: #fafbfd;
    opacity: 0.55;
}

.calendar-month-number {
    align-self: flex-start;
    padding: 0 4px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--ds-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.calendar-month-number:hover {
    background: var(--ds-border);
}

.calendar-today .calendar-month-number {
    background: var(--ds-primary);
    color: white;
}

.calendar-month-day .calendar-blocked {
    margin-bottom: 0;
    padding: 2px 6px;
    font-size: 11px;
}

.calendar-month-item {
    display: block;
    width: 100%;
    padding: 2px 6px;
    border: none;
    border-radius: 6px;
    font: inherit;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.calendar-month-item.calendar-busy {
    cursor: default;
}

.calendar-month-item.calendar-cancelled {
    text-decoration: line-through;
}

.calendar-month-more {
    align-self: flex-start;
    font-size: 11px;
}

/* "📅 Kalender öffnen" als Monat: ganzer Tag anklickbar */
.slot-month-day {
    cursor: pointer;
}

.slot-month-day:hover {
    border-color: var(--ds-primary-ring);
}

.slot-month-free,
.slot-month-busy {
    font-size: 12px;
    font-weight: 600;
}

.slot-month-free {
    color: var(--ds-primary-hover);
}

.slot-month-busy {
    color: var(--ds-muted);
}

/* Änderungshistorie (App changelog): Reiter "Verlauf", Kundenseite, Einstellungen */
.change-log-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--ds-text);
}

.change-log-filter select {
    padding: 6px 8px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    font: inherit;
    background: white;
}

.change-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ds-border);
    font-size: 14px;
}

.change-entry[hidden] {
    display: none;
}

.change-area {
    flex: 0 0 105px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ds-column);
    color: var(--ds-text);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.change-area-campaign,
.change-area-customer { background: var(--ds-primary-soft); color: var(--ds-primary-hover); }
.change-area-stages { background: #ede9fe; color: #6d28d9; }
.change-area-fields { background: var(--ds-warning-soft); color: var(--ds-warning-text); }
.change-area-leadflow,
.change-area-import { background: var(--ds-success-soft); color: var(--ds-success-text); }
.change-area-calendar { background: var(--ds-danger-soft); color: var(--ds-danger-text); }

.change-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.change-log-more {
    margin-top: 10px;
}

/* Rückruf-Pop-up (base.html, telephony/inbound.py): unten rechts, über allem
   außer der Anrufleiste (z-index 110) */
.incoming-calls {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 108;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
}

.incoming-call {
    padding: 14px 16px;
    border: 2px solid var(--ds-primary);
    border-radius: 14px;
    background: white;
    box-shadow: 0 20px 50px rgba(18, 21, 25, 0.3);
    animation: incoming-pulse 1.6s ease-in-out infinite;
}

@keyframes incoming-pulse {
    50% { box-shadow: 0 20px 50px var(--ds-primary-ring); }
}

.incoming-call-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--ds-primary-hover);
}

.incoming-call-close {
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--ds-muted);
    cursor: pointer;
}

.incoming-call-name {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-ink);
}

.incoming-call-number {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--ds-text);
}

.incoming-call-lead {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--ds-primary-ring);
    border-radius: 8px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.incoming-call-lead:hover {
    background: var(--ds-primary-soft);
}

/* Zahl offener verpasster Anrufe in der Seitenleiste */
.nav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ds-danger);
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.nav-badge[hidden] {
    display: none;
}

/* Seite "Eingehende Anrufe" */
.incoming-open-hint {
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--ds-danger-text);
}

.incoming-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ds-border);
    font-size: 14px;
}

.incoming-row-open {
    background: var(--ds-danger-soft);
}

.incoming-row .lead-call-outcome {
    flex: 0 0 auto;
}

.incoming-row-body {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Fenster "Absage begründen" (base.html, leads/rejection.py): liegt über dem Lead-Fenster. */
.rejection-backdrop {
    z-index: 120;
}

.modal.rejection-modal {
    width: 480px;
    max-width: calc(100vw - 32px);
}

.modal.rejection-modal h3 {
    margin-bottom: 6px;
}

.rejection-intro {
    color: var(--ds-text);
    font-size: 13px;
    margin-bottom: 14px;
}

.rejection-calls {
    background: #fafbfd;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--ds-text);
}

.rejection-calls-summary {
    font-weight: 600;
    margin-bottom: 2px;
}

.rejection-calls-summary.none {
    color: var(--ds-warning-text);
    margin-bottom: 0;
}

.rejection-count {
    font-size: 12px;
    color: var(--ds-warning-text);
    margin-top: 4px;
}

.rejection-count.enough {
    color: var(--ds-success-text);
}

.rejection-modal .message {
    margin-bottom: 10px;
}


/* =====================================================================
   REDESIGN PHASE 2: Kundenübersicht + Kundenseite (KONTEXT §20)
   Bausteine des neuen Designs, Präfix ds-.
   Farben: tone-<name> setzt --tone, die Namen kommen aus customers/colors.py.
   ===================================================================== */

.tone-blue { --tone: var(--ds-dot-blue); }
.tone-teal { --tone: var(--ds-dot-teal); }
.tone-orange { --tone: var(--ds-dot-orange); }
.tone-purple { --tone: var(--ds-dot-purple); }
.tone-green { --tone: var(--ds-dot-green); }
.tone-pink { --tone: var(--ds-dot-pink); }
.tone-red { --tone: var(--ds-dot-red); }
.tone-slate { --tone: var(--ds-dot-slate); }
.tone-gray { --tone: var(--ds-dot-gray); }

/* ---------- Seitenkopf ---------- */

.ds-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--ds-muted);
    font-size: 13px;
}

.ds-crumbs a {
    color: var(--ds-muted);
    text-decoration: none;
}

.ds-crumbs a:hover {
    color: var(--ds-primary);
}

.ds-page-head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.ds-page-head h1 {
    font-size: 26px;
    font-weight: 700;
}

.ds-page-meta {
    margin-top: 2px;
    color: var(--ds-muted);
    font-size: 13px;
}

.ds-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ds-section-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 12px;
}

.ds-section-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
}

/* ---------- Kleine Bausteine ---------- */

.ds-muted {
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-link {
    color: var(--ds-primary);
    font-weight: 600;
}

.ds-count {
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(18, 21, 25, 0.07);
    color: var(--ds-text);
    font-size: 11px;
    font-weight: 600;
}

.ds-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tone, var(--ds-dot-gray));
}

/* Anfangsbuchstabe als farbiges Feld (Kunden haben kein Logo) */
.ds-monogram {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius);
    background: color-mix(in srgb, var(--tone, var(--ds-dot-gray)) 13%, white);
    color: var(--tone, var(--ds-muted));
    font-size: 17px;
    font-weight: 700;
}

.ds-monogram.lg {
    width: 52px;
    height: 52px;
    border-radius: var(--ds-radius-lg);
    font-size: 22px;
}

.ds-type-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ds-column);
    color: var(--ds-text);
    font-size: 12px;
    font-weight: 600;
}

/* Status mit Punkt: Aktiv / Inaktiv */
.ds-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ds-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ds-state.on { color: var(--ds-success); }
.ds-state.off { color: var(--ds-muted); }

.ds-campaign-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.ds-campaign-chip.more {
    color: var(--ds-muted);
}

.ds-campaign-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px;
    color: var(--ds-ink);
    text-align: center;
}

.ds-empty-state[hidden] {
    display: none;
}

.ds-empty-state .icon {
    width: 28px;
    height: 28px;
    color: var(--ds-faint);
}

/* ---------- Kennzahlen ---------- */

.ds-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 20px 0 22px;
}

.ds-stat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
}

.ds-stat-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ds-radius);
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
}

.ds-stat-label {
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 600;
}

.ds-stat-value {
    color: var(--ds-ink);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ds-stat-trend {
    color: var(--ds-success);
    font-size: 12px;
    font-weight: 600;
}

.ds-stat-note {
    color: var(--ds-muted);
    font-size: 12px;
}

/* ---------- Werkzeugleiste (Suche, Filter-Chips, Sortierung, Ansicht) ---------- */

.ds-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.ds-toolbar-end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.ds-searchfield {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 280px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-muted);
    transition: border-color var(--ds-fast), box-shadow var(--ds-fast);
}

.ds-searchfield:focus-within {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

/* So lang, weil die allgemeine Regel für Eingabefelder sonst Rahmen und Fokus-Ring setzt */
.ds-searchfield input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.ds-searchfield input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    box-shadow: none;
    color: var(--ds-ink);
    font: inherit;
}

.ds-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--ds-fast), background var(--ds-fast);
}

.ds-chip:hover {
    border-color: var(--ds-border-strong);
}

.ds-chip.active {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
}

.ds-chip-count {
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(18, 21, 25, 0.06);
    font-size: 11px;
}

.ds-select-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 600;
}

.ds-select-inline select {
    padding: 6px 9px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}

/* Umschalter mit zwei, drei Möglichkeiten (Karten | Liste) */
.ds-segmented {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-column);
}

.ds-segmented button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ds-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ds-fast), color var(--ds-fast), box-shadow var(--ds-fast);
}

.ds-segmented button:hover {
    color: var(--ds-ink);
}

.ds-segmented button.active {
    background: var(--ds-surface);
    color: var(--ds-ink);
    box-shadow: var(--ds-shadow-sm);
}

/* ---------- Kundenkarten (Ansicht "Karten") ---------- */

.ds-customer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: 14px;
}

.ds-customer-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "main main"
        "type status"
        "campaigns campaigns"
        "leads new";
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--ds-shadow-sm);
    transition: border-color var(--ds-fast), box-shadow var(--ds-fast), transform var(--ds-fast);
}

.ds-customer-card:hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow);
    transform: translateY(-1px);
}

.ds-customer-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

.ds-customer-card[hidden] {
    display: none;
}

.ds-customer-card.inactive {
    background: #fbfcfd;
}

.ds-customer-card.inactive .ds-customer-name,
.ds-customer-card.inactive .ds-monogram {
    opacity: 0.6;
}

.ds-customer-main { grid-area: main; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ds-customer-type { grid-area: type; align-self: center; }
.ds-customer-status { grid-area: status; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ds-customer-campaigns { grid-area: campaigns; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 26px; }
.ds-customer-figure.leads { grid-area: leads; }
.ds-customer-figure.new { grid-area: new; }

.ds-customer-title {
    min-width: 0;
}

.ds-customer-name {
    overflow: hidden;
    color: var(--ds-ink);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ds-customer-city {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-customer-figure {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    border-top: 1px solid var(--ds-border);
}

.ds-customer-figure strong {
    color: var(--ds-ink);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.ds-customer-figure strong.up {
    color: var(--ds-success);
}

.ds-customer-figure span {
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-customer-arrow {
    color: var(--ds-faint);
    transition: color var(--ds-fast), transform var(--ds-fast);
}

.ds-customer-card:hover .ds-customer-arrow {
    color: var(--ds-primary);
    transform: translateX(2px);
}

/* ---------- Kundenliste (Ansicht "Liste"): gleiche Elemente als Tabelle ---------- */

.ds-customer-list-head {
    display: none;
}

.ds-customers-list .ds-customer-list-head,
.ds-customers-list .ds-customer-card {
    grid-template-columns: minmax(220px, 2fr) 120px minmax(200px, 2.2fr) 70px 90px 100px;
    grid-template-areas: none;
    align-items: center;
    gap: 16px;
}

.ds-customers-list .ds-customer-list-head {
    display: grid;
    padding: 0 18px 8px;
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 600;
}

.ds-customers-list .ds-customer-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
}

.ds-customers-list .ds-customer-card {
    grid-template-rows: none;
    padding: 11px 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ds-customers-list .ds-customer-card:hover {
    background: #fafbfd;
    transform: none;
}

.ds-customers-list .ds-customer-card:not([hidden]) ~ .ds-customer-card {
    border-top: 1px solid var(--ds-border);
}

.ds-customers-list .ds-customer-main,
.ds-customers-list .ds-customer-type,
.ds-customers-list .ds-customer-status,
.ds-customers-list .ds-customer-campaigns,
.ds-customers-list .ds-customer-figure {
    grid-area: auto;
}

.ds-customers-list .ds-customer-campaigns {
    flex-wrap: nowrap;
    min-height: 0;
    overflow: hidden;
}

.ds-customers-list .ds-monogram {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.ds-customers-list .ds-customer-figure {
    padding: 0;
    border: 0;
}

.ds-customers-list .ds-customer-figure span {
    display: none;
}

.ds-customers-list .ds-customer-figure strong {
    font-size: 14px;
}

.ds-customers-list .num {
    text-align: right;
}

/* ---------- Kundenseite ---------- */

.ds-customer-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ds-customer-head .ds-page-meta {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.ds-campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 14px;
}

.ds-campaign-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--ds-shadow-sm);
    transition: border-color var(--ds-fast), box-shadow var(--ds-fast), transform var(--ds-fast);
}

.ds-campaign-card:hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow);
    transform: translateY(-1px);
}

.ds-campaign-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

.ds-campaign-card.inactive {
    background: #fbfcfd;
}

.ds-campaign-card.inactive .ds-campaign-name,
.ds-campaign-card.inactive .ds-stage-bar {
    opacity: 0.6;
}

.ds-campaign-top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ds-campaign-top .ds-dot {
    width: 10px;
    height: 10px;
}

.ds-campaign-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ds-ink);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ds-campaign-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: -6px;
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-campaign-meta .ds-inline {
    gap: 4px;
}

.ds-campaign-figures {
    display: flex;
    gap: 28px;
}

.ds-campaign-figures div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ds-campaign-figures strong {
    color: var(--ds-ink);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.ds-campaign-figures span {
    color: var(--ds-muted);
    font-size: 12px;
}

/* Balken: wie verteilen sich die Leads auf die Spalten */
.ds-stage-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ds-column);
}

.ds-stage-bar span {
    min-width: 4px;
    background: var(--tone);
}

.ds-stage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: -4px;
    color: var(--ds-text);
    font-size: 12px;
}

.ds-stage-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ds-stage-legend strong {
    color: var(--ds-ink);
}

.ds-campaign-foot {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border);
}

.ds-campaign-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--ds-fast), transform var(--ds-fast);
}

.ds-campaign-card:hover .ds-campaign-open,
.ds-campaign-card:focus-visible .ds-campaign-open {
    opacity: 1;
    transform: none;
}

.ds-campaign-new {
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border: 1.5px dashed var(--ds-border-strong);
    background: transparent;
    box-shadow: none;
    color: var(--ds-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ds-campaign-new:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    box-shadow: none;
}

.ds-campaign-new .icon {
    width: 22px;
    height: 22px;
}

/* Gesamtkalender im Kasten (Inhalt kommt weiter aus _calendar_week.html) */
.ds-calendar-box {
    min-width: 0;
    overflow-x: auto;
    padding: 14px 16px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
}

/* ---------- Dialoge (openDialog/closeDialog in base.html) ---------- */

.ds-dialog {
    display: flex;
    flex-direction: column;
    width: min(500px, 100%);
    max-height: 100%;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-lg);
    animation: modal-in 0.25s var(--ds-ease);
}

.ds-dialog.wide {
    width: min(720px, 100%);
}

.ds-dialog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-border);
}

.ds-dialog-head h2 {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
}

.ds-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    overflow-y: auto;
}

.ds-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg);
}

.ds-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-muted);
    cursor: pointer;
    transition: background var(--ds-fast), color var(--ds-fast);
}

.ds-icon-btn:hover {
    background: rgba(18, 21, 25, 0.06);
    color: var(--ds-ink);
}

.ds-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

.ds-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ds-field > span {
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 600;
}

.ds-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-ink);
    font: inherit;
}

.ds-input-plz {
    width: 130px;
}

.ds-hint {
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 400;
}

/* Schalter (an/aus) statt Ankreuzfeld */
.ds-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    cursor: pointer;
}

.ds-switch-row strong {
    display: block;
    color: var(--ds-ink);
}

.ds-switch-row small {
    display: block;
    margin-top: 3px;
    color: var(--ds-muted);
    font-size: 12px;
    line-height: 1.45;
}

.ds-switch {
    flex-shrink: 0;
    position: relative;
    width: 38px;
    height: 22px;
    margin: 2px 0 0;
    border-radius: 999px;
    background: var(--ds-border-strong);
    appearance: none;
    cursor: pointer;
    transition: background var(--ds-fast);
}

.ds-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--ds-shadow-sm);
    transition: transform 0.2s var(--ds-ease);
}

.ds-switch:checked {
    background: var(--ds-primary);
}

.ds-switch:checked::after {
    transform: translateX(16px);
}

.ds-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

/* Spalten der gewählten Statusvorlage */
.ds-template-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: -6px;
}

.ds-template-preview[hidden] {
    display: none;
}

.ds-template-stage {
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--ds-column);
    color: var(--ds-text);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 900px) {
    .ds-page-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ds-actions {
        flex-wrap: wrap;
        margin-left: 0;
    }

    .ds-searchfield {
        width: 100%;
    }

    .ds-toolbar-end {
        margin-left: 0;
    }

    /* Liste wird auf schmalen Bildschirmen wieder zu Karten */
    .ds-customers-list .ds-customer-list-head {
        display: none;
    }

    .ds-customers-list .ds-customer-card {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "main main"
            "type status"
            "campaigns campaigns"
            "leads new";
    }

    .ds-customers-list .ds-customer-main { grid-area: main; }
    .ds-customers-list .ds-customer-type { grid-area: type; }
    .ds-customers-list .ds-customer-status { grid-area: status; }
    .ds-customers-list .ds-customer-campaigns { grid-area: campaigns; flex-wrap: wrap; }
    .ds-customers-list .ds-customer-figure.leads { grid-area: leads; }
    .ds-customers-list .ds-customer-figure.new { grid-area: new; }

    .ds-customers-list .ds-customer-figure {
        padding-top: 12px;
        border-top: 1px solid var(--ds-border);
        text-align: left;
    }

    .ds-customers-list .ds-customer-figure span {
        display: block;
    }
}


/* =====================================================================
   REDESIGN PHASE 3: Seite "Einstellungen" + Reiter "Einstellungen" der Kampagne
   (KONTEXT §20). Bausteine ds-…, Knöpfe = primary-/secondary-button.
   ===================================================================== */

[data-source-panel][hidden],
.ds-field[hidden],
.ds-savebar[hidden] {
    display: none;
}

.ds-btn-sm {
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.ds-icon-btn.danger:hover {
    background: var(--ds-danger-soft);
    color: var(--ds-danger);
}

.ds-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ds-icon-btn.danger:disabled:hover {
    background: transparent;
    color: var(--ds-muted);
}

.ds-required {
    color: var(--ds-danger);
    font-style: normal;
}

/* ---------- Menü "⋯" (als <details>, ohne JS) ---------- */

.ds-menu-wrap {
    position: relative;
}

.ds-menu-wrap > summary {
    list-style: none;
}

.ds-menu-wrap > summary::-webkit-details-marker {
    display: none;
}

.ds-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-lg);
    animation: ds-pop 0.14s var(--ds-ease);
}

.ds-menu-right {
    left: auto;
    right: 0;
}

@keyframes ds-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.ds-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: none;
    color: var(--ds-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.ds-menu-item:hover {
    background: var(--ds-bg);
}

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

/* ---------- Liste (Sperrtage) ---------- */

.ds-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
}

.ds-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
}

.ds-list-row + .ds-list-row {
    border-top: 1px solid var(--ds-border);
}

.ds-list-row > :last-child {
    margin-left: auto;
}

.ds-list-empty {
    padding: 12px;
    color: var(--ds-muted);
    font-size: 13px;
}

.ds-blocked-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ds-danger-soft);
    color: var(--ds-danger);
}

/* ---------- Datei wählen ---------- */

.ds-file {
    position: relative;
}

.ds-file input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.ds-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    border: 1.5px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--ds-fast), background var(--ds-fast);
}

.ds-dropzone:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
}

.ds-dropzone .icon {
    width: 20px;
    height: 20px;
    color: var(--ds-primary);
}

.ds-file-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ds-file-inline:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
}

/* ---------- Auswahl als Kacheln (Art der Quelle) ---------- */

.ds-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ds-choice-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
    cursor: pointer;
    transition: border-color var(--ds-fast), background var(--ds-fast), box-shadow var(--ds-fast);
}

.ds-choice-item:hover {
    border-color: var(--ds-border-strong);
}

.ds-choice-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ds-choice-item:has(input:checked) {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
    box-shadow: 0 0 0 1px var(--ds-primary);
}

.ds-choice-item:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

.ds-choice-item strong {
    display: block;
    color: var(--ds-ink);
    font-size: 13px;
}

.ds-choice-item small {
    display: block;
    margin-top: 2px;
    color: var(--ds-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Farbiges Feld mit Icon: Quellenart */
.ds-choice-icon,
.ds-source-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-column);
    color: var(--ds-text);
    font-weight: 800;
}

.ds-source-icon.pool { background: #e3f4f4; color: var(--ds-dot-teal); }
.ds-choice-icon.csv,
.ds-source-icon.csv { background: var(--ds-success-soft); color: var(--ds-success); }
.ds-choice-icon.webhook,
.ds-source-icon.webhook { background: #f1ecfb; color: var(--ds-dot-purple); }
.ds-choice-icon.meta,
.ds-source-icon.meta { background: var(--ds-primary-soft); color: var(--ds-primary); font-size: 18px; }

.ds-source-icon.sm {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

/* ---------- Einstellungs-Seiten: Navigation links, Bereiche rechts ---------- */

.ds-settings {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 20px;
}

.ds-settings-nav {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ds-settings-nav-label {
    margin: 14px 10px 4px;
    color: var(--ds-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ds-settings-nav-label:first-child {
    margin-top: 0;
}

.ds-settings-nav a {
    padding: 7px 10px;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--ds-fast), color var(--ds-fast);
}

.ds-settings-nav a:hover {
    background: rgba(18, 21, 25, 0.04);
    color: var(--ds-ink);
}

.ds-settings-nav a.active {
    background: var(--ds-surface);
    color: var(--ds-primary);
    font-weight: 700;
    box-shadow: var(--ds-shadow-sm);
}

.ds-settings-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 900px;
}

.ds-settings-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ds-section {
    scroll-margin-top: 20px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
}

/* Abschnitt ohne eigenen Kasten (Statusvorlagen = Karten) */
.ds-section.plain {
    border: 0;
    background: none;
    box-shadow: none;
}

.ds-section.plain .ds-section-title {
    padding: 0 0 12px;
    border: 0;
}

.ds-section-title {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--ds-border);
}

.ds-section-title h2 {
    font-size: 16px;
    font-weight: 700;
}

.ds-section-title p {
    grid-column: 1;
    margin: 3px 0 0;
    color: var(--ds-muted);
    font-size: 13px;
}

.ds-section-action {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
}

.ds-section-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 22px 20px;
}

.ds-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.ds-field-full {
    grid-column: 1 / -1;
}

.ds-field .ds-goal-icon { color: var(--ds-success); }
.ds-field .ds-rejection-icon { color: var(--ds-danger); }

.ds-field .ds-inline {
    gap: 5px;
}

.ds-field em {
    font-style: normal;
    font-weight: 400;
}

/* Eingabe mit Einheit dahinter ("30 Minuten") */
.ds-input-unit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ds-input-unit .ds-input {
    width: 100px;
}

.ds-input-unit > span {
    color: var(--ds-muted);
    font-size: 13px;
    font-weight: 400;
}

.ds-input-unit.sm .ds-input {
    width: 76px;
}

/* Beratungszeiten: eine Zeile pro Wochentag */
.ds-hours {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.ds-hours-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 10px;
}

.ds-field .ds-hours-day {
    display: grid;
    place-items: center;
    height: 32px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 700;
}

.ds-hours-row.off .ds-hours-day {
    background: var(--ds-column);
    color: var(--ds-muted);
}

.ds-hours-row.off .ds-input {
    background: #fafbfd;
}

/* Leiste "Ungespeicherte Änderungen" – klebt unten, solange sichtbar */
.ds-savebar {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 16px;
    border-radius: var(--ds-radius);
    background: var(--ds-ink);
    color: #fff;
    font-size: 13px;
    box-shadow: var(--ds-shadow-lg);
    animation: ds-rise 0.25s var(--ds-ease);
}

.ds-savebar span {
    margin-right: auto;
}

.ds-savebar .secondary-button {
    border-color: rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #fff;
}

.ds-section-body .ds-savebar {
    margin-top: 4px;
}

@keyframes ds-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.ds-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.ds-add-row .secondary-button,
.ds-add-row .primary-button {
    height: 39px;
}

.ds-grow {
    flex: 1;
    min-width: 180px;
}

/* ---------- Bearbeitbare Zeilen (je Zeile ein Formular) ---------- */

.ds-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}

.ds-rows-head,
.ds-edit-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1fr) 150px;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}

.ds-rows-2 .ds-rows-head,
.ds-rows-2 .ds-edit-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 150px;
}

.ds-rows-head {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ds-border);
    border-radius: var(--ds-radius) var(--ds-radius) 0 0;
    background: #fafbfd;
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 600;
}

.ds-edit-row + .ds-edit-row,
.ds-rows-empty + .ds-edit-row {
    border-top: 1px solid var(--ds-border);
}

.ds-edit-row {
    transition: background var(--ds-fast);
}

.ds-edit-row:hover {
    background: #fafbfd;
}

.ds-edit-row.dirty {
    background: var(--ds-warning-soft);
}

.ds-rows-empty {
    padding: 12px;
    color: var(--ds-muted);
    font-size: 13px;
}

.ds-base-name {
    padding: 0 11px;
    color: var(--ds-ink);
    font-weight: 600;
}

.ds-order {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-order .ds-icon-btn {
    width: 24px;
    height: 24px;
}

.ds-lock {
    color: var(--ds-faint);
}

.ds-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ds-row-save {
    visibility: hidden;
}

.ds-edit-row.dirty .ds-row-save {
    visibility: visible;
}

/* Eingabefeld, das wie Text aussieht, bis man darüberfährt oder hineinklickt.
   input… statt nur .ds-input, damit es die allgemeine Regel für Eingabefelder schlägt. */
input.ds-input.quiet:not(:hover):not(:focus),
select.ds-input.quiet:not(:hover):not(:focus) {
    border-color: transparent;
    background: transparent;
}

.ds-input.quiet {
    font-weight: 600;
}

select.ds-input.quiet {
    font-weight: 500;
}

.ds-add-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Textfeld nimmt den Platz (das versteckte CSRF-Feld zählt nicht) */
.ds-add-inline > input.ds-input:not([type="hidden"]) {
    flex: 1;
    width: auto;
    min-width: 220px;
}

.ds-add-inline > select.ds-input {
    flex: 0 0 160px;
    width: 160px;
}

.ds-add-inline .primary-button,
.ds-add-inline .secondary-button {
    height: 39px;
}

/* ---------- Lead-Flow: Quellen ---------- */

.ds-sources {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-source {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
}

.ds-source.locked {
    grid-template-columns: auto minmax(0, 1fr) auto;
    background: #fafbfd;
}

.ds-source.off {
    background: #fafbfd;
}

.ds-source.off .ds-source-icon,
.ds-source.off .ds-source-name,
.ds-source.off .ds-source-body {
    opacity: 0.5;
}

.ds-source-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ds-source-title > strong {
    color: var(--ds-ink);
}

.ds-source-name.ds-input.quiet {
    margin-left: -11px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--ds-ink);
}

.ds-source-body {
    grid-column: 2 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ds-source-body > * {
    align-self: stretch;
}

.ds-source-body > .ds-file-form {
    align-self: flex-start;
}

.ds-file-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-pending {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-success-soft);
    font-size: 13px;
}

.ds-pending > .icon {
    color: var(--ds-success);
}

.ds-pending .primary-button {
    margin-left: auto;
    white-space: nowrap;
}

.ds-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ds-url-row code {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    overflow: hidden;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-column);
    color: var(--ds-ink);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ds-deliveries {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.ds-deliveries strong {
    color: var(--ds-ink);
}

.ds-delivery {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ds-delivery .icon {
    color: var(--ds-success);
}

.ds-delivery.error,
.ds-delivery.error .icon {
    color: var(--ds-danger);
}

/* ---------- Mapping-Tabelle ---------- */

.ds-mapping-scroll {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}

.ds-mapping {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ds-mapping th,
.ds-mapping td {
    padding: 7px 12px;
    text-align: left;
    vertical-align: middle;
}

.ds-mapping thead th {
    border-bottom: 1px solid var(--ds-border);
    background: #fafbfd;
    color: var(--ds-ink);
    font-weight: 700;
    white-space: nowrap;
}

.ds-mapping th small,
.ds-mapping td small {
    display: block;
    color: var(--ds-muted);
    font-size: 11px;
    font-weight: 500;
}

.ds-mapping tbody tr + tr td {
    border-top: 1px solid var(--ds-border);
}

.ds-mapping td:first-child,
.ds-mapping th:first-child {
    position: sticky;
    left: 0;
    min-width: 200px;
    background: var(--ds-surface);
    color: var(--ds-ink);
}

.ds-mapping th:first-child {
    background: #fafbfd;
}

.ds-mapping td:not(:first-child) {
    min-width: 220px;
}

.ds-mapping .ds-input {
    padding: 6px 9px;
    font-size: 13px;
    color: var(--ds-muted);
}

input.ds-input.filled:not(:focus),
select.ds-input.filled:not(:focus) {
    border-color: var(--ds-success);
    background: var(--ds-success-soft);
    color: var(--ds-ink);
}

/* Spalten einer Vorlage mit Farbpunkt */
.ds-template-stage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ds-template-stage.pool {
    background: #e3f4f4;
}

/* ---------- Statusvorlagen-Karten (Seite "Einstellungen") ---------- */

.ds-template-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ds-template-card {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
    transition: border-color var(--ds-fast), box-shadow var(--ds-fast);
}

.ds-template-card[hidden] {
    display: none;
}

.ds-template-card.new {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
    animation: ds-rise 0.25s var(--ds-ease);
}

.ds-template-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 8px;
    border-bottom: 1px solid var(--ds-border);
}

.ds-template-name.ds-input.quiet {
    flex: 1;
    color: var(--ds-ink);
    font-size: 16px;
    font-weight: 700;
}

.ds-template-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px;
    padding: 16px 18px;
}

.ds-template-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ds-stage-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    counter-reset: stage;
}

.ds-stage-edit {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 2px;
    counter-increment: stage;
}

.ds-field .ds-stage-number {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ds-column);
    color: var(--ds-muted);
    font-size: 11px;
    font-weight: 700;
}

.ds-stage-number::before {
    content: counter(stage);
}

.ds-stage-edit .ds-input.quiet {
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: 500;
}

.ds-stage-edit .ds-icon-btn {
    width: 26px;
    height: 26px;
    opacity: 0;
    transition: opacity var(--ds-fast);
}

.ds-stage-edit:hover .ds-icon-btn,
.ds-stage-edit:focus-within .ds-icon-btn {
    opacity: 1;
}

.ds-add-stage {
    align-self: flex-start;
    margin: 6px 0 0 28px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.ds-add-stage .icon {
    vertical-align: -3px;
}

.ds-pool-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ds-field .ds-pool-chip,
.ds-pool-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    color: var(--ds-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ds-fast), background var(--ds-fast), color var(--ds-fast);
}

.ds-pool-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ds-pool-chip .icon {
    display: none;
}

.ds-pool-chip:has(input:checked) {
    border-color: var(--ds-dot-teal);
    background: #e3f4f4;
    color: var(--ds-dot-teal);
}

.ds-pool-chip:has(input:checked) .icon {
    display: block;
}

.ds-pool-chip:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

.ds-template-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid var(--ds-border);
    border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg);
    background: #fafbfd;
}

.ds-template-state {
    margin-left: auto;
    color: var(--ds-warning);
    font-size: 12px;
    font-weight: 600;
    visibility: hidden;
}

.ds-template-card.dirty .ds-template-state {
    visibility: visible;
}

.ds-danger-btn {
    color: var(--ds-muted);
}

.ds-danger-btn:hover {
    border-color: var(--ds-danger);
    color: var(--ds-danger);
}

.ds-pool-name {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 4px;
}

.ds-pool-name strong {
    display: block;
    color: var(--ds-ink);
}

.ds-pool-name small {
    font-size: 12px;
}

/* Verlauf im Kasten: Abstand des gemeinsamen _change_log.html */
.ds-section-body > .change-log {
    margin: 0;
}

@media (max-width: 900px) {
    .ds-settings {
        grid-template-columns: 1fr;
    }

    .ds-settings-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ds-settings-nav-label {
        display: none;
    }

    .ds-form-grid,
    .ds-choice,
    .ds-template-body {
        grid-template-columns: 1fr;
    }

    .ds-section-title {
        grid-template-columns: 1fr;
    }

    .ds-section-action {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: 10px;
    }

    .ds-rows-head {
        display: none;
    }

    .ds-edit-row,
    .ds-rows-2 .ds-edit-row {
        grid-template-columns: 1fr 1fr;
    }

    .ds-order {
        display: none;
    }

    .ds-row-actions {
        grid-column: 1 / -1;
    }

    .ds-source {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .ds-source-body {
        grid-column: 1 / -1;
    }

    .ds-pending {
        flex-wrap: wrap;
    }
}


/* =====================================================================
   REDESIGN PHASE 4: Kampagnenseite / Board (KONTEXT §20)
   Die Klassen .column, .lead-list, .lead-card, .count, .column-menu …
   bleiben, weil das JS in campaign_detail.html daran hängt; hier bekommen
   sie den neuen Look. Spaltenfarbe: tone-<name> an .column.
   ===================================================================== */

/* ---------- Kopf und Reiter ---------- */

.ds-campaign-head h1 {
    gap: 12px;
}

.ds-campaign-head h1 .ds-state {
    font-size: 12px;
}

.ds-campaign-head + .tabs {
    margin-top: 18px;
    margin-bottom: 16px;
}

.ds-board-toolbar {
    margin-bottom: 12px;
}

.ds-board-hint {
    margin-left: auto;
}

/* ---------- Spalten ---------- */

.pipeline {
    gap: 12px;
    padding-bottom: 12px;
}

.column {
    flex: 0 0 272px;
    width: 272px;
    min-height: 520px;
    padding: 0;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-column);
    transition: background var(--ds-fast), box-shadow var(--ds-fast), opacity var(--ds-fast);
}

.column-header {
    margin: 0;
    padding: 12px 10px 4px 14px;
}

.column-title-row {
    margin-bottom: 6px;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ds-ink);
    font-size: 13px;
    font-weight: 700;
}

.column-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goal-mark {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    margin: 0;
}

.goal-mark.goal { color: var(--ds-success); }
.goal-mark.rejection { color: var(--ds-danger); }

.column-tools {
    gap: 2px;
}

.count {
    margin-right: 4px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(18, 21, 25, 0.07);
    color: var(--ds-text);
    font-size: 11px;
    font-weight: 600;
}

.column-filter-button,
.column-menu-button {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-muted);
    cursor: pointer;
    transition: background var(--ds-fast), color var(--ds-fast);
}

.column-filter-button:hover,
.column-menu-button:hover {
    background: rgba(18, 21, 25, 0.06);
    color: var(--ds-ink);
}

/* Aktiver Spaltenfilter */
.column-filter-button.active {
    background: var(--ds-primary);
    color: #fff;
}

.column-filter-info {
    margin: 0 0 8px;
    padding: 5px 8px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
}

.column-menu {
    top: 34px;
    min-width: 230px;
    padding: 6px;
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-lg);
    animation: ds-pop 0.14s var(--ds-ease);
}

.column-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}

.column-menu button:hover {
    background: var(--ds-bg);
}

.column-menu button .icon {
    color: var(--ds-muted);
}

.column-menu .column-menu-danger,
.column-menu .column-menu-danger .icon {
    color: var(--ds-danger);
}

/* Power Dialer starten */
.call-column-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 6px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    transition: background var(--ds-fast), color var(--ds-fast), border-color var(--ds-fast);
}

.call-column-button:hover {
    border-style: solid;
    border-color: var(--ds-primary);
    background: var(--ds-surface);
    color: var(--ds-primary);
}

.lead-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 420px;
    padding: 0 10px 12px;
}

.lead-list-empty {
    padding: 18px 8px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius);
    color: var(--ds-faint);
    font-size: 12px;
    text-align: center;
}

/* Pool-Spalte: gleiche Form, eigener Ton */
.pool-column {
    border: 0;
    background: #eaf5f4;
}

.pool-badge {
    flex-shrink: 0;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(26, 154, 154, 0.12);
    color: var(--ds-dot-teal);
    font-size: 10px;
    font-weight: 700;
}

.pool-subtitle {
    margin: -2px 0 8px;
    color: var(--ds-muted);
    font-size: 12px;
}

/* ---------- Lead-Karte ---------- */

.lead-card {
    position: relative;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
    cursor: pointer;
    transition: border-color var(--ds-fast), box-shadow var(--ds-fast), transform var(--ds-fast) var(--ds-ease);
}

.lead-card:hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow);
    transform: translateY(-1px);
}

.lead-card-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}

.lead-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--ds-ink);
    font-size: 14px;
    font-weight: 700;
}

.lead-distance {
    flex-shrink: 0;
    margin: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.lead-distance:empty {
    display: none;
}

.lead-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ds-muted);
    font-size: 12px;
}

.lead-row + .lead-row {
    margin-top: 3px;
}

.lead-phone {
    margin: 0;
}

.lead-last-call.reached { color: var(--ds-success-text); }
.lead-last-call.not_reached { color: var(--ds-danger-text); }
.lead-last-call.mailbox { color: var(--ds-warning-text); }

.lead-next-appointment {
    margin-top: 3px;
    color: var(--ds-primary);
    font-weight: 600;
}

.lead-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.lead-tags:empty {
    display: none;
}

.lead-tag {
    padding: 1px 7px;
    border-radius: 6px;
    background: #f1f4f8;
    color: var(--ds-text);
    font-size: 11px;
    font-weight: 500;
}

.pool-in-campaign {
    color: var(--ds-success-text);
    font-weight: 600;
}

/* ---------- Dialoge des Boards ---------- */

.ds-choice-icon.pool {
    background: #e3f4f4;
    color: var(--ds-dot-teal);
}

.ds-toggle-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}

.ds-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
}

.ds-toggle-row + .ds-toggle-row {
    border-top: 1px solid var(--ds-border);
}

.ds-toggle-text {
    flex: 1;
}

.ds-field .ds-toggle-text,
.ds-toggle-text {
    color: var(--ds-text);
    font-weight: 400;
}

.ds-toggle-text strong {
    display: block;
    color: var(--ds-ink);
    font-size: 13px;
}

.ds-toggle-text small {
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-foot-link {
    margin-right: auto;
    align-self: center;
    font-size: 12px;
}

.archive-list.ds-list {
    max-height: 50vh;
    margin: 0;
    overflow-y: auto;
}

.archive-row.ds-list-row {
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.archive-row.ds-list-row + .archive-row.ds-list-row {
    border-top: 1px solid var(--ds-border);
}

.archive-row.ds-list-row:hover {
    background: #fafbfd;
}

.archive-row .archive-name {
    display: block;
    color: var(--ds-ink);
}

.archive-row > .icon {
    color: var(--ds-faint);
}


/* =====================================================================
   REDESIGN PHASE 5: Lead-Fenster (lead_detail.html, KONTEXT §20)
   Der Rahmen #leadDetailContent (base.html) wird nur umgestellt, wenn der
   neue Kopf darin steckt – das Personen-Fenster nutzt denselben Rahmen.
   ===================================================================== */

.lead-detail-modal:has(> .ds-lead-head) {
    width: min(1180px, calc(100vw - 32px));
    max-height: 90vh;
    padding: 0;
    overflow-y: auto;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-bg);
    box-shadow: var(--ds-shadow-lg);
}

/* Anrufliste / Power Dialer (renderQueueBar) steht oberhalb des Kopfs */
.lead-detail-modal:has(> .ds-lead-head) > .queue-bar {
    margin: 12px 20px 0;
}

/* ---------- Kopf ---------- */

.ds-lead-head {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--ds-surface);
}

.ds-lead-title {
    min-width: 0;
}

.ds-lead-title h2 {
    font-size: 19px;
    font-weight: 700;
}

.ds-lead-sub {
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-lead-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Farbige Linie unter dem Kopf in der Farbe der Spalte – als Kante des
   (klebenden) Kopfs, damit sie beim Scrollen mitwandert. Das Element
   .ds-lead-accent bleibt nur als Anker für die Abstände darunter. */
.ds-lead-head {
    border-bottom: 3px solid color-mix(in srgb, var(--tone, var(--ds-primary)) 55%, white);
}

.ds-lead-accent {
    display: none;
}

.ds-contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: copy;
    transition: border-color var(--ds-fast), background var(--ds-fast);
}

.ds-contact-chip:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
}

/* Status-Pill: echtes <select> (changeLeadStageFromDetail), sieht aus wie ein Chip */
.ds-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px 0 12px;
    border: 1px solid color-mix(in srgb, var(--tone, var(--ds-dot-blue)) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone, var(--ds-dot-blue)) 10%, white);
    color: color-mix(in srgb, var(--tone, var(--ds-dot-blue)) 80%, black);
    cursor: pointer;
}

.ds-status .ds-dot {
    background: var(--tone, var(--ds-dot-blue));
}

.ds-status select.review-status,
.ds-status select.review-status:focus {
    padding: 0 18px 0 0;
    margin-right: -18px;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    appearance: none;
    cursor: pointer;
}

.ds-status:focus-within {
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

.ds-status .icon {
    pointer-events: none;
}

/* Menü "⋯" */
.lead-menu {
    min-width: 250px;
    padding: 6px;
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-lg);
    animation: ds-pop 0.14s var(--ds-ease);
}

.lead-menu button,
.lead-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--ds-radius-sm);
    font: inherit;
    font-size: 13px;
}

.lead-menu .icon {
    color: var(--ds-muted);
}

.lead-menu-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--ds-border);
}

/* Bereiche "Verschieben" / "Export" unter dem Kopf */
.ds-lead-accent ~ .lead-panel,
.ds-lead-accent ~ .lead-transfer-message,
.ds-lead-accent ~ .assign-box {
    margin: 12px 20px 0;
}

.lead-transfer-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lead-transfer-fields .ds-input {
    flex: 1;
    min-width: 200px;
}

/* ---------- Anrufleiste ---------- */

.ds-callbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

.ds-outcomes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ds-outcomes-label {
    margin-right: 2px;
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-outcome {
    height: 30px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: filter var(--ds-fast), transform var(--ds-fast);
}

.ds-outcome:hover { filter: brightness(0.96); }
.ds-outcome:active { transform: scale(0.97); }
.ds-outcome:disabled { opacity: 0.6; cursor: wait; }

.ds-outcome.reached { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-outcome.not_reached { background: var(--ds-danger-soft); color: var(--ds-danger-text); }
.ds-outcome.mailbox { background: var(--ds-warning-soft); color: var(--ds-warning-text); }

.ds-lastcall {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-saved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ds-success-text);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Inhalt: zwei Spalten ---------- */

.ds-lead-body {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
}

.ds-lead-left,
.ds-lead-right {
    min-width: 0;
    padding: 18px 20px 24px;
}

.ds-lead-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
    border-right: 1px solid var(--ds-border);
}

.ds-panel {
    padding: 4px 14px 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
}

.ds-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 6px;
}

.ds-panel-head h3,
.ds-panel .contact-heading {
    margin: 0;
    color: var(--ds-ink);
    font-size: 13px;
    font-weight: 700;
}

.ds-panel .contact-heading {
    padding: 8px 0 6px;
}

/* Datenzeilen wie eine Tabelle (Leadtable) */
.ds-panel .review-data-row {
    grid-template-columns: 40% 1fr;
    gap: 12px;
    align-items: center;
    min-height: 38px;
    padding: 6px 0;
    border-top: 1px solid var(--ds-border);
    font-size: 13px;
}

.ds-panel .review-value {
    color: var(--ds-ink);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ds-panel .contact-form {
    padding-bottom: 6px;
}

.ds-panel .tag-list {
    margin: 2px 0 10px;
}

.ds-panel .lead-inline-form,
.ds-fold .lead-inline-form {
    align-items: center;
    flex-wrap: wrap;
}

.ds-panel .lead-inline-form .ds-input,
.ds-fold .lead-inline-form .ds-input {
    width: auto;
    flex: 1;
    min-width: 140px;
    padding: 6px 9px;
    font-size: 13px;
}

.ds-panel .lead-inline-form .ds-input-plz-sm {
    flex: 0 0 90px;
    min-width: 0;
}

.ds-panel .lead-distance {
    margin-right: 6px;
}

/* Aufklapp-Bereiche */
.ds-fold {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
}

.ds-fold.lead-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    color: var(--ds-ink);
    font-size: 13px;
    font-weight: 700;
}

.ds-fold.lead-fold > summary::before {
    content: none;
}

.ds-fold-arrow {
    color: var(--ds-muted);
    transition: transform 0.2s var(--ds-ease);
}

.ds-fold[open] .ds-fold-arrow {
    transform: rotate(90deg);
}

.ds-fold > :not(summary) {
    margin: 0 14px 10px;
}

.ds-fold .nearby-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}

.ds-fold .nearby-row + .nearby-row {
    border-top: 1px solid var(--ds-border);
}

.ds-danger-zone {
    margin: 0;
}

.ds-danger-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--ds-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ds-danger-link:hover {
    color: var(--ds-danger);
}

/* ---------- Rechts: Beschreibung, Reiter, Timeline ---------- */

.ds-describe label {
    display: block;
    margin-bottom: 6px;
    color: var(--ds-ink);
    font-size: 13px;
    font-weight: 700;
}

.ds-describe textarea,
.ds-composer textarea {
    resize: vertical;
    min-height: 64px;
}

.ds-describe-actions,
.ds-composer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.ds-lead-right .lead-tabs {
    display: flex;
    gap: 4px;
    margin: 18px 0 14px;
    border-bottom: 1px solid var(--ds-border);
}

.ds-lead-right .lead-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    margin-bottom: -1px;
    padding: 8px 10px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ds-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ds-lead-right .lead-tab:hover,
.ds-lead-right .lead-tab.active {
    color: var(--ds-ink);
}

.ds-lead-right .lead-tab.active {
    border-bottom-color: var(--ds-primary);
}

.ds-lead-right .lead-tab-count {
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(18, 21, 25, 0.07);
    color: var(--ds-text);
    font-size: 11px;
    font-weight: 600;
}

.ds-lead-right .lead-tab-panel:not([hidden]) {
    animation: ds-fade 0.18s ease;
}

@keyframes ds-fade {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

.ds-composer {
    margin-bottom: 18px;
}

/* Timeline wie bei Leadtable: Symbol, Kopfzeile, Sprechblase */
.ds-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ds-timeline:has(.ds-entry)::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 11px;
    width: 1px;
    background: var(--ds-border-strong);
}

.ds-timeline.compact {
    gap: 12px;
}

.ds-entry {
    position: relative;
    padding-left: 34px;
}

.ds-entry-icon {
    position: absolute;
    top: -2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    background: var(--ds-surface);
    color: var(--ds-muted);
}

.ds-entry-icon.internal {
    border-color: #f1d98a;
    background: #fff8df;
    color: var(--ds-warning-text);
}

.ds-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 5px;
    color: var(--ds-muted);
    font-size: 12px;
}

.ds-entry-meta strong {
    color: var(--ds-ink);
    font-weight: 600;
}

.ds-entry-meta .note-delete {
    position: static;
    margin-left: auto;
}

.ds-entry-text {
    margin-top: 2px;
    color: var(--ds-text);
    font-size: 13px;
}

.ds-bubble {
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.ds-bubble.internal {
    border-color: #f1e2ac;
    background: #fffbea;
}

.ds-badge-internal {
    padding: 0 6px;
    border-radius: 999px;
    background: #fdf1c7;
    color: var(--ds-warning-text);
    font-size: 10px;
    font-weight: 700;
}

/* Löschen-Knöpfe (Notiz, Termin, Datei) als leise Icons */
.ds-lead-body .note-delete button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: none;
    color: var(--ds-faint);
    cursor: pointer;
}

.ds-lead-body .note-delete button:hover {
    background: var(--ds-danger-soft);
    color: var(--ds-danger);
}

/* Anrufe, Dateien als Liste */
.ds-lead-right .ds-list-row.lead-call {
    padding: 8px 12px;
    border-bottom: 0;
}

.ds-lead-right .ds-list-row.lead-call > :last-child {
    margin-left: 0;
}

.ds-lead-right .lead-file .note-delete {
    position: static;
    margin-left: auto;
}

.ds-lead-right .lead-file a {
    color: var(--ds-ink);
    text-decoration: none;
}

.lead-file-form {
    margin-bottom: 14px;
}

.lead-file-form .ds-dropzone {
    margin-bottom: 0;
}

.lead-file-form .review-actions {
    margin-top: 8px;
}

/* Termine */
.ds-lead-right .appointment-form {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
}

.ds-lead-right .appointment-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.ds-lead-right .appointment-calendar-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.ds-lead-right .slot-button {
    padding: 4px 10px;
    border: 1px solid var(--ds-primary-ring);
    border-radius: 999px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ds-lead-right .slot-button:hover {
    background: var(--ds-primary);
    color: #fff;
}

.ds-lead-right .appointment-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ds-lead-right .appointment-fields .ds-input {
    padding: 7px 9px;
    font-size: 13px;
}

.ds-lead-right .lead-appointment {
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
    font-size: 13px;
}

.ds-lead-right .lead-appointment-head .note-delete {
    position: static;
    margin-left: auto;
}

.ds-lead-right .lead-appointment-head > .icon {
    color: var(--ds-primary);
}

.ds-lead-right .lead-appointment-note {
    margin: 4px 0;
    color: var(--ds-text);
}

.ds-lead-right .appointment-move > summary {
    margin-top: 6px;
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 900px) {
    .ds-lead-body {
        grid-template-columns: 1fr;
    }

    .ds-lead-left {
        border-right: 0;
        border-bottom: 1px solid var(--ds-border);
    }

    .ds-lead-head {
        position: static;
    }

    .ds-lead-right .appointment-fields {
        grid-template-columns: 1fr 1fr;
    }
}


/* =====================================================================
   REDESIGN PHASE 6: restliche Seiten (KONTEXT §20)
   Personen-Fenster (nutzt das CSS des Lead-Fensters), Seitenköpfe,
   Tabellen, Auswertung, Eingehende Anrufe, Mein Telefon, CSV-Import,
   Datenschutz, Suche, Login.
   ===================================================================== */

/* ---------- Personen-Fenster ---------- */

.ds-person-error {
    margin: 12px 20px 0;
}

.ds-panel .ds-person-lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--ds-border);
    font-size: 13px;
}

.ds-person-notes-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 20px 0 10px;
}

.ds-person-notes-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}

.page-header {
    margin-bottom: 20px;
}

.page-header h1 {
    margin-bottom: 2px;
    font-size: 26px;
    font-weight: 700;
}

.page-header p {
    color: var(--ds-muted);
    font-size: 13px;
    line-height: 1.5;
}

.ds-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ds-page-head + .ds-stats,
.ds-page-head + .settings-card,
.ds-page-head + form,
.ds-privacy-head {
    margin-bottom: 20px;
}

.ds-page-head h1 .icon {
    color: var(--ds-primary);
}

/* ---------- Tabellen (Auswertung, CSV-Vorschau) ---------- */

.mapping-scroll {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}

.mapping-table {
    font-size: 13px;
}

.mapping-table th,
.mapping-table td {
    padding: 8px 12px;
}

.mapping-table thead th {
    background: #fafbfd;
    color: var(--ds-ink);
    font-size: 12px;
    white-space: nowrap;
}

.mapping-table tbody tr:hover td {
    background: #fafbfd;
}

.mapping-table tbody tr:last-child td {
    border-bottom: 0;
}

.mapping-table tfoot td {
    border-bottom: 0;
    background: #fafbfd;
}

.mapping-table a {
    color: var(--ds-primary);
    font-weight: 600;
    text-decoration: none;
}

.mapping-table a:hover {
    text-decoration: underline;
}

.import-hint {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
}

/* ---------- Auswertung ---------- */

.report-filters label {
    color: var(--ds-muted);
    font-size: 12px;
}

.report-filters select,
.report-filters input {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-ink);
    font-size: 13px;
}

.report-period {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 10px;
}

.report-goal {
    justify-content: flex-end;
    gap: 4px;
}

.report-goal .icon {
    color: var(--ds-success);
}

/* ---------- Eingehende Anrufe ---------- */

.incoming-open-hint {
    padding: 8px 12px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-danger-soft);
    font-size: 13px;
}

.incoming-row {
    padding: 10px 12px;
    border-radius: var(--ds-radius-sm);
    font-size: 13px;
}

.incoming-row:last-of-type {
    border-bottom: 0;
}

.incoming-row-open {
    box-shadow: inset 3px 0 0 var(--ds-danger);
}

.incoming-row .link-button {
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Mein Telefon ---------- */

.phone-status {
    font-size: 14px;
}

.phone-status-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ds-success-soft);
    color: var(--ds-success-text);
}

.phone-code-box {
    padding: 14px;
    border: 1px dashed var(--ds-primary-ring);
    border-radius: var(--ds-radius);
    background: var(--ds-primary-soft);
}

.phone-code {
    color: var(--ds-primary);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}

/* ---------- CSV-Import (Kampagne / Pool) ---------- */

.import-count {
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
    font-size: 13px;
}

.import-count strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.import-problems {
    border-radius: var(--ds-radius);
}

.import-card h2 {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
}

/* ---------- Datenschutz ---------- */

.privacy-card h2 {
    font-size: 16px;
    font-weight: 700;
}

/* Alte Regel setzte inline-block → Text klebte oben im Knopf */
.privacy-report-button {
    display: inline-flex;
}

.privacy-danger {
    border-color: color-mix(in srgb, var(--ds-danger) 35%, white);
    box-shadow: inset 3px 0 0 var(--ds-danger), var(--ds-shadow-sm);
}

/* ---------- Suche (Fenster in base.html, Treffer search_results.html) ---------- */

.search-modal {
    padding: 16px;
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    animation: modal-in 0.25s var(--ds-ease);
}

.search-input {
    border-radius: var(--ds-radius);
    padding: 12px 14px 12px 42px;
    background: var(--ds-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23858c97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;
}

.search-filters select,
.search-filters input {
    border-radius: var(--ds-radius-sm);
}

.search-result {
    border-radius: var(--ds-radius-sm);
    transition: background var(--ds-fast);
}

.search-result:hover {
    background: var(--ds-primary-soft);
}

.search-result + .search-result {
    margin-top: 2px;
}

.search-result-distance {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-weight: 700;
}

/* ---------- Login ---------- */

.login-page {
    background:
        radial-gradient(circle at 20% 15%, rgba(60, 99, 146, 0.45), transparent 45%),
        var(--ds-sidebar);
}

.login-card {
    width: 400px;
    padding: 32px;
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
}

.login-logo {
    display: block;
    height: 26px;
    margin-bottom: 26px;
}

.login-card h1 {
    margin-bottom: 2px;
    font-size: 22px;
    font-weight: 700;
}

.login-sub {
    margin-bottom: 20px;
    color: var(--ds-muted);
    font-size: 13px;
}

.login-error {
    border-radius: var(--ds-radius-sm);
}

.login-button {
    min-height: 40px;
}


/* =====================================================================
   REDESIGN PHASE 4, TEIL 2: animiertes Drag & Drop (KONTEXT §20)
   JS in campaign_detail.html (startCardDrag …), Pointer-Events statt
   HTML5-Drag&Drop.
   ===================================================================== */

/* Beim Ziehen soll kein Text markiert werden. */
.pipeline .lead-card {
    user-select: none;
}

.pipeline > .column.drop-target {
    background: var(--ds-primary-soft);
    box-shadow: inset 0 0 0 2px var(--ds-primary-ring);
}

/* Zeigt, wo die Karte landet */
.card-drop-placeholder {
    flex-shrink: 0;
    border: 2px dashed var(--ds-primary);
    border-radius: var(--ds-radius);
    background: rgba(60, 99, 146, 0.06);
}

/* "Keine Leads" ausblenden, solange der Platzhalter in der Spalte steht */
.card-drop-placeholder ~ .lead-list-empty {
    display: none;
}

/* Die Karte, die am Mauszeiger hängt */
.lead-card.card-dragging {
    position: fixed;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
    border-color: var(--ds-primary);
    box-shadow: var(--ds-shadow-lg);
    transition: box-shadow 0.2s, transform 0.18s var(--ds-ease);
}

.lead-card.card-dragging.card-lifted {
    transform: rotate(2deg) scale(1.03);
}

/* Landen: kurzer Ring um die Karte */
.lead-card.card-landed {
    animation: card-land 0.35s var(--ds-ease);
}

@keyframes card-land {
    0% { box-shadow: 0 0 0 3px var(--ds-primary-ring); }
    100% { box-shadow: var(--ds-shadow-sm); }
}

/* Abbild am Ziel, bis der Server die echte Karte liefert (Pool-Fälle) */
.lead-card.card-stand-in {
    opacity: 0.6;
    pointer-events: none;
}

body.card-grabbing,
body.card-grabbing * {
    cursor: grabbing !important;
}


/* =====================================================================
   AKTIV / INAKTIV (Kunden + Kampagnen, KONTEXT §27)
   ===================================================================== */

/* Kampagnenkarte mit Schalter: Formular liegt oben rechts über dem Link */
.ds-campaign-wrap {
    position: relative;
    display: flex;
}

.ds-campaign-wrap > .ds-campaign-card {
    flex: 1;
    min-width: 0;
}

.ds-campaign-toggle {
    position: absolute;
    top: 13px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Platzhalter im Kartenkopf, damit der Name nicht unter den Schalter läuft */
.ds-campaign-toggle-space {
    flex-shrink: 0;
    width: 104px;
}

/* Eingeklappte inaktive Kampagnen auf der Kundenseite */
.ds-inactive-campaigns {
    margin-top: 22px;
}

.ds-inactive-campaigns > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--ds-muted);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.ds-inactive-campaigns > summary::-webkit-details-marker {
    display: none;
}

.ds-inactive-campaigns > summary .icon {
    transition: transform var(--ds-fast);
}

.ds-inactive-campaigns[open] > summary .icon {
    transform: rotate(90deg);
}

.ds-campaign-grid + .ds-inactive-campaigns,
.message + .ds-campaign-grid {
    margin-top: 14px;
}


/* =====================================================================
   FAVORITEN (📌 pro Benutzerkonto, KONTEXT §27)
   ===================================================================== */

/* 📌 in der Kundenkarte (span im Link, toggleFavorite in base.html) */
.ds-pin {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-faint);
    cursor: pointer;
    transition: color var(--ds-fast), background var(--ds-fast);
}

.ds-pin:hover {
    background: rgba(18, 21, 25, 0.06);
    color: var(--ds-primary);
}

.ds-pin:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-primary-ring);
}

.ds-pin.on,
.ds-pin-button.on {
    color: var(--ds-primary);
}

.ds-pin.on svg,
.ds-pin-button.on svg {
    fill: currentColor;
}

#favoriteFilter .icon {
    margin-right: -2px;
}

/* =====================================================================
   ANSICHTEN PRO KAMPAGNE (KONTEXT §27): Kampagnenfelder auf der Lead-Karte,
   Abschnitt "Ansichten" im Reiter "Einstellungen" mit Vorschau-Karte
   ===================================================================== */

/* .lead-row/.lead-tags setzen display – hidden muss trotzdem verstecken. */
.lead-card [hidden] {
    display: none;
}

.lead-field {
    color: var(--ds-text);
}

.lead-field-label {
    color: var(--ds-muted);
}

.ds-views {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: 20px;
}

.ds-views-rows .ds-rows-head,
.ds-views-rows .ds-edit-row {
    grid-template-columns: minmax(0, 1fr) 54px 64px 92px;
    justify-items: start;
}

.ds-views-rows input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ds-primary);
    cursor: pointer;
}

.ds-views-preview {
    position: sticky;
    top: 16px;
}

.ds-views-preview-label {
    margin-bottom: 6px;
    color: var(--ds-muted);
    font-size: 12px;
    font-weight: 600;
}

.ds-views-preview .lead-card {
    cursor: default;
}

.ds-views-preview .lead-card:hover {
    transform: none;
}

/* Lead-Fenster: ausgeblendete Felder zugeklappt unter "Weitere Felder" */
.lead-more-fields summary {
    padding: 8px 0 2px;
    color: var(--ds-muted);
    font-size: 13px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .ds-views {
        grid-template-columns: 1fr;
    }

    .ds-views-preview {
        position: static;
        max-width: 280px;
    }
}

/* =====================================================================
   GRUPPENTERMINE (z. B. Karrieretag, KONTEXT §17): Liste im Reiter
   "Kalender", Fenster #groupDialog, Häkchen bei den Terminarten
   ===================================================================== */

.ds-type-extra {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ds-edit-row .ds-type-extra .ds-input-unit .ds-input {
    width: 76px;
}

.ds-type-extra [hidden],
.group-candidates [hidden] {
    display: none;
}

.ds-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ds-text);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.ds-check-inline input {
    accent-color: var(--ds-primary);
}

.group-list {
    margin-bottom: 18px;
}

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

.group-list-head h3 {
    margin: 0;
    font-size: 15px;
}

.group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.group-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-left: 4px solid var(--ds-dot-purple);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ds-fast), box-shadow var(--ds-fast);
}

.group-card:hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow);
}

.group-card strong {
    color: var(--ds-ink);
}

.group-card.past {
    border-left-color: var(--ds-dot-gray);
}

.group-seats {
    color: var(--ds-dot-purple);
    font-weight: 600;
}

.group-seats.full {
    color: var(--ds-danger-text);
}

.group-past {
    margin-top: 10px;
}

.group-past summary,
.group-add summary {
    margin-bottom: 8px;
    color: var(--ds-muted);
    font-size: 13px;
    cursor: pointer;
}

.calendar-item.calendar-group,
.calendar-month-item.calendar-group {
    background: #f1ecfa;
    color: #4f3a8a;
}

.group-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 14px;
}

.group-facts span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.group-note {
    margin: 10px 0 0;
    color: var(--ds-text);
    font-size: 13px;
}

.group-actions {
    display: flex;
    gap: 8px;
    margin: 14px 0 6px;
}

.group-subtitle {
    margin: 18px 0 8px;
    font-size: 14px;
}

.group-participants {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.group-participant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 170px auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}

.group-participant + .group-participant {
    border-top: 1px solid var(--ds-border);
}

.group-participant.cancelled .link-button {
    color: var(--ds-muted);
    text-decoration: line-through;
}

.group-participant .link-button {
    justify-self: start;
    text-align: left;
}

.group-add {
    margin-top: 16px;
}

.group-add form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-add .primary-button {
    align-self: flex-start;
}

.group-candidates {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.appointment-group-join {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ds-border);
}

.appointment-group-join .ds-field {
    flex: 1;
    min-width: 220px;
}

.appointment-group-join .appointment-conflict {
    flex-basis: 100%;
}

@media (max-width: 600px) {
    .group-participant {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* "Gruppentermin öffnen" im Lead-Fenster (Knopf im Link-Stil) */
.lead-appointment button.ds-link {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* =====================================================================
   TABELLENANSICHT DER LEADS (KONTEXT §27): Umschalter "Board | Tabelle"
   im Reiter "Leads", _lead_table.html
   ===================================================================== */

#leads.table-mode .pipeline,
#leads.table-mode [data-board-only] {
    display: none;
}

.lead-table-toolbar,
.lead-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 10px;
}

.lead-table-toolbar select.ds-input {
    width: auto;
    min-width: 160px;
}

.lead-table-toolbar input[type="search"].ds-input {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.lead-table-export {
    margin-left: auto;
}

.lead-table-actions {
    padding: 8px 12px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-primary-soft);
}

.lead-table-actions .ds-input {
    width: auto;
    min-width: 180px;
}

.lead-table-actions button.ds-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.lead-table-message {
    margin-bottom: 10px;
}

.lead-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
}

.lead-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.lead-table th,
.lead-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ds-border);
    text-align: left;
    white-space: nowrap;
}

.lead-table th {
    position: sticky;
    top: 0;
    background: #fafbfd;
}

.lead-table tbody tr {
    cursor: pointer;
}

.lead-table tbody tr:hover {
    background: #fafbfd;
}

.lead-table tbody tr[hidden] {
    display: none;
}

.lead-table tbody tr:last-child td {
    border-bottom: 0;
}

.lead-table-sort {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.lead-table-sort:hover {
    color: var(--ds-ink);
}

.lead-table-check {
    width: 32px;
}

.lead-table-check input {
    accent-color: var(--ds-primary);
    cursor: pointer;
}

.lead-table td strong {
    color: var(--ds-ink);
}

.lead-table-stage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lead-table .lead-tag + .lead-tag {
    margin-left: 4px;
}

/* display: flex oben würde hidden überschreiben */
.lead-table-actions[hidden],
.lead-table-actions [hidden] {
    display: none;
}


/* ===== Terminerinnerungen (KONTEXT §17) ===== */

.automation-form-inline[hidden],
.automation-form-row[hidden],
.automation-time[hidden] {
    display: none;
}

.automation-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.appointment-reminders {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--ds-column);
    border-radius: 8px;
    font-size: 13px;
}

.appointment-reminders-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.appointment-reminder {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.appointment-reminder.reminder-done {
    color: var(--ds-success-text);
}

.appointment-reminder.reminder-failed,
.appointment-reminder-problem {
    color: var(--ds-danger-text);
}


/* ---------- Vertragsphasen (App contracts) ---------- */

.ds-state.warn { color: var(--ds-warning-text); }
.ds-state.danger { color: var(--ds-danger-text); }

.ds-contract {
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
}

.ds-contract-empty {
    color: var(--ds-muted);
}

.ds-contract-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.ds-contract-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.ds-contract-dates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-border);
}

.ds-contract-dates > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ds-contract-source {
    margin: 0 0 12px;
}

.ds-contract-exception > .ds-link {
    display: inline-block;
    margin-bottom: 6px;
}

.ds-contract-closed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.ds-contract-closed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}

.ds-contract-closed small {
    display: block;
}

.ds-period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ds-contract-template-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

@media (max-width: 600px) {
    .ds-contract-dates {
        grid-template-columns: 1fr;
    }

    .ds-contract-actions {
        margin-left: 0;
    }
}

.ds-notice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.ds-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 16px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}

.ds-notice.expired {
    border-color: var(--ds-danger);
    background: var(--ds-danger-soft);
}

.ds-notice small,
.ds-notice-who {
    display: block;
}

.ds-notice-phase {
    text-align: right;
}

.ds-responsible-save {
    margin-top: 12px;
}

/* Vertragsfristen Schritt 3: Pause, Austragen, Urlaub (KONTEXT §27) */
.ds-pause,
.ds-vacation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
}

.ds-pause {
    border-color: var(--ds-warning);
    background: var(--ds-warning-soft);
}

.ds-pause > span,
.ds-vacation > span {
    flex: 1 1 260px;
}

.ds-pause small,
.ds-vacation small {
    display: block;
}

.ds-vacation .ds-field {
    margin: 0;
}

.ds-pause-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 14px;
}

.ds-pause-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0;
}

.ds-pause-choice .ds-check-inline {
    white-space: normal;
}

.ds-pause-note {
    display: block;
    margin: -6px 0 14px;
}

.ds-opt-out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-border);
}

.ds-pause-label {
    color: var(--ds-warning-text);
}

.ds-notice .ds-nobody {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ds-danger-text);
}

/* 2-Werktage-Regel (KONTEXT §27, Schritt 4) */
.ds-rule-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ds-rule-form .ds-field {
    width: min(100%, 360px);
}

.ds-overdue-lead {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.ds-overdue-lead:hover {
    color: var(--ds-primary);
    text-decoration: underline;
}


/* =====================================================================
   Öffentliche Rechtsseiten (ohne Login): /datenschutz/, /datenloeschung/
   Layout customers/public_base.html
   ===================================================================== */

.legal-page {
    background: var(--ds-bg);
}

.legal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 8px;
}

.legal-logo {
    height: 26px;
}

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
}

.legal-nav a,
.legal-content a,
.legal-footer a {
    color: var(--ds-primary);
}

.legal-content {
    max-width: 760px;
    margin: 16px auto;
    padding: 32px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    color: var(--ds-text);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.legal-content h1 {
    font-size: 26px;
    line-height: 1.25;
}

.legal-content h2 {
    margin: 28px 0 8px;
    font-size: 18px;
}

.legal-content p,
.legal-content ul,
.legal-content ol {
    margin-bottom: 12px;
}

.legal-content ul,
.legal-content ol {
    padding-left: 22px;
}

.legal-content li {
    margin-bottom: 6px;
}

.legal-content strong {
    color: var(--ds-ink);
}

.legal-meta {
    color: var(--ds-muted);
    font-size: 13px;
}

/* Noch offene Angabe im Text, fällt bewusst auf */
.legal-placeholder {
    padding: 1px 6px;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-warning-soft);
    color: var(--ds-warning-text);
    font-weight: 600;
}

.legal-footer {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 16px 32px;
    color: var(--ds-muted);
    font-size: 13px;
}

@media (max-width: 600px) {
    .legal-content {
        margin: 12px 16px;
        padding: 20px;
    }
}

/* Links zu Datenschutz/Datenlöschung unter der Anmeldekarte */
.login-legal-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    font-size: 13px;
}

.login-legal-links a {
    color: var(--ds-muted);
}