/* KÜNI unten rechts: das Maskottchen </> aus Giuseppes Vorlage.
   Aufbau und Verhalten vom Eckfenster auf dynamicupscale.com, die Farben von
   dieser Seite (styles.css: Papier, Tinte, Karte, Linie, Akzent). Damit folgt
   das Fenster automatisch dem hellen und dem dunklen Modus. Die Marke KÜNI
   bleibt #006277 (Regel .ku in styles.css). Alle Regeln gelten nur in .kb. */
.kb {
  --kb-edge: clamp(14px, 2vw, 28px);
  --kb-figure-height: 104px;
  position: fixed;
  z-index: 45;                 /* unter der Kopfzeile (50): ein offenes Menü liegt darüber */
  right: var(--kb-edge);
  bottom: calc(var(--kb-edge) + max(env(safe-area-inset-bottom, 0px), var(--kb-bottom, 0px)));
  width: 126px;
  color: var(--text);
  font-family: var(--schrift-text, sans-serif);
  pointer-events: none;
}
.kb[hidden], .kb [hidden] { display: none !important; }
/* Offenes Fenster: die Seite dahinter leicht abdunkeln, sonst verschwimmt das
   Fenster mit den gleichfarbigen Karten (Giuseppes Fund am Handy, 25.09.2026).
   Nur Optik: pointer-events none, ein Tipp daneben schließt wie bisher. Liegt
   im Stapel von .kb, also unter Fenster und Figur, aber über der Seite. */
.kb::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: rgba(24, 50, 74, .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; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kb::before { background: rgba(3, 7, 12, .6); }
}
.kb .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kb__launcher {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  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) + 6px); }
.kb__stage::before {
  content: ''; position: absolute; left: 22%; bottom: 3px; width: 62%; height: 8px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(10, 20, 40, .42) 10%, rgba(10, 20, 40, .18) 50%, transparent 75%);
  filter: blur(3px);
}

/* Figur: drei Bildebenen gleicher Größe. Die Arme liegen hinter dem Körper,
   genau wie im Original, wo sie hinter den Klammern ansetzen. */
.kb__rig {
  position: relative; display: block;
  width: calc(var(--kb-figure-height) * 1.1803); height: var(--kb-figure-height);
  margin-inline: auto;
  transform-origin: 50% 98%;
  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%; }
.kb__arm--links { transform-origin: 31.1% 54.1%; }    /* Schulter unter "<" */
.kb__arm--rechts { transform-origin: 83.1% 60%; }     /* Schulter unter ">" */
/* Augenlider: eine Ellipse über dem gemalten Auge, darin ein Lid, das von
   oben herunterfährt. Gemessen an der Vorlage (360 x 305). */
.kb__lid {
  position: absolute; width: 16.7%; height: 23.6%; border-radius: 50%; overflow: hidden;
  pointer-events: none;
}
.kb__lid--links { left: 38.3%; top: 21%; }
.kb__lid--rechts { left: 65.3%; top: 26.2%; }
/* Geschlossenes Auge wie im Emote "Zwinkern" der Vorlage: heller Augapfel mit
   einem dunklen, lächelnden Bogen. */
.kb__lid > span {
  position: absolute; inset: 0; transform: translateY(-102%);
  background: radial-gradient(ellipse at 50% 70%, #f4f6fc 45%, #cdd4ea 100%);
}
.kb__lid > span::after {
  content: ''; position: absolute; left: 16%; right: 16%; top: 34%; height: 28%;
  border-bottom: 3px solid #0b0d18; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
@media (max-width: 600px) { .kb__lid > span::after { border-bottom-width: 2px; } }

.kb__label {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 8px 14px;
  border: 1.5px solid var(--tinte); border-radius: 999px;
  background: var(--tinte); color: var(--papier);
  font: 600 13px/1.2 var(--schrift-text, sans-serif); white-space: nowrap;
  box-shadow: var(--schatten);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.kb__label svg { width: 14px; height: 14px; flex: 0 0 auto; }
.kb__launcher:hover .kb__rig { transform: translateY(-2px) rotate(-1.5deg); }
.kb__launcher:hover .kb__label { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); transform: translateY(-1px); }
.kb__launcher:active .kb__rig { transform: translateY(1px) scale(.975); }
.kb :is(button, a, input):focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.kb__launcher:focus-visible { outline: none; }
.kb__launcher:focus-visible .kb__label { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* ---------- Fenster ---------- */
.kb__panel {
  position: absolute; bottom: calc(100% + 12px); right: 0;
  width: min(360px, calc(100vw - 2 * var(--kb-edge)));
  max-height: var(--kb-panel-height, calc(100dvh - 250px));
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--linie); border-radius: 18px; background: var(--karte); color: var(--text);
  box-shadow: 0 24px 60px -18px rgba(10, 20, 30, .45), var(--schatten);
  transform-origin: calc(100% - 60px) 100%;
  pointer-events: auto; text-align: left;
}
.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.is-open .kb__arm--links { animation: kb-wink-arm 900ms ease-in-out both; }

.kb__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 18px; border-bottom: 1px solid var(--linie); }
.kb__avatar {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 12px; background: radial-gradient(circle at 50% 40%, #1b2d52, #0a1224 72%);
}
.kb__avatar img { width: 40px; height: auto; }
.kb__identity { flex: 1; min-width: 0; }
.kb__identity h2 { margin: 0 0 2px; font: 700 20px/1.2 var(--schrift-titel, sans-serif); letter-spacing: -.01em; color: var(--tinte); }
.kb__identity p { margin: 0; font: 500 12px/1.4 var(--schrift-mono); letter-spacing: .02em; color: var(--text-leise); }
.kb__close {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--linie); border-radius: 50%; background: transparent; color: var(--tinte); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.kb__close:hover { border-color: var(--akzent); color: var(--akzent); }
.kb__body { padding: 18px 18px 16px; }
.kb__hello { margin: 0 0 6px; font: 700 20px/1.3 var(--schrift-titel, sans-serif); letter-spacing: -.01em; color: var(--tinte); }
.kb__copy { margin: 0; color: var(--text-leise); font-size: 14.5px; line-height: 1.6; }
.kb__action {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border: 1.5px solid var(--tinte); border-radius: 999px; background: transparent; color: var(--tinte);
  text-decoration: none; font: 600 14px/1.3 var(--schrift-text, sans-serif);
  transition: background .2s, border-color .2s, color .2s;
}
.kb__action--primary { background: var(--tinte); color: var(--papier); }
.kb__action:hover { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }

/* Aufmerksamkeit alle acht Sekunden: winken, zwinkern, kleiner Hüpfer.
   Lange Dauer, damit die Bewegungen nacheinander statt gleichzeitig laufen. */
.kb.is-nudging .kb__rig { animation: kb-nudge var(--kb-greeting-duration, 1600ms) ease-in-out; }
.kb.is-nudging .kb__arm--links { animation: kb-wave var(--kb-greeting-duration, 1600ms) ease-in-out; }
.kb.is-nudging .kb__arm--rechts { animation: kb-tipp var(--kb-greeting-duration, 1600ms) ease-in-out; }
.kb.is-nudging .kb__lid--rechts > span { animation: kb-wink var(--kb-greeting-duration, 1600ms) ease-in-out; }
.kb.is-nudging .kb__stage::before { animation: kb-shadow var(--kb-greeting-duration, 1600ms) ease-in-out; }
.kb.is-paused :is(.kb__rig, .kb__arm, .kb__lid > span), .kb.is-paused .kb__stage::before { animation-play-state: paused !important; }
.kb.is-compact { --kb-figure-height: 60px; }
@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(-4px) rotate(-1.5deg); }
  80% { transform: rotate(.5deg); }
}
@keyframes kb-nudge {
  0%,100% { transform: none; }
  12% { transform: translateY(1px) scaleY(.985); }
  24% { transform: translateY(-4px); }
  36% { transform: none; }
}
@keyframes kb-wave {
  0%,100% { transform: none; }
  10% { transform: rotate(16deg); }
  22% { transform: rotate(-8deg); }
  34% { transform: rotate(14deg); }
  46% { transform: rotate(-5deg); }
  58% { transform: rotate(8deg); }
  70% { transform: none; }
}
@keyframes kb-wink-arm {
  0%,100% { transform: none; }
  25% { transform: rotate(14deg); }
  50% { transform: rotate(-6deg); }
  75% { transform: rotate(8deg); }
}
@keyframes kb-tipp {
  0%,52%,100% { transform: none; }
  60% { transform: rotate(-9deg); }
  68% { transform: rotate(3deg); }
  76% { transform: rotate(-6deg); }
  86% { transform: none; }
}
@keyframes kb-wink {
  0%,50%,78%,100% { transform: translateY(-102%); }
  58%,68% { transform: translateY(0); }
}
@keyframes kb-shadow { 0%,40%,100% { transform: scale(1); opacity: 1; } 24% { transform: scale(.9); opacity: .8; } }

/* Gespräch: Kopf oben und Fuß mit Eingabe unten stehen fest, nur die Mitte
   scrollt. Sonst schiebt der Browser am Handy beim Antippen den Kopf hinaus
   und schneidet die Eingabe an (Fund auf dynamicupscale.com, 23.09.2026). */
.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; }
.kb__fuss { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--linie); }
.kb__blase { max-width: 86%; margin: 0; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.kb__blase::before { content: none !important; }
.kb__blase--besucher { align-self: flex-end; background: var(--tinte); color: var(--papier); border-bottom-right-radius: 5px; }
.kb__blase--kueni { align-self: flex-start; background: var(--papier); color: var(--text); border: 1px solid var(--linie); border-bottom-left-radius: 5px; }
.kb__blase--tippt { color: var(--text-leise); letter-spacing: 3px; }
.kb__vorschlaege { display: flex; flex-wrap: wrap; gap: 7px; }
.kb__vorschlaege:empty { display: none; }
.kb__vorschlag {
  padding: 7px 12px; border: 1px solid var(--linie); border-radius: 999px;
  background: transparent; color: var(--tinte); cursor: pointer; text-align: left;
  font: 500 13px/1.35 var(--schrift-text, sans-serif);
  transition: border-color .2s, color .2s, transform .2s;
}
.kb__vorschlag:hover { border-color: var(--akzent); color: var(--akzent); transform: translateY(-1px); }
.kb__fehler {
  margin: 0; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--akzent) 12%, var(--karte)); color: var(--text);
  border-left: 3px solid var(--akzent); font-size: 13.5px; line-height: 1.5;
}
.kb__eingabe { display: flex; gap: 8px; align-items: center; margin: 0; }
.kb__eingabe input {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--papier);
  color: var(--text); font: 400 14px/1.4 var(--schrift-text, sans-serif);
}
.kb__eingabe input::placeholder { color: var(--text-leise); }
.kb__eingabe input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.kb__eingabe button {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
  border: 0; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); cursor: pointer;
  transition: transform .2s, filter .2s;
}
.kb__eingabe button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.kb__eingabe input:disabled, .kb__eingabe button:disabled { opacity: .55; cursor: default; }
.kb__eingabe svg { width: 18px; height: 18px; }
.kb__eingabe .kb__mikro { position: relative; border: 1px solid var(--linie); background: transparent; color: var(--tinte); }
.kb__eingabe .kb__mikro:hover { filter: none; border-color: var(--akzent); color: var(--akzent); }
.kb__eingabe .kb__mikro svg { width: 20px; height: 20px; }
.kb__eingabe .kb__mikro.is-aktiv { border-color: var(--akzent); background: var(--akzent); color: var(--auf-akzent); }
.kb__mikro.is-aktiv::after { content: ''; position: absolute; inset: -5px; border: 1.5px solid var(--akzent); border-radius: 50%; 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: var(--tinte); font-size: 12.5px; line-height: 1.3; }
.kb__aufnahme-punkt { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #c0392b; animation: kb-punkt 1.2s ease-in-out infinite; }
.kb__aufnahme-zeit { margin-left: auto; color: var(--text-leise); font-variant-numeric: tabular-nums; }
@keyframes kb-punkt { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.kb__chatfuss { margin: 0; color: var(--text-leise); font-size: 11.5px; line-height: 1.45; }
.kb__chatfuss a { color: var(--akzent); }

/* Auftritt: KÜNI wartet sechs Sekunden, dann ein Puff Rauch und er steht da.
   Ohne JS bleibt er sofort sichtbar, weil .kb--wartet erst per Skript kommt. */
.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: 40%; aspect-ratio: 1; margin-left: -20%;
  border-radius: 50%; opacity: 0;
  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; }
.kb__puff--1 { --x: -78%; --y: -34%; animation-delay: 0ms; }
.kb__puff--2 { --x: 72%; --y: -22%; width: 32%; margin-left: -16%; animation-delay: 60ms; }
.kb__puff--3 { --x: -18%; --y: -86%; width: 46%; margin-left: -23%; animation-delay: 110ms; }
.kb__puff--4 { --x: 34%; --y: 16%; width: 30%; margin-left: -15%; 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: 78px; width: 100px; }
  .kb__launcher { align-items: flex-end; }
  .kb__label { min-height: 32px; padding: 7px 11px; font-size: 12px; }
  .kb__panel { border-radius: 16px; transform-origin: calc(100% - 46px) 100%; }
  .kb__head { padding: 12px 12px 11px 14px; }
  .kb__body { padding: 15px; }
  .kb__fuss { padding: 11px 15px 13px; }
  .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 12px; }
  .kb.is-compact .kb__avatar { width: 36px; height: 36px; }
  .kb.is-compact .kb__avatar img { width: 31px; }
  .kb.is-compact .kb__identity h2 { font-size: 17px; }
  .kb.is-compact .kb__identity p { font-size: 11px; }
  .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: 11px; 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; }
}
.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(360px, calc(100vw - 140px - 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: 36px; height: 36px; }
.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; }