/* „Neuer Lead“ als Popup (29.10.2026) */
.crm-lead-popup{
  width:min(760px,calc(100vw - 48px));height:min(860px,calc(100dvh - 64px));max-width:none;max-height:none;
  padding:0;border:1px solid var(--crm-line,#e4e4e4);border-radius:14px;background:var(--bs-body-bg,#fff);color:var(--bs-body-color);
  box-shadow:0 24px 80px rgba(16,24,32,.28);overflow:hidden;
  animation:crm-lead-popup-in 220ms cubic-bezier(.2,.8,.2,1)}
.crm-lead-popup::backdrop{background:rgba(14,29,34,.42);animation:crm-lead-popup-fade 220ms ease}
html .twenty-ui dialog.crm-lead-popup.wird-geschlossen,html.twenty-ui dialog.crm-lead-popup.wird-geschlossen{animation:crm-lead-popup-out 180ms ease forwards}
.crm-lead-popup iframe{display:block;width:100%;height:100%;border:0;background:transparent;opacity:0;transition:opacity 160ms ease}
.crm-lead-popup.ist-geladen iframe{opacity:1}
.crm-lead-popup-laden{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.crm-lead-popup-laden::after{content:"";width:28px;height:28px;border-radius:50%;border:3px solid var(--crm-line,#ddd);border-top-color:var(--crm-accent,#175676);animation:crm-lead-spin .8s linear infinite}
.crm-lead-popup.ist-geladen .crm-lead-popup-laden{display:none}
.crm-lead-popup-zu{
  position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--crm-line,#e4e4e4);border-radius:10px;background:var(--bs-body-bg,#fff);color:var(--bs-body-color);cursor:pointer}
.crm-lead-popup-zu:hover{border-color:var(--crm-accent,#175676);color:var(--crm-accent,#175676)}
.crm-lead-popup-zu:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(23,86,118,.28)}
@keyframes crm-lead-popup-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes crm-lead-popup-out{to{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes crm-lead-popup-fade{from{opacity:0}to{opacity:1}}
@keyframes crm-lead-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){
  .crm-lead-popup{width:100vw;height:calc(100dvh - 24px);margin:auto 0 0;border-radius:16px 16px 0 0;border-bottom:0;animation-name:crm-lead-sheet-in}
  @keyframes crm-lead-sheet-in{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .crm-lead-popup-zu{top:10px;right:10px;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.crm-lead-popup,.crm-lead-popup::backdrop,.crm-lead-popup iframe{animation:none!important;transition:none!important}}

/* Im iframe: nur das Formular, ohne App-Rahmen */
html.crm-im-popup .hk-menu,
html.crm-im-popup .hk-navbar,
html.crm-im-popup .hk-menu-backdrop,
html.crm-im-popup .onb-launcher,
html.crm-im-popup body>aside[style*="position:fixed"]{display:none!important}
html.crm-im-popup .hk-wrapper .hk-pg-wrapper{margin:0!important;padding:0!important;min-height:100dvh}
html.crm-im-popup .hk-pg-wrapper>main{padding:20px 24px 32px!important;max-width:none!important}
html.crm-im-popup main a[href="/pipeline"]:first-child,
html.crm-im-popup main>div>a[href="/pipeline"]:first-child{display:none!important}
html.crm-im-popup main .card{border:0!important;box-shadow:none!important;background:transparent!important}
html.crm-im-popup main .card>.card-body{padding-left:0!important;padding-right:0!important}
html.crm-im-popup main>*{animation:none!important}
html.crm-im-popup main h1{padding-right:52px}

/* Meldung nach dem Anlegen */
.crm-lead-toast{
  position:fixed;left:50%;bottom:24px;z-index:2000;transform:translateX(-50%);display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 32px);
  padding:12px 16px;border-radius:12px;background:#1f2933;color:#fff;font:500 14px/1.3 "DM Sans",system-ui,sans-serif;
  box-shadow:0 12px 40px rgba(16,24,32,.3);animation:crm-lead-toast-in 240ms cubic-bezier(.2,.8,.2,1)}
.crm-lead-toast a{color:#8fc6e3;font-weight:600;text-decoration:none;white-space:nowrap}
.crm-lead-toast a:hover{text-decoration:underline}
.crm-lead-toast.weg{opacity:0;transform:translate(-50%,8px);transition:opacity .3s ease,transform .3s ease}
@keyframes crm-lead-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translateX(-50%)}}
/* Popup-Formular: kompakter Kopf, Aktionen unten immer sichtbar */
html.crm-im-popup main .card{margin-top:12px!important}
html.crm-im-popup main form .d-flex.border-top:has(button[type=submit]){
  position:sticky;bottom:0;z-index:3;margin:16px 0 0;padding:12px 0 calc(12px + env(safe-area-inset-bottom))!important;
  background:var(--bs-body-bg)}
html.crm-im-popup main form .d-flex.border-top:has(button[type=submit]) .btn{min-height:42px;padding-inline:18px}
@media(max-width:760px){html.crm-im-popup main form .d-flex.border-top:has(button[type=submit]) .btn{flex:1 1 0;min-height:46px}}

/* F1-03 (Fix 2, 30.10.2026): Popup am Desktop ohne inneres Scrollen. Das iframe ist nur ~758 px breit, deshalb griff die
   Handy-Regel aus tabs/leads.css (≤767 px: jede Feldgruppe 100 % breit, 44-px-Felder) und das Formular war 2659 px hoch.
   Ab 700 px Popup-Breite: kompaktes Raster, Feldgruppen nebeneinander, kleinere Abstände. DOM- und Tab-Reihenfolge
   bleiben unverändert. Breiten je Feld über die Feld-ID (useId…-<feld>); :root hebt die Spezifität über die leads.css-Regeln.
   Reihen: Ordination | Quelle | Status · Zuständig | Bundesland | PLZ · Ort | Straße | Fachrichtung | ICP ·
   Rolle | Anrede | Vorname | Nachname | Titel · Telefon | E-Mail | Website · Kanal | Datum | Schmerzsignal | Notizen. */
@media(min-width:700px){
  html.crm-im-popup:root .hk-pg-wrapper>main{padding:12px 24px 0!important}
  html.crm-im-popup:root main .hk-pg-header{padding:0!important;margin:0!important}
  html.crm-im-popup:root main .hk-pg-header .pg-title{font-size:20px!important;line-height:1.25;margin:0!important}
  html.crm-im-popup:root main .hk-pg-header :is(.mb-2,.mb-lg-0){margin-bottom:0!important}
  html.crm-im-popup:root main .card{margin-top:10px!important}
  html.crm-im-popup:root main .card>.card-body{padding-top:0!important;padding-bottom:0!important}
  html.crm-im-popup:root main form>.title-wth-divider.title-xs{margin:10px 0 6px!important}
  html.crm-im-popup:root main form>.title-wth-divider.title-xs:first-child{margin-top:0!important}
  html.crm-im-popup:root main form>.row>*{flex:0 0 25%!important;width:25%!important;max-width:25%!important}
  html.crm-im-popup:root main form>.row>*>.mb-3{margin-bottom:10px!important}
  html.crm-im-popup:root main form .form-label{font-size:13px!important;line-height:1.3;margin-bottom:4px!important}
  html.crm-im-popup:root main form :is(.form-control,.form-select){min-height:38px!important;font-size:14px!important}
  html.crm-im-popup:root main form textarea.form-control{min-height:60px!important}
  html.crm-im-popup:root main form .form-text{display:block;font-size:12px!important;line-height:1.35!important;margin-top:3px!important}
  html.crm-im-popup:root main form .invalid-feedback{font-size:12px!important;line-height:1.35!important;margin-top:3px!important}
  html.crm-im-popup:root main form>.row>:has([id$="-accountName"]){flex-basis:36%!important;width:36%!important;max-width:36%!important}
  html.crm-im-popup:root main form>.row>:has([id$="-quelle"]){flex-basis:40%!important;width:40%!important;max-width:40%!important}
  html.crm-im-popup:root main form>.row>:is(:has([id$="-status"]),:has([id$="-verlustgrund"]),:has([id$="-emailAddress"]),:has([id$="-website"]),:has([id$="-addressCity"])){flex-basis:24%!important;width:24%!important;max-width:24%!important}
  html.crm-im-popup:root main form>.row>:is(:has([id$="-assignedUserId"]),:has([id$="-telLand"])){flex-basis:52%!important;width:52%!important;max-width:52%!important}
  html.crm-im-popup:root main form>.row>:is(:has([id$="-bundesland"]),:has([id$="-fachrichtung"]),:has([id$="-ansprechpersonRolle"])){flex-basis:28%!important;width:28%!important;max-width:28%!important}
  html.crm-im-popup:root main form>.row>:is(:has([id$="-addressPostalCode"]),:has([id$="-firstName"])){flex-basis:20%!important;width:20%!important;max-width:20%!important}
  html.crm-im-popup:root main form>.row>:has([id$="-addressStreet"]){flex-basis:30%!important;width:30%!important;max-width:30%!important}
  html.crm-im-popup:root main form>.row>:has([id$="-icpScore"]){flex-basis:18%!important;width:18%!important;max-width:18%!important}
  html.crm-im-popup:root main form>.row>:has([id$="-salutationName"]){flex-basis:14%!important;width:14%!important;max-width:14%!important}
  html.crm-im-popup:root main form>.row>:has([id$="-lastName"]){flex-basis:22%!important;width:22%!important;max-width:22%!important}
  html.crm-im-popup:root main form>.row>:has([id$="-title"]){flex-basis:16%!important;width:16%!important;max-width:16%!important}
  /* Telefon: Land, Vorwahl, Nummer nebeneinander (leads.css stapelt sie unter 768 px) */
  html.crm-im-popup:root main form>.row>* .row>*{flex:0 0 auto!important}
  html.crm-im-popup:root main form>.row>* .row>:has([id$="-telLand"]){width:34%!important;max-width:34%!important}
  html.crm-im-popup:root main form>.row>* .row>:has([id$="-telVorwahl"]){width:22%!important;max-width:22%!important}
  html.crm-im-popup:root main form>.row>* .row>:has([id$="-telNummer"]){width:44%!important;max-width:44%!important}
  html.crm-im-popup:root main form .d-flex.border-top:has(button[type=submit]){margin-top:0;padding:10px 0!important}
  html.crm-im-popup:root main form .d-flex.border-top:has(button[type=submit]) .btn{min-height:40px!important}
}
/* Tablet mit Finger: Felder bleiben 44 px hoch, 16 px Schrift (kein Zoom beim Antippen) */
@media(min-width:700px) and (pointer:coarse){
  html.crm-im-popup:root main form :is(.form-control,.form-select){min-height:44px!important;font-size:16px!important}
}
/* Niedrige Fenster (Popup-Höhe ≤ 800 px, z. B. Laptop 1440×800 → 734 px): Untertitel weg, Abstände noch etwas enger. */
@media(min-width:700px) and (max-height:800px){
  html.crm-im-popup:root main .hk-pg-header p{display:none}
  html.crm-im-popup:root main form>.row>*>.mb-3{margin-bottom:6px!important}
  html.crm-im-popup:root main form>.title-wth-divider.title-xs{margin:4px 0 2px!important}
  /* Nachtest 2 (F1-03, 31.10.2026): bei 734 px Popup-Höhe blieben 12–28 px inneres Scrollen. Kopf, Karte, Felder und Fuß enger. */
  html.crm-im-popup:root .hk-pg-wrapper>main{padding-top:8px!important}
  html.crm-im-popup:root main .hk-pg-header .pg-title{font-size:18px!important}
  html.crm-im-popup:root main .card{margin-top:6px!important}
  html.crm-im-popup:root main form .form-label{margin-bottom:2px!important}
  html.crm-im-popup:root main form :is(.form-control,.form-select){min-height:36px!important}
  html.crm-im-popup:root main form textarea.form-control{min-height:44px!important}
  html.crm-im-popup:root main form .d-flex.border-top:has(button[type=submit]){padding:8px 0!important}
  html.crm-im-popup:root main form .d-flex.border-top:has(button[type=submit]) .btn{min-height:38px!important}
}