/* Muss ganz nach vorn: Elemente mit hidden-Attribut sind sonst trotzdem
   sichtbar, sobald irgendeine Regel display setzt (z.B. display:flex). */
[hidden] { display: none !important; }

:root {
  /* Apple-inspiriert: hell, ruhig, viel Weißraum */
  --sidebar-bg: #fbfbfd;
  --sidebar-text: #4b4b50;
  --sidebar-text-active: #0071e3;
  --sidebar-accent: #0071e3;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --border: #e6e6eb;
  --text: #1d1d1f;
  --text-muted: #86868b;

  /* Board-Spalten (Pipeline, Aufgaben). Als Variablen, damit Fläche UND
     Schrift zusammen umschalten – vorher war die Fläche fest hell und die
     Schrift folgte dem Modus: im Dunkeln weiß auf weiß. */
  --board-bg: #ededf0;
  --board-bg-hover: #e3e3ea;
  --board-text: #1d1d1f;
  --board-text-muted: #6e6e73;

  --primary: #0071e3;
  --primary-hover: #0077ed;
  --success: #34c759;
  --danger: #ff3b30;
  --warning: #ff9500;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.05);
  --sidebar-width: 240px;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

* { box-sizing: border-box; }

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

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

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

/* Sidebar (hell, Apple-Stil) */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  border-right: 1px solid var(--border);
}

.sidebar .logo {
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  padding: 8px 12px 20px;
}

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

.sidebar nav a {
  padding: 9px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  font-size: 14px;
  color: var(--sidebar-text);
  transition: background 0.15s, color 0.15s;
}

.sidebar nav a:hover { background: rgba(0,0,0,0.045); color: var(--text); }

.sidebar nav a.active {
  background: rgba(0,113,227,0.1);
  color: var(--sidebar-text-active);
  font-weight: 600;
}

.sidebar nav .icon { font-size: 16px; width: 18px; text-align: center; opacity: 0.9; }

/* Main content */
.main { flex: 1; padding: 28px 32px; max-width: 100%; overflow-x: auto; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header h1 { font-size: 26px; margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.page-header .subtitle { color: var(--text-muted); font-size: 13.5px; margin-top: 5px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 980px;
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
}

.btn:hover { background: var(--primary-hover); }
.btn:active { transform: scale(0.97); }

.btn.secondary {
  background: rgba(0,0,0,0.045);
  border-color: transparent;
  color: var(--text);
}

.btn.secondary:hover { background: rgba(0,0,0,0.075); }

.btn.danger { background: var(--danger); }
.btn.small { padding: 6px 13px; font-size: 12.5px; }

/* Cards / surfaces */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-pad { padding: 22px; }

/* KPI tiles */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi-tile { padding: 18px 20px; }
.kpi-tile .label { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-tile .value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.kpi-tile .hint { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

.charts-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 24px; }
.chart-card h3 { margin: 0 0 12px; font-size: 14px; }

/* Kanban */
.kanban { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }

.kanban-col {
  min-width: 260px;
  max-width: 260px;
  background: var(--board-bg);
  border-radius: var(--radius);
  padding: 12px;
  flex-shrink: 0;
}

.kanban-col.drag-over { background: var(--board-bg-hover); }

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
}

.kanban-col-header .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.kanban-col-header .title { font-weight: 600; font-size: 13px; color: var(--board-text); }
.kanban-col-header .count { color: var(--board-text-muted); font-size: 12px; }

.deal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: grab;
  box-shadow: var(--shadow);
}

.deal-card:active { cursor: grabbing; }
.deal-card.dragging { opacity: 0.4; }
.deal-card .title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.deal-card .value { color: var(--success); font-weight: 700; font-size: 13px; }
.deal-card .contact { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

.add-deal-link {
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px 4px;
  cursor: pointer;
  font-weight: 600;
}
.add-deal-link:hover { color: var(--primary); }

/* Tables / lists */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--border); }
td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
tr:last-child td { border-bottom: none; }
tr.row-link:hover { background: #fafafd; cursor: pointer; }

.search-input, input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=password], textarea, select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px rgba(0,113,227,0.16);
}

.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.badge.overdue { background: var(--danger); }
.badge.today { background: var(--warning); }
.badge.upcoming { background: var(--text-muted); }
.badge.done { background: var(--success); }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 420px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
}
/* Breiter Dialog fürs Schreiben – 420px sind für ein Gesprächsskript zu schmal */
.modal.modal-wide { width: 880px; max-height: 92vh; }
.modal h2 { margin: 0 0 16px; font-size: 17px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Task list */
.task-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: none; }
.task-row.completed .task-title { text-decoration: line-through; color: var(--text-muted); }
.task-row .task-title { font-weight: 500; flex: 1; }
.task-row .meta { color: var(--text-muted); font-size: 12px; }
.section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin: 20px 0 8px; letter-spacing: 0.03em; }
.section-label:first-child { margin-top: 0; }

.checkbox-circle {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.checkbox-circle.checked { background: var(--success); border-color: var(--success); color: #fff; font-size: 11px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }

.timeline-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.timeline-item:last-child { border-bottom: none; }
.timeline-item .type { font-weight: 600; text-transform: capitalize; }
.timeline-item .when { color: var(--text-muted); font-size: 11px; }

.stage-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.stage-row:last-child { border-bottom: none; }
.stage-row input[type=text] { flex: 1; }
.stage-row input[type=color] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; }
.drag-handle { cursor: grab; color: var(--text-muted); }

.link-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 4px; }
.link-btn:hover { color: var(--danger); }

.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-muted { color: var(--text-muted); }
.mt-8 { margin-top: 8px; }

/* Funnel (dashboard) */
.funnel-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 24px; }
.funnel-tile { flex: 1; padding: 18px 20px; }
.funnel-tile.highlight { background: linear-gradient(135deg, #0071e3, #0a84ff); color: #fff; border: none; }
.funnel-tile.highlight .label, .funnel-tile.highlight .hint { color: rgba(255,255,255,0.85); }
.funnel-tile .label { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.funnel-tile .value { font-size: 32px; font-weight: 700; margin-top: 6px; }
.funnel-tile .hint { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.funnel-arrow { display: flex; align-items: center; color: var(--text-muted); font-size: 20px; }

/* Call list / outcome buttons */
.call-item { padding: 16px 18px; margin-bottom: 10px; transition: opacity 0.3s, transform 0.3s; }
.call-item.logged { opacity: 0.35; transform: translateX(12px); }
.call-item-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.call-company { font-weight: 700; font-size: 15px; }
.call-company:hover { color: var(--primary); }
.call-meta { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.call-phone { font-weight: 600; font-size: 14px; color: var(--primary); white-space: nowrap; }
.call-phones { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Kein Anschluss hinterlegt – lieber deutlich sagen als einen Strich zeigen */
.call-nonumber {
  background: rgba(245,158,11,0.16); color: var(--warning);
  border-radius: 6px; padding: 3px 9px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
/* Filter-Kästchen in der Filterzeile */
.filter-check {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.filter-check input { width: 17px; height: 17px; margin: 0; cursor: pointer; }
/* Durchwahl des Entscheiders – hebt sich ab, weil sie den Gatekeeper spart */
.call-phone-dm {
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
}

.outcome-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.outcome-btn {
  border: 1.5px solid var(--c);
  color: var(--c);
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s;
}
.outcome-btn:hover { background: var(--c); color: #fff; }

.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; }
.small-badge { font-size: 10px; padding: 2px 7px; }

/* Lead Vor/Zurück-Navigation */
.lead-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.btn.disabled { opacity: 0.35; pointer-events: none; }

/* Notizen in der Anrufliste */
.note-context {
  font-size: 12px;
  color: var(--text-muted);
  background: #f6f7fb;
  border-left: 3px solid var(--border);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
}
.note-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.note-fields textarea {
  resize: none;
  overflow: hidden;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.4;
}
.lead-notes-input { background: #fffbeb; border-color: #fde68a; }
.lead-notes-input:focus { border-color: #f59e0b; }
.lead-notes-input.saved { border-color: #22c55e; background: #f0fdf4; }
.call-note-input { background: var(--surface); }

/* Period selector (dashboard) */
.period-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.period-buttons { display: flex; gap: 6px; }
.period-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface);
}
.period-btn:hover { background: #f0f0f4; color: var(--text); }
.period-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.period-custom { display: flex; align-items: center; gap: 8px; }
.period-custom input[type=date] { width: auto; }

/* Progress bar (Tagesziel) */
.progress-track { height: 10px; background: #e8e9f0; border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #0071e3, #34c759); border-radius: 6px; transition: width 0.3s; }

/* Knopfreihen in Seitenköpfen. Am Desktop nebeneinander, am Handy als Raster –
   siehe Mobil-Block: dort waren die Knöpfe vorher unterschiedlich breit und
   sprangen ungleichmäßig um. */
.lead-actions, .page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.filter-form { display: flex; gap: 10px; flex-wrap: wrap; }

/* Suchleiste – steht IMMER offen. Sie war zwischenzeitlich mit eingeklappt,
   dadurch war die Suche faktisch verschwunden. */
.searchbar { display: flex; gap: 10px; align-items: center; }
.searchbar input { flex: 1; min-width: 0; }
.searchbar .btn { flex-shrink: 0; }

/* Zusatzfilter darunter: standardmäßig zu, aber offen sobald einer aktiv ist */
.subfilter { margin-top: 10px; }
.subfilter > summary { cursor: pointer; font-size: 13px; color: var(--text-muted);
                       font-weight: 600; list-style: none; }
.subfilter > summary::-webkit-details-marker { display: none; }
.subfilter > summary::after { content: " ▾"; }
.subfilter[open] > summary { margin-bottom: 10px; }
.subfilter[open] > summary::after { content: " ▴"; }

/* Hinweis: Es gab hier einmal ein Muster, das den Inhalt eines ZUGEKLAPPTEN
   <details> am Desktop per CSS wieder einblendete. Das funktioniert in
   aktuellen Browsern nicht mehr (der Inhalt hängt an ::details-content) und
   hinterließ eine leere Box. Deshalb: nichts per CSS „aufklappen" – entweder
   ein echtes <details>, das der Nutzer öffnet (.subfilter), oder gar keins. */

/* Banner (Import-Ergebnis, Dubletten-Hinweis) */
.banner {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-weight: 500;
  border: 1px solid;
}
.banner.success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.banner.error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.banner.warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }

/* ===== Mobile / kleine Bildschirme =====
   Navigation gehört ans UNTERE Ende: oben kommt der Daumen bei einem heutigen
   Handy nicht hin. Nur die vier täglich genutzten Punkte stehen in der Leiste,
   der Rest liegt hinter „Mehr". env(safe-area-inset-*) hält die Leiste vom
   iPhone-Balken und der Dynamic Island frei. */
@media (max-width: 800px) {
  .layout { flex-direction: column; }

  .sidebar { width: 100%; flex-direction: column; padding: 0; gap: 0;
             position: static; background: transparent; border: none; }

  /* Keine Kopfzeile am Handy: Ein Balken nur für Logo und Glocke frisst 50px
     Höhe, ohne etwas zu leisten. Die Glocke sitzt jetzt im „Mehr"-Menü unten,
     jede Seite hat ohnehin ihre eigene Überschrift.
     Zwei Selektoren, weil die Desktop-Regel .sidebar-top weiter unten in der
     Datei steht und bei gleicher Spezifität sonst gewinnt. */
  .sidebar .sidebar-top { display: none; }

  /* Navigationsleiste unten */
  .sidebar nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    flex-direction: row; width: auto; justify-content: space-around; gap: 0;
    background: var(--sidebar-bg);
    border-top: 1px solid rgba(128,128,128,0.18);
    padding: 4px 2px; padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
  .sidebar nav a.nav-more { display: none; }   /* steckt im „Mehr"-Menü */
  .sidebar nav a, .nav-more-btn {
    flex: 1; flex-direction: column; justify-content: center; align-items: center;
    gap: 2px; padding: 7px 2px; font-size: 10.5px; font-weight: 600;
    min-height: 50px; border-radius: 10px; text-align: center;
  }
  .sidebar nav .icon, .nav-more-btn .icon { font-size: 21px; width: auto; margin: 0; }
  .nav-more-btn {
    display: flex; background: none; border: none; cursor: pointer;
    color: var(--sidebar-text); font-family: inherit;
  }

  .sidebar-footer { display: none; }   /* Nutzer/Abmelden liegen im „Mehr"-Menü */

  .main {
    padding: calc(12px + env(safe-area-inset-top)) 12px
             calc(76px + env(safe-area-inset-bottom));
  }

  /* --- Dichte: am Handy war alles in Desktop-Größe, man scrollte ewig --- */
  .page-header { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 14px; }
  .page-header h1 { font-size: 21px; }
  /* Erklärtexte kennt man nach dem zweiten Tag auswendig – am Handy kosten sie
     auf jeder Seite zwei Zeilen, die für Leads besser genutzt sind. */
  .page-header .subtitle { display: none; }
  .card { margin-bottom: 12px; }
  .card-pad { padding: 14px; }
  h3 { font-size: 15px; }
  .section-label { margin: 14px 0 6px; }

  .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .kpi-tile { padding: 11px 13px; }
  .kpi-tile .label { font-size: 10.5px; letter-spacing: 0.02em; }
  .kpi-tile .value { font-size: 21px; margin-top: 2px; }
  .kpi-tile .hint { font-size: 11px; margin-top: 1px; }

  .tab-bar { gap: 6px; margin-bottom: 12px; }
  .tab { padding: 8px 11px; font-size: 12.5px; }

  /* Filter: PLZ + Sortierung nebeneinander statt drei volle Zeilen */
  .filter-form input[type=text], .filter-form input[type=search] { flex: 1 1 42%; max-width: none !important; }
  .filter-form select { flex: 1 1 42%; max-width: none !important; }
  .filter-form .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
  .charts-row { grid-template-columns: 1fr; }
  .funnel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .funnel-arrow { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .period-bar { flex-direction: column; align-items: stretch; }
  /* Zeitraum-Knöpfe umbrechen lassen, statt die Karte seitlich scrollen zu lassen */
  .period-buttons { flex-wrap: wrap; }
  .period-buttons .period-btn { flex: 1 1 30%; text-align: center; }
  .period-custom { flex-wrap: wrap; }
  .period-custom input[type=date] { flex: 1 1 40%; min-width: 0; }
  /* Notizfeld: eine Zeile schneidet den Hinweistext ab */
  .call-note-input { min-height: 52px; }

  /* Knöpfe im Seitenkopf als 2er-Raster: gleiche Breite, gleiche Höhe.
     Vorher waren sie unterschiedlich breit, sprangen ungleichmäßig um und ein
     einzelner Knopf stand allein in der Zeile. Ein ungerader letzter Knopf
     nimmt die volle Breite, damit keine Lücke bleibt. */
  .page-actions, .lead-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
  }
  .page-actions > *, .lead-actions > * { min-width: 0; }
  .page-actions > *:last-child:nth-child(odd),
  .lead-actions > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-actions .btn, .lead-actions .btn {
    width: 100%; justify-content: center; text-align: center;
    padding: 11px 8px; font-size: 13.5px; min-height: 46px; line-height: 1.25;
  }
  /* Der Löschen-Knopf am Skript steckt in einem <form> – das ist die Rasterzelle */
  .lead-actions form { width: 100%; margin: 0; }

  /* Ein einzelner Knopf direkt im Seitenkopf (Pipeline, Aufgaben, Einwände …) */
  .page-header > .btn { width: 100%; justify-content: center; min-height: 46px; }

  /* Leads-Tabelle wird am Handy zur Liste: seitliches Scrollen versteckte
     Ort, Telefon und Status – man sah faktisch nur den Firmennamen. */
  .leads-table { min-width: 0; }
  .leads-table thead { display: none; }
  .leads-table, .leads-table tbody, .leads-table tr, .leads-table td { display: block; }
  .leads-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .leads-table tr:last-child { border-bottom: none; }
  .leads-table td { padding: 1px 0; border: none; }
  /* Über Klassennamen, nicht über die Position: eine neue Spalte hätte
     sonst alles verschoben – genau das ist beim Einbau der Mitarbeiter-
     Spalte passiert. */
  .leads-table td.sp-firma { font-size: 15px; }
  .leads-table td.sp-plz,
  .leads-table td.sp-ort { display: inline; color: var(--text-muted); font-size: 12.5px; }
  .leads-table td.sp-gf { color: var(--text-muted); font-size: 12.5px; }
  .leads-table td.sp-ma { display: inline; color: var(--text-muted); font-size: 12.5px; }
  .leads-table td.sp-ma:not(:has(input))::before { content: " · 👥 "; }
  .leads-table td.sp-tel { color: var(--primary); font-weight: 600; font-size: 13.5px; }
  .leads-table td.sp-mail { display: inline-block; margin-top: 5px; }
  .leads-table td.sp-status { display: inline-block; margin-top: 5px; }
  .leads-table td.sp-anrufe { display: inline; color: var(--text-muted); font-size: 12px; }
  .leads-table td.sp-anrufe::before { content: " · "; }
  .leads-table td.sp-anrufe::after { content: " Anruf(e)"; }
  /* Eingabefelder brauchen am Handy die volle Zeile */
  .leads-table td:has(.schnell-feld) { display: block; margin: 4px 0; }
  /* Leeres gar nicht erst zeigen – am Handy zaehlt jede Zeile */
  .nur-breit { display: none; }
  .leads-table td:has(> .nur-breit:only-child) { display: none; }
  .leads-table td.sp-ma:has(> .nur-breit)::before { content: none; }

  /* Tabellen horizontal scrollbar statt gequetscht */
  .card { overflow-x: auto; }
  table { min-width: 640px; }

  .call-item-head { flex-direction: column; gap: 8px; }
  .call-phone { font-size: 16px; }
  .call-phones { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .outcome-btn { padding: 10px 12px; font-size: 13px; flex: 1 1 30%; }
  /* „Pfeiltasten ← →" bringt am Handy nichts – die Positionsanzeige der
     gefilterten Liste („3 von 39 · PLZ 976") aber sehr wohl. */
  .lead-nav > .text-muted { display: none; }
}

/* Reports */
.report-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.report-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.report-table { margin-bottom: 8px; }
.report-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; }
.report-preview h3 { margin: 20px 0 8px; font-size: 14px; }
@media (max-width: 800px) {
  .report-actions { flex-direction: column; align-items: stretch; }
  .report-buttons .btn { flex: 1 1 45%; text-align: center; }
}

/* Login / Setup */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
             box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 32px; width: 380px; max-width: 100%; }
.login-logo { font-weight: 700; font-size: 20px; color: var(--primary); margin-bottom: 20px; }
.login-box h1 { font-size: 20px; margin: 0 0 6px; }
.login-box p { margin-top: 0; font-size: 13px; }
.login-box form { margin-top: 18px; }

/* User-Chip in Sidebar */
.sidebar-footer { margin-top: auto; padding-top: 16px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
             background: rgba(0,0,0,0.04); font-size: 13px; }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--sidebar-accent);
                     color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.user-chip .uname { color: var(--text); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .logout { color: var(--text-muted); font-size: 16px; }
.user-chip .logout:hover { color: var(--text); }
.user-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.user-row:last-child { border-bottom: none; }
@media (max-width: 800px) {
  .sidebar-footer { margin: 0; padding: 0; }
  .user-chip { background: none; padding: 6px 8px; }
  .user-chip .uname, .user-chip .avatar { display: none; }
}

/* Aufgaben-Board */
.todo-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.todo-col { background: var(--board-bg); border-radius: var(--radius); padding: 12px; }
/* Spaltenkopf sitzt auf hellem Grund -> Schrift fest dunkel, sonst im
   Dunkelmodus weiß auf weiß (gleiche Ursache wie beim Pipeline-Board) */
.todo-col-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 4px; font-weight: 600; font-size: 13px; color: var(--board-text); }
.todo-col-header .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.todo-col-header .count { color: var(--board-text-muted); font-weight: 500; }
.todo-cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.todo-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; box-shadow: var(--shadow); }
.todo-title { font-weight: 600; font-size: 14px; }
.todo-desc { color: var(--text-muted); font-size: 12px; margin-top: 4px; white-space: pre-wrap; }
.todo-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 11px; }
.assignee-badge { background: #eef2ff; color: #4338ca; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.todo-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
.mini-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.mini-btn:hover { background: #f0f0f4; }
.mini-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.mini-btn.primary:hover { background: var(--primary-hover); }
.mini-btn.danger { color: var(--danger); }
.mini-btn.danger:hover { background: #fef2f2; }
.todo-empty { color: var(--board-text-muted); text-align: center; padding: 12px; font-size: 13px; }
@media (max-width: 800px) {
  .todo-board { grid-template-columns: 1fr; }
}

/* Anrufliste-Tabs */
.tab-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  font-weight: 600; font-size: 14px; color: var(--text);
}
.tab:hover { background: #f0f0f4; }
.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tab-count { background: rgba(0,0,0,0.08); padding: 1px 8px; border-radius: 20px; font-size: 12px; }
.tab.active .tab-count { background: rgba(255,255,255,0.25); }
.tab.has-due:not(.active) { border-color: var(--warning); color: #b45309; }
.tab.has-due:not(.active) .tab-count { background: var(--warning); color: #fff; }

/* Erinnerungs-Popups (Wiedervorlage fällig) */
#reminder-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.reminder-toast {
  background: var(--surface); border: 1px solid var(--warning);
  border-left: 4px solid var(--warning); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15); padding: 14px 16px;
  animation: toast-in 0.3s ease;
}
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rt-head { font-weight: 700; font-size: 13px; color: #b45309; }
.rt-company { font-weight: 600; margin: 4px 0 10px; }
.rt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 800px) {
  #reminder-toasts { left: 12px; right: 12px; bottom: 70px; max-width: none; }
  .tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13px; }
}

/* Auswahlmenü nach Gatekeeper / Entscheider */
.contact-options { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.contact-opt {
  border: 1.5px solid var(--c); color: var(--c); background: transparent;
  padding: 12px 14px; border-radius: 8px; font-weight: 600; font-size: 14px;
  cursor: pointer; text-align: left; transition: all 0.12s;
}
.contact-opt:hover { background: var(--c); color: #fff; }

/* Glocke + Benachrichtigungs-Panel */
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 24px; }
.sidebar-top .logo { padding: 0 !important; }
.bell-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(0,0,0,0.03);
  color: var(--text); font-size: 17px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bell-btn:hover { background: rgba(0,0,0,0.07); }
.bell-badge {
  position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff;
  border-radius: 20px; min-width: 18px; height: 18px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.notif-panel {
  position: fixed; top: 60px; left: 14px; width: 300px; max-width: calc(100vw - 28px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  z-index: 250; max-height: 72vh; overflow: auto;
}
.notif-head { padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--border); }
.notif-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f7f7fb; }
.ni-title { font-size: 11px; color: #b45309; font-weight: 700; }
.ni-company { font-weight: 600; margin-top: 2px; }
.ni-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); }

@media (max-width: 800px) {
  /* Panel öffnet vom „Mehr"-Menü unten, also auch von unten einblenden */
  .notif-panel {
    top: auto; bottom: calc(70px + env(safe-area-inset-bottom));
    left: 10px; right: 10px; width: auto; max-width: none; max-height: 60vh;
  }
}

/* Glocke im „Mehr"-Menü (Handy) */
.more-bell {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 12px; border: none; background: none; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--text);
  font-family: inherit; text-align: left; border-radius: 12px;
}
.more-bell .icon { font-size: 21px; width: 26px; text-align: center; }
.more-bell:active { background: rgba(128,128,128,0.16); }
.more-bell-count {
  margin-left: auto; background: var(--danger); color: #fff;
  border-radius: 999px; padding: 2px 9px; font-size: 12.5px; font-weight: 700;
}
/* Einschalt-Zeile hervorheben – die soll man finden */
.more-push-on { background: rgba(59,130,246,0.12); color: var(--primary); }
.more-bell-hint { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-muted); }
/* roter Punkt am „Mehr"-Knopf, sonst übersieht man die Glocke im Menü */
.more-dot {
  position: absolute; top: -1px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger);
}
.nav-more-btn .icon { position: relative; }

/* --- „Mehr"-Menü (nur Handy) --- */
.more-sheet { position: fixed; inset: 0; z-index: 300; }
.more-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.more-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface); color: var(--text);
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,0.3);
  padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;
  animation: sheetUp .18s ease-out;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.more-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border);
             margin: 6px auto 12px; }
.more-panel a {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 12px; border-radius: 12px;
  font-size: 16px; font-weight: 600; color: var(--text);
}
.more-panel a .icon { font-size: 21px; width: 26px; text-align: center; }
.more-panel a:active { background: rgba(128,128,128,0.16); }
.more-user {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 14px 12px;
  border-top: 1px solid var(--border); font-size: 14px;
}
.more-user .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sidebar-accent);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.more-user .uname { font-weight: 600; flex: 1; }
.more-user .more-logout { color: var(--danger); font-weight: 600; }

/* Am Desktop gibt es weder Knopf noch Menü */
@media (min-width: 801px) {
  .more-sheet, .nav-more-btn { display: none !important; }
}

/* Import-Vorschau: Erklärung + „wird ergänzt" */
.import-erklaerung {
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
  background: rgba(59,130,246,0.08); border-left: 3px solid var(--primary);
  border-radius: 6px; padding: 10px 12px; margin: 10px 0;
}
.imp-fill-list { color: var(--success); font-weight: 600; font-size: 12.5px; }
.imp-cb[disabled] { opacity: 0.35; }

/* Import-Spalten-Hinweis */
.import-cols { font-size: 12px; color: var(--text-muted); background: #f6f7fb; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.5; }

/* Kalender */
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 12px 16px; }
.cal-nav { display: flex; align-items: center; gap: 12px; }
.cal-month { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; min-width: 150px; text-align: center; }
.cal-grid { overflow: hidden; }
.cal-weekdays, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-wd { padding: 10px 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; border-bottom: 1px solid var(--border); }
.cal-day { min-height: 96px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px; cursor: pointer; transition: background 0.12s; overflow: hidden; }
.cal-day:hover { background: #fafafd; }
.cal-week .cal-day:nth-child(7n) { border-right: none; }
.cal-daynum { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.cal-day.other-month { background: #fbfbfd; }
.cal-day.other-month .cal-daynum { color: #c7c7cc; }
.cal-day.is-today .cal-daynum { background: var(--primary); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-events { display: flex; flex-direction: column; gap: 3px; }
.cal-ev { font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 15%, white); color: #1d1d1f; border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-time { font-weight: 600; color: var(--c); }
@media (max-width: 800px) {
  .cal-day { min-height: 64px; padding: 4px; }
  .cal-daynum { font-size: 12px; }
  .cal-ev { font-size: 9px; padding: 1px 4px; }
  .cal-ev-time { display: none; }
  .cal-month { min-width: 110px; font-size: 15px; }
}

/* Import-Vorschau */
.import-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.import-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.import-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.imp-row.imp-dublette { background: #fff7f6; }
.imp-row.imp-ähnlich { background: #fffaf0; }
.imp-cb { width: 18px; height: 18px; cursor: pointer; }
@media (max-width: 800px) { .import-bar { flex-direction: column; align-items: stretch; } }

/* Termin-Buchung: Tages-Belegung */
.day-events { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; max-height: 130px; overflow-y: auto; background: #fbfbfd; }
.de-item { padding: 3px 0; border-bottom: 1px solid var(--border); }
.de-item:last-child { border-bottom: none; }
.day-free { color: var(--success); font-weight: 600; }

/* Notiz-Verlauf am Lead */
.note-item { border-left: 3px solid var(--primary); background: #fbfbfd; border-radius: 0 8px 8px 0;
             padding: 8px 12px; margin-bottom: 8px; }
.note-meta { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.note-text { margin-top: 3px; font-size: 13.5px; white-space: pre-wrap; }
#lead-info { width: 100%; }

/* Angepinnte Notiz */
.note-item.pinned { border-left-color: var(--warning); background: #fffbf2;
                    box-shadow: 0 1px 3px rgba(255,149,0,0.15); }
.note-item.pinned .note-meta { color: #b45309; }

/* Kalender: mehrere Konten (Leon / Noel) */
.cal-legend { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cal-leg-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text); }
.cal-leg-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-ev-who { opacity: 0.75; font-size: 9px; }

/* Einwand-Bibliothek */
.obj-card { margin-bottom: 10px; }
.obj-card.obj-open { border-left: 4px solid var(--warning); background: #fffbf2; }
.obj-q { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.obj-a { margin-top: 8px; font-size: 14px; white-space: pre-wrap; color: #1d1d1f;
         background: #f0fdf4; border-left: 3px solid var(--success);
         padding: 8px 12px; border-radius: 0 8px 8px 0; }
.obj-missing { margin-top: 8px; font-size: 13px; color: #b45309; font-weight: 600; }
.obj-meta { margin-top: 8px; display: flex; gap: 8px; align-items: center; font-size: 11px; flex-wrap: wrap; }

/* --- Aufgaben: Lead-Verknüpfung, Fälligkeit --- */
.todo-lead { display: inline-block; margin: 2px 0 6px; font-size: 12px; color: var(--primary);
             text-decoration: none; font-weight: 600; }
.todo-lead:hover { text-decoration: underline; }
.todo-due { font-size: 11px; background: #eef2ff; color: #4338ca; padding: 2px 8px;
            border-radius: 999px; font-weight: 600; }
.todo-due.overdue, .task-due.overdue { background: #fef2f2; color: #dc2626; }

/* Aufgaben-Liste auf der Lead-Seite */
.task-line { padding: 8px 0; border-bottom: 1px solid var(--border); }
.task-line:last-child { border-bottom: none; }
.task-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.task-check input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; }
.task-title { font-weight: 600; font-size: 14px; }
.task-due { display: inline-block; margin-left: 6px; font-size: 11px; background: #eef2ff;
            color: #4338ca; padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.task-assignee { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
.task-desc { display: block; margin-top: 3px; font-size: 13px; color: #444; white-space: pre-wrap; }
.task-line.is-done .task-title { text-decoration: line-through; color: var(--text-muted); }
.task-line.is-done { opacity: 0.65; }

/* --- Einstellungen: Tab-Navigation --- */
.settings-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
                 border-bottom: 1px solid var(--border); padding-bottom: 0; }
.settings-tab { background: none; border: none; padding: 10px 16px; font-size: 14px;
                font-weight: 600; color: var(--text-muted); cursor: pointer;
                border-bottom: 2.5px solid transparent; margin-bottom: -1px; border-radius: 0;
                transition: color .15s, border-color .15s; }
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: fadeInPanel .2s ease; }
@keyframes fadeInPanel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- Dashboard: Erreichbarkeits-Auswertung --- */
.insight-card { margin-bottom: 24px; }
.insight-trends { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.trend-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.trend-box .label { color: var(--text-muted); font-size: 12px; font-weight: 600;
                    text-transform: uppercase; letter-spacing: .03em; }
.trend-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.trend-main .value { font-size: 26px; font-weight: 700; }
.trend-main .delta { font-size: 13px; font-weight: 600; }
.trend-main .delta.up { color: var(--success); }
.trend-main .delta.down { color: var(--danger); }
.trend-main .delta.flat { color: var(--text-muted); }
.trend-box .hint { color: var(--text-muted); font-size: 12px; line-height: 1.5; }

.insight-tip { background: rgba(59,130,246,0.08); border-left: 3px solid var(--primary);
               border-radius: 6px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6;
               margin-bottom: 18px; }

.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.insight-h { margin: 0 0 10px; font-size: 13px; color: var(--text-muted);
             text-transform: uppercase; letter-spacing: .03em; }
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12.5px; }
.bar-row.thin { opacity: 0.4; }   /* zu wenig Anwahlen -> Quote ist Zufall */
.bar-label { width: 78px; flex-shrink: 0; color: var(--text-muted); white-space: nowrap; }
.bar-track { flex: 1; height: 9px; background: var(--border); border-radius: 5px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 5px; }
.bar-value { width: 34px; text-align: right; font-weight: 600; flex-shrink: 0; }
.bar-n { width: 34px; text-align: right; color: var(--text-muted); font-size: 11px; flex-shrink: 0; }

@media (max-width: 900px) {
  .insight-trends, .insight-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   DUNKELMODUS  – aktiv über <html data-theme="dark"> (per Einstellungen)
   ====================================================================== */
:root[data-theme="dark"] {
  --sidebar-bg: #161618;
  --sidebar-text: #a1a1a6;
  --sidebar-text-active: #2997ff;
  --sidebar-accent: #2997ff;

  --bg: #0a0a0c;
  --surface: #1c1c1e;
  --border: #303034;
  --text: #f5f5f7;
  --text-muted: #98989d;

  --board-bg: rgba(255,255,255,0.05);
  --board-bg-hover: rgba(255,255,255,0.10);
  --board-text: #f5f5f7;
  --board-text-muted: #98989d;

  --primary: #2997ff;
  --primary-hover: #4aa9ff;
  --success: #30d158;
  --danger: #ff453a;
  --warning: #ff9f0a;

  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.55);
}

/* helle Sekundär-Buttons / Overlays im Dunkeln umkehren */
:root[data-theme="dark"] .btn.secondary { background: rgba(255,255,255,0.09); }
:root[data-theme="dark"] .btn.secondary:hover { background: rgba(255,255,255,0.16); }

/* Hover-/Tint-Flächen, die hell hartkodiert waren */
:root[data-theme="dark"] tr.row-link:hover,
:root[data-theme="dark"] .cal-day:hover,
:root[data-theme="dark"] .notif-item:hover,
:root[data-theme="dark"] .mini-btn:hover,
:root[data-theme="dark"] .tab:hover { background: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .cal-day.other-month { background: rgba(255,255,255,0.02); }
/* Art-Plaketten: dunkles Braun/Rot verschwindet auf dunklem Grund */
:root[data-theme="dark"] .mail-ok { color: #5eead4; }
:root[data-theme="dark"] .mail-fehlt { color: #fbbf24; }
:root[data-theme="dark"] .notiert-art.ist-problem { color: #fbbf24; }
:root[data-theme="dark"] .notiert-art.ist-einwand { color: #fca5a5; }
:root[data-theme="dark"] .period-tabs, 
:root[data-theme="dark"] .kpi-tile,
:root[data-theme="dark"] .stat-box { background: var(--surface); }

/* Eingabe-/Notizfelder mit Sonderfarbe */
:root[data-theme="dark"] .lead-notes-input { background: #2a2410; border-color: #5c4a12; color: var(--text); }
:root[data-theme="dark"] .lead-notes-input.saved { background: #12281a; border-color: #2b6b3d; }
:root[data-theme="dark"] .note-fields textarea { background: #232326; }

/* Banner-Farben abdunkeln */
:root[data-theme="dark"] .banner.success { background: #12281a; border-color: #24512f; color: #6ee7a0; }
:root[data-theme="dark"] .banner.error   { background: #2a1414; border-color: #5c2320; color: #ff8f86; }
:root[data-theme="dark"] .banner.warning { background: #2a2410; border-color: #5c4a12; color: #f2c14e; }

/* Buttons mit hellem Danger-Hover */
:root[data-theme="dark"] .mini-btn.danger:hover { background: #3a1a18; }

/* Import-Zeilen-Markierungen */
:root[data-theme="dark"] .imp-row.imp-dublette { background: #2a1614; }
:root[data-theme="dark"] .imp-row.imp-ähnlich { background: #2a2210; }

/* Aufgaben-/Lead-Badges (waren hell hinterlegt) */
:root[data-theme="dark"] .todo-due { background: #1e2a4a; color: #9db8ff; }
:root[data-theme="dark"] .task-due { background: #1e2a4a; color: #9db8ff; }
:root[data-theme="dark"] .todo-due.overdue,
:root[data-theme="dark"] .task-due.overdue { background: #3a1a18; color: #ff8f86; }

/* Objection-Bibliothek Karten */
:root[data-theme="dark"] .obj-a { background: #12281a; color: #d8f5e2; }
:root[data-theme="dark"] .obj-q { background: rgba(255,255,255,0.03); }

/* Farb-Picker-Umrandung */
:root[data-theme="dark"] input[type=color] { background: var(--surface); }

/* Erreichbarkeits-Auswertung im Dunkeln */
:root[data-theme="dark"] .insight-tip { background: rgba(41,151,255,0.10); }
:root[data-theme="dark"] .call-phone-dm { background: rgba(48,209,88,0.16); }
:root[data-theme="dark"] .followup-note,
:root[data-theme="dark"] .followup-banner { background: rgba(255,159,10,0.14); }

/* Flächen mit fest verdrahtetem hellem Hintergrund. Ohne diese Regeln steht
   dort im Dunkelmodus weiße Schrift auf fast weißem Grund – bei Lead-Notizen,
   Einwand-Karten und der Tagesbelegung war schlicht nichts zu lesen. */
:root[data-theme="dark"] .note-item { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .note-item.pinned { background: rgba(255,159,10,0.12); }
:root[data-theme="dark"] .obj-card.obj-open { background: rgba(255,159,10,0.12); }
:root[data-theme="dark"] .day-events { background: rgba(255,255,255,0.04); }
:root[data-theme="dark"] .note-context { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .import-cols { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .period-btn:hover { background: rgba(255,255,255,0.10); }
:root[data-theme="dark"] .progress-track { background: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .assignee-badge { background: rgba(99,102,241,0.22); color: #b9bcff; }

/* Einstellungs-Tabs Trennlinie sichtbar halten */
:root[data-theme="dark"] .settings-tab.active { color: var(--primary); }

/* Umschalter in den Einstellungen */
.theme-choice { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.theme-btn {
  flex: 1 1 120px; min-width: 110px; padding: 14px 12px; border-radius: 12px;
  border: 2px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; font-size: 14px; font-weight: 600; text-align: center;
  transition: border-color .15s, background .15s;
}
.theme-btn:hover { border-color: var(--text-muted); }
.theme-btn.active { border-color: var(--primary); background: rgba(41,151,255,0.10); }
.theme-btn .tb-emoji { font-size: 22px; display: block; margin-bottom: 6px; }

/* --- „Wichtige Infos": mitwachsend + frei größer ziehbar --- */
textarea.autogrow {
  resize: vertical;              /* unten rechts frei größer ziehen */
  min-height: 76px;
  overflow-y: auto;
  line-height: 1.5;
  transition: height .12s ease;
}
textarea.autogrow.info-big {
  height: 60vh;                  /* Groß-Modus: viel Platz für lange Infos */
  min-height: 320px;
}

/* --- Webseite-Link in der Anrufliste --- */
.call-web {
  display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--primary);
  font-weight: 500; word-break: break-all;
}
.call-web:hover { text-decoration: underline; }

/* --- Dringend-Markierung in der Anrufliste --- */
.urgent-toggle {
  background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1;
  margin-left: 8px; padding: 2px 4px; border-radius: 6px; vertical-align: middle;
  filter: grayscale(1); opacity: 0.35; transition: opacity .12s, filter .12s, transform .08s;
}
.urgent-toggle:hover { opacity: 0.8; transform: scale(1.15); }
.urgent-toggle.on { filter: none; opacity: 1; }

.call-item.is-urgent { border-left: 4px solid var(--danger); }

.tab.tab-urgent.has-urgent .tab-count { background: var(--danger); color: #fff; }
.tab.tab-urgent.active { border-color: var(--danger); color: var(--danger); }

/* Mitte der Lead-Navigation: zurück zur Liste + Position darin */
.nav-mitte { display: flex; flex-direction: column; align-items: center; gap: 2px;
             font-size: 12.5px; text-align: center; min-width: 0; }
.nav-zurueck { color: var(--primary); font-weight: 600; white-space: nowrap; }
@media (max-width: 800px) {
  .nav-mitte { font-size: 11.5px; }
}

/* --- Recherche-Angaben am Lead --- */
.recherche { margin-bottom: 16px; }
.recherche-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
summary.recherche-kopf { cursor: pointer; list-style: none; }
summary.recherche-kopf::-webkit-details-marker { display: none; }
/* „KI-Info" ist der Aufklapp-Hinweis – muss als anklickbar erkennbar sein */
.ki-auf {
  margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--primary);
  white-space: nowrap;
}
.ki-auf::after { content: " ▾"; }
details.recherche[open] .ki-auf::after { content: " ▴"; }
details.recherche[open] > summary { margin-bottom: 4px; }
.prio {
  font-weight: 700; font-size: 12.5px; padding: 3px 10px; border-radius: 999px;
  background: rgba(128,128,128,0.18); color: var(--text); white-space: nowrap;
}
/* A+ und A stechen hervor, B/C/D bleiben ruhig */
.prio-aplus { background: var(--danger); color: #fff; }
.prio-a     { background: var(--warning); color: #fff; }
.prio-b     { background: rgba(59,130,246,0.18); color: var(--primary); }
.branche { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.rech-block { margin-top: 12px; font-size: 13.5px; line-height: 1.6; }
.rech-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
              letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 3px; }
.rech-ansprache {
  background: rgba(59,130,246,0.09); border-left: 3px solid var(--primary);
  border-radius: 6px; padding: 10px 12px; margin-top: 12px;
}

/* „Mehr Infos" – zugeklappt, damit die Seite im Alltag ruhig bleibt */
.mehr-infos { margin-top: 16px; }
.mehr-infos > summary { cursor: pointer; font-weight: 600; font-size: 13.5px;
                        list-style: none; color: var(--text); }
.mehr-infos > summary::-webkit-details-marker { display: none; }
.mehr-infos > summary::after { content: " ▾"; color: var(--text-muted); }
.mehr-infos[open] > summary { margin-bottom: 12px; }
.mehr-infos[open] > summary::after { content: " ▴"; }
.mi-liste { display: flex; flex-direction: column; gap: 10px; }
.mi-zeile { display: flex; gap: 12px; font-size: 13px; line-height: 1.55; }
.mi-label { flex: 0 0 150px; color: var(--text-muted); }
.mi-wert { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mi-wert a { color: var(--primary); }
@media (max-width: 800px) {
  .mi-zeile { flex-direction: column; gap: 2px; }
  .mi-label { flex: none; font-size: 11.5px; text-transform: uppercase;
              letter-spacing: 0.03em; font-weight: 600; }
}

/* --- Kunden & Projekte --- */
.jahr-hinweis { margin-bottom: 20px; font-size: 13.5px; line-height: 1.6; }
.kunde-karte { margin-bottom: 14px; }
.kunde-karte.ist-alt { opacity: 0.72; }
.kunde-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.kunde-name { font-weight: 700; font-size: 16px; color: var(--text); }
.kunde-name:hover { color: var(--primary); }
.kunde-summe { text-align: right; flex-shrink: 0; }
.ks-monat { font-weight: 700; font-size: 16px; color: var(--success); white-space: nowrap; }
.ks-einmal { font-size: 13px; color: var(--text-muted); white-space: nowrap; margin-top: 2px; }
.ks-angebot { font-size: 13px; color: var(--warning); white-space: nowrap; margin-top: 2px; }

.projekt-liste { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.projekt {
  position: relative;
  border-left: 3px solid var(--border); background: rgba(128,128,128,0.07);
  border-radius: 0 8px 8px 0; padding: 9px 12px;
}
.projekt-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; }
.projekt-geld { margin-left: auto; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.projekt-text { font-size: 13px; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }
.projekt-daten { font-size: 12px; margin-top: 5px; }
.projekt-daten .ueberfaellig { color: var(--danger); font-weight: 600; }

@media (max-width: 800px) {
  .kunde-kopf { flex-direction: column; gap: 10px; }
  .kunde-summe { text-align: left; }
  /* Betrag in eigene Zeile, Stift fest nach oben rechts – sonst rutscht er
     unter die Beträge und steht allein herum */
  .projekt { padding-right: 44px; }
  .projekt-geld { margin-left: 0; width: 100%; }
  .projekt-kopf .mini-btn { position: absolute; top: 8px; right: 8px; }
}

/* --- Wiedervorlagen nach Tag gruppiert --- */
.cb-group { margin-bottom: 22px; }
.cb-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 8px 12px;
  border-radius: 10px; background: rgba(128,128,128,0.12);
  border-left: 4px solid var(--text-muted);
}
.cb-label { font-weight: 700; font-size: 14px; }
.cb-count { margin-left: auto; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
/* Farbe nach Dringlichkeit – überfällig sticht heraus, Zukunft bleibt ruhig */
.cb-spaet   .cb-head { background: rgba(239,68,68,0.14);  border-left-color: var(--danger); }
.cb-spaet   .cb-label { color: var(--danger); }
.cb-heute   .cb-head { background: rgba(245,158,11,0.16); border-left-color: var(--warning); }
.cb-heute   .cb-label { color: var(--warning); }
.cb-bald    .cb-head { background: rgba(59,130,246,0.14); border-left-color: var(--primary); }
.cb-bald    .cb-label { color: var(--primary); }
.cb-spaeter .cb-head { opacity: 0.85; }

/* --- Lead-Auswahl mit Tipphilfe (Aufgaben) --- */
.leadpick { position: relative; }
.leadpick .lp-input { width: 100%; padding-right: 34px; }
.lp-clear {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 14px;
  color: var(--text-muted); padding: 4px; line-height: 1;
}
.lp-clear:hover { color: var(--text); }
.lp-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
  max-height: 260px; overflow-y: auto;
}
.lp-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 12px; cursor: pointer; font-family: inherit; font-size: 13.5px;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.lp-item:last-child { border-bottom: none; }
.lp-item:hover, .lp-item:focus { background: rgba(128,128,128,0.12); }
.lp-sub { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.lp-empty { padding: 12px; color: var(--text-muted); font-size: 13px; }

.zugang-tabelle { font-size: 13px; border-collapse: collapse; }
.zugang-tabelle td { padding: 4px 14px 4px 0; vertical-align: top; }
.zugang-tabelle td:first-child { color: var(--text-muted); white-space: nowrap; }
.zugang-tabelle code { font-size: 13px; user-select: all; }

.tages-hinweis {
  font-size: 12.5px; color: var(--text-muted); margin: -6px 0 12px;
  padding: 7px 11px; border-radius: 8px; background: rgba(128,128,128,0.10);
}

/* --- Abgearbeitete Anrufkarte ------------------------------------------
   Kurz bestaetigen, dann wegfahren. Frueher wurde nach jedem Ergebnis die
   ganze Seite neu geladen – man landete jedes Mal wieder oben. */
.call-item.erledigt {
  position: relative; pointer-events: none;
  border-color: var(--success);
}
.call-item.erledigt > *:not(.erledigt-hinweis) { opacity: .35; }
.erledigt-hinweis {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--success);
  background: rgba(52,199,89,0.10); border-radius: inherit;
}
.call-item.faellt-weg {
  height: 0 !important; min-height: 0; margin: 0; padding: 0;
  opacity: 0; overflow: hidden;
  transition: height .25s ease, opacity .2s ease, margin .25s ease, padding .25s ease;
}
.letzter-versuch { white-space: nowrap; }

/* --- Terminart --- */
.termin-arten { display: flex; gap: 7px; flex-wrap: wrap; }
.termin-arten .chip { cursor: pointer; font-family: inherit; }

/* --- Wochenvergleich --- */
.wochen-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.wochen-tabelle th, .wochen-tabelle td {
  padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left;
  vertical-align: top;
}
.wochen-tabelle th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); font-weight: 700; white-space: nowrap;
}
.wochen-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wochen-tabelle tr:last-child td { border-bottom: none; }
.wochen-tabelle tr.ist-laufend { color: var(--text-muted); }
.wochen-tabelle tr.ist-laufend strong { font-weight: 600; }
.wochen-balken {
  height: 4px; border-radius: 2px; margin-top: 5px;
  background: rgba(128,128,128,0.16); overflow: hidden;
}
.wochen-balken span { display: block; height: 100%; background: var(--primary); border-radius: 2px; }
.wochen-tabelle .delta { font-size: 11px; font-weight: 700; margin-left: 4px; }

/* Aufklappbare Dashboard-Bloecke */
.block-auf > .block-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  cursor: pointer; list-style: none; flex-wrap: wrap;
}
.block-auf > .block-kopf::-webkit-details-marker { display: none; }
.block-auf > .block-kopf::after { content: "▾"; color: var(--text-muted); font-size: 13px; }
.block-auf[open] > .block-kopf::after { content: "▴"; }

/* Schnelleingabe in der Lead-Liste (Datenpflege) */
.schnell-feld {
  width: 100%; min-width: 120px; padding: 5px 8px; font-size: 13px;
  border: 1px dashed var(--border); border-radius: 6px;
  background: transparent; color: var(--text); font-family: inherit;
}
.schnell-feld:focus { border-style: solid; border-color: var(--primary); outline: none; }
.schnell-feld.schmal { min-width: 70px; max-width: 90px; }
.schnell-feld.gespeichert { border-color: var(--success); border-style: solid; }
.schnell-feld.fehlgeschlagen { border-color: var(--danger); border-style: solid; }

/* --- Pipeline-Verwaltung --- */
.stage-move { display: flex; flex-direction: column; gap: 2px; }
.stage-move .mini-btn { padding: 1px 7px; line-height: 1.2; font-size: 11px; }
.stage-move .mini-btn[disabled] { opacity: .3; cursor: default; }
.stage-info { font-size: 11.5px; color: var(--text-muted); margin-left: auto;
              white-space: nowrap; }
.stage-row.ist-versteckt { opacity: .55; }
.stage-row.ist-versteckt input[type="text"] { text-decoration: line-through; }
.stage-eye { font-size: 13px; }
.pipe-versteckt { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }

/* --- E-Mail-Erlaubnis --- */
/* Erteilt = gefüllt statt nur umrandet: man muss auf einen Blick sehen,
   ob man schreiben darf, ohne den Text zu lesen. */
.outcome-btn.mailok-btn.ist-erlaubt {
  background: #14b8a6; border-color: #14b8a6; color: #fff;
}
.mail-ok, .mail-fehlt {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.mail-ok { background: rgba(20,184,166,0.16); color: #0f766e; }
.mail-fehlt { background: rgba(245,158,11,0.18); color: #b45309; }
.mailok-stand { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
/* Erlaubnis im Lead-Kopf: sieht aus wie eine Plakette, ist aber ein Schalter */
.mailok-schalter {
  border: 1px solid var(--border); background: none; cursor: pointer;
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--text-muted); font-family: inherit;
}
.mailok-schalter:hover { border-color: var(--primary); color: var(--primary); }
.mailok-schalter.ist-erlaubt {
  background: rgba(20,184,166,0.16); border-color: transparent; color: #0f766e;
}
:root[data-theme="dark"] .mailok-schalter.ist-erlaubt { color: #5eead4; }

/* --- Erfassung nach „Entscheider erreicht" --- */
.erf-modal { max-height: 92vh; display: flex; flex-direction: column; }
.erf-schritt { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.erf-seite { display: flex; flex-direction: column; min-height: 0; }
.erf-frage { margin: 0 0 4px; font-size: 16px; }
.erf-wahl {
  display: flex; flex-wrap: wrap; gap: 8px;
  overflow-y: auto; max-height: 44vh; padding: 2px; margin-bottom: 14px;
}
.erf-chip {
  padding: 10px 15px; border-radius: 10px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--text);
  font-family: inherit; text-align: left;
}
.erf-chip:hover { border-color: var(--primary); }
.erf-chip.gewaehlt {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.erf-chip.gewaehlt::before { content: "✓ "; }
.erf-neu { display: flex; gap: 8px; margin-bottom: 6px; }
.erf-neu input { flex: 1; min-width: 0; }
.erf-aktionen { align-items: center; }
@media (max-width: 700px) {
  .erf-wahl { max-height: 38vh; }
  .erf-chip { width: 100%; }
  .erf-neu { flex-wrap: wrap; }
  .erf-neu .btn { width: 100%; }
}

/* --- Auswertung: was am Telefon genannt wird --- */
.genannt-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.genannt-kopf {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.genannt-zeile { margin-bottom: 11px; }
.genannt-text { display: flex; justify-content: space-between; gap: 10px;
                font-size: 13.5px; margin-bottom: 4px; }
.genannt-text a { color: var(--text); }
.genannt-text a:hover { color: var(--primary); }
.genannt-zahl { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.genannt-balken { height: 6px; border-radius: 3px; background: rgba(128,128,128,0.16); overflow: hidden; }
.genannt-balken span { display: block; height: 100%; border-radius: 3px; }
@media (max-width: 700px) {
  .genannt-spalten { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Gesprächshilfe am Lead --- */
.hilfe-modal { max-height: 92vh; display: flex; flex-direction: column; }
.hilfe-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
              border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.hilfe-tab {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--text-muted); font-family: inherit; white-space: nowrap;
}
.hilfe-tab.active { border-color: var(--primary); color: var(--primary);
                    background: rgba(59,130,246,0.10); }
.hilfe-inhalt { overflow-y: auto; flex: 1; min-height: 0; }
.hilfe-aktionen { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 4px 12px; }

.notiert-zeile {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.notiert-zeile:last-child { border-bottom: none; }
.notiert-text { flex: 1; min-width: 0; }
.notiert-antwort {
  margin-top: 6px; padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.55;
  background: rgba(59,130,246,0.09); border-left: 3px solid var(--primary);
}
/* Notiz wird nach dem Gespräch nachgetragen – deshalb unauffällig, bis man reingeht */
.notiert-notiz {
  width: 100%; margin-top: 6px; min-height: 34px; resize: vertical;
  font-size: 13px; font-family: inherit;
}
.notiert-notiz.gespeichert { border-color: var(--success); }
.notiert-notiz.fehlgeschlagen { border-color: var(--danger); }
.notiert-art {
  display: inline-block; margin-right: 7px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.notiert-art.ist-problem { background: rgba(245,158,11,0.18); color: #b45309; }
.notiert-art.ist-einwand { background: rgba(239,68,68,0.16); color: #b91c1c; }

.hilfe-neu-kopf { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }

/* Genanntes am Lead */
.genannt-lead { max-height: 280px; overflow-y: auto; }
.genannt-eintrag { padding: 10px 0; border-bottom: 1px solid var(--border); }
.genannt-eintrag:last-child { border-bottom: none; }
.genannt-titel { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.genannt-titel a { color: var(--text); }
.genannt-titel a:hover { color: var(--primary); }
.genannt-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.genannt-zitat { font-style: italic; color: var(--text-muted); font-size: 12.5px; margin-top: 4px; }

/* Neuen Einwand anlegen, ohne die Liste zu verlassen */
.hilfe-neu {
  padding: 12px; margin-bottom: 10px; border-radius: 8px;
  background: rgba(128,128,128,0.08); border: 1px solid var(--border);
}
.hilfe-neu input, .hilfe-neu textarea {
  width: 100%; margin-bottom: 8px; font-family: inherit;
}
/* Der Skript-Knopf soll sich von den Ergebnis-Knöpfen abheben */
.outcome-btn.hilfe-btn { font-weight: 700; }

/* --- Telefon-Modus: alles auf einer Seite, ohne Suchen --- */
.tel-skript { margin-bottom: 16px; }
.tel-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.tel-eintrag { border-bottom: 1px solid var(--border); }
.tel-eintrag:last-child { border-bottom: none; }
.tel-eintrag > summary {
  cursor: pointer; padding: 11px 4px; font-weight: 600; font-size: 14px;
  list-style: none; line-height: 1.35;
}
.tel-eintrag > summary::-webkit-details-marker { display: none; }
.tel-eintrag > summary::after { content: " ▾"; color: var(--text-muted); font-weight: 400; }
.tel-eintrag[open] > summary::after { content: " ▴"; }
.tel-eintrag[open] > summary { color: var(--primary); }
.tel-eintrag .tel-sub { display: block; font-weight: 400; font-size: 12.5px;
                        color: var(--text-muted); margin-top: 2px; }
.tel-eintrag .script-text { padding: 0 4px 12px; font-size: 14.5px; line-height: 1.65; }
.tel-suche { width: 100%; margin-bottom: 8px; }
.tel-edit {
  display: inline-block; margin: 0 0 12px 4px;
  font-size: 12.5px; color: var(--text-muted);
}
.tel-edit:hover { color: var(--primary); }

/* Leichte Filterreihe – bewusst kleiner als .tab, damit auf einer Seite
   klar bleibt, welche Zeile die Ansicht wechselt und welche nur filtert. */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.chip {
  padding: 5px 12px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap;
}
.chip:hover { border-color: var(--primary); }
.chip.active { background: var(--primary); border-color: var(--primary) !important; color: #fff !important; }
.skriptwahl { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.skriptwahl-label { font-size: 12.5px; color: var(--text-muted); }
.skriptwahl select { max-width: 340px; }

/* Coaching-Notiz – ausdrücklich kein Sprechtext, deshalb deutlich abgesetzt */
.coach-hinweis {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(245,158,11,0.13); border-left: 3px solid var(--warning);
  font-size: 13px; line-height: 1.6;
}
.coach-hinweis strong { color: var(--warning); }

@media (max-width: 800px) {
  .tel-spalten { grid-template-columns: 1fr; gap: 12px; }
  .tel-eintrag > summary { padding: 13px 4px; font-size: 15px; }
}

/* --- Skript-Bibliothek --- */
.script-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.script-kurz { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.script-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.script-tags span, .script-tags a {
  font-size: 11.5px; color: var(--text-muted);
  background: rgba(128,128,128,0.14); border-radius: 999px; padding: 2px 8px;
}
.script-tags a:hover { color: var(--primary); }

.script-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.script-card { position: relative; }
.script-card.is-pinned { border-color: var(--warning); }
.script-open { display: block; padding: 16px 42px 16px 16px; color: var(--text); }
.script-top { display: flex; align-items: flex-start; gap: 9px; }
.script-icon { font-size: 17px; line-height: 1.3; flex-shrink: 0; }
.script-title { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.script-cat { background: var(--primary); font-size: 11px; margin-top: 9px; display: inline-block; }
.script-sub { color: var(--text-muted); font-size: 12.5px; margin-top: 9px; line-height: 1.5; }
.script-meta { color: var(--text-muted); font-size: 11.5px; margin-top: 9px; }
.script-pin {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; cursor: pointer; font-size: 15px;
  padding: 4px; border-radius: 6px; line-height: 1;
  filter: grayscale(1); opacity: 0.3; transition: opacity .12s, filter .12s;
}
.script-pin:hover { opacity: 0.75; }
.script-pin.on { filter: none; opacity: 1; }
.script-tools { position: absolute; top: 10px; right: 8px; display: flex; gap: 2px; }
.script-tools .script-pin { position: static; }
.script-del {
  background: none; border: none; cursor: pointer; font-size: 14px;
  padding: 4px; border-radius: 6px; line-height: 1;
  filter: grayscale(1); opacity: 0.3; transition: opacity .12s, filter .12s;
}
.script-del:hover { opacity: 1; filter: none; }
.script-delete-btn { color: var(--danger); }
/* Ohne Maus gibt es kein Hover – am Handy müssen die Knöpfe von sich aus
   sichtbar und groß genug zum Treffen sein. */
@media (hover: none) {
  .script-pin, .script-del { opacity: 0.75; filter: none; font-size: 17px; padding: 8px; }
  .script-tools { top: 6px; right: 4px; }
}

/* Schreibfeld: großzügig, frei größer ziehbar – man tippt hier lange Texte */
.script-editor {
  min-height: 48vh;
  resize: vertical;
  font-size: 15px;
  line-height: 1.7;
}
@media (max-width: 800px) {
  .script-editor { min-height: 52vh; font-size: 16px; }
  .modal.modal-wide { width: 100%; max-width: 100%; }
}

/* Lesefassung: Zeilenlänge und Zeilenhöhe fürs Vorlesen am Telefon */
.script-read { max-width: 760px; }
.script-text { white-space: pre-wrap; font-size: 16px; line-height: 1.75; }
.script-pdf { width: 100%; height: 78vh; border: none; display: block; }
.pdf-mobile { display: none; }         /* nur am Handy statt der Einbettung */

@media (max-width: 800px) {
  .script-grid { grid-template-columns: 1fr; gap: 10px; }
  .script-text { font-size: 16.5px; line-height: 1.8; }
  .pdf-embed { display: none; }        /* iOS zeigt hier nur einen leeren Kasten */
  .pdf-mobile { display: block; }
}

/* --- Nachhaken: offener Punkt mit Grund --- */
.followup-toggle {
  background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1;
  margin-left: 2px; padding: 2px 4px; border-radius: 6px; vertical-align: middle;
  filter: grayscale(1); opacity: 0.35; transition: opacity .12s, filter .12s, transform .08s;
}
.followup-toggle:hover { opacity: 0.8; transform: scale(1.15); }
.followup-toggle.on { filter: none; opacity: 1; }

/* Der Grund muss beim Wählen sofort ins Auge springen */
.followup-note, .followup-banner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: rgba(245, 158, 11, 0.12);
  border-left: 3px solid var(--warning);
  border-radius: 6px; padding: 9px 12px; margin-bottom: 12px;
  font-size: 13.5px; line-height: 1.5;
}
.followup-banner { margin-bottom: 16px; padding: 12px 14px; font-size: 14px; }
.followup-note .link-btn, .followup-banner .link-btn { white-space: nowrap; flex-shrink: 0; }
.fup-date { color: var(--text-muted); font-size: 12.5px; }

.tab.tab-followup.has-followup .tab-count { background: var(--warning); color: #fff; }
.tab.tab-followup.active { border-color: var(--warning); color: var(--warning); }

/* --- Zweiter Anlauf & geplatzte Termine --------------------------------
   Beides sind Karten in der Anrufliste, brauchen aber eine Zeile Kontext:
   ohne „wann zuletzt, wie oft" waehlt man blind nochmal dieselbe Nummer. */
.kontext-zeile {
  font-size: 12px; line-height: 1.5; padding: 6px 10px; margin-top: 8px;
  border-radius: 0 6px 6px 0; border-left: 3px solid var(--border);
  background: #f6f7fb; color: var(--text-muted);
}
.kontext-reakt { border-left-color: #0ea5e9; }
.kontext-noshow { border-left-color: #f97316; color: #9a3412; }
:root[data-theme="dark"] .kontext-zeile { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .kontext-noshow { color: #fdba74; }

/* Die Karte im Termin-Reiter hat nur zwei Knoepfe – sie soll trotzdem
   erkennbar zur Anrufliste gehoeren. */
.termin-karte { border-left: 4px solid #f59e0b; }
.termin-nachhalten { border-left: 4px solid #f59e0b; }
.termin-nachhalten.ist-geplatzt { border-left-color: #f97316; }

/* --- Nachfrage nach einem Termin --------------------------------------- */
.terminfrage .tf-kopf { margin: 10px 0 16px; }
.terminfrage .tf-firma { font-size: 17px; font-weight: 600; }
.terminfrage .tf-wahl { display: flex; flex-direction: column; gap: 8px; }
.terminfrage .tf-wahl .outcome-btn { width: 100%; justify-content: center; font-size: 15px; padding: 12px; }
.terminfrage textarea { width: 100%; }

/* --- Gesprächsverlauf --------------------------------------------------
   Ein Eintrag je Kontakt, zugeklappt eine Zeile. Bei 20 Anrufen an einem
   Lead ist eine offene Liste unlesbar – aufgeklappt wird nur, woran man
   gerade schreibt. */
.gv-eintrag {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface);
  overflow: hidden;
}
.gv-eintrag.ist-pinned { border-color: var(--warning); }
.gv-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; cursor: pointer; list-style: none; user-select: none;
}
.gv-kopf::-webkit-details-marker { display: none; }
.gv-kopf:hover { background: rgba(128,128,128,0.07); }
.gv-marke { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gv-stufe { font-size: 12px; color: var(--text-muted); }
.gv-zeit { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.gv-notiz-badge { background: #64748b; }
.gv-marke .badge { white-space: nowrap; }
.gv-inhalt { padding: 0 12px 10px; }
.gv-kurz {
  font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px;
  padding: 6px 10px; border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0; background: rgba(128,128,128,0.07);
}
.gv-text {
  width: 100%; min-height: 62px; resize: vertical;
  font-size: 14px; line-height: 1.55;
}
.gv-fuss {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px; min-height: 18px;
}
.gv-gespeichert { font-size: 12px; opacity: 0; transition: opacity 0.15s; }
.gv-gespeichert.zeigen { opacity: 1; }
/* Zugeklappt: die erste Zeile des Textes als Vorschau, damit man beim
   Durchblättern nicht jeden Eintrag öffnen muss. */
.gv-vorschau {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gv-eintrag[open] .gv-vorschau { display: none; }
@media (max-width: 700px) {
  /* Am Handy ist neben Badge und Uhrzeit kein Platz mehr fuer die Vorschau */
  .gv-vorschau { display: none; }
  .gv-kopf { padding: 10px; }
}

/* --- Termin nachbereiten ----------------------------------------------- */
.nachbereitung .nb-firma { font-size: 17px; font-weight: 600; }
.nachbereitung .nb-ergebnis { display: flex; flex-wrap: wrap; gap: 8px; }
.nachbereitung .nb-wahl.gewaehlt { background: var(--c); color: #fff; }
.nachbereitung .nb-protokoll { width: 100%; min-height: 150px; line-height: 1.55; }
.nb-aufgabe {
  display: grid; grid-template-columns: 1fr 130px 145px 24px;
  gap: 6px; align-items: center; margin-bottom: 6px;
}
.nb-aufgabe input, .nb-aufgabe select { width: 100%; }
.nb-a-weg { color: var(--text-muted); }
@media (max-width: 700px) {
  /* Am Handy zweizeilig – nebeneinander wird jedes Feld unbenutzbar schmal.
     Das ✕ steht rechts daneben und gilt fuer beide Zeilen. */
  .nb-aufgabe {
    grid-template-columns: 1fr 1fr 26px;
    grid-template-areas: "t t x" "w b x";
    padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
  }
  .nb-a-text { grid-area: t; }
  .nb-a-wer { grid-area: w; }
  .nb-a-bis { grid-area: b; }
  .nb-a-weg { grid-area: x; align-self: center; }
}

/* --- Art des Gesprächs -------------------------------------------------
   Steht im Ergebnis-Menue schon vorausgewaehlt da: der haeufige Fall kostet
   keinen Klick, der seltene genau einen. */
.typ-zeile { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.typ-label { font-size: 12.5px; color: var(--text-muted); }
.typ-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.typ-chip {
  border: 1.5px solid var(--border); background: transparent; color: var(--text-muted);
  padding: 5px 11px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 0.12s;
}
.typ-chip:hover { border-color: var(--c); color: var(--c); }
.typ-chip.gewaehlt { background: var(--c); border-color: var(--c); color: #fff; }

/* Art als Marke im Verlauf */
.typ-badge {
  border: 1.5px solid var(--c); color: var(--c);
  padding: 1px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}

/* Der Weg des Gesprächs: erreicht › angebissen › Ergebnis */
.gv-pfad { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.gv-schritt { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.gv-schritt.ist-ende { font-weight: 600; }
.gv-pfeil { font-size: 12px; color: var(--text-muted); opacity: 0.5; }
.gv-dauer { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 700px) {
  /* Am Handy ist neben Art und Uhrzeit kein Platz fuer den ganzen Weg –
     das Ergebnis allein muss reichen, der Rest steht aufgeklappt. */
  .gv-pfad .gv-schritt:not(.ist-ende), .gv-pfad .gv-pfeil { display: none; }
  .gv-dauer { display: none; }
}

.typ-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.typ-tabelle th { text-align: left; font-weight: 600; color: var(--text-muted);
                  font-size: 12px; padding: 4px 8px; }
.typ-tabelle td { padding: 8px; border-top: 1px solid var(--border); }
.typ-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Trichter ----------------------------------------------------------
   Waagerechte Balken statt eines gezeichneten Trichters: die Zahlen muessen
   ablesbar sein, nicht huebsch aussehen. */
.trichter { margin: 16px 0 4px; }
.tr-stufe { margin-bottom: 12px; }
.tr-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tr-name { font-weight: 600; font-size: 14px; }
.tr-zahl { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-balken {
  height: 10px; border-radius: 6px; margin: 5px 0 4px;
  background: rgba(128,128,128,0.14); overflow: hidden;
}
.tr-fuellung {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  transition: width 0.4s;
}
.tr-fuss {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted);
}
.tr-schwund { white-space: nowrap; }

.tr-quoten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 18px;
}
.tr-quote {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  text-align: center;
}
.tr-q-wert { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-q-name { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* --- Status als Reiter über der Leads-Tabelle --------------------------
   Vorbild: eine Zeile Reiter mit Zahl, der aktive faerbt die Kopfzeile der
   Tabelle ein. So sieht man beim Scrollen noch, in welchem Status man ist. */
.stufen-leiste {
  display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: thin;
}
.stufe-reiter {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600; transition: all 0.12s;
}
.stufe-reiter:hover { border-color: var(--stufe, var(--primary)); }
.stufe-reiter.active {
  border-color: var(--stufe, var(--primary));
  box-shadow: inset 0 -2.5px 0 var(--stufe, var(--primary));
}
.stufe-zahl {
  background: rgba(128,128,128,0.18); border-radius: 20px;
  padding: 1px 8px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.stufe-reiter.active .stufe-zahl { background: var(--stufe, var(--primary)); color: #fff; }

.tabellen-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

/* Kopfzeile in der Farbe des gewaehlten Status */
.leads-table.hat-stufe thead tr { background: var(--stufe-hell); }
.leads-table.hat-stufe thead th { color: var(--stufe); font-weight: 700; }

/* Mehr Luft in der Tabelle – bei 1063 Zeilen liest man sonst nichts */
.leads-table td { padding: 13px 14px; }
.leads-table tbody tr { transition: background 0.1s; }

/* Spaltenwahl */
.spalten-wahl { position: relative; }
.spalten-wahl > summary { list-style: none; cursor: pointer; }
.spalten-wahl > summary::-webkit-details-marker { display: none; }
.spalten-menue {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; min-width: 190px; box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.spalten-zeile {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 7px; cursor: pointer; font-size: 13px;
}
.spalten-zeile:hover { background: rgba(128,128,128,0.10); }
.spalten-zeile input { width: auto; margin: 0; }

.leads-table.aus-plz .sp-plz,
.leads-table.aus-ort .sp-ort,
.leads-table.aus-gf .sp-gf,
.leads-table.aus-ma .sp-ma,
.leads-table.aus-tel .sp-tel,
.leads-table.aus-mail .sp-mail,
.leads-table.aus-status .sp-status,
.leads-table.aus-anrufe .sp-anrufe { display: none !important; }

/* --- Reiter auf der Lead-Seite -----------------------------------------
   Verlauf / Infos / Aufgaben. Die Knoepfe fuer den naechsten Anruf stehen
   darueber und bleiben immer sichtbar – sie sind der Grund, warum man die
   Seite ueberhaupt aufmacht. */
.lead-reiter {
  display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto;
  padding-bottom: 2px;
}
.lead-reiter-knopf {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 15px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-muted);
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.12s;
}
.lead-reiter-knopf:hover { color: var(--text); }
.lead-reiter-knopf.active {
  color: var(--primary); border-color: var(--primary);
  box-shadow: inset 0 -2.5px 0 var(--primary);
}
.reiter-zahl {
  background: rgba(128,128,128,0.18); border-radius: 20px;
  padding: 1px 8px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.lead-reiter-knopf.active .reiter-zahl { background: var(--primary); color: #fff; }

/* --- Massenbearbeitung ------------------------------------------------- */
.massen-leiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: rgba(0,113,227,0.08);
}
.massen-zahl { font-size: 13px; margin-right: 4px; }
.massen-leiste select { width: auto; min-width: 170px; padding: 7px 10px; font-size: 13px; }
.leads-table td.sp-wahl, .leads-table th.sp-wahl { width: 34px; padding-right: 0; }
.leads-table .sp-wahl input { width: auto; margin: 0; cursor: pointer; }
@media (max-width: 700px) {
  /* Am Handy ist die Zeile eine Karte – das Kaestchen gehoert nach oben */
  .leads-table td.sp-wahl { display: inline-block; margin-right: 8px; vertical-align: top; }
}

.gv-links { display: flex; align-items: center; gap: 12px; }
.gv-dauer-feld { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
                 color: var(--text-muted); }
.gv-dauer-feld input { width: 56px; padding: 3px 7px; font-size: 12px; text-align: right; }

/* --- Letzter Gesprächsstand + zweistufige Notizen ---------------------- */
.letztes-gespraech { border-left: 4px solid var(--c); margin-bottom: 16px; }
.lg-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.lg-kopf .text-muted { font-size: 12px; }
.lg-text { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.letztes-gespraech .link-btn { margin-top: 8px; font-size: 13px; }

.notiz-neu .notiz-art-wahl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.notiz-details { margin: -4px 0 10px; }
.notiz-details > summary {
  cursor: pointer; font-size: 13px; color: var(--text-muted); padding: 6px 0;
  list-style: none;
}
.notiz-details > summary::-webkit-details-marker { display: none; }
.notiz-details > summary:hover { color: var(--primary); }
.notiz-details textarea { width: 100%; margin-top: 6px; }

.gv-details { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.gv-details > summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-muted); list-style: none;
}
.gv-details > summary::-webkit-details-marker { display: none; }
.gv-details > summary:hover { color: var(--primary); }
.gv-detailtext { margin-top: 8px; min-height: 90px; }

.gv-eintrag.hervorgehoben {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.22);
  transition: box-shadow 0.3s, border-color 0.3s;
}

/* --- Gesprächsstufen ---------------------------------------------------
   Vier Kacheln, immer alle sichtbar. Die leeren sind die Aufforderung, sie
   zu fuellen – wer nur die gefuellten sieht, weiss nicht was fehlt. */
.stufen-block { margin-bottom: 16px; }
.stufen-gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.stufe-kachel {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: all 0.12s; font: inherit; width: 100%;
}
.stufe-kachel:hover { border-color: var(--c); transform: translateY(-1px); }
.stufe-kachel.ist-gefuellt { border-left: 4px solid var(--c); }
.sk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sk-name { font-weight: 600; font-size: 13.5px; }
.sk-haken { color: var(--success); font-weight: 700; }
.sk-text { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.stufe-kachel.ist-gefuellt .sk-text { color: var(--text); }
.sk-fuss { font-size: 11.5px; color: var(--text-muted); }

.stufe-fenster textarea { width: 100%; }
/* Im Groß-Modus soll die Zusammenfassung das Fenster fuellen duerfen – dann
   scrollt das Fenster, statt dass das Feld gequetscht wird. */
.stufe-fenster #stufe-kurz.info-big { height: 45vh; min-height: 260px; }
.stufe-fenster #stufe-details { min-height: 220px; line-height: 1.55; }
.stufe-fenster .modal-actions { display: flex; align-items: center; gap: 10px; }

/* --- Telefon-Modus: weitere Skripte unter dem Hauptskript --------------
   Pitch, Rechnung und „Vom Nein zum Termin" lagen vorher hinter einem
   Auswahlfeld, das das Hauptskript ersetzt hat. Im Gespraech braucht man sie
   nacheinander – also stehen sie jetzt aufklappbar darunter. */
.weitere-skripte { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.skript-karte { padding: 0; }
.skript-karte > summary {
  padding: 13px 16px; cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.skript-karte > summary::-webkit-details-marker { display: none; }
.skript-karte > summary::before { content: "▸ "; color: var(--text-muted); }
.skript-karte[open] > summary::before { content: "▾ "; }
.skript-karte > summary:hover { background: rgba(128,128,128,0.07); }
.skript-karte[open] > summary { border-bottom: 1px solid var(--border); }
.skript-karte > *:not(summary) { padding: 0 16px; }
.skript-karte > .script-text { padding-top: 12px; }
.skript-karte > .tel-edit { display: inline-block; padding-bottom: 12px; }

/* --- Projekt-Brett -----------------------------------------------------
   Drei Abschnitte nebeneinander. Am Handy untereinander – nebeneinander
   waere jede Spalte zu schmal zum Lesen. */
.projekt-brett {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start;
}
.projekt-spalte {
  background: var(--board-bg); border-radius: 12px; padding: 12px;
  border-top: 3px solid var(--c);
}
.ps-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-name { font-weight: 700; font-size: 14px; color: var(--board-text); }
.ps-zahl {
  background: var(--c); color: #fff; border-radius: 20px; padding: 1px 9px;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.ps-hinweis { font-size: 11.5px; color: var(--board-text-muted); margin: 3px 0 10px; }
.ps-leer { font-size: 12.5px; color: var(--board-text-muted); padding: 8px 2px; }

.projekt-karte {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 8px; cursor: pointer; font: inherit;
  color: var(--text); transition: all 0.12s;
}
.projekt-karte:hover { border-color: var(--c); transform: translateY(-1px); }
.pk-firma { font-weight: 700; font-size: 13.5px; }
.pk-titel { font-size: 12.5px; color: var(--text-muted); }
.pk-schritt { font-size: 12px; color: var(--primary); margin-top: 3px; }
.pk-fuss { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; }
.pk-wer, .pk-offen, .pk-notiz {
  background: rgba(128,128,128,0.15); border-radius: 20px; padding: 1px 8px;
  color: var(--text-muted);
}
.pk-offen { background: rgba(255,149,0,0.18); color: #b45309; }

.projekt-fenster .pm-block { margin-top: 14px; }
.projekt-fenster .pm-block > label {
  display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px;
}
.pm-gespraech {
  border-left: 3px solid var(--border); padding: 7px 11px; margin-bottom: 8px;
  background: rgba(128,128,128,0.07); border-radius: 0 8px 8px 0;
}
.pm-g-kopf { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.pm-g-kurz { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.pm-gespraech details > summary { cursor: pointer; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.pm-g-lang { font-size: 13px; line-height: 1.55; white-space: pre-wrap; margin-top: 6px; }
.pm-aufgabe { font-size: 13px; padding: 4px 0; }
.pm-schieben { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }

@media (max-width: 900px) {
  .projekt-brett { grid-template-columns: 1fr; }
}

/* Projekt-Stand oben am Lead */
.projekt-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-left: 4px solid var(--c); margin-bottom: 16px;
  text-decoration: none; color: var(--text);
}
.projekt-zeile:hover { border-color: var(--c); }
.pz-marke { font-weight: 700; font-size: 13px; color: var(--c); white-space: nowrap; }
.pz-titel { font-size: 13.5px; }
.pz-schritt { font-size: 12.5px; color: var(--text-muted); }
.pz-wer {
  background: rgba(128,128,128,0.15); border-radius: 20px; padding: 1px 9px;
  font-size: 11.5px; color: var(--text-muted); margin-left: auto;
}

/* Firmensuche beim Anlegen eines Projekts */
.pm-treffer { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.pm-treffer-zeile {
  text-align: left; background: transparent; border: none; color: var(--text);
  padding: 7px 10px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px;
}
.pm-treffer-zeile:hover { background: rgba(128,128,128,0.12); }
.pm-gewaehlt { font-size: 13px; color: var(--success); padding: 6px 0; font-weight: 600; }

/* --- Auftragstext im Projektfenster ------------------------------------
   Leons Protokolle sind durchnummeriert und lang. Als ein Block Text sind
   9.000 Zeichen unlesbar – also Abschnitte mit Zwischenueberschriften. */
.pk-punkte {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.pk-p-kopf { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.pk-punkt {
  font-size: 12px; color: var(--text-muted); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pm-auftrag-text {
  max-height: 46vh; overflow-y: auto; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(128,128,128,0.06); line-height: 1.6;
}
.pm-a-kopf {
  font-weight: 700; font-size: 14px; margin: 16px 0 6px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.pm-auftrag-text > .pm-a-kopf:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.pm-a-nr { color: var(--primary); margin-right: 4px; }
.pm-a-text { font-size: 13.5px; white-space: pre-wrap; color: var(--text); }

.pm-neue-aufgabe .pm-a-zeile {
  display: grid; grid-template-columns: 1fr 130px 145px 42px; gap: 6px; align-items: center;
}
.pm-neue-aufgabe input, .pm-neue-aufgabe select { width: 100%; }
@media (max-width: 700px) {
  .pm-neue-aufgabe .pm-a-zeile { grid-template-columns: 1fr 1fr; }
  .pm-neue-aufgabe .pm-a-zeile > input:first-child { grid-column: 1 / -1; }
}

/* --- Überblick über dem Volltext ---------------------------------------
   Dieselbe Sache zweimal: oben die Themen zum Ueberfliegen, darunter der
   Wortlaut. Ein Klick auf ein Thema springt an die Stelle. */
.pm-ueberblick {
  border: 1px solid var(--primary); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px;
  background: rgba(0,113,227,0.07);
}
.pm-u-kopf { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pm-u-eigen {
  font-size: 13.5px; line-height: 1.5; margin-bottom: 10px;
  padding-left: 10px; border-left: 3px solid var(--primary);
}
.pm-u-liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.pm-u-liste li { font-size: 13.5px; }
.pm-u-liste button {
  background: none; border: none; padding: 0; text-align: left; cursor: pointer;
  color: var(--text); font: inherit; line-height: 1.45;
}
.pm-u-liste button:hover { color: var(--primary); text-decoration: underline; }
.pm-u-trenner {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.pm-a-kopf.ist-angesprungen {
  background: rgba(0,113,227,0.16); border-radius: 6px;
  margin-left: -6px; padding-left: 6px; transition: background 0.3s;
}

/* --- Durchgeh-Liste „Zu prüfen" ---------------------------------------- */
.chip-pruefen { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.chip-pruefen.active { background: var(--primary); color: #fff; }
.chip-still { opacity: 0.65; cursor: default; }
.leads-table tr.ist-geprueft { opacity: 0; transition: opacity 0.4s; }
.leads-table td.sp-geprueft, .leads-table th.sp-geprueft { white-space: nowrap; }
.leads-table.aus-web .sp-web { display: none !important; }

/* „Geprüft" am Lead und auf der Anrufkarte */
.geprueft-marke {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--success); font-weight: 600;
}
.geprueft-schalter {
  background: none; border: 1px solid var(--border); border-radius: 20px;
  padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text-muted);
}
.geprueft-schalter.ist-geprueft { border-color: var(--success); color: var(--success); }

/* Im Pruef-Modus zaehlt nur, was fuer die Datenpflege gebraucht wird –
   alles andere schiebt den „Geprueft"-Knopf aus dem Bild. */
.leads-table.pruef-modus .sp-plz,
.leads-table.pruef-modus .sp-ma,
.leads-table.pruef-modus .sp-mail,
.leads-table.pruef-modus .sp-status,
.leads-table.pruef-modus .sp-anrufe { display: none; }
.leads-table.pruef-modus .schnell-feld { min-width: 130px; }

/* ======================================================================
   DESIGN 2026 – ruhiger, hochwertiger, am Handy wie eine App.
   Steht bewusst am Ende: überschreibt die Grundwerte oben, ohne dass jede
   einzelne Regel angefasst werden muss. Dunkelmodus-Werte (höhere
   Spezifität über [data-theme]) gewinnen weiterhin.
   ====================================================================== */
:root {
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e6e8ee;
  --border-strong: #d6d9e2;
  --text: #0f1219;
  --text-muted: #6b7180;
  --primary: #2f6bff;
  --primary-hover: #1f5af0;
  --primary-soft: rgba(47,107,255,0.10);
  --sidebar-bg: #ffffff;
  --sidebar-text: #475063;
  --sidebar-text-active: #2f6bff;
  --sidebar-accent: #2f6bff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.04);
  --shadow-lg: 0 12px 40px rgba(16,24,40,0.14);
  --sidebar-width: 252px;
}
:root[data-theme="dark"] {
  --bg: #0b0b0f;
  --surface: #16161b;
  --surface-2: #1c1c22;
  --border: #2a2a31;
  --border-strong: #37373f;
  --primary: #4d82ff;
  --primary-hover: #6a96ff;
  --primary-soft: rgba(77,130,255,0.16);
  --sidebar-bg: #111115;
  --sidebar-text: #a4a6b0;
  --sidebar-text-active: #7ea4ff;
  --shadow: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14.5px; line-height: 1.45; letter-spacing: -0.005em;
}
::selection { background: var(--primary-soft); }

/* --- Seitenleiste --- */
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 16px 12px; background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
}
.sidebar-top { padding: 4px 6px 18px; }
.sidebar .logo { display: flex; align-items: center; gap: 10px; padding: 0; font-size: 15.5px; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(140deg, #2f6bff, #7b5cff);
  box-shadow: 0 4px 12px rgba(47,107,255,0.35);
}
.logo-text { font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.bell-btn { width: 34px; height: 34px; background: transparent; border-color: var(--border); color: var(--sidebar-text); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link, .sidebar-footer .nav-link {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  border-radius: 10px; font-size: 14px; font-weight: 550; color: var(--sidebar-text);
  cursor: pointer; list-style: none; user-select: none;
  transition: background .12s, color .12s;
}
.nav-link::-webkit-details-marker { display: none; }
.nav-link .ico { flex-shrink: 0; opacity: .85; }
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { background: var(--primary-soft); color: var(--sidebar-text-active); font-weight: 650; }
.nav-link.active .ico { opacity: 1; }
.nav-link.active-parent { color: var(--text); }
.nav-chev { margin-left: auto; display: flex; transition: transform .15s; opacity: .55; }
.nav-group[open] > summary .nav-chev { transform: rotate(90deg); }
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 20px;
           padding-left: 12px; border-left: 1px solid var(--border); }
.nav-sub a { padding: 6px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
             color: var(--sidebar-text); }
.nav-sub a:hover { background: var(--surface-2); color: var(--text); }
.nav-sub a.active { color: var(--sidebar-text-active); background: var(--primary-soft); font-weight: 600; }

.sidebar-footer { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.user-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.user-chip .avatar { background: linear-gradient(140deg, #2f6bff, #7b5cff); }
.user-chip .logout { display: flex; }

.tabbar { display: none; }

/* --- Inhalt --- */
.main { padding: 30px 36px 48px; min-width: 0; }
.page-header { margin-bottom: 22px; gap: 16px; }
.page-header h1 { font-size: 27px; font-weight: 750; letter-spacing: -0.025em; }
.page-header .subtitle { font-size: 13.5px; }

.card { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow); }
.card-pad { padding: 20px 22px; }
h3 { letter-spacing: -0.01em; }

.btn { padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px;
       box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.btn.secondary { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
:root[data-theme="dark"] .btn.secondary { background: var(--surface-2); border-color: var(--border); }
.btn.small { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }

.search-input, input[type=text], input[type=search], input[type=email], input[type=tel],
input[type=number], input[type=date], input[type=time], input[type=password], textarea, select {
  border-radius: 10px; border-color: var(--border); background: var(--surface);
}
.search-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft);
}

.tab { border-radius: 10px; padding: 8px 13px; font-size: 13.5px; font-weight: 600;
       box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.tab:hover { background: var(--surface-2); }
:root[data-theme="dark"] .tab:hover { background: var(--surface-2); }

.modal-overlay { background: rgba(15,18,25,0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { border-radius: 20px; box-shadow: var(--shadow-lg); padding: 24px 24px 20px; border: 1px solid var(--border); }
.modal h2 { font-size: 18px; letter-spacing: -0.015em; }
.modal-overlay.open .modal { animation: modalIn .16s ease-out; }
@keyframes modalIn { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

th { font-size: 11.5px; letter-spacing: .04em; }
.badge { border-radius: 999px; font-weight: 650; }

/* --- Segment-Umschalter (Dashboard-Ansicht u.a.) --- */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border);
       border-radius: 12px; padding: 3px; gap: 2px; box-shadow: var(--shadow); }
.seg a { padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.seg a:hover { color: var(--text); }
.seg a.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(47,107,255,.3); }

/* --- Aufklapp-Menü für Knöpfe (Import/Export) --- */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 90; min-width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  font-size: 13.5px; font-weight: 550; color: var(--text); background: none; border: none;
  text-align: left; cursor: pointer; font-family: inherit;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); }
.dropdown-menu .dd-hinweis { font-size: 11.5px; color: var(--text-muted); font-weight: 500; margin-left: auto; }
.dropdown-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 2px; }

/* ======================= DASHBOARD ======================= */
.dash-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
             flex-wrap: wrap; margin-bottom: 20px; }
.dash-kopf h1 { margin: 0; font-size: 27px; font-weight: 750; letter-spacing: -0.025em; }
.dash-kopf .subtitle { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.dash-spalte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.kachel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
          padding: 16px 18px; box-shadow: var(--shadow); display: block; color: var(--text); }
a.kachel:hover { border-color: var(--border-strong); }
.kachel-label { font-size: 12px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.kachel-wert { font-size: 30px; font-weight: 750; letter-spacing: -0.03em; margin-top: 4px; line-height: 1.1; }
.kachel-fuss { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.kachel.haupt { background: linear-gradient(140deg, #2f6bff, #6a5cff); border: none; color: #fff;
                box-shadow: 0 10px 30px rgba(47,107,255,.28); }
.kachel.haupt .kachel-label, .kachel.haupt .kachel-fuss { color: rgba(255,255,255,.85); }
.kachel.warn .kachel-wert { color: #e8590c; }

.dash-karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
              box-shadow: var(--shadow); overflow: hidden; }
.dash-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                   padding: 15px 18px 10px; }
.dash-karte-kopf h3 { margin: 0; font-size: 15px; font-weight: 700; }
.dash-karte-kopf a { font-size: 12.5px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.dash-leer { padding: 6px 18px 18px; color: var(--text-muted); font-size: 13.5px; }

.zeile { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--border);
         color: var(--text); min-width: 0; }
a.zeile:hover { background: var(--surface-2); }
.zeile-haupt { flex: 1; min-width: 0; }
.zeile-titel { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile-sub { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile-rechts { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; text-align: right; }
.datum-box { width: 44px; flex-shrink: 0; text-align: center; border-radius: 10px; padding: 5px 0;
             background: var(--primary-soft); color: var(--primary); line-height: 1.1; }
.datum-box b { display: block; font-size: 16px; }
.datum-box span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.datum-box.heute { background: var(--primary); color: #fff; }

.liste-stand { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 4px 18px 18px; }
.stand { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px;
         border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.stand:hover { border-color: var(--border-strong); }
.stand-zahl { font-size: 20px; font-weight: 750; min-width: 28px; }
.stand-name { font-size: 12.5px; font-weight: 600; color: var(--text-muted); line-height: 1.25; }
.stand.hat { border-color: color-mix(in srgb, var(--c) 45%, var(--border)); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.stand.hat .stand-zahl { color: var(--c); }

.aufgabe { display: flex; align-items: flex-start; gap: 11px; padding: 11px 18px; border-top: 1px solid var(--border); }
.aufgabe input[type=checkbox] { width: 19px; height: 19px; margin-top: 1px; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.aufgabe.ist-erledigt { opacity: .45; }
.aufgabe.ist-erledigt .zeile-titel { text-decoration: line-through; }
.aufgabe .zeile-titel { white-space: normal; }
.faellig { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
           background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.faellig.ueber { background: rgba(239,68,68,.1); color: #dc2626; border-color: rgba(239,68,68,.25); }
.faellig.heute { background: rgba(245,158,11,.12); color: #b45309; border-color: rgba(245,158,11,.3); }
.dash-aside { position: sticky; top: 20px; }

.aktiv-punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--c, var(--text-muted)); }

@media (max-width: 1150px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-aside { position: static; }
}

/* ======================= ANRUF-ERGEBNIS ======================= */
.ergebnis-schritt[hidden] { display: none !important; }
.notiz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.notiz-chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
              border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.notiz-chip:hover { border-color: var(--primary); color: var(--primary); }
.pflicht-hinweis { font-size: 12px; color: var(--danger); margin-top: 4px; }
.erg-zurueck { font-size: 13px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 10px; }
.erg-zurueck:hover { color: var(--primary); }
.erg-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.erg-marke { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
             color: #fff; background: var(--c); }
.skript-mini { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
               border-radius: 8px; padding: 2px 7px; font-size: 12px; cursor: pointer; vertical-align: 2px; }
.skript-mini:hover { color: var(--primary); border-color: var(--primary); }
.skript-fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; border: none; cursor: pointer;
              background: var(--text); color: var(--bg); border-radius: 999px; padding: 11px 16px;
              font-weight: 650; font-size: 13.5px; box-shadow: var(--shadow-lg); display: flex; gap: 7px; align-items: center; }

/* ======================= LEAD-SEITE ======================= */
.gv-datum { font-variant-numeric: tabular-nums; }
.typ-select { border: 1px solid transparent; background: color-mix(in srgb, var(--c) 14%, transparent);
              color: var(--c); font-weight: 700; font-size: 11.5px; border-radius: 999px;
              padding: 2px 22px 2px 9px; width: auto; cursor: pointer; appearance: none; -webkit-appearance: none;
              background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
              background-position: calc(100% - 11px) 55%, calc(100% - 7px) 55%;
              background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.typ-select:focus { box-shadow: none; border-color: var(--c); }
.gf-block { border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; }
.gf-name { font-weight: 700; font-size: 15px; }
.gf-pos { color: var(--text-muted); font-size: 13px; }
.gf-wege { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 13.5px; }
.gf-wege a { color: var(--primary); font-weight: 550; }
.daten-mehr > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); list-style: none; padding: 8px 0 2px; }
.daten-mehr > summary::-webkit-details-marker { display: none; }
.daten-mehr > summary::after { content: " ▾"; }
.daten-mehr[open] > summary::after { content: " ▴"; }

/* ======================= AUFGABEN: MEHRFACHAUSWAHL ======================= */
.todo-card { position: relative; }
.todo-wahl { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.todo-card .todo-title { padding-right: 26px; }
.todo-card.gewaehlt { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.massen-leiste-todo { position: sticky; top: 10px; z-index: 50; display: flex; gap: 8px; align-items: center;
                      flex-wrap: wrap; background: var(--text); color: var(--bg); border-radius: 14px;
                      padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow-lg); }
.massen-leiste-todo select, .massen-leiste-todo input { width: auto; padding: 6px 9px; font-size: 13px; }
.massen-leiste-todo .btn.secondary { background: rgba(255,255,255,.12); color: inherit; border-color: transparent; }

/* ======================= PROJEKTE: ZIEHEN ======================= */
.projekt-karte[draggable="true"] { cursor: grab; }
.projekt-karte.zieht { opacity: .4; }
.projekt-spalte.drueber { outline: 2px dashed var(--c); outline-offset: -4px; }

/* ======================= REPORTS ======================= */
.vergleich-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.vergleich { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.vergleich-titel { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.vergleich-zeile { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; gap: 8px; }
.vergleich-zeile .wert { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.vergleich-zeile .vor { font-size: 12.5px; color: var(--text-muted); }
.wochen-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 10px 2px 0; }
.wochen-chart .saeule { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; height: 100%; }
.wochen-chart .balken { width: 100%; max-width: 38px; border-radius: 7px 7px 3px 3px; background: var(--primary); position: relative; min-height: 2px; }
.wochen-chart .balken i { position: absolute; left: 0; right: 0; bottom: 0; background: #22c55e; border-radius: 0 0 3px 3px; }
.wochen-chart .saeule.laufend .balken { opacity: .5; }
.wochen-chart .s-wert { font-size: 11px; font-weight: 700; color: var(--text); }
.wochen-chart .s-label { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.muster-zeile { padding: 12px 0; border-top: 1px solid var(--border); }
.muster-zeile:first-child { border-top: none; }
.muster-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.muster-name { font-weight: 650; }
.muster-zahl { font-weight: 700; white-space: nowrap; }
.muster-balken { height: 8px; background: var(--surface-2); border-radius: 5px; overflow: hidden; margin: 6px 0; border: 1px solid var(--border); }
.muster-balken span { display: block; height: 100%; background: var(--c, var(--primary)); border-radius: 5px; }
.muster-zitate { display: flex; flex-direction: column; gap: 3px; }
.muster-zitat { font-size: 12.5px; color: var(--text-muted); }
.muster-zitat a { color: var(--primary); }
.woerter { display: flex; flex-wrap: wrap; gap: 6px; }
.wort { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; }
.wort b { color: var(--primary); margin-left: 3px; }
.gesagt-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* ======================= HANDY: APP-GEFÜHL ======================= */
@media (max-width: 800px) {
  .sidebar { display: none !important; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    justify-content: space-around; align-items: stretch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--border);
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 5px 2px; min-height: 50px; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 10.5px; font-weight: 650; color: var(--text-muted); border-radius: 12px;
  }
  .tabbar .active { color: var(--primary); }
  .tabbar .tab-ico { position: relative; display: flex; }
  .main { padding: calc(14px + env(safe-area-inset-top)) 14px calc(86px + env(safe-area-inset-bottom)); }
  .page-header h1, .dash-kopf h1 { font-size: 24px; }

  /* Fenster kommen von unten, wie bei einer App */
  .modal-overlay { align-items: flex-end; }
  .modal, .modal.modal-wide {
    width: 100%; max-width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); border: none;
  }
  .modal::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px;
                   background: var(--border-strong); margin: 0 auto 14px; }
  .modal-overlay.open .modal { animation: sheetUp .2s ease-out; }
  .modal-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); background: var(--surface);
                   padding: 12px 0 4px; margin-bottom: -4px; }
  .modal-actions .btn { flex: 1; justify-content: center; min-height: 46px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  input, select, textarea { font-size: 16px !important; }   /* verhindert das Hineinzoomen am iPhone */

  .kacheln { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kachel { padding: 13px 14px; }
  .kachel-wert { font-size: 26px; }
  .liste-stand { grid-template-columns: 1fr 1fr; }
  .seg { width: 100%; }
  .seg a { flex: 1; text-align: center; }
  .skript-fab { bottom: calc(80px + env(safe-area-inset-bottom)); right: 14px; }
  .more-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dropdown-menu { right: auto; left: 0; }
}
.more-gruppe { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
               letter-spacing: .05em; margin: 12px 6px 6px; }
.more-kacheln a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
                  padding: 13px 14px; border-radius: 14px; background: var(--surface-2);
                  border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); }
.more-kacheln a .ico { color: var(--primary); }
.more-panel { padding: 8px 14px calc(16px + env(safe-area-inset-bottom)); }
.gv-stufentext { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; padding: 8px 10px;
                 background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.alle-waehlen { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 7px 12px;
                border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
                font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.alle-waehlen input, .spalte-wahl { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; margin: 0; }

/* ======================= WOCHENKALENDER (Termin aussuchen) ======================= */
.wochenkalender { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.wk-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.wk-pfeil { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px;
            width: 30px; height: 28px; font-size: 16px; cursor: pointer; }
.wk-lade { margin-left: auto; font-size: 12px; }
.wk-raster { display: grid; grid-template-columns: 42px repeat(7, minmax(0, 1fr)); max-height: 380px; overflow-y: auto; }
.wk-zeitspalte { border-right: 1px solid var(--border); }
.wk-zeit { font-size: 10.5px; color: var(--text-muted); text-align: right; padding-right: 5px; box-sizing: border-box; transform: translateY(-6px); }
.wk-tagkopf { height: 28px; font-size: 11.5px; color: var(--text-muted); text-align: center; line-height: 28px;
              border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; white-space: nowrap; }
.wk-tagkopf b { color: var(--text); }
.wk-tag { border-right: 1px solid var(--border); min-width: 0; }
.wk-tag:last-child { border-right: none; }
.wk-tag.ist-we { background: var(--surface-2); }
.wk-tag.ist-heute .wk-tagkopf { color: var(--primary); }
.wk-tag.ist-heute .wk-tagkopf b { color: var(--primary); }
.wk-flaeche { position: relative; cursor: copy; }
.wk-slot { position: absolute; left: 0; right: 0; border-top: 1px dashed transparent; }
.wk-slot.voll { border-top: 1px solid var(--border); }
.wk-flaeche:hover .wk-slot:hover { background: var(--primary-soft); }
.wk-termin { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 2px 4px; overflow: hidden;
             font-size: 10.5px; line-height: 1.25; color: var(--text); cursor: not-allowed;
             background: color-mix(in srgb, var(--c) 22%, var(--surface)); border-left: 3px solid var(--c); z-index: 1; }
.wk-auswahl { position: absolute; left: 2px; right: 2px; border-radius: 6px; background: var(--primary); color: #fff;
              font-size: 11px; font-weight: 700; padding: 2px 5px; z-index: 3; pointer-events: none;
              box-shadow: 0 4px 12px rgba(47,107,255,.35); }
.wk-ganztags { color: var(--warning); margin-left: 3px; }
@media (max-width: 800px) {
  .wk-raster { grid-template-columns: 34px repeat(7, minmax(0, 1fr)); max-height: 320px; }
  .wk-termin { font-size: 9px; padding: 1px 2px; }
  .wk-termin b { display: none; }
}
.wk-tag.ist-vorbei .wk-flaeche { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(128,128,128,.07) 6px 12px); cursor: default; }
.wk-vorbei { position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none;
             background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(128,128,128,.08) 6px 12px); }

/* Themen am Lead (Webseite, KI …) */
.themen-zeile { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.thema-chip { border: 1px dashed var(--border-strong); background: transparent; color: var(--text-muted);
              border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.thema-chip:hover { border-color: var(--c); color: var(--c); }
.thema-chip.an { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
.thema-chip:disabled { cursor: default; opacity: 1; }
.thema-chip:not(.an) { display: none; }
.themen-zeile.offen .thema-chip { display: inline-block; }
.thema-plus { border: 1px dashed var(--border-strong); background: transparent; color: var(--text-muted); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.thema-plus:hover { color: var(--primary); border-color: var(--primary); }
.thema-marke { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 4px;
               color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); vertical-align: 1px; white-space: nowrap; }
.pz-auftrag { flex-basis: 100%; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* E-Mails: nicht zugeordnet */
.mail-offen { padding: 14px 16px; margin-bottom: 10px; }
.mo-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mo-wer { font-weight: 600; font-size: 13.5px; }
.mo-datum { margin-left: auto; font-size: 12px; }
.mo-betreff { font-size: 14.5px; font-weight: 650; margin: 6px 0 2px; }
.mo-vorschau { white-space: pre-wrap; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border);
               border-radius: 10px; padding: 10px 12px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
.mo-aktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.nav-badge { margin-left: auto; background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px;
             font-weight: 700; padding: 1px 7px; }
.gv-mail-aktionen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mailkonto { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2); }
.mailkonto-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mailkonto-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* E-Mails: gebündelt nach Absender */
.mail-werkzeug { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mail-gruppe { padding: 12px 14px; margin-bottom: 10px; }
.mail-gruppe.hat-vorschlag { border-left: 4px solid var(--success); }
.mg-kopf { display: flex; align-items: center; gap: 10px; }
.mg-kopf .mg-wahl, .mail-wahl { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; margin: 0; }
.mg-wer { display: flex; flex-direction: column; min-width: 0; }
.mg-wer strong { font-size: 14.5px; }
.mg-wer .text-muted { font-size: 12.5px; }
.mg-aktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0 6px 27px; }
.mg-liste { margin-left: 27px; border-top: 1px solid var(--border); }
.mg-mail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.mg-mail:last-of-type { border-bottom: none; }
.mg-richtung { color: var(--text-muted); width: 14px; text-align: center; }
.mg-betreff { flex: 1; min-width: 160px; }
.mg-meta { font-size: 12px; white-space: nowrap; }
.mg-mail .mo-vorschau { flex-basis: 100%; }
.mg-alle { margin-top: 4px; }
.rechnung-zeile { padding: 9px 14px; }
.label-chip { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.label-chip button { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 12px; padding: 0 2px; }
.label-chip button:hover { color: var(--danger); }

/* Sprachnotiz */
.sp-rekorder { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 6px; text-align: center; }
.sp-knopf { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--border-strong); background: var(--surface);
            display: grid; place-items: center; cursor: pointer; transition: transform .1s; }
.sp-knopf:active { transform: scale(.95); }
.sp-punkt { width: 34px; height: 34px; border-radius: 50%; background: #ef4444; transition: all .2s; }
.sp-knopf.nimmt-auf { border-color: #ef4444; animation: sp-puls 1.4s infinite; }
.sp-knopf.nimmt-auf .sp-punkt { width: 26px; height: 26px; border-radius: 6px; }
@keyframes sp-puls { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); } 70% { box-shadow: 0 0 0 16px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.sp-zeit { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; }
.sp-oder { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 12px; margin: 14px 0 10px; }
.sp-oder::before, .sp-oder::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.sp-status { font-size: 16px; font-weight: 650; margin: 6px 0 10px; }
.sp-offen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
            border: 1px dashed var(--border-strong); background: var(--surface-2); margin-bottom: 10px; font-size: 13.5px; }
.gv-loeschen { color: var(--text-muted); }
.gv-loeschen:hover { color: var(--danger); }
.task-line { display: flex; align-items: flex-start; gap: 6px; }
.task-line .task-check { flex: 1; }
.task-weg { opacity: .5; }
.task-line:hover .task-weg { opacity: 1; }

/* Diktieren: 🎙 in der Ecke jedes Textfelds */
.diktat-feld { position: relative; display: block; }
.diktat-feld > textarea { padding-right: 38px; }
.diktat-feld.ist-zeile > input { padding-right: 38px; }
.diktat-knopf { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
                border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 13px;
                display: grid; place-items: center; opacity: .55; transition: opacity .15s; padding: 0; z-index: 2; }
.diktat-feld:hover .diktat-knopf, .diktat-feld:focus-within .diktat-knopf, .diktat-knopf.hoert, .diktat-knopf.denkt { opacity: 1; }
.diktat-feld.ist-zeile .diktat-knopf { top: 50%; transform: translateY(-50%); }
.diktat-knopf.hoert { background: #ef4444; border-color: #ef4444; color: #fff; animation: sp-puls 1.4s infinite; }
.diktat-knopf.denkt { background: var(--surface-2); }
@media (hover: none) { .diktat-knopf { opacity: .8; } }
/* KORB-Zeichen oben links – dasselbe wie das App-Symbol */
.logo-mark.logo-bild { background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(16,24,40,.1);
                       object-fit: cover; padding: 0; width: 32px; height: 32px; border-radius: 9px; }