/* Ampercode — Chatfenster
   ==========================================================================
   Wird nach site.css geladen und benutzt dessen Farbvariablen. Die
   Rueckfallwerte hinter jedem var() sind Absicht: Faellt site.css einmal
   aus oder wird das Widget auf einer Seite ohne diese Variablen eingebunden,
   sieht das Chatfenster trotzdem richtig aus statt schwarz auf weiss.

   Alles hier ist auf 'self' beschraenkt — keine externen Schriften, keine
   Bilder von fremden Servern, kein Inline-Style. Damit bleibt die Content-
   Security-Policy aus der .htaccess unangetastet; genau das waere bei einem
   eingebundenen Fremd-Widget nicht moeglich.
   ========================================================================== */

.chat-wurzel{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:900;                 /* ueber dem Inhalt, unter moeglichen Overlays */
  font-family:var(--body,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif);

  /* Sichtbar ist hier nur der runde Knopf — der Kasten drumherum ist aber
     so breit wie das Chatfenster, auf dem Handy fast die volle Bildschirm-
     breite. Unsichtbar, aber er faengt jeden Klick ab: Die Links
     "Impressum" und "Datenschutz" in der Fusszeile lagen genau darunter
     und liessen sich auf dem Handy nicht anklicken.
     pointer-events:none macht den Kasten fuer Klicks durchlaessig; die
     beiden Kinder, die wirklich bedienbar sind, holen es sich zurueck. */
  pointer-events:none;
}
.chat-knopf,
.chat-panel{ pointer-events:auto; }

/* ---------------------------------------------------------------- Startknopf */

.chat-knopf{
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.6rem;
  height:3.6rem;
  border:none;
  border-radius:50%;
  background:var(--teal,#1FA89A);
  color:#fff;
  cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(11,46,51,.45);
  transition:background .18s ease, transform .18s ease;
}
.chat-knopf:hover{ background:var(--teal-deep,#0F6E56); transform:translateY(-2px); }
.chat-knopf:focus-visible{ outline:3px solid var(--aqua,#5FD0C4); outline-offset:3px; }
.chat-knopf svg{ width:1.6rem; height:1.6rem; }

/* Wenn das Fenster offen ist, verschwindet der Knopf — sonst steht er
   auf kleinen Bildschirmen mitten im Panel. */
.chat-wurzel.offen .chat-knopf{ display:none; }

/* ------------------------------------------------------------------- Panel */

.chat-panel{
  display:none;
  flex-direction:column;
  width:23rem;
  height:32rem;
  max-height:calc(100vh - 2.5rem);
  background:var(--card,#fff);
  border-radius:var(--radius,20px);
  box-shadow:0 20px 50px -20px rgba(11,46,51,.4);
  overflow:hidden;
}
.chat-wurzel.offen .chat-panel{ display:flex; }

.chat-kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.9rem 1rem .9rem 1.2rem;
  background:var(--teal,#1FA89A);
  color:#fff;
}
.chat-kopf h2{
  margin:0;
  font-family:var(--display,'Space Grotesk',system-ui,sans-serif);
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
}
.chat-kopf p{ margin:.1rem 0 0; font-size:.78rem; opacity:.85; }

.chat-schliessen{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  transition:background .16s ease;
}
.chat-schliessen:hover{ background:rgba(255,255,255,.3); }
.chat-schliessen:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------------------------------------------------------------- Verlauf */

.chat-verlauf{
  flex:1 1 auto;
  overflow-y:auto;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  background:var(--mint,#E7F4EF);
}

.chat-blase{
  max-width:85%;
  padding:.65rem .9rem;
  border-radius:14px;
  font-size:.92rem;
  line-height:1.55;
  white-space:pre-line;
  word-break:break-word;
}
.chat-blase.bot{
  align-self:flex-start;
  background:var(--card,#fff);
  color:var(--ink,#0B2E33);
  border-bottom-left-radius:5px;
}
.chat-blase.ich{
  align-self:flex-end;
  background:var(--teal,#1FA89A);
  color:#fff;
  border-bottom-right-radius:5px;
}

/* Weiterfuehrender Link innerhalb einer Bot-Antwort */
.chat-blase .chat-link{
  display:inline-block;
  margin-top:.5rem;
  font-weight:600;
  font-size:.88rem;
  color:var(--teal-deep,#0F6E56);
  text-decoration:none;
  border-bottom:1.5px solid currentColor;
}
.chat-blase .chat-link:hover{ color:var(--teal,#1FA89A); }

/* Tippanzeige, waehrend die Antwort geholt wird */
.chat-tippt{
  align-self:flex-start;
  display:flex;
  gap:.28rem;
  padding:.8rem .9rem;
  background:var(--card,#fff);
  border-radius:14px;
  border-bottom-left-radius:5px;
}
.chat-tippt span{
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:var(--muted,#4d6a6b);
  opacity:.45;
  animation:chat-huepf 1.1s infinite ease-in-out;
}
.chat-tippt span:nth-child(2){ animation-delay:.16s; }
.chat-tippt span:nth-child(3){ animation-delay:.32s; }
@keyframes chat-huepf{
  0%,60%,100%{ transform:translateY(0);    opacity:.45; }
  30%        { transform:translateY(-4px); opacity:.9;  }
}

/* ------------------------------------------------------- Frage-Vorschlaege */

.chat-vorschlaege{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  padding:0 1rem .8rem;
  background:var(--mint,#E7F4EF);
}
.chat-vorschlag{
  padding:.4rem .8rem;
  border:1.5px solid var(--teal-soft,#9FE1CB);
  border-radius:999px;
  background:var(--card,#fff);
  color:var(--teal-deep,#0F6E56);
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.chat-vorschlag:hover{ background:var(--teal,#1FA89A); color:#fff; border-color:var(--teal,#1FA89A); }
.chat-vorschlag:focus-visible{ outline:2px solid var(--teal,#1FA89A); outline-offset:2px; }

/* --------------------------------------------------------------- Eingabe */

.chat-eingabe{
  display:flex;
  gap:.5rem;
  padding:.75rem;
  border-top:1px solid var(--line,rgba(11,46,51,.1));
  background:var(--card,#fff);
}
.chat-eingabe input{
  flex:1 1 auto;
  min-width:0;
  padding:.6rem .85rem;
  border:1.5px solid #d5e6e0;
  border-radius:999px;
  font-family:inherit;
  font-size:.92rem;
  color:var(--ink,#0B2E33);
  background:#fff;
}
.chat-eingabe input:focus{ outline:2px solid var(--teal,#1FA89A); border-color:var(--teal,#1FA89A); }

.chat-senden{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border:none;
  border-radius:50%;
  background:var(--teal,#1FA89A);
  color:#fff;
  cursor:pointer;
  transition:background .16s ease;
}
.chat-senden:hover:not(:disabled){ background:var(--teal-deep,#0F6E56); }
.chat-senden:disabled{ opacity:.45; cursor:not-allowed; }
.chat-senden:focus-visible{ outline:2px solid var(--teal-deep,#0F6E56); outline-offset:2px; }
.chat-senden svg{ width:1.1rem; height:1.1rem; }

.chat-fuss{
  margin:0;
  padding:0 .9rem .7rem;
  background:var(--card,#fff);
  color:var(--muted,#4d6a6b);
  font-size:.72rem;
  line-height:1.45;
  text-align:center;
}

/* ------------------------------------------------------------- Kleine Geraete
   Unter 560px wird das Panel fast bildschirmfuellend. Ein 23rem breites
   Fenster in der Ecke ist auf dem Handy nicht bedienbar. */

@media (max-width:560px){
  .chat-wurzel{ right:.75rem; bottom:.75rem; left:.75rem; }
  .chat-panel{
    width:auto;
    height:min(34rem, calc(100vh - 1.5rem));
  }
  .chat-wurzel .chat-knopf{ margin-left:auto; }   /* Knopf bleibt rechts */
}

/* ------------------------------------------------------- Bewegung reduzieren
   Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat, bekommt keine
   huepfenden Punkte und keine Verschiebung beim Hover. */

@media (prefers-reduced-motion: reduce){
  .chat-knopf,
  .chat-senden,
  .chat-vorschlag{ transition:none; }
  .chat-knopf:hover{ transform:none; }
  .chat-tippt span{ animation:none; opacity:.55; }
}