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

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

/* ---------- Liste: Werkzeugleiste ---------- */
html.twenty-ui[data-crm-page=kunden] .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=kunden] .contact-list-view>.row>*{width:auto;max-width:none;padding:0;margin:0}
html.twenty-ui[data-crm-page=kunden] .contact-list-view>.row>.col-xl-4{order:-1;flex:0 0 280px}
html.twenty-ui[data-crm-page=kunden] .contact-list-view>.row>.col-xl-8{flex:1 1 0;min-width:0}
html.twenty-ui[data-crm-page=kunden] .contact-toolbar-left{display:flex;align-items:center;gap:8px}
html.twenty-ui[data-crm-page=kunden] .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=kunden] .contact-toolbar-left,html.twenty-ui[data-crm-page=kunden] .contact-toolbar-right{min-height:0}
html.twenty-ui[data-crm-page=kunden] .contact-toolbar-right{display:flex;align-items:center;width:100%;margin:0}
html.twenty-ui[data-crm-page=kunden] .dataTables_filter,html.twenty-ui[data-crm-page=kunden] .dataTables_filter label{display:block;width:100%;margin:0}
html.twenty-ui[data-crm-page=kunden] .dataTables_filter input{width:100%;min-height:38px}

/* ---------- Liste: Desktop-Tabelle ---------- */
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table-responsive{overflow-y:hidden}
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table{table-layout:fixed;width:100%}
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table th,
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td{padding:12px;font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis}
html.twenty-ui[data-crm-page=kunden] .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=kunden] .contact-list-view .table th:nth-child(2){width:170px}
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table th:nth-child(3){width:150px}
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table th:nth-child(4){width:110px}
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table th:nth-child(5){width:150px}
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table th:nth-child(6){width:100px}
html.twenty-ui[data-crm-page=kunden] .contact-list-view .table th:nth-child(7){width:100px}
html.twenty-ui[data-crm-page=kunden] .sortierknopf::after{content:'';position:absolute;inset:0}
html.twenty-ui[data-crm-page=kunden] .table th:has(.sortierknopf:focus-visible){outline:2px solid var(--crm-accent);outline-offset:-2px}
html.twenty-ui[data-crm-page=kunden] .table th:has(.sortierknopf):hover{color:var(--crm-accent)}
html.twenty-ui[data-crm-page=kunden] .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}
@media(max-width:1023px){
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table :is(th,td):is(:nth-child(4),:nth-child(7)){display:none}
}

/* ---------- Liste: Mobil — Tabelle als Kartenliste ---------- */
@media(max-width:767.98px){
  html.twenty-ui[data-crm-page=kunden] .hk-pg-header .pg-title{font-size:24px}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view>.row{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:12px}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view>.row>*{width:100%;flex:none!important}
  html.twenty-ui[data-crm-page=kunden] .dataTables_filter input{min-height:var(--crm-hit);font-size:16px}
  html.twenty-ui[data-crm-page=kunden] .contact-toolbar-left{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
  html.twenty-ui[data-crm-page=kunden] .contact-toolbar-left::-webkit-scrollbar{display:none}
  html.twenty-ui[data-crm-page=kunden] .contact-toolbar-left>*{flex:none}
  html.twenty-ui[data-crm-page=kunden] .contact-toolbar-left .form-select{min-height:var(--crm-hit);font-size:15px;padding-right:32px}

  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table-responsive{overflow:visible}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table-responsive:focus-visible{outline:none}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table,
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table tbody{display:block;width:100%}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table thead{display:none}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .card{overflow:hidden}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 16px;min-height:var(--crm-hit);border-bottom:1px solid var(--crm-line);cursor:pointer}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table tr:last-child{border-bottom:0}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table tr:active{background:var(--bs-tertiary-bg,#f6f7f8)}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td{display:block;padding:0;border:0;min-width:0;font-size:14px;overflow:visible;background:none;box-shadow:none}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:nth-child(1){grid-column:1;grid-row:1}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:nth-child(6){grid-column:2;grid-row:1;justify-self:end}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:nth-child(2){grid-column:1/-1;grid-row:2;color:var(--crm-quiet);font-size:13px}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:nth-child(3){grid-column:1/-1;grid-row:3}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:nth-child(5){grid-column:1/-1;grid-row:4}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:is(:nth-child(4),:nth-child(7)){display:none}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:is(:nth-child(3),:nth-child(5))::before{content:attr(data-label) ': ';color:var(--crm-quiet);font-size:12px}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td.crm-leer{display:none}
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:nth-child(1) .text-truncate{font-size:16px}
}

/* ---------- Detail ---------- */
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header .contact-options-wrap{display:flex;flex-wrap:wrap;gap:8px}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header .breadcrumb{flex-wrap:nowrap}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info>.text-center>.avatar{font-size:16px;overflow:hidden}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info>.text-center>.avatar .initial-wrap{font-size:inherit;line-height:1}
html.twenty-ui[data-crm-page=kunden] .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=kunden] .lead-detail .contact-more-info .card-header-action .card-action-wrap{margin:0}

@media(max-width:800px){
  /* Wichtigstes zuerst: Kopf → Kontakt → Verträge → Zusatzverkäufe → Rest */
  html.twenty-ui[data-crm-page=kunden] .lead-detail .d-flex.flex-xxl-nowrap{gap:12px;padding:12px 0 24px}
  html.twenty-ui[data-crm-page=kunden] .lead-detail :is(.contact-info,.contact-more-info){display:contents}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-more-info>*{margin:0!important;grid-column:1;order:6;min-width:0}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info>.text-center,
  html.twenty-ui[data-crm-page=kunden] .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=kunden] .lead-detail .contact-info>.text-center{padding:16px;background:var(--bs-tertiary-bg,#f6f8fa)}
  html.twenty-ui[data-crm-page=kunden] .lead-detail [data-crm-block=kopf]{order:1!important}
  html.twenty-ui[data-crm-page=kunden] .lead-detail [data-crm-block=kontakt]{order:2!important}
  html.twenty-ui[data-crm-page=kunden] .lead-detail [data-crm-block=vertraege]{order:3!important}
  html.twenty-ui[data-crm-page=kunden] .lead-detail [data-crm-block=zusatz]{order:4!important}
  html.twenty-ui[data-crm-page=kunden] .lead-detail [data-crm-block=info]{order:5!important}
  html.twenty-ui[data-crm-page=kunden] .lead-detail [data-crm-block=aktivitaeten]{order:7!important}
  html.twenty-ui[data-crm-page=kunden] .lead-detail [data-crm-block=verlauf]{order:8!important}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info .card-header{padding:14px 16px 6px}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info .card-body{padding:6px 16px 14px}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-more-info .card-header{padding:14px 16px}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-more-info .card-body{padding:16px}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header .contact-options-wrap .btn{min-height:var(--crm-hit)}
}
@media(max-width:600px){
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-more-info form .row>*{width:100%;flex:0 0 100%;max-width:100%}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-more-info form .btn[type=submit]{width:100%}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-more-info :is(.form-control,.form-select){min-height:var(--crm-hit)}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-more-info .card-header-action .btn{min-height:var(--crm-hit)}
}

/* Detail-Kopf: bündig, ohne Einrückung */
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header{padding-left:0!important;padding-right:0!important}
html.twenty-ui[data-crm-page=kunden] .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=kunden] .lead-detail .contact-header .breadcrumb{padding:0!important;margin:0!important;min-width:0}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header .breadcrumb-item.active{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Abnahme 30.10.2026 (wie F4-01 in der Lead-Akte): auch das nav um die Brotkrumen darf schrumpfen. */
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header nav{min-width:0;max-width:100%}
@media(max-width:600px){
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header .contact-options-wrap{flex:1 1 100%}
}

/* ---------- Flach (29.10.2026): eine Fläche, keine Karte in Karte, Trennung per Linie ---------- */
html.twenty-ui[data-crm-page=kunden] .contact-list-view .card{background:var(--crm-surface);border:1px solid var(--crm-line);box-shadow:none}
html.twenty-ui[data-crm-page=kunden] .contact-list-view .card .card{border:0;box-shadow:none}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info>.card,
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-more-info>.card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info>.card{border-bottom:1px solid var(--crm-line)}
html.twenty-ui[data-crm-page=kunden] .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=kunden] .lead-detail .contact-more-info>.card>.card-header{background:transparent;border-bottom:1px solid var(--crm-line)}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info>.text-center{background:transparent;border-bottom:1px solid var(--crm-line);border-radius:0}
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info>.card>.card-header,
html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info>.card>.card-body{background:transparent}

/* ---------- Abnahme 29.10.2026 (Bereich 4) ---------- */
/* Leerzustand: keine leere Tabellenkarte unter der Hinweiskarte */
html.twenty-ui[data-crm-page=kunden] .contact-list-view>.card.text-center+.card{display:none}
/* Bearbeiten-Formular in der schmalen linken Spalte: Ort/Bundesland und Telefon/E-Mail untereinander (nichts abgeschnitten) */
@media(min-width:1400px){
  html.twenty-ui[data-crm-page=kunden] .contact-info form .row:is(:has(select[id$="-bl"]),:has(input[id$="-tel"]))>*{flex:0 0 100%;width:100%;max-width:100%}
}
/* Dunkel: Kontrast der Abschnittstitel, Listen-Avatare und Fehlerhinweise */
html.twenty-ui[data-bs-theme=dark][data-crm-page=kunden] .lead-detail .text-primary{color:#8bc9e8!important}
html.twenty-ui[data-bs-theme=dark][data-crm-page=kunden] .contact-list-view .avatar-soft-primary{background:rgba(100,183,224,.16)}
html.twenty-ui[data-bs-theme=dark][data-crm-page=kunden] .contact-list-view .avatar .initial-wrap{color:#9fd3ee}
html.twenty-ui[data-bs-theme=dark][data-crm-page=kunden] .lead-detail .alert-danger{background:#3a1a1a;border-color:#6b2f2f;color:#ffb8b0}
/* Vergleichs-Marke „lokale Testkopie“ darf Schaltflächen am Seitenende nicht blockieren */
html.twenty-ui[data-crm-page=kunden] body>aside[style*="position:fixed"],
html.twenty-ui[data-crm-page=wiedervorlagen] body>aside[style*="position:fixed"]{pointer-events:none;opacity:.7}

/* Mobil: Vertragstabelle als Kartenzeilen (nichts hinter seitlichem Scrollen verborgen), Touch-Ziele >= 40 px */
@media(max-width:600px){
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] .table-responsive{overflow:visible}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] table,
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] tbody{display:block;width:100%}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] thead{display:none}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--crm-line)}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] tr:last-child{border-bottom:0}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] td{display:contents}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] td[data-label]::before{content:attr(data-label);color:var(--crm-quiet);font-size:12px}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] td:last-child{display:block;grid-column:1/-1}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] td:last-child::before{content:none}
  html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] td:last-child .btn{width:100%;min-height:var(--crm-hit)}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .btn-link,html.twenty-ui[data-crm-page=kunden] .lead-detail [class*=leere],
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-info button:not(.btn){min-height:40px}
}
/* Kopf: Titel steht in der Kopfzeile (h1 ausgeblendet) – kein leerer Streifen darüber, Zähler bündig */
html.twenty-ui[data-crm-page=kunden] main>div>header.hk-pg-header:has(h1.ck-h1-weg){padding-top:8px!important}
@media(max-width:600px){html.twenty-ui[data-crm-page=kunden] [data-crm-block=vertraege] td .badge{justify-self:start;width:max-content}}
/* Dunkel: Produkt-Chips in der Liste lesbar */
html.twenty-ui[data-bs-theme=dark][data-crm-page=kunden] .contact-list-view td:nth-child(3) .badge{background:rgba(100,183,224,.16)!important;color:#9fd3ee!important}

/* Redundante Seitenhinweise bereinigt (Pascal). */
html.twenty-ui[data-crm-page="kunden"] main:has(.contact-list-view) .hk-pg-header{display:none!important}

/* Abnahme 30.10.2026 (F4-11): Touch-Ziele am Handy ≥ 40 px (Kundenname in der Liste ohne Layoutverschiebung,
   Brotkrumen und Telefon/E-Mail/Web in der Akte). */
@media(max-width:767.98px){
  html.twenty-ui[data-crm-page=kunden] .contact-list-view .table td:first-child a.text-truncate{border-block:10px solid transparent;margin-block:-10px}
  html.twenty-ui[data-crm-page=kunden] main a.d-inline-flex.link-secondary{min-height:40px}
}
@media(max-width:800px){
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header .breadcrumb{align-items:center}
  html.twenty-ui[data-crm-page=kunden] .lead-detail .contact-header .breadcrumb-item>a{display:inline-flex;align-items:center;min-height:40px}
  html.twenty-ui[data-crm-page=kunden] .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=kunden] .lead-detail .contact-info .cp-info a[href]{display:inline-flex;align-items:center;min-height:40px;max-width:100%}
}

/* ---------- Abnahme 30.10.2026, Fix-Runde 2 (D2, D7): Vertrag-Dialog ---------- */
/* D2: Inline-Fehler am Feld „Beginn“ (gesetzt von kunden.js). Lesbar in hell und dunkel, mindestens 12 px. */
html.twenty-ui[data-crm-page=kunden] .modal input[id$="-beginn"]~.invalid-feedback{font-size:13px;line-height:1.4;margin-left:0;color:#b02a37}
html.twenty-ui[data-crm-page=kunden][data-bs-theme=dark] .modal input[id$="-beginn"]~.invalid-feedback{color:#ff8a94}
/* D7: Am Handy passt der Dialog ohne Scrollen auf 390 × 844. Produkt/Status, Beginn/Ende und Frist/Betrag stehen nebeneinander
   (kurze Werte), die Abstände sind etwas kleiner. Lange Labels dürfen umbrechen, die Felder bleiben unten bündig.
   Notfalls (sehr niedrige Bildschirme) bleibt die Knopfzeile unten am Bildschirm stehen, statt aus dem Bild zu laufen. */
@media(max-width:575.98px){
  html.twenty-ui[data-crm-page=kunden] .modal .modal-body:has(input[type="date"][id$="-beginn"]){padding:12px 16px 16px}
  html.twenty-ui[data-crm-page=kunden] .modal .modal-body:has(input[type="date"][id$="-beginn"]) form>.row.gx-3>.col-sm-6{flex:0 0 50%;width:50%;max-width:50%;display:flex;flex-direction:column;justify-content:flex-end}
  html.twenty-ui[data-crm-page=kunden] .modal .modal-body:has(input[type="date"][id$="-beginn"]) form .mb-3{margin-bottom:12px!important}
  html.twenty-ui[data-crm-page=kunden] .modal .modal-body:has(input[type="date"][id$="-beginn"]) form .form-label{margin-bottom:4px}
  html.twenty-ui[data-crm-page=kunden] .modal .modal-body:has(input[type="date"][id$="-beginn"]) form .form-text{margin-top:4px;font-size:12px;line-height:1.4}
  html.twenty-ui[data-crm-page=kunden] .modal .modal-content:has(input[type="date"][id$="-beginn"]){overflow:clip}
  html.twenty-ui[data-crm-page=kunden] .modal .modal-body:has(input[type="date"][id$="-beginn"]) form>.d-flex.justify-content-end:last-child{position:sticky;bottom:0;z-index:1;padding-block:8px;margin-block:-8px;background:var(--hk-bg-primary,var(--bs-body-bg))}
}