/* ══════════════════════════════════════════════════════
   mgap — Anfrage-Chat (Oberfläche), dritte Fassung
   Schicht über dem Kontaktformular, Tokens und .d-*-Bausteine aus styles.css.
   chat.js startet nur, wenn diese Datei geladen ist (--chat-css, s. u.).
   Regeln: Radius 2 px (Marke), keine Kartenkanten in Akzentfarbe, keine Verläufe als Flächen,
   kein Dauerpulsieren; Bewegung nur transform/opacity, Endzustand immer sichtbar.
══════════════════════════════════════════════════════ */
:root{--chat-css:1}

/* Mit Chat bekommt die Gesprächsspalte mehr Breite (Kontaktblock links bleibt kompakt) */
@media(min-width:901px){
  .contact.has-chat{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .contact.has-chat .pitch{position:sticky;top:92px}
}

/* Läuft der Chat, ersetzt er die alten Schritte. Der Honeypot bleibt, wo er ist. */
.chat-on .form-body>:not(.mgap-anfrage):not(.chat-ki):not(.hp){display:none}
.mgap-anfrage [hidden]{display:none!important}

.mgap-anfrage{
  /* Umrandete Chips und Antwort sind in der Marke rechteckig (Radius 2 px).
     Pillenform: hier var(--radius-pill) eintragen. */
  --chat-r:var(--radius);
  /* Grauer Kontextbereich: ein Tint aus Navy und Papier (aus den Seitenfarben abgeleitet, kein neuer Farbton); ohne color-mix das Arctic */
  --chat-grau:var(--color-arctic);
  display:flex;flex-direction:column;min-width:0;
  height:clamp(560px,calc(100dvh - 84px - var(--chat-ki-h,0px)),780px);   /* passt unter die Kopfzeile (65 px) und lässt den KI-Hinweis darunter im Bild */
  scroll-margin-top:84px;
  border:1px solid var(--color-line-strong);border-radius:var(--chat-r);background:var(--color-paper);
  overflow:hidden;
}
@supports (background:color-mix(in srgb,red,blue)){.mgap-anfrage{--chat-grau:color-mix(in srgb,var(--color-navy) 6%,var(--color-paper))}}
.chat-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chat-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── Kontext: „Das habe ich verstanden“. Kopf = Navy-Balken über die volle Breite (Anker wie die Navy-Karte links),
      darunter nur erfasste Felder auf Grau, änderbar. Weiß ist nur der Gesprächsteil ── */
.chat-kontext{position:relative;flex:none;z-index:3;padding:0;background:var(--chat-grau)}
.chat-k-kopf{position:relative;display:flex;align-items:baseline;gap:12px;padding:8px 20px;background:var(--color-navy)}
.chat-k-titel{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--color-on-navy)}
.chat-k-leer,.chat-k-zaehler{margin-left:auto;font-size:13px;color:var(--color-on-navy-dim)}
.chat-k-zaehler{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-on-navy)}
.chat-k-n{color:var(--color-lime)}   /* Lime als Text auf Navy: 12,77:1 */
/* Desktop: Zähler erst ab dem ersten Wert; vorher steht der Hinweis im Balken. Handy: Zähler an der Klappzeile (s. u.) */
.chat-k-zaehler{display:none}
.chat-kontext:not([data-n="0"]) .chat-k-leer{display:none}
.chat-kontext:not([data-n="0"]) .chat-k-zaehler{display:inline}
.chat-k-kopf>.chat-ic,.chat-k-toggle{display:none}
.chat-k-liste{list-style:none;padding:0 0 5px}
.chat-kontext[data-z="0"] .chat-k-liste{padding:0}
.chat-k-row{position:relative;padding:0 20px 0 26px;border-top:1px solid var(--color-line)}
.chat-k-row:first-child{border-top:0;padding-top:3px}
.chat-k-flash{position:absolute;inset:0;z-index:0;background:var(--color-lime-pale);pointer-events:none}
.chat-k-kopf .chat-k-flash{background:rgba(184,251,60,.22)}   /* im Navy-Balken: Lime nur leicht, der helle Text bleibt gut lesbar */
.chat-k-btn{position:relative;z-index:1;display:grid;grid-template-columns:112px minmax(0,1fr) 14px;gap:12px;align-items:baseline;width:100%;padding:3px 0;
  font:inherit;text-align:left;color:inherit;background:none;border:0;cursor:pointer}
.chat-k-k{font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1.55;color:var(--color-muted)}
.chat-k-v{min-width:0;font-size:14.5px;line-height:1.4;color:var(--color-ink);overflow-wrap:anywhere}
.chat-k-btn .chat-ic{align-self:center;width:12px;height:12px;color:var(--color-muted);opacity:0;transition:opacity 160ms var(--ease-out)}
.chat-k-row .chat-k-btn .chat-ic{opacity:.6}
@media(hover:hover) and (pointer:fine){.chat-k-btn:hover .chat-ic{opacity:1}}
.chat-k-input{display:block;width:100%;margin:2px 0;padding:6px 10px;font-size:14.5px;line-height:1.4}
/* Zeile „Kontakt“ im Abschluss: ruhiger als die Felder */
.chat-k-kontakt .chat-k-v{font-size:13.5px;color:var(--color-body)}
.mgap-anfrage.is-done .chat-k-btn{cursor:default;color:inherit}
.mgap-anfrage.is-done .chat-k-btn .chat-ic{display:none}

/* ── Verlauf ── */
.chat-log{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:auto;padding:20px 20px 24px;scrollbar-width:thin;scrollbar-color:var(--color-line-strong) transparent}
.chat-log:focus-visible{outline-offset:-2px}
.chat-flow{display:block;padding-bottom:var(--chat-abstand,0px)}
/* Marken am Anfang/Ende des Verlaufs (für den IntersectionObserver) */
.chat-sent{display:block;height:1px;margin:0 0 -1px;pointer-events:none}
/* Weicher Auslauf: zeigt, dass es oben/unten weitergeht, damit nie eine halbe Zeile hart abgeschnitten wirkt */
.chat-log[data-unten="1"]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent)}
.chat-log[data-oben="1"]{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px);mask-image:linear-gradient(to bottom,transparent,#000 16px)}
.chat-log[data-oben="1"][data-unten="1"]{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 48px),transparent)}
.chat-turn+.chat-turn{margin-top:26px}
/* KI-Hinweis: klein und leise unter dem Kasten, volle Breite, ohne Kasten und Linie */
/* Die Spalte ist ein Raster mit 18 px Abstand (site.css); der negative Rand holt den Hinweis dicht an den Kasten */
.chat-ki{display:flex;gap:6px;align-items:flex-start;margin-top:-12px;font-size:12px;line-height:1.45;color:var(--color-muted);text-wrap:pretty}
.chat-ki .chat-ic{width:13px;height:13px;margin-top:1.5px}

/* Assistent: Text links ohne Sprechblase, kleines Absenderlabel */
.chat-who{margin-bottom:8px;font-family:var(--font-display);font-size:13px;font-weight:600;line-height:1;color:var(--color-muted)}
.chat-react{margin-bottom:10px;font-size:15px;line-height:1.55;color:var(--color-body)}
/* Einordnung: ein eigener, ruhiger Gedanke, kein Quittieren */
.chat-ein{margin-bottom:14px;font-size:15px;line-height:1.6;color:var(--color-ink);text-wrap:pretty}
.chat-q{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--color-ink);text-wrap:balance;outline:0}
.chat-react+.chat-q,.chat-ein+.chat-q{margin-top:4px}

/* Frage mit Eingabe: Tippen steht zuerst, Chips sind gleichrangig, aber leiser */
.chat-ask{margin-top:14px}
.chat-compose{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 14px;background:var(--color-paper);border:1.5px solid var(--color-line-field,rgba(0,31,84,.55));border-radius:var(--chat-r);
  transition:border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
/* Fokus: Die aktive Frage hat schon einen Navy-Rand; sichtbar wird der Fokus erst durch den Ring außen (wie :focus-visible der Seite) */
.chat-compose:focus-within{border-color:var(--color-navy);box-shadow:0 0 0 3px rgba(184,251,60,.45);outline:2px solid var(--color-navy);outline-offset:3px}
.mgap-anfrage .chat-input{flex:1;min-width:0;width:auto;min-height:3.1em;max-height:200px;padding:3px 0;border:0;border-radius:0;box-shadow:none;background:transparent;resize:none;
  font-size:16px;line-height:1.55;overflow-y:auto}
.mgap-anfrage .chat-input:focus{border:0;box-shadow:none;outline:0}
.mgap-anfrage .chat-input::placeholder{color:var(--color-muted);opacity:1;font-size:15px}
/* Platz für den Mikrofon-Knopf (Phase 2): leer, nichts sichtbar */
.chat-tools{display:flex;align-items:center;gap:6px;flex:none}
.chat-tools:empty{display:none}
.chat-send{display:grid;place-items:center;flex:none;width:40px;height:40px;color:var(--color-lime);background:var(--color-navy);border:0;border-radius:var(--chat-r);cursor:pointer;
  transition:background 200ms var(--ease-out),opacity 200ms var(--ease-out),transform 160ms var(--ease-out)}
.chat-send .chat-ic{width:20px;height:20px}
.chat-send:disabled{color:rgba(184,251,60,.45);background:var(--color-navy);cursor:default}   /* bleibt erkennbar Navy; nur der Pfeil ist gedämpft */
.chat-send:not(:disabled):active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.chat-send:not(:disabled):hover{background:var(--color-navy-mid)}}
.chat-hint{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--color-muted)}
.chat-oder{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.chat-oder-k{margin-right:2px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--color-muted)}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chat-chip{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;font-family:var(--font-body);font-size:13.5px;font-weight:500;line-height:1.35;text-align:left;
  color:var(--color-ink);background:var(--color-paper);border:1px solid var(--color-line-strong);border-radius:var(--chat-r);cursor:pointer;
  transition:border-color 200ms var(--ease-out),background 200ms var(--ease-out),color 200ms var(--ease-out),transform 160ms var(--ease-out)}
.chat-chip:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.chat-chip:not([aria-pressed="true"]):hover{border-color:var(--color-navy);background:var(--color-lime-pale)}}
.chat-chip[aria-pressed="true"]{background:var(--color-navy);border-color:var(--color-navy);color:var(--color-on-navy)}
.chat-box{display:grid;place-items:center;width:15px;height:15px;flex:none;border:1.5px solid var(--color-line-field,rgba(0,31,84,.55));border-radius:var(--radius);
  transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),color 200ms var(--ease-out)}
.chat-box .chat-ic{width:11px;height:11px;stroke-width:2.4;opacity:0;transition:opacity 160ms var(--ease-out)}
.chat-chip[aria-pressed="true"] .chat-box{background:var(--color-lime);border-color:var(--color-lime);color:var(--color-navy)}
.chat-chip[aria-pressed="true"] .chat-box .chat-ic{opacity:1}
.chat-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin-top:8px}
.chat-skip,.chat-weiche{padding:6px 0;font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--color-navy);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--color-line-strong);text-underline-offset:3px;transition:color 200ms var(--ease-out)}
.chat-weiche{font-family:var(--font-body);font-weight:400;text-align:left}
@media(hover:hover) and (pointer:fine){.chat-skip:hover,.chat-weiche:hover{text-decoration-color:var(--color-lime-dark)}}   /* wie a:hover der Seite */
.chat-typing{position:relative;display:inline-block;overflow:hidden;padding-bottom:8px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--color-muted)}
.chat-typing[data-still="1"]{visibility:hidden}
.chat-typing i{position:absolute;left:0;bottom:0;width:28%;height:2px;background:var(--color-lime-dark);animation:chat-sweep 1.15s linear infinite}
@keyframes chat-sweep{from{transform:translateX(-100%)}to{transform:translateX(360%)}}

/* Besucher: Antwort rechts auf ruhiger Arctic-Fläche (Navy bleibt den Aktionen vorbehalten) */
.chat-v{display:flex;justify-content:flex-end}
.chat-pill{max-width:min(88%,440px);padding:10px 16px;font-size:15px;line-height:1.5;color:var(--color-ink);background:var(--color-arctic);
  border-radius:var(--chat-r);white-space:pre-line;overflow-wrap:anywhere}

/* Kontaktkarte */
.chat-card{margin-top:14px;padding:18px;border:1px solid var(--color-line-strong);border-radius:var(--chat-r);background:var(--color-paper)}
.chat-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.chat-card[data-fertig="1"] .chat-fields{margin-bottom:0}
.chat-fields .f{align-content:start;min-width:0}
.chat-fields input{padding:11px 12px}
.mgap-anfrage input[aria-invalid="true"]{border-color:var(--color-error)}
.chat-err{font-family:var(--font-display);font-size:13.5px;font-weight:600;line-height:1.4;color:var(--color-error)}
.chat-card-next{width:100%}
.chat-card-next .chat-ic{width:18px;height:18px}

/* Gesprächsfahrplan: kein Spiegel der Angaben, sondern was im Gespräch ansteht */
.chat-plan{position:relative;padding:12px 18px 11px;background:var(--color-arctic);border-radius:var(--chat-r);outline:0}
.chat-plan-t{margin-bottom:6px;font-family:var(--font-display);font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--color-ink);outline:0}
.chat-plan-h{margin-bottom:5px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--color-muted)}
.chat-plan-nr{list-style:none;counter-reset:pn;display:grid;gap:4px;margin-bottom:8px}
.chat-plan-nr li{counter-increment:pn;position:relative;padding-left:30px;font-size:14.5px;line-height:1.45;color:var(--color-ink)}
.chat-plan-nr li::before{content:counter(pn,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--font-display);font-size:13px;font-weight:700;line-height:1.6;color:var(--color-navy);font-variant-numeric:tabular-nums}
.chat-plan-liste{list-style:none;display:grid;gap:2px}
.chat-plan-liste li{position:relative;padding-left:18px;font-size:14px;line-height:1.45;color:var(--color-body)}
.chat-plan-liste li::before{content:"";position:absolute;left:1px;top:.75em;width:8px;height:1.5px;background:var(--color-navy)}
.chat-plan-wait,.chat-plan-ki{margin-top:8px;font-size:13px;color:var(--color-muted)}
.chat-plan-wait{position:relative;display:inline-block;overflow:hidden;margin-top:0;padding-bottom:8px}
.chat-plan-wait::after{content:"";position:absolute;left:0;bottom:0;width:28%;height:2px;background:var(--color-lime-dark);animation:chat-sweep 1.15s linear infinite}
/* Desktop: Herkunftsvermerk rechts neben dem Titel statt in einer eigenen Zeile */
@media(min-width:561px){.chat-plan-ki{position:absolute;top:16px;right:18px;margin:0}}
.chat-plan[aria-busy="true"] .chat-plan-body{min-height:200px}

/* Bestätigung: gleiche Fläche wie die bisherige Danke-Meldung (.form-ok) */
.chat-done{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;font-family:var(--font-display);font-size:15px;font-weight:600;line-height:1.5;
  color:var(--color-navy);background:var(--color-lime-pale);border-radius:var(--chat-r);outline:0}
/* erledigt: Navy-Haken auf einer kleinen Lime-Fläche (Lime als Fläche, Navy darauf 12,77:1), kein Rahmen */
.chat-done .chat-ic{width:24px;height:24px;margin-top:0;padding:4px;background:var(--color-lime);border-radius:var(--chat-r);stroke-width:2.4}

/* Fuß: nur im Abschluss */
.chat-dock{display:none;flex:none;padding:8px 20px 10px;border-top:1px solid var(--color-line);background:var(--color-paper)}
.mgap-anfrage[data-mode="aktion"] .chat-dock{display:block}
.chat-btns{display:flex;flex-wrap:wrap;gap:10px}
.chat-btns .d-btn{flex:1 1 auto;justify-content:center;padding-top:12px;padding-bottom:12px}
.chat-ok{flex:2 1 220px!important}
.chat-fail{margin-top:6px;font-family:var(--font-display);font-size:13.5px;font-weight:600;line-height:1.4;color:#8A1C1C}
.chat-consent{margin-top:6px;font-size:12.5px;line-height:1.45}

/* Handy: Kontext als schmale Zeile mit Zähler, klappt beim Füllen kurz auf */
@media(max-width:560px){
  .mgap-anfrage{height:clamp(540px,calc(100dvh - 84px - var(--chat-ki-h,0px)),780px)}
  .chat-kontext{padding:0}
  .chat-k-kopf{align-items:center;margin:0;padding:11px 16px}
  .chat-k-leer{display:none!important}
  .chat-k-zaehler{display:inline!important;margin-left:auto}
  .chat-k-kopf>.chat-ic{display:block;margin-left:2px;color:var(--color-on-navy);transition:transform 200ms var(--ease-out)}
  .chat-kontext[data-offen="1"] .chat-k-kopf>.chat-ic{transform:rotate(180deg)}
  .chat-k-toggle{display:block;position:absolute;inset:0;background:none;border:0;cursor:pointer}
  .chat-k-toggle:focus-visible{outline:2px solid var(--color-lime);outline-offset:-5px}   /* innen: der Kasten schneidet außen ab, Navy auf Navy wäre unsichtbar */
  .chat-kontext[data-z="0"] .chat-k-kopf>.chat-ic,.chat-kontext[data-z="0"] .chat-k-toggle{display:none}
  .chat-k-liste{display:none;position:absolute;left:0;right:0;top:100%;padding:0 0 8px;background:var(--chat-grau)}
  .chat-k-row{padding:0 16px 0 30px}
  .chat-k-row:first-child{padding-top:3px}
  .chat-kontext[data-offen="1"] .chat-k-liste{display:block}
  /* Abschluss: offener Kontext schiebt den Verlauf nach unten, statt ihn zu überdecken */
  .mgap-anfrage[data-mode="aktion"] .chat-kontext[data-offen="1"] .chat-k-liste,.mgap-anfrage[data-mode="fertig"] .chat-kontext[data-offen="1"] .chat-k-liste{position:static}
  .chat-k-btn{grid-template-columns:106px minmax(0,1fr) 14px;gap:10px;padding:6px 0}
  .chat-k-k{font-size:12.5px}
  .chat-k-kontakt .chat-k-v{font-size:13px;line-height:1.45}
  .chat-log{padding:16px 16px 20px}
  .chat-dock{padding:10px 16px 12px}
  .chat-compose{padding:8px 8px 8px 12px}
  .mgap-anfrage .chat-input{min-height:4.7em}
  .chat-btns{flex-wrap:nowrap;gap:8px}
  .chat-btns .d-btn{padding:13px 10px;flex:1 1 0}
  .chat-btns .chat-ok{flex:1.7 1 0!important}
  .chat-card{padding:16px}
  .chat-fields{grid-template-columns:minmax(0,1fr)}
  .chat-plan{padding:14px 16px 12px}
  .chat-pill{max-width:92%}
  .chat-q{font-size:18px}
}
@media(max-width:560px){.chat-k-zaehler{white-space:nowrap}.chat-k-titel{white-space:nowrap}}
@media(max-width:360px){
  .chat-k-kopf{gap:8px;padding:11px 12px}
  .chat-k-titel{font-size:14px}
}
@media(pointer:coarse){
  .chat-chip{min-height:44px;padding-top:10px;padding-bottom:10px}
  .chat-send{width:44px;height:44px}
  .chat-skip,.chat-weiche{padding:12px 0}
  .chat-k-btn{padding-top:8px;padding-bottom:8px}
}

/* ══ Farbe als Gewicht ══
   Rollen nach der Marke (styles.css: „drei Flächen, zwei Schriften, eine Signalfarbe“):
   Blau = jetzt dran / handeln: --color-navy (Aktion, Marke der aktiven Frage, Links, Nummern), --color-arctic (ruhige Fläche), --color-navy-mid (Hover).
   Grün = erfasst / erledigt: --color-lime als Fläche (Raute wie .d-check, Fortschrittslinie), --color-lime-pale als Schimmer und Hover.
   Lime ist nie Textfarbe auf Weiß. Älteres tritt zurück (--color-muted), das Aktive trägt das Gewicht (--color-ink). */
/* Aktive Frage: kleine Navy-Raute vor dem Absender; ältere Teile gedämpft */
.chat-turn.is-aktiv>.chat-who:not(.chat-sr){display:flex;align-items:center;gap:8px;color:var(--color-navy)}
.chat-turn.is-aktiv>.chat-who:not(.chat-sr)::before{content:"";width:7px;height:7px;background:var(--color-navy);transform:rotate(45deg);flex:none}
.chat-turn.is-alt .chat-q,.chat-turn.is-alt .chat-react:not(.chat-ein){color:var(--color-muted)}
.chat-turn.is-alt .chat-ein{color:var(--color-body)}
/* Das Eingabefeld der offenen Frage ist das, was jetzt dran ist: Navy-Rahmen */
.chat-turn.is-aktiv .chat-compose{border-color:var(--color-navy)}
/* Einordnung: kurzer Lime-Strich am Anfang (kein Kasten) */
.chat-ein::before{content:"";display:block;width:24px;height:3px;margin-bottom:8px;background:var(--color-lime)}
/* Kontext: erfasste Zeilen tragen eine Lime-Raute, der Zähler ebenso */
.chat-k-k{position:relative}
.chat-k-k::before{content:"";position:absolute;left:-17px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--color-lime);outline:1px solid var(--color-navy);transform:rotate(45deg)}
.chat-k-zaehler::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;background:var(--color-lime);transform:rotate(45deg);vertical-align:1px}
.chat-kontext[data-n="0"] .chat-k-zaehler::before{display:none}
.chat-kontext[data-n="0"] .chat-k-zaehler{color:var(--color-on-navy-dim)}
.chat-kontext[data-n="0"] .chat-k-n{color:inherit}

/* Reduzierte Bewegung: Deckkraft darf bleiben, Bewegung entfällt */
@media(prefers-reduced-motion:reduce){
  .chat-chip,.chat-send,.chat-skip,.chat-weiche,.chat-box,.chat-compose,.chat-k-btn .chat-ic{transition-property:opacity,background-color,border-color,color,box-shadow}
  .chat-chip:active,.chat-send:active{transform:none}
  .chat-k-kopf>.chat-ic{transition:none}
  .chat-typing i{animation:none;width:100%;opacity:.45}
  .chat-plan-wait::after{animation:none;width:100%;opacity:.45}
}
