/* Kopie aus 01_bestand/website-astro/src/site/chat/chat.css (Stand 07.10.2026). */
/* KI-Chat der Agentur-Website (Panel.tsx, Ausloeser.tsx; Auftrag WC-1a).
   Nur Tokens --bm-* / --kern-*. Lokale Bausteinmaße ohne --bm-Präfix:
   --ch-breite    Breite des Panels ab 640 px (380 px).
   --ch-hoehe     Höhe der Blase ab 640 px (höchstens 75 dvh bzw. 560 px).
   --ch-abstand   Abstand der Blase zum unteren, rechten Rand.
   --ch-rand      Innenabstand des Panels.
   --ch-z         Ebene: über Kopf, Fortschrittsleiste und dem Element unten
                  rechts, unter dem Mobil-Menü (9999) und dem Anmerkungstool.
   --ch-zeile     Zeilenhöhe des Eingabefelds in rem (für das Höchstmaß von
                  sechs Zeilen).
   Flächen: Grund --bm-bg, Karten eine Stufe heller (--bm-bg-alt), Eingabe
   und Züge des Besuchers auf Rosé (--bm-bg-kuehl). Der Signalverlauf steht
   nur als feine Linie am Panelkopf, im Zeichen und im Sendeknopf.
   Ab 640 px schwebt das Panel als Blase unten rechts (BRA-84), darunter
   füllt es den Bildschirm.
   Breakpoint 639/640 laut Liste in tokens.css. */

/* ── Auslöser in der Kopfleiste ───────────────────────────────────────── */
.bm-chat-symbol { flex: none; display: block; overflow: visible; }
.bm-chat-symbol__von { stop-color: var(--kern-signal-pol); }
.bm-chat-symbol__bis { stop-color: var(--bm-signal); }
.bm-chat-symbol__akzent {
  opacity: 0;
  transition: opacity var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat-symbol__ruhe { transition: opacity var(--bm-dauer-kurz) var(--bm-ease); }
.bm-chat-ausloeser:is(:hover, :focus-visible, [aria-expanded='true']) .bm-chat-symbol__akzent { opacity: 1; }
.bm-chat-ausloeser:is(:hover, :focus-visible, [aria-expanded='true']) .bm-chat-symbol__ruhe { opacity: 0; }

/* hidden gilt auch für Elemente mit eigener display-Regel (Grav-Ergänzung: Zugfolge, Formular, Fuß, Zähler) */
.bm-chat [hidden] { display: none !important; }

/* ── Hülle ────────────────────────────────────────────────────────────── */
.bm-neu.bm-chat {
  --ch-breite: 380px;
  --ch-hoehe: min(75dvh, 560px);
  --ch-abstand: 1rem;
  --ch-rand: 1.125rem;
  --ch-z: calc(var(--bm-z-menue) - 1);
  --ch-zeile: 1.5;
  /* Fokusrahmen: das Panel ist hell (--bm-bg), gleich auf welcher Seite */
  --bm-fokus: var(--bm-fokus-auf-hell);
  --bm-fokus-gegen: var(--bm-fokus-auf-dunkel);
  position: fixed;
  inset: 0;
  z-index: var(--ch-z);
  background: none;
  font-family: var(--bm-font);
  color: var(--bm-text);
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--bm-dauer);
}
.bm-neu.bm-chat--offen {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.bm-chat__schleier {
  position: absolute;
  inset: 0;
  background: var(--bm-schleier-leicht);
  opacity: 0;
  transition: opacity var(--bm-dauer) var(--bm-ease);
}
.bm-chat--offen .bm-chat__schleier { opacity: 1; }

.bm-chat__panel {
  position: absolute;
  right: var(--ch-abstand);
  bottom: var(--ch-abstand);
  display: flex;
  flex-direction: column;
  width: min(var(--ch-breite), calc(100% - 2 * var(--ch-abstand)));
  height: min(var(--ch-hoehe), calc(100dvh - 2 * var(--ch-abstand)));
  overflow: hidden;
  border-radius: var(--bm-radius-gross);
  background: var(--bm-bg);
  box-shadow: var(--bm-schatten-schwebend);
  transform: translateY(var(--ch-abstand)) scale(0.98);
  opacity: 0;
  transition: transform var(--bm-dauer) var(--bm-ease), opacity var(--bm-dauer) var(--bm-ease);
}
.bm-chat--offen .bm-chat__panel { transform: none; opacity: 1; }
.bm-chat__panel:focus { outline: none; }
/* feine Linie im Signalverlauf über dem Panelkopf */
.bm-chat__panel::before {
  content: '';
  flex: none;
  height: 3px;
  background: var(--bm-signal-verlauf);
}

.bm-chat :is(a, button, textarea, input, [tabindex]):focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: var(--bm-fokus-versatz, 2px);
}

.bm-chat__nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Kopf und Kennzeichnung ───────────────────────────────────────────── */
.bm-chat__kopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem calc(var(--ch-rand) - 0.625rem) 0.5rem var(--ch-rand);
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}
.bm-chat__kopf-zeichen { flex: none; color: var(--bm-signal-dunkel); }
.bm-chat__titel {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h3);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-titel);
  letter-spacing: var(--bm-sp-leicht);
  color: var(--bm-text);
}
.bm-chat__zu {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bm-text);
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__zu:hover { background: var(--bm-kachel); }

.bm-chat__kennung {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  margin: 0;
  padding: 0 var(--ch-rand) 0.875rem;
  border-bottom: 1px solid var(--bm-linie-zart);
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}
.bm-chat__marke {
  padding: 0.125rem 0.625rem 0.0625rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-signal-zart);
  color: var(--bm-signal-dunkel);
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-knopf);
  white-space: nowrap;
}
.bm-chat__kennung-link {
  color: var(--bm-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.bm-chat__kennung-link:hover { color: var(--bm-signal-dunkel); }

/* Neu beginnen (W18-03): leiser Pillenknopf im Kopf, neben Schließen */
.bm-chat__neu {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0.0625rem 0.875rem 0;
  border: 0;
  border-radius: var(--bm-radius-pille);
  background: none;
  color: var(--bm-text);
  font: inherit;
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-knopf);
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__neu svg { color: var(--bm-signal-kontur); }
.bm-chat__neu:hover { background: var(--bm-kachel); }

/* ── Lauf (Verlauf, Start, Rückfall) ──────────────────────────────────── */
.bm-chat__lauf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ch-rand);
  display: flex;
  flex-direction: column;
  gap: var(--ch-rand);
}
.bm-chat__leise {
  margin: 0;
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}

.bm-chat__skelett { display: grid; gap: 0.75rem; }
.bm-chat__skelett span {
  display: block;
  height: 3rem;
  border-radius: var(--bm-radius-klein);
  background: var(--bm-kachel);
}
.bm-chat__skelett span:first-child { width: 70%; height: 2rem; }

.bm-chat__begruessung {
  margin: 0 0 0.75rem;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h2);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-snug);
  letter-spacing: var(--bm-sp-eng);
  color: var(--bm-text);
}
.bm-chat__hinweis {
  margin: 0 0 var(--ch-rand);
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-lang);
  color: var(--bm-text-leise);
}

.bm-chat :is(.bm-chat__vorschlaege, .bm-chat__wege, .bm-chat__empfehlungen, .bm-chat__folgen, .bm-chat__zuege, .bm-chat__quellen ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bm-chat__vorschlaege,
.bm-chat__wege { display: grid; gap: 0.5rem; }

.bm-chat__vorschlag,
.bm-chat__weg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 48px;
  padding: 0.6875rem 1rem 0.5625rem 1.125rem;
  border: 1px solid var(--bm-linie);
  border-radius: var(--bm-radius-klein);
  background: var(--bm-bg-alt);
  color: var(--bm-text);
  font: inherit;
  font-size: var(--bm-t-knopf);
  line-height: var(--bm-zh-kompakt);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease), border-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__vorschlag svg,
.bm-chat__weg svg { flex: none; color: var(--bm-signal-kontur); }
.bm-chat__vorschlag:hover,
.bm-chat__weg:hover { background: var(--bm-bg-kuehl); border-color: var(--bm-signal-kontur); }

/* ── Züge ─────────────────────────────────────────────────────────────── */
.bm-chat__zuege { display: grid; gap: var(--ch-rand); }
.bm-chat__zug { display: grid; gap: 0.75rem; min-width: 0; }
.bm-chat__zug--besucher { justify-items: end; }
.bm-chat__frage {
  max-width: 88%;
  margin: 0;
  padding: 0.6875rem 1rem 0.5625rem;
  border-radius: var(--bm-radius-klein);
  background: var(--bm-bg-kuehl);
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.bm-chat__text {
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-lang);
  color: var(--bm-text);
  overflow-wrap: anywhere;
}
.bm-chat__text :is(p, ul, ol) { margin: 0; }
.bm-chat__text > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 0.75rem; }
.bm-chat__text :is(ul, ol) { padding-left: 1.25rem; }
.bm-chat__text ul { list-style: disc; }
.bm-chat__text ol { list-style: decimal; }
.bm-chat__text li + li { margin-top: 0.25rem; }
.bm-chat__text li::marker { color: var(--bm-signal-kontur); }

.bm-chat__status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 1.5rem;
  margin: 0;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}
.bm-chat__punkte { display: inline-flex; gap: 0.25rem; }
.bm-chat__punkte span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bm-signal-kontur);
  animation: bm-chat-punkt var(--bm-dauer-puls) var(--bm-ease) infinite alternate;
}
.bm-chat__punkte span:nth-child(2) { animation-delay: calc(var(--bm-dauer-puls) / 3); }
.bm-chat__punkte span:nth-child(3) { animation-delay: calc(var(--bm-dauer-puls) / 1.5); }
@keyframes bm-chat-punkt {
  from { opacity: 0.3; }
  to { opacity: 1; }
}
.bm-chat__abbruch { font-style: normal; }

/* Meldung: ruhig, ohne Fläche in Rot – Zeichen und Text */
.bm-chat__meldung { display: grid; gap: 0.875rem; }
.bm-chat__meldung-text {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
}
.bm-chat__meldung-text svg { flex: none; margin-top: 0.1875rem; color: var(--bm-signal-dunkel); }
.bm-chat__rueckfall:focus { outline: none; }

/* Erstanliegen aus dem Branchen-Kopf (B14): über dem Rückfall, Wortlaut des Chips */
.bm-chat__anliegen {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: var(--bm-radius-klein);
  background: var(--bm-bg-kuehl);
}
.bm-chat__anliegen-text {
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-mittel);
  font-weight: var(--bm-g-mittel);
  color: var(--bm-text);
}

.bm-chat__suche { display: grid; gap: 0.5rem; }
.bm-neu .bm-chat__suchfeld { background-color: var(--bm-bg-kuehl); }

.bm-chat__knopf,
.bm-chat__werkzeug--text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  min-height: 44px;
  padding: 0.0625rem 1rem 0;
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-pille);
  background: none;
  color: var(--bm-text);
  font: inherit;
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-knopf);
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__knopf:hover,
.bm-chat__werkzeug--text:hover { background: var(--bm-kachel); }

/* Quellen als Karten (W18-03): eine Reihe zum Wischen, je Karte Art,
   Titel, Abschnitt und Auszug. Die Reihe rollt nur in sich, nie die Seite. */
.bm-chat__quellen { display: grid; gap: 0.5rem; min-width: 0; }
.bm-chat__quellen ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12.5rem, 72%);
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
}
.bm-chat__quellen ul:has(> li:only-child) { grid-auto-columns: 100%; }
.bm-chat__quellen li { display: flex; min-width: 0; scroll-snap-align: start; }
.bm-chat__quelle {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bm-linie-zart);
  border-radius: var(--bm-radius-klein);
  background: var(--bm-bg-alt);
  color: var(--bm-text);
  text-decoration: none;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease), border-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__quelle:hover { background: var(--bm-bg-kuehl); border-color: var(--bm-signal-kontur); }
.bm-chat__quelle-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-signal-dunkel);
}
.bm-chat__quelle-nr {
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-signal-zart);
  font-family: var(--bm-font-ziffer);
}
.bm-chat__quelle-titel {
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-kompakt);
  overflow-wrap: anywhere;
}
.bm-chat__quelle:hover .bm-chat__quelle-titel { color: var(--bm-signal-dunkel); }
.bm-chat__quelle-abschnitt,
.bm-chat__quelle-auszug {
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
  overflow-wrap: anywhere;
}
.bm-chat__quelle-auszug {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Schreibmarke, solange die Antwort einläuft */
.bm-chat__schreibmarke {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.125em;
  vertical-align: -0.125em;
  border-radius: var(--bm-radius-klein);
  background: var(--bm-signal-kontur);
  animation: bm-chat-punkt var(--bm-dauer-puls) var(--bm-ease) infinite alternate;
}

.bm-chat__empfehlungen { display: grid; gap: 0.625rem; }
.bm-chat__karte {
  display: grid;
  gap: 0.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--bm-linie-zart);
  border-radius: var(--bm-radius-klein);
  background: var(--bm-bg-alt);
}
.bm-chat__bereich {
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-signal-dunkel);
}
.bm-chat__karte-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 28px;
  font-size: var(--bm-t-kartentitel);
  line-height: var(--bm-zh-titel);
  color: var(--bm-text);
  text-decoration: none;
}
.bm-chat__karte-titel svg { flex: none; color: var(--bm-signal-kontur); }
.bm-chat__karte-titel:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.bm-chat__karte-grund {
  margin: 0;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}

.bm-chat__werkzeuge { display: flex; align-items: center; gap: 0.25rem; margin-left: -0.625rem; }
.bm-chat__werkzeug {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bm-text-leise);
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease), color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__werkzeug:hover { background: var(--bm-kachel); color: var(--bm-text); }
.bm-chat__werkzeug[aria-pressed='true'] { background: var(--bm-signal-zart); color: var(--bm-signal-dunkel); }
.bm-chat__werkzeug.bm-chat__werkzeug--text {
  display: inline-flex;
  margin-left: 0.5rem;
  padding: 0.0625rem 1rem 0;
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-pille);
  color: var(--bm-text);
}

.bm-chat__folgen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bm-chat__chip {
  min-height: 44px;
  padding: 0.0625rem 1rem 0;
  border: 1px solid var(--bm-signal-kontur);
  border-radius: var(--bm-radius-pille);
  background: var(--bm-signal-zart);
  color: var(--bm-text);
  font: inherit;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-kompakt);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__chip:hover { background: var(--bm-bg-alt); }

/* ── Rückmeldung: Daumen runter (BRA-84) ──────────────────────────────── */
.bm-chat__grund { display: grid; gap: 0.625rem; padding-top: 0.25rem; }
.bm-chat__grund-frage {
  margin: 0;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  font-weight: var(--bm-g-mittel);
  color: var(--bm-text);
}
.bm-chat__grund-arten { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bm-chat__grund-art {
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-pille);
  background: none;
  color: var(--bm-text);
  font: inherit;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-kompakt);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease), border-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__grund-art:hover { background: var(--bm-kachel); }
.bm-chat__grund-art[aria-pressed='true'] { border-color: var(--bm-signal-kontur); background: var(--bm-signal-zart); }
.bm-chat__grund-feld { min-height: 4.5rem; resize: vertical; }
.bm-chat__grund-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bm-chat__grund-danke {
  margin: 0;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-signal-dunkel);
}

/* ── Eingabe und Fuß ──────────────────────────────────────────────────── */
.bm-chat__eingabe {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.375rem 0.625rem;
  padding: 0.875rem var(--ch-rand) 0.5rem;
  border-top: 1px solid var(--bm-linie-zart);
}
.bm-neu.bm-neu .bm-chat__eingabe .bm-chat__feld {
  display: block;
  max-height: calc(6 * var(--ch-zeile) * 1rem + 1.75rem);
  line-height: var(--ch-zeile);
  resize: none;
  overflow-y: auto;
}
.bm-chat__zaehler {
  grid-column: 1 / -1;
  font-family: var(--bm-font-ziffer);
  font-size: var(--bm-t-ziffer);
  color: var(--bm-text-leise);
}
.bm-neu .bm-chat__senden { min-height: 48px; padding-inline: 1.375rem; }
.bm-neu .bm-chat__senden:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.bm-neu .bm-chat__senden:disabled::after { opacity: 0; }

.bm-chat__fuss {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-height: 44px;
  padding: 0 var(--ch-rand) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}

/* ── Anfrage aus dem Chat (WC-2) ──────────────────────────────────────── */
/* Angebot unter einer Antwort: ruhig, ohne eigene Fläche */
.bm-chat__angebot {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--bm-linie-zart);
}
.bm-chat__angebot p {
  margin: 0;
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
}
.bm-chat__angebot-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bm-neu .bm-chat__angebot-ja,
.bm-neu .bm-chat__anfrage-senden { min-height: 44px; padding-inline: 1.25rem; }

/* Formular im Gesprächsfluss: Karte eine Stufe heller als der Grund */
.bm-chat__anfrage {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.125rem;
  border: 1px solid var(--bm-linie-zart);
  border-radius: var(--bm-radius-klein);
  background: var(--bm-bg-alt);
  scroll-margin-top: var(--ch-rand);
}
.bm-chat__anfrage-titel {
  margin: 0;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h3);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-snug);
  color: var(--bm-text);
}
.bm-chat__anfrage-titel:focus { outline: none; }
.bm-chat__anfrage-titel:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: 4px; }
.bm-chat__arten { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.bm-neu.bm-neu.bm-chat .bm-chat__anfrage-label,
.bm-neu.bm-neu.bm-chat .bm-chat__anfrage .bm-formular-label {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text-leise);
}
.bm-chat__arten .bm-chat__anfrage-label { flex-basis: 100%; }
.bm-neu.bm-neu.bm-chat .bm-chat__art {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.0625rem 1rem 0 0.75rem;
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-pille);
  background: var(--bm-bg);
  font-size: var(--bm-t-klein);
  letter-spacing: normal;
  color: var(--bm-text);
  cursor: pointer;
}
.bm-chat__art:has(input:checked) { border-color: var(--bm-signal-kontur); background: var(--bm-signal-zart); }
.bm-chat__art input { margin: 0; width: 1.125rem; height: 1.125rem; accent-color: var(--bm-flaeche-dunkel); }
.bm-chat__art input:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: 2px; }
.bm-chat__pflicht { margin: 0; font-size: var(--bm-t-meta); color: var(--bm-text-leise); }
.bm-chat__anfrage-feld { display: grid; gap: 0.375rem; }
.bm-chat__anfrage-feld .bm-formular-label { margin-bottom: 0.125rem; }
.bm-neu.bm-neu.bm-chat .bm-chat__anfrage textarea.bm-formular-eingabe { min-height: 7rem; resize: vertical; }
.bm-neu.bm-neu.bm-chat .bm-chat__anfrage .bm-formular-eingabe { background-color: var(--bm-bg); }
.bm-neu.bm-neu.bm-chat .bm-chat__anfrage .bm-formular-eingabe[aria-invalid='true'] {
  border-color: var(--bm-fehler);
  box-shadow: inset 0 0 0 1px var(--bm-fehler);
}
.bm-neu.bm-neu.bm-chat .bm-chat__anfrage .bm-formular-pflicht { color: var(--bm-text-leise); }
.bm-neu.bm-neu.bm-chat .bm-chat__anfrage .bm-formular-fehler {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.375rem 0 0;
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-fehler);
}
.bm-neu.bm-neu.bm-chat .bm-chat__anfrage .bm-formular-haken {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  letter-spacing: normal;
  color: var(--bm-text);
  cursor: pointer;
}
.bm-chat__anfrage .bm-formular-haken input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--bm-flaeche-dunkel);
}
.bm-chat__anfrage .bm-formular-haken input:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: 3px; }
.bm-chat__anfrage .bm-formular-haken input[aria-invalid='true'] { outline: 2px solid var(--bm-fehler); outline-offset: 2px; }
.bm-chat__anfrage .bm-formular-kleingedrucktes {
  margin: -0.5rem 0 0;
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}
.bm-chat__anfrage .bm-funnel__link {
  color: var(--bm-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.bm-chat__falle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bm-chat__anfrage-meldung {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--bm-fehler);
  background: var(--bm-bg);
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
}
.bm-chat__anfrage-meldung p { margin: 0; }
.bm-chat__anfrage-meldung-titel { font-weight: var(--bm-g-mittel); }
.bm-chat__anfrage-meldung:focus { outline: none; }
.bm-chat__anfrage-meldung:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: 2px; }
.bm-chat__anfrage-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Bestätigung im Verlauf */
.bm-chat__bestaetigung {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border-radius: var(--bm-radius-klein);
  background: var(--bm-signal-zart);
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
}
.bm-chat__bestaetigung p { margin: 0; }
.bm-chat__bestaetigung-titel { display: flex; align-items: flex-start; gap: 0.625rem; font-weight: var(--bm-g-mittel); }
.bm-chat__bestaetigung-titel svg { flex: none; margin-top: 0.1875rem; color: var(--bm-signal-dunkel); }
.bm-chat__bestaetigung:focus { outline: none; }
.bm-chat__bestaetigung:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: 2px; }

/* Übergabe an das Team („Mit einem Menschen sprechen"), immer im Fuß */
.bm-chat__anfrage-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.0625rem 1rem 0;
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-pille);
  background: none;
  color: var(--bm-text);
  font: inherit;
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-knopf);
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-chat__anfrage-knopf:hover { background: var(--bm-kachel); }

/* ── Schmal: ganzflächig ──────────────────────────────────────────────── */
@media (max-width: 639px) {
  .bm-neu.bm-chat { --ch-rand: 1.25rem; }
  /* Bottom-Sheet: volle Breite, höchstens 80 dvh */
  .bm-chat__panel {
    inset: auto 0 0 0;
    width: 100%;
    height: min(80dvh, 620px);
    border-radius: var(--bm-radius-gross) var(--bm-radius-gross) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-neu.bm-chat,
  .bm-neu.bm-chat--offen,
  .bm-chat__schleier,
  .bm-chat__panel,
  .bm-chat-symbol__akzent,
  .bm-chat-symbol__ruhe { transition: none; }
  .bm-chat__punkte span,
  .bm-chat__schreibmarke { animation: none; }
  .bm-chat__quelle { transition: none; }
  .bm-chat__skelett .bm-skelett { animation: none; }
}

@media print { .bm-neu.bm-chat { display: none; } }

/* ── WC-10: Referenz-Karte mit Bild, Kontakt-Karte, Sprachhinweis, Wunschzeit ── */
.bm-chat__quelle-bild {
  position: relative;
  display: block;
  margin: -0.75rem -0.875rem 0.375rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bm-radius-klein) var(--bm-radius-klein) 0 0;
  background: var(--bm-bg-kuehl);
}
.bm-chat__quelle-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* KI-Kennzeichen (EU-KI-VO Art. 50, docs/regeln-ki-kennzeichnung.md): immer sichtbar */
.bm-chat__ki-marke {
  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-bg-alt);
  color: var(--bm-text);
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-kompakt);
}
.bm-chat__quelle-unterzeile {
  font-size: var(--bm-t-meta);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
  overflow-wrap: anywhere;
}

.bm-chat__kontakt {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--bm-linie-zart);
  border-radius: var(--bm-radius-klein);
  background: var(--bm-bg-alt);
}
.bm-chat__kontakt-titel {
  margin: 0;
  font-size: var(--bm-t-kartentitel);
  line-height: var(--bm-zh-titel);
  color: var(--bm-text);
}

.bm-chat__sprachhinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}
.bm-chat__sprachhinweis svg { flex: none; margin-top: 0.125rem; color: var(--bm-signal-dunkel); }

.bm-chat .bm-chat__wunsch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}