/* Pipeline: eine Filterleiste, dezente Phasennavigation, klare Kartenhierarchie.
   Bestehende React-Knoten und alle Datenaktionen bleiben unverändert. */
html.twenty-ui.crm-route-pipeline{--pl-spalte:248px;--pl-akzent-weich:color-mix(in srgb,var(--crm-accent) 10%,transparent);--pl-ring:0 0 0 2px var(--crm-accent)}
html.twenty-ui.crm-route-pipeline :is(.taskboardapp-wrap,.taskboardapp-content,.taskboardapp-detail-wrap,.taskboard-body,.tasklist-scroll){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html.twenty-ui.crm-route-pipeline header.taskboard-header{display:flex!important;align-items:flex-start!important;flex-wrap:wrap!important;gap:12px 16px!important;height:auto!important;min-height:0!important;padding:16px 0!important;border:0!important;border-bottom:1px solid var(--crm-line)!important;flex:0 0 auto!important}
html.twenty-ui.crm-route-pipeline .pl-kopfzeile-titel{flex:0 0 auto!important;align-self:flex-start;min-width:0}
html.twenty-ui.crm-route-pipeline .taskboardapp-title{gap:0!important}
html.twenty-ui.crm-route-pipeline nav[data-mail-view-links]{margin:0!important;min-height:38px}
html.twenty-ui.crm-route-pipeline .taskboard-options-wrap{display:flex!important;flex:1 1 0!important;min-width:0;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap;gap:8px!important}
html.twenty-ui.crm-route-pipeline .pl-suche{flex:1 1 200px;min-width:180px;max-width:260px;width:auto}
html.twenty-ui.crm-route-pipeline .pl-suche :is(.input-group-text,.form-control){height:38px!important;min-height:38px!important;font-size:13px;border-color:var(--crm-line);background:var(--crm-surface)}
html.twenty-ui.crm-route-pipeline .pl-suche .input-group-text{border-right:0;padding-right:8px}
html.twenty-ui.crm-route-pipeline .pl-suche .form-control{border-left:0;padding-left:0}
html.twenty-ui.crm-route-pipeline .pl-auswahl{height:38px!important;min-height:38px!important;width:auto!important;min-width:150px;max-width:180px;padding-top:0;padding-bottom:0;font-size:13px;border-radius:8px;border-color:var(--crm-line)}
html.twenty-ui.crm-route-pipeline .pl-auswahl.crm-region-selected{min-width:194px;max-width:200px}
html.twenty-ui.crm-route-pipeline .taskboard-options-wrap .form-check{position:relative;display:inline-flex!important;align-items:center;gap:6px;margin:0 0 0 4px!important;padding:0!important;min-height:38px;white-space:nowrap}
html.twenty-ui.crm-route-pipeline .taskboard-options-wrap .form-check-input{position:static!important;opacity:1!important;width:16px!important;height:16px!important;float:none!important;margin:0!important;flex:none;cursor:pointer}
html.twenty-ui.crm-route-pipeline .taskboard-options-wrap .form-check-label{height:auto;padding:0;border:0;border-radius:0;background:transparent;color:var(--crm-quiet);font-size:12px;line-height:1.4;cursor:pointer}
html.twenty-ui.crm-route-pipeline .taskboard-options-wrap .form-check:has(:checked) .form-check-label{color:var(--bs-body-color)}
html.twenty-ui.crm-route-pipeline header.taskboard-header+p,html.twenty-ui.crm-route-pipeline small[data-mail-count-help]{display:none!important}

/* Karten: Text bündig, Zuständigkeit oben rechts, Status und Eignung in einer Fußzeile. */
html.twenty-ui.crm-route-pipeline .spipeline-list{display:flex!important;flex-direction:column;flex:0 0 var(--pl-spalte)!important;width:var(--pl-spalte)!important;max-width:none!important;min-height:0;margin:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;overflow:hidden}
html.twenty-ui.crm-route-pipeline .spipeline-list>.card-header{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 2px 12px!important;margin:0!important;border:0!important;background:transparent}
html.twenty-ui.crm-route-pipeline .spipeline-list>.card-header h6{font-size:13px;font-weight:600;margin:0;min-width:0;white-space:nowrap}
html.twenty-ui.crm-route-pipeline .spipeline-list>.card-header .overall-estimation{display:none}
html.twenty-ui.crm-route-pipeline .spipeline-list>.card-header .lead-count{font-size:11px;font-weight:500;padding:0;background:transparent;color:var(--crm-quiet);white-space:nowrap}
html.twenty-ui.crm-route-pipeline .spipeline-list>.card-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 4px 12px 0!important;scrollbar-width:none}
html.twenty-ui.crm-route-pipeline article.pl-karte{margin:0 0 10px!important;border:1px solid var(--crm-line)!important;border-radius:9px;background:var(--crm-surface)!important;box-shadow:none!important}
html.twenty-ui.crm-route-pipeline article.pl-karte:hover{border-color:color-mix(in srgb,var(--crm-accent) 35%,var(--crm-line))!important}
html.twenty-ui.crm-route-pipeline article.pl-karte>.card-body{position:relative;padding:12px!important}
html.twenty-ui.crm-route-pipeline article.pl-karte>.card-body>.media{display:block!important}
html.twenty-ui.crm-route-pipeline article.pl-karte>.card-body>.media>.media-head{position:absolute;top:12px;right:12px;margin:0!important}
html.twenty-ui.crm-route-pipeline article.pl-karte>.card-body>.media>.media-head .avatar{width:24px;height:24px;font-size:10px;opacity:.8}
html.twenty-ui.crm-route-pipeline article.pl-karte>.card-body>.media>.media-body{width:100%;min-width:0;margin:0!important}
html.twenty-ui.crm-route-pipeline article.pl-karte .brand-name{padding-right:32px;font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.twenty-ui.crm-route-pipeline article.pl-karte p.brand-cat{display:block!important;margin:3px 0 0;font-size:12px;line-height:1.4;color:var(--crm-quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.twenty-ui.crm-route-pipeline article.pl-karte p.brand-cat.pl-doppelt{display:none!important}
html.twenty-ui.crm-route-pipeline article.pl-karte .badge{font-size:10px;font-weight:500;padding:2px 5px;border-radius:4px}
html.twenty-ui.crm-route-pipeline article.pl-karte .media.align-items-center{display:block!important;margin-top:8px}
html.twenty-ui.crm-route-pipeline article.pl-karte .media.align-items-center>.media-head{position:static;min-width:0;margin:0!important}
html.twenty-ui.crm-route-pipeline article.pl-karte .media.align-items-center>.media-body{position:absolute;right:12px;bottom:21px;margin:0;line-height:1}
html.twenty-ui.crm-route-pipeline article.pl-karte .media.align-items-center>.media-body:not(:has(.icp)){display:none!important}
html.twenty-ui.crm-route-pipeline article.pl-karte .pl-faellig-zeile{display:block!important;white-space:normal!important;max-width:100%;font-size:12px;line-height:1.4;color:var(--crm-quiet)}
html.twenty-ui.crm-route-pipeline article.pl-karte .pl-faellig-zeile svg{display:inline-block;vertical-align:-2px;margin-right:3px}
html.twenty-ui.crm-route-pipeline article.pl-karte label{display:block;width:calc(100html.twenty-ui.crm-route-pipeline - 64px);max-width:172px;margin:12px 0 0!important}
html.twenty-ui.crm-route-pipeline article.pl-karte .auswahl-karte{height:32px!important;min-height:32px!important;padding:0 25px 0 8px!important;font-size:12px;border-radius:6px;border-color:var(--crm-line)}
html.twenty-ui.crm-route-pipeline .icp{gap:3px}

/* Desktop: nur die Spalten scrollen, ganze Spalten statt angeschnittener Karten. */
@media(min-width:992px){
  html.twenty-ui.crm-route-pipeline .hk-pg-wrapper{padding-bottom:0!important;min-height:0!important}
  html.twenty-ui.crm-route-pipeline .hk-pg-wrapper>main{height:calc(100dvh - 65px)!important;padding-bottom:0!important;display:flex;flex-direction:column}
  html.twenty-ui.crm-route-pipeline .hk-pg-wrapper>main>.hk-pg-body,html.twenty-ui.crm-route-pipeline .taskboardapp-wrap,html.twenty-ui.crm-route-pipeline .taskboardapp-content,html.twenty-ui.crm-route-pipeline .taskboardapp-detail-wrap{flex:1 1 auto!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column}
  html.twenty-ui.crm-route-pipeline .taskboard-body{flex:1 1 auto!important;min-height:0!important;padding:12px 0 0!important}
  html.twenty-ui.crm-route-pipeline .taskboard-body>div{display:flex!important;flex-direction:column;flex:1 1 auto!important;min-height:0!important;height:auto!important;background:transparent!important}
  html.twenty-ui.crm-route-pipeline .tasklist-scroll{flex:1 1 auto!important;min-height:0!important;max-height:none!important;height:auto!important;overflow-x:auto;overflow-y:hidden;margin:0!important;padding:0 0 12px!important;container-type:inline-size;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;outline:0}
  html.twenty-ui.crm-route-pipeline .tasklist-scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--crm-accent)!important}
  html.twenty-ui.crm-route-pipeline .tasklist-wrap{display:flex!important;gap:12px;align-items:flex-start!important;width:max-content;min-width:100%;height:100%!important;padding-right:12px}
  html.twenty-ui.crm-route-pipeline .spipeline-list{max-height:100%!important;scroll-snap-align:start}
  @container(min-width:520px){html.twenty-ui.crm-route-pipeline .spipeline-list{--pl-spalte:calc((100cqw - 24px)/2)}}
  @container(min-width:770px){html.twenty-ui.crm-route-pipeline .spipeline-list{--pl-spalte:calc((100cqw - 36px)/3)}}
  @container(min-width:1030px){html.twenty-ui.crm-route-pipeline .spipeline-list{--pl-spalte:calc((100cqw - 48px)/4)}}
  @container(min-width:1300px){html.twenty-ui.crm-route-pipeline .spipeline-list{--pl-spalte:calc((100cqw - 60px)/5)}}
  @container(min-width:1570px){html.twenty-ui.crm-route-pipeline .spipeline-list{--pl-spalte:calc((100cqw - 72px)/6)}}
  html.twenty-ui.crm-route-pipeline .pl-nav{order:-1;display:flex;align-items:center;gap:8px;min-width:0;flex:0 0 auto;margin-bottom:16px}
  html.twenty-ui.crm-route-pipeline .pl-nav-phasen{display:flex;gap:16px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
  html.twenty-ui.crm-route-pipeline .pl-nav-phase{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:30px;padding:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--crm-quiet);font-family:inherit;font-size:11px;font-weight:500;line-height:1.3;white-space:nowrap;cursor:pointer}
  html.twenty-ui.crm-route-pipeline .pl-nav-phase.ist-sichtbar{color:var(--bs-body-color);border-bottom-color:var(--crm-line)}
  html.twenty-ui.crm-route-pipeline .pl-nav-phase:hover{color:var(--crm-accent);border-bottom-color:var(--crm-accent)}
  html.twenty-ui.crm-route-pipeline .pl-nav-punkt,html.twenty-ui.crm-route-pipeline .pl-nav-zahl{display:none}
  html.twenty-ui.crm-route-pipeline .pl-nav-pfeil{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--bs-body-color);cursor:pointer}
  html.twenty-ui.crm-route-pipeline .pl-nav-pfeil:hover:not(:disabled){background:var(--pl-akzent-weich)}
  html.twenty-ui.crm-route-pipeline .pl-nav-pfeil:disabled{opacity:.2;cursor:default}
  html.twenty-ui.crm-route-pipeline .pl-nav-zurueck:disabled{display:none}
  html.twenty-ui.crm-route-pipeline .pl-nav-alles-sichtbar{display:none}
}

/* Handy: lesbare Informationen über einer durchgängigen Statusauswahl. */
@media(max-width:991.98px){
  html.twenty-ui.crm-route-pipeline header.taskboard-header{flex-direction:column;gap:12px!important;padding:12px 0!important}
  html.twenty-ui.crm-route-pipeline .pl-kopfzeile-titel,html.twenty-ui.crm-route-pipeline .taskboardapp-title{width:100%}
  html.twenty-ui.crm-route-pipeline .taskboard-options-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;flex:none!important;gap:8px!important}
  html.twenty-ui.crm-route-pipeline .pl-suche{grid-column:1/-1;width:100%;max-width:none;min-width:0}
  html.twenty-ui.crm-route-pipeline .pl-suche :is(.input-group-text,.form-control){height:44px!important;min-height:44px!important;font-size:16px}
  html.twenty-ui.crm-route-pipeline .pl-auswahl,html.twenty-ui.crm-route-pipeline .pl-auswahl.crm-region-selected{height:44px!important;width:100%!important;min-width:0;max-width:none;font-size:13px;padding-left:10px;padding-right:26px}
  html.twenty-ui.crm-route-pipeline .taskboard-options-wrap .form-check{margin:0!important;min-height:44px}
  html.twenty-ui.crm-route-pipeline .taskboard-options-wrap .form-check-label{font-size:12px;white-space:normal}
  html.twenty-ui.crm-route-pipeline .pl-nav{display:none}
  html.twenty-ui.crm-route-pipeline .pl-mobil{padding:12px 0 80px!important}
  html.twenty-ui.crm-route-pipeline .pl-mobil-abschnitt{margin:0 0 12px!important;border:0!important;border-bottom:1px solid var(--crm-line)!important;border-radius:0!important;box-shadow:none;overflow:hidden}
  html.twenty-ui.crm-route-pipeline .pl-mobil-kopf-h{margin:0;font-size:inherit}
  html.twenty-ui.crm-route-pipeline .pl-mobil-kopf{display:flex;align-items:center;gap:12px;min-height:52px;width:100%;padding:8px 0;border:0;background:transparent;color:var(--bs-body-color);text-align:left;cursor:pointer}
  html.twenty-ui.crm-route-pipeline .pl-mobil-label{flex:1;min-width:0;font-size:15px;font-weight:600}
  html.twenty-ui.crm-route-pipeline .pl-mobil-kopf .lead-count{font-size:12px;font-weight:400;padding:0;background:transparent;color:var(--crm-quiet)}
  html.twenty-ui.crm-route-pipeline .pl-mobil-chevron{color:var(--crm-quiet);flex:none}
  html.twenty-ui.crm-route-pipeline .pl-mobil-chevron:not(.pl-mobil-chevron-offen){transform:rotate(-90deg)}
  html.twenty-ui.crm-route-pipeline li.pl-mobil-zeile{padding:14px 0!important;border-color:var(--crm-line)}
  html.twenty-ui.crm-route-pipeline li.pl-mobil-zeile>div{display:flex!important;flex-direction:column;align-items:stretch!important;gap:10px!important}
  html.twenty-ui.crm-route-pipeline li.pl-mobil-zeile .min-w-0{width:100%;min-width:0}
  html.twenty-ui.crm-route-pipeline li.pl-mobil-zeile .text-truncate{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal!important;max-width:100%!important;font-size:14px;line-height:1.4;overflow:hidden}
  html.twenty-ui.crm-route-pipeline li.pl-mobil-zeile .pl-faellig-zeile{display:block!important;white-space:normal!important;margin-top:4px;font-size:12px;line-height:1.4;color:var(--crm-quiet)}
  html.twenty-ui.crm-route-pipeline li.pl-mobil-zeile select.auswahl-zeile{width:100%!important;max-width:none;min-width:0;min-height:44px;font-size:13px;padding:0 32px 0 12px!important;border-radius:8px}
}

/* Die Phasenfarbe bleibt auf allen Status-Pickern erhalten. */
html.twenty-ui.crm-route-pipeline select[data-phase]{--pl-ph:var(--status-cold)}
html.twenty-ui.crm-route-pipeline select[data-phase=kontaktiert]{--pl-ph:var(--status-kontaktiert)}
html.twenty-ui.crm-route-pipeline select[data-phase=ersttermin]{--pl-ph:var(--status-ersttermin)}
html.twenty-ui.crm-route-pipeline select[data-phase=verkaufstermin]{--pl-ph:var(--status-verkaufstermin)}
html.twenty-ui.crm-route-pipeline select[data-phase=vertragstermin]{--pl-ph:var(--status-vertragstermin)}
html.twenty-ui.crm-route-pipeline select[data-phase=kunde]{--pl-ph:var(--status-kunde)}
html.twenty-ui.crm-route-pipeline select[data-phase=verloren]{--pl-ph:var(--status-verloren)}
html.twenty-ui.crm-route-pipeline :is(article.pl-karte,li.pl-mobil-zeile) select[data-phase]{background-color:color-mix(in srgb,var(--pl-ph) 12%,var(--crm-surface))!important;border-color:color-mix(in srgb,var(--pl-ph) 24%,var(--crm-line))!important;color:color-mix(in srgb,var(--bs-emphasis-color) 82%,var(--bs-body-bg))!important}
html.twenty-ui.crm-route-pipeline select[data-phase] option{background:var(--bs-body-bg);color:var(--bs-body-color)}
html.twenty-ui.crm-route-pipeline dialog.crm-dialog .d-flex.justify-content-end{flex-wrap:wrap}
html.twenty-ui.crm-route-pipeline dialog.crm-dialog .btn{white-space:nowrap;min-height:40px}
@media(pointer:coarse){html.twenty-ui.crm-route-pipeline article.pl-karte .auswahl-karte{min-height:44px!important}html.twenty-ui.crm-route-pipeline article.pl-karte .media.align-items-center>.media-body{bottom:26px}}
@media(prefers-reduced-motion:no-preference){html.twenty-ui.crm-route-pipeline .pl-nav-phase,html.twenty-ui.crm-route-pipeline .pl-nav-pfeil,html.twenty-ui.crm-route-pipeline article.pl-karte{transition:background-color 150ms,border-color 150ms,color 150ms}}

/* Scrollen bleibt möglich; keine sichtbaren Scrollleisten im Board. */
html.twenty-ui.crm-route-pipeline :is(.tasklist-scroll,.spipeline-list>.card-body,.pl-nav-phasen)::-webkit-scrollbar{display:none;width:0;height:0}

/* Abnahme 30.10.2026 (F4-15): Ladezustand im Layout des geladenen Boards. Die Platzhalter-Spalten (div statt section)
   nutzen dieselben Spaltenregeln; Kopf links in normaler Schreibung, Platzhalterkarten wie echte Karten. */
html.twenty-ui.crm-route-pipeline .tasklist-wrap[aria-busy="true"] .spipeline-list>.card-header>div{justify-content:flex-start}
html.twenty-ui.crm-route-pipeline .tasklist-wrap[aria-busy="true"] .spipeline-list>.card-header h6{flex:1 1 auto;min-width:0;text-transform:none!important}
html.twenty-ui.crm-route-pipeline .tasklist-wrap[aria-busy="true"] .spipeline-card{margin:0 0 10px!important;border:1px solid var(--crm-line)!important;border-radius:9px;background:var(--crm-surface)!important;box-shadow:none!important}
html.twenty-ui.crm-route-pipeline .tasklist-wrap[aria-busy="true"] .spipeline-card>.card-body{padding:12px!important}

/* Abnahme 30.10.2026 (F4-11): Touch-Ziele am Handy ≥ 40 px. Der Name wächst per transparentem Rand mit negativem
   Außenabstand (Layout bleibt gleich, line-clamp schneidet weiterhin sauber am Innenrand ab). */
@media(max-width:991.98px){
  html.twenty-ui.crm-route-pipeline nav[data-mail-view-links] a{display:inline-flex;align-items:center;min-height:40px}
  html.twenty-ui.crm-route-pipeline li.pl-mobil-zeile a.text-truncate{border-block:11px solid transparent;margin-block:-11px}
}

/* Abnahme 30.10.2026, Fix-Runde 2 (N2-30): Alle Regeln oben hängen an html.crm-route-pipeline. pipeline.js setzt die Klasse
   synchron im MutationObserver (vor dem ersten Paint der Route), nicht erst wie data-crm-page einen Frame später.
   Die Phasenleiste liegt absolut im reservierten Streifen (30 px + 16 px Abstand). Ob sie da ist, ändert die Lage des Boards nicht.
   Passt das ganze Board in die Breite (Leiste ausgeblendet), entfällt der Streifen. Das merkt sich html.pl-board-passt über den
   Wechsel Skelett → geladenes Board hinweg. */
@media(min-width:992px){
  html.twenty-ui.crm-route-pipeline .taskboard-body>div{position:relative;padding-top:46px!important}
  html.twenty-ui.crm-route-pipeline.pl-board-passt .taskboard-body>div{padding-top:0!important}
  html.twenty-ui.crm-route-pipeline .taskboard-body>div>.pl-nav{position:absolute;top:0;left:0;right:0;margin:0}
}

/* Abnahme 30.10.2026, Fix-Runde 2 (F1-11): Termin-Dialog beim Stufenwechsel ohne inneren Kasten. */
html.twenty-ui.crm-route-pipeline dialog.crm-dialog>.terminfrage{margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}