/* Caronic – Hero-Szene „Freitag, 17:50“: animiertes Kundengespräch im Hero-Telefon.
   Lena, 19.10.2026. Farben: logo-final/README.md + site.css (:root). Eigener Code, keine Bibliothek, kein externer Aufruf.
   Setzt site.css voraus (Tokens, .device.phone, Dynamic Island über .phone .screen::before).
   Alle Maße in cqw der Chat-Fläche: die Szene skaliert mit dem Telefon (Hero 236 px, mobil ca. 105–150 px).
   Bewegt werden nur transform und opacity. Ohne JS und bei prefers-reduced-motion steht sofort der Endzustand. */

.chat-phone .screen{padding-top:0}                    /* die Statusleiste gehört hier zur Chat-Fläche */
.chat{
  position:absolute;inset:0;container-type:inline-size;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--c-surface);color:var(--c-navy);font-family:var(--font);
  text-align:left;-webkit-font-smoothing:antialiased;user-select:none
}
/* site.css setzt .device img / .phone .screen img auf 100 % × 100 %: in der Szene zurücknehmen */
.chat-phone .chat img{width:auto;height:auto;object-fit:initial}

/* ---------- Statusleiste (Insel zeichnet site.css) ---------- */
.chat-status{
  flex:none;height:16cqw;display:flex;align-items:center;justify-content:space-between;
  padding:1.2cqw 8cqw 0 9cqw;background:var(--c-white);
  font-weight:600;font-size:4.6cqw;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums
}
.chat-status svg{width:15cqw;height:4.6cqw;display:block}

/* ---------- Kopf: Absender mit Caronic-Icon ---------- */
.chat-kopf{
  flex:none;display:flex;align-items:center;gap:2.6cqw;height:15cqw;padding:0 4cqw 0 2.4cqw;
  background:var(--c-white);border-bottom:1px solid var(--c-divider)
}
.chat-kopf .zurueck{width:5.4cqw;height:5.4cqw;flex:none;stroke:var(--c-navy);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chat-phone .chat .chat-avatar{width:9.6cqw;height:9.6cqw;flex:none;display:block;border-radius:2.4cqw}
.chat-name{display:flex;flex-direction:column;min-width:0}
.chat-name b{font-weight:700;font-size:4.9cqw;line-height:6cqw;white-space:nowrap}
.chat-name span{font-weight:500;font-size:3.6cqw;line-height:4.6cqw;color:var(--c-text-2);white-space:nowrap}

/* ---------- Verlauf: Liste unten verankert; JS schiebt sie per translateY, als käme jede Nachricht von unten ---------- */
.chat-verlauf{flex:1 1 auto;position:relative;overflow:hidden}
.chat-liste{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:2cqw 3.4cqw 2.6cqw;list-style:none;
  display:flex;flex-direction:column;gap:2cqw
}
.chat-tag{
  align-self:center;padding:1.1cqw 3cqw;border-radius:2.4cqw;background:var(--c-white);
  box-shadow:0 0 0 1px var(--c-divider);
  font-weight:600;font-size:3.5cqw;line-height:4.4cqw;color:var(--c-text-2)
}

/* Blasen: Kunde rechts (neutrales Grün), Autohaus links (Weiß auf Grau). Kein Messenger-Logo, keine Meta-Farben. */
.msg{
  position:relative;max-width:80%;padding:2cqw 3cqw 1.8cqw;border-radius:4cqw;
  font-weight:500;font-size:4.9cqw;line-height:6.8cqw;overflow-wrap:break-word
}
.msg p{margin:0}
.msg-aus{align-self:flex-end;background:#E3EFDF;border-bottom-right-radius:1.2cqw}   /* Grün: Navy 15,28:1, Meta #55586C 5,9:1 (berechnet) */
.msg-ein{align-self:flex-start;background:var(--c-white);border-bottom-left-radius:1.2cqw;box-shadow:0 0 0 1px var(--c-divider)}
.meta{
  float:right;margin:2.2cqw 0 -1cqw 2.4cqw;display:inline-flex;align-items:center;gap:.8cqw;
  font-weight:500;font-size:3.2cqw;line-height:4cqw;color:var(--c-text-2);font-variant-numeric:tabular-nums
}
.meta svg{width:4.4cqw;height:3cqw;stroke:var(--c-text-2);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Antwort mit Fahrzeugkarte */
.msg-karte{width:80%;padding:1.6cqw}
.msg-karte > p{padding:0 1.4cqw}
.ki{display:flex;align-items:center;gap:1.2cqw;padding:.2cqw 1.4cqw 1.2cqw;font-weight:600;font-size:3.4cqw;line-height:4.2cqw;color:var(--c-orange-ink)}
.ki svg{width:3.8cqw;height:3.8cqw;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.karte{border-radius:2.8cqw;overflow:hidden;background:var(--c-surface);margin-bottom:1.8cqw}
.chat-phone .chat .karte img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.karte-text{padding:1.6cqw 2.4cqw 2cqw}
.karte-titel{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw}
.karte-titel b{font-weight:700;font-size:4.6cqw;line-height:5.8cqw}
.karte-titel strong{font-weight:700;font-size:4.6cqw;line-height:5.8cqw;white-space:nowrap}
.kennz{display:flex;flex-wrap:wrap;gap:.8cqw 2.4cqw;margin:.6cqw 0 0;padding:0;list-style:none;font-weight:500;font-size:3.4cqw;line-height:4.4cqw;color:var(--c-text-2)}
.kennz li + li::before{content:"·";margin-right:2.4cqw;color:var(--c-line-strong)}

/* Schnellantworten unter der Blase: nur Bild, keine Bedienelemente (die Szene ist aria-hidden, ohne Fokus) */
.aktionen{display:flex;flex-direction:column;margin:2cqw -1.6cqw -1.6cqw;border-top:1px solid var(--c-divider)}
.aktionen span{
  display:flex;align-items:center;justify-content:center;gap:1.6cqw;height:8.6cqw;
  font-weight:600;font-size:4.2cqw;color:var(--c-orange-ink)          /* #B35222 auf Weiß 5,06:1 */
}
.aktionen span + span{border-top:1px solid var(--c-divider)}
.aktionen svg{width:4.4cqw;height:4.4cqw;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Bestätigung */
.msg-ok b{display:flex;align-items:center;gap:1.4cqw;font-weight:700}
.msg-ok b svg{width:4.8cqw;height:4.8cqw;flex:none;stroke:var(--c-white);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;background:var(--c-navy);border-radius:50%;padding:.9cqw}
.msg-ok small{display:block;font-weight:500;font-size:3.8cqw;line-height:5cqw;color:var(--c-text-2)}

/* Schreibt-Punkte: liegen dort, wo die nächste Antwort beginnt (top setzt chat.js) */
.chat-tippt{
  position:absolute;left:3.4cqw;top:0;display:flex;gap:1.4cqw;padding:3.2cqw 3.6cqw;border-radius:4cqw;border-bottom-left-radius:1.2cqw;
  background:var(--c-white);box-shadow:0 0 0 1px var(--c-divider);opacity:0;transform:translateY(2cqw);pointer-events:none
}
.chat-tippt i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:var(--c-line-strong)}

/* ---------- Eingabezeile + Home-Balken ---------- */
.chat-eingabe{flex:none;display:flex;align-items:center;gap:2.4cqw;padding:2.2cqw 3.4cqw 5.8cqw;background:var(--c-white);border-top:1px solid var(--c-divider);position:relative}
.chat-eingabe span{flex:1;height:8.6cqw;border-radius:var(--r-pill);box-shadow:0 0 0 1px var(--c-divider);display:flex;align-items:center;padding:0 3.4cqw;font-size:3.8cqw;color:var(--c-text-2)}
.chat-eingabe i{width:8.6cqw;height:8.6cqw;border-radius:50%;background:var(--c-navy);display:grid;place-items:center}
.chat-eingabe i svg{width:4.2cqw;height:4.2cqw;stroke:var(--c-white);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chat-eingabe::after{content:"";position:absolute;left:50%;bottom:2cqw;width:34cqw;height:1.3cqw;margin-left:-17cqw;border-radius:var(--r-pill);background:var(--c-navy)}

/* ---------- Animation (nur mit .is-anim; chat.js setzt sie, wenn Bewegung erlaubt ist) ---------- */
.chat.is-anim .chat-liste{transition:transform .42s cubic-bezier(.2,.7,.2,1);will-change:transform}
.chat.is-anim [data-schritt]{opacity:0;transform:translateY(3cqw) scale(.94);transition:opacity .28s ease-out,transform .38s cubic-bezier(.2,.8,.25,1.05)}
.chat.is-anim .msg-aus{transform-origin:100% 100%}
.chat.is-anim .msg-ein{transform-origin:0 100%}
.chat.is-anim [data-schritt].ist-da{opacity:1;transform:none}
.chat.is-anim .chat-tippt{transition:opacity .2s ease-out,transform .3s cubic-bezier(.2,.8,.25,1)}
.chat.is-anim .chat-tippt.ist-da{opacity:1;transform:none}
.chat.is-anim .chat-tippt.ist-da i{animation:chat-tippt 1.1s ease-in-out infinite}
.chat.is-anim .chat-tippt.ist-da i:nth-child(2){animation-delay:.15s}
.chat.is-anim .chat-tippt.ist-da i:nth-child(3){animation-delay:.3s}
.chat.is-pause .chat-tippt i{animation-play-state:paused}
@keyframes chat-tippt{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-1.3cqw);opacity:1}}

/* ---------- Steuerung (WCAG 2.2.2) und Textalternative ---------- */
.chat-steuer{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;margin:0;
  border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-white);
  font:var(--t-ui);font-size:.8125rem;color:var(--c-navy);cursor:pointer;vertical-align:middle;white-space:nowrap
}
.chat-steuer:hover{border-color:var(--c-line-strong)}
.chat-steuer:focus-visible{outline:2px solid transparent;box-shadow:var(--focus)}
.chat-steuer svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chat-steuer[hidden]{display:none}
.note .chat-steuer{margin-left:10px}
.chat-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .chat .chat-liste,.chat [data-schritt],.chat .chat-tippt{transition:none !important;animation:none !important}
}
@media (forced-colors:active){
  .msg,.chat-tag,.chat-tippt,.karte{border:1px solid CanvasText}
  .chat-steuer{border-color:ButtonText}
}

/* ---------- Option mobil (Entscheidung Inhaber/Fin): Telefon groß vor dem Tablet, damit der Chat lesbar wird ----------
   Aktiv nur mit Klasse .stage-chat-gross an .stage. Bei 390 px: Telefon 50 % (≈175 px), Schrift ≈ 8,6 px statt 4,8 px. */
@media (max-width:767px){
  /* Etappe 8: mindestens 218 px breit, damit die Chatschrift ≥ 10 px misst (4,67 cqw); der Platz darüber folgt derselben Breite */
  .stage-chat-gross{--tel-b:min(100%, max(50%, 218px))}
  .stage-chat-gross .stage-inner{padding-top:calc(var(--tel-b) * 844 / 390 - 52%);padding-top:round(nearest, calc(var(--tel-b) * 844 / 390 - 52%), 1px)}   /* ganze Pixel bis zum Footer (Vera) */   /* Telefonhöhe minus Tablethöhe ≈ Platz über dem Tablet */
  .stage-chat-gross .chat-phone{width:var(--tel-b)}
}

/* Etappe 7 (19.10.2026): rundes Profilbild wie ein Messenger-Kontakt, Icon negativ (Original, unverändert) auf warmem Glut-Verlauf */
.chat-phone .chat .chat-avatar.chat-avatar-glut{display:grid;place-items:center;border-radius:50%;background:var(--g-grund-leucht)}
.chat-phone .chat .chat-avatar-glut img{width:62%;height:62%;display:block}
/* Endlosschleife: vor dem Neustart blendet der Verlauf kurz aus und wieder ein (nur opacity) */
.chat.is-anim .chat-verlauf{transition:opacity .4s ease}
.chat.is-anim.is-wechsel .chat-verlauf{opacity:0}
@media (prefers-reduced-motion:reduce){ .chat .chat-verlauf{transition:none !important;opacity:1 !important} }

/* Etappe 8 (Mila 2.2.2): Pause-Knopf rund an der oberen rechten Ecke des Telefons, halb über dem Rahmen; Beschriftung nur für Screenreader */
.chat-steuer.chat-steuer-rund{position:absolute;top:-14px;right:-14px;z-index:2;width:40px;height:40px;padding:0;gap:0;justify-content:center;border-radius:50%;box-shadow:0 1px 2px rgb(17 20 42 / .1),0 6px 16px -4px rgb(17 20 42 / .25)}
.chat-steuer.chat-steuer-rund:focus-visible{box-shadow:var(--focus),0 1px 2px rgb(17 20 42 / .1),0 6px 16px -4px rgb(17 20 42 / .25)}   /* Mila K1 (2.4.7): Ring vor dem eigenen Schatten, höhere Spezifität */
.chat-steuer.chat-steuer-rund svg{width:16px;height:16px}
.chat-steuer.chat-steuer-rund span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}


/* Etappe 9 (19.10.2026): vier Dialoge im Wechsel (TEXTE-HERO-CHAT.md). Ohne JS und bei reduced-motion: Dialog 1 im Endzustand */
.chat-liste[data-dialog]:not([data-dialog="1"]){display:none}
.chat.is-anim .chat-liste[data-dialog]{display:none}
.chat.is-anim .chat-liste[data-dialog].ist-aktiv{display:flex}
/* Antwort-Chips unter einer Caro-Nachricht; der gewählte ist im Endzustand gefüllt, in der Animation erst nach dem Antippen */
.chips{display:flex;flex-wrap:wrap;gap:1.6cqw;margin:2.2cqw 0 .4cqw}
.chip{padding:1.3cqw 2.8cqw;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--c-orange-ink);font-weight:600;font-size:3.8cqw;line-height:4.8cqw;color:var(--c-orange-ink);white-space:nowrap}
.chip[data-wahl]{background:var(--c-orange-ink);color:var(--c-white)}
.chat.is-anim .chip[data-wahl]:not(.ist-gewaehlt){background:none;color:var(--c-orange-ink)}
/* Anhang (Exposé als PDF) */
.anhang{display:flex;align-items:center;gap:2cqw;padding:2.4cqw 2.6cqw;margin-bottom:1.8cqw;border-radius:2.8cqw;background:var(--c-surface)}
.anhang svg{flex:none;width:5.6cqw;height:5.6cqw;stroke:var(--c-orange-ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.anhang b{font-weight:600;font-size:4cqw;line-height:5.2cqw;min-width:0;overflow-wrap:anywhere}
/* Zwei Fahrzeugkarten in einer Nachricht: Zweierreihe, Bild oben, Preis unter dem Titel */
.karten-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6cqw;margin:1cqw 0 1.8cqw}
.karten-zwei .karte{margin:0}
.karten-zwei .karte-text{padding:1.2cqw 1.6cqw 1.6cqw}
.karten-zwei .karte-titel{flex-direction:column;align-items:flex-start;gap:0}
.karten-zwei .karte-titel b,.karten-zwei .karte-titel strong{font-size:3.6cqw;line-height:4.6cqw}
.karten-zwei .kennz{font-size:2.9cqw;line-height:3.8cqw;gap:.4cqw 1.6cqw}
.karten-zwei .kennz li + li::before{margin-right:1.6cqw}
.msg-karte > p + .karten-zwei{margin-top:1.6cqw}

/* Etappe 10 (19.10.2026): Lesbarkeit in jeder Breite – Nachrichten ≥ 10 px, Uhrzeiten, Kartendetails und Etiketten ≥ 8,5 px.
   cqw skaliert weiter mit dem Telefon, die px-Untergrenze greift nur, wo das Telefon klein ist. */
.chat .msg{font-size:max(4.9cqw,10px);line-height:max(6.8cqw,14px)}
.chat .meta{font-size:max(3.2cqw,8.5px);line-height:max(4cqw,10.5px)}
.chat .kennz,.chat .karten-zwei .kennz{font-size:max(3.4cqw,8.5px);line-height:max(4.4cqw,11px)}
.chat .karten-zwei .karte-titel b,.chat .karten-zwei .karte-titel strong{font-size:max(3.6cqw,8.5px);line-height:max(4.6cqw,11px)}
.chat .karte-titel b,.chat .karte-titel strong{font-size:max(4.6cqw,9px);line-height:max(5.8cqw,12px)}
.chat .msg-ok small{font-size:max(3.8cqw,8.5px);line-height:max(5cqw,11px)}
.chat .ki{font-size:max(3.4cqw,8.5px);line-height:max(4.2cqw,10.5px)}
.chat .chip{font-size:max(3.8cqw,8.5px);line-height:max(4.8cqw,11px)}
.chat .anhang b{font-size:max(4cqw,8.5px);line-height:max(5.2cqw,11px)}
.chat .aktionen span{font-size:max(4.2cqw,8.5px)}
.chat .chat-tag{font-size:max(3.5cqw,8.5px);line-height:max(4.4cqw,10.5px)}
/* Etappe 10: 768–1023 px – Telefon 30 % (≈ 206 px bei 768) statt 23,3 % (160 px); Tablet schmaler, Überschneidung bleibt ≈ 7 %;
   Platz über dem Tablet = Telefonhöhe − Tablethöhe − Abstand unten, damit das Telefon nicht in den Lead ragt */
@media (min-width:768px) and (max-width:1023px){
  .stage-chat-gross{--tel-b:min(30%, 256px)}   /* nie größer als am Desktop */
  .stage-chat-gross .stage-inner{padding-right:23%;padding-top:max(0px, calc(var(--tel-b) * 844 / 390 - 49% - 40px));padding-top:round(nearest, max(0px, calc(var(--tel-b) * 844 / 390 - 49% - 40px)), 1px)}
  .stage-chat-gross .chat-phone{width:var(--tel-b)}
}
/* Profilbild = caronic-icon-mono mit Tachonadel (Original unverändert, Inhaber 19.10.2026: Kleinfassung nur als Favicon) als weiße Maske;
   Kreis auf gerade Pixel gerundet, mindestens 30 px, damit das Zeichen ≥ 20 px misst, die Nadel erkennbar bleibt und es ganzzahlig mittig sitzt */
.chat-phone .chat .chat-avatar.chat-avatar-glut{--av:max(30px, round(nearest, 10.4cqw, 2px));width:var(--av);height:var(--av)}
.chat-avatar-zeichen{display:block;width:calc(var(--av) - 10px);height:calc(var(--av) - 10px);background:var(--c-white);
  -webkit-mask:var(--zeichen) center/contain no-repeat;mask:var(--zeichen) center/contain no-repeat}   /* --zeichen = data:-URI aus der Originaldatei (hero_chat.py), lädt auch unter file:// */

/* Mila: im Kontrastmodus (forced-colors) verschwände die weiße Maske – Zeichen in Textfarbe */
@media (forced-colors:active){ .chat-avatar-zeichen{forced-color-adjust:none;background:CanvasText} }