/* ============================================================
   AppFMIClub — View-spezifische Styles
   Komponenten kommen aus design-system.css (einzige Quelle).
   Hier NUR Feinheiten, die eine einzelne View braucht.
   Sektionen pro View, zentral gepflegt.
   ============================================================ */

/* ── Cockpit ────────────────────────────────────────────── */

/* ── Objekte ────────────────────────────────────────────── */

/* ── Anlegen-Wizard ─────────────────────────────────────── */

/* ── Lead-Detail ────────────────────────────────────────── */

/* ── Kalkulator ─────────────────────────────────────────── */

/* ── Kontakte ───────────────────────────────────────────── */

/* ── Telefon-Modus ──────────────────────────────────────── */

/* ── Besichtigung ───────────────────────────────────────── */

/* ── Einstellungen ──────────────────────────────────────── */

/* ── Angebot ────────────────────────────────────────────── */

/* ── Admin ──────────────────────────────────────────────── */


/* ════════ view:cockpit ════════ */
/* Cockpit (views/dashboard.js) — nur was design-system.css nicht abdeckt */
.urgent-card .action-btn svg { width: 12px; height: 12px; }
/* Schnellzugriff (ersetzt die 3-Objekt-Vorschau — Edgar 2026-06-22) */
.dash-quick { display: flex; flex-direction: column; gap: 8px; }
.dash-quick-new { width: 100%; }
.dash-quick-row { display: flex; gap: 8px; }
.dash-quick-row .ghost-btn { flex: 1; }
.dash-quick-all { width: 100%; justify-content: center; }
.dash-quick .ghost-btn svg, .dash-quick-new svg { width: 15px; height: 15px; vertical-align: -2px; }
.dash-quick-all .count { color: var(--text3); margin: 0 2px; }


/* ════════ view:objekte ════════ */
/* views/objekte.js — Objekte-Liste */
.obj-suche-row { margin: 0 0 8px; }
.obj-suche.input-field { width: 100%; padding: 9px 12px; font-size: 14px; }
.obj-filter-row { display: flex; gap: 8px; margin: 0 0 14px; }
.obj-filter-row select.input-field {
  appearance: auto; -webkit-appearance: auto; /* DS setzt appearance:none → nativer Pfeil zurück */
  padding: 8px 10px; font-size: 13px; min-width: 0; flex: 1;
}
.obj-new-btn .ico { width: 14px; height: 14px; }
#leadsList .object-thumb { color: var(--text3); } /* building-Icon (rect+path) komplett muted */
.obj-empty .es-icon { color: var(--text3); }
.obj-note { padding: 12px 2px; }


/* ════════ view:anlegen ════════ */
/* ── lead-from-source-modal (Anlegen-Wizard) ─────────────── */
.wiz-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.wiz-hint { margin-bottom: 16px; }
.wiz-foot { padding: 16px 0 4px; }
.wiz-skip { text-align: center; padding-top: 8px; }
.continue-btn.wiz-done { background: var(--green); color: #fff; }
.continue-btn.wiz-done:hover:not(:disabled) { background: var(--green); opacity: 0.92; }
.wiz-tabs { margin-bottom: 12px; }
.wiz-status { padding: 8px 2px 0; }
.wiz-status.err { color: var(--red); }
.wiz-err { color: var(--red); }
/* choice-card ist <button> → Text-Spalte als Block rendern */
.choice-card .choice-info { display: block; min-width: 0; }
.choice-card .choice-title, .choice-card .choice-sub { display: block; }
/* Datei-Dropzone (Foto/PDF-Tab) */
.wiz-drop { border: 1px dashed var(--border2); border-radius: var(--r-sm); padding: 16px; text-align: center; background: var(--card); transition: var(--transition); }
.wiz-drop.dragover { border-color: var(--gold-dim); background: var(--gold-glow2); }
.wiz-drop-label { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.wiz-drop-ico svg { width: 24px; height: 24px; color: var(--text3); }
.wiz-selected { margin-top: 10px; }
.wiz-img-list { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.wiz-img-tile { position: relative; width: 72px; }
.wiz-img-tile img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--border); }
.wiz-img-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--card2); border: 1px solid var(--border2); color: var(--text2); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.wiz-img-name { font-size: 10px; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kontakt-Hinweis im KI-Confirm-Schritt */
.wiz-kontakt-hint { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; }
.wiz-kontakt-hint svg { width: 14px; height: 14px; flex-shrink: 0; }


/* ════════ view:lead-detail ════════ */
/* ── Lead-Detail (views/lead-detail.js) ───────────────────── */

/* Toolbar: ⋯-Menü */
.ld-menu-wrap { position: relative; }
.ld-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 180px; background: var(--card2); border: 1px solid var(--border2);
  border-radius: var(--r-sm); padding: 4px; display: flex; flex-direction: column;
}
.ld-menu-item {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 10px 12px; border-radius: var(--r-xs);
  font-size: 13px; font-weight: 500; color: var(--text);
}
.ld-menu-item:hover { background: var(--bg2); }
.ld-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.ld-menu-item svg path { stroke: var(--text2); }
.ld-menu-item.danger { color: var(--red); }
.ld-menu-item.danger svg path { stroke: var(--red); }
.ld-menu-sep { height: 1px; background: var(--border); margin: 4px 8px; }

/* Reminder-Glocke mit gesetztem Termin */
.icon-btn.is-set { border-color: var(--gold-border); background: var(--gold-glow2); }
.icon-btn.is-set svg path { stroke: var(--gold); }

/* Hero: Phase-Tag klickbar + Potenzial-Zeile */
button.meta-tag { cursor: pointer; font-family: var(--font-body); }
.lead-hero .pot-row { margin-top: 10px; display: flex; }
.lead-hero .pot-reason { margin-top: 6px; }

/* Action-Grid: Label/Sub in <button> als Block */
.action-card .ac-icon { display: flex; }
.action-card .ac-label, .action-card .ac-sub { display: block; }

/* Preis-Zeile (4 Spalten kompakt) */
/* 2×2 statt 4 gequetschter Spalten — Beträge brechen sonst auf 390px um */
.ld-preise { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
.ld-preis-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; }
.ld-preis-val { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ld-preis-val.pos { color: var(--green); }
.ld-preis-val.neg { color: var(--red); }
.ld-preis-val.offen { color: var(--gold); } /* Lücke noch offen → verhandeln, kein Alarm */
.ld-preis-input {
  width: 100%; background: none; border: none; outline: none;
  font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text);
  border-bottom: 1px dashed var(--border2); border-radius: 0; padding: 0 0 2px;
}
.ld-preis-input:focus { border-bottom-color: var(--gold-dim); }

/* Kontakt: Name-Bereich klickbar (→ Kontakt-Detail) */
.ld-contact-info { cursor: pointer; flex: 1; min-width: 0; }

/* Notiz: Auto-Save-Status */
.ld-save-status { min-height: 16px; margin-top: 4px; }

/* Fold „Alle Daten" */
.ld-dgroup { margin-bottom: 6px; }
.ld-dgroup-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); margin: 12px 0 2px; }
.ld-drow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ld-dgroup .ld-drow:last-child, .ld-dgroup .ld-dblock:last-child { border-bottom: none; }
.ld-drow.is-edit { cursor: pointer; }
.ld-dlabel { font-size: 12px; color: var(--text2); flex-shrink: 0; }
.ld-dval { font-size: 13px; font-weight: 500; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.ld-dblock { padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.ld-dblock-label { font-size: 12px; color: var(--text2); margin-bottom: 2px; }
.ld-dblock-text { font-size: 13px; color: var(--text); white-space: pre-wrap; }
.ld-empty { color: var(--text3); font-size: 12px; }
.ld-drow.is-edit .ld-empty, .ld-dblock .ld-empty { color: var(--gold-dim); }

/* Fold „Fotos" */
.ld-foto-hint { margin: 0 0 8px; }
/* Objektunterlagen (Feedback #8) */
.ld-unterlagen-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ld-unterlage { display: flex; align-items: center; gap: 8px; }
.ld-unterlage-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); font-size: 13px; }
.ld-unterlage-link svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold); }
.ld-unterlage-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-unterlage-del { background: none; border: none; padding: 4px; color: var(--text3); cursor: pointer; flex-shrink: 0; }
.ld-unterlage-del svg { width: 15px; height: 15px; }
.ld-unterlage-add { margin-top: 4px; }
.ld-foto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ld-foto-add { margin-top: 10px; }
.ld-foto-add svg { width: 15px; height: 15px; vertical-align: -2px; }
.ld-foto-wrap { position: relative; }
.ld-foto { display: block; position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--card2); border: 1px solid var(--border); }
.ld-foto img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ld-foto-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ld-foto-ph svg { width: 20px; height: 20px; }
.ld-foto-ph svg path, .ld-foto-ph svg circle { stroke: var(--text3); }
.ld-foto-badge { position: absolute; left: 6px; bottom: 6px; z-index: 2; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(0,0,0,0.55); color: var(--gold); padding: 2px 6px; border-radius: 4px; }
.ld-foto-del { position: absolute; top: 4px; right: 4px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }

/* Phase-Picker: Endzustände-Zeile */
.ld-phase-end { display: flex; gap: 8px; margin-top: 12px; }


/* ════════ view:kalkulator ════════ */
/* views/kalkulator.js — view-spezifisches CSS (Ergänzungen zu design-system.css) */
.kalk-del-btn { padding: 6px 12px; font-size: 11px; }
/* KI-Richtpreis-Schätzung im „Eigene Position"-Sheet (Feedback #3) */
.kalk-ki-btn { width: 100%; margin: 0 0 12px; }
.kalk-ki-btn svg { width: 15px; height: 15px; vertical-align: -2px; }
.kalk-ki-schaetzung { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.kalk-ki-schaetzung[hidden] { display: none; }
.kki-head { font-size: 16px; font-weight: 600; color: var(--gold); }
.kki-gesamt { font-size: 13px; margin-top: 2px; }
.kki-hinweis { margin-top: 6px; line-height: 1.4; }
.kki-disclaimer { margin-top: 4px; }
.kki-apply { margin-top: 8px; color: var(--gold); }
.kalk-objekt-line { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0 0 10px; font-size: 12px; color: var(--text2); cursor: pointer; text-align: left; }
.kalk-objekt-line svg { width: 12px; height: 12px; }
.kalk-objekt-line svg path { stroke: var(--text3); }
.kalk-markt-modus { margin: 0 0 12px; }
.kalk-ver-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.kalk-ver-del { background: none; border: none; padding: 4px; color: var(--text3); cursor: pointer; display: flex; align-items: center; }
.kalk-ver-del svg { width: 15px; height: 15px; }
.kalk-src-check { display: none; flex-shrink: 0; color: var(--green); }
.kalk-src-check svg { width: 14px; height: 14px; }
.source-row.filled .kalk-src-check { display: flex; }
.kalk-fold-sum { margin-left: auto; margin-right: 10px; font-size: 12px; font-weight: 600; color: var(--text); font-family: var(--font-mono); }
.kalk-qm-big { font-family: var(--font-head); font-size: 32px; font-weight: 700; color: var(--gold); letter-spacing: -1px; line-height: 1.15; margin: 2px 0; }
.kalk-wf-info { min-width: 0; }
.kalk-wf-info .tiny { margin-top: 2px; }
.kalk-x-btn { background: none; border: none; padding: 4px; color: var(--text3); cursor: pointer; display: flex; align-items: center; }
.kalk-x-btn svg { width: 14px; height: 14px; }
.kalk-add-row { display: flex; justify-content: center; margin: 10px 0 12px; }
/* Erzielbare Marktmiete im Vermietungs-Abschlag (Edgar 2026-06-11) */
.kalk-miete-input { width: 64px; padding: 3px 6px; margin: 0 3px; border: 1px solid var(--gold-border); border-radius: var(--r-sm); background: var(--card2); color: var(--text); font-size: 13px; }
.kalk-cost-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 12px; color: var(--text2); border-bottom: 1px solid var(--border); }
.kalk-cost-row:last-child { border-bottom: none; }
.kalk-cost-row strong { color: var(--text); font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.kalk-banner .kb-gap { line-height: 1.35; }


/* ════════ view:kontakte ════════ */
/* ── Kontakte (maklerkontakte.js): Liste + Detail-/Edit-/Diktat-Sheets ── */
#typChips { margin-bottom: 16px; }

/* Sheet-Header: langer Name/Titel kürzen */
.kd-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fällig-Hinweis in der Kontakt-Karte */
.kd-fallig { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* Aktionszeile im Detail-Sheet */
.kd-actions { margin: 12px 0; }
.kd-actions .ghost-btn { flex: 1; justify-content: center; }
.kd-actions svg.ico { width: 14px; height: 14px; }

/* Inline-Kontakt-Log */
#kdLogForm { margin-bottom: 16px; }
#kdLogForm .chip-select { margin-bottom: 10px; }

.kd-more { padding-top: 8px; }

/* Status-/Fehlertexte in Sheets */
.mk-status { font-size: 12px; padding: 8px 0; color: var(--text2); }
.mk-status.err { color: var(--red); }
.mk-status.ok { color: var(--green); }

/* Edit-Sheet */
.ke-actions { margin-top: 16px; }
.ke-actions .primary-btn { flex: 1; }
.mk-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); padding: 4px 0; cursor: pointer; }
.mk-check input { accent-color: var(--gold); }

/* Diktat-Sheet */
#dkTabs { margin: 4px 0 12px; }
.mk-mic-btn {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card); border: 1px dashed var(--border2); border-radius: var(--r);
  padding: 20px 16px; cursor: pointer; color: var(--text2); transition: var(--transition);
  font-size: 12px; font-weight: 600;
}
.mk-mic-btn svg.ico { width: 26px; height: 26px; }
.mk-mic-btn.recording { border-color: var(--gold-border); background: var(--gold-glow2); color: var(--gold); }
.mk-mic-btn:disabled { opacity: 0.4; cursor: default; }
.mk-transcript { min-height: 44px; font-size: 13px; color: var(--text2); line-height: 1.5; padding: 10px 2px; }
.dk-result {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--green-glow); border: 1px solid var(--green-border);
  border-radius: var(--r-sm); padding: 12px; margin-top: 10px;
  font-size: 12px; color: var(--text2);
}
.dk-result svg.ico { width: 14px; height: 14px; flex-shrink: 0; color: var(--green); }
#dkSend { margin: 14px 0 6px; }


/* ════════ view:telefon ════════ */
/* ── Telefon-Modus (Vorqual) — tm-* (Alt-Prefix vq- bleibt in style.css bis Phase 3) ── */
.tm-progress-line { margin: 2px 0 6px; }
.tm-progress { margin-bottom: 12px; }
.tm-intro { margin-bottom: 12px; }
.tm-list .tm-q { padding: 12px 0; border-bottom: 1px solid var(--border); }
.tm-list .tm-q:first-child { padding-top: 2px; }
.tm-list .tm-q:last-child { border-bottom: none; padding-bottom: 2px; }
.tm-q-text { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.tm-zweck { display: inline-flex; gap: 2px; flex-shrink: 0; }
.tm-zweck svg { width: 14px; height: 14px; color: var(--text3); }
.tm-q-hint { font-size: 11px; color: var(--text3); margin: 2px 0 0; }
.tm-q-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tm-sub .input-label { margin-bottom: 4px; }
.tm-nav { display: flex; gap: 8px; margin-top: 16px; }
.tm-nav .ghost-btn { padding: 12px 14px; }
.tm-nav svg { width: 14px; height: 14px; }
.tm-grow { flex: 1; padding: 12px 14px; font-size: 14px; }
.tm-capture { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; flex-wrap: wrap; }
.tm-mic-btn svg { width: 14px; height: 14px; }
.tm-mic-btn.is-recording { background: var(--red-glow); color: var(--red); border-color: var(--red-border); }
.tm-mic-status { flex: 1; min-width: 140px; line-height: 1.4; }
.tm-mic-status svg { width: 12px; height: 12px; vertical-align: -2px; }
.tm-mic-help { display: block; margin-top: 2px; }
.tm-transcript { min-height: 160px; resize: vertical; }
.tm-ki-note { margin-top: 8px; }
.tm-ki-note svg { width: 12px; height: 12px; vertical-align: -2px; color: var(--gold); }
.tm-anker { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text2); display: flex; flex-direction: column; gap: 4px; }
.tm-score { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tm-score-val { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--gold); line-height: 1; flex-shrink: 0; }
.tm-score-max { font-size: 13px; color: var(--text3); font-weight: 600; }
.tm-crow { padding: 10px 0; border-bottom: 1px solid var(--border); }
.tm-crow:first-child { padding-top: 0; }
.tm-crow:last-child { border-bottom: none; padding-bottom: 0; }
.tm-crow-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tm-crow-head .input-label { margin-bottom: 4px; }
.tm-crow-old { font-size: 11px; color: var(--text3); text-decoration: line-through; }
.tm-crow-body { display: flex; align-items: stretch; gap: 6px; }
.tm-crow-body .input-field { flex: 1; min-width: 0; padding: 10px 12px; font-weight: 600; }
.tm-cnum { text-align: right; }
.tm-ok, .tm-no { flex-shrink: 0; padding: 0 10px; }
.tm-ok svg, .tm-no svg { width: 14px; height: 14px; }
.tm-crow.is-ok .tm-cinput { border-color: var(--gold-border); }
.tm-crow.is-off .tm-cinput { opacity: 0.45; }
.tm-crow.is-off .tm-crow-head { opacity: 0.55; }


/* ════════ view:besichtigung ════════ */
/* ── View: Besichtigungs-Modus (views/besichtigung-modus.js) ───────────── */
.bm-sub { margin-top: 4px; }
.bm-error { color: var(--red); }

/* Fotos je Raum — kompakte Zeilen mit Mini-Thumbs */
.bm-foto-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.bm-foto-row:last-child { border-bottom: none; }
.bm-foto-label { font-size: 13px; color: var(--text2); flex-shrink: 0; min-width: 108px; }
.bm-foto-thumbs { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; min-width: 0; }
.bm-thumb { width: 30px; height: 30px; border-radius: var(--r-xs); overflow: hidden; border: 1px solid var(--border2); padding: 0; background: var(--bg2); cursor: pointer; flex-shrink: 0; }
.bm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bm-foto-row .icon-btn { margin-left: auto; width: 32px; height: 32px; }
.bm-check-line { margin: 0 0 6px; }
.bm-check-line strong { color: var(--text); font-weight: 600; }

/* Offene Fragen (Accordion) + Fold „Alle Felder": inline-field-Controls ohne Extra-Klasse */
.bm-fragen .inline-field select, .bm-fragen .inline-field input,
.bm-fold-fields .inline-field select, .bm-fold-fields .inline-field input {
  background: none; border: none; outline: none;
  font-size: 14px; font-weight: 600; color: var(--text);
  text-align: right; width: 55%; max-width: 240px;
  border-bottom: 1px dashed var(--border2); padding: 2px 0; border-radius: 0;
}
.bm-fragen .inline-field input:focus, .bm-fragen .inline-field select:focus,
.bm-fold-fields .inline-field input:focus, .bm-fold-fields .inline-field select:focus { border-bottom-color: var(--gold-dim); }
.bm-fragen .inline-field input[type="text"] { width: 60%; max-width: none; }
.bm-fold-fields .inline-field input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); border: none; flex: none; }
.bm-fold-fields { margin-bottom: 12px; }

/* Diktat */
.bm-mic-row { margin-bottom: 10px; }
.bm-mic.recording { background: var(--gold-glow); color: var(--gold); border-color: var(--gold-border2); }
.bm-interim { margin: 0 0 8px; }
.bm-diktat textarea.input-field { background: var(--bg2); }
.bm-cta-hint { text-align: center; margin-top: 8px; }
.bm-retry { margin-top: 12px; }
/* Besichtigungs-Art Vor Ort / Digital (Edgar 2026-06-11) */
.bm-modus { margin: 0 0 12px; }
.bm-modus-hint { margin: 0 2px 14px; }
.bm-skip { display: block; margin: 12px auto 0; }

/* Confirm-Karten (Bestätigen) — Zeilen in EINER Karte */
.bm-cc { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bm-cc:last-child { border-bottom: none; }
.bm-cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bm-cc-label { font-size: 13px; font-weight: 600; color: var(--text); }
.bm-cc-control select, .bm-cc-control input {
  width: 100%; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 14px; color: var(--text); outline: none; transition: var(--transition);
}
.bm-cc-control select:focus, .bm-cc-control input:focus { border-color: var(--gold-dim); }

.bm-offen { margin: 0 0 16px; }
.bm-save { gap: 8px; padding: 2px 2px 12px; cursor: pointer; }
.bm-save input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }


/* ════════ view:einstellungen ════════ */
/* views/einstellungen.js — View-spezifisch (nicht von design-system.css abgedeckt) */
.es2-title { margin: 0 0 16px; }
.es2-hint { margin: 8px 0 0; line-height: 1.4; }
.es2-fin-row { justify-content: space-between; }
.es2-fin-row .ghost-btn svg { width: 14px; height: 14px; }
.es2-chips .chip-option { display: inline-flex; align-items: center; gap: 5px; }
.es2-chips .chip-option svg { width: 13px; height: 13px; }
.es2-save-row { padding-top: 14px; }
.es2-logout-row { padding-top: 12px; }
.es2-logout-row .danger-btn { width: 100%; justify-content: center; }


/* ════════ view:angebot ════════ */
/* ── Angebot (angebot-mail-modal.js) ───────────────────── */
.angebot-sheet .angebot-empf { margin: 0 0 10px; }
.angebot-sheet .angebot-warn { color: var(--red); }
.angebot-kopf { margin-bottom: 12px; }
.angebot-kopf .if-input { width: 150px; }
.angebot-kopf .if-input-email { width: 60%; max-width: 240px; }
.angebot-vk { margin-bottom: 12px; }
.angebot-vk-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.angebot-vk-grund { padding-top: 6px; }
.angebot-vk-grund .muted { display: block; margin-bottom: 2px; }
.angebot-ki-row { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; flex-wrap: wrap; }
.angebot-ki-row .ghost-btn svg { width: 14px; height: 14px; }
.angebot-fin { border-bottom: none; padding: 6px 0 10px; }
.angebot-fin-ok { color: var(--green); display: inline-flex; align-items: center; gap: 4px; }
.angebot-fin-ok svg { width: 14px; height: 14px; }
.angebot-status { color: var(--text2); margin: 0 0 8px; }
.angebot-status.err { color: var(--red); }
.angebot-send { margin-top: 4px; }
.angebot-sekundaer { display: flex; justify-content: center; gap: 20px; margin-top: 6px; }


/* ════════ view:kleinkram ════════ */
/* ── Login ──────────────────────────────────────────────── */
.login-tagline { text-align: center; margin-top: 16px; }
.login-code-hint { margin-bottom: 12px; }
.login-alt-row { margin-top: 12px; }

/* ── Admin (KI-Nutzung) ─────────────────────────────────── */
.admin-sub { margin: -6px 0 16px; }
.admin-kpi-row { gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.admin-kpi-warn .rmi-value { color: var(--red); }
.admin-kpi-foot { margin-top: 10px; }
.admin-usage-head { flex-wrap: wrap; }
.admin-usage-bar { margin: 10px 0 8px; }
.progress-bar.bar-limit { background: var(--red); }
.ghost-btn .ico { width: 14px; height: 14px; }

/* ── Aufwertungs-Tracker ────────────────────────────────── */
.aufw-meta-row { margin: -6px 0 12px; }
.aufw-kpi-row { gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.aufw-chip-row { margin-top: 12px; flex-wrap: wrap; }
.aufw-pos .object-name { white-space: normal; }
.aufw-pos-head { margin-bottom: 4px; }
.aufw-pos.status-fertig { border-color: var(--green-border); }
.aufw-pos.status-laeuft { border-color: var(--gold-border2); }
.aufw-pos select.if-input, .aufw-pos input[type="date"].if-input { width: 150px; }
.aufw-pos-status { font-size: 12px; min-width: 14px; text-align: right; }
.aufw-pos-status.status-saved { color: var(--green); }
.aufw-pos-status.status-dirty, .aufw-pos-status.status-saving { color: var(--text3); }
.aufw-pos-status.status-error { color: var(--red); }
.aufw-pos-diff { padding-top: 10px; }
.aufw-pos-diff strong { color: var(--text); }
.aufw-pos-diff.diff-over strong { color: var(--red); }
.aufw-pos-diff.diff-under strong { color: var(--green); }
.rmi-value.diff-over { color: var(--red); }
.rmi-value.diff-under { color: var(--green); }


/* ════ Migriert aus style.css ════ */
/* Kuratierte Reste der Legacy-style.css (4.873 Zeilen, gelöscht 06/2026).
   Nur Klassen, die im Code noch verwendet werden und weder in
   design-system.css noch oben definiert sind. Auf neue Token umgeschrieben,
   flach/ruhig im Mockup-Stil. Konsumenten: views/verhandeln.js,
   views/telefon-modus.js (.error-msg), lib/ui.js (confirm), lib/keyboard.js. */

/* Legacy-Modal (.modal/.modal-inner) — nur noch #m-wv (verhandeln),
   confirm() in lib/ui.js und #m-help (keyboard). Alle anderen Modals nutzen
   .modal-overlay/.modal-sheet aus dem Design-System. .modal spiegelt
   .modal-overlay 1:1, damit "modal modal-overlay"-Kombis unverändert bleiben. */
.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 560px) { .modal { align-items: center; padding: 20px; } }
.modal-inner {
  width: 100%; max-width: 480px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r) var(--r) 0 0;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
}
@media (min-width: 560px) { .modal-inner { border-radius: var(--r); } }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 2px 0 12px;
}
.modal-head h3 { font-family: var(--font-head); font-size: 16px; font-weight: 800; margin: 0; }

/* Confirm-Dialog (lib/ui.js confirm()) */
.modal-confirm { align-items: center; padding: 16px; }
.modal-confirm-inner {
  max-width: 360px;
  background: var(--card);
  border-radius: var(--r);
  padding: 20px 16px 16px;
}
.modal-confirm-inner p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.confirm-actions { display: flex; flex-direction: column; gap: 8px; }
.confirm-actions > button { width: 100%; justify-content: center; }
@media (min-width: 480px) {
  .confirm-actions { flex-direction: row; }
  .confirm-actions > button { flex: 1; width: auto; }
}

/* Legacy-Buttons: ghost-btn-dark wie .ghost-btn (flach), ghost-btn-light als
   ruhiger Schließen-/Abbrechen-Button. Kombi "ghost-btn-dark back-btn"
   (verhandeln.js) fällt bewusst auf .back-btn aus dem DS zurück —
   konsistent mit allen anderen Zurück-Buttons. */
.ghost-btn-dark:not(.back-btn) {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--text2);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  transition: var(--transition);
}
.ghost-btn-dark:not(.back-btn):hover { border-color: var(--border2); color: var(--text); }
.ghost-btn-light {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border);
  color: var(--text2); border-radius: var(--r-sm);
  min-width: 40px; min-height: 40px; padding: 6px 12px;
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: var(--transition);
}
.ghost-btn-light:hover { border-color: var(--border2); color: var(--text); }

/* Formular-Label (.field) — Markup <label class="field"><span>…</span><input>…
   (verhandeln.js Wiedervorlage-Modal). Optik = .input-label/.input-field aus dem DS. */
.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px 14px;
  font-size: 15px; font-weight: 500; color: var(--text);
  outline: none; transition: var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-dim); }
.field textarea { resize: vertical; min-height: 72px; line-height: 1.4; }

/* Fehler-Hinweis (telefon-modus.js, verhandeln.js) */
.error-msg {
  background: var(--red-glow); border: 1px solid var(--red-border);
  color: var(--red); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 13px; margin-top: 10px;
}

/* Verhandeln-View (views/verhandeln.js) — Sektionen + Hero */
.detail-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px; margin-bottom: 12px;
}
.detail-section h3 {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3);
  margin: 0 0 8px;
}
.detail-section h3 svg { width: 14px; height: 14px; }
.detail-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--text2); font-size: 12px; flex-shrink: 0; }
.detail-val { font-weight: 600; color: var(--text); text-align: right; overflow-wrap: anywhere; }

.verh-hero {
  background: var(--gold-glow2); border: 1px solid var(--gold-border2);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px;
}
.verh-hero-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.verh-hero-label svg { width: 14px; height: 14px; }
.verh-title { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text); margin: 6px 0 2px; }
.verh-angebot { font-size: 13px; color: var(--text2); }
.verh-angebot strong { color: var(--text); }
.verh-grund { padding: 8px 0 2px; }
.verh-grund .detail-label { display: block; margin-bottom: 2px; }
.verh-grund-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; color: var(--text); }
.verh-ap-name { font-size: 14px; font-weight: 700; color: var(--text); }
.verh-ap-hist { margin-top: 4px; }
.verh-ki .knack-block, .verh-aktion .ghost-btn-dark { margin-top: 4px; }
.knack-block { margin-top: 4px; }

/* Keyboard-Hilfe (lib/keyboard.js) */
.help-modal-inner { max-width: 480px; }
.kb-table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
.kb-table td { padding: 7px 8px 7px 0; font-size: 13px; color: var(--text2); border-bottom: 1px solid var(--border); }
.kb-table tr:last-child td { border-bottom: none; }
.kb-table td:first-child { width: 84px; white-space: nowrap; }
.kb-table kbd {
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--r-xs); padding: 2px 6px;
}

/* ════════ Fix-Runde 1 ════════ */
/* Lead-Detail: Icon-Sizing — Fix „riesiges Ketten-Icon" (.text-btn hatte kein SVG-Sizing) */
.text-btn svg { width: 14px; height: 14px; vertical-align: -3px; }
.primary-btn svg, .danger-btn svg { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }

/* Telefon-Modus: prominenter Diktat-Einstieg unter der Fragen-Karte */
.tm-diktat-einstieg { margin-top: 12px; }
.tm-diktat-einstieg .tm-diktat-cta { width: 100%; justify-content: center; padding: 14px 16px; font-size: 1.05rem; }

/* Einstellungen · Konto-Stammdaten: Text-Inputs breiter als 120px-Zahlfelder */
.es2-konto .if-input { width: 60%; max-width: 240px; }

/* ════════ Tranche 4 (2026-06-11) ════════ */
/* Verhandeln: Schmerzgrenze schnell erfassen — Input rechtsbündig in der detail-row,
   Quick-Button „Mein Angebot übernehmen" darunter rechts */
/* Schmerzgrenze: eigener Block, Feld volle Breite — die alte Inline-Zeile lief am Handy
   aus dem Screen (Edgar 2026-06-12) */
.verh-sg-block { margin: 14px 0 4px; }
.verh-sg-input {
  width: 100%; box-sizing: border-box; margin-top: 4px;
  background: var(--card2); border: 1px solid var(--border2); border-radius: 10px;
  padding: 12px 14px; font-family: var(--font-head); font-size: 17px; font-weight: 700;
  color: var(--text); outline: none;
}
.verh-sg-input:focus { border-color: var(--gold); }
.verh-ap-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.verh-ap-actions a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* Angebot-Modal: 1-Klick-Bestätigung nach „Im Mail-Client öffnen" */
.angebot-mailto-confirm { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }


/* Einstellungen: Marktquellen-Slots (Name + Link nebeneinander, mobil untereinander lesbar) */
.es2-mq-slot { display: flex; gap: 8px; margin-bottom: 8px; }
.es2-mq-slot input {
  background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 10px; outline: none; box-sizing: border-box;
}
.es2-mq-slot input:focus { border-color: var(--gold); }
.es2-mq-slot .es2-mq-name { flex: 0 0 34%; min-width: 0; }
.es2-mq-slot .es2-mq-url { flex: 1; min-width: 0; font-size: 12px; }
.es2-mq-slot .es2-mq-gewicht { flex: 0 0 46px; min-width: 0; text-align: center; font-size: 13px; padding: 8px 4px; }
.es2-save-row { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

/* Verhandeln: Nachfass-Ausgänge (Eingekauft / Verloren) nebeneinander + Gesprächspunkt-Hinweis */
.verh-nf-ausgang { display: flex; gap: 10px; margin-top: 10px; }
.verh-nf-ausgang > button { flex: 1; justify-content: center; }
.verh-aa-hint { color: var(--gold); margin: 0 0 10px; }

/* Potenzial v2 (Deal-Fit): Differenz-/Fit-Chip in der Objektliste + Farb-Varianten
   für Hero-Chip/Dot im Lead-Detail. green = passt, gold = nah/Spielraum, gray = Info/offen. */
.pot-mini {
  flex-shrink: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: color-mix(in srgb, var(--text2) 12%, transparent); color: var(--text2);
}
.pot-mini.green { background: color-mix(in srgb, #3da35d 18%, transparent); color: #2e7d48; }
.pot-mini.gold  { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.light .pot-mini.gold { color: #8a7314; }
.light .pot-mini.green { color: #2e7d48; }
.pot-chip.green, .pot-dot.green { --pc: #3da35d; }
.pot-chip.gold,  .pot-dot.gold  { --pc: var(--gold); }
.pot-chip.gray,  .pot-dot.gray  { --pc: var(--text2); }
.pot-dot.green { background: #3da35d; }
.pot-dot.gold  { background: var(--gold); }
.pot-dot.gray  { background: var(--text2); }
.pot-chip.green { border-color: color-mix(in srgb, #3da35d 50%, transparent); }
.pot-chip.gold  { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }

/* Verlauf/Historie: aufklappbare Einträge (volle Notiz, Dauer, Querlinks) */
.tl-body { min-width: 0; flex: 1; }
.tl-details summary { cursor: pointer; list-style: none; }
.tl-details summary::-webkit-details-marker { display: none; }
.tl-details summary .tl-text::after { content: ' ▸'; color: var(--text2); font-size: 11px; }
.tl-details[open] summary .tl-text::after { content: ' ▾'; }
.tl-extra { margin: 6px 0 4px; display: grid; gap: 4px; justify-items: start; }
.tl-full { font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--text); }

/* Kontakt loggen: Schnell-Reminder (Quick-Chips + Datum) */
.kd-next-date { margin-top: 8px; max-width: 180px; }

/* Objektliste: Verkäufer-Signal-Zeile — Rohdaten (Zeit/Konkurrenz/Verkaufsgrund), kein Score.
   'warm' (sofort / konkrete Konkurrenz) hebt nur die Sättigung an, urteilt nicht. */
.obj-signale { margin-top: 3px; font-size: 11px; color: var(--text2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.obj-signale .sig-tag { white-space: nowrap; }
.obj-signale .sig-tag.warm { color: var(--gold); font-weight: 600; }
.light .obj-signale .sig-tag.warm { color: #8a7314; }
.obj-signale .sig-grund { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.obj-signale .sig-sep { color: var(--border2); }

/* Drei-Fakten: Signal-Farben (Farb-Gesetz: Gold = Zeit, Rot = Mitbieter konkret) */
.obj-signale .f-zeit { color: var(--gold); font-weight: 600; }
.obj-signale .f-konk { color: #c4574e; font-weight: 600; }
.light .obj-signale .f-konk { color: #b04a42; }

/* Drei-Fakten-Filter: Button + Bottom-Sheet (Gelegenheits-Werkzeug, kein Dauer-Chrome) */
.obj-fakten-btn { white-space: nowrap; }
.obj-fakten-btn.hat-filter { border-color: var(--gold); color: var(--gold); }
.obj-fakten-btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.ff-aktiv { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ff-aktiv[hidden] { display: none; }
.ff-tag { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 13px; border: 1px solid var(--border2); background: var(--card); color: var(--text2); cursor: pointer; font-family: inherit; }
.ff-tag.geld { border-color: #3da35d; color: #2e7d48; }
.ff-tag.zeit { border-color: var(--gold); color: var(--gold); }
.ff-tag.konk { border-color: #c4574e; color: #b04a42; }
.ffs-gruppe { margin-bottom: 14px; }
.ffs-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text2); margin-bottom: 7px; }
.ffs-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ffs-zaehler { margin: 4px 0 10px; }
.ffs-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fchip { font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 16px; border: 1px solid var(--border2); background: var(--card); color: var(--text2); cursor: pointer; font-family: inherit; white-space: nowrap; }
.fchip.geld.on { border-color: #3da35d; color: #2e7d48; background: color-mix(in srgb, #3da35d 10%, transparent); }
.fchip.zeit.on { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.fchip.konk.on { border-color: #c4574e; color: #b04a42; background: color-mix(in srgb, #c4574e 10%, transparent); }

/* Cockpit: Anlass-Liste (Drei-Fakten v4/v5) — ein Muster, rot = überfällig, gold = heute */
.anlass-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.anlass { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.anlass:last-of-type { border-bottom: none; }
.a-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text2); }
.a-dot.ueberfaellig { background: #c4574e; }
.a-dot.heute { background: var(--gold); }
.a-body { flex: 1; min-width: 0; }
.a-satz { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); }
.a-satz.ueberfaellig { color: #c4574e; }
.light .a-satz.ueberfaellig { color: #b04a42; }
.a-satz.heute { color: var(--gold); }
.a-objekt { font-size: 14.5px; font-weight: 700; margin-top: 2px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-notiz { font-size: 12px; color: var(--text2); font-style: italic; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-pfeil { color: var(--text2); font-size: 16px; flex-shrink: 0; }
.anlass-mehr { text-align: center; padding: 11px; font-size: 12px; color: var(--text2); cursor: pointer; border-top: 1px solid var(--border); }

/* Cockpit: ⏳-Sammelzeile Verkaufsfenster (Status, kein To-do) */
.fenster-zeile { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: color-mix(in srgb, var(--gold) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 14px; padding: 11px 14px; font-size: 12.5px; cursor: pointer; }
.fenster-zeile .fz-text { flex: 1; }
.fenster-zeile b { color: var(--gold); }
.fenster-zeile .a-pfeil { color: var(--gold); }

/* Objekt geöffnet: Drei-Fakten-Grid im Hero (Mockup v3) */
.fakten-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.fzelle { background: var(--bg2, var(--card)); border: 1px solid var(--border); border-radius: 13px; padding: 10px 11px; min-width: 0; }
.fzelle .flab { font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text2); }
.fzelle .fwert { font-size: 14.5px; font-weight: 700; margin-top: 3px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fzelle .fsub { font-size: 10.5px; color: var(--text2); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.fzelle.geld .fwert { color: #3da35d; }
.light .fzelle.geld .fwert { color: #2e7d48; }
.fzelle.zeit .fwert { color: var(--gold); }
.fzelle.konk .fwert { color: #c4574e; }
.light .fzelle.konk .fwert { color: #b04a42; }
.fzelle.leer .fwert { color: var(--text2); font-weight: 600; }
.grund-zeile { margin-top: 8px; background: var(--bg2, var(--card)); border: 1px solid var(--border); border-radius: 13px; padding: 10px 11px; font-size: 12.5px; }
.grund-zeile .flab { font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text2); display: block; margin-bottom: 3px; }
.grund-zeile .wortlaut { color: var(--text2); font-style: italic; }

/* Verhandeln: Drei-Fakten-Kopfzeile + Verkaufszeitpunkt-Chips im Nachfass-Modal */
.verh-fakten-kopf { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; padding: 8px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; color: var(--text2); }
.verh-fakten-kopf .f-zeit { color: var(--gold); font-weight: 600; }
.verh-fakten-kopf .f-konk { color: #c4574e; font-weight: 600; }
.light .verh-fakten-kopf .f-konk { color: #b04a42; }
.verh-nf-dring { flex-wrap: wrap; }

/* ════════ Design-Politur (2026-06-11, Edgar-bestätigt) ════════ */
/* Touch-Feedback: die App antwortet auf jeden Tipp (ruhige Präzision) */
.object-row, .anlass, .urgent-card, .pipeline-chip, .primary-btn, .ghost-btn, .continue-btn,
.chip-option, .fchip, .ff-tag, .action-btn, .choice-card, .toggle-row {
  transition: transform .15s ease;
}
.object-row:active, .anlass:active, .urgent-card:active, .pipeline-chip:active,
.primary-btn:active, .ghost-btn:active, .continue-btn:active, .chip-option:active,
.fchip:active, .ff-tag:active, .action-btn:active, .choice-card:active { transform: scale(.975); }

/* Theme-Morph: beim Hell/Dunkel-Wechsel 450ms weich (Klasse wird kurz gesetzt) */
html.theme-morph, html.theme-morph body,
html.theme-morph .card, html.theme-morph .object-row, html.theme-morph .anlass-card,
html.theme-morph .modal-sheet, html.theme-morph .input-field, html.theme-morph .status-chip {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease !important;
}

/* Zahlen-Puls (countUp) */
.zahl-puls { color: var(--gold) !important; transition: color .25s ease; }

/* Gold-Funken (feiern) */
.gold-funke {
  position: fixed; z-index: 9999; border-radius: 50%; background: var(--gold);
  pointer-events: none; animation: gold-funkeln 1.15s cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes gold-funkeln {
  0% { opacity: 0; transform: translate(0,0) scale(.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

/* KI-Schritte (ersetzt Warte-Zitate): Denk-Orb + abhakende Checkliste */
.ki-denkt { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.ki-orb { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 4px;
  animation: orb-puls 1.5s ease-in-out infinite; }
@keyframes orb-puls { 0%,100% { transform: scale(.8); opacity: .55; } 50% { transform: scale(1.15); opacity: 1; } }
.ki-schritte { display: grid; gap: 5px; }
.ki-schritt { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 7px; opacity: .45; transition: opacity .3s, color .3s; }
.ki-schritt.laeuft { opacity: 1; }
.ki-schritt.fertig { opacity: 1; color: var(--text); }
.ks-mark { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--border2); flex-shrink: 0; position: relative; transition: border-color .25s, background .25s; }
.ki-schritt.laeuft .ks-mark { border-color: var(--gold); animation: orb-puls 1.2s ease-in-out infinite; }
.ki-schritt.fertig .ks-mark { border-color: var(--gold); background: var(--gold); }
.ki-schritt.fertig .ks-mark::after { content: ''; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }

/* Skeleton-Loading */
.skel { position: relative; overflow: hidden; background: color-mix(in srgb, var(--text2) 14%, transparent); border-radius: 8px; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent);
  animation: skel-shimmer 1.4s infinite; }
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
.skel-row { display: flex; gap: 12px; align-items: center; padding: 9px 0; }
.skel-thumb { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.skel-l1 { height: 13px; width: 62%; margin-bottom: 7px; }
.skel-l2 { height: 10px; width: 38%; }

/* Filter-/Listen-Umblenden statt hartem Wechsel */
.fade-swap { animation: fade-swap .22s ease; }
@keyframes fade-swap { from { opacity: .25; } to { opacity: 1; } }

/* Empty-States: Icon ploppt, Syne-Titel */
.empty-state .es-icon svg { animation: es-pop .5s .12s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes es-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* OTP-Code-Boxen (Login) */
.otp-row { display: flex; gap: 8px; justify-content: center; }
.otp-row input { width: 44px; height: 54px; text-align: center; font-family: var(--font-mono, monospace); font-size: 22px;
  color: var(--text); background: var(--card2, var(--card)); border: 1.5px solid var(--border2); border-radius: 12px; outline: none;
  transition: border-color .2s, transform .15s; }
.otp-row input:focus { border-color: var(--gold); transform: translateY(-2px); }
.otp-row.shake { animation: otp-shake .4s; }
@keyframes otp-shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

/* Pull-to-Refresh */
.ptr-spinner { display: flex; justify-content: center; align-items: center; height: 0; overflow: hidden; transition: height .2s ease; }
.ptr-spinner .ki-orb { margin: 0; }

/* Tab-Swipe: View gleitet beim Wechsel */
.view-slide-links { animation: view-links .26s cubic-bezier(.2,.7,.2,1); }
.view-slide-rechts { animation: view-rechts .26s cubic-bezier(.2,.7,.2,1); }
@keyframes view-links { from { opacity: .4; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes view-rechts { from { opacity: .4; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* Objekt-Zeile: Chips unten (Status + Differenz) — Text nutzt die volle Breite */
.obj-chips { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* Zeilen-Swipe in der Objektliste */
.swipe-wrap { position: relative; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 6px; }
.swipe-aktion { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 20px; color: #fff; font-weight: 700; font-size: 13px;
  background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--gold) 88%, #7a5c10)); border-radius: var(--r-sm); cursor: pointer; }
.swipe-wrap .object-row { position: relative; margin: 0; touch-action: pan-y; }

/* ════════ Rechts-Seiten (Datenschutz / Impressum) ════════ */
.login-legal { text-align: center; margin-top: 14px; }
.login-legal a, .legal-page a, .es2-konto a { color: var(--text2); text-decoration: underline; }
.legal-page { max-width: 720px; margin: 0 auto; padding: 4px 4px 48px; line-height: 1.55; }
.legal-page h1 { font-size: 22px; margin: 8px 0 2px; }
.legal-page h2 { font-size: 15px; margin: 22px 0 6px; color: var(--text); }
.legal-page p, .legal-page li { font-size: 14px; color: var(--text2); }
.legal-page ul { margin: 6px 0; padding-left: 20px; }
.legal-page li { margin-bottom: 4px; }
.legal-sub { color: var(--text3); font-size: 12px; margin-bottom: 4px; }
.legal-platzhalter { margin-top: 24px; padding: 10px 12px; border: 1px solid var(--gold);
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--text); font-size: 13px; }
.legal-foot { margin-top: 24px; }