/* Chat auf ki4excellence.aifluesterfee.de
   Look nach dem Styleguide vom 25.9.2026: alles eckig, keine Schatten,
   Haarlinien statt Karten, Tenor Sans für Titel, Jost Light für Text.
   Die Werte stehen hier als eigene Variablen, benannt wie die Token. */

.k4c-knopf, .k4c-fenster {
  --ke-surface: #f7f6f4;       /* Porzellan */
  --ke-surface-warm: #efe6db;  /* Warm Beige */
  --ke-deep: #1e2f5c;          /* Ink Navy, dunkle Bühne */
  --ke-deep-tief: #18264a;     /* Navy 600 */
  --ke-text: #1f2a2e;          /* Kohle */
  --ke-muted: #4a575e;         /* Schiefer */
  --ke-heading: #1e2f5c;
  --ke-on-deep: #f7f6f4;
  --ke-eyebrow-on-deep: #90c4c3; /* Türkis 300 */
  --ke-cta: #c02b5c;           /* Himbeer 500 */
  --ke-cta-hover: #9a224a;     /* Himbeer 600 */
  --ke-link: #c02b5c;
  --ke-rule: #bcc1ce;          /* Haarlinien, Navy 100 */
  --ke-focus: #1e2f5c;
  --ke-nebel: #eae8e6;         /* Formularfelder */
  --ke-display: "Tenor Sans", Optima, Candara, sans-serif;
  --ke-sans: Jost, system-ui, sans-serif;
}

.k4c-knopf {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 0;
  background: var(--ke-cta);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.k4c-knopf:hover { background: var(--ke-cta-hover); }
.k4c-knopf:focus-visible {
  outline: 2px solid var(--ke-focus);
  outline-offset: 2px;
}

.k4c-fenster {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 9999;
  width: min(380px, calc(100vw - 40px));
  height: min(600px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--ke-surface);
  border: 1px solid var(--ke-rule);
  border-radius: 0;
  overflow: hidden;
  font-family: var(--ke-sans);
  font-weight: 300;
  color: var(--ke-text);
}
.k4c-fenster[hidden] { display: none; }

.k4c-kopf {
  background: var(--ke-deep);
  color: var(--ke-on-deep);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}
.k4c-titel {
  font-family: var(--ke-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
}
.k4c-untertitel {
  font-family: var(--ke-sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ke-eyebrow-on-deep);
  margin-top: 6px;
}
.k4c-schliessen {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ke-on-deep);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}
.k4c-schliessen:hover { background: var(--ke-deep-tief); }
.k4c-schliessen:focus-visible {
  outline: 2px solid var(--ke-eyebrow-on-deep);
  outline-offset: 2px;
}

.k4c-verlauf {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.k4c-blase {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.k4c-blase-chat {
  align-self: flex-start;
  background: var(--ke-surface);
  border: 1px solid var(--ke-rule);
}
.k4c-blase-gast {
  align-self: flex-end;
  background: var(--ke-surface-warm);
}
.k4c-blase a {
  color: var(--ke-link);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.k4c-tippt {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 14px;
}
.k4c-tippt span {
  width: 6px;
  height: 6px;
  background: var(--ke-muted);
  animation: k4c-pulst 1.2s infinite;
}
.k4c-tippt span:nth-child(2) { animation-delay: 0.2s; }
.k4c-tippt span:nth-child(3) { animation-delay: 0.4s; }
@keyframes k4c-pulst {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

.k4c-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}
.k4c-vorschlag {
  border: 1px solid var(--ke-rule);
  border-radius: 0;
  background: transparent;
  color: var(--ke-heading);
  padding: 9px 14px;
  font-family: var(--ke-sans);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  min-height: 38px;
  transition: background-color 0.2s ease;
}
.k4c-vorschlag:hover { background: var(--ke-surface-warm); }
.k4c-vorschlag:focus-visible {
  outline: 2px solid var(--ke-focus);
  outline-offset: 2px;
}

.k4c-eingabezeile {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 8px;
  background: var(--ke-surface);
  border-top: 1px solid var(--ke-rule);
}
.k4c-eingabe {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--ke-rule);
  border-radius: 0;
  padding: 11px 12px;
  font-family: var(--ke-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ke-text);
  background: var(--ke-nebel);
  max-height: 110px;
  min-height: 44px;
}
.k4c-eingabe::placeholder { color: var(--ke-muted); }
.k4c-eingabe:focus-visible {
  outline: 2px solid var(--ke-focus);
  outline-offset: 2px;
}
.k4c-senden {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: var(--ke-cta);
  color: #fff;
  min-width: 44px;
  min-height: 44px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.k4c-senden:hover { background: var(--ke-cta-hover); }
.k4c-senden:disabled { opacity: 0.4; cursor: default; }
.k4c-senden:focus-visible {
  outline: 2px solid var(--ke-focus);
  outline-offset: 2px;
}

.k4c-hinweis {
  flex: 0 0 auto;
  background: var(--ke-surface);
  color: var(--ke-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  padding: 4px 16px 10px;
}
.k4c-hinweis a {
  color: var(--ke-muted);
  text-decoration: underline;
}

@media (max-width: 520px) {
  .k4c-fenster {
    right: 10px;
    left: 10px;
    bottom: 86px;
    width: auto;
    height: min(70vh, calc(100vh - 110px));
  }
}

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