/* Freigestellter KÜNI. All styles are scoped to this companion. */
.kb {
  --kb-edge: clamp(14px, 2vw, 28px);
  --kb-figure-height: 124px;
  position: fixed;
  z-index: 55;
  right: var(--kb-edge);
  bottom: calc(var(--kb-edge) + max(env(safe-area-inset-bottom, 0px), var(--kb-bottom, 0px)));
  width: 88px;
  color: #0C1C22;
  font-family: var(--text, sans-serif);
  pointer-events: none;
}
.kb[hidden], .kb [hidden] { display: none !important; }
/* Offenes Fenster: Seite dahinter leicht abdunkeln, damit es nicht mit den Karten verschwimmt.
   Nur Optik, faengt keine Klicks ab, liegt im Stapel von .kb unter Fenster und Figur. */
.kb::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: rgba(12, 28, 34, .32);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.kb.is-open::before { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.kb__launcher {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  color: inherit;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.kb__stage {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--kb-figure-height) + 9px);
}
.kb__stage::before {
  content: '';
  position: absolute;
  right: 12%;
  bottom: 2px;
  width: 63%;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #031D2A70 10%, #031D2A35 48%, transparent 75%);
  filter: blur(3px);
}
/* One cached image supplies the body, articulated arm and blinking eyes.
   The original artwork stays unchanged. */
.kb__rig {
  position: relative;
  display: block;
  width: calc(var(--kb-figure-height) * .6932409);
  height: var(--kb-figure-height);
  margin-inline: auto;
  filter: drop-shadow(0 5px 6px #00192445);
  transform-origin: 57% 96%;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
  user-select: none;
  pointer-events: none;
}
.kb__rig img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kb__body-layer {
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 56.67%,3.75% 56.67%,14.5% 63.26%,28.25% 62.74%,30.75% 59.27%,29.25% 55.8%,26.25% 53.73%,24.5% 46.45%,18.75% 41.42%,0 41.42%);
}
.kb__arm-layer {
  clip-path: polygon(3.75% 41.42%,18.75% 41.42%,24.5% 46.45%,26.25% 53.73%,29.25% 55.8%,30.75% 59.27%,28.25% 62.74%,14.5% 63.26%,3.75% 56.67%);
  transform-origin: 29.25% 57.2%;
}
.kb__joint-layer { clip-path: ellipse(2.5% 2.2% at 29.5% 57.2%); }
/* Dark glass beneath exact image cutouts lets the luminous eyes close cleanly. */
.kb__eye-backplate {
  position: absolute;
  width: 16%;
  height: 15.6%;
  border-radius: 50%;
  background: linear-gradient(135deg, #020D1F, #021122 70%, #001426);
  mask-image: radial-gradient(ellipse, #000 58%, transparent 98%);
}
.kb__eye-backplate--left { left: 31.25%; top: 25.48%; }
.kb__eye-backplate--right { left: 58%; top: 27.73%; }
.kb__eye-layer--left {
  clip-path: ellipse(8% 7.8% at 39.25% 33.28%);
  transform-origin: 39.25% 33.28%;
}
.kb__eye-layer--right {
  clip-path: ellipse(8% 7.8% at 66% 35.53%);
  transform-origin: 66% 35.53%;
}
.kb__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid #5C8792;
  border-radius: 100px;
  background: #113541;
  color: #F7FAFA;
  font: 600 12px/1.2 var(--text, sans-serif);
  white-space: nowrap;
  box-shadow: 0 4px 12px #001B2933;
}
.kb__label svg { width: 13px; height: 13px; flex: 0 0 auto; }
.kb__launcher:hover .kb__rig { transform: translateY(-1px) rotate(-.7deg); }
.kb__launcher:hover .kb__label { background: #006277; border-color: #62E8E4; }
.kb__launcher:active .kb__rig { transform: translateY(1px) scale(.975); }
.kb :is(button,a):focus-visible { outline: 3px solid #0098AD; outline-offset: 4px; }
.kb__launcher:focus-visible { background: #D6F3F333; }
.kb__panel {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: min(348px, calc(100vw - 2 * var(--kb-edge)));
  max-height: var(--kb-panel-height, calc(100dvh - 250px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #C8D9DC;
  border-radius: 20px;
  background: #F7FAFA;
  box-shadow: 0 20px 55px -12px #001A2A55, 0 4px 14px #001A2A1A;
  transform-origin: calc(100% - 52px) 100%;
  pointer-events: auto;
}
.kb.is-open .kb__panel { animation: kb-panel-open 420ms cubic-bezier(.2,.8,.2,1) both; }
.kb.is-open .kb__rig { animation: kb-greeting 560ms ease-out both; }

.kb__head { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; border-bottom: 1px solid #DCE7E9; }
.kb__avatar { width: 42px; height: 44px; object-fit: contain; }
.kb__identity { flex: 1; min-width: 0; }
.kb__identity h2 { margin: 0 0 2px; font: 700 20px/1.2 var(--display, sans-serif); letter-spacing: -.02em; color: #174451; }
.kb__identity p { margin: 0; font-size: 12px; line-height: 1.4; color: #50656C; }
.kb__close { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 1px solid #CCDCE0; border-radius: 50%; background: #FFFFFF; color: #23434D; cursor: pointer; }
.kb__close:hover { background: #E4EFF0; }
/* Tippfläche mindestens 44 px, auch wenn der Knopf am Handy mit Tastatur
   auf 36 px schrumpft. Die Fläche wächst unsichtbar, das Layout bleibt. */
.kb__close { position: relative; }
.kb__close::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.kb__body { padding: 20px; }
.kb__hello { margin: 0 0 8px; font: 650 20px/1.3 var(--display, sans-serif); letter-spacing: -.03em; }
.kb__copy { margin: 0; color: #3F565F; font-size: 14px; line-height: 1.6; }
.kb__actions { display: grid; gap: 9px; margin-top: 19px; }
.kb__action { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 15px; border: 1px solid #BCD3D8; border-radius: 11px; background: #FFFFFF; color: #174451; text-decoration: none; font: 600 14px/1.4 var(--text, sans-serif); }
.kb__action--primary { border-color: #006277; background: #006277; color: #FFFFFF; }
.kb__action:hover { background: #E9F2F3; }
.kb__action--primary:hover { background: #004E60; }
.kb__action svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* Die Marke auf dem dunklen Etikett und im gefuellten Knopf: dieselbe helle
   Platte wie auf den dunklen Flaechen der Seite (styles.css), die Farbe
   bleibt #006277. Ohne Platte waere sie dort kaum oder gar nicht lesbar. */
.kb__label .ku,
.kb__action--primary .ku { padding: .06em .26em .1em; margin: 0 .02em; border-radius: 3px; background: #DCEEF2; }
.kb.is-nudging .kb__rig { animation: kb-nudge var(--kb-greeting-duration, 900ms) ease-in-out; }
.kb.is-nudging .kb__arm-layer { animation: kb-wave var(--kb-greeting-duration, 900ms) ease-in-out; }
.kb.is-nudging .kb__eye-layer { animation: kb-blink var(--kb-greeting-duration, 900ms) linear; }
.kb.is-nudging .kb__stage::before { animation: kb-shadow var(--kb-greeting-duration, 900ms) ease-in-out; }
.kb.is-paused .kb__eye-layer, .kb.is-paused .kb__rig, .kb.is-paused .kb__arm-layer, .kb.is-paused .kb__stage::before { animation-play-state: paused !important; }
.kb.is-compact { --kb-figure-height: 62px; }
@keyframes kb-panel-open {
  0% { opacity: 0; transform: translateY(14px) scale(.88); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.012); }
  100% { opacity: 1; transform: none; }
}
@keyframes kb-greeting {
  0%,100% { transform: none; }
  22% { transform: translateY(1px) scale(.985); }
  56% { transform: translateY(-2px) rotate(-1deg); }
  80% { transform: rotate(.3deg); }
}
@keyframes kb-nudge {
  0%,100% { transform: none; }
  28% { transform: translateY(-1px) rotate(.8deg); }
  66% { transform: rotate(-.5deg); }
}
@keyframes kb-blink {
  0%,12%,44%,100% { transform: scaleY(1); }
  22%,30% { transform: scaleY(.055); }
}
@keyframes kb-wave {
  0%,100% { transform: none; }
  18% { transform: rotate(14deg); }
  38% { transform: rotate(-9deg); }
  58% { transform: rotate(12deg); }
  78% { transform: rotate(-5deg); }
}
@keyframes kb-shadow { 0%,100% { transform: scale(1); opacity: 1; } 28%,66% { transform: scale(.97); opacity: .92; } }
/* Gespraech im Eckfenster: Kopf oben und Fuss mit Eingabe unten stehen fest,
   dazwischen scrollt alles andere (Begruessung, Verlauf, Vorschlaege). Frueher
   lag die Eingabe im scrollenden Teil. Am Handy mit Tastatur war das Fenster
   dann niedriger als sein fester Inhalt, und beim Antippen des Feldes schob
   der Browser den Kopf hinaus und schnitt die Eingabe unten an.
   overflow: clip statt hidden, damit das Fenster selbst kein Scrollbehaelter
   ist, den der Browser beim Fokussieren verschieben koennte. */
.kb--chat .kb__panel { display: flex; flex-direction: column; overflow: hidden; overflow: clip; }
.kb--chat .kb__head { flex: 0 0 auto; }
.kb--chat .kb__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
}
.kb--chat .kb__body > * { flex-shrink: 0; }
.kb__chat { display: flex; flex-direction: column; gap: 10px; }
.kb__verlauf {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.kb__verlauf:empty { display: none; }
/* minmax(0, 1fr): sonst waechst die Spalte auf die Mindestbreite des
   Eingabefelds, und bei 320 px ragt der Senden-Knopf aus dem Fenster. */
.kb__fuss { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 20px 14px; border-top: 1px solid #DCE7E9; }
.kb__blase {
  max-width: 86%; padding: 9px 12px; border-radius: 13px;
  font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.kb__blase--besucher { align-self: flex-end; background: #E6F0F2; color: #143A45; border-bottom-right-radius: 5px; }
.kb__blase--kueni { align-self: flex-start; background: #F3F7F8; color: #23434D; border: 1px solid #DCE7E9; border-bottom-left-radius: 5px; }
.kb__blase--tippt { color: #6A828B; letter-spacing: 3px; }
.kb__vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; }
.kb__vorschlaege:empty { display: none; }
.kb__vorschlag {
  padding: 7px 11px; border: 1px solid #BCD3D8; border-radius: 999px;
  background: #FFFFFF; color: #174451; cursor: pointer;
  font: 500 13px/1.3 var(--text, sans-serif);
}
.kb__vorschlag:hover { background: #E9F2F3; }
.kb__fehler {
  margin: 0; padding: 9px 11px; border-radius: 10px;
  background: #FDF3E4; color: #6B4A12; font-size: 13px; line-height: 1.5;
}
.kb__eingabe { display: flex; gap: 8px; align-items: center; }
.kb__eingabe input {
  flex: 1; min-width: 0; min-height: 42px; padding: 9px 13px;
  border: 1px solid #CCDCE0; border-radius: 11px; background: #FFFFFF;
  color: #0C1C22; font: 400 14px/1.4 var(--text, sans-serif);
}
.kb__eingabe input:focus-visible { outline: 2px solid #006277; outline-offset: 1px; }
.kb__eingabe button {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto;
  padding: 0; border: 0; border-radius: 11px; background: #006277; color: #FFFFFF; cursor: pointer;
}
.kb__eingabe button:hover { background: #004E60; }
.kb__eingabe input:disabled, .kb__eingabe button:disabled { opacity: .55; cursor: default; }
.kb__eingabe svg { width: 18px; height: 18px; }
/* Mikrofon: hell neben dem gefuellten Senden-Knopf, waehrend der Aufnahme
   gefuellt mit pulsierendem Ring. Farben wie im grossen Chat (kueni.css). */
.kb__eingabe .kb__mikro { position: relative; border: 1px solid #BCD3D8; background: #FFFFFF; color: #174451; }
.kb__eingabe .kb__mikro:hover { background: #E9F2F3; }
.kb__eingabe .kb__mikro svg { width: 20px; height: 20px; }
.kb__eingabe .kb__mikro.is-aktiv { border-color: #006277; background: #006277; color: #FFFFFF; }
.kb__mikro.is-aktiv::after {
  content: ''; position: absolute; inset: -5px;
  border: 1.5px solid #1E9DBA; border-radius: 14px; pointer-events: none;
  animation: kb-mikro 1.4s ease-in-out infinite;
}
@keyframes kb-mikro { 0%,100% { transform: scale(.95); opacity: .55; } 50% { transform: scale(1.08); opacity: 0; } }
.kb__aufnahme { display: flex; align-items: center; gap: 8px; margin: 0; color: #174451; font-size: 12.5px; line-height: 1.3; }
.kb__aufnahme-punkt { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #8F1D1D; animation: kb-punkt 1.2s ease-in-out infinite; }
.kb__aufnahme-zeit { margin-left: auto; color: #50656C; font-variant-numeric: tabular-nums; }
@keyframes kb-punkt { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.kb__chatfuss { margin: 0; color: #50656C; font-size: 12px; line-height: 1.45; }
.kb__chatfuss a { color: #006277; }

/* Auftritt: KÜNI wartet, dann ein Puff Rauch und er steht da. Einmal pro
   Besuch, gesteuert von kueni-begleiter.js. Ohne JS bleibt er sofort
   sichtbar, weil .kb--wartet erst per Skript gesetzt wird. */
.kb--wartet .kb__launcher { opacity: 0; pointer-events: none; }
.kb--auftritt .kb__launcher { animation: kb-auftritt 620ms cubic-bezier(.18,.9,.25,1.06) both; }
.kb__rauch {
  position: absolute; inset: auto 0 0 0; height: var(--kb-figure-height);
  pointer-events: none; opacity: 0;
}
.kb--auftritt .kb__rauch { opacity: 1; }
.kb__puff {
  position: absolute; left: 50%; bottom: 18%;
  width: 46%; aspect-ratio: 1; margin-left: -23%;
  border-radius: 50%; opacity: 0;
  /* Heller Kern, grau-blauer Koerper: so liest sich der Rauch sowohl auf den
     dunklen Abschnitten als auch auf dem fast weissen Hintergrund. */
  background: radial-gradient(circle at 50% 45%,
    rgba(255,255,255,.94) 0%,
    rgba(198,216,224,.80) 34%,
    rgba(132,158,170,.42) 58%,
    rgba(120,146,158,0) 76%);
  filter: blur(5px);
}
.kb--auftritt .kb__puff { animation: kb-puff 820ms ease-out both; }
/* Vier Wölkchen, die in leicht verschiedene Richtungen auseinandertreiben. */
.kb__puff--1 { --x: -78%; --y: -34%; animation-delay: 0ms; }
.kb__puff--2 { --x: 72%; --y: -22%; width: 38%; margin-left: -19%; animation-delay: 60ms; }
.kb__puff--3 { --x: -18%; --y: -86%; width: 52%; margin-left: -26%; animation-delay: 110ms; }
.kb__puff--4 { --x: 34%; --y: 16%; width: 34%; margin-left: -17%; animation-delay: 170ms; }
@keyframes kb-puff {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.22); }
  18% { opacity: .92; }
  100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(1.75); }
}
@keyframes kb-auftritt {
  0% { opacity: 0; transform: translateY(10px) scale(.34); }
  38% { opacity: 1; }
  68% { transform: translateY(-3px) scale(1.07); }
  100% { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .kb { --kb-edge: 12px; --kb-figure-height: 90px; width: 72px; }
  /* Rechtsbuendig: mittig ragte schon "KÜNI öffnen" ueber den Bildrand. */
  .kb__label { align-self: flex-end; min-height: 30px; padding: 7px 9px; font-size: 11px; }
  .kb__panel { border-radius: 17px; transform-origin: calc(100% - 42px) 100%; }
  .kb__head { padding: 14px 15px 12px; }
  .kb__body { padding: 17px; }
  .kb__fuss { padding: 11px 17px 13px; }
  /* Wenig Hoehe, meist wegen der Tastatur: Der Knopf unter dem Fenster
     weicht, das Fenster rueckt bis 12 px ueber die Tastatur (Hoehe setzt
     kueni-begleiter.js), und Kopf, Begruessung und Fuss werden kleiner. */
  .kb.is-compact.is-open:not(.is-short) .kb__launcher { display: none; }
  .kb.is-compact.is-open:not(.is-short) .kb__panel {
    bottom: 0;
    max-height: calc(var(--kb-panel-height, 60dvh) - max(0px, env(safe-area-inset-bottom, 0px) - var(--kb-bottom, 0px)));
  }
  .kb.is-compact .kb__head { gap: 9px; padding: 8px 10px 8px 14px; }
  .kb.is-compact .kb__avatar { width: 30px; height: 32px; }
  .kb.is-compact .kb__identity h2 { font-size: 17px; }
  .kb.is-compact .kb__identity p { font-size: 11.5px; }
  .kb.is-compact .kb__close { width: 36px; height: 36px; }
  .kb.is-compact .kb__body { gap: 8px; padding: 11px 14px; }
  .kb.is-compact .kb__hello { margin-bottom: 0; font-size: 17px; }
  .kb.is-compact .kb__copy { font-size: 13.5px; line-height: 1.5; }
  .kb.is-compact .kb__fuss { gap: 6px; padding: 9px 14px 10px; }
  .kb.is-compact .kb__chatfuss { font-size: 12px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .kb *, .kb *::before { animation: none !important; transition: none !important; }
  .kb__launcher:hover .kb__rig, .kb__launcher:active .kb__rig { transform: none; }
}

/* Let the opened content use scarce height; the launcher remains available. */
.kb.is-compact.is-open:not(.is-short) .kb__stage { display: none; }
.kb.is-short .kb__panel {
  right: calc(100% + 12px);
  bottom: 0;
  width: min(348px, calc(100vw - 110px - 2 * var(--kb-edge) - 12px));
  max-height: var(--kb-side-panel-height);
  transform-origin: 100% 100%;
}
.kb.is-short .kb__head { padding: 9px 12px; }
.kb.is-short .kb__avatar { width: 32px; height: 34px; }
.kb.is-short .kb__body { padding: 10px 14px; }
.kb.is-short .kb__fuss { gap: 6px; padding: 8px 14px 10px; }
.kb.is-short .kb__hello { display: none; }
.kb.is-short .kb__copy { font-size: 13px; line-height: 1.45; }
.kb.is-short .kb__actions { gap: 7px; margin-top: 12px; }
.kb.is-short .kb__action { min-height: 44px; padding: 9px 12px; }