/* ==========================================================================
   KI Werk Vertrieb (/vertrieb): Oberflaeche "sales", Handy zuerst.
   Grundlage: kiwerk-ui.css (Tokens --kw-*, Komponenten kw-*). Diese Datei enthaelt nur, was das Kit nicht kennt:
   das Geruest der App (Kopf, Reiter unten/oben, Sheets), Karten der Pipeline und der Anrufliste, den Spickzettel.
   Farben stehen NUR als var(--kw-*), Schriftgrößen als var(--kw-fs-*). Ausnahme: die drei Eingabefelder-Regeln mit 16 px (input, Radiofelder des Filters,
   Import-Textfeld) bleiben feste Werte, weil iOS unter 16 px beim Fokussieren in die Seite zoomt; test_sales_pwa.py liest sie.
   Orange-Regel dieser Oberflaeche: Orange ist die EINE Hauptaktion der Ansicht (Kit-Taste kw-btn--primary) und das Logo.
   Hauptaktion eines Sheets oder Dialogs (die Ansicht dahinter ist gesperrt) ist dessen eigene orange Taste, eine
   destruktive Bestaetigung ist rot (kw-btn--danger). Reiterstrich, Zaehler, Ueberzeilen-Strich und Zitatbalken sind nie orange.
   Die Seite "Admin-Passwort setzen" nutzt seit dem Design-Programm das Kit und laedt diese Datei nicht mehr.
   ========================================================================== */

html { background: var(--kw-bg); }
/* Ein per Tastatur fokussiertes Element landet nie unter dem klebenden Kopf oder der festen Reiterleiste am Handy. */
html { scroll-padding-top: 80px; }
@media (max-width: 719px) { html { scroll-padding-bottom: calc(var(--sales-bar-h) + 16px); } }
[hidden] { display: none !important; }
input { font-size: 16px; } /* Eingabefelder mindestens 16 px, sonst zoomt iOS beim Fokussieren in die Seite. */

.kw { min-height: 100vh; min-height: 100dvh; --kw-marker: var(--kw-fg); } /* Marker (aktiver Reiter) sind Navy, nie Orange */
/* Höhe der festen Reiterleiste am Handy (Kit: 56 + 2 x 6 Innenabstand + 1 Linie) und der Ergebnis-Leiste; Toast, Leiste und Scroll-Rand richten sich danach.
   Auf :root, damit auch scroll-padding (am Seitenelement) sie kennt; die Höhe der Leiste misst das Skript. */
:root { --sales-bar-h: calc(69px + env(safe-area-inset-bottom, 0px)); --sales-tray-h: 72px; }
@media (min-width: 720px) { :root { --sales-bar-h: 0px; } }

/* --- Anmeldung ----------------------------------------------------------- */

.login-shell.kw-auth { min-height: 100vh; min-height: 100dvh; }
.login-pitch { display: grid; gap: 16px; max-width: 520px; }
.login-pitch h1 { max-width: 16ch; }
.login-pitch .kw-lead { color: var(--kw-fg-2); }
.kw-auth__card h2 { margin-bottom: 4px; }
.password-row { position: relative; display: grid; }
.password-row .kw-input { padding-right: 112px; }
.password-toggle { position: absolute; top: 2px; right: 2px; min-height: 44px; }
.kw-msg:empty { display: none; }
.kw-msg--warn { color: var(--kw-warn); }
/* Was in dieser App gilt: drei Zeilen aus den Regeln der Anrufliste (keine Dekoration, nichts Neues versprochen) */
.login-rules { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.login-rules li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--kw-fs-body); line-height: 1.4; color: var(--kw-fg-2); }
.login-rules .kw-icon { flex: none; margin-top: 2px; color: var(--kw-fg-3); }
@media (max-width: 860px) {
  .login-pitch { gap: 12px; }
  .login-rules { display: none; }
}

/* --- Geruest: Kopf, Hinweisband, Inhalt ------------------------------------ */

.app-shell { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.app-shell.is-restricted { padding-bottom: 24px; }

.app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--kw-glass);
  border-bottom: 1px solid var(--kw-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Niedrige Fenster (bis 700 px Höhe, auch Telefone quer): der klebende Kopf braucht keine 68 px, die Fläche gehört dem Inhalt. */
@media (max-height: 700px) {
  .app-header { min-height: 60px; padding-block: max(8px, env(safe-area-inset-top, 0px)) 8px; }
  html { scroll-padding-top: 72px; }
}
.app-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-brand .kw-gear { --mark-gear: var(--kw-orange); }
.app-brand__over { margin: 0; font-size: var(--kw-fs-xs); font-weight: 650; letter-spacing: 0.09em; line-height: 1; text-transform: uppercase; color: var(--kw-fg-3); }
.app-header h1 { margin: 3px 0 0; font-size: var(--kw-fs-h3); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--kw-fg); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.avatar-button { --av: 44px; border: 0; cursor: pointer; font-family: inherit; }
.avatar-button:hover { background: var(--kw-navy-700); }

/* Das Konto-Menue haengt am Avatar (nicht am Fensterrand): die Huelle ist der Bezugspunkt. */
.account { position: relative; }
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px; /* ragt 8 px über den Avatar hinaus, damit die runde Ecke des Menüs am Tablet keinen Zipfel von "Einladung erstellen" freilässt */
  z-index: 30;
  display: grid;
  min-width: 248px;
  max-width: calc(100vw - 32px);
  gap: 2px;
  padding: 8px 8px 12px;
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-r-lg);
  background: var(--kw-surface);
  box-shadow: var(--kw-sh-3);
}
.account-menu__who { display: grid; gap: 2px; padding: 8px 12px 10px; border-bottom: 1px solid var(--kw-line); margin-bottom: 4px; }
.account-menu__who span { overflow: hidden; font-weight: 600; color: var(--kw-fg); text-overflow: ellipsis; }
.account-menu__who small { color: var(--kw-fg-3); font-size: var(--kw-fs-sm); }
.account-menu a, .account-menu button {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--kw-r-md);
  background: transparent;
  color: var(--kw-fg);
  font: inherit;
  font-weight: 550;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--kw-surface-hover); color: var(--kw-fg); }
.account-menu .kw-icon { color: var(--kw-fg-3); }

.net-banner { margin: 0; border-width: 0 0 1px; border-radius: 0; padding-inline: 16px; }
.net-banner > span { line-height: 1.4; }
.net-banner b { margin-right: 6px; }

.content { display: grid; grid-template-columns: minmax(0, 1fr); width: min(1040px, 100%); gap: 16px; margin: 0 auto; padding: 16px 16px 32px; }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.lead-card, .sheet-body, .detail-summary, .anlass-box, .script-step-block, .script-reader { grid-template-columns: minmax(0, 1fr); }

/* --- Reiter: unten am Handy (kw-tabbar), oben am Schreibtisch ----------------- */

.view-tabs { z-index: 40; grid-auto-columns: minmax(0, 1fr); }
.view-tabs button { min-width: 0; }
.view-tabs button > span:not(.kw-count) { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.view-tabs .tab-count { position: absolute; top: 3px; left: calc(50% + 6px); box-shadow: 0 0 0 2px var(--kw-surface); }
/* Der aktive Reiter ist am Handy immer gleich zu erkennen: Flaeche, dunkle Schrift, Navy-Marker oben. */
.view-tabs [aria-current="page"] { background: var(--kw-surface-2); font-weight: 700; }
.view-tabs [aria-current="page"]:hover { background: var(--kw-surface-2); }

@media (min-width: 720px) {
  .app-shell { padding-bottom: 0; }
  .app-header { padding-inline: max(32px, calc((100% - 1040px) / 2 + 32px)); }
  .content { padding: 28px 32px 56px; gap: 24px; }
  .view { gap: 24px; }
  .view-tabs {
    position: static;
    display: flex;
    gap: 4px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--kw-line);
    background: none;
  }
  .view-tabs button { display: inline-flex; flex-direction: row; min-height: 48px; padding: 0 16px; gap: 8px; font-size: var(--kw-fs-md); border-radius: var(--kw-r-md) var(--kw-r-md) 0 0; }
  .view-tabs .kw-icon { width: 20px; height: 20px; }
  .view-tabs [aria-current="page"], .view-tabs [aria-current="page"]:hover { background: none; }
  .view-tabs [aria-current="page"]::before { top: auto; bottom: -1px; left: 12px; right: 12px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .view-tabs .tab-count { position: static; box-shadow: none; }
  .net-banner { padding-inline: 32px; }
}

/* Auf niedrigen Telefonen (bis 700 px Höhe, z. B. 375 x 667) rückt der Inhalt enger zusammen, damit die Anruftaste der offenen Karte schon im ersten Bild steht. */
@media (max-width: 719px) and (max-height: 700px) {
  .content { gap: 10px; padding-top: 10px; }
  .view { gap: 10px; }
  .page-head__text { gap: 4px; }
  .call-section { gap: 10px; }
  .call-head { min-height: 0; padding-block: 10px; row-gap: 4px; }
  .call-body { padding-top: 0; }
  .call-main { gap: 10px; }
  .call-card.is-open .anlass-box { gap: 4px; padding-block: 10px; }
}

.due-link { justify-content: flex-start; gap: 12px; min-height: 52px; font-weight: 650; }
.due-link span { flex: 1; text-align: left; }
.due-link__go { color: var(--kw-fg-3); }
.due-link--blocked { border-color: var(--kw-bad-line); background: var(--kw-bad-bg); }
.due-link--blocked .kw-icon:first-child { color: var(--kw-bad); }

/* --- Seitenkopf, Abschnitte, Filter ------------------------------------------ */

/* "Einladung erstellen" ist die eine orange Aktion der Pipeline. Sie steht im Seitenkopf (am Handy ueber die volle Breite,
   unter dem Daumen erreichbar, nichts schwebt ueber den Karten). */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 16px; }
.page-head__text { display: grid; flex: 1 1 320px; gap: 6px; min-width: 0; }
.page-head h2 { margin: 0; text-wrap: balance; }
.page-head__sub { margin: 0; max-width: 56ch; font-size: var(--kw-fs-md); line-height: 1.45; color: var(--kw-fg-3); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--kw-target-gap); }
@media (max-width: 719px) {
  .page-head__actions, #openCreateButton { width: 100%; }
}

.lead-section { display: grid; gap: 14px; min-width: 0; }
#viewPipeline .lead-section { gap: 6px; }
.section-count { margin: 0; font-variant-numeric: tabular-nums; }
.list-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.list-meta .section-count { flex: 1 1 auto; min-width: 0; }
/* Die Text-Taste rückt mit ihrem Rand an die Kante der Spalte: schmaleres Innenmaß, damit neben ihr Zähler und Stand in einer Zeile Platz haben. */
.list-meta .kw-btn { margin-right: -8px; padding-inline: 8px; }
/* Zahlenzeile: Zähler und Stand sind zwei Teile, jeder in einer Zeile. Reicht der Platz nicht, steht der Stand in der nächsten Zeile. */
.stat-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-width: 0; margin: 0; }
.stat-line__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stat-line__item--stamp .kw-icon { flex: none; }
.btn-quiet { --_fg: var(--kw-fg-2); }
.btn-quiet:hover { color: var(--kw-fg); }
/* Ohne geladene Liste gibt es nichts zu suchen: nur der Fehler und "Erneut versuchen" stehen da. */
#viewPipeline.is-error .kw-search, #viewPipeline.is-error .list-meta { display: none; }
#viewPipeline.is-empty .kw-search { display: none; }
#viewCalls.is-error .call-filter, #viewCalls.is-error #callListCount, #viewCalls.is-error #openImportButton { display: none; }

/* --- Pipeline: Stufen und Einladungskarten ----------------------------------------------------------------------- */

/* Die Pipeline ist nach Stufen gruppiert (Zähler in der Gruppenzeile, Gruppen lassen sich zuklappen), damit neun Einladungen nicht
   neun gleiche Karten sind. Eine Karte ist ein Kopf (öffnet den Status, die ganze Karte ist Tippfläche), die Fortschrittsleiste und,
   nur wo ein Link erzeugt werden darf, eine ruhige Taste. */
.lead-list { display: grid; gap: 16px; min-width: 0; }
.lead-group { display: grid; gap: 12px; min-width: 0; }
.lead-group__heading { margin: 0; font: inherit; }
.lead-group__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 6px 8px 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--kw-line);
  border-radius: 0;
  background: transparent;
  color: var(--kw-fg);
  font: inherit;
  font-size: var(--kw-fs-title);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}
.lead-group__toggle:hover:not(:disabled) { background: var(--kw-surface-hover); }
.lead-group__toggle:disabled { cursor: default; }
.lead-group__label { display: grid; flex: 1; gap: 1px; min-width: 0; }
.lead-group__hint { font-size: var(--kw-fs-sm); font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--kw-fg-3); }
/* Zugeklappte Stufe: was darin wartet (Symbol + Wort je Zustand), jeder Eintrag in einer Zeile */
.lead-group__stages { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
.lead-group__stage { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lead-group__stage .kw-icon { flex: none; }
.lead-group__skeleton-head { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px 6px 2px; border-bottom: 1px solid var(--kw-line); }
.lead-group__icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--_gl); background: var(--_gb); color: var(--_gf); }
.lead-group__icon .kw-icon { width: 18px; height: 18px; }
.lead-group__icon--neutral { --_gb: var(--kw-neutral-bg); --_gl: var(--kw-neutral-line); --_gf: var(--kw-neutral); }
.lead-group__icon--info { --_gb: var(--kw-info-bg); --_gl: var(--kw-info-line); --_gf: var(--kw-info); }
.lead-group__icon--warn { --_gb: var(--kw-warn-bg); --_gl: var(--kw-warn-line); --_gf: var(--kw-warn); }
.lead-group__icon--good { --_gb: var(--kw-good-bg); --_gl: var(--kw-good-line); --_gf: var(--kw-good); }
.lead-group__icon--bad { --_gb: var(--kw-bad-bg); --_gl: var(--kw-bad-line); --_gf: var(--kw-bad); }
.lead-group__toggle .kw-count { font-variant-numeric: tabular-nums; }
.lead-group__chev { color: var(--kw-fg-3); transition: rotate var(--kw-t-base) var(--kw-ease); }
.lead-group__toggle[aria-expanded="true"] .lead-group__chev { rotate: 180deg; }

.lead-grid { display: grid; gap: 12px; min-width: 0; align-items: stretch; }
.lead-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; transition: border-color var(--kw-t-base) var(--kw-ease), box-shadow var(--kw-t-base) var(--kw-ease); }
.lead-card:hover { border-color: var(--kw-line-strong); box-shadow: var(--kw-sh-2); }
.lead-card > * { max-width: 100%; }
.lead-heading { width: 100%; margin: 0; font: inherit; }
.lead-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Die Tippfläche liegt über der ganzen Karte; die Taste "Link erzeugen" liegt darüber (z-index) und bleibt allein antippbar. */
.lead-head::after { content: ""; position: absolute; inset: 0; border-radius: var(--kw-r-lg); }
.lead-head:focus-visible { outline: none; }
.lead-head:focus-visible::after { outline: var(--kw-focus-width) solid var(--kw-focus); outline-offset: 2px; }
.lead-name { display: grid; gap: 2px; min-width: 0; }
.lead-title { overflow-wrap: anywhere; font-size: var(--kw-fs-lg); font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; color: var(--kw-fg); }
.lead-sub { font-size: var(--kw-fs-sm); line-height: 1.35; color: var(--kw-fg-3); overflow-wrap: anywhere; }
.lead-open { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 28px; color: var(--kw-fg-3); font-size: var(--kw-fs-sm); font-weight: 600; }
.lead-card:hover .lead-open { color: var(--kw-fg); }
/* Am Handy trägt der Pfeil den Hinweis "öffnet den Status"; das Wort bleibt für Screenreader im Namen der Taste. */
@media (max-width: 899px) {
  .lead-open__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.lead-pill { align-self: flex-start; }
/* Fortschritt: Leiste und Wort ("2 von 7 Schritten"), damit die Leiste nie allein lesen muss */
.lead-progress { display: grid; gap: 6px; width: 100%; }
.lead-progress__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0; font-size: var(--kw-fs-sm); color: var(--kw-fg-3); font-variant-numeric: tabular-nums; }
.lead-progress__caption b { font-weight: 650; color: var(--kw-fg-2); }
.lead-next { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--kw-fs-md); line-height: 1.45; color: var(--kw-fg-2); }
.lead-meta, .call-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: var(--kw-fs-sm); color: var(--kw-fg-3); }
.meta-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.meta-item .kw-icon { flex: none; }
.meta-good { color: var(--kw-good); }
.meta-warn { color: var(--kw-warn); font-weight: 600; }
/* "Link erzeugen" ist eine ruhige Taste im Standardstil: Die eine orange Aktion der Seite bleibt "Einladung erstellen". */
.lead-actions { position: relative; z-index: 1; display: flex; width: 100%; margin-top: auto; }
.lead-invite-button { flex: 1 1 auto; white-space: nowrap; }
@media (min-width: 600px) { .lead-actions { justify-content: flex-end; } .lead-invite-button { flex: 0 0 auto; } }
.lead-hold {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--kw-neutral-line);
  border-radius: var(--kw-r-md);
  background: var(--kw-neutral-bg);
  font-size: var(--kw-fs-sm);
  line-height: 1.45;
  color: var(--kw-fg);
}
.lead-hold .kw-icon { flex: none; margin-top: 1px; color: var(--kw-neutral); }
.lead-hold--warn { border-color: var(--kw-warn-line); background: var(--kw-warn-bg); }
.lead-hold--warn .kw-icon { color: var(--kw-warn); }
.lead-hold--bad { border-color: var(--kw-bad-line); background: var(--kw-bad-bg); }
.lead-hold--bad .kw-icon { color: var(--kw-bad); }

.skeleton-card { display: grid; gap: 12px; }
.lead-list .kw-empty, .call-list .kw-empty, .call-list .kw-alert { grid-column: 1 / -1; }
.kw-empty[role="alert"] { border-style: solid; border-color: var(--kw-bad-line); }

@media (min-width: 760px) {
  .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Anrufliste: Regeln, Sperr-Hinweis, Filter --------------------------------- */

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.rules-card > summary, .more-info > summary, .playbook-card > summary, .objection > summary, .art14-read > summary, .anlass-form > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rules-card > summary::after, .more-info > summary::after, .playbook-card > summary::after, .objection > summary::after, .art14-read > summary::after, .anlass-form > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 4px 3px 8px;
  border-right: 2px solid var(--kw-fg-3);
  border-bottom: 2px solid var(--kw-fg-3);
  rotate: 45deg;
  transition: rotate var(--kw-t-base) var(--kw-ease);
}
details[open] > summary::after { rotate: -135deg; margin-bottom: -3px; }

/* "Regeln" ist eine ruhige Zeile (der Satz, der vor jedem Anruf gilt), kein Seitentitel. */
.rules-card { border: 1px solid var(--kw-line); border-radius: var(--kw-r-md); background: var(--kw-surface); }
.rules-card > summary { min-height: 52px; padding: 0 14px; }
.rules-card > summary > .kw-icon { flex: none; color: var(--kw-fg-3); }
.rules-title { flex: 1; min-width: 0; font-size: var(--kw-fs-md); font-weight: 650; line-height: 1.3; color: var(--kw-fg); }
.rules-hint { flex: none; font-size: var(--kw-fs-sm); font-weight: 650; color: var(--kw-fg-3); }
.rules-body { display: grid; justify-items: start; gap: 8px; padding: 0 14px 12px; }
.rules-body p { margin: 0; padding: 12px 14px; border-radius: var(--kw-r-md); background: var(--kw-surface-2); font-size: var(--kw-fs-md); line-height: 1.55; color: var(--kw-fg-2); max-width: 68ch; }
.rules-body .kw-btn { margin-left: -12px; }
/* Am schmalen Handy tragen Symbol und Pfeil den Hinweis "hier stehen Regeln"; das Wort bleibt fuer Screenreader. */
@media (max-width: 480px) {
  .rules-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Ein Satz in einer Zeile (ab 375 px Breite), sonst steht "ist." allein in der zweiten Zeile; schmaler bricht er ausgewogen. */
  .rules-card > summary { gap: 10px; padding-inline: 12px; }
  .rules-title { font-size: var(--kw-fs-sm); text-wrap: balance; }
}
.more-info > summary { min-height: 44px; font-size: var(--kw-fs-md); font-weight: 600; color: var(--kw-fg); }
.more-info p { margin: 0 0 8px; max-width: 68ch; }

.calls-blocked { align-items: center; }
.calls-blocked p { margin-top: 0; }
.calls-blocked p + p { margin-top: 2px; }
/* Kopf der Anrufliste wie der der Pipeline (Seitentitel kw-h2, darunter die Zahlenzeile als Untertitel); darunter die Werkzeugleiste:
   der Filter und "Importieren" in einer Zeile. Bis 380 px bleibt von "Importieren" das Symbol (das Wort bleibt für Screenreader im Namen der Taste). */
.call-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.call-toolbar__import { flex: none; }
@media (max-width: 380px) {
  .call-toolbar__import-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .call-toolbar__import { min-width: var(--kw-tap); padding-inline: 10px; }
}
.call-toolbar__count { margin: 0; }
.call-toolbar__count:empty { display: none; }
.call-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; }
.call-filter label { padding: 0 10px; }
.call-filter input { font-size: 16px; } /* auch die unsichtbaren Radiofelder: alle Eingabefelder mindestens 16 px (Test) */
/* Am Schreibtisch stehen Filter und "Importieren" nebeneinander auf der linken Seite (nicht am rechten Rand, wo das Konto-Menü aufklappt und die Taste verdecken würde). */
@media (min-width: 720px) {
  .call-toolbar { grid-template-columns: minmax(0, 360px) auto minmax(0, 1fr); gap: 4px 12px; }
}

/* --- Gruppen der Anrufliste: derselbe Kopf wie die Stufen der Pipeline (.lead-group__*) ------------------------------ */
#callList.is-grouped { gap: 16px; }
.call-group__body { gap: 10px; }
.call-group__body[hidden] { display: none; }
.lead-group__toggle.is-static { cursor: default; }
.lead-group__toggle.is-static:hover { background: transparent; }

/* --- Anrufkarte: eine Karte ist offen (die, die dran ist), alle anderen sind eine Zeile ---------------------- */

.call-list { display: grid; gap: 10px; min-width: 0; align-items: start; }
.call-card { --kw-pad: 0; display: block; min-width: 0; scroll-margin-top: 4px; transition: box-shadow var(--kw-t-base) var(--kw-ease), border-color var(--kw-t-base) var(--kw-ease); }
.call-card.is-open { border-color: var(--kw-line-strong); box-shadow: var(--kw-sh-2); }
.call-title { margin: 0; font: inherit; }
.call-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name chev" "meta meta";
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  width: 100%;
  min-height: 68px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--kw-r-lg);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.call-head:hover { background: var(--kw-surface-hover); }
.call-card.is-open .call-head { border-radius: var(--kw-r-lg) var(--kw-r-lg) 0 0; }
.call-card.is-open .call-head:hover { background: transparent; cursor: default; }
.call-head__name { grid-area: name; overflow-wrap: anywhere; font-size: var(--kw-fs-title); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--kw-fg); }
.call-head__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: var(--kw-fs-sm); color: var(--kw-fg-3); }
.call-head__chev { grid-area: chev; flex: none; width: 24px; height: 24px; color: var(--kw-fg-3); transition: rotate var(--kw-t-base) var(--kw-ease); }
.call-card.is-open .call-head__chev { rotate: 180deg; }

/* Der Körper der offenen Karte ist am Handy eine Spalte (Flex), nicht ein Raster: Die klebende Ergebnis-Leiste darf nur dann über den ganzen
   Körper kleben, wenn dieser ihr Bezugsrahmen ist (bei einem Rasterelement wäre es nur seine Zelle, und Browser handhaben das verschieden). */
.call-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 16px; }
.call-main, .call-read { display: grid; gap: 12px; align-content: start; min-width: 0; }
.call-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: var(--kw-r-md); background: var(--kw-surface-2); font-size: var(--kw-fs-sm); line-height: 1.45; color: var(--kw-fg-2); }
.call-note .kw-icon { flex: none; margin-top: 1px; color: var(--kw-fg-3); }
.call-note__text { margin: 0; }
.call-note--good { background: var(--kw-good-bg); color: var(--kw-fg); }
.call-note--good .kw-icon { color: var(--kw-good); }
.call-note--bad { background: var(--kw-bad-bg); color: var(--kw-fg); }
.call-note--bad .kw-icon { color: var(--kw-bad); }
.call-note--bad strong { color: var(--kw-bad); }

/* Anlass-Pflicht (Einschaetzung 3.1): Anlass und Vor-dem-Anruf-Hinweise, Sperre ohne Anlass */
.anlass-box { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--kw-r-md); background: var(--kw-surface-2); font-size: var(--kw-fs-md); color: var(--kw-fg-2); }
.anlass-box.is-missing { border: 1px solid var(--kw-bad-line); background: var(--kw-bad-bg); color: var(--kw-fg); }
.anlass-row { display: flex; align-items: flex-start; gap: 10px; }
.anlass-row .kw-icon { flex: none; margin-top: 2px; color: var(--kw-bad); }
.anlass-box.is-missing strong { color: var(--kw-bad); }
.anlass-line { display: flex; align-items: flex-start; gap: 10px; margin: 0; overflow-wrap: anywhere; line-height: 1.4; }
.anlass-line .kw-icon { flex: none; margin-top: 2px; color: var(--kw-fg-3); }
.anlass-line strong { color: var(--kw-fg); font-weight: 650; }
.anlass-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: var(--kw-fs-sm); line-height: 1.4; color: var(--kw-fg-3); }
.anlass-notice { margin: 0; font-size: var(--kw-fs-sm); line-height: 1.5; color: var(--kw-fg); }
.anlass-form { margin-top: 2px; color: var(--kw-fg); }
.anlass-form > summary { min-height: 44px; font-size: var(--kw-fs-sm); font-weight: 650; }
.anlass-form select, .anlass-form input { margin-top: 8px; }
.anlass-form button { width: 100%; margin-top: 8px; }
.anlass-form .field-hint { margin-top: 10px; }
.field-hint { margin: 0; font-size: var(--kw-fs-sm); line-height: 1.45; color: var(--kw-fg-3); }
/* Der Art.-14-Hinweis steht bei der offenen Karte aufgeklappt (er wird vor der Opt-in-Frage vorgelesen); am Schreibtisch
   daneben statt darunter, damit die Ergebnis-Tasten nicht weit unter die Anruftaste rutschen. */
.art14-read { padding: 0 14px 6px; border: 1px solid var(--kw-line); border-radius: var(--kw-r-md); background: var(--kw-surface-2); }
.art14-read > summary { min-height: 44px; font-weight: 650; color: var(--kw-fg); }
.art14-read p { margin: 2px 0 8px; font-size: var(--kw-fs-body); line-height: 1.55; color: var(--kw-fg); }

.call-button { gap: 12px; padding-inline: 16px; font-size: var(--kw-fs-call); letter-spacing: 0; }
@media (max-width: 360px) { .call-button { gap: 8px; font-size: var(--kw-fs-lg); } }
.call-number { font-variant-numeric: tabular-nums; }
.call-caption { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 0; font-size: var(--kw-fs-sm); line-height: 1.4; color: var(--kw-fg-3); }
.call-caption .kw-icon { flex: none; margin-top: 1px; }
.script-open { justify-self: start; padding-inline: 4px; gap: 6px; text-align: left; }

/* Ergebnis-Tasten: vier in einer Reihe (Symbol über dem Wort; Wort mindestens 14 px, Abstand mindestens 10 px). Am Handy stehen sie am Ende der
   Karte und kleben als Leiste unten über dem Reiter, sobald angerufen wurde oder die Anruftaste aus dem Bild gescrollt ist (Klasse is-stuck,
   vom Skript gesetzt). Davor ist die Anruftaste im ersten Bild nie verdeckt. Die Leiste hat in beiden Zuständen dieselben Maße, damit nichts springt. */
.call-actions { min-width: 0; }
.outcome-grid { --og: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--og); }
.outcome-grid .kw-btn {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: var(--kw-tap-lg);
  padding: 6px 0;
  border-radius: var(--kw-r-md);
  font-size: var(--kw-fs-sm);
  line-height: 1.15;
}
/* "Kein Interesse" löscht und sperrt: eine feine Linie trennt die Taste von den dreien davor. */
.outcome-grid .kw-btn.danger::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: calc(var(--og) / -2 - 0.5px); width: 1px; background: var(--kw-line-strong); }
@media (min-width: 560px) { .outcome-grid { --og: var(--kw-target-gap); } .outcome-grid .kw-btn { font-size: var(--kw-fs-md); padding-inline: 8px; } }
/* Schmale Telefone (bis 371 px): Am Ende der Karte stehen die Tasten zwei mal zwei, Symbol links, volles Wort. Klebt die Leiste (is-stuck), soll sie
   so wenig Bild belegen wie möglich: dann vier in einer Reihe, über die ganze Breite des Geräts (6 px Rand), Symbol über dem Wort, und bei den zwei langen
   Tasten nur das erste Wort ("Rückruf", "Opt-in"); das zweite bleibt für Screenreader im Namen der Taste (outcome-more). Das spart rund 45 px Höhe. */
@media (max-width: 371px) {
  .outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome-grid .kw-btn { flex-direction: row; gap: 8px; min-height: 52px; padding: 6px 8px; }
  .outcome-grid .kw-btn.danger::before { display: none; }
  .call-actions.is-stuck { margin-inline: -26px; }
  .call-actions.is-stuck .outcome-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .call-actions.is-stuck .outcome-grid .kw-btn { flex-direction: column; gap: 4px; min-height: var(--kw-tap-lg); padding: 6px 0; }
  .call-actions.is-stuck .outcome-grid .kw-btn.danger::before { display: block; }
  .call-actions.is-stuck .outcome-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 899px) and (min-height: 521px) {
  .call-actions { margin-inline: -12px; padding: 6px 4px; border: 1px solid transparent; border-radius: var(--kw-r-lg); }
  .call-actions.is-stuck {
    position: sticky;
    z-index: 6;
    bottom: calc(var(--sales-bar-h) + 8px);
    border-color: var(--kw-line-strong);
    background: var(--kw-surface);
    box-shadow: var(--kw-sh-3);
  }
  .app-shell.is-restricted .call-actions { --sales-bar-h: env(safe-area-inset-bottom, 0px); }
  /* Der Seitenrand unten hält Platz für die klebende Leiste, damit ein fokussiertes Feld oder ein Sprung nie darunter landet. */
  :root:has(.app-shell.has-tray) { scroll-padding-bottom: calc(var(--sales-bar-h) + var(--sales-tray-h) + 24px); }
  :root:has(.app-shell.is-restricted.has-tray) { scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sales-tray-h) + 24px); }
}
/* Ohne Netz sind die Tasten gesperrt und nur noch zum Lesen da: eine Leiste mit Zeile und Tasten darf nicht höher werden als nötig. */
.call-actions.is-offline .outcome-grid .kw-btn { min-height: var(--kw-tap); }
.tray-note { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 4px; font-size: var(--kw-fs-sm); font-weight: 600; line-height: 1.4; color: var(--kw-warn); text-wrap: balance; }
.tray-note .kw-icon { flex: none; }
.tray-note[hidden] { display: none; }
/* Rückrufblatt: die Schnellwahl und die Zeile mit Wochentag und Kurzdatum klären das Datum, das das Gerät im Feld unterschiedlich schreibt. */
/* Safari zentriert das Datum im Feld und macht es niedriger; links und in Feldhöhe liest es sich wie die übrigen Felder. */
#callbackDate { min-height: var(--kw-tap); text-align: left; }
#callbackDate::-webkit-date-and-time-value { text-align: left; }
.callback-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.callback-weekday { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; min-height: 24px; font-weight: 650; color: var(--kw-fg); }
.callback-weekday .kw-icon { flex: none; color: var(--kw-fg-3); }
.callback-weekday.is-past { color: var(--kw-warn); }
.callback-weekday.is-past .kw-icon { color: var(--kw-warn); }
.call-foot { display: flex; align-items: center; padding-top: 6px; border-top: 1px solid var(--kw-line); }
.call-card .link-danger { min-height: 44px; --_fg: var(--kw-bad); padding: 0 8px; font-size: var(--kw-fs-sm); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.call-card .link-danger:hover { color: var(--kw-bad); }
.call-body > .link-danger { align-self: flex-start; }

@media (min-width: 900px) {
  .call-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 28px; padding: 8px 24px 24px; }
  .call-body > .link-danger { justify-self: start; }
  .call-actions, .call-foot, .call-body > .call-note, .call-body > .link-danger { grid-column: 1 / -1; }
  .call-head { padding-inline: 24px; }
}

/* --- Liste pflegen: Einstieg in die Opt-in-Pruefung und die Sheets fuer Import und Verfall ---------- */

.manage-entry { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.manage-entry:hover { background: var(--kw-surface-hover); }
.manage-entry__ico { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--kw-warn-line); background: var(--kw-warn-bg); color: var(--kw-warn); }
.manage-entry__text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.manage-entry__text b { font-weight: 650; color: var(--kw-fg); }
.manage-entry__text small { font-size: var(--kw-fs-sm); color: var(--kw-fg-3); }
.manage-entry__go { flex: none; color: var(--kw-fg-3); }

.import-format { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--kw-line); border-radius: var(--kw-r-md); background: var(--kw-surface-2); font-size: var(--kw-fs-sm); line-height: 1.4; overflow-wrap: anywhere; color: var(--kw-fg-2); }
.import-field textarea { min-height: 148px; font-family: var(--kw-font-mono); font-size: 16px; line-height: 1.5; }
.import-preview { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--kw-fg-3); }
.import-preview .kw-icon { flex: none; margin-top: 2px; }
.import-preview.is-warn { color: var(--kw-warn); font-weight: 600; }
.import-sheet .more-info { margin: -4px 0; }
/* Die Regeln vor dem Import: drei kurze Zeilen mit Aufzaehlungspunkt, nicht ein Absatz */
.rule-list { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; list-style: disc; font-size: var(--kw-fs-sm); line-height: 1.5; color: var(--kw-fg); }
.rule-list li::marker { color: var(--kw-info); }
.import-rules { align-items: start; padding: 14px 16px; }

/* Ergebnis des Imports: ein Satz zum Ausgang, je Grund eine Zeile (was ist passiert, was ist zu tun) */
.import-result { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--kw-line); border-radius: var(--kw-r-md); background: var(--kw-surface-2); color: var(--kw-fg); }
.import-result:empty { display: none; }
.import-result.kw-msg--ok { border-color: var(--kw-good-line); background: var(--kw-good-bg); color: var(--kw-fg); }
.import-result.kw-msg--warn { border-color: var(--kw-warn-line); background: var(--kw-warn-bg); color: var(--kw-fg); }
.import-result.kw-msg--err { border-color: var(--kw-bad-line); background: var(--kw-bad-bg); color: var(--kw-fg); }
.import-result > .kw-icon, .import-result > span { margin: 0; }
.import-result__head { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--kw-fs-md); font-weight: 650; color: var(--kw-fg); }
.import-result.kw-msg--ok .import-result__head .kw-icon { color: var(--kw-good); }
.import-result.kw-msg--warn .import-result__head .kw-icon { color: var(--kw-warn); }
.import-result__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.import-result__list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--kw-fs-sm); font-weight: 400; line-height: 1.45; color: var(--kw-fg); }
.import-result__list .kw-icon { flex: none; margin-top: 2px; color: var(--kw-fg-3); }
.import-result__list b { font-weight: 650; }
.import-result__next { margin: 0; font-size: var(--kw-fs-sm); line-height: 1.45; font-weight: 400; color: var(--kw-fg); }
.optin-expiry-card { display: grid; gap: 12px; }
.optin-expiry-none { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--kw-r-md); background: var(--kw-surface-2); color: var(--kw-fg-2); }
.optin-expiry-none .kw-icon { flex: none; margin-top: 2px; color: var(--kw-fg-3); }

/* --- Spickzettel ------------------------------------------------------------------ */

.playbook-card > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 6px; min-height: 56px; font-size: var(--kw-fs-title); font-weight: 650; color: var(--kw-fg); }
.playbook-card > summary > .approval-badge { grid-column: 1; grid-row: 2; justify-self: start; }
.playbook-card > summary::after { grid-column: 2; grid-row: 1; }
@media (min-width: 720px) {
  .playbook-card > summary { grid-template-columns: minmax(0, 1fr) auto auto; }
  .playbook-card > summary > .approval-badge { grid-column: 2; grid-row: 1; }
  .playbook-card > summary::after { grid-column: 3; }
}
.playbook-card[open] > summary { margin-bottom: 8px; }
.approval-badge { text-align: left; }
.playbook-card > p, .playbook-card > ul, .playbook-card > blockquote, .playbook-card > .objection > p, .playbook-source-details > p { max-width: 78ch; }
.playbook-source-details { margin: 0 0 12px; }
.playbook-source { margin: 0 0 4px; font-size: var(--kw-fs-sm); line-height: 1.5; color: var(--kw-fg-3); }
.playbook-source code { padding: 1px 5px; border-radius: var(--kw-r-xs); background: var(--kw-surface-2); font-size: var(--kw-fs-sm); overflow-wrap: anywhere; }
.call-rule { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--kw-info-line); border-radius: var(--kw-r-md); background: var(--kw-info-bg); font-size: var(--kw-fs-md); line-height: 1.5; color: var(--kw-fg); }
.script-step { margin: 20px 0 8px; font-size: var(--kw-fs-xs); font-weight: 650; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; color: var(--kw-fg-3); }
/* Zitat: ruhiger Balken in der Linienfarbe (Orange ist Handlung, kein Schmuck) */
.playbook-card blockquote, .script-reader blockquote {
  margin: 0 0 12px;
  padding: 14px 16px;
  border-left: 4px solid var(--kw-line-strong);
  border-radius: 0 var(--kw-r-md) var(--kw-r-md) 0;
  background: var(--kw-surface-2);
  font-size: var(--kw-fs-title);
  line-height: 1.6;
  color: var(--kw-fg);
}
.art14-variants { margin: 0 0 12px; padding-left: 18px; list-style: disc; font-size: var(--kw-fs-sm); color: var(--kw-fg-3); }
.art14-variants li + li { margin-top: 4px; }
.objection { border-top: 1px solid var(--kw-line); }
.objection > summary { min-height: 48px; font-size: var(--kw-fs-md); font-weight: 650; color: var(--kw-fg); }
.objection p { margin: 0; padding: 0 0 14px; font-size: var(--kw-fs-md); line-height: 1.55; color: var(--kw-fg-2); }

/* --- Sheets: native <dialog>, am Handy unten, am Schreibtisch mittig ------------------ */

dialog.sheet {
  width: min(600px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - 16px);
  margin: auto auto 0;
  border-radius: var(--kw-r-xl) var(--kw-r-xl) 0 0;
}
dialog.sheet[open] { animation: sheet-in var(--kw-t-slow) var(--kw-ease); }
@keyframes sheet-in { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
.sheet-body { display: grid; gap: 16px; max-height: calc(100dvh - 16px); overflow-y: auto; padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.sheet-handle { width: 42px; height: 5px; margin: 0 auto; border-radius: 99px; background: var(--kw-line-strong); }
.sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-heading > div { display: grid; gap: 6px; min-width: 0; }
/* Das Schliessen-Kreuz bleibt ein 44-px-Ziel, auch neben langen Untertiteln (sonst staucht es der Flex-Platz). */
.sheet-heading > .kw-btn { flex: none; min-width: var(--kw-tap); }
.sheet-body > h2, .sheet-heading h2 { margin: 0; overflow-wrap: anywhere; font-size: var(--kw-fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--kw-fg); }
.detail-subtitle { margin: 0; font-size: var(--kw-fs-sm); color: var(--kw-fg-3); overflow-wrap: anywhere; }
.sheet-body > p { margin: 0; }
.confirm-dialog { width: min(480px, calc(100% - 32px)); }
.confirm-dialog .kw-dialog__body { justify-items: start; }

.create-steps .kw-step__t { margin: 0; }
.create-steps .kw-step p:not(.kw-step__t) { margin: 2px 0 0; }

.success-sheet .sheet-body { justify-items: center; text-align: center; }
.success-medal { margin-top: 4px; }
.invite-copy { max-width: 46ch; color: var(--kw-fg-2); line-height: 1.5; }
.invite-url { width: 100%; overflow-wrap: anywhere; padding: 14px; font-size: var(--kw-fs-sm); line-height: 1.5; text-align: left; cursor: pointer; border-radius: var(--kw-r-md); }
.action-grid { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: var(--kw-target-gap); }
@media (max-width: 480px) { .action-grid { grid-template-columns: minmax(0, 1fr); } }
.expiry { margin: 0; }

.detail-summary { display: grid; justify-items: start; gap: 10px; padding: 14px; border-radius: var(--kw-r-md); background: var(--kw-surface-2); }
.detail-summary p { margin: 0; font-size: var(--kw-fs-md); line-height: 1.5; color: var(--kw-fg-2); }
.technical-status { margin: 0; }
.technical-status dd { font-weight: 600; }
.detail-actions { display: grid; gap: var(--kw-target-gap); }
/* Beendeter Vorgang: der Schritt ist weder erledigt (kein gruenes Haekchen) noch offen; die uebrigen Schritte entfallen */
.kw-timeline li[data-s="off"] .kw-timeline__pt { border-color: var(--kw-line-strong); background: var(--kw-surface-2); color: var(--kw-fg-3); }
.kw-timeline li[data-s="off"] b { color: var(--kw-fg-3); font-weight: 500; }

.script-reader { display: grid; gap: 22px; }
.script-step-block { display: grid; gap: 8px; }
.script-step-block .script-step { margin: 0; }
.script-step-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.script-reader blockquote { margin: 0; font-size: var(--kw-fs-lg); line-height: 1.65; }
.script-reader .objection > p { font-size: var(--kw-fs-body); }

@media (min-width: 720px) {
  dialog.sheet { margin: auto; width: min(600px, calc(100% - 48px)); border-radius: var(--kw-r-xl); max-height: calc(100dvh - 48px); }
  .sheet-body { max-height: calc(100dvh - 48px); padding: 26px 28px 28px; }
  .sheet-handle { display: none; }
}
dialog.sheet::backdrop, .confirm-dialog::backdrop { background: var(--kw-scrim); }

/* --- Hinweisband kompakt (Vertriebskonto: Protokoll-Hinweis) --------------------------------------- */

.kw-alert--compact { padding: 8px 12px; gap: 10px; align-items: center; }
.kw-alert--compact p { font-size: var(--kw-fs-sm); line-height: 1.4; margin-top: 0; }
.kw-alert--compact .kw-alert__ico { transform: scale(0.9); }

/* --- Rueckmeldung: Toast liegt in einem Popover (ueber Sheets), ueber dem Reiter am Handy ------- */

.kw-toast-region[popover] { top: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; }
.app-shell:not(.is-restricted):not([hidden]) ~ .kw-toast-region { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.toast-text { font-size: var(--kw-fs-md); font-weight: 500; line-height: 1.4; color: var(--kw-white); }
.toast.error .toast-text { font-weight: 600; }
@media (min-width: 720px) {
  .app-shell:not(.is-restricted):not([hidden]) ~ .kw-toast-region { bottom: 16px; }
}
/* Steht unten die Ergebnis-Leiste, liegt der Toast über ihr, nie auf den Tasten. */
@media (max-width: 899px) and (min-height: 521px) {
  .app-shell.has-tray:not([hidden]) ~ .kw-toast-region { bottom: calc(var(--sales-bar-h) + var(--sales-tray-h) + 20px); }
  .app-shell.has-tray.is-restricted:not([hidden]) ~ .kw-toast-region { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sales-tray-h) + 20px); }
}