/* ==========================================================================
   Kundenportal - Oberflaechen-Glue auf dem Design-Kit (kiwerk-ui.css)
   Verbindlich: docs/design-system.md. Hier steht NUR, was das Kit nicht liefert: Ansichtswechsel, Anordnung der
   Portal-Karten und Feinheiten einzelner Bausteine. Farben, Abstaende, Radien und Schatten kommen ausschliesslich aus den
   Kit-Tokens (--kw-*); es gibt keine Rohfarben und keine alten Klassen (die alten Schichtregeln sind abgebaut).
   Aufbau: 1 Grundlage  2 Start und Anmeldung  3 Geruest  4 Uebersicht  5 Kurs  6 KI-Mitarbeiter  7 Hilfe
           8 Rechnungen  9 Anfragen  10 Einstellungen  11 Dialoge und Meldungen  12 Responsiv
   ========================================================================== */

/* ---- 1 Grundlage ------------------------------------------------------- */
/* Orange ist im Portal die eine Hauptaktion je Ansicht (und Marke: Logo, Marker, Fokusring), nie Linkfarbe und nie Zähler.
   Links (Alle ansehen, Zurück, Artikel) stehen in der Textfarbe; Pfeil und Unterstreichung zeigen, dass sie führen. */
.customer-portal-body{min-height:100vh;--kw-link:var(--kw-fg);--kw-link-hover:var(--kw-fg-2)}
.customer-portal-body .kw-link-arrow{text-decoration:underline;text-decoration-color:var(--kw-line-strong);text-decoration-thickness:1.5px;text-underline-offset:5px}
.customer-portal-body .kw-link-arrow:hover{text-decoration-color:currentColor}
.customer-portal-body .kw-btn--text{text-decoration:underline;text-decoration-color:var(--kw-line-strong);text-decoration-thickness:1.5px;text-underline-offset:4px}
.customer-portal-body .kw-btn--text:hover{text-decoration-color:currentColor}
.view{display:none}
.view.active{display:block}
.customer-main{margin-inline:auto}
.customer-main [id]{scroll-margin-top:96px}
.customer-portal-body .kw-page-head__sub{text-wrap:pretty}
.muted-inline{margin:0}
.kw-badge strong{font-weight:inherit}
.kw-empty__title{font-size:20px;line-height:1.3;letter-spacing:-.015em;color:var(--kw-fg);font-weight:650}
.kw-empty__tx{display:grid;justify-items:inherit;gap:6px}
/* Leerzustand: ein schlichtes Symbol im ruhigen Kreis statt Zahnrad-Medaillon (Marken-Muster stehen nur in Seitenleiste und Anmeldung). */
.customer-empty-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:4px;border-radius:50%;background:var(--kw-surface-2);border:1px solid var(--kw-line);color:var(--kw-fg-2)}
.customer-empty-ico .kw-icon{width:26px;height:26px}
.kw-empty--compact .customer-empty-ico{width:48px;height:48px}
.kw-empty--compact .customer-empty-ico .kw-icon{width:22px;height:22px}
.kw-empty--compact{padding:28px 20px;gap:8px}
.kw-card .kw-empty--compact{border:0;background:none;padding:20px 8px}
/* Hinweise tragen Tasten als Links (Telegram, KI-Werk-App): der Hinweis-Link setzt sonst die Textfarbe auf die Taste. */
.kw-alert a.kw-btn{text-decoration:none}
.kw-alert a.kw-btn--primary{color:var(--kw-on-action)}
/* Leerzustände in Karten: Titel kleiner als der Kartentitel, ein ruhiger Satz darunter. Überall gleich, immer zentriert. */
.kw-empty--compact .kw-empty__title{font-size:16px;font-weight:600;letter-spacing:-.005em}
.kw-empty--compact .kw-empty__tx>p:not(.kw-empty__title){font-size:14px;max-width:38ch}
.kw-empty .kw-btn-row{justify-content:center;margin-top:8px}
button.kw-link-arrow{padding:0;border:0;background:none;font-family:inherit;font-size:inherit;cursor:pointer}
.customer-form-error:empty{display:none}
.customer-form-error{margin-bottom:4px}
.customer-form-error .kw-alert{margin-bottom:12px}
.kw-opt{font-weight:400;color:var(--kw-fg-3)}
/* Gesperrte Felder und Tasten bleiben lesbar: Text in der Hinweisfarbe (5,5:1) statt 4,1:1 */
.customer-portal-body .kw-input[disabled],.customer-portal-body .kw-select[disabled],.customer-portal-body .kw-textarea[disabled]{color:var(--kw-fg-3);-webkit-text-fill-color:var(--kw-fg-3)}
/* Gesperrte Tasten bleiben lesbar (4,5:1): das Kit setzt den Text auf 4,08:1, im Portal steht er in der Hinweisfarbe. */
.customer-portal-body .kw-btn[disabled],.customer-portal-body .kw-btn[aria-disabled="true"]{--_fg:var(--kw-fg-3)}
.kw-card__head{flex-wrap:wrap;row-gap:8px}
.kw-channel__tx{flex:1 1 200px}
.kw-g12>*{min-width:0}
/* Unsichtbarer Text in der Tabelle (kw-sr) darf die Seite nicht verbreitern: der Tabellenrahmen schneidet ihn ab. */
.kw-table-wrap{position:relative}
code{padding:2px 6px;border-radius:var(--kw-r-xs);background:var(--kw-surface-2);border:1px solid var(--kw-line);color:var(--kw-fg-2);overflow-wrap:anywhere}

/* ---- 2 Start (Ladezustand) und Anmeldung ------------------------------- */
.customer-boot{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--kw-bg)}
.customer-boot__card{width:min(380px,100%);display:grid;gap:14px;justify-items:start;--kw-pad:28px}
.customer-boot__card .kw-skeleton{max-width:100%}

@media (min-width:861px){.customer-entry .kw-auth__brand{min-height:100vh}}
/* Die Anmeldung steht oben verankert (feste Oberkante): ein Fehlerhinweis schiebt nur die Felder darunter nach unten, der Titel springt nicht. */
@media (min-width:861px){.customer-entry .kw-auth__form{align-content:start;padding-top:clamp(48px,13vh,140px)}}
#customerLoginTitle{font-size:clamp(1.625rem,1.3rem + 1vw,1.9375rem)}
.entry-visual-copy{max-width:520px}
.entry-visual-copy .kw-over{color:var(--kw-fg-3)}
.customer-claim{margin-top:18px;max-width:14ch;font-size:clamp(2.25rem,1.6rem + 2.4vw,3.5rem)}
.entry-visual-copy .kw-lead{margin-top:18px}
.entry-panel-top{display:grid;gap:8px}
.customer-login-notice:empty{display:none}
#customerLoginIntro.is-notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--kw-r-md);background:var(--kw-info-bg);border:1px solid var(--kw-info-line);color:var(--kw-fg);font-weight:550}
#customerLoginIntro.is-notice .kw-icon{margin-top:2px;color:var(--kw-info)}
.entry-form[hidden]{display:none}
.entry-login-panel{display:grid;gap:18px}
.entry-credentials{border:0;padding:0}
.entry-credentials>summary{display:flex;align-items:center;gap:10px;min-height:var(--kw-tap);list-style:none;font-weight:600;color:var(--kw-fg);cursor:pointer}
.entry-credentials>summary::-webkit-details-marker{display:none}
.entry-credentials>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:-45deg;margin:0 4px 0 6px;transition:rotate var(--kw-t-base) var(--kw-ease)}
.entry-credentials[open]>summary::before{rotate:45deg}
.entry-credentials>summary:focus-visible{outline:var(--kw-focus-width) solid var(--kw-focus);outline-offset:2px;border-radius:var(--kw-r-sm)}
.entry-form.invite-mode .entry-credentials>summary::after{content:"optional";font-weight:400;color:var(--kw-fg-3);font-size:14px}
/* Mit E-Mail ist das Feld-Paar der eigentliche Inhalt: die Ueberschrift der Gruppe bleibt fuer Screenreader, nicht fuer das Auge. */
.entry-form:not(.invite-mode) .entry-credentials>summary{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.entry-credentials-fields{padding-top:4px}
/* Online-Start: eine ruhige Zeile unter der Anmeldung (nur, wenn /start Anmeldungen annimmt). */
.entry-signup{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--kw-line);font-size:15px;color:var(--kw-fg-2);text-align:center}
.entry-signup a{display:inline-flex;align-items:center;min-height:var(--kw-tap);padding:0 4px;font-weight:650;color:var(--kw-fg)}

/* ---- 3 Geruest: Seitenleiste, Kopfleiste, Tab-Leiste ------------------- */
.customer-app{background:var(--kw-bg)}
.customer-stage{min-width:0;display:flex;flex-direction:column}
.customer-main{flex:1;width:100%}
/* Das Kit setzt overflow:hidden auf die Seitenleiste; das hebt die klebende Innenleiste auf (sie bliebe beim Scrollen oben stehen
   und die Seitenleiste wirkte leer). Das Zuschneiden des Musters macht schon .kw-sidebar__in. */
.customer-sidebar{overflow:visible}
:root[data-theme="dark"] .customer-sidebar{border-right:1px solid var(--kw-line)}
:root[data-theme="dark"] .customer-team-panel{background:var(--kw-navy-950);border-color:var(--kw-line-strong)}

.customer-sidebar-brand{padding-bottom:6px}
.customer-sidebar .customer-sidebar-brand .kw-brand{padding:6px 12px 0;min-height:0}
.customer-sidebar-product{display:block;padding:4px 12px 14px 56px;font-size:var(--kw-fs-xs);letter-spacing:.09em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
.customer-sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin-inline:-16px;padding:4px 16px}
.customer-navigation{display:grid;gap:4px}
.customer-navigation .kw-nav__group{margin:0}
.customer-nav-item{appearance:none;-webkit-appearance:none;width:100%;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer}
.customer-nav-item>span:first-of-type{min-width:0}
/* Zähler in der Navigation sind Information, kein Alarm: ruhige Fläche statt Orange. */
.customer-nav-badge{background:var(--kw-surface-active);color:var(--kw-fg)}
.customer-switcher{display:grid;gap:6px;padding:0 4px 12px}
.customer-switcher .kw-select{min-height:var(--kw-tap)}
.customer-account-avatar{--av:40px}
.customer-sidebar-account .kw-account__tx b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-sidebar-account{cursor:default}

.customer-topbar{gap:16px}
.customer-top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.customer-topbar-context #customerNameLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36ch}
.customer-search-trigger{display:inline-flex;align-items:center;gap:10px;width:280px;min-height:48px;padding:0 12px 0 14px;border:1.5px solid var(--kw-line-strong);border-radius:var(--kw-r-md);background:var(--kw-field-bg);color:var(--kw-fg-3);font-family:inherit;font-size:15px;text-align:left;cursor:pointer}
.customer-search-trigger:hover{border-color:var(--kw-fg)}
.customer-search-trigger::after{content:attr(data-shortcut);margin-left:auto;padding:3px 6px;border-radius:var(--kw-r-xs);border:1px solid var(--kw-line-strong);background:var(--kw-surface);color:var(--kw-fg-3);font:600 12px/1 var(--kw-font-mono)}
.customer-bell__count{position:absolute;top:-7px;right:-7px;pointer-events:none;border:2px solid var(--kw-bg);background:var(--kw-strong-bg);color:var(--kw-strong-fg)}
.customer-logout .kw-icon{width:18px;height:18px}
/* Der Offline-Hinweis bleibt unter der Kopfleiste stehen, auch wenn man in einer langen Ansicht nach unten gescrollt hat (Desktop und Handy). */
.customer-offline-banner{position:sticky;top:72px;z-index:25;margin:0;padding-inline:40px;border-radius:0;border-width:0 0 1px;box-shadow:var(--kw-sh-1)}
.customer-offline .customer-system-status{display:none}
.customer-offline-brief{display:none}
/* Das Band sagt den Grund einmal und klebt in jeder Breite; unter den gesperrten Tasten steht er nicht noch einmal, sondern bleibt für Screenreader da
   (aria-describedby an der Taste auf diesen Satz). */
.customer-offline-reason{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.customer-footer{margin-top:56px;border-top:1px solid var(--kw-line);padding-top:8px}

.customer-tabbar{display:grid}
.customer-tab-item,.customer-tab-more{appearance:none;-webkit-appearance:none}
.customer-tabbar .kw-notify-dot{pointer-events:none;background:var(--kw-fg-3)}

/* ---- 4 Uebersicht ------------------------------------------------------ */
.customer-system-status{margin-top:10px}
.customer-system-status .kw-status{font-size:14px}
.customer-next-step:not(:empty),.customer-usage-banner:not(:empty){margin-bottom:24px}
.customer-usage-banner .kw-alert{margin-bottom:0}
/* Karten einer Zeile sind gleich hoch (Team und Einrichtung, Paket und „Für dich“): Der Inhalt steht oben, ein Leerzustand mittig in der Karte,
   damit keine Karte ohne Gegenstück endet. */
.customer-dashboard-grid{align-items:stretch}
.customer-notice-panel{display:flex;flex-direction:column}
.customer-dashboard-notices{flex:1;display:flex;flex-direction:column}
.customer-dashboard-notices>.customer-notice-list{width:100%}
.customer-plan-panel{display:flex;flex-direction:column}
.customer-plan-panel #customerUsageOverview{flex:1;display:flex;flex-direction:column}
.customer-plan-panel .customer-plan-included{margin-top:auto}
.customer-meter{margin-bottom:16px}
/* Karte „Dein Paket“: Name und Testende stehen einmal, darunter der Verbrauch des Monats. */
.customer-plan-line{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin:0 0 4px}
.customer-plan-name{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--kw-fg)}
.customer-plan-note{font-size:15px;color:var(--kw-fg-3)}
.customer-usage-caption{display:block;margin:22px 0 10px;padding-top:18px;border-top:1px solid var(--kw-line)}
/* Hilfe: eine ruhige Zeile am Ende der Übersicht statt einer eigenen Karte */
.customer-help-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:28px;padding:16px 4px 0;border-top:1px solid var(--kw-line);font-size:15px;color:var(--kw-fg-2)}
.customer-help-line p{flex:1 1 420px;margin:0}
.customer-help-line strong{color:var(--kw-fg);font-weight:650}
.customer-help-line .kw-link-arrow{margin-left:auto;white-space:nowrap}
/* Karten ohne Inhalt (keine Rechnung, keine offene Anfrage): eine Zeile mit Titel und Satz, keine leere Fläche */
.customer-invoice-panel--none,.customer-notice-panel--none{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:18px}
.customer-invoice-panel--none>.kw-card__head,.customer-notice-panel--none>.kw-card__head{margin:0;flex:0 0 auto}
.customer-invoice-panel--none>.kw-card__head .kw-card__sub,.customer-notice-panel--none>.kw-card__head .kw-card__sub{display:none}
.customer-invoice-panel--none>.kw-card__head .kw-link-arrow,.customer-notice-panel--none>.kw-card__head .kw-link-arrow{display:none}
.customer-invoice-panel--none>div:not(.kw-card__head),.customer-notice-panel--none>div:not(.kw-card__head){flex:1 1 360px;min-width:0}
.customer-invoice-none,.customer-strip-none{display:flex;align-items:center;gap:12px;margin:0;color:var(--kw-fg-2);font-size:15px}
.customer-invoice-none .kw-icon,.customer-strip-none .kw-icon{flex:none;width:22px;height:22px;color:var(--kw-fg-3)}
.customer-invoice-none strong,.customer-strip-none strong{color:var(--kw-fg);font-weight:650}
.customer-plan-included{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--kw-line)}
/* 80 % ohne eigenes Band (oben steht ein Einrichtungsschritt): der Ausweg steht hier bei der Zahl, als ruhiger Satz mit Textlink. */
.customer-plan-advice{display:grid;gap:2px;justify-items:start}
.customer-plan-advice p{margin:0}
.customer-plan-advice .kw-btn--text{margin-left:-10px}

/* Hauptkarte Navy: Dein KI-Team (glatt, ohne Muster) */
.customer-team-panel{display:flex;flex-direction:column;--kw-link:var(--kw-fg);--kw-link-hover:var(--kw-fg-2)}
.customer-team-inner{position:relative;display:flex;flex-direction:column;flex:1}
/* Ist die Nachbarkarte höher, verteilt sich der Zuwachs auf die Abstände zwischen den Blöcken (Zeilen, Kanäle, Fuß), statt als leere Fläche vor dem Fuß zu stehen. */
.customer-team-list{display:flex;flex-direction:column;justify-content:space-between;gap:20px;flex:1}
.customer-team-rows{display:grid;gap:12px}
.customer-team-row{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 20px;align-items:center;gap:16px;width:100%;min-height:96px;padding:18px 20px;border:1px solid var(--kw-line);border-radius:var(--kw-r-md);background:var(--kw-surface);color:inherit;font-family:inherit;font-size:16px;text-align:left;cursor:pointer;transition:background var(--kw-t-base) var(--kw-ease),border-color var(--kw-t-base) var(--kw-ease)}
.customer-team-row:hover{background:var(--kw-surface-hover);border-color:var(--kw-line-strong)}
.customer-team-row:focus-visible{outline:var(--kw-focus-width) solid var(--kw-focus);outline-offset:2px}
.customer-team-person{display:flex;align-items:center;gap:14px;min-width:0}
.customer-team-name{display:grid;min-width:0}
.customer-team-name strong{color:var(--kw-fg);font-weight:650;line-height:1.3}
.customer-team-name span{font-size:14px;color:var(--kw-fg-3);line-height:1.4}
.customer-team-status{display:grid;justify-items:start;gap:4px}
/* Lange Zustände („7-Tage-Test beendet“) brechen im Kennzeichen um, statt in die Spalte daneben zu laufen. */
.customer-team-status .kw-badge{max-width:100%;white-space:normal;line-height:1.25;padding-block:4px}
.customer-team-activity{display:grid;gap:4px;min-width:0}
.customer-team-activity strong{font-size:15px;font-weight:600;color:var(--kw-fg);font-variant-numeric:tabular-nums}
.customer-cap{font-size:var(--kw-fs-xs);letter-spacing:.07em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
.customer-team-open{color:var(--kw-fg-3)}
.customer-channel-status{padding:2px 16px;border:1px solid var(--kw-line);border-radius:var(--kw-r-md);background:var(--kw-surface)}
.customer-channel-status .kw-channel{flex-wrap:wrap}
/* Die Zeile „Weiteren KI-Mitarbeiter anfragen“ ist der Fuß der Karte und bleibt unten, auch wenn die Nachbarkarte höher ist. */
.customer-team-add-row{padding-top:16px;border-top:1px solid var(--kw-line)}

/* Einrichtung. Ist die Nachbarkarte (Team) höher, wächst der Abstand der Schritte gleichmäßig mit; die Linie zwischen den Kreisen läuft mit. */
.customer-setup-panel{display:flex;flex-direction:column}
.customer-setup-panel #customerSetupOverview{flex:1;display:flex;flex-direction:column}
.customer-setup-panel .kw-card__head{margin-bottom:10px}
.customer-setup-score{display:flex;align-items:center;gap:16px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--kw-line)}
.customer-setup-score .kw-ring b{font-size:16px}
.customer-setup-score>span{display:grid;gap:2px;min-width:0}
.customer-setup-score strong{color:var(--kw-fg);font-size:17px;line-height:1.3;font-weight:650}
.customer-setup-score small{font-size:14px;color:var(--kw-fg-3)}
.customer-setup-list{flex:1;display:flex;flex-direction:column}
.customer-setup-list>.customer-setup-item{flex:1 0 auto}
/* Eine Achse je Zeile: Kreis, Titel und Taste sitzen oben an derselben Mittellinie (22 px). Die Linie läuft von der Unterkante des Kreises zum nächsten Kreis,
   auch wenn Titel oder Hinweis umbrechen (der Kreis wandert nicht in die Mitte der Zeile und die Linie läuft nie durch ihn). */
.customer-setup-item{grid-template-columns:32px minmax(0,1fr) auto;align-items:start;gap:12px;min-height:40px;padding-bottom:4px}
.customer-setup-item .kw-step__n{margin-top:4px}
.customer-setup-item::before{top:40px;bottom:-4px}
/* Lange Wörter („Freigabegrenzen“) trennen statt unter „Starten“ zu laufen, wenn die Karte schmal ist. */
.customer-setup-item .kw-step__t{padding-top:0;font-size:15px;line-height:20px;hyphens:auto;overflow-wrap:break-word}
.customer-step-main{min-width:0;padding-top:10px}
.customer-step-main p{margin:2px 0 0;font-size:13px;line-height:1.4;font-weight:500;color:var(--kw-fg-3)}
.customer-setup-item.kw-step--now .customer-step-main p{font-weight:650;color:var(--kw-fg)}
.customer-setup-item .customer-setup-start{white-space:nowrap}
.customer-setup-item .customer-setup-start{--_fg:var(--kw-fg);padding-inline:10px}
.customer-setup-item .customer-setup-start:hover{--_fg:var(--kw-fg)}

.kw-stat__sub .kw-badge{margin-right:6px}

/* Nutzung */
.customer-meter .kw-meter__mark[data-edge="start"] span{transform:none}
.customer-meter .kw-meter__mark[data-edge="end"] span{transform:translateX(-100%)}
.customer-meter .kw-meter__top{margin-top:4px}
.customer-usage-list{display:grid;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--kw-line)}
.customer-usage-row{display:grid;gap:8px}
.customer-usage-row>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.customer-usage-row strong{color:var(--kw-fg);font-weight:600}
.customer-usage-row span{color:var(--kw-fg-3);font-variant-numeric:tabular-nums}

/* Rechnungen auf der Uebersicht: die Tabelle sitzt randlos im Kartenpolster */
.customer-invoice-panel .kw-table th:first-child,.customer-invoice-panel .kw-table td:first-child{padding-left:0}
.customer-invoice-panel .kw-table th:last-child,.customer-invoice-panel .kw-table td:last-child{padding-right:0}

/* Hinweise */
.customer-notice-list{list-style:none}
.customer-recent{margin-top:22px;padding-top:18px;border-top:1px solid var(--kw-line)}
.customer-recent .kw-over{margin-bottom:6px}
.customer-recent .kw-list__ico{color:var(--kw-good);background:var(--kw-good-bg);border-color:var(--kw-good-line)}
.customer-notice-item{align-items:flex-start}
.customer-notice-item .kw-badge{align-self:center}
.customer-notice-item>.kw-icon:last-child{align-self:center}
.kw-rowbtn__main .customer-notice-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--kw-fg-2)}
.customer-notice-item .kw-list__ico{width:40px;height:40px;border-radius:var(--kw-r-md);background:var(--kw-surface-2);border:1px solid var(--kw-line);display:grid;place-items:center;flex:none}

/* Online-Test (Self-Service): Karte oben auf der Übersicht. Links Stand, Abbuchung und Tasten, rechts Telegram und KI-Werk-App.
   Am Handy stehen beide untereinander; der QR-Code für Telegram erscheint nur am Computer (am Handy öffnet die Taste Telegram direkt). */
.customer-trial-card{display:grid;gap:16px;margin-bottom:24px;--kw-pad:28px}
.customer-trial-card--split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"main side" "foot side";gap:16px 36px}
.customer-trial-card--split>.customer-trial-main{grid-area:main}
.customer-trial-card--split>.customer-trial-side{grid-area:side}
.customer-trial-card--split>.customer-trial-foot{grid-area:foot}
.customer-trial-main,.customer-trial-foot{display:grid;gap:14px;align-content:start;justify-items:start;min-width:0}
.customer-trial-title{margin:0;font-size:clamp(1.375rem,1.15rem + .8vw,1.75rem);line-height:1.2;letter-spacing:-.02em;font-weight:700;color:var(--kw-fg);text-wrap:balance}
.customer-trial-lead{margin:0;font-size:16px;line-height:1.5;color:var(--kw-fg-2);max-width:62ch;text-wrap:pretty}
.customer-trial-charge{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;width:100%;padding:14px 16px;border:1px solid var(--kw-warm-line);border-radius:var(--kw-r-md);background:var(--kw-warm);color:var(--kw-fg-2);font-size:15px;line-height:1.5}
.customer-trial-charge__ico{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--kw-warm-line);border-radius:50%;background:var(--kw-surface);color:var(--kw-fg-2)}
.customer-trial-charge p{margin:0}
.customer-trial-charge strong{color:var(--kw-fg);font-weight:650}
.customer-trial-charge p.customer-trial-charge__note{margin-top:4px;font-size:14px;color:var(--kw-fg-3)}
.customer-trial-member{display:flex;gap:8px;align-items:flex-start;margin:0}
.customer-trial-contact{margin:0}
.customer-trial-member .kw-icon{flex:none;margin-top:2px}
.customer-trial-feedback{width:100%}
.customer-trial-feedback:empty{display:none}
.customer-trial-side{min-width:0;padding-left:36px;border-left:1px solid var(--kw-line)}
.customer-trial-step{min-width:0}
.customer-trial-step p{max-width:52ch}
.customer-trial-step .kw-btn-row{margin-top:10px}
.customer-trial-step--app[data-app-state="failed"] .kw-step__n{border-color:var(--kw-warn);color:var(--kw-warn)}
.customer-trial-qr{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin:14px 0 0;padding:10px 14px 10px 10px;border:1px solid var(--kw-line);border-radius:var(--kw-r-md);background:var(--kw-surface)}
.customer-trial-qr img{display:block;flex:none;width:112px;height:112px;border-radius:var(--kw-r-xs)}
.customer-trial-qr figcaption{max-width:22ch;font-size:14px;line-height:1.45;color:var(--kw-fg-3)}
.customer-trial-data{display:grid;gap:6px;width:100%;padding-top:14px;border-top:1px solid var(--kw-line)}
.customer-trial-data__title{margin:0;font-size:15px;font-weight:650;color:var(--kw-fg)}
.customer-trial-data p{margin:0;font-size:15px;line-height:1.55;color:var(--kw-fg-2);max-width:70ch}
@media (max-width:860px),(pointer:coarse){.customer-trial-qr{display:none}}
@media (max-width:960px){
  .customer-trial-card--split{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"main" "side" "foot"}
  .customer-trial-side{padding:20px 0 4px;border-left:0;border-top:1px solid var(--kw-line);border-bottom:1px solid var(--kw-line)}
}
@media (max-width:640px){
  .customer-trial-card{--kw-pad:20px}
  .customer-trial-actions{width:100%}
  .customer-trial-actions .kw-btn{flex:1 1 100%}
}

/* ---- 5 Kurs und Einrichtung -------------------------------------------- */
/* Kopf der Kursseite auf demselben Zwölferraster wie der Inhalt: Der Fortschritt steht in der Breite der Seitenkarten darunter (gleiche Außenkante), unter 1201 px und am Handy in voller Breite. */
#customerCourse>.kw-page-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--kw-gap,24px);align-items:end}
#customerCourse>.kw-page-head>div:first-child{grid-column:1/9}
.course-progress-card{grid-column:9/13;width:auto;display:grid;gap:10px;align-content:start}
@media (max-width:1200px){
  #customerCourse>.kw-page-head{gap:20px}
  #customerCourse>.kw-page-head>div:first-child,.course-progress-card{grid-column:1/-1}
}
.course-progress__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.course-progress__top strong{font-size:22px;letter-spacing:-.02em;color:var(--kw-fg);font-variant-numeric:tabular-nums}
.course-progress__top span{font-size:14px;color:var(--kw-fg-3)}
.course-progress-card small{font-size:13px;color:var(--kw-fg-3);line-height:1.4}
.customer-course-side{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-content:start}
.course-check-item{align-items:flex-start}
.course-check-item .kw-list__main{flex:1 1 180px}
.course-check-head{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.course-check-head b{display:inline;min-width:0}
.course-check-item .kw-list__main .kw-badge{display:inline-flex;font-size:13px;color:var(--_bf)}
.course-module-list{display:grid;gap:12px}
.course-module>summary{gap:14px}
.course-module-index{--av:36px;flex:none}
.course-module-head{display:grid;gap:2px;min-width:0;flex:1}
.course-module-head strong{font-size:17px;line-height:1.3;font-weight:650;color:var(--kw-fg)}
.course-module-head span{font-size:14px;color:var(--kw-fg-3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.course-module-meta{display:flex;gap:8px;flex:none}
.course-lesson-list{margin-bottom:8px}
.course-lesson{align-items:flex-start}
.course-lesson-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.course-lesson-copy>span{margin-top:2px}
.course-lesson-link{margin-top:2px;min-height:var(--kw-tap);font-size:15px}
.course-check-item.done .kw-list__ico{background:var(--kw-good-bg);border-color:var(--kw-good-line);color:var(--kw-good)}
.course-check-item .kw-badge{flex:none}
.course-policy-list{display:grid;gap:6px;padding-left:20px;list-style:disc;font-size:14px;color:var(--kw-fg-2)}

/* ---- 6 KI-Mitarbeiter (Detail) ----------------------------------------- */
.customer-detail-head .customer-back{margin:0 0 6px -12px}
/* Der Zustand des KI-Mitarbeiters steht einmal im Kopf: Kennzeichen, daneben nur, was es nicht schon sagt (Testende, Grund einer Pause). */
.customer-detail-state{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.customer-detail-state__text{font-size:16px;color:var(--kw-fg-2)}
/* Drei ruhige Zeilen statt zweier Spalten verschiedener Höhe: oben der Stand auf einen Blick, in der Mitte Chat und Telegram (gleich hoch), unten die weiteren
   Anbindungen über die ganze Breite. Ist Telegram der offene Handgriff und der Chat noch nicht angebunden (data-lead="telegram"), tauschen Telegram (breit) und Chat (schmal)
   die Plätze. Unter 1201 px wird daraus eine Spalte: Stand (zu, mit Kennzeichen), Chat, Telegram, Anbindungen; bei offenem Telegram-Schritt steht Telegram vor dem Chat. */
.customer-chat-shell{align-items:stretch}
.customer-detail-stand,.customer-detail-connect{grid-column:1/-1}
.customer-detail-chat,.customer-detail-telegram{grid-column:1/-1}
@media (min-width:1201px){
  .customer-detail-chat{grid-column:span 7}
  .customer-detail-telegram{grid-column:span 5}
  .customer-chat-shell[data-lead="telegram"] .customer-detail-telegram{grid-column:span 7;order:1}
  .customer-chat-shell[data-lead="telegram"] .customer-detail-chat{grid-column:span 5;order:2}
  .customer-chat-shell[data-lead="telegram"] .customer-detail-connect{order:3}
  /* Der schmale Chat (neben dem breiten Telegram-Schritt) stapelt Eingabe und Taste, damit das Feld nicht auf 150 px schrumpft. */
  .customer-chat-shell[data-lead="telegram"] .customer-message-form{grid-template-columns:minmax(0,1fr)}
  .customer-chat-shell[data-lead="telegram"] .customer-message-form .kw-btn{width:100%}
}
@media (max-width:1200px){
  .customer-chat-shell[data-lead="telegram"] .customer-detail-telegram{order:-1}
}
/* Stand auf einen Blick: Erreichbarkeit und Paket nebeneinander. Zugeklappt (Handy) zeigt die Kopfzeile beide Kennzeichen, aufgeklappt stehen sie in den Einzelheiten. */
.customer-stand-fold>summary>.customer-stand-glance{grid-area:b;display:flex;flex-wrap:wrap;gap:6px 14px;justify-self:end;margin-left:12px;font-size:14px;color:var(--kw-fg-3)}
.customer-stand-fold[open]>summary>.customer-stand-glance{display:none}
@media (max-width:640px){
  .customer-stand-fold>summary>.customer-stand-glance{justify-self:start;margin:10px 0 0;gap:8px 14px}
}
.customer-stand-glance__item{display:inline-flex;align-items:center;gap:8px}
@media (min-width:641px){
  .customer-stand-fold .customer-status-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-stand-fold .customer-status-item{border-top:0;padding:0 40px 0 0}
  .customer-stand-fold .customer-status-item+.customer-status-item{padding:0 0 0 40px;border-left:1px solid var(--kw-line)}
}
.customer-chat-panel{display:flex;flex-direction:column}
/* Das Chat-Fenster wächst mit, wenn die Nachbarkarte (Telegram) höher ist: Der Verlauf nimmt den Platz, die Eingabe bleibt unten. */
.customer-chat-panel .customer-message-list{flex:1 1 auto}
.customer-chat-hint{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:10px 14px;border-radius:var(--kw-r-md);background:var(--kw-info-bg);border:1px solid var(--kw-info-line);color:var(--kw-fg-2);font-size:14px;line-height:1.45}
.customer-chat-hint .kw-icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--kw-info)}
/* Pausiert (Monatslimit): an der Stelle des Anbindungs-Hinweises steht ein Kit-Hinweis mit der Anfrage als Hauptaktion. */
.customer-chat-hint--alert{display:block;padding:0;border:0;border-radius:0;background:none}
.customer-chat-hint--alert .kw-icon{width:20px;height:20px;margin-top:0;color:inherit}
.customer-message-list{display:flex;flex-direction:column;gap:12px;min-height:240px;max-height:520px;overflow-y:auto;padding:16px;border:1px solid var(--kw-line);border-radius:var(--kw-r-md);background:var(--kw-surface-2);margin-bottom:16px}
.customer-message-list.is-empty{min-height:0;margin-bottom:12px}
.customer-message-list.is-empty>.kw-empty{padding:12px 8px}
.customer-message-list:focus-visible{outline:var(--kw-focus-width) solid var(--kw-focus);outline-offset:2px}
.customer-message-list>.kw-empty{margin:auto;width:100%;background:none;border:0}
.customer-message{max-width:min(86%,560px);padding:12px 14px;border-radius:18px;border:1px solid var(--kw-line);background:var(--kw-surface);color:var(--kw-fg);overflow-wrap:anywhere}
.customer-message.assistant,.customer-message.operator{align-self:flex-start;border-bottom-left-radius:6px}
.customer-message.customer{align-self:flex-end;border-bottom-right-radius:6px;background:var(--kw-strong-bg);border-color:var(--kw-strong-bg);color:var(--kw-strong-fg)}
.customer-message.operator{background:var(--kw-info-bg);border-color:var(--kw-info-line)}
.customer-message__meta{display:flex;gap:4px 10px;flex-wrap:wrap;font-size:13px;line-height:1.4}
.customer-message__meta strong{font-weight:650}
.customer-message__meta span{color:var(--kw-fg-3)}
.customer-message.customer .customer-message__meta span{color:inherit;opacity:.8}
.customer-message p{margin:4px 0 0;white-space:pre-wrap;line-height:1.5}
.customer-message.streaming p::after{content:"";display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--kw-fg-3);vertical-align:baseline;animation:kw-pulse 1.4s ease-in-out infinite}
.customer-message-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.customer-message-form .customer-form-error{grid-column:1/-1}
.customer-message-form .kw-textarea{min-height:76px}
.customer-chat-unavailable:not([hidden]){margin-top:0}
.customer-status-cards{display:grid}
.customer-status-item{display:grid;align-content:start;gap:8px;padding:16px 0;border-top:1px solid var(--kw-line)}
.customer-status-item:first-child{border-top:0;padding-top:0}
.customer-status-item:last-child{padding-bottom:0}
.customer-status-item p{margin:0;font-size:14px;color:var(--kw-fg-2);line-height:1.5}
.customer-status-item__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px}
.kw-badge{max-width:100%}
.customer-status-item__head strong{color:var(--kw-fg);font-weight:650}
/* Kanäle und Geräte: die ganze Zeile ist die Handlung. Symbol, Titel mit Beschreibung (volle Breite) und Pfeil; eine Marke steht unter der Beschreibung. */
.setup-option-grid .kw-channel{align-items:flex-start;gap:14px;margin-inline:-12px;padding:14px 12px}
.setup-option-card--action{position:relative;cursor:pointer;transition:background var(--kw-t-base) var(--kw-ease)}
.setup-option-card--action:hover{background:var(--kw-surface-hover)}
/* Der Titel ist die Taste, ihre Fläche reicht über die ganze Zeile (Kartenlink-Muster). */
.customer-setup-action{appearance:none;-webkit-appearance:none;display:block;width:100%;min-height:24px;margin:-12px 0;padding:12px 0;border:0;background:none;color:var(--kw-fg);font:inherit;font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.customer-setup-action::after{content:"";position:absolute;inset:0}
.setup-option-card--action:has(.customer-setup-action:focus-visible){outline:var(--kw-focus-width) solid var(--kw-focus);outline-offset:-2px;border-radius:var(--kw-r-sm)}
@supports selector(:has(*)){.customer-setup-action:focus-visible{outline:none}}
.customer-setup-action:disabled{color:var(--kw-fg-3);cursor:not-allowed}
.customer-setup-action:disabled::after{cursor:not-allowed}
.setup-option-card--action:has(.customer-setup-action[aria-busy="true"]) .kw-channel__ico{border-style:dashed}
.customer-channel-body{display:grid;gap:8px;justify-items:start;flex:1;min-width:0}
.customer-channel-body .kw-channel__tx{width:100%}
.customer-channel-body .kw-channel__tx b{margin-top:2px}
.customer-channel-mark{display:block;font-size:14px}
.customer-channel-go{flex:none;align-self:center;color:var(--kw-fg-3);transition:translate var(--kw-t-base) var(--kw-ease)}
.setup-option-card--action:hover .customer-channel-go{color:var(--kw-fg);translate:2px 0}
.customer-telegram-card,.telegram-setup-card,.customer-session{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.customer-telegram-handle{font:600 15px/1.3 var(--kw-font-mono);color:var(--kw-fg)}
/* Weitere Anbindungen: eine ruhige Karte mit Kanälen und Geräten. Am Handy zu, am Desktop offen (siehe syncConnectPanel). */
.customer-detail-connect>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:3px;align-items:start;padding:16px 24px}
.customer-detail-connect[open]>summary{padding-bottom:14px}
.customer-detail-connect .kw-acc__chev{grid-column:2;grid-row:1/3;margin-top:4px}
.customer-connect-title{grid-column:1;margin:0;font-size:var(--kw-fs-lg);line-height:1.3;font-weight:650;letter-spacing:-.01em;color:var(--kw-fg)}
.customer-connect-sub{grid-column:1;font-size:14px;line-height:1.45;color:var(--kw-fg-3)}
.customer-connect-body{display:grid;gap:18px;padding:12px 24px 10px}
.customer-connect-group[hidden]{display:none}
.customer-connect-group .kw-over{margin:0}
.customer-session p,.customer-telegram-card p,.telegram-setup-card p{margin:0}
.wizard-step{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.wizard-step>p{font-size:15px}
.telegram-fallback{margin-top:4px}
.telegram-fallback>summary{min-height:var(--kw-tap);padding:8px 16px;font-size:15px}
/* Vorgeschlagener Bot-Name und Links stehen vollständig: bei wenig Platz rutscht die Taste unter das Feld statt den Namen abzuschneiden. */
.wizard-step .kw-copy,.customer-telegram-card .kw-copy{flex-wrap:wrap}
.wizard-step .kw-copy .kw-input,.customer-telegram-card .kw-copy .kw-input{font-size:14px}
/* Die Basis 230 px gilt nur in der Zeile: in der Spalte (unter 481 px, Kit) würde sie die Höhe des Feldes festlegen. */
@media (min-width:481px){.wizard-step .kw-copy .kw-input,.customer-telegram-card .kw-copy .kw-input{flex:1 1 230px}}

/* ---- 7 Hilfe ----------------------------------------------------------- */
.customer-help-tools{display:grid;gap:14px;margin-bottom:32px;max-width:760px}
/* Der lange Platzhalter der Suche bricht am Handy mit Auslassungspunkten ab statt mitten im Wort. */
#customerHelpSearch{text-overflow:ellipsis}
.customer-help-chips{padding:2px 0}
@media (min-width:641px){.customer-help-chips{flex-wrap:wrap;overflow:visible}}
.help-results{display:grid;gap:36px}
.help-category-group{display:block}
/* Themen sind Klappgruppen (am Desktop offen, am Handy zu): die Kopfzeile ist die Themenüberschrift mit Anzahl und Pfeil. */
.help-category-group>summary{display:flex;align-items:center;gap:12px;min-height:var(--kw-tap);padding:4px 0 8px;list-style:none;cursor:pointer;border-bottom:1px solid var(--kw-line)}
.help-category-group>summary::-webkit-details-marker{display:none}
.help-category-group>summary:focus-visible{outline:var(--kw-focus-width) solid var(--kw-focus);outline-offset:2px;border-radius:var(--kw-r-sm)}
.help-category-group>summary h2{flex:1;margin:0}
.help-category-count{font-size:14px;color:var(--kw-fg-3);font-variant-numeric:tabular-nums}
.help-category-group>summary .customer-fold__chev{color:var(--kw-fg-3);transition:rotate var(--kw-t-base) var(--kw-ease)}
.help-category-group>summary:hover .customer-fold__chev{color:var(--kw-fg)}
.help-category-group[open]>summary .customer-fold__chev{rotate:180deg}
.help-category-group>.help-article-list{margin-top:18px}
.help-article-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.help-article-card{display:flex;flex-direction:column;gap:8px;--kw-pad:20px;height:100%}
.help-article-card strong{color:var(--kw-fg);font-size:17px;line-height:1.35;font-weight:650;letter-spacing:-.01em}
.help-article-summary{font-size:14px;line-height:1.5;color:var(--kw-fg-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.help-article-arrow{display:inline-flex;margin-top:auto;padding-top:6px;color:var(--kw-fg-3)}
.help-article-arrow .kw-icon{width:18px;height:18px;transition:transform var(--kw-t-base) var(--kw-ease)}
.help-article-card:hover .help-article-arrow{color:var(--kw-fg)}
.help-article-card:hover .help-article-arrow .kw-icon{transform:translate(2px,-2px)}
.help-empty-state{max-width:640px}

/* ---- 8 Rechnungen ------------------------------------------------------ */
.customer-invoice-notice{margin-bottom:20px}
.customer-invoice-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:24px}
.customer-invoice-stats .kw-stat__sub .kw-badge{margin-right:0}
.customer-invoice-tablewrap .kw-table td strong{white-space:nowrap}
.customer-invoice-row .kw-badge{white-space:nowrap}
.customer-invoice-paidnote{display:none}
.customer-cell{display:block;text-align:right}
@media (max-width:640px){
  /* Hauptaktion und Rückfrage stehen untereinander (nebeneinander bräche die Beschriftung der Hauptaktion auf drei Zeilen). */
  .customer-invoice-notice .kw-alert__act{flex-direction:column;align-items:stretch}
  .customer-invoice-notice .kw-alert__act .kw-btn{flex:0 0 auto;width:100%}
  .customer-invoice-table .customer-cell small{display:inline;margin-left:6px}
  .customer-invoice-table td.kw-act{padding-top:12px}
  /* Eine bezahlte Rechnung hat keine Fälligkeit: die Zeile entfällt in der Karte statt „–“ zu zeigen. */
  .customer-invoice-table td.customer-cell-none{display:none}
}

/* ---- 9 Anfragen -------------------------------------------------------- */
.support-layout{align-items:start}
@media (min-width:1201px){.support-request-panel{position:sticky;top:96px}}
.support-thread-list{display:grid;gap:16px}
.customer-reference{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:12px 14px;border:1px solid var(--kw-line);border-radius:var(--kw-r-md);background:var(--kw-surface-2)}
.customer-reference__ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--kw-surface);border:1px solid var(--kw-line);color:var(--kw-fg)}
.customer-reference__ico .kw-icon{width:18px;height:18px}
.customer-reference__tx{display:grid;gap:2px;min-width:0}
.customer-reference__tx b{color:var(--kw-fg);font-weight:600;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.customer-reference__tx>span:last-child{font-size:13px;color:var(--kw-fg-3);line-height:1.4}
.customer-reference>.kw-btn{grid-column:2;justify-self:start;min-height:var(--kw-tap);margin-left:-12px}
.support-ticket{display:grid;gap:10px;padding:20px;border:1px solid var(--kw-line);border-radius:var(--kw-r-lg);background:var(--kw-surface)}
.customer-ticket__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.customer-ticket__head strong{color:var(--kw-fg);font-size:17px;line-height:1.35;font-weight:650;overflow-wrap:anywhere}
.customer-ticket__meta{margin:0;font-size:14px;color:var(--kw-fg-3)}
.support-ticket p{margin:0}
.support-thread{display:grid;gap:10px}
.support-thread-message{padding:12px 14px;border:1px solid var(--kw-line);border-radius:var(--kw-r-md);background:var(--kw-surface-2)}
.support-thread-message.operator{background:var(--kw-info-bg);border-color:var(--kw-info-line)}
.support-thread-message>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--kw-fg-3)}
.support-thread-message strong{color:var(--kw-fg);font-weight:650}
.support-thread-message p{margin:4px 0 0;color:var(--kw-fg-2);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.customer-ticket__actions{margin-top:2px}
.customer-counter{text-align:right}
.customer-counter.is-near{color:var(--kw-warn);font-weight:600}

/* ---- 10 Einstellungen -------------------------------------------------- */
/* Klappkarten (Einstellungen, Kurs-Seitenkarten): Kopfzeile aus Titel, Stand, Kennzeichen und Pfeil; am Desktop offen, am Handy zu (siehe syncFolds). */
.customer-fold>summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"t b c" "s b c";align-items:center;min-height:var(--kw-tap);list-style:none;cursor:pointer;border-radius:var(--kw-r-md)}
.customer-fold>summary::-webkit-details-marker{display:none}
.customer-fold>summary>.kw-card__title{grid-area:t;margin:0}
.customer-fold>summary>.kw-card__sub{grid-area:s;margin:2px 0 0}
.customer-fold>summary>.kw-badge{grid-area:b;justify-self:end;margin-left:12px}
.customer-fold>summary>.customer-fold__chev{grid-area:c;margin-left:12px;color:var(--kw-fg-3);transition:rotate var(--kw-t-base) var(--kw-ease)}
.customer-fold>summary:hover>.customer-fold__chev{color:var(--kw-fg)}
.customer-fold[open]>summary>.customer-fold__chev{rotate:180deg}
.customer-fold>summary:focus-visible{outline:var(--kw-focus-width) solid var(--kw-focus);outline-offset:6px}
.customer-fold[open]>summary{margin-bottom:var(--kw-s-4)}
.customer-fold__body>:first-child{margin-top:0}
.customer-settings-sections{min-width:0}
.customer-settings-sections>*{scroll-margin-top:96px}
.customer-settings-nav [hidden]{display:none}
.customer-privacy-summary{margin-bottom:16px;color:var(--kw-fg-2)}
.privacy-confirmation{align-items:flex-start;padding:16px;border:1px solid var(--kw-line);border-radius:var(--kw-r-md);background:var(--kw-surface-2);margin-bottom:16px;font-size:15px;line-height:1.55}
.privacy-confirmation .kw-check__tx{color:var(--kw-fg-2)}
/* Zustimmung in zwei Zeilen: beide gleich lesbar (das Kit setzt zweite Zeilen sonst klein und grau). */
.kw-check__tx.customer-consent{display:grid;gap:6px}
.kw-check__tx.customer-consent>span{display:block;font-size:15px;line-height:1.55;color:var(--kw-fg)}
#customerPrivacyReason{align-self:center}
.customer-contract-kv dt{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.customer-contract-kv dd small{font-size:14px;font-weight:500;color:var(--kw-fg-3)}
.customer-contract-total{font-weight:650}
.customer-stripe-billing>.kw-hint{margin-top:12px}
.customer-stripe-billing>.kw-btn-row{margin-top:14px}
.customer-stripe-billing .customer-trial-feedback:not(:empty){margin-top:12px}
.customer-member{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--kw-line)}
.customer-member:first-child{border-top:0;padding-top:0}
.customer-member__main{display:grid;flex:1;min-width:200px}
.customer-member__main strong{color:var(--kw-fg);font-weight:650}
.customer-member__main span{font-size:14px;color:var(--kw-fg-3);overflow-wrap:anywhere}
.field-sm{max-width:none}
/* Lange Angaben (E-Mail, Gewerk) stehen vollständig im Feld: einzeilig, bricht bei Bedarf um und wächst mit (siehe autosizeFields). */
.customer-autosize{min-height:48px;padding:10px 14px;resize:none;overflow:hidden;line-height:1.5;overflow-wrap:anywhere}
#accountingConnectionError.kw-alert{grid-template-columns:auto 1fr}

/* ---- 11 Dialoge und Meldungen ------------------------------------------ */
.customer-command-overlay{width:min(640px,calc(100% - 32px));margin:10vh auto auto;max-height:min(600px,82vh);padding:0;overflow:hidden}
.customer-command-palette{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:inherit}
.customer-command-input{margin:16px;min-height:52px}
.customer-command-results{display:grid;gap:8px;max-height:min(440px,58vh);overflow-y:auto;padding:0 16px 16px}
.customer-command-results .kw-over{margin:4px 0}
.customer-command-item .kw-rowbtn__main{display:grid}
.customer-command-empty{margin:8px 0 0;padding:16px;text-align:center;color:var(--kw-fg-3);font-size:15px}
.customer-confirm{width:min(480px,calc(100% - 32px))}
.customer-confirm__form{margin:0}
.customer-secret-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:var(--kw-scrim)}
.customer-secret-dialog{width:min(520px,100%);margin:0}
.customer-secret-dialog .kw-dialog__body{padding-bottom:16px}
.toast-host{pointer-events:none}
.toast-host .kw-toast{pointer-events:auto}
.customer-toast-text{font-size:15px;font-weight:600;line-height:1.4;color:var(--kw-white);overflow-wrap:anywhere}

/* ---- 12 Responsiv ------------------------------------------------------ */
@media (max-width:1200px){
  .customer-team-row{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 20px}
  .customer-team-activity{display:none}
  /* Neben der Seitenleiste (ab 1024 px) ist die Kopfleiste zu schmal für das lange Suchfeld: Es wird zur Taste, die Brotkrumen bleiben einzeilig. */
  .customer-search-trigger{width:var(--kw-tap);min-height:var(--kw-tap);padding:0;justify-content:center;gap:0}
  .customer-search-trigger .top-action-label,.customer-search-trigger::after{display:none}
}
@media (max-width:1023px){
  .customer-search-trigger{width:var(--kw-tap);min-height:var(--kw-tap);padding:0;justify-content:center;gap:0}
  .customer-search-trigger .top-action-label,.customer-search-trigger::after{display:none}
  .customer-logout{width:var(--kw-tap);padding:0}
  .customer-logout .top-action-label{display:none}
  .customer-top-actions{gap:8px}
  .customer-offline-banner{top:64px;padding-inline:16px}
  .customer-footer{margin-top:40px}
  .customer-boot__card{--kw-pad:24px}
}
@media (max-width:640px){
  /* Am Handy klebt das Offline-Band ebenfalls, aber knapp: die kurze Fassung in höchstens zwei Zeilen (14 px). Der Grund steht so einmal und ist in jeder Höhe der
     Seite zu sehen; die gesperrten Tasten wiederholen ihn nicht. Springt man per Anker, bleibt das Ziel unter Kopfleiste und Band sichtbar (scroll-padding am Ende dieser Datei). */
  .customer-offline-banner{padding:8px 16px;font-size:14px;line-height:1.35;min-height:0;align-items:flex-start}
  .customer-offline-banner .kw-icon{margin-top:2px}
  .customer-offline-long{display:none}
  .customer-offline-brief{display:inline}
  /* Rechnungen am Handy: eine Kachel (offen, mit der Zahl der bezahlten in der Zeile), die Karten darunter zeigen Fälligkeit und Status je Rechnung. */
  .customer-invoice-stats{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:16px}
  .customer-invoice-stats .kw-card.kw-stat{--kw-pad:16px}
  .customer-invoice-stats .kw-stat__value{font-size:26px;margin-top:6px}
  .customer-invoice-stats .kw-stat__label{font-size:13px}
  .customer-invoice-due,.customer-invoice-paid{display:none}
  .customer-invoice-paidnote{display:inline}
  body.customer-has-tabbar .kw-toast-region{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .customer-team-panel{--kw-pad:20px}
  .customer-team-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;padding:16px;min-height:0}
  .customer-team-person{grid-column:1/-1;padding-right:28px}
  .customer-team-activity{display:grid;grid-column:auto}
  .customer-team-open{position:absolute;right:16px;top:22px}
  .customer-message{max-width:92%}
  .customer-message-form{grid-template-columns:minmax(0,1fr)}
  .customer-message-form .kw-btn{width:100%}
  /* Rechnungen auf der Übersicht am Handy: eine Zeile je Rechnung (Nummer und Betrag, darunter Status und PDF) statt einer Karte mit Beschriftungen. */
  .customer-invoice-panel .kw-table--cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num tot" "st act";gap:4px 12px;align-items:center;padding:14px 0}
  .customer-invoice-panel .kw-table--cards td{display:block;padding:0;text-align:left}
  .customer-invoice-panel .kw-table--cards td::before{display:none}
  .customer-invoice-panel .kw-table--cards td:first-child{grid-area:num;padding:0}
  .customer-invoice-panel .kw-table--cards td[data-label="Gesamt"]{grid-area:tot;text-align:right}
  .customer-invoice-panel .kw-table--cards td[data-label="Status"]{grid-area:st}
  .customer-invoice-panel .kw-table--cards td.kw-act{grid-area:act;padding:0;text-align:right}
  .customer-fold>summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "s c" "b b"}
  .customer-fold>summary>.kw-badge{justify-self:start;margin:8px 0 0}
  .course-module>summary{padding:12px 16px;gap:12px;align-items:flex-start}
  .course-module-meta{display:none}
  .course-module .kw-acc__chev{margin-top:8px}
  .course-module-index{margin-top:2px}
  .kw-acc__body{padding:16px}
  .customer-counter{text-align:left}
  .customer-privacy-summary{font-size:15px}
  .customer-setup-item{gap:10px}
  /* Hilfe am Handy: eine Liste zum Überfliegen (Titel, zwei Zeilen Vorschau, Pfeil rechts) statt 30 hoher Karten. */
  .help-results{gap:0}
  .help-category-group>summary{min-height:56px;padding:6px 0}
  .help-category-group>.help-article-list{margin:14px 0 22px}
  .help-article-list{grid-template-columns:minmax(0,1fr);gap:10px}
  .help-article-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t a" "s a";column-gap:12px;row-gap:4px;align-items:center;--kw-pad:16px;height:auto}
  .help-article-card strong{grid-area:t;font-size:16px;line-height:1.35}
  .help-article-summary{grid-area:s;-webkit-line-clamp:2}
  .help-article-arrow{grid-area:a;padding:0;margin:0}
}
/* Übersicht am Handy: kurz bis zur ersten Handlung. Einrichtung zeigt Stand und Zahl (die Schritte klappen auf, der nächste steht schon im Hinweis oben),
   „Für dich“ nennt je Anfrage Titel, einen Satz und den Zustand, Rechnungen sind zweizeilig, Erledigtes steht auf den Unterseiten. Am Desktop bleibt alles sichtbar. */
.customer-setup-toggle{display:none}
.customer-setup-toggle .kw-icon{transition:rotate var(--kw-t-base) var(--kw-ease)}
.customer-setup-toggle[aria-expanded="true"] .kw-icon{rotate:180deg}
@media (max-width:640px){
  .customer-team-panel .kw-card__sub,.customer-setup-panel .kw-card__sub,.customer-plan-panel .kw-card__sub{display:none}
  .customer-setup-toggle{display:inline-flex;align-self:flex-start;margin:-2px 0 0 -10px}
  .customer-setup-panel:not([data-open]) .customer-setup-list{display:none}
  .customer-setup-panel:not([data-open]) .customer-setup-score{padding-bottom:6px;margin-bottom:0;border-bottom:0}
  .customer-setup-panel[data-open] .customer-setup-toggle{margin-bottom:6px}
  .customer-recent{display:none}
  .customer-notice-item .kw-rowbtn__main>span:last-child{display:none}
  .kw-rowbtn__main .customer-notice-text{-webkit-line-clamp:1}
  .customer-invoice-panel .customer-invoice-row.is-phone-hidden{display:none}
  /* Rechnung zweizeilig: oben Nummer und Zeitraum, darunter Zustand, Betrag und PDF. */
  .customer-invoice-panel .kw-table--cards tr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"num num num" "st tot act";gap:8px 12px;padding:12px 0}
  .customer-invoice-panel .kw-table--cards td:first-child small{display:inline;margin-left:8px}
  .customer-invoice-panel .kw-table--cards td[data-label="Gesamt"]{justify-self:end}
  .customer-invoice-panel .kw-table--cards td[data-label="Gesamt"] small{display:none}
  .customer-team-activity .customer-cap{white-space:nowrap}
}
@media (max-width:520px){
  /* Status und letzte Aktivität stehen nebeneinander in einer Zeile, je mit der Beschriftung darüber (statt zwei Zeilen untereinander). */
  .customer-team-row{grid-template-columns:auto minmax(0,1fr);gap:12px 14px}
  .customer-team-activity strong{font-size:14px;line-height:1.35}
  .customer-notice-item{flex-wrap:wrap}
  .customer-notice-item .kw-rowbtn__main{flex-basis:calc(100% - 58px)}
  .customer-notice-item .kw-badge{margin-left:54px}
  .customer-notice-item>.kw-icon:last-child{display:none}
}
@media (max-width:419px){
  .customer-topbar .kw-brand__word{display:none}
}
/* Bei 320 px stehen fünf Einträge in der Tab-Leiste: Schrift und Polster etwas kleiner, damit „Anfragen“ und „Rechnungen“ nicht aneinanderstoßen. */
@media (max-width:359px){
  .customer-tabbar{padding-inline:2px}
  .customer-tabbar .customer-tab-item,.customer-tabbar .customer-tab-more{font-size:11.5px;letter-spacing:-.01em}
}

/* Übersicht am Handy, zweiter Schritt: jede Karte sagt ihre Sache in einer Zeile oder wenigen Zeilen. Zweitsätze (`.customer-more`) gehören dem Desktop; was sie sagen,
   steht auf den Unterseiten. Das Paket zeigt Zahl, Balken und den einen Prognosesatz, die Kanäle des KI-Teams nur Name und Zustand, Rechnungen die offenen
   (sonst die neueste) mit „Alle ansehen“. */
@media (max-width:640px){
  .customer-more{display:none}
  .customer-dashboard-grid{--kw-gap:16px}
  .customer-team-list{gap:14px}
  .customer-team-rows{gap:10px}
  /* Kanäle des KI-Teams: eine Zeile mit Symbol, Name und Kennzeichen rechts (die Beschreibung steht nur am Desktop). */
  .customer-channel-status{padding-block:0}
  .customer-channel-status .kw-channel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t b";column-gap:12px;align-items:center;min-height:0;padding-block:10px}
  .customer-channel-status .kw-channel__ico{display:none}
  .customer-channel-status .kw-channel__tx{grid-area:t;flex:none}
  .customer-channel-status .kw-channel__tx>span{display:none}
  .customer-channel-status .kw-channel>.kw-badge{grid-area:b;justify-self:end}
  .customer-invoice-panel .kw-card__sub{display:none}
  .customer-invoice-panel .kw-card__head,.customer-notice-panel .kw-card__head{align-items:center;margin-bottom:8px}
  .customer-team-add-row{padding-top:12px}
  .customer-plan-panel .customer-plan-name{font-size:24px}
  .customer-plan-panel .customer-plan-note{font-size:14px}
  .customer-plan-panel .customer-plan-line{margin:0 0 2px}
  .customer-plan-panel .customer-usage-main{margin-top:12px;padding-top:14px;border-top:1px solid var(--kw-line)}
  .customer-plan-panel .customer-usage-caption{display:none}
  .customer-plan-panel .customer-meter{margin-bottom:0}
  .customer-plan-panel .kw-meter__note{margin-top:10px}
  .customer-invoice-panel--none,.customer-notice-panel--none{flex-wrap:nowrap;gap:14px;padding-block:14px}
  .customer-invoice-panel--none>div:not(.kw-card__head),.customer-notice-panel--none>div:not(.kw-card__head){flex:1 1 0}
  .customer-help-line{margin-top:20px;padding:12px 0 0;gap:0 12px;font-size:14px;flex-wrap:nowrap;justify-content:space-between}
  .customer-help-line p{flex:0 1 auto}
  .customer-help-line .kw-link-arrow{font-size:15px}
  /* Der Telegram-Link steht vollständig im Feld (14 px Festbreitenschrift schnitt das letzte Zeichen ab). */
  .wizard-step .kw-copy .kw-input,.customer-telegram-card .kw-copy .kw-input{font-size:13px;padding-inline:12px;text-overflow:ellipsis}
  /* Kopf: Verbindungsstand und „Neue Anfrage“ teilen sich eine Zeile unter der Begrüßung. */
  .customer-dashboard-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:0;align-items:center;margin-bottom:20px}
  .customer-dashboard-heading>div:first-child{display:contents}
  .customer-dashboard-heading .kw-over,.customer-dashboard-heading .kw-h1,.customer-dashboard-heading .kw-page-head__sub{grid-column:1/-1}
  /* Der Satz unter der Begrüßung („Der produktive Start steht noch aus“) sagt am Handy, was der Hinweis und die Einrichtungskarte darunter schon sagen. */
  .customer-dashboard-heading .kw-page-head__sub{display:none}
  .customer-dashboard-heading .customer-system-status{grid-column:1;grid-row:4;margin:10px 0 0}
  .customer-dashboard-heading .customer-head-actions{grid-column:2;grid-row:4;margin-top:10px;justify-self:end}
  .customer-dashboard-heading .customer-head-actions .kw-btn{padding-inline:14px}
  .customer-dashboard-heading .customer-system-status .kw-status{white-space:nowrap}
  /* Offline entfällt der Verbindungsstand (das Band sagt es): „Neue Anfrage“ steht dann links, nicht allein rechts. */
  .customer-offline .customer-dashboard-heading .customer-head-actions{grid-column:1/-1;justify-self:start}
  /* Mit „KI-Werk-App öffnen“ sind es zwei Tasten: Sie passen nicht neben den Verbindungsstand (der lief sonst unter die Tasten) und stehen
     darum in einer eigenen Zeile darunter. */
  .customer-dashboard-heading:has(#customerOverviewApp:not([hidden])) .customer-system-status{grid-column:1/-1}
  .customer-dashboard-heading:has(#customerOverviewApp:not([hidden])) .customer-head-actions{grid-column:1/-1;grid-row:5;justify-self:start}
}

/* Offline: Es gibt keine Hauptaktion. Tasten, die nur zu einer Seite führen (Neue Anfrage, Telegram verbinden, Starten), bleiben bedienbar, tragen aber keine orange
   Füllung: die Handlung dahinter ist gesperrt (flach, lesbar, mit Kurzgrund unter der Taste). Eine Regel für alle Ansichten. */
body.customer-offline .kw-btn--primary:not([disabled]),
body.customer-offline .kw-btn--primary:not([disabled]):active{--_bg:var(--kw-btn-bg);--_fg:var(--kw-fg);--_bd:var(--kw-btn-bd);color:var(--kw-fg)}
body.customer-offline .kw-btn--primary:not([disabled]):hover{--_bg:var(--kw-btn-hover-bg);--_fg:var(--kw-fg);--_bd:var(--kw-btn-hover-bd);color:var(--kw-fg)}

/* ---- 13 Raster der Übersicht (ab 1201 px) --------------------------------
   Lesepfad: Hinweis, dann Team und Einrichtung, dann Paket neben „Für dich“, zuletzt die Rechnungen über die ganze Breite (Tabelle oder eine
   schmale Zeile). Ohne Rechnungsfunktion (eigene Umgebung, data-layout="plain") entfällt die letzte Zeile.
   Darunter (Tablet, Handy) gilt die Reihenfolge des Dokuments: Team, Einrichtung, Für dich, Paket, Rechnungen. */
@media (min-width:1201px){
  .customer-dashboard-grid>.customer-team-panel{grid-area:team}
  .customer-dashboard-grid>.customer-setup-panel{grid-area:setup}
  .customer-dashboard-grid>.customer-notice-panel{grid-area:notice}
  .customer-dashboard-grid>.customer-plan-panel{grid-area:plan}
  .customer-dashboard-grid>.customer-invoice-panel{grid-area:invoices}
  .customer-dashboard-grid{
    grid-template-areas:
      "team team team team team team team team setup setup setup setup"
      "plan plan plan plan plan plan notice notice notice notice notice notice"
      "invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices";
    grid-template-rows:auto auto auto;
  }
  /* Eigene Umgebung (kein Verbrauch, keine Rechnungen): „Für dich“ breit, das Paket schmal daneben, keine Rechnungszeile. */
  .customer-dashboard-grid[data-layout="plain"]{
    grid-template-areas:
      "team team team team team team team team setup setup setup setup"
      "notice notice notice notice notice notice notice notice plan plan plan plan";
    grid-template-rows:auto auto;
  }
  .customer-dashboard-grid[data-layout="plain"][data-setup="done"]{
    grid-template-areas:
      "team team team team team team team team team team team team"
      "notice notice notice notice notice notice notice notice plan plan plan plan";
  }
  /* Alle Schritte erledigt: die Einrichtungskarte entfällt, das Team nimmt die ganze Breite. */
  .customer-dashboard-grid[data-setup="done"]{
    grid-template-areas:
      "team team team team team team team team team team team team"
      "plan plan plan plan plan plan notice notice notice notice notice notice"
      "invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices";
  }
}

/* Ohne offene Anfrage steht „Für dich“ als schmale Zeile unter dem Paket; das Paket nutzt die Breite (Name links, Verbrauch rechts). */
@media (min-width:1201px){
  .customer-dashboard-grid[data-notices="none"]{
    grid-template-areas:
      "team team team team team team team team setup setup setup setup"
      "plan plan plan plan plan plan plan plan plan plan plan plan"
      "notice notice notice notice notice notice notice notice notice notice notice notice"
      "invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices";
    grid-template-rows:auto auto auto auto;
  }
  .customer-dashboard-grid[data-notices="none"][data-setup="done"]{
    grid-template-areas:
      "team team team team team team team team team team team team"
      "plan plan plan plan plan plan plan plan plan plan plan plan"
      "notice notice notice notice notice notice notice notice notice notice notice notice"
      "invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices invoices";
  }
  .customer-dashboard-grid[data-notices="none"][data-layout="plain"]{
    grid-template-areas:
      "team team team team team team team team setup setup setup setup"
      "plan plan plan plan plan plan plan plan plan plan plan plan"
      "notice notice notice notice notice notice notice notice notice notice notice notice";
    grid-template-rows:auto auto auto;
  }
  .customer-dashboard-grid[data-notices="none"][data-layout="plain"][data-setup="done"]{
    grid-template-areas:
      "team team team team team team team team team team team team"
      "plan plan plan plan plan plan plan plan plan plan plan plan"
      "notice notice notice notice notice notice notice notice notice notice notice notice";
  }
  /* Links stehen Paketname und Testende mittig neben dem Verbrauch (Zeilen 2 bis 4 zwischen zwei Füllzeilen), ein Hinweis mit Ausweg (80 %) darunter. */
  .customer-dashboard-grid[data-notices="none"] .customer-plan-panel{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.2fr);column-gap:40px;grid-template-rows:1fr auto auto auto 1fr;align-items:start;align-content:start}
  .customer-dashboard-grid[data-notices="none"] .customer-plan-panel>.kw-card__head{grid-column:1;grid-row:2}
  .customer-dashboard-grid[data-notices="none"] .customer-plan-panel>.customer-plan-line{grid-column:1;grid-row:3}
  .customer-dashboard-grid[data-notices="none"] .customer-plan-panel>#customerUsageOverview{display:contents}
  .customer-dashboard-grid[data-notices="none"] .customer-usage-main{grid-column:2;grid-row:1/6;align-self:stretch;padding-left:40px;border-left:1px solid var(--kw-line)}
  .customer-dashboard-grid[data-notices="none"] .customer-usage-caption{margin-top:0;padding-top:0;border-top:0}
  .customer-dashboard-grid[data-notices="none"] .customer-plan-included{grid-column:1;grid-row:4;align-self:start;margin-top:14px;padding-top:14px}
}

/* Auf- und Zuklappen (Weitere Anbindungen, Klappkarten, Hilfe-Themen): der Inhalt gleitet in .28 s auf und zu, statt zu springen. Wo der Browser das nicht kann
   (kein ::details-content), klappt die Gruppe sofort. Mit reduzierter Bewegung gilt immer „sofort“ (siehe unten). */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .customer-detail-connect,.customer-fold,.help-category-group{interpolate-size:allow-keywords}
  :is(.customer-detail-connect,.customer-fold,.help-category-group)::details-content{block-size:0;overflow-y:clip;overflow-clip-margin:6px;transition:block-size var(--kw-t-slow) var(--kw-ease),content-visibility var(--kw-t-slow) var(--kw-ease) allow-discrete}
  :is(.customer-detail-connect,.customer-fold,.help-category-group)[open]::details-content{block-size:auto}
  /* Das Setzen des Anfangszustands (Desktop offen, Handy zu) gleitet nicht: nur die Wahl der Person. */
  details.is-syncing::details-content{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .customer-fold>summary>.customer-fold__chev,.help-category-group>summary .customer-fold__chev,.customer-channel-go{transition:none}
  :is(.customer-detail-connect,.customer-fold,.help-category-group)::details-content{transition:none}
  .customer-message.streaming p::after{animation:none}
  .entry-credentials>summary::before{transition:none}
}


/* === Stufe 4, Runde 2 (Kundenportal, 22.10.2026) ========================================================================================================== */

/* Überfällige Rechnung auf der Übersicht: ein Hinweis in einer Zeile über dem nächsten Schritt (Standardtaste, kein Orange). */
.customer-invoice-alert:not(:empty){margin-bottom:16px}
.customer-invoice-alert .kw-alert{margin-bottom:0}

@media (max-width:640px){
  .customer-invoice-alert .kw-alert{padding:12px 14px;gap:10px 12px}
  .customer-invoice-alert .kw-alert__ico{width:32px;height:32px}
  .customer-invoice-alert .kw-alert__title{font-size:15px}
  .customer-invoice-alert .kw-alert p{font-size:14px;line-height:1.4}

  /* Hinweis „nächster Schritt“ und Einrichtungskarte sind am Handy ein Gegenstand: Die Karte hängt als Fuß unter dem Hinweis (Zahl und Stand, Schritte auf Wunsch)
     statt als zweite Karte mit eigenem Kopf und Ring weiter unten zu stehen. Ohne offenen Schritt (startklar, Limit) gilt die normale Reihenfolge. */
  .customer-next-step[data-attached]:not(:empty){margin-bottom:0}
  .customer-next-step[data-attached] .kw-alert{border-bottom-width:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .customer-dashboard-grid[data-hint="step"]>.customer-setup-panel{padding:14px 18px 8px;border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent;box-shadow:none}
  .customer-dashboard-grid[data-hint="step"] .customer-setup-panel>.kw-card__head{display:none}
  .customer-dashboard-grid[data-hint="step"] .customer-setup-panel{--customer-ring:48px}
  .customer-dashboard-grid[data-hint="step"] .customer-setup-score{gap:14px}
  .customer-dashboard-grid[data-hint="step"] .customer-setup-score .kw-ring b{font-size:13px}
  .customer-dashboard-grid[data-hint="step"] .customer-setup-score strong{font-size:16px}
  /* Kanalzeile: der Name bricht nicht um (KI-Werk-App), das Kennzeichen steht rechts daneben. */
  .customer-channel-status .kw-channel__tx b{white-space:nowrap}
  /* Status und letzte Aktivität als zwei Zeilen „Beschriftung links, Wert rechts“: trägt auch das breite Kennzeichen „Pausiert bis 01.11.“, ohne dass die Beschriftung an den Rand stößt. */
  .customer-team-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .customer-team-person{grid-column:1}
  .customer-team-status,.customer-team-activity{display:flex;grid-column:1;justify-content:space-between;align-items:center;gap:12px;justify-items:initial}
  .customer-team-activity strong{text-align:right}
  /* Rechtszeile am Ende: eine Zeile (Name und drei Links), weniger Luft darüber und darunter; die Links bleiben 44 px hoch. */
  .customer-footer{gap:0 2px;margin-top:28px;padding-block:4px 12px}
  .customer-footer a{padding-inline:6px;min-width:var(--kw-tap);justify-content:center}
  /* Verbrauch: Zahl und Satz teilen sich eine Zeile (36 statt 44 px). */
  .customer-plan-panel .kw-meter__top{gap:6px 10px}
  .customer-plan-panel .kw-meter__top b{font-size:36px}
  .customer-plan-panel .kw-meter__top span{font-size:14px}
}

/* Rechnungsseite am Handy: jede Rechnung ist eine Karte aus drei Zeilen statt sechs beschrifteten (Nummer und Gesamtbetrag; Status, Fälligkeit und PDF;
   darunter klein Netto und Umsatzsteuer). Eine beglichene Rechnung braucht die beiden ersten Zeilen (Netto und Umsatzsteuer stehen auf der PDF und am Desktop). */
@media (max-width:640px){
  .customer-invoice-tablewrap .kw-table--cards tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"num num tot" "st due act" "net net tax";gap:4px 12px;align-items:center;padding:14px 16px}
  .customer-invoice-tablewrap .kw-table--cards td{display:block;padding:0;text-align:left}
  .customer-invoice-tablewrap .kw-table--cards td::before{display:none}
  .customer-invoice-tablewrap .kw-table--cards td:first-child{grid-area:num;padding:0}
  .customer-invoice-tablewrap .kw-table--cards td:first-child small{display:block}
  .customer-invoice-tablewrap .kw-table--cards td[data-label="Gesamt"]{grid-area:tot;text-align:right}
  .customer-invoice-tablewrap .kw-table--cards td[data-label="Status"]{grid-area:st}
  .customer-invoice-tablewrap .kw-table--cards td[data-label="Fällig"]{grid-area:due;font-size:14px;color:var(--kw-fg-2)}
  .customer-invoice-tablewrap .kw-table--cards td[data-label="Fällig"]::before,
  .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-net::before,
  .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-tax::before{display:inline;margin-right:6px}
  .customer-invoice-tablewrap .kw-table--cards td.kw-act{grid-area:act;padding:0;text-align:right}
  .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-net{grid-area:net;font-size:13.5px;color:var(--kw-fg-3);padding-top:4px}
  .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-tax{grid-area:tax;font-size:13.5px;color:var(--kw-fg-3);text-align:right;padding-top:4px}
  .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-tax .customer-cell{display:inline}
  .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-tax .customer-cell small{margin-left:4px;display:inline}
  .customer-invoice-tablewrap .kw-table--cards tr.is-settled td.customer-invoice-net,
  .customer-invoice-tablewrap .kw-table--cards tr.is-settled td.customer-invoice-tax{display:none}
  .customer-invoice-tablewrap .kw-table--cards td.kw-act{padding-top:0}
  .customer-invoice-tablewrap .kw-table--cards td.customer-cell-none{display:none}
}

/* Sehr schmale Handys (320 px): nichts steht übereinander. Verbindungsstand und „Neue Anfrage“ untereinander, Kanalzeile und Team-Werte gestapelt, die Rechnungszeile der
   Übersicht in drei Zeilen (Nummer; Status und Betrag; PDF). */
@media (max-width:359px){
  .customer-dashboard-heading .customer-system-status{grid-column:1/-1;grid-row:4}
  .customer-dashboard-heading .customer-head-actions{grid-column:1/-1;grid-row:5;justify-self:stretch}
  .customer-dashboard-heading .customer-head-actions .kw-btn{width:100%}
  .customer-channel-status .kw-channel{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "b";row-gap:6px}
  .customer-channel-status .kw-channel>.kw-badge{justify-self:start}
  .customer-team-status,.customer-team-activity{flex-direction:column;align-items:flex-start;gap:4px}
  .customer-team-activity strong{text-align:left}
  .customer-invoice-panel .kw-table--cards tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num num" "st tot" "act act"}
  .customer-invoice-panel .kw-table--cards td.kw-act{text-align:left}
  .customer-stand-glance__item{flex-wrap:wrap;gap:4px 8px}
  .customer-invoice-tablewrap .kw-table--cards tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num num" "tot tot" "st act" "due due" "net tax"}
  .customer-invoice-tablewrap .kw-table--cards td[data-label="Gesamt"],.customer-invoice-tablewrap .kw-table--cards td[data-label="Gesamt"] .customer-cell{text-align:left}
}


/* === Stufe 5, Runde 1 (Kundenportal, 23.10.2026) ========================================================================================================== */

/* Rechnungstabellen am Desktop: die letzte Spalte (PDF) schließt rechtsbündig mit der Karte ab, die Spaltenbreiten der Übersicht sind fest (Status, Gesamt, PDF), die
   Spalte der Nummer nimmt den Rest. „brutto“ steht einmal (Untertitel der Karte, Spaltenüberschrift), nicht unter jedem Betrag. */
@media (min-width:641px){
  .customer-invoice-table th:last-child,.customer-invoice-table td.kw-act{text-align:right}
  .customer-invoice-table td[data-label="Gesamt"] small{display:none}
  .customer-invoice-table--compact th:nth-child(2){width:26%;min-width:172px}
  .customer-invoice-table--compact th:nth-child(3){width:15%;min-width:112px}
  .customer-invoice-table--compact th:nth-child(4){width:13%;min-width:110px}
}

@media (max-width:640px){
  /* Hinweise der Übersicht (überfällige Rechnung, nächster Schritt, Verbrauch): Symbol und Titel in einer Zeile, der Satz darunter über die volle Breite
     (ein bis zwei Zeilen weniger); eine Standardtaste ist so breit wie ihr Wort und steht links, nur die eine orange Taste der Ansicht füllt die Breite. */
  :is(.customer-invoice-alert,.customer-invoice-notice,.customer-next-step,.customer-usage-banner) .kw-alert{gap:8px 12px;padding:12px 14px}
  :is(.customer-invoice-alert,.customer-invoice-notice,.customer-next-step,.customer-usage-banner) .kw-alert>div:not(.kw-alert__act){display:contents}
  :is(.customer-invoice-alert,.customer-invoice-notice,.customer-next-step,.customer-usage-banner) .kw-alert__ico{width:32px;height:32px}
  :is(.customer-invoice-alert,.customer-invoice-notice,.customer-next-step,.customer-usage-banner) .kw-alert__title{grid-column:2;align-self:center;font-size:15px}
  :is(.customer-invoice-alert,.customer-invoice-notice,.customer-next-step,.customer-usage-banner) .kw-alert p{grid-column:1/-1;margin-top:0;font-size:14px;line-height:1.4}
  :is(.customer-invoice-alert,.customer-invoice-notice,.customer-next-step,.customer-usage-banner) .kw-alert__act{margin-top:2px}
  :is(.customer-invoice-alert,.customer-invoice-notice,.customer-next-step,.customer-usage-banner) .kw-alert__act .kw-btn:not(.kw-btn--primary){flex:0 0 auto;width:auto}
  /* Eine überfällige Rechnung steht oben im Hinweis, der zur Rechnung führt: Die Rechnungskarte zeigte sie am Handy ein zweites Mal und entfällt dort. */
  .customer-dashboard-grid[data-invoice-notice="1"]>.customer-invoice-panel{display:none}
  /* Aktueller Stand beim Limit: die Zahl steht als Wort, nicht als drittes Kennzeichen (die Pause sagt der Kopf). */
  .customer-stand-glance__figure{color:var(--kw-fg);font-weight:600}
}

/* Chat ohne Nachrichten am Handy: Symbol und Satz in einer Zeile statt Symbol über dem Satz (ca. 55 px weniger, der Leerzustand bleibt erhalten). */
@media (max-width:640px){
  .customer-message-list.is-empty>.kw-empty{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:6px 8px;text-align:left}
  .customer-message-list.is-empty .customer-empty-ico{width:40px;height:40px;margin:0;flex:none}
  .customer-message-list.is-empty .customer-empty-ico .kw-icon{width:20px;height:20px}
  .customer-message-list.is-empty .kw-empty__title{font-size:17px}
}

/* 320 px: Die Rechnungszeile der Übersicht hat zwei Zeilen (Nummer mit PDF; Status mit Betrag), der Zeitraum entfällt (steht in der PDF und auf der Rechnungsseite),
   Kartenkopf und „Alle ansehen“ bleiben in einer Zeile. */
@media (max-width:359px){
  .customer-invoice-panel .kw-card__head,.customer-notice-panel .kw-card__head{flex-wrap:nowrap;gap:10px}
  .customer-invoice-panel .kw-card__head .kw-link-arrow,.customer-notice-panel .kw-card__head .kw-link-arrow{font-size:15px;gap:4px}
  .customer-invoice-panel .kw-table--cards tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num act" "st tot";gap:8px 12px}
  .customer-invoice-panel .kw-table--cards td:first-child small{display:none}
  .customer-invoice-panel .kw-table--cards td.kw-act{text-align:right}
}

/* Telegram-Karte am Handy: das Kennzeichen („noch nicht verbunden“) steht in der Zeile des Titels, nicht eine Zeile tiefer unter dem Untertitel (ab 360 px; darunter bricht es um). */
@media (min-width:360px) and (max-width:640px){
  .customer-detail-telegram>.kw-card__head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t b" "s s";align-items:center;gap:4px 12px}
  .customer-detail-telegram>.kw-card__head>div{display:contents}
  .customer-detail-telegram>.kw-card__head .kw-card__title{grid-area:t}
  .customer-detail-telegram>.kw-card__head .kw-card__sub{grid-area:s}
  .customer-detail-telegram>.kw-card__head>#customerTelegramBadge{grid-area:b}
}

/* Tastaturfokus und Anker landen nie unter den klebenden Leisten: Kopfleiste (72/64 px), das Offline-Band darunter und am Handy die Tab-Leiste am unteren Rand gelten als
   „nicht sichtbarer Bereich“ der Seite (scroll-padding), sodass auch ein nur teilweise verdecktes Feld (Chat-Eingabe) beim Tab in den freien Bereich rutscht. Der alte
   Abstand der Anker (96 px) wird dann vom scroll-padding getragen und schrumpft auf 12 px (beide addieren sich). Ohne :has() bleibt der alte Abstand. */
@supports selector(html:has(body)){
  html:has(body.customer-portal-body){scroll-padding-top:84px}
  html:has(body.customer-portal-body.customer-offline){scroll-padding-top:132px}
  .customer-main [id],.customer-settings-sections>*{scroll-margin-top:12px}
}
@media (max-width:640px){
  html:has(body.customer-portal-body.customer-has-tabbar){scroll-padding-bottom:96px}
}

/* Rechnungsseite zwischen Handy und breitem Desktop (641 bis rund 1280 px): Die Tabelle mit sieben Spalten braucht 916 px; wo ihre Karte schmaler ist, scrollte sie
   waagerecht und schnitt Status und PDF ab. Dort stehen die Rechnungen wie am Handy als Karten aus drei Zeilen (Nummer und Gesamt; Status, Fälligkeit, PDF; Netto und USt),
   gemessen an der Breite der Karte selbst (Container-Abfrage), nicht am Fenster. */
.customer-invoice-tablewrap{container:invtable/inline-size}
@media (min-width:641px){
  @container invtable (max-width:915px){
    .customer-invoice-tablewrap .kw-table--cards thead{display:none}
    .customer-invoice-tablewrap .kw-table--cards,.customer-invoice-tablewrap .kw-table--cards tbody{display:block}
    .customer-invoice-tablewrap .kw-table--cards tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"num num tot" "st due act" "net net tax";gap:4px 12px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--kw-line)}
    .customer-invoice-tablewrap .kw-table--cards tbody tr:last-child{border-bottom:0}
    .customer-invoice-tablewrap .kw-table--cards td{display:block;padding:0;border:0;text-align:left}
    .customer-invoice-tablewrap .kw-table--cards td:first-child{grid-area:num}
    .customer-invoice-tablewrap .kw-table--cards td:first-child small{display:block}
    .customer-invoice-tablewrap .kw-table--cards td[data-label="Gesamt"]{grid-area:tot;text-align:right}
    .customer-invoice-tablewrap .kw-table--cards td[data-label="Gesamt"] .customer-cell small{display:inline;margin-left:6px}
    .customer-invoice-tablewrap .kw-table--cards td[data-label="Status"]{grid-area:st}
    .customer-invoice-tablewrap .kw-table--cards td[data-label="Fällig"]{grid-area:due;font-size:14px;color:var(--kw-fg-2)}
    .customer-invoice-tablewrap .kw-table--cards td[data-label="Fällig"]::before,
    .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-net::before,
    .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-tax::before{content:attr(data-label);margin-right:6px;font-size:var(--kw-fs-xs);letter-spacing:.07em;text-transform:uppercase;font-weight:650;color:var(--kw-fg-3)}
    .customer-invoice-tablewrap .kw-table--cards td.kw-act{grid-area:act;text-align:right}
    .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-net{grid-area:net;font-size:13.5px;color:var(--kw-fg-3);padding-top:4px}
    .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-tax{grid-area:tax;font-size:13.5px;color:var(--kw-fg-3);text-align:right;padding-top:4px}
    .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-tax .customer-cell{display:inline;text-align:right}
    .customer-invoice-tablewrap .kw-table--cards td.customer-invoice-tax .customer-cell small{margin-left:4px;display:inline}
    .customer-invoice-tablewrap .kw-table--cards tr.is-settled td.customer-invoice-net,
    .customer-invoice-tablewrap .kw-table--cards tr.is-settled td.customer-invoice-tax,
    .customer-invoice-tablewrap .kw-table--cards td.customer-cell-none{display:none}
  }
  /* Der Hinweis „überfällig“ auf der Rechnungsseite: Taste und Rückfrage stehen unter dem Satz, solange der Satz neben ihnen nur eine schmale Spalte bekäme. */
  @media (max-width:1180px){
    .customer-invoice-notice .kw-alert{grid-template-columns:auto 1fr}
    .customer-invoice-notice .kw-alert__act{grid-column:1/-1;align-self:start}
  }
}


/* === Stufe 5, Runde 2 (Kundenportal, 23.10.2026) ========================================================================================================== */

/* Kacheln der Rechnungsseite (drei nebeneinander, solange der Platz reicht): Die Zahl richtet sich nach der Breite der Kachel selbst (Container-Abfrage), nicht nach dem
   Fenster. Vorher lief das Datum bei rund 1024 px mit der Seitenleiste bis an den Kartenrand (180 px Text in 158 px Innenbreite); jetzt bleibt links wie rechts dieselbe Luft.
   Ab einer Innenbreite von 206 px gilt unverändert 34 px. */
@media (min-width:641px){
  .customer-invoice-stats .kw-card.kw-stat{container-type:inline-size}
  .customer-invoice-stats .kw-stat__value{font-size:clamp(24px,16.5cqi,34px)}
}

/* Telegram-Karte (verbunden): alle Standardtasten sind so breit wie ihr Wort und stehen links (auch „Link kopieren“ am Handy, wo das Feld die ganze Breite nimmt); der
   Textlink „Telegram-Bot austauschen“ schließt links bündig mit den Tasten ab (der negative Rand gleicht das Polster der Textlink-Taste aus). Dasselbe gilt für „kopieren“
   im Einrichtungsweg (BotFather). */
.customer-telegram-card .kw-btn-row>.kw-btn--text{margin-left:-12px}
@media (max-width:480px){
  .customer-telegram-card .kw-copy .kw-btn,.wizard-step .kw-copy .kw-btn{align-self:flex-start}
}

/* Rechnungszeile der Übersicht am Handy: Der Untertitel der Karte („Beträge brutto“) entfällt dort, also trägt der Betrag das Wort selbst, klein unter der Zahl. Die Zeile
   wird nicht höher: Die PDF-Taste daneben ist 48 px hoch, Betrag und Wort brauchen 36. */
@media (max-width:640px){
  .customer-invoice-panel .kw-table--cards td[data-label="Gesamt"] small{display:block;margin:0;font-size:12px;line-height:1.25;color:var(--kw-fg-3)}
}