/* 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);

  /* Der Rahmen selbst faengt keine Klicks ab. Wichtig unter 560px: dort wird
     die Wurzel per left+right bildschirmbreit (damit das Panel breit werden
     kann). Ohne diese Zeile liegt bei geschlossenem Panel ein unsichtbarer
     Streifen ueber dem Seitenfuss - Impressum und Datenschutz waren so auf
     dem Handy nicht anklickbar. */
  pointer-events:none;
}

/* Nur die sichtbaren Teile nehmen Klicks entgegen. */
.chat-wurzel > *{ 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; }
}