/* ==========================================================================
   Funnel-Huelle: EINE Huelle fuer alle Seiten zwischen Einladung und Arbeitsplatz
   (Bedarfscheck, E-Mail-Bestaetigung, Odoo verbinden, Einrichtungszugang, Einrichtungslinks, Download).
   Kommt NACH kiwerk-ui.css; benutzt ausschliesslich --kw-* Tokens und kw-* Komponenten, keine Rohfarben.
   Nur hell (Seiten fuer Handwerker unterwegs, kein Dunkelmodus).
   ========================================================================== */

.funnel-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--kw-bg); }

.funnel { width: min(760px, 100% - 32px); margin-inline: auto; flex: 1 0 auto; display: grid; align-content: start; gap: 20px; padding-bottom: 8px; }
.funnel-main { display: grid; gap: 20px; align-content: start; min-width: 0; }
.funnel-main:focus { outline: none; }
.funnel-main > [hidden] { display: none !important; }

/* Orange ist hier Handlung (Hauptaste), Fokus und Auswahl. Links, Ueberzeilen-Streifen und Text-Tasten bleiben neutral:
   Links sind unterstrichen (nicht nur farbig), der Streifen der Ueberzeile ist ein ruhiger Strich. */
.funnel, .funnel-foot { --kw-link: var(--kw-fg); --kw-link-hover: var(--kw-fg-2); }
.funnel :where(a:not(.kw-btn)) { text-decoration-line: underline; text-decoration-color: var(--kw-line-strong); }
.funnel :where(a:not(.kw-btn):hover) { text-decoration-color: currentColor; }
.funnel .kw-over::before { background: var(--kw-fg-3); }
/* Blau gibt es in dieser Huelle nicht: Hinweise sind keine Zustaende und tragen den ruhigen neutralen Ton wie die Hinweiskaesten
   (Gruen = bereit, Amber = Achtung, Rot = Fehler bleiben die einzigen Farben). */
.funnel .kw-alert--info { --_ab: var(--kw-surface-2); --_al: var(--kw-line); --_af: var(--kw-fg-3); }
.funnel .kw-badge--info { --_bb: var(--kw-neutral-bg); --_bf: var(--kw-neutral); --_bl: var(--kw-neutral-line); }
/* Haupttasten stehen in EINER Zeile (Kurzlabel); bei Platznot bricht der Text gleichmaessig statt Symbol und Wort auseinanderzureissen */
.funnel .kw-btn { text-wrap: balance; }
.funnel .kw-btn--lg { column-gap: 10px; }
/* "7-Tage-Test" bricht nie am Bindestrich */
.nw, .funnel .nw { white-space: nowrap; }
.funnel .nw { font-size: inherit; color: inherit; font-weight: inherit; }

/* Kopf: Logo links, Kontext rechts (ein Satz, keine Navigation: der Weg fuehrt nur vorwaerts) */
.funnel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.funnel-head img { display: block; width: 132px; height: auto; flex: none; }
.funnel-head__ctx { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--kw-fg-3); text-align: right; }
.funnel-head__ctx .kw-icon { width: 18px; height: 18px; color: var(--kw-fg); }
@media (max-width: 640px) {
  .funnel-head { min-height: 64px; }
  .funnel-head img { width: 118px; }
}
@media (max-width: 360px) {
  /* Kontext mit langem Namen steht zweizeilig rechts; das Symbol steht mittig daneben, nicht oben darueber */
  .funnel-head__ctx { align-items: center; gap: 6px; max-width: 52%; line-height: 1.3; text-align: left; }
  .funnel-head__ctx .kw-icon { flex: none; }
}

.funnel-foot { flex: none; padding: 20px 16px 28px; }
.funnel-foot .kw-legal { padding: 0; }

/* Titel: nackte h1/h2 der Seiten bekommen die Kit-Stufen (Markup bleibt fuer Tests und Szenarien wie es ist) */
.funnel :where(h1) { font-size: var(--kw-fs-h1); line-height: 1.1; letter-spacing: -.028em; font-weight: 700; color: var(--kw-fg); text-wrap: balance; }
.funnel :where(h2) { font-size: var(--kw-fs-h2); line-height: 1.15; letter-spacing: -.022em; font-weight: 700; color: var(--kw-fg); text-wrap: balance; }
/* Ein sehr langes Wort sprengt auf 320 px nie die Karte: Trennstellen im Text, im Notfall bricht das Wort statt der Seite */
.funnel :where(h1, h2) { overflow-wrap: anywhere; }
.funnel [tabindex="-1"]:focus { outline: none; } /* nur programmatischer Fokus nach einem Zustandswechsel, kein Bedienelement */
.funnel :where(h3) { font-size: var(--kw-fs-h4); line-height: 1.3; letter-spacing: -.01em; font-weight: 650; color: var(--kw-fg); }
.funnel-card { --kw-pad: 32px; display: grid; gap: 18px; align-content: start; }
.funnel-card > :not(.kw-actionbar) { margin: 0; }
@media (max-width: 640px) { .funnel-card { --kw-pad: 20px; } }
.funnel-lead { font-size: var(--kw-fs-lg); line-height: 1.55; color: var(--kw-fg-2); max-width: 62ch; }
.funnel-note { font-size: 14px; line-height: 1.5; color: var(--kw-fg-3); }
.funnel-note:empty { display: none; }
.funnel-note a { color: var(--kw-link); }

/* Zustandskarte: ein Gedanke, ein Wort (Badge), eine Handlung */
.funnel-state { display: grid; gap: 16px; justify-items: start; align-content: start; }
.funnel-state > * { margin: 0; }
.funnel-state .kw-btn-row { margin-top: 4px; }
.funnel-state > .funnel-hint, .funnel-state > .kw-alert { justify-self: stretch; }
.funnel-state__what { display: grid; gap: 4px; }
@media (max-width: 640px) {
  .funnel-state .kw-btn-row { width: 100%; }
  .funnel-state .kw-btn-row .kw-btn { flex: 1 1 100%; }
}

/* Ergebnis und Bestaetigung */
.funnel-result { display: grid; gap: 20px; align-content: start; }
.funnel-state .funnel-result { margin-top: 6px; padding-top: 24px; border-top: 1px solid var(--kw-line); }
.funnel-state .funnel-result h2 { font-size: var(--kw-fs-h3); line-height: 1.25; letter-spacing: -.016em; }
.funnel-result > * { margin: 0; }
.funnel-result .kw-steps { margin-top: 2px; }
.funnel .kw-step:has(+ [hidden])::before { display: none; }
.funnel .kw-step:has(+ [hidden]) { padding-bottom: 0; }
.funnel-result .kw-step__t { padding-top: 5px; }
.funnel-result .kw-step p { font-size: 15px; line-height: 1.5; margin-top: 4px; max-width: 58ch; }
.funnel-result .kw-step--now .kw-step__t { font-size: 17px; }
.funnel-hint { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--kw-r-md); background: var(--kw-surface-2); border: 1px solid var(--kw-line); color: var(--kw-fg-2); font-size: 15px; line-height: 1.5; }
.funnel-hint .kw-icon { color: var(--kw-fg); margin-top: 1px; }
.funnel-hint p { margin: 0; }
.funnel-hint a:not(.kw-btn) { color: var(--kw-link); font-weight: 600; }
.funnel-hint[hidden], .funnel-hint:has(p:empty) { display: none; }
/* Die Servermeldung zum Link steht als benannter Grund (die allgemeine Zeile darueber nennt nur den Zustand) */
.funnel-hint[data-kind="reason"] p::before { content: "Grund: "; font-weight: 650; color: var(--kw-fg); }

/* Messenger-Wahl: zwei gleich grosse Karten, EINE Hauptaktion (orange), die Alternative ruhig als Umrisstaste */
.funnel-messengers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.funnel-messenger { display: grid; gap: 16px; align-content: space-between; min-width: 0; padding: 18px; border: 1px solid var(--kw-line); border-radius: var(--kw-r-lg); background: var(--kw-surface); }
.funnel-messenger[hidden] { display: none; }
.funnel-messenger__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.funnel-medal { --m: 44px; }
.funnel-medal svg.kw-medal__ring { fill: var(--kw-surface-hover); } /* Zahnrad der Medaille grau: Orange bleibt der Hauptaktion vorbehalten */
.funnel-messenger__who { display: grid; gap: 1px; min-width: 0; }
.funnel-messenger__who h3 { margin: 0; }
.funnel-messenger__tag { margin: 0; font-size: 14px; line-height: 1.3; color: var(--kw-fg-3); }
.funnel-messenger .kw-btn { width: 100%; }

/* Geheimnis-Feld mit Anzeigen-Taste (Odoo-Schluessel) */
.funnel-secret { position: relative; }
.funnel-secret .kw-input { padding-right: 56px; }
.funnel-secret .kw-icon-btn { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: none; }
.funnel-secret .kw-icon-btn:hover { background: var(--kw-surface-hover); }
.funnel-secret .kw-icon-btn[aria-pressed="true"] { background: var(--kw-surface-active); color: var(--kw-fg); }

/* Fehler am Feld: roter Rand auch im Fokus (der Ring ist dann rot statt orange, damit der Zustand nicht verdeckt wird);
   Meldungen mit hidden bleiben unsichtbar, obwohl .kw-msg display setzt */
.funnel .kw-field--error .kw-input:focus-visible { border-color: var(--kw-bad); outline-color: var(--kw-bad); }
.funnel .kw-msg[hidden] { display: none; }
/* Feldmeldungen sind Lesetext, keine Randnotiz: 14 px statt 13 px, mit Zeilenabstand 1,45 */
.funnel .funnel-error { font-size: 14px; line-height: 1.45; }

/* Schritte als Karten (Anleitung ueber dem Formular) */
.funnel-how { display: grid; gap: 0; padding: 4px 0 0; }

/* Code mit Kopieren-Taste (Plattform-Adresse, Einrichtungscode) */
.funnel-copy { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 14px; border: 1.5px solid var(--kw-line-strong); border-radius: var(--kw-r-md); background: var(--kw-surface-2); min-width: 0; }
/* Brueche nur an den Umbruchstellen im Markup (<wbr>: Plattform-Adresse nach "://", Einrichtungscode in Gruppen zu 16 Zeichen), im Notfall mitten im Wort */
.funnel-copy code { flex: 1; min-width: 0; font-family: var(--kw-font-mono); font-size: 15px; line-height: 1.5; color: var(--kw-fg); word-break: normal; overflow-wrap: anywhere; font-variant-ligatures: none; }
/* Die Plattform-Adresse bricht nur an der Umbruchstelle nach "://" (und im Notfall mitten im Wort), nie mit einem einzelnen Restzeichen */
.funnel-copy .kw-btn { flex: none; min-height: 44px; }
.funnel-copy .kw-btn[data-copied="true"] { --_bg: var(--kw-good-bg); --_bd: var(--kw-good-line); --_fg: var(--kw-good); }
@media (max-width: 480px) { .funnel-copy { flex-wrap: wrap; padding: 12px; } .funnel-copy code { flex: 1 1 100%; font-size: 14px; } .funnel-copy .kw-btn { width: 100%; } }
.js-off .funnel-copy .kw-btn { display: none; }

/* Einrichtungslink: Adresse und Code mit Erklaerung, Badges in einer Zeile */
.funnel-badges { display: flex; flex-wrap: wrap; gap: 8px; }
/* Schritt-Titel und was darunter folgt (Tasten, Felder) haben Luft: 12 px zu den Tasten, 16 px zu den Feldern */
.funnel-step-actions { margin-top: 12px; }
.funnel-codes { display: grid; gap: 20px; margin-top: 16px; }
.funnel-code { display: grid; gap: 2px; min-width: 0; }
/* Beschriftung der Felder eine Stufe unter dem Schritt-Titel (16 px / 600): kleiner und im gedaempften Ton, sodass Titel und Feldname nicht gleich wirken */
.funnel-code__label { font-size: 15px; font-weight: 600; color: var(--kw-fg-2); line-height: 1.3; }
.funnel-code__help { font-size: 14px; line-height: 1.45; color: var(--kw-fg-3); }
.funnel-code .funnel-copy { margin-top: 6px; }
.funnel-sum__body .funnel-codes { margin-top: 0; }

/* Plattformliste (Download): je Betriebssystem eine Zeile mit Zustand und Handlung */
.funnel-os { display: grid; gap: 0; border: 1px solid var(--kw-line); border-radius: var(--kw-r-lg); overflow: hidden; background: var(--kw-surface); }
.funnel-os > li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--kw-line); flex-wrap: wrap; }
.funnel-os > li:last-child { border-bottom: 0; }
.funnel-os__name { flex: 1 1 160px; min-width: 0; }
.funnel-os__name b { display: block; color: var(--kw-fg); font-weight: 650; line-height: 1.3; }
.funnel-os__name span { display: block; font-size: 14px; color: var(--kw-fg-3); line-height: 1.4; }
.funnel-os__name b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.funnel-os__name b .kw-badge { display: inline-flex; font-size: 13px; }
.funnel-os__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: 0 1 auto; }
.funnel-os .kw-btn { flex: none; }
@media (max-width: 520px) { .funnel-os__actions { flex: 1 1 100%; justify-content: stretch; } .funnel-os .kw-btn { flex: 1 1 100%; } }
/* Download- und Plattformtasten tragen Kurztexte und stehen in EINER Zeile (390 px und breiter); nur auf 320 px darf ein Text umbrechen */
@media (min-width: 361px) { .funnel-os .kw-btn, .funnel-step-actions .kw-btn { white-space: nowrap; } }
/* 320 px: dieselben Kurztexte bleiben einzeilig (etwas engere Tasten statt Umbruch in "macOS (Apple / Silicon)") */
@media (max-width: 360px) {
  .funnel-os .kw-btn, .funnel-step-actions .kw-btn, #confirmationMail, #errorState .kw-btn { white-space: nowrap; padding-inline: 12px; column-gap: 6px; font-size: 15px; }
}
@media (min-width: 521px) { .funnel-os .kw-btn { padding-inline: 14px; } }
.funnel-sum { border: 1px solid var(--kw-line); border-radius: var(--kw-r-md); background: var(--kw-surface); }
.funnel-sum summary { display: flex; align-items: center; gap: 10px; min-height: var(--kw-tap); padding: 8px 14px; line-height: 1.35; font-weight: 600; color: var(--kw-fg); cursor: pointer; list-style: none; }
.funnel-sum summary::-webkit-details-marker { display: none; }
.funnel-sum summary .kw-icon { transition: rotate var(--kw-t-base) var(--kw-ease); color: var(--kw-fg-3); }
.funnel-sum[open] summary .kw-icon { rotate: 180deg; }
.funnel-sum__body { padding: 4px 14px 16px; display: grid; gap: 12px; }
.funnel-sum__body > span { display: grid; gap: 2px; }
.funnel-sum__body b { font-size: 14px; color: var(--kw-fg); font-weight: 600; overflow-wrap: anywhere; }
.funnel-sum code { font-family: var(--kw-font-mono); font-size: 13px; overflow-wrap: anywhere; color: var(--kw-fg-2); }

/* Ladeanzeige der Bruecke: ruhige, gleitende Linie (steht bei reduzierter Bewegung still) */
.funnel-bridge { height: 8px; border-radius: var(--kw-r-pill); background: var(--kw-line); overflow: hidden; width: 100%; }
.funnel-bridge span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--kw-bar-strong); animation: funnel-glide 1.2s var(--kw-ease) infinite alternate; }
@keyframes funnel-glide { from { transform: translateX(-20%); } to { transform: translateX(160%); } }
@media (prefers-reduced-motion: reduce) { .funnel-bridge span { animation: none; width: 60%; } }

/* Skeleton-Karte */
.funnel-skeleton { display: grid; gap: 14px; }
.funnel-skeleton .kw-skeleton { display: block; }
.sk-a { height: 14px; width: 34%; } .sk-b { height: 10px; width: 100%; } .sk-c { height: 28px; width: 68%; }
.sk-d { height: 48px; width: 100%; } .sk-e { height: 12px; width: 100%; } .sk-f { height: 16px; width: 48%; }
.funnel-fill { width: 100%; }

noscript .funnel-hint { margin-top: 0; }

.hidden { display: none !important; }

/* Textseite (Datenschutz-Vorbereitung): Text unveraendert, nur Huelle und Lesbarkeit */
.funnel-doc__head { display: grid; gap: 14px; }
.funnel-doc__head h1 { max-width: 20ch; }
.funnel-doc__grid { display: grid; gap: 14px; }
.funnel-doc__card { --kw-pad: 24px; display: grid; gap: 10px; }
.funnel-doc__card h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.012em; }
.funnel-doc ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 6px; margin: 0; }
.funnel-doc li::marker { color: var(--kw-fg-3); }
.funnel-doc p { margin: 0; line-height: 1.6; }
.funnel-doc a:not(.kw-btn) { color: var(--kw-link); font-weight: 600; }
.funnel-doc .kw-alert p { margin-top: 4px; }
.funnel-doc__details { border-radius: var(--kw-r-lg); }
.funnel-doc__details summary { min-height: 56px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.funnel-doc__details > div { display: grid; gap: 12px; padding: 0 16px 18px; }
.funnel-doc__script { padding: 14px 16px; border-left: 4px solid var(--kw-marker); background: var(--kw-surface-2); border-radius: 0 var(--kw-r-md) var(--kw-r-md) 0; color: var(--kw-fg); }
.funnel h2.kw-alert__title, .funnel .kw-alert__title { font-size: 16px; line-height: 1.35; letter-spacing: 0; font-weight: 650; }
.funnel-doc .kw-alert a:not(.kw-btn) { color: var(--kw-fg); }

.funnel-text { font-size: 16px; line-height: 1.55; color: var(--kw-fg-2); max-width: 62ch; }

/* Kurzes Formular auf der Huelle (Passwort setzen): Felder, Fehlerkasten, EINE Taste */
.funnel-form { display: grid; gap: 18px; margin-top: 4px; }
.funnel-form > * { margin: 0; }
.funnel-form .kw-alert p + p { margin-top: 6px; }
.funnel-form .kw-alert a { text-decoration: underline; }

/* Passwort setzen: toter Link mit Weg zum neuen Link; Skriptname bricht auch auf schmalen Bildschirmen */
.funnel-recovery { display: grid; gap: 12px; }
.funnel-recovery > * { margin: 0; }
.funnel-recovery h2 { font-size: var(--kw-fs-h4); line-height: 1.3; letter-spacing: -.01em; }
.funnel-cmd { display: block; padding: 12px 14px; font-family: var(--kw-font-mono); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.funnel-form .kw-alert__title { margin: 0; }
.funnel-form .kw-alert p:empty { display: none; }
.funnel-secret .kw-icon-btn:focus-visible { outline: var(--kw-focus-width) solid var(--kw-focus); outline-offset: 0; }

/* Datenschutz-Vorbereitung: auf dem Handy steht der Verweis linksbündig neben seinem Symbol, auch wenn die Beschriftung zweizeilig wird */
@media (max-width: 520px) { .funnel-doc__link .kw-btn { width: 100%; justify-content: flex-start; text-align: left; } }

/* Lange Eingaben (E-Mail-Adressen) enden in einem Ellipsenzeichen statt abgeschnitten zu wirken; beim Tippen scrollt das Feld wie gewohnt */
.funnel .kw-input:not(:focus) { text-overflow: ellipsis; }

/* Passwort setzen, toter Link: die Seite kennt die Rolle des Kontos nicht. Darum EINE neutrale Taste "Zur Anmeldung" (die Anmeldung unter "/" leitet
   Vertriebskonten selbst in die Vertriebs-App weiter) und ein stiller Textlink fuer den direkten Weg dorthin, statt zwei gleichrangiger Tasten */
.funnel-state > .funnel-recovery, .funnel-state > .funnel-signin { justify-self: stretch; }
.funnel-signin { display: grid; gap: 12px; justify-items: start; padding-top: 22px; border-top: 1px solid var(--kw-line); }
.funnel-signin > * { margin: 0; }
.funnel-signin h2 { font-size: var(--kw-fs-h4); line-height: 1.3; letter-spacing: -.01em; }
/* Der Textlink steht als eigene Zeile und hat ein volles Tap-Ziel (44 px), obwohl er im Satz steht */
.funnel-signin .funnel-note { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; }
.funnel-signin .funnel-note a { display: inline-flex; align-items: center; min-height: var(--kw-tap); }
@media (max-width: 640px) { .funnel-signin { justify-items: stretch; } .funnel-signin .funnel-note { justify-content: center; } }
.funnel-recovery .funnel-sum { background: var(--kw-surface-2); }
.funnel-form .kw-alert .kw-alert__title + p:empty, .reset-dead .kw-alert p:empty { display: none; }