/* KIKI Animation – Frames wechseln, kein Wackeln/Scale */

/* Kiki immer über allem sichtbar, wenn sie da ist (z.B. Chat, Modals, Header) – max z-index global */
#kikiGlobalWrap {
  z-index: 2147483647 !important;
}
/* Sprechblase/Chat knapp darunter, damit KIKI nicht dahinter verschwindet (wie auf der KIKI-Show Bühne) */
#kikiBubbleChat {
  z-index: 2147483646 !important;
}

.kiki-container {
  display: inline-block;
  padding: 20px;
  background: linear-gradient(135deg, #f8f8f8 0%, #eee 100%);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: visible;
}

.kiki-img-wrapper {
  filter: var(--kiki-character-shadow);
  position: relative;
}
/* Alle Bilder heller anzeigen */
.kiki-img-wrapper img {
  filter: brightness(1.15);
}

/* Crossfade: beide Frames übereinander, GPU-Beschleunigung gegen Flackern */
.kiki-img-wrapper.kiki-crossfade {
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.kiki-img-wrapper.kiki-crossfade img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: none;
  will-change: opacity;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

:root {
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-softer: cubic-bezier(0.33, 0, 0.2, 1);
  --ease-breathe: cubic-bezier(0.4, 0, 0.6, 1);
  /* Schatten um Bilder in der Kiki-Animation – hier anpassen (z.B. none zum Entfernen) */
  --kiki-image-shadow: none;
  /* Schatten um den KIKI-Charakter – hier anpassen (z.B. none zum Entfernen) */
  --kiki-character-shadow: none;
}
@keyframes kiki-idle-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Idle, Wave, Happy, Tired, Sleep, Lie_down, Dream, Sad, Curious, Talk, Eyes: statisch, nur Frames */
.kiki-state-idle .kiki-img-wrapper img,
.kiki-state-wave .kiki-img-wrapper img,
.kiki-state-happy .kiki-img-wrapper img,
.kiki-state-tired .kiki-img-wrapper img,
.kiki-state-sleep .kiki-img-wrapper img,
.kiki-state-lie_down .kiki-img-wrapper img,
.kiki-state-dream .kiki-img-wrapper img,
.kiki-state-sad .kiki-img-wrapper img,
.kiki-state-curious .kiki-img-wrapper img,
.kiki-state-talk .kiki-img-wrapper img,
.kiki-state-eyes_open .kiki-img-wrapper img,
.kiki-state-eyes_closed .kiki-img-wrapper img {
  animation: none;
}

/* Walk: hin und her, Spiegelung abrupt beim Richtungswechsel (translate3d für GPU) */
@keyframes kiki-walk-move {
  0% { transform: translate3d(-60px, 0, 0) scaleX(-1); }
  0.01% { transform: translate3d(-60px, 0, 0) scaleX(1); }
  25% { transform: translate3d(0, 0, 0) scaleX(1); }
  50% { transform: translate3d(60px, 0, 0) scaleX(1); }
  50.01% { transform: translate3d(60px, 0, 0) scaleX(-1); }
  75% { transform: translate3d(0, 0, 0) scaleX(-1); }
  100% { transform: translate3d(-60px, 0, 0) scaleX(-1); }
}

.kiki-state-walk .kiki-img-wrapper {
  animation: kiki-walk-move 2.5s var(--ease-soft) infinite;
  transform-origin: center center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Run: schneller, Spiegelung abrupt – translate3d für GPU-Layer */
@keyframes kiki-run-move {
  0% { transform: translate3d(-80px, 0, 0) scaleX(-1); }
  0.01% { transform: translate3d(-80px, 0, 0) scaleX(1); }
  25% { transform: translate3d(0, 0, 0) scaleX(1); }
  50% { transform: translate3d(80px, 0, 0) scaleX(1); }
  50.01% { transform: translate3d(80px, 0, 0) scaleX(-1); }
  75% { transform: translate3d(0, 0, 0) scaleX(-1); }
  100% { transform: translate3d(-80px, 0, 0) scaleX(-1); }
}

.kiki-state-run .kiki-img-wrapper {
  animation: kiki-run-move 1.5s var(--ease-soft) infinite;
  transform-origin: center center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Crawl: langsam, Spiegelung abrupt – translate3d für GPU-Layer */
@keyframes kiki-crawl-move {
  0% { transform: translate3d(-40px, 0, 0) scaleX(-1); }
  0.01% { transform: translate3d(-40px, 0, 0) scaleX(1); }
  25% { transform: translate3d(0, 0, 0) scaleX(1); }
  50% { transform: translate3d(40px, 0, 0) scaleX(1); }
  50.01% { transform: translate3d(40px, 0, 0) scaleX(-1); }
  75% { transform: translate3d(0, 0, 0) scaleX(-1); }
  100% { transform: translate3d(-40px, 0, 0) scaleX(-1); }
}

.kiki-state-crawl .kiki-img-wrapper {
  animation: kiki-crawl-move 3s var(--ease-smooth) infinite;
  transform-origin: center center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Komplex-Stage: KIKI bewegt sich über die ganze Seite (position: fixed) */
.komplex-stage-inner {
  min-height: 0;
}
#komplexContainer {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  transition: left 0.5s var(--ease-softer), top 0.5s var(--ease-softer);
  background: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0;
  contain: layout paint;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#komplexContainer .kiki-img-wrapper {
  pointer-events: auto;
  filter: var(--kiki-character-shadow);
  width: 140px !important;
  height: 180px !important;
  min-width: 140px !important;
  min-height: 180px !important;
  flex-shrink: 0;
}
#komplexContainer .kiki-img-wrapper img {
  width: 140px !important;
  height: 180px !important;
  min-width: 140px !important;
  min-height: 180px !important;
  object-fit: contain;
}
#komplexContainer:not(.kiki-state-walk):not(.kiki-state-run):not(.kiki-state-crawl) {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: none;
}
#komplexContainer.kiki-state-walk,
#komplexContainer.kiki-state-run,
#komplexContainer.kiki-state-crawl {
  animation-timing-function: var(--ease-softer);
  transform-origin: center center;
}
/* Klick-Modus: keine Keyframe-Animation, left/transform per JS */
#komplexContainer.kiki-going-to-point {
  animation: none !important;
}
#komplexContainer.kiki-state-walk:not(.kiki-going-to-point) {
  animation: kiki-walk-full-width 5s var(--ease-softer) infinite;
}
#komplexContainer.kiki-state-run:not(.kiki-going-to-point) {
  animation: kiki-run-full-width 3s var(--ease-softer) infinite;
}
#komplexContainer.kiki-state-crawl:not(.kiki-going-to-point) {
  animation: kiki-crawl-full-width 6s var(--ease-softer) infinite;
}
@keyframes kiki-walk-full-width {
  0% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
  0.01% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(1); }
  25% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(1); }
  50% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(1); }
  50.01% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(-1); }
  75% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
  100% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
}
@keyframes kiki-run-full-width {
  0% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
  0.01% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(1); }
  25% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(1); }
  50% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(1); }
  50.01% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(-1); }
  75% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
  100% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
}
@keyframes kiki-crawl-full-width {
  0% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
  0.01% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(1); }
  25% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(1); }
  50% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(1); }
  50.01% { left: calc(100% - 172px - 80px); transform: translate3d(0, 0, 0) scaleX(-1); }
  75% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
  100% { left: 50%; transform: translate3d(-50%, 0, 0) scaleX(-1); }
}
/* In der Komplex-Stage: keine translateX auf dem Wrapper bei Walk/Run/Crawl */
#komplexContainer.kiki-state-walk .kiki-img-wrapper,
#komplexContainer.kiki-state-run .kiki-img-wrapper,
#komplexContainer.kiki-state-crawl .kiki-img-wrapper {
  animation: none;
}

/* Talk: Frames wechseln per JS (Mund auf/zu), leichte Atem-Animation */
.kiki-state-talk .kiki-img-wrapper img {
  animation: kiki-idle-breathe 2s var(--ease-breathe) infinite;
}

/* Salto: Drehung ohne Umkippen – max 90° hin und zurück */
@keyframes kiki-salto {
  0% { transform: rotateZ(0deg); }
  35% { transform: rotateZ(90deg); }
  65% { transform: rotateZ(90deg); }
  100% { transform: rotateZ(0deg); }
}
.kiki-container.kiki-state-salto,
#komplexContainer.kiki-state-salto {
  perspective: none;
}
.kiki-state-salto .kiki-img-wrapper {
  animation: kiki-salto 1.1s var(--ease-soft) forwards;
  transform-origin: center center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
}
.kiki-state-salto .kiki-img-wrapper img {
  animation: none;
}

/* Jump: Hochspringen und landen */
@keyframes kiki-jump {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -45px, 0); }
  50% { transform: translate3d(0, -60px, 0); }
  75% { transform: translate3d(0, -25px, 0); }
}
.kiki-state-jump .kiki-img-wrapper {
  animation: kiki-jump 0.9s var(--ease-soft) forwards;
  will-change: transform;
  -webkit-backface-visibility: hidden;
}
.kiki-state-jump .kiki-img-wrapper img {
  animation: none;
}

/* Sprechblase – fixe Farben; Größe „möglichst quadratisch“ per JS (kiki-komplex adjustSpeechBubbleSquare) */
.kiki-speechbubble {
  position: relative;
  width: fit-content;
  min-width: 180px;
  max-width: min(90vw, 220px);
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #fafafa !important;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  line-height: 1.4;
  color: #1a1a1a !important;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--ease-softer), transform 0.35s var(--ease-softer);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.kiki-speechbubble.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  cursor: pointer;
}
.kiki-speechbubble.expanded {
  max-width: min(95vw, 280px);
  font-size: 17px;
  padding: 14px 18px 28px 18px;
}
.kiki-speechbubble.expanded::after {
  content: '✕ Schließen';
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 11px;
  color: #888;
  pointer-events: none;
}
.kiki-speechbubble-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.kiki-speechbubble-text-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #1a1a1a !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
}
.kiki-speechbubble-image {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  filter: brightness(1.15);
  box-shadow: var(--kiki-image-shadow);
}
.kiki-speechbubble-text {
  display: block;
  color: #1a1a1a !important;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: center;
}
.kiki-speechbubble-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 18px;
  background: rgba(102, 126, 234, 0.2) !important;
  color: #667eea !important;
  text-decoration: none !important;
  font-size: 14px;
  transition: background 0.2s, transform 0.15s;
  pointer-events: auto;
}
.kiki-speechbubble-link:hover {
  background: rgba(102, 126, 234, 0.35) !important;
  transform: scale(1.1);
}
.kiki-speechbubble.has-link {
  pointer-events: auto;
}
.kiki-speechbubble.has-image {
  min-width: 180px;
  max-width: min(90vw, 220px);
}
@media (max-width: 768px) {
  .kiki-speechbubble {
    min-width: 200px;
    max-width: min(94vw, 320px);
  }
  .kiki-speechbubble.has-image {
    min-width: 200px;
    max-width: min(94vw, 320px);
  }
  .kiki-speechbubble.expanded {
    max-width: min(96vw, 360px);
  }
}
@media (max-width: 480px) {
  .kiki-speechbubble {
    min-width: 200px;
    max-width: min(96vw, 340px);
  }
  .kiki-speechbubble.has-image {
    min-width: 200px;
    max-width: min(96vw, 340px);
  }
  .kiki-speechbubble.expanded {
    max-width: min(98vw, 380px);
  }
}
.kiki-speechbubble-tail {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fafafa;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
}
#komplexContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kiki-chat-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.kiki-chat-hint.visible {
  opacity: 1;
  visibility: visible;
}
.kiki-chat-hint .kiki-chat-hint-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd54f;
  box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.6);
  animation: kiki-chat-hint-pulse 1.5s ease-in-out infinite;
}
@keyframes kiki-chat-hint-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 213, 79, 0);
    transform: scale(1.05);
  }
}
/* Sprechblase und Chat: immer als Body-Kind, nie von Container-Transform (scaleX) betroffen */
/* Fixe Farben: heller Hintergrund, dunkler Text – nie von Seiten-Styles überschrieben */
.kiki-bubble-chat-fixed {
  position: fixed;
  z-index: 2147483647 !important;
  transform: translateX(-50%) scaleX(1);
  transform-origin: 50% 0;
  isolation: isolate;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1a1a1a !important;
  color-scheme: light;
}
.kiki-bubble-chat-fixed .kiki-chat-window.open {
  pointer-events: auto;
}
.kiki-bubble-chat-fixed .kiki-speechbubble {
  pointer-events: none;
}
.kiki-bubble-chat-fixed .kiki-link-btn-wrap.visible {
  pointer-events: auto;
}
/* Wrapper: Spacer (KIKI) + Link-Button rechts daneben */
.kiki-spacer-link-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
}

/* X und darunter Lautsprecher (Vorlesen ein/aus) */
.kiki-close-and-sound-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* X-Button: KIKI 10 Min ausblenden (rechts neben den Links) */
.kiki-hide-10min-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.kiki-hide-10min-btn:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: scale(1.08);
}
html.dark-mode .kiki-hide-10min-btn,
body.dark-mode .kiki-hide-10min-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
html.dark-mode .kiki-hide-10min-btn:hover,
body.dark-mode .kiki-hide-10min-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Lautsprecher: Vorlesen ein/aus (unter dem X) */
.kiki-autoread-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.kiki-autoread-btn:hover {
  background: rgba(0, 0, 0, 0.5);
  transform: scale(1.08);
}
html.dark-mode .kiki-autoread-btn,
body.dark-mode .kiki-autoread-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
html.dark-mode .kiki-autoread-btn:hover,
body.dark-mode .kiki-autoread-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Spacer: Platz für KIKI zwischen Sprechblase (oben) und Chat (unten) */
.kiki-bubble-chat-spacer {
  flex-shrink: 0;
  width: 140px;
  height: 180px;
}

/* Link-Button rechts neben KIKI – dezenter, nur Button-Hintergrund */
.kiki-link-btn-wrap {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 20px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(248, 248, 248, 0.95);
  pointer-events: auto;
}
.kiki-link-btn-wrap.visible {
  display: flex;
}
/* Link-Button Light-Mode – gelb wenn Link angezeigt */
.kiki-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  background: #f0f0f0 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.2s, background 0.2s;
  line-height: 1;
}
.kiki-link-btn-wrap.visible .kiki-link-btn {
  background: #ffd54f !important;
  color: #1a1a1a !important;
}
.kiki-link-btn:hover {
  background: #e0e0e0 !important;
}
.kiki-link-btn-wrap.visible .kiki-link-btn:hover {
  background: #ffca28 !important;
}

/* Link-Button Dark-Modus */
html.dark-mode .kiki-link-btn-wrap,
body.dark-mode .kiki-link-btn-wrap {
  background: rgba(42, 42, 42, 0.95);
}
html.dark-mode .kiki-link-btn,
body.dark-mode .kiki-link-btn {
  background: #2a2a2a !important;
  color: #e8e8e8 !important;
}
html.dark-mode .kiki-link-btn-wrap.visible .kiki-link-btn,
body.dark-mode .kiki-link-btn-wrap.visible .kiki-link-btn {
  background: #d4a84b !important;
  color: #1a1a1a !important;
}
html.dark-mode .kiki-link-btn:hover,
body.dark-mode .kiki-link-btn:hover {
  background: #3a3a3a !important;
}
html.dark-mode .kiki-link-btn-wrap.visible .kiki-link-btn:hover,
body.dark-mode .kiki-link-btn-wrap.visible .kiki-link-btn:hover {
  background: #e8c97a !important;
}

/* Chat-Fenster unter KIKI – fixe Farben wie Sprechblase */
.kiki-chat-window {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  background: #fafafa !important;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  min-width: 180px;
  max-width: 240px;
  color: #1a1a1a !important;
}
.kiki-chat-window.open {
  display: flex;
  pointer-events: auto;
}
.kiki-chat-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.kiki-chat-status {
  font-size: 11px;
  line-height: 1.35;
  color: #333 !important;
  min-height: 1.2em;
  word-break: break-word;
}
.kiki-chat-status.error {
  color: #c62828 !important;
}
.kiki-chat-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  /* Kein Passwort-Manager, kein Einfügen-Balken: explizit als Chat-Feld */
  -webkit-appearance: none;
  appearance: none;
}
.kiki-chat-input::placeholder {
  color: #666 !important;
  opacity: 1;
  -webkit-text-fill-color: #666 !important;
}
.kiki-chat-input:focus {
  border-color: rgba(102, 126, 234, 0.7);
  background: #fff !important;
}
.kiki-chat-input:-webkit-autofill,
.kiki-chat-input:-webkit-autofill:hover,
.kiki-chat-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1a1a1a !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}
/* PWA / Standalone: Kikirika-Farben, eigenes Chat-Eingabefeld */
.kiki-pwa .kiki-chat-input {
  padding: 10px 12px;
  font-size: 16px; /* verhindert iOS-Zoom beim Fokus */
  border-radius: 12px;
  border-color: rgba(0, 51, 102, 0.25);
  background: #fff !important;
}
.kiki-pwa .kiki-chat-input:focus {
  border-color: #003366;
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.3);
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .kiki-chat-input {
    padding: 10px 12px;
    font-size: 16px;
    border-radius: 12px;
    border-color: rgba(0, 51, 102, 0.25);
    background: #fff !important;
  }
  .kiki-chat-input:focus {
    border-color: #003366;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.3);
  }
}
.kiki-chat-send {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #667eea !important;
  color: #fff !important;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
  -webkit-text-fill-color: #fff !important;
}
.kiki-chat-send:hover:not(:disabled) {
  background: rgba(102, 126, 234, 0.9);
}
.kiki-pwa .kiki-chat-send {
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 12px;
  background: #FFCC00 !important;
  color: #003366 !important;
  -webkit-text-fill-color: #003366 !important;
}
.kiki-pwa .kiki-chat-send:hover:not(:disabled) {
  background: rgba(255, 204, 0, 0.9) !important;
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .kiki-chat-send {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 12px;
    background: #FFCC00 !important;
    color: #003366 !important;
    -webkit-text-fill-color: #003366 !important;
  }
  .kiki-chat-send:hover:not(:disabled) {
    background: rgba(255, 204, 0, 0.9) !important;
  }
}
.kiki-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Beispiel-Animationen ===== */
.beispiel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.beispiel-box {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.beispiel-kiki {
  width: 80px;
  height: 100px;
  margin: 0 auto 10px;
  padding: 8px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.beispiel-kiki .kiki-img-wrapper {
  width: 64px;
  height: 84px;
}
.beispiel-kiki .kiki-img-wrapper img {
  max-width: 64px;
  max-height: 84px;
}
.beispiel-info {
  font-size: 12px;
  color: #333;
}
.beispiel-info strong {
  display: block;
  margin-bottom: 2px;
}
.beispiel-info span {
  font-size: 10px;
  color: #666;
}

/* ============================================================================
   Hell- / Dark-Mode: KIKI-UI (html.dark-mode wie auf der Website)
   Dark: Hintergründe überwiegend schwarz / sehr dunkelgrau, gut lesbarer Text
   ============================================================================ */
html.dark-mode .kiki-container,
body.dark-mode .kiki-container {
  background: linear-gradient(145deg, #0a0a0a 0%, #000000 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .kiki-speechbubble,
body.dark-mode .kiki-speechbubble {
  background: #000000 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  color: #e8e8e8 !important;
}
html.dark-mode .kiki-speechbubble-text-wrap,
body.dark-mode .kiki-speechbubble-text-wrap,
html.dark-mode .kiki-speechbubble-text,
body.dark-mode .kiki-speechbubble-text {
  color: #e8e8e8 !important;
}
html.dark-mode .kiki-speechbubble.expanded::after,
body.dark-mode .kiki-speechbubble.expanded::after {
  color: #9ca3af;
}
html.dark-mode .kiki-speechbubble-tail,
body.dark-mode .kiki-speechbubble-tail {
  border-top-color: #000000;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}
html.dark-mode .kiki-speechbubble-link,
body.dark-mode .kiki-speechbubble-link {
  background: rgba(102, 126, 234, 0.35) !important;
  color: #a5b4fc !important;
}
html.dark-mode .kiki-speechbubble-link:hover,
body.dark-mode .kiki-speechbubble-link:hover {
  background: rgba(102, 126, 234, 0.5) !important;
}

html.dark-mode .kiki-bubble-chat-fixed,
body.dark-mode .kiki-bubble-chat-fixed {
  color: #e8e8e8 !important;
  color-scheme: dark;
}

html.dark-mode .kiki-chat-window,
body.dark-mode .kiki-chat-window {
  background: #000000 !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  color: #e8e8e8 !important;
}
html.dark-mode .kiki-chat-status,
body.dark-mode .kiki-chat-status {
  color: #b0b0b0 !important;
}
html.dark-mode .kiki-chat-status.error,
body.dark-mode .kiki-chat-status.error {
  color: #f48fb1 !important;
}
html.dark-mode .kiki-chat-input,
body.dark-mode .kiki-chat-input {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #e8e8e8 !important;
  -webkit-text-fill-color: #e8e8e8 !important;
}
html.dark-mode .kiki-chat-input::placeholder,
body.dark-mode .kiki-chat-input::placeholder {
  color: #888 !important;
  -webkit-text-fill-color: #888 !important;
}
html.dark-mode .kiki-chat-input:focus,
body.dark-mode .kiki-chat-input:focus {
  border-color: rgba(129, 140, 248, 0.7) !important;
  background: #0a0a0a !important;
}
html.dark-mode .kiki-chat-input:-webkit-autofill,
html.dark-mode .kiki-chat-input:-webkit-autofill:hover,
html.dark-mode .kiki-chat-input:-webkit-autofill:focus,
body.dark-mode .kiki-chat-input:-webkit-autofill,
body.dark-mode .kiki-chat-input:-webkit-autofill:hover,
body.dark-mode .kiki-chat-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e8e8e8 !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
}

/* kiki-pwa sitzt auf documentElement (html), nicht auf body */
html.dark-mode.kiki-pwa .kiki-chat-input {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  html.dark-mode .kiki-chat-input,
  body.dark-mode .kiki-chat-input {
    background: #0a0a0a !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #e8e8e8 !important;
    -webkit-text-fill-color: #e8e8e8 !important;
  }
}

html.dark-mode .beispiel-box,
body.dark-mode .beispiel-box {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.12);
}
html.dark-mode .beispiel-kiki,
body.dark-mode .beispiel-kiki {
  background: #000000 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}
html.dark-mode .beispiel-info,
body.dark-mode .beispiel-info {
  color: #c4c4c4;
}
html.dark-mode .beispiel-info span,
body.dark-mode .beispiel-info span {
  color: #888;
}