/* Tab: leads — scoped via html.twenty-ui[data-crm-page="leads"] (Liste, Detail, Neu). Nur Variablen, kein Hardcode für Dark-Mode. */
:root{--crm-hit:44px}

/* ---------- Kopf ---------- */
html.twenty-ui[data-crm-page=leads] .hk-pg-header{margin-bottom:0!important;padding-bottom:4px!important}
html.twenty-ui[data-crm-page=leads] .hk-pg-header p{margin-top:4px!important}

/* ---------- Liste: Werkzeugleiste ---------- */
html.twenty-ui[data-crm-page=leads] .contact-list-view>.row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin:0 0 16px}
html.twenty-ui[data-crm-page=leads] .contact-list-view>.row>*{width:auto;max-width:none;padding:0;margin:0}
html.twenty-ui[data-crm-page=leads] .contact-list-view>.row>.col-xl-4{order:-1;flex:0 0 280px}
html.twenty-ui[data-crm-page=leads] .contact-list-view>.row>.col-xl-8{flex:1 1 0;min-width:0}
html.twenty-ui[data-crm-page=leads] .contact-toolbar-left{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-select{font-size:13px;min-height:38px}
/* Gleiche Layoutbasis auf beiden Seiten, auch wenn Filter umbrechen.
   Die geerbten 45px dürfen die 38px-Felder nicht unterschiedlich zentrieren. */
html.twenty-ui[data-crm-page=leads] .contact-toolbar-left,html.twenty-ui[data-crm-page=leads] .contact-toolbar-right{min-height:0}
html.twenty-ui[data-crm-page=leads] .contact-toolbar-right{display:flex;align-items:center;width:100%;margin:0}
html.twenty-ui[data-crm-page=leads] .dataTables_filter,html.twenty-ui[data-crm-page=leads] .dataTables_filter label{display:block;width:100%;margin:0}
html.twenty-ui[data-crm-page=leads] .dataTables_filter input{width:100%;min-height:38px}
html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-switch{margin:0 0 0 4px;padding-left:0;display:inline-flex;align-items:center;gap:8px;min-height:38px}
html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-switch .form-check-input{margin:0;float:none;flex:none}
html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-switch label{font-size:13px;cursor:pointer}

/* ---------- Liste: Desktop-Tabelle (alle 8 Spalten im ersten Viewport) ---------- */
html.twenty-ui[data-crm-page=leads] .contact-list-view .table-responsive{overflow-y:hidden}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table{table-layout:fixed;width:100%}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th,
html.twenty-ui[data-crm-page=leads] .contact-list-view .table td{padding:10px 12px;font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th{position:relative;height:var(--crm-hit);padding-top:0;padding-bottom:0;font-size:12px}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th:nth-child(2){width:130px}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th:nth-child(3){width:130px}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th:nth-child(4){width:150px}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th:nth-child(5){width:170px}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th:nth-child(6){width:84px}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th:nth-child(7){width:88px}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table th:nth-child(8){width:112px}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table td:nth-child(8){white-space:normal}
/* Sortierknopf: Trefferfläche = ganze Kopfzelle (44 px) */
html.twenty-ui[data-crm-page=leads] .sortierknopf,html.twenty-ui[data-crm-page=kunden] .sortierknopf{position:static}
html.twenty-ui[data-crm-page=leads] .sortierknopf::after{content:'';position:absolute;inset:0}
html.twenty-ui[data-crm-page=leads] .table th:has(.sortierknopf:focus-visible){outline:2px solid var(--crm-accent);outline-offset:-2px}
html.twenty-ui[data-crm-page=leads] .table th:has(.sortierknopf):hover{color:var(--crm-accent)}
/* Namen: bis zu 2 Zeilen statt hartem Abschneiden */
html.twenty-ui[data-crm-page=leads] .contact-list-view .table td:first-child .text-truncate{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table td:nth-child(5) .fs-7{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.twenty-ui[data-crm-page=leads] .contact-list-view .table td:nth-child(5) .text-muted.fs-7:not(div){margin-left:4px}
@media(max-width:1399px){
  html.twenty-ui[data-crm-page=leads] .contact-list-view .table :is(th,td):nth-child(8){display:none}
}
@media(max-width:1023px){
  html.twenty-ui[data-crm-page=leads] .contact-list-view .table :is(th,td):nth-child(n+6){display:none}
}

/* ---------- Liste: Mobil-Kartenliste ---------- */
html.twenty-ui[data-crm-page=leads] .lead-mobil-liste{margin:0;border-radius:var(--crm-radius);overflow:hidden}
html.twenty-ui[data-crm-page=leads] .lead-mobil-zeile{padding:14px 16px;min-height:var(--crm-hit);border-color:var(--crm-line)}
html.twenty-ui[data-crm-page=leads] .lead-mobil-zeile:active{background:var(--bs-tertiary-bg,#f6f7f8)}
html.twenty-ui[data-crm-page=leads] .lead-mobil-zeile .text-truncate{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;line-height:1.3;font-size:16px}
html.twenty-ui[data-crm-page=leads] .lead-mobil-zeile .mt-1{margin-top:6px!important;line-height:1.4}
html.twenty-ui[data-crm-page=leads] .lead-mobil-zeile .mt-1.crm-leer{display:none}
html.twenty-ui[data-crm-page=leads] .lead-mobil-zeile a[href^=tel]{display:inline-flex;align-items:center;min-height:40px;margin-block:-6px}

@media(max-width:767.98px){
  html.twenty-ui[data-crm-page=leads] .hk-pg-header>.d-flex>.d-flex{flex-wrap:nowrap!important;align-items:center;gap:12px!important}
  html.twenty-ui[data-crm-page=leads] .hk-pg-header .pg-header-action-wrap{width:auto!important;flex:none}
  html.twenty-ui[data-crm-page=leads] .hk-pg-header .pg-header-action-wrap .btn{min-height:var(--crm-hit);padding:0 16px}
  html.twenty-ui[data-crm-page=leads] .hk-pg-header .pg-title{font-size:24px}
  html.twenty-ui[data-crm-page=leads] .hk-pg-header .mb-lg-0{margin-bottom:0!important}

  /* Suche voll, Filter als horizontal scrollbare Reihe */
  html.twenty-ui[data-crm-page=leads] .contact-list-view>.row{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:12px}
  html.twenty-ui[data-crm-page=leads] .contact-list-view>.row>*{width:100%;flex:none!important}
  html.twenty-ui[data-crm-page=leads] .dataTables_filter input{min-height:var(--crm-hit);font-size:16px}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left{flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -16px;padding:2px 16px;scroll-padding:0 16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left::-webkit-scrollbar{display:none}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left>*{flex:none}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-select{min-height:var(--crm-hit);font-size:15px;padding-right:32px}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-switch{min-height:var(--crm-hit);padding:0 14px;border:1px solid var(--crm-line);border-radius:8px;margin:0 16px 0 0;background:var(--crm-surface)}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-switch label{font-size:14px}
}

/* ---------- Detail ---------- */
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header .breadcrumb{flex-wrap:nowrap}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.text-center>.avatar{font-size:16px;overflow:hidden}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.text-center>.avatar .initial-wrap{font-size:inherit;line-height:1}
/* Kopf von „Nächster Schritt“: Titel + Aktion in einer Zeile, Hinweis darunter */
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info .card-header-action{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info .card-header-action .card-action-wrap{margin:0}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info .card-header-action .mail-feedback-hint{grid-column:1/-1;margin:0;font-size:12px;line-height:1.4;color:var(--crm-quiet)}
html.twenty-ui[data-crm-page=leads] .lead-detail .stufenleiste{scroll-snap-type:x proximity;scrollbar-width:none}
html.twenty-ui[data-crm-page=leads] .lead-detail .stufenleiste::-webkit-scrollbar{display:none}
html.twenty-ui[data-crm-page=leads] .lead-detail .stufe{scroll-snap-align:center}

@media(max-width:800px){
  /* Wichtigstes zuerst: Kopf → Kontakt → nächster Schritt → Status → Rest */
  html.twenty-ui[data-crm-page=leads] .lead-detail .d-flex.flex-xxl-nowrap{gap:12px;padding:12px 0 24px}
  html.twenty-ui[data-crm-page=leads] .lead-detail :is(.contact-info,.contact-more-info){display:contents}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info>*{margin:0!important;grid-column:1;order:6;min-width:0}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.text-center,
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.card{grid-column:1;order:5;margin:0;min-width:0;border:1px solid var(--crm-line);border-radius:12px;background:var(--crm-surface);overflow:hidden}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.text-center{padding:16px;background:var(--bs-tertiary-bg,#f6f8fa)}
  html.twenty-ui[data-crm-page=leads] .lead-detail [data-crm-block=kopf]{order:1!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail [data-crm-block=kontakt]{order:2!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail [data-crm-block=schritt]{order:3!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail [data-crm-block=status]{order:4!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail [data-crm-block=info]{order:5!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail [data-crm-block=verlauf]{order:7!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail [data-crm-block=akte]{order:8!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info .card-header{padding:14px 16px 6px}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info .card-body{padding:6px 16px 14px}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info .card-header{padding:14px 16px}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info .card-body{padding:16px}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info .card-header-action .mail-feedback-hint{display:none}
  html.twenty-ui[data-crm-page=leads] .lead-detail .vertriebsakte>div:first-child{margin:8px 0 12px!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header .contact-options-wrap .btn{min-height:var(--crm-hit)}
}
@media(max-width:600px){
  html.twenty-ui[data-crm-page=leads] .lead-detail .vertriebsakte .row.align-items-end{grid-template-columns:minmax(0,1fr)}
  html.twenty-ui[data-crm-page=leads] .lead-detail .vertriebsakte .row.align-items-end>*{grid-column:1!important;grid-row:auto!important;justify-self:stretch!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail .vertriebsakte .row.align-items-end .btn{width:100%}
  html.twenty-ui[data-crm-page=leads] .lead-detail .stufe{min-height:var(--crm-hit)}
  html.twenty-ui[data-crm-page=leads] .lead-detail .abschluss-knopf{min-height:var(--crm-hit);padding:6px 16px}
  html.twenty-ui[data-crm-page=leads] .lead-detail .abschluss{flex-wrap:wrap;gap:8px}
  html.twenty-ui[data-crm-page=leads] .lead-detail .activity-wrap [data-mail-stream-filters] .btn{min-height:var(--crm-hit)}
}

/* ---------- Neu: sauberes einspaltiges Formular mobil ---------- */
@media(max-width:767.98px){
  html.twenty-ui[data-crm-page=leads] main form .row>*{width:100%;flex:0 0 100%;max-width:100%}
  html.twenty-ui[data-crm-page=leads] main form .form-label{font-size:13px;margin-bottom:6px}
  html.twenty-ui[data-crm-page=leads] main form :is(.form-control,.form-select){min-height:var(--crm-hit);font-size:16px}
  html.twenty-ui[data-crm-page=leads] main form textarea.form-control{min-height:96px}
  html.twenty-ui[data-crm-page=leads] main form .form-text{font-size:12px;line-height:1.45}
  html.twenty-ui[data-crm-page=leads] main form .title-wth-divider{margin-top:20px!important}
  html.twenty-ui[data-crm-page=leads] main form>div:last-child .btn,
  html.twenty-ui[data-crm-page=leads] main form .btn[type=submit]{min-height:var(--crm-hit)}
  html.twenty-ui[data-crm-page=leads] main .card-body{padding:16px}
}

/* Detail-Kopf: bündig, ohne Einrückung */
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header{padding-left:0!important;padding-right:0!important}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header>.d-flex{flex:1 1 auto;min-width:0;padding:0!important;margin:0!important}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header .breadcrumb{padding:0!important;margin:0!important;min-width:0}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header .breadcrumb-item.active{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Abnahme 30.10.2026 (F4-01): auch das nav um die Brotkrumen darf schrumpfen, sonst kürzt die Auslassung nicht und lange Namen sprengen die Seite. */
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header nav{min-width:0;max-width:100%}
@media(max-width:600px){
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header .contact-options-wrap{flex:none}
  html.twenty-ui[data-crm-page=leads] .lead-detail .stufenleiste{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto}
  html.twenty-ui[data-crm-page=leads] .lead-detail .stufe{flex:0 0 auto;min-width:112px}
}

/* ---------- Flach (29.10.2026): eine Fläche, keine Karte in Karte, Trennung per Linie ---------- */
/* Liste: Tabellen-Karte ist das einzige Objekt, Hintergrund bleibt Seitenfläche */
html.twenty-ui[data-crm-page=leads] .contact-list-view .card{background:var(--crm-surface);border:1px solid var(--crm-line);box-shadow:none}
html.twenty-ui[data-crm-page=leads] .contact-list-view .card .card{border:0;box-shadow:none}
/* Detail: Sektionen nicht als Kästen, sondern durch Linien getrennt */
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.card,
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info>.card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.card{border-bottom:1px solid var(--crm-line)}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info>.card{border:1px solid var(--crm-line);border-radius:var(--crm-radius);background:var(--crm-surface);margin-bottom:12px}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-more-info>.card>.card-header{background:transparent;border-bottom:1px solid var(--crm-line)}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.text-center{background:transparent;border-bottom:1px solid var(--crm-line);border-radius:0}
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.card>.card-header,
html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info>.card>.card-body{background:transparent}
/* Mobil: Filter umbrechen statt horizontal abschneiden */
@media(max-width:767.98px){
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left{flex-wrap:wrap!important;overflow:visible;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left>*{flex:1 1 100%;min-width:0;max-width:100%}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-select{width:100%}
  html.twenty-ui[data-crm-page=leads] .contact-toolbar-left .form-switch{flex:1 1 100%;margin:0;padding:0 2px;border:0;background:transparent}
}

/* Abnahme 29.10. (Pascal): Status-Chips tragen die Phasenfarbe wie die Auswahl in der Pipeline
   (--marke-farbe = --status-*, vom Bündel gesetzt): Hintergrund ~12 %, Rand ~32 %, Text in Normalfarbe (Kontrast), Schrift bleibt 12 px. */
html.twenty-ui[data-crm-page=leads] .statusmarke{
  background-color:color-mix(in srgb,var(--marke-farbe,var(--crm-quiet)) 12%,var(--crm-surface,var(--bs-body-bg)));
  border:1px solid color-mix(in srgb,var(--marke-farbe,var(--crm-quiet)) 32%,var(--crm-line));
  color:color-mix(in srgb,var(--bs-emphasis-color) 82%,var(--bs-body-bg))}

/* Abnahme 29.10.: Dialog „E-Mail fehlt“ (Stufenwechsel in der Akte): Knopftexte nicht mitten im Wort umbrechen */
html.twenty-ui[data-crm-page=leads] dialog.crm-dialog .d-flex.justify-content-end{flex-wrap:wrap}
html.twenty-ui[data-crm-page=leads] dialog.crm-dialog .btn{white-space:nowrap;min-height:40px}

/* Ein Einstieg genügt: die globale +Lead-Aktion bleibt auch mobil erhalten. */
html[data-crm-page="leads"]:has(.hk-navbar a[href="/leads/neu"]) main .hk-pg-header a[href="/leads/neu"] { display:none!important; }

/* Die Listen-Kopfzeile enthält nur noch die redundante Anzahl. */
html.twenty-ui[data-crm-page="leads"] main:has(.contact-list-view) .hk-pg-header { display:none!important; }

/* Abnahme 30.10.2026 (F4-11): Touch-Ziele am Handy ≥ 40 px. Namen wachsen per transparentem Rand mit negativem
   Außenabstand (Layout bleibt gleich, line-clamp schneidet weiterhin sauber am Innenrand ab). */
@media(max-width:767.98px){
  html.twenty-ui[data-crm-page=leads] .lead-mobil-zeile a.text-truncate{border-block:10px solid transparent;margin-block:-10px}
  html.twenty-ui[data-crm-page=leads] main a.d-inline-flex.link-secondary{min-height:40px}
}
@media(max-width:800px){
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header .breadcrumb{align-items:center}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-header .breadcrumb-item>a{display:inline-flex;align-items:center;min-height:40px}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info .cp-info>li:has(a[href]){align-items:center;padding-top:0!important;padding-bottom:0!important}
  html.twenty-ui[data-crm-page=leads] .lead-detail .contact-info .cp-info a[href]{display:inline-flex;align-items:center;min-height:40px;max-width:100%}
  html.twenty-ui[data-crm-page=leads] .lead-detail .crm-empty-toggle{min-height:40px}
}

/* Abnahme 30.10.2026, Fix-Runde 2 (N2-29): Der Name in der Handy-Liste trägt .d-block (Bootstrap display:block!important).
   Darum griff die 2-Zeilen-Kürzung oben (Zeile 59) nicht. Hier höher gewichtet und mit !important. Der Rand für die 40-px-Trefferfläche bleibt. */
html.twenty-ui[data-crm-page=leads] .lead-mobil-zeile a.text-truncate.d-block{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal!important;overflow:hidden!important;text-overflow:clip}

/* Abnahme 30.10.2026, Fix-Runde 2 (F1-11): Termin-Panel beim Stufenwechsel in der Akte ohne Kasten in der Stufenkarte.
   Trennung per Linie, Text bündig mit der Karte. */
html.twenty-ui[data-crm-page=leads] .lead-detail .terminfrage{border:0!important;border-top:1px solid var(--crm-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html.twenty-ui[data-crm-page=leads] .lead-detail .terminfrage>.card-body{padding:12px 0 0!important}