/* Kontakt-Chatfenster für INTERESSENTEN auf den öffentlichen Seiten.
   Markup: templates/_kontakt_chat.html · Verhalten: static/js/kontakt-chat.js

   Optisch bewusst nah an Lia (static/ds-help.js): runder Startknopf unten rechts,
   Panel von rechts. Inhaltlich das Gegenteil — Lia bedient EINGELOGGTE Händler mit
   Onboarding und Tickets, hier schreibt jemand, der uns noch nicht kennt.

   🧨 Eigene Namen (.kc-*), keine Wiederverwendung von .dsh-*: die beiden Fenster
   können auf keiner Seite gleichzeitig auftauchen, aber ds-help.js wird über
   base.html global geladen und würde bei gleichen Klassennamen mitgreifen.
   🧨 Alle Eingabefelder auf 16px — darunter zoomt iOS beim Fokus hinein und nicht
   zurück (dieselbe Falle wie in der Marktplatz-Suche, 15.08.). */

.kc-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 9940;
  display: flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 20px 0 17px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(100deg, #ff8a3d 0%, #ff3d77 100%);
  color: #fff; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 15px;
  box-shadow: 0 16px 34px -14px rgba(255, 61, 119, .7);
  transition: transform .16s ease, filter .16s ease;
}
.kc-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.kc-btn .kc-ic { font-size: 18px; line-height: 1; }
/* Auf schmalen Geräten über die Sticky-CTA der Startseite heben. */
@media (max-width: 900px) {
  .kc-btn { right: 14px; bottom: calc(122px + env(safe-area-inset-bottom, 0px)); }
  .kc-btn .kc-txt { display: none; }
  .kc-btn { min-width: 52px; padding: 0; justify-content: center; }
}

/* 🧨🧨 Solange das Cookie-Banner steht, tritt der Startknopf zurück.
   Gemessen am 15.08. im echten Browser (390x844, /impressum/): der Knopf lag bei
   (324, 670) exakt unter `.dscb-text` — `document.elementFromPoint` in seiner Mitte
   lieferte das Banner, nicht ihn. Beim ERSTEN Besuch war der Chat damit nicht
   anklickbar, und genau der erste Besuch ist der, für den er gebaut ist.
   Das Banner gewinnt bewusst: es ist die rechtlich nötige Erstentscheidung
   (`.dscb-banner`, z-index 9999). Kein höherer z-index für den Knopf, sondern
   ausblenden — sonst überdeckt er die Zustimmen-Schaltflächen.
   Sobald `.show` weg ist, ist der Knopf wieder da; getragen von
   support/test_kontakt_chat_mobil.py.
   🧨 `visibility:hidden`, NICHT `opacity:0`: ein durchsichtiger Knopf bleibt
   anklickbar, per Tab fokussierbar und im Screenreader vorhanden — und Playwright
   meldet ihn als sichtbar, die Ratsche wäre also blind gewesen. */
body:has(.dscb-banner.show) .kc-btn { visibility: hidden; pointer-events: none; }

.kc-ov {
  position: fixed; inset: 0; z-index: 9949; background: rgba(13, 19, 38, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.kc-ov.on { opacity: 1; pointer-events: auto; }

.kc-panel {
  position: fixed; right: 0; top: 0; z-index: 9950;
  display: flex; flex-direction: column;
  width: 400px; max-width: 100vw; height: 100%;
  background: #fff; color: #0d1326;
  font-family: 'Manrope', system-ui, sans-serif; line-height: 1.5;
  box-shadow: -24px 0 60px -30px rgba(13, 19, 38, .5);
  /* 🧨 C-3/D-F05: `visibility:hidden` zusätzlich zum Wegschieben — ein nur verschobenes Panel bleibt
     per Tab fokussierbar (5 Elemente unter aria-hidden, gemessen 22.08.2026). Beim Schließen
     schaltet visibility erst NACH der Transform-Transition (0s .26s), beim Öffnen sofort (0s). */
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .26s;
}
.kc-panel.on { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .7, .3, 1), visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .kc-panel, .kc-ov, .kc-btn { transition: none; }
}

.kc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px; color: #fff;
  background: linear-gradient(120deg, #0d1326 0%, #1b2547 100%);
}
.kc-head .kc-av {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(100deg, #ff8a3d, #ff3d77);
}
.kc-head b { display: block; font-family: 'Bricolage Grotesque', 'Manrope', sans-serif; font-size: 16px; }
.kc-head span { display: block; font-size: 12.5px; color: #aab2c5; }
.kc-x {
  /* C-11: 44px Tippfläche (WCAG 2.5.8), vorher 40px. */
  margin-left: auto; width: 44px; height: 44px; flex: 0 0 auto;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, .10);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.kc-x:hover { background: rgba(255, 255, 255, .18); }

/* 🧨 Beide Bereiche müssen schrumpfen UND scrollen können (`min-height:0` ist in
   einem Flex-Container Pflicht, sonst bleibt ein Kind mindestens so hoch wie sein
   Inhalt). Gemessen am 15.08. quer (844x390): das Panel ist dort nur 390 px hoch,
   das Kontaktformular braucht mehr — das Einwilligungs-Häkchen lag unterhalb des
   Fensters und war NICHT anklickbar. Ohne Einwilligung nimmt der Server nichts an,
   die Anfrage war im Querformat also schlicht nicht abschickbar. */
.kc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px; background: #f4f6fc; }
.kc-bubble {
  max-width: 88%; padding: 12px 14px; border-radius: 16px; font-size: 14.5px;
  background: #fff; box-shadow: 0 8px 24px -18px rgba(22, 34, 84, .5);
  border-bottom-left-radius: 5px; margin-bottom: 12px; white-space: pre-wrap;
}
.kc-bubble.kc-me {
  margin-left: auto; color: #fff; border-bottom-left-radius: 16px;
  border-bottom-right-radius: 5px; background: linear-gradient(100deg, #2f6bff, #6a5cff);
}
.kc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kc-chip {
  border: 1px solid rgba(13, 19, 38, .16); background: #fff; color: #0d1326;
  border-radius: 999px; min-height: 40px; padding: 0 15px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
}
.kc-chip:hover { border-color: #2f6bff; color: #2f6bff; }

.kc-foot {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  border-top: 1px solid rgba(13, 19, 38, .10); background: #fff; padding: 14px 16px;
}
.kc-feld { display: block; margin-bottom: 10px; }
.kc-feld > span { display: block; font-size: 12.5px; font-weight: 700; color: #5c6680; margin-bottom: 5px; }
.kc-feld input, .kc-feld textarea {
  width: 100%; font: inherit; font-size: 16px; color: #0d1326;
  padding: 11px 12px; border: 1px solid rgba(13, 19, 38, .16); border-radius: 11px;
  background: #fff; min-height: 46px;
}
.kc-feld textarea { resize: vertical; line-height: 1.5; }
.kc-feld input:focus, .kc-feld textarea:focus { outline: 2px solid #2f6bff; outline-offset: 1px; border-color: #2f6bff; }
.kc-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .kc-zeile { grid-template-columns: 1fr; } }

.kc-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: #5c6680; margin: 4px 0 12px; }
.kc-check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.kc-check a { color: #2f6bff; font-weight: 700; }

.kc-send {
  width: 100%; min-height: 48px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(100deg, #ff8a3d 0%, #ff3d77 100%);
}
.kc-send:hover { filter: brightness(1.06); }
.kc-send[disabled] { opacity: .6; cursor: default; filter: none; }
.kc-fehler { color: #c62a5f; font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.kc-hinweis { color: #5c6680; font-size: 12px; margin: 9px 0 0; }

/* Honeypot: für Menschen unerreichbar, für Bots ein verlockendes Feld.
   Nicht display:none — manche Bots überspringen unsichtbare Felder gezielt. */
.kc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kc-panel a:focus-visible, .kc-panel button:focus-visible {
  outline: 2px solid #ff8a3d; outline-offset: 2px; border-radius: 8px;
}

/* ══ KI-Betrieb ══════════════════════════════════════════════════════════════
   Alles hier erscheint nur, wenn der Server `kontakt_ki_an` gesetzt hat — das
   Markup existiert sonst gar nicht (templates/_kontakt_chat.html). */

/* Pflichthinweis nach Art. 50, VOR der ersten Eingabemöglichkeit.
   🧨 Bewusst KEIN `display:none` bei kleiner Höhe: der Hinweis ist die Rechtspflicht,
   nicht Zierrat. Im Querformat wird er kleiner und scrollt mit, statt zu verschwinden —
   eine Ratsche kann Sichtbarkeit prüfen, aber nicht erraten, was jemand wegblendet. */
.kc-ki-hinweis {
  flex: 0 0 auto; padding: 8px 16px; background: #eef1f9;
  border-bottom: 1px solid rgba(13, 19, 38, .10); font-size: 12px; color: #3c4560;
}
.kc-ki-hinweis p { margin: 0; line-height: 1.4; }
.kc-ki-hinweis a { color: #2f6bff; font-weight: 700; }

/* Aufklapper für die Einzelheiten zur Übermittlung.
   🧨 Das <summary> ist ein Tippziel: WCAG 2.5.8 verlangt mindestens 24×24 px. Die
   Ratsche MobilLayoutRatscheTest prüft das für den Fuß bereits — hier gilt dasselbe,
   deshalb padding statt nackter Textzeile. */
.kc-ki-mehr { margin-top: 4px; }
.kc-ki-mehr > summary {
  cursor: pointer; color: #5c6680; font-weight: 700; list-style: none;
  min-height: 24px; display: flex; align-items: center; gap: 5px;
}
.kc-ki-mehr > summary::-webkit-details-marker { display: none; }
.kc-ki-mehr > summary::after { content: '▾'; font-size: 10px; transition: transform .15s; }
.kc-ki-mehr[open] > summary::after { transform: rotate(180deg); }
.kc-ki-mehr > summary:focus-visible { outline: 2px solid #2f6bff; outline-offset: 2px; border-radius: 4px; }
.kc-ki-mehr > p { margin-top: 4px; color: #5c6680; }
.kc-ki-pill {
  display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px;
  background: #0d1326; color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .02em; vertical-align: 1px;
}

/* Kennzeichnung über jeder Maschinenantwort — kurz, damit sie nicht zur Tapete wird. */
.kc-von-ki {
  margin: 0 0 4px; font-size: 11px; font-weight: 800; color: #5c6680;
  letter-spacing: .03em; text-transform: uppercase;
}

/* Der Weg zum Menschen. Steht unbedingt im Markup und wird von KEINER
   Schrittfunktion angefasst — es darf keinen Zustand geben, in dem jemand nur die
   Maschine hat. */
.kc-mensch-zeile { flex: 0 0 auto; padding: 8px 16px 0; background: #fff; }
.kc-mensch {
  width: 100%; min-height: 44px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(13, 19, 38, .16); background: #fff; color: #0d1326;
  font: inherit; font-size: 14px; font-weight: 700;
}
.kc-mensch:hover { border-color: #2f6bff; color: #2f6bff; }
.kc-mensch-wichtig { border-color: #2f6bff; color: #2f6bff; box-shadow: 0 0 0 3px rgba(47, 107, 255, .14); }
.kc-mensch-aktiv { margin: 0; padding: 8px 0 0; font-size: 12.5px; color: #5c6680; }

/* Eigene Sendetaste.
   🧨 Sie MUSS .kc-ki-send heißen und nicht .kc-send: Playwright arbeitet im
   Strict-Mode, und `pg.click('.kc-send')` bräche bei zwei sichtbaren Treffern mit
   einem Selektorfehler ab, der wie ein kaputtes Widget aussieht. */
.kc-in {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 16px 12px; background: #fff;
  border-top: 1px solid rgba(13, 19, 38, .10);
}
.kc-in[hidden] { display: none; }
.kc-in-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* 🧨 16px, nicht kleiner: iOS zoomt beim Fokus in Felder darunter hinein und NICHT
   zurück. Ratsche: support/test_kontakt_chat.py. */
.kc-in-feld {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: #0d1326;
  padding: 11px 12px; border: 1px solid rgba(13, 19, 38, .16); border-radius: 11px;
  background: #fff; resize: none; min-height: 46px; max-height: 110px; line-height: 1.4;
}
.kc-in-feld:focus { outline: 2px solid #2f6bff; outline-offset: 1px; border-color: #2f6bff; }
.kc-in-feld:disabled { background: #f4f6fc; color: #5c6680; }
.kc-ki-send {
  flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 11px;
  background: linear-gradient(100deg, #2f6bff, #6a5cff); color: #fff;
  font-size: 19px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kc-ki-send:disabled { opacity: .55; cursor: default; }

/* Tippanzeige in EIGENER role=status-Region.
   🧨 Nicht in .kc-body schreiben: der Container trägt aria-live="polite", und jede
   wachsende Blase darin würde vorgelesen. */
.kc-tippt {
  flex: 0 0 auto; margin: 0; padding: 0 16px; background: #fff;
  font-size: 12px; color: #5c6680; min-height: 0;
}
.kc-tippt:empty { padding: 0; }
.kc-mit-hinweis { display: block; color: #8a93a8; font-size: 11.5px; margin-top: 2px; }

/* Im Formular- und Danke-Zustand verschwinden KI-Zeile und Eingabefeld.
   🧨 Das ist Höhenrettung, nicht Kosmetik: quer (844x390) ist das Panel nur 390 px
   hoch, und das Kontaktformular braucht jeden Pixel — am 15.08. lag dort das
   Einwilligungs-Häkchen unterhalb des Fensters und die Anfrage war nicht
   abschickbar. */
.kc-panel[data-modus="formular"] .kc-in,
.kc-panel[data-modus="fertig"] .kc-in { display: none; }
.kc-panel[data-modus="formular"] .kc-ki-hinweis,
.kc-panel[data-modus="fertig"] .kc-ki-hinweis { display: none; }

/* Bildschirmtastatur.
   🧨🧨 Das Panel ist `position:fixed; height:100%`, und .kc-body/.kc-foot scrollen
   INTERN. Beim Fokus hat der Browser damit nichts, was er „ins Bild scrollen" könnte —
   die Eingabezeile läge unter der Tastatur. `100dvh` folgt dem sichtbaren Bereich auf
   Geräten, die es kennen; das ist die einzige rein deklarative Abhilfe. Ein
   Browsertest kann das NICHT nachweisen: headless Chromium hat keine
   Bildschirmtastatur. Vor dem Einschalten an einem echten Telefon gegenprüfen. */
@supports (height: 100dvh) {
  .kc-panel { height: 100dvh; }
}
/* Querformat (844x390). 🧨 Dort blieben fuer den Verlauf zuletzt 36 Pixel — der
   Kopf muss mitschrumpfen, nicht nur der Hinweis. Gemessen, nicht geschaetzt. */
@media (max-height: 520px) {
  .kc-head { padding: 8px 16px 7px; gap: 9px; }
  .kc-head .kc-av { width: 28px; height: 28px; font-size: 14px; }
  .kc-head b { font-size: 14px; }
  .kc-head .kc-unter { font-size: 11px; }
  .kc-ki-hinweis { padding: 5px 16px; font-size: 11.5px; }
  .kc-mensch-zeile { padding: 6px 16px 0; }
  .kc-in { padding: 8px 16px 8px; }
  .kc-in-feld { min-height: 40px; }
  .kc-ki-send { width: 40px; height: 40px; }
  .kc-mensch { min-height: 40px; }
}

/* Anschlussfragen unter einer Antwort. Sie halten das Gespräch am Laufen — ohne sie
   endet jede Antwort in einer Sackgasse, und der Besucher schließt das Fenster.
   🧨 Die Vorschläge stammen aus dem Korpus des Servers, sind also beantwortbar. Ein
   Vorschlag, der ins Leere führt, wäre schlechter als gar keiner. */
.kc-weiter { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 14px; }
.kc-weiter-titel {
  flex: 0 0 100%; font-size: 11.5px; font-weight: 700; color: #5c6680;
  margin-bottom: 1px;
}
/* Kleiner als die Einstiegs-Chips, aber weiterhin 40px hoch — WCAG 2.5.8 gilt auch
   für Vorschläge, und getippt wird hier mit dem Daumen. */
.kc-chip-klein { font-size: 13px; padding: 0 12px; min-height: 40px; font-weight: 600; }
.kc-mensch-tipp {
  margin: 0 0 12px; font-size: 12.5px; color: #5c6680; font-style: italic;
}