/* Chat-Widget für die statischen Seiten — ohne React.
   Es schwebt unten rechts und läuft beim Blättern mit, auf dem Handy ebenso.
   Sobald die Fusszeile ins Bild kommt, blendet chat.js den Knopf aus
   (data-am-fuss), damit der unterste Bereich frei bleibt (04.10.2026). */

.vc-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: 'Quicksand', -apple-system, 'Helvetica Neue', system-ui, sans-serif;
}

.vc-chat__fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 2px solid #1C1613;
  background: #A83A08;
  color: #FBF4EE;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 6px 6px 0 rgba(28, 22, 19, 0.85);
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), background 0.3s ease;
}
.vc-chat__fab:hover { transform: translateY(-4px); background: #9C4517; }
/* Ragt der Kopf der Seite über den unteren Bildschirmrand, blendet chat.js den
   Knopf aus (data-ueber-kopf), bis der Kopf hinausgescrollt ist — sonst läge er
   auf Text oder Knöpfen (26.09.2026). Sanft, wie alles an der Marke. */
.vc-chat[data-ueber-kopf="true"] .vc-chat__fab,
.vc-chat[data-am-fuss="true"] .vc-chat__fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.vc-chat__fab { transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; }
.vc-chat__fab-dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: #FFD9C2; flex: none;
}

.vc-chat__panel {
  display: none;
  width: min(360px, calc(100vw - 48px));
  background: #FFFDF8;
  border: 2px solid #1C1613;
  border-radius: 18px;
  box-shadow: 6px 6px 0 rgba(28, 22, 19, 0.85);
  overflow: hidden;
}
.vc-chat[data-open="true"] .vc-chat__panel { display: block; }

.vc-chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: #A83A08;
  color: #FBF4EE;
}
.vc-chat__head strong { font-size: 15.5px; font-weight: 700; }
.vc-chat__head span { display: block; font-size: 12.5px; opacity: 0.85; font-weight: 600; }
.vc-chat__close {
  border: none; background: transparent; color: #FBF4EE;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
}

/* Dezenter Hinweis unter dem Kopf: KI-Assistent, Datenweg, kein Personendaten-Eintrag. */
.vc-chat__hinweis {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 600;
  color: #5A524B;
  background: #FBF4EE;
  border-bottom: 1px solid rgba(28,22,19,.14);
}
.vc-chat__hinweis > summary {
  padding: 9px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Safari zeigt sonst sein eigenes Dreieck */
.vc-chat__hinweis > summary::-webkit-details-marker { display: none; }
/* Das Pluszeichen dreht sich beim Aufklappen zum ×, wie bei den Fragen auf
   der Website — dasselbe Zeichen, dieselbe Bewegung. */
.vc-chat__hinweis > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 14px;
  line-height: 1;
  color: #B25222;
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1);
}
.vc-chat__hinweis[open] > summary::after { transform: rotate(45deg); }
.vc-chat__hinweis > p {
  margin: 0;
  padding: 0 16px 10px;
}
.vc-chat__hinweis a { color: #B25222; text-decoration: underline; text-underline-offset: 2px; }
.vc-chat__hinweis a:hover { color: #9C4517; }

.vc-chat__log {
  padding: 16px;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  background: #FBF4EE;
}
.vc-chat__msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.vc-chat__msg--bot { align-self: flex-start; background: #FFFDF8; border: 1px solid rgba(28,22,19,.32); color: #1C1613; }
.vc-chat__msg--user { align-self: flex-end; background: #B25222; color: #FFFDF8; }

.vc-chat__form {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid rgba(28,22,19,.14);
  background: #FFFDF8;
}
.vc-chat__form input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: 1.5px solid #1C1613;
  border-radius: 999px;
  font-family: inherit; font-size: 15px; color: #1C1613;
  background: #FFFDF8;
}
.vc-chat__form input:focus { outline: 2px solid rgba(178,82,34,.35); outline-offset: 1px; }
.vc-chat__form button {
  flex: none; width: 44px;
  border: 1.5px solid #1C1613; border-radius: 999px;
  background: #E2652C; color: #FFFDF8;
  font-size: 17px; font-weight: 700; cursor: pointer;
}
.vc-chat__form button:hover { background: #F4793E; }
.vc-chat__form button[disabled] { opacity: 0.5; cursor: default; }

/* Handy: ebenfalls schwebend und mitlaufend. Der Knopf bleibt unten rechts,
   das geöffnete Fenster darf die volle Breite nutzen — darum left und right
   gesetzt, die Ausrichtung hält den Knopf trotzdem rechts. */
@media (max-width: 720px) {
  .vc-chat {
    left: 16px;
    right: 16px;
    bottom: 16px;
    align-items: flex-end;
  }
  .vc-chat__panel { width: auto; }
  .vc-chat__log { max-height: 46vh; }
  .vc-chat__fab { padding: 12px 18px; font-size: 14.5px; }
}

/* Wer das Anheben nicht will, bekommt es ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .vc-chat { transition: none; }
}