/* SANIERUNG 13.10.2026 - Zuhause "Lebendiger Raum" (siehe zuhause.html) */

:root {
  --grund: #0b0614;
  --glas: rgba(20, 10, 34, 0.62);
  --glas-hell: rgba(40, 22, 64, 0.55);
  --rand: rgba(214, 178, 255, 0.16);
  --text: #f1e9ff;
  --text-leise: #b9a7d6;
  --akzent: #b57bff;
  --akzent-glanz: rgba(181, 123, 255, 0.45);
  --hunger: #f2a65e;
  --durst: #63bdf2;
  --sauberkeit: #8fe6d4;
  --energie: #b9a2ff;
  --resonanz: #ea72e4;
  --gold: #f0c66e;
  --schrift: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --titel: "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
}
body.figur-ace { --akzent: #f2c66d; --akzent-glanz: rgba(242, 198, 109, 0.4); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--grund);
  color: var(--text);
  font: 15px/1.45 var(--schrift);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
button { font: inherit; color: inherit; }

/* ---------- Grundgeruest ---------- */
#layout { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr; }
.panel { display: none; }

#buehne {
  position: relative;
  overflow: hidden;
  height: 100%;
  touch-action: manipulation;
  user-select: none;
}

#welt {
  position: absolute;
  left: 0; top: 0;
  width: 900px; height: 2388px;
  transform-origin: 0 0;
  will-change: transform;
}
#raum { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Dinge im Raum ---------- */
.hotspot {
  position: absolute;
  z-index: 5;
  background: transparent;
  border: 0;
  border-radius: 28px;
  cursor: pointer;
  transition: box-shadow 0.25s, background 0.25s;
}
.hotspot.rund { border-radius: 50%; }
.hotspot:hover, .hotspot:focus-visible {
  background: radial-gradient(closest-side, rgba(214, 178, 255, 0.10), transparent);
  box-shadow: 0 0 0 3px rgba(214, 178, 255, 0.22), 0 0 60px 10px var(--akzent-glanz);
  outline: none;
}
.hotspot[data-objekt="kristall"] { animation: kristall-puls 4.5s ease-in-out infinite; }
@keyframes kristall-puls {
  0%, 100% { box-shadow: 0 0 30px 4px rgba(190, 120, 255, 0.0); }
  50% { box-shadow: 0 0 60px 14px rgba(190, 120, 255, 0.35); }
}

.ding {
  position: absolute;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 2170;
  filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.2s, filter 0.2s;
}
.ding img { display: block; width: 100%; height: auto; pointer-events: none; }
.ding:hover { transform: translateY(-6px); filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px var(--akzent-glanz)); }
#schwamm { cursor: grab; touch-action: none; }
#schwamm.zieht { cursor: grabbing; z-index: 3000; transition: none; transform: scale(1.08) rotate(-8deg); }
#schwamm.zurueck { transition: left 0.45s cubic-bezier(.3,1.4,.5,1), top 0.45s cubic-bezier(.3,1.4,.5,1); }

/* ---------- Nexling ---------- */
#nexling {
  position: absolute;
  left: 0; top: 0;
  height: 560px;
  width: 340px;
  margin-left: -170px;
  transform-origin: 50% 100%;
  cursor: pointer;
  transition-property: transform;
  transition-timing-function: linear;
}
#nexling::after { /* Schatten am Boden */
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: -14px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  z-index: -1;
}
#nexling .koerper {
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: flex-end;
  transform-origin: 50% 100%;
  animation: atmen 3.8s ease-in-out infinite;
}
#nexling .figur-box { position: relative; height: 100%; }
#nexling img { display: block; height: 100%; width: auto; pointer-events: none; filter: drop-shadow(0 0 22px rgba(150, 90, 255, 0.25)); }
/* 14.10.: #nexling img setzt display:block und hebelte damit [hidden] aus - leere
   Fluegel-Bilder erschienen bei Kumi als gestrichelte Rahmen. */
#nexling img[hidden] { display: none !important; }
body.figur-ace #nexling img { filter: drop-shadow(0 0 22px rgba(255, 210, 120, 0.25)); }
#nexling.gespiegelt img { transform: scaleX(-1); }

@keyframes atmen {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.012, 1.024); }
}
#nexling.laeuft .koerper { animation: schritt 0.44s ease-in-out infinite; }
@keyframes schritt {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-2.5%) rotate(-1.5deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-2.5%) rotate(1.5deg); }
}
#nexling.huepft .koerper { animation: huepfer 0.6s cubic-bezier(.3,.7,.4,1); }
@keyframes huepfer {
  0% { transform: translateY(0) scale(1.04, 0.94); }
  40% { transform: translateY(-9%) scale(0.97, 1.04); }
  75% { transform: translateY(0) scale(1.03, 0.96); }
  100% { transform: translateY(0) scale(1, 1); }
}
#nexling.frisst .koerper { animation: fressen 0.5s ease-in-out infinite; }
@keyframes fressen {
  0%, 100% { transform: rotate(0) translateY(0); }
  50% { transform: rotate(2deg) translateY(2.5%) scale(1.01, 0.97); }
}
#nexling.schuettelt .koerper { animation: schuetteln 0.16s linear 6; }
@keyframes schuetteln {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
#nexling.schlaeft .koerper { animation: atmen 6s ease-in-out infinite; }

/* Schlaf: Raum wird dunkel, der Nexling bleibt leicht sichtbar */
#dunkel {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 45% 22% at 64% 66%, rgba(20, 6, 40, 0.15), rgba(5, 0, 14, 0.72));
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease;
  z-index: 1500;
}
body.nacht #dunkel { opacity: 1; }
body.nacht .ding { filter: brightness(0.4) drop-shadow(0 14px 10px rgba(0,0,0,.55)); }

#kissen-vorne {
  position: absolute;
  left: 310px; top: 1560px; width: 480px; height: 220px;
  background: url("/zuhause/raeume/wohnzimmer.jpg") -310px -1560px / 900px 2388px no-repeat;
  clip-path: ellipse(242px 152px at 240px 200px);
  z-index: 1800;
  pointer-events: none;
  display: none;
}
#kissen-vorne::after { /* gleiche Abdunklung wie #dunkel, nur auf diesen Ausschnitt verschoben */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(405px 525px at 576px 1576px, rgba(20, 6, 40, 0.15), rgba(5, 0, 14, 0.72)) -310px -1560px / 900px 2388px no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
}
body.im-kissen #kissen-vorne { display: block; }
body.nacht #kissen-vorne::after { opacity: 1; }

/* Effekte (Herzen, Zzz, Blasen, Funkeln) - in Weltkoordinaten */
.effekt { position: absolute; pointer-events: none; z-index: 2900; }
.effekt.herz { width: 44px; height: 44px; color: #ff8ad8; animation: aufsteigen 1.6s ease-out forwards; filter: drop-shadow(0 0 10px rgba(255, 120, 220, 0.7)); }
.effekt.zzz { font: italic 600 54px var(--titel); color: #d8c8ff; animation: aufsteigen 3.2s ease-out forwards; text-shadow: 0 0 16px rgba(170, 140, 255, 0.8); }
.effekt.blase { width: 90px; animation: blase-rein 0.35s ease-out; }
.effekt.blase.platzt { animation: platzen 0.5s ease-in forwards; }
.effekt.funkeln { width: 30px; height: 30px; color: #fff4c8; animation: funkeln 1.1s ease-out forwards; }
@keyframes aufsteigen {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx, 20px), -220px) scale(1.1); opacity: 0; }
}
@keyframes blase-rein { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes platzen { to { transform: scale(1.5); opacity: 0; } }
@keyframes funkeln {
  0% { transform: scale(0) rotate(0); opacity: 1; }
  60% { transform: scale(1.3) rotate(90deg); opacity: 1; }
  100% { transform: scale(0.4) rotate(140deg); opacity: 0; }
}

/* ---------- HUD (Handy) ---------- */
#hud {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 10px; right: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 8px;
  padding: 10px 12px 11px;
  background: var(--glas);
  border: 1px solid var(--rand);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  z-index: 20;
}
#hud .zurueck.klein { grid-row: 1; align-self: center; }
/* 25.10.2026 (Handy: "die Genesis-Kugel kann ich nicht anklicken, die Balken liegen drueber"):
   Das HUD faengt keine Klicks mehr ab - nur seine Knoepfe. Dazu ein eigener Genesis-Knopf. */
#hud { pointer-events: none; grid-template-columns: auto 1fr auto; }
#hud a, #hud button { pointer-events: auto; }
#hud .beduerfnisse { pointer-events: none; }
#hud .hud-genesis { grid-row: 1; grid-column: 3; align-self: center; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, rgba(150, 90, 255, 0.85), rgba(80, 160, 255, 0.85)); border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 14px rgba(150, 90, 255, 0.55); cursor: pointer; white-space: nowrap; }
#hud .hud-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#hud .nexling-name { font: 600 19px var(--titel); letter-spacing: 0.04em; }
#hud .stimmung { color: var(--text-leise); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .beduerfnisse { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-leise); text-decoration: none; font-size: 14px;
}
.zurueck:hover { color: var(--text); }
.zurueck.klein { width: 30px; height: 30px; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.zurueck.klein svg { width: 18px; height: 18px; }

.bedarf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bedarf-kopf { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-leise); }
.bedarf-kopf svg { width: 15px; height: 15px; color: var(--farbe); }
.bedarf-kopf b { margin-left: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.bedarf .name { display: none; }
.balken { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.balken i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--farbe) 70%, #000), var(--farbe));
  box-shadow: 0 0 10px var(--farbe);
  transition: width 0.8s cubic-bezier(.2,.8,.2,1);
}
.bedarf.niedrig .balken i { animation: warnen 1.4s ease-in-out infinite; }
@keyframes warnen { 50% { opacity: 0.45; } }

/* ---------- Sprechblase + Hinweis ---------- */
#sprechblase {
  position: absolute;
  z-index: 30;
  width: max-content;
  max-width: min(380px, 84vw);
  padding: 11px 15px;
  background: rgba(24, 12, 40, 0.86);
  border: 1px solid var(--rand);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px var(--akzent-glanz);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate(-50%, -100%);
  animation: blase-auf 0.22s ease-out;
  cursor: pointer;
}
#sprechblase::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  width: 14px; height: 14px; margin-left: -7px;
  background: inherit; border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  transform: rotate(45deg);
}
/* Lange Antworten: Blase scrollt langsam von selbst durch (zuhause.js),
   anhalten mit Maus drauf / Finger drauf, selbst scrollen geht auch. */
#sprechblase p {
  margin: 0;
  max-height: min(11em, 32vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--akzent) transparent;
}
#sprechblase.lang p {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.9em, #000 calc(100% - 1.2em), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.9em, #000 calc(100% - 1.2em), transparent 100%);
  padding: 0.5em 0;
}
#sprechblase.lang.am-anfang p {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.2em), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.2em), transparent 100%);
}
#sprechblase.lang.am-ende p {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.9em);
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.9em);
}
#sprechblase.denkt p::after { content: "…"; display: inline-block; animation: punkte 1.2s steps(4) infinite; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes punkte { from { width: 0; } to { width: 1.2em; } }
@keyframes blase-auf { from { opacity: 0; transform: translate(-50%, -92%) scale(0.92); } }

#titel-hinweis {
  position: absolute; z-index: 25;
  padding: 5px 11px;
  font-size: 13px;
  background: rgba(14, 7, 24, 0.82);
  border: 1px solid var(--rand);
  border-radius: 999px;
  transform: translate(-50%, -130%);
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Chat-Leiste ---------- */
#chat-leiste {
  position: absolute;
  left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  padding: 6px;
  background: var(--glas);
  border: 1px solid var(--rand);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 20;
}
#chat-eingabe {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit;
}
#chat-eingabe::placeholder { color: var(--text-leise); }
#chat-leiste button {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--akzent); color: #160a26;
  cursor: pointer;
  box-shadow: 0 0 18px var(--akzent-glanz);
}
#chat-leiste button:disabled { opacity: 0.5; cursor: default; }
#chat-leiste button svg { width: 19px; height: 19px; }

/* ---------- Truhe (Blatt) ---------- */
#blatt {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4, 0, 10, 0.45);
  animation: einblenden 0.2s ease-out;
}
#blatt[hidden] { display: none; }
@keyframes einblenden { from { opacity: 0; } }
.blatt-karte {
  width: min(560px, 100%);
  max-height: 72vh;
  display: flex; flex-direction: column;
  background: rgba(22, 11, 38, 0.94);
  border: 1px solid var(--rand);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  padding-bottom: env(safe-area-inset-bottom);
  animation: hochfahren 0.28s cubic-bezier(.2,.9,.3,1);
}
@keyframes hochfahren { from { transform: translateY(40%); opacity: 0; } }
.blatt-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--rand); }
.reiter { display: flex; gap: 4px; padding: 3px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; }
.reiter-knopf { border: 0; background: none; padding: 7px 16px; border-radius: 999px; color: var(--text-leise); cursor: pointer; }
.reiter-knopf.aktiv { background: var(--akzent); color: #160a26; font-weight: 600; }
.blatt-kopf .gold-zeile { margin-left: auto; }
.blatt-zu { border: 0; background: rgba(255, 255, 255, 0.06); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.blatt-inhalt { overflow-y: auto; padding: 8px 10px 14px; }
.leer-text { color: var(--text-leise); text-align: center; padding: 26px 10px; }
.ware { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 14px; }
.ware:hover { background: rgba(255, 255, 255, 0.04); }
.ware img { width: 52px; height: 52px; object-fit: contain; }
.ware h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ware p { margin: 1px 0 0; font-size: 12.5px; color: var(--text-leise); }
.ware .wirkung-hunger { color: var(--hunger); }
.ware .wirkung-durst { color: var(--durst); }
.ware button {
  border: 1px solid var(--akzent); background: transparent; color: var(--text);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.ware button:hover:not(:disabled) { background: var(--akzent); color: #160a26; }
.ware button:disabled { opacity: 0.4; cursor: default; }

.gold-zeile { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; }
.gold-zeile svg { width: 18px; height: 18px; color: var(--gold); }

/* ---------- PC: Raum in der Mitte, Seitenleisten ---------- */
@media (min-width: 960px) and (min-aspect-ratio: 1/1) {
  body::before {
    content: ""; position: fixed; inset: -40px;
    background: url("/zuhause/raeume/wohnzimmer.jpg") center 70% / cover;
    filter: blur(38px) brightness(0.35) saturate(1.2);
  }
  #layout { grid-template-columns: 1fr auto 1fr; }
  #buehne {
    aspect-ratio: 900 / 1500;
    height: 100vh;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.7);
  }
  #hud { display: none; }
  .panel {
    display: flex; flex-direction: column;
    position: relative;
    padding: 28px 26px;
    min-width: 0;
    overflow: hidden;
  }
  #seite-links { align-items: flex-end; text-align: right; }
  #seite-links > * { width: min(280px, 100%); }
  #seite-links .zurueck { justify-content: flex-end; margin-bottom: 34px; }
  .steckbrief .nexling-name { margin: 0; font: 600 34px/1.1 var(--titel); letter-spacing: 0.05em; color: var(--text); text-shadow: 0 0 26px var(--akzent-glanz); }
  .steckbrief .stimmung { margin: 6px 0 26px; color: var(--text-leise); }
  .beduerfnisse.gross { display: flex; flex-direction: column; gap: 16px; text-align: left; }
  .beduerfnisse.gross .bedarf-kopf { font-size: 14px; }
  .beduerfnisse.gross .bedarf .name { display: inline; color: var(--text); }
  .beduerfnisse.gross .balken { height: 7px; }
  #seite-links .gold-zeile { justify-content: flex-end; margin-top: 26px; }
  .tipp { margin-top: auto; font-size: 13px; color: var(--text-leise); opacity: 0.8; }

  #seite-rechts > * { width: min(340px, 100%); }
  #seite-rechts h2 { margin: 0 0 14px; font: 600 15px var(--schrift); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-leise); }
  #verlauf { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; }
  #verlauf li { padding: 9px 13px; border-radius: 16px; max-width: 92%; background: var(--glas-hell); border: 1px solid var(--rand); }
  #verlauf li.ich { align-self: flex-end; background: color-mix(in srgb, var(--akzent) 26%, transparent); }
  #verlauf li.leer { color: var(--text-leise); background: none; border: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}


/* ---------- Kleine Animationen (14.10.2026): Ohren, Mund, Aura ---------- */
#nexling #nexling-bild { position: relative; z-index: 1; }
#nexling .ohr, #nexling .schweif, #nexling .pfote-a, #nexling .pfote-b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#nexling .ohr, #nexling .pfote-a, #nexling .pfote-b { z-index: 2; filter: none; }
#nexling .schweif { z-index: 0; }
#nexling .mund { z-index: 3; }
#nexling:not(.teile-an) .schweif, #nexling:not(.teile-an) .pfote-a, #nexling:not(.teile-an) .pfote-b { display: none; }

/* Schweif: ruhig pendeln, beim Laufen/Reden schneller wedeln, im Schlaf still */
#nexling .schweif { animation: schweif-ruhe 2.8s ease-in-out infinite; }
#nexling.laeuft .schweif { animation: schweif-wedeln 0.44s ease-in-out infinite; }
#nexling.spricht .schweif { animation: schweif-wedeln 0.62s ease-in-out infinite; }
#nexling.frisst .schweif { animation: schweif-wedeln 0.9s ease-in-out infinite; }
#nexling.schlaeft .schweif { animation: none; }
#nexling:not([data-blick="vorn"]) .schweif { --winkel: 0.6; }
@keyframes schweif-ruhe { 0%, 100% { transform: rotate(calc(-3deg * var(--winkel, 1))); } 50% { transform: rotate(calc(4deg * var(--winkel, 1))); } }
@keyframes schweif-wedeln { 0%, 100% { transform: rotate(calc(-5deg * var(--winkel, 1))); } 50% { transform: rotate(calc(6deg * var(--winkel, 1))); } }

/* Pfoten: beim Laufen abwechselnd anheben (seitlich mit Abrollen der Zehen) */
#nexling.laeuft .pfote-a { animation: pfote-gerade 0.44s ease-in-out infinite; }
#nexling.laeuft .pfote-b { animation: pfote-gerade 0.44s ease-in-out -0.22s infinite; }
#nexling.laeuft[data-blick="links"] .pfote-a, #nexling.laeuft[data-blick="links"] .pfote-b { animation-name: pfote-links; }
#nexling.laeuft[data-blick="rechts"] .pfote-a, #nexling.laeuft[data-blick="rechts"] .pfote-b { animation-name: pfote-rechts; }
@keyframes pfote-gerade {
  0%, 55%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(-2.3%) scale(0.97, 0.95); }
  40% { transform: translateY(-0.6%) scale(1.02, 1); }
}
@keyframes pfote-links {
  0%, 55%, 100% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-1.6%) rotate(10deg); }
  38% { transform: translateY(-0.8%) rotate(-4deg); }
}
@keyframes pfote-rechts {
  0%, 55%, 100% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-1.6%) rotate(-10deg); }
  38% { transform: translateY(-0.8%) rotate(4deg); }
}
/* Im Stehen ab und zu mit einer Pfote tippen */
#nexling .tippt { animation: pfote-tippen 0.7s ease-in-out; }
@keyframes pfote-tippen { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-1.2%) rotate(-3deg); } 60% { transform: translateY(0); } 75% { transform: translateY(-0.5%); } }
/* Trinken: Kopf leicht vor und zurueck, schneller als beim Fressen */
#nexling.schlabbert .koerper { animation: fressen 0.32s ease-in-out infinite; }
#nexling:not(.ohren-an) .ohr { display: none; }
#nexling .ohr-l.zuckt { animation: ohr-zuck-l 0.6s ease-out; }
#nexling .ohr-r.zuckt { animation: ohr-zuck-r 0.6s ease-out; }
#nexling .ohr-l.wippt { animation: ohr-wipp-l 1s ease-in-out; }
#nexling .ohr-r.wippt { animation: ohr-wipp-r 1s ease-in-out; }
@keyframes ohr-zuck-l { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-9deg); } 42% { transform: rotate(4deg); } 68% { transform: rotate(-2deg); } }
@keyframes ohr-zuck-r { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(9deg); } 42% { transform: rotate(-4deg); } 68% { transform: rotate(2deg); } }
@keyframes ohr-wipp-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes ohr-wipp-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }

/* Mund: Hoehe folgt --auf (0..1), gesetzt Buchstabe fuer Buchstabe */
#nexling .mund {
  --auf: 0;
  position: absolute;
  display: none;
  width: 7%;
  height: calc(var(--auf) * 1.9%);
  transform: translateX(-50%);
  border-radius: 35% 35% 50% 50% / 25% 25% 75% 75%;
  background: radial-gradient(ellipse 60% 55% at 50% 92%, #b8486f 0 45%, transparent 70%), #16060f;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7);
  transition: height 70ms ease-out;
}
body.figur-kumi #nexling .mund { background: radial-gradient(ellipse 60% 55% at 50% 92%, #a5457a 0 45%, transparent 70%), #12061a; }
#nexling.ohren-an.blick-vorn .mund { display: block; }
#nexling.schlaeft .mund { display: none; }

/* Aura hinter der Figur - nur fuer Kumi und ACE */
#nexling .aura { position: absolute; left: -32%; right: -32%; top: 2%; bottom: -5%; pointer-events: none; display: none; }
#nexling .aura i { position: absolute; display: block; }
#nexling .aura-boden { position: absolute; left: -22%; right: -22%; bottom: -26px; height: 70px; pointer-events: none; display: none; border-radius: 50%; }
body.figur-kumi #nexling .aura, body.figur-ace #nexling .aura,
body.figur-kumi #nexling .aura-boden, body.figur-ace #nexling .aura-boden { display: block; }

/* Kumi: Schattennebel - violette Schwaden steigen um sie auf */
body.figur-kumi #nexling .aura::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 12%; bottom: 4%;
  background: radial-gradient(ellipse 50% 52% at 50% 55%, rgba(150, 70, 255, 0.5), rgba(70, 20, 160, 0.3) 50%, transparent 74%);
  filter: blur(12px);
  animation: schatten-puls 4.6s ease-in-out infinite;
}
body.figur-kumi #nexling .aura i {
  bottom: 0; width: 40%; height: 58%;
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background:
    radial-gradient(ellipse 34% 40% at 50% 62%, rgba(8, 2, 20, 0.85), transparent 70%),
    radial-gradient(ellipse 50% 50% at 50% 60%, rgba(170, 90, 255, 0.75), rgba(90, 30, 200, 0.45) 45%, transparent 72%);
  filter: blur(9px);
  mix-blend-mode: normal;
  opacity: 0;
  animation: schatten-steigt 6.5s ease-in infinite;
}
body.figur-kumi #nexling .aura .a1 { left: 2%; animation-delay: 0s; }
body.figur-kumi #nexling .aura .a2 { left: 56%; animation-delay: 1.3s; }
body.figur-kumi #nexling .aura .a3 { left: 28%; animation-delay: 2.6s; width: 50%; }
body.figur-kumi #nexling .aura .a4 { left: 12%; animation-delay: 3.9s; height: 40%; }
body.figur-kumi #nexling .aura .a5 { left: 46%; animation-delay: 5.2s; height: 44%; }
body.figur-kumi #nexling .aura .strahlen { display: none; }
body.figur-kumi #nexling .aura-boden {
  background: radial-gradient(closest-side, rgba(10, 2, 24, 0.75), rgba(110, 40, 220, 0.5) 55%, transparent);
  filter: blur(7px);
  animation: schatten-boden 5.5s ease-in-out infinite;
}
@keyframes schatten-puls { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes schatten-steigt {
  0% { opacity: 0; transform: translateY(18%) scale(0.75, 0.7); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70%) scale(1.2, 1.45) skewX(-8deg); }
}
@keyframes schatten-boden { 0%, 100% { transform: scaleX(1); opacity: 0.85; } 50% { transform: scaleX(1.12); opacity: 1; } }

/* ACE: Sonnenlicht - warmer Schein, langsam drehende Strahlen, Lichtfunken */
body.figur-ace #nexling .aura::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 4%; bottom: 10%;
  background: radial-gradient(ellipse 50% 46% at 50% 38%, rgba(255, 214, 120, 0.42), rgba(255, 170, 60, 0.16) 55%, transparent 75%);
  filter: blur(10px);
  animation: sonne-puls 4s ease-in-out infinite;
}
body.figur-ace #nexling .aura .strahlen {
  left: 50%; top: 32%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 150, 0.16) 0deg 3deg, transparent 6deg 16deg, rgba(255, 226, 150, 0.08) 18deg 20deg, transparent 22deg 30deg);
  filter: blur(1.5px);
  -webkit-mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.5) 45%, transparent 72%);
  mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.5) 45%, transparent 72%);
  animation: sonne-dreht 48s linear infinite;
  mix-blend-mode: screen;
}
body.figur-ace #nexling .aura i:not(.strahlen) {
  bottom: 18%; width: 7px; height: 7px; border-radius: 50%;
  background: #fff1c4;
  box-shadow: 0 0 8px 3px rgba(255, 205, 90, 0.85), 0 0 20px 6px rgba(255, 170, 40, 0.35);
  opacity: 0;
  animation: funke-steigt 5.2s ease-out infinite;
}
body.figur-ace #nexling .aura .a1 { left: 26%; animation-delay: 0s; }
body.figur-ace #nexling .aura .a2 { left: 70%; animation-delay: 1.1s; bottom: 30%; }
body.figur-ace #nexling .aura .a3 { left: 40%; animation-delay: 2.2s; width: 5px; height: 5px; }
body.figur-ace #nexling .aura .a4 { left: 60%; animation-delay: 3.3s; bottom: 10%; }
body.figur-ace #nexling .aura .a5 { left: 33%; animation-delay: 4.3s; bottom: 40%; width: 5px; height: 5px; }
body.figur-ace #nexling .aura-boden {
  background: radial-gradient(closest-side, rgba(255, 210, 110, 0.38), rgba(255, 160, 50, 0.14) 60%, transparent);
  filter: blur(6px);
  mix-blend-mode: screen;
  animation: sonne-puls 4s ease-in-out infinite;
}
@keyframes sonne-puls { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes sonne-dreht { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes funke-steigt {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -220px) scale(1.1); }
}

/* Im Schlaf leiser, im Dunkeln wirkt die Aura sonst zu stark */
#nexling.schlaeft .aura, #nexling.schlaeft .aura-boden { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  #nexling .aura::before, #nexling .aura i, #nexling .aura-boden, #nexling .ohr, #nexling .schweif, #nexling .pfote-a, #nexling .pfote-b { animation: none !important; }
  body.figur-kumi #nexling .aura i { opacity: 0.35; transform: none; }
}

/* Lautsprecher-Knopf: Nexling spricht im Browser (14.10.2026) */
.stimme-knopf .stumm { display: none; }
.stimme-knopf.aus .stumm { display: inline; }
.stimme-knopf.aus .wellen { display: none; }
.stimme-knopf svg { fill: currentColor; }
#chat-leiste .stimme-knopf { background: rgba(255, 255, 255, 0.07); color: var(--akzent); box-shadow: none; }
#chat-leiste .stimme-knopf.aus { color: var(--text-leise); }
#chat-leiste .aufnahme-knopf { background: rgba(255, 255, 255, 0.07); color: var(--akzent); box-shadow: none; touch-action: none; }
#chat-leiste .aufnahme-knopf.nimmt-auf { background: #e0405e; color: #fff; animation: aufnahme-puls 1s ease-in-out infinite; }
@keyframes aufnahme-puls { 50% { box-shadow: 0 0 0 7px rgba(224, 64, 94, 0.25); } }
#chat-leiste .aufnahme-knopf svg { fill: none; }
#chat-leiste.aufnahme #chat-eingabe::placeholder { color: #ff8da2; }
#chat-leiste.fehler #chat-eingabe::placeholder { color: #ffb36b; }

/* SANIERUNG 14.10.2026: Drachen-Fluegel (Teile wie Schweif/Pfoten) */
#nexling .fluegel-l, #nexling .fluegel-r { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
#nexling:not(.teile-an) .fluegel-l, #nexling:not(.teile-an) .fluegel-r { display: none; }
#nexling .fluegel-l { animation: fluegel-l 3.2s ease-in-out infinite; }
#nexling .fluegel-r { animation: fluegel-r 3.2s ease-in-out infinite; }
#nexling.laeuft .fluegel-l, #nexling.spricht .fluegel-l { animation-duration: 0.9s; }
#nexling.laeuft .fluegel-r, #nexling.spricht .fluegel-r { animation-duration: 0.9s; }
#nexling.schlaeft .fluegel-l, #nexling.schlaeft .fluegel-r { animation: none; }
@keyframes fluegel-l { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-6deg); } 60% { transform: rotate(-4.5deg); } }
@keyframes fluegel-r { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(6deg); } 60% { transform: rotate(4.5deg); } }

/* SANIERUNG 14.10.2026: Element-Effekte fuer normale Nexlinge (Genesis-Elemente
   Feuer, Wasser, Blitz, Wind, Erde). Die Figur selbst ist fertig gefaerbt
   (tools/nexlinge_4seiten.py); hier kommen Partikel + eine eigene Bewegung dazu. */
#nexling .element-effekt { position: absolute; left: -25%; right: -25%; top: -5%; bottom: -4%; pointer-events: none; display: none; z-index: 3; }
#nexling .element-effekt.an { display: block; }
#nexling .element-effekt::before {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -2%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--el-farbe, #fff), transparent); opacity: 0.5; filter: blur(4px);
  animation: el-boden 3s ease-in-out infinite; z-index: -1;
}
#nexling .element-effekt i { position: absolute; display: block; bottom: 4%; animation-timing-function: linear; animation-iteration-count: infinite; }
#nexling .mund.aus { display: none !important; }
body.element-feuer { --el-farbe: #ff7a2a; }
body.element-wasser { --el-farbe: #7cc8ff; }
body.element-blitz { --el-farbe: #ffd84a; }
body.element-wind { --el-farbe: #5ff0d0; }
body.element-erde { --el-farbe: #b08850; }
@keyframes el-boden { 0%, 100% { opacity: 0.3; transform: scaleX(0.9); } 50% { opacity: 0.6; transform: scaleX(1.05); } }

/* ---- Feuer: Glut steigt auf, kleine Flammen am Boden, Hitzeschimmer ---- */
body.element-feuer #nexling .element-effekt i.funke {
  width: calc(9px * var(--groesse)); height: calc(9px * var(--groesse)); border-radius: 50%;
  background: radial-gradient(circle, #fff3b0 0%, #ffb02e 40%, #ff4a1a 70%, transparent 72%);
  box-shadow: 0 0 8px #ff7a2a; animation-name: el-glut-hoch;
}
@keyframes el-glut-hoch {
  0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: 1; }
  100% { transform: translate(var(--drift), -42vh) scale(0.25); opacity: 0; }
}
body.element-feuer #nexling .element-effekt i.flamme {
  bottom: 5%; width: calc(46px * var(--groesse)); height: calc(84px * var(--groesse)); margin-left: calc(-23px * var(--groesse));
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 246, 192, 0.9) 0%, rgba(255, 194, 58, 0.75) 25%, rgba(255, 106, 26, 0.5) 50%, rgba(255, 40, 10, 0) 72%);
  mix-blend-mode: screen; filter: blur(4px); animation-name: el-flamme; animation-timing-function: ease-in-out;
}
@keyframes el-flamme {
  0%, 100% { transform: scale(0.85, 0.7) skewX(-4deg); opacity: 0.55; }
  25% { transform: scale(1, 1.05) skewX(6deg); opacity: 0.8; }
  50% { transform: scale(0.9, 0.8) skewX(-7deg); opacity: 0.6; }
  75% { transform: scale(1.05, 1.15) skewX(3deg); opacity: 0.85; }
}
body.element-feuer #nexling .figur-box { animation: el-hitze 1.6s ease-in-out infinite; }
@keyframes el-hitze {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 110, 30, 0.55)); }
  50% { filter: drop-shadow(0 0 22px rgba(255, 70, 20, 0.85)) brightness(1.05); }
}

/* ---- Wasser (Frost): Eiskristalle rieseln, Blasen steigen, kalter Schimmer ---- */
body.element-wasser #nexling .element-effekt i.kristall {
  bottom: auto; top: -4%; color: #eaf7ff; font-size: calc(20px * var(--groesse)); line-height: 1;
  text-shadow: 0 0 6px #8fd3ff, 0 0 12px #3aa0ff; animation-name: el-schnee;
}
@keyframes el-schnee {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; }
  100% { transform: translate(var(--drift), 46vh) rotate(200deg); opacity: 0; }
}
body.element-wasser #nexling .element-effekt i.blase {
  width: calc(14px * var(--groesse)); height: calc(14px * var(--groesse)); border-radius: 50%;
  border: 1.5px solid rgba(190, 230, 255, 0.85); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), rgba(58,160,255,0.15) 60%);
  animation-name: el-blase;
}
@keyframes el-blase {
  0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; }
  50% { transform: translate(calc(var(--drift) * 0.5), -20vh); }
  100% { transform: translate(var(--drift), -40vh); opacity: 0; }
}
body.element-wasser #nexling .figur-box { animation: el-frost 4s ease-in-out infinite; }
@keyframes el-frost {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(150, 215, 255, 0.55)); }
  50% { filter: drop-shadow(0 0 20px rgba(200, 240, 255, 0.9)) brightness(1.06) saturate(0.9); }
}
body.element-wasser #nexling .element-effekt::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: -1%; height: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 248, 255, 0.85), rgba(140, 200, 255, 0.25) 60%, transparent);
  animation: el-boden 4s ease-in-out infinite;
}

/* ---- Blitz: lila/goldene Blitze zucken, Stromfunken springen ---- */
body.element-blitz #nexling .element-effekt i.blitz {
  bottom: auto; width: calc(26px * var(--groesse)); height: calc(70px * var(--groesse));
  clip-path: polygon(55% 0, 20% 52%, 46% 52%, 28% 100%, 82% 40%, 54% 40%, 72% 0);
  background: linear-gradient(180deg, #ffffff, #ffe36a 35%, #b77bff 80%);
  filter: drop-shadow(0 0 6px #c58bff) drop-shadow(0 0 10px #ffe36a); opacity: 0;
  animation-name: el-blitz-zuck; animation-timing-function: steps(1, end);
}
@keyframes el-blitz-zuck {
  0%, 84% { opacity: 0; transform: scale(0.8) rotate(var(--kipp, 0deg)); }
  85% { opacity: 1; transform: scale(1.1) rotate(var(--kipp, 0deg)); }
  87% { opacity: 0.2; }
  89% { opacity: 1; transform: scale(1) rotate(var(--kipp, 0deg)); }
  92%, 100% { opacity: 0; }
}
body.element-blitz #nexling .element-effekt i.strom {
  bottom: auto; width: calc(5px * var(--groesse)); height: calc(5px * var(--groesse)); border-radius: 50%;
  background: #fff8c8; box-shadow: 0 0 6px #ffe36a, 0 0 12px #b77bff; animation-name: el-strom;
}
@keyframes el-strom {
  0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; }
  20% { transform: translate(calc(var(--drift) * 0.6), -14px); }
  35% { transform: translate(calc(var(--drift) * -0.3), -4px); opacity: 1; }
  50% { transform: translate(var(--drift), -22px); opacity: 0; }
  100% { opacity: 0; }
}
body.element-blitz #nexling .figur-box { animation: el-geladen 5.5s linear infinite; }
@keyframes el-geladen {
  0%, 88%, 100% { filter: drop-shadow(0 0 10px rgba(190, 130, 255, 0.55)); transform: translateX(0); }
  89% { filter: drop-shadow(0 0 24px rgba(255, 230, 110, 0.95)) brightness(1.35); transform: translateX(-1.5px); }
  90% { transform: translateX(1.5px); }
  91% { filter: drop-shadow(0 0 18px rgba(190, 130, 255, 0.9)) brightness(1.15); transform: translateX(-1px); }
  93% { filter: drop-shadow(0 0 10px rgba(190, 130, 255, 0.55)); transform: translateX(0); }
}

/* ---- Wind: Windboegen wehen um die Figur, sie schwebt leicht ---- */
body.element-wind #nexling .element-effekt i.boe {
  left: 10% !important; bottom: auto; width: 80%; height: 16%;
  border-top: 3px solid rgba(170, 255, 235, 0.85); border-radius: 50%;
  animation-name: el-wind; filter: drop-shadow(0 0 4px #5ff0d0);
}
@keyframes el-wind {
  0% { transform: translateX(-40%) scaleX(0.4) rotate(-4deg); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translateX(40%) scaleX(1) rotate(4deg); opacity: 0; }
}
body.element-wind #nexling .element-effekt i.blatt {
  bottom: auto; top: 10%; width: calc(12px * var(--groesse)); height: calc(7px * var(--groesse));
  border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #c8fff0, #4fd8b8);
  animation-name: el-wehen;
}
@keyframes el-wehen {
  0% { transform: translate(-30vw, 0) rotate(0); opacity: 0; } 15% { opacity: 0.9; }
  50% { transform: translate(0, -6vh) rotate(200deg); }
  100% { transform: translate(30vw, 4vh) rotate(420deg); opacity: 0; }
}
body.element-wind #nexling .figur-box { animation: el-schweben 3.2s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(95, 240, 208, 0.5)); }
@keyframes el-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.2%); } }

/* ---- Erde: Steinchen heben ab und fallen, Staub am Boden, schwerer Stand ---- */
body.element-erde #nexling .element-effekt i.stein {
  width: calc(11px * var(--groesse)); height: calc(9px * var(--groesse));
  border-radius: 40% 55% 45% 50% / 50% 40% 60% 45%;
  background: radial-gradient(circle at 35% 30%, #d8b88a, #7a5a36 70%); box-shadow: 0 0 5px rgba(150, 230, 120, 0.5);
  animation-name: el-stein; animation-timing-function: ease-in-out;
}
@keyframes el-stein {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; }
  45% { transform: translate(calc(var(--drift) * 0.4), -16vh) rotate(120deg); }
  60% { transform: translate(calc(var(--drift) * 0.5), -17vh) rotate(160deg); }
  100% { transform: translate(var(--drift), 0) rotate(300deg); opacity: 0; }
}
body.element-erde #nexling .element-effekt i.moos {
  bottom: auto; top: 20%; width: calc(12px * var(--groesse)); height: calc(8px * var(--groesse));
  border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #b8e07a, #5a8a2c);
  animation-name: el-blatt;
}
@keyframes el-blatt {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; }
  50% { transform: translate(var(--drift), 20vh) rotate(180deg); }
  100% { transform: translate(calc(var(--drift) * -0.5), 40vh) rotate(360deg); opacity: 0; }
}
body.element-erde #nexling .element-effekt::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: -1%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(176, 136, 80, 0.55), transparent); filter: blur(3px);
  animation: el-staub 2.4s ease-out infinite;
}
@keyframes el-staub { 0% { transform: scaleX(0.7); opacity: 0.7; } 100% { transform: scaleX(1.25); opacity: 0; } }
body.element-erde #nexling .figur-box { filter: drop-shadow(0 0 10px rgba(150, 200, 90, 0.45)); }

#nexling.schlaeft .element-effekt { opacity: 0.4; }
#nexling.schlaeft .figur-box { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #nexling .element-effekt i, #nexling .fluegel-l, #nexling .fluegel-r, #nexling .figur-box { animation: none !important; } }

/* ---------- Digimon-Momente (17.10.2026): Power-up, Schattenboxen, Pirouette, Freude ---------- */
#nexling { --ef: #c7a8ff; }
#nexling.dm-powerup .koerper { animation: dm-powerup 1.7s cubic-bezier(.3,.6,.3,1); }
@keyframes dm-powerup {
  0% { transform: scale(1, 1); }
  14% { transform: scale(1.08, 0.88); }
  22%, 30%, 38%, 46%, 54%, 62% { transform: scale(1.04, 1.05) translateX(-0.8%); }
  26%, 34%, 42%, 50%, 58%, 66% { transform: scale(1.04, 1.05) translateX(0.8%); }
  78% { transform: translateY(-7%) scale(0.95, 1.1); }
  90% { transform: translateY(0) scale(1.05, 0.95); }
  100% { transform: scale(1, 1); }
}
#nexling.dm-powerup img { filter: drop-shadow(0 0 18px var(--ef)) drop-shadow(0 0 36px var(--ef)) brightness(1.15); transition: filter 0.3s; }
.dm-saeule {
  position: absolute; left: 15%; right: 15%; bottom: -4%; height: 125%; pointer-events: none; z-index: -1;
  background: linear-gradient(to top, var(--ef) 0%, color-mix(in srgb, var(--ef) 40%, transparent) 45%, transparent 100%);
  filter: blur(6px); mix-blend-mode: screen; border-radius: 40% 40% 12% 12%; opacity: 0;
  animation: dm-saeule 1.7s ease-out forwards;
}
@keyframes dm-saeule { 0% { opacity: 0; transform: scaleX(0.2) scaleY(0.3); } 30% { opacity: 0.9; transform: scaleX(1) scaleY(1); } 70% { opacity: 0.7; } 100% { opacity: 0; transform: scaleX(1.4) scaleY(1.1); } }
.dm-ring {
  position: absolute; left: 50%; bottom: -3%; width: 70%; height: 16%; transform: translateX(-50%); pointer-events: none; z-index: 4;
  border-radius: 50%; border: 5px solid var(--ef); box-shadow: 0 0 30px var(--ef), inset 0 0 22px var(--ef);
  animation: dm-ring 1.1s ease-out forwards;
}
.dm-ring.zwei { border-width: 3px; animation-duration: 0.9s; }
@keyframes dm-ring { from { opacity: 1; transform: translateX(-50%) scale(0.3); } to { opacity: 0; transform: translateX(-50%) scale(2.4); } }
.dm-teil {
  position: absolute; bottom: 4%; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, #fff 0 25%, var(--ef) 45%, transparent 70%); box-shadow: 0 0 12px var(--ef);
  animation: dm-teil 1.3s ease-out forwards; opacity: 0;
}
.dm-teil.klein { width: 8px; height: 8px; }
.dm-teil.stern { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 16px; height: 16px; }
@keyframes dm-teil { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--h) * -5)) scale(1.1); } }
#nexling.dm-training .koerper { animation: dm-training 1.5s ease-in-out; }
@keyframes dm-training {
  0%, 100% { transform: translateX(0) rotate(0); }
  8% { transform: translateX(-3%) scale(1.04, 0.95); }
  16% { transform: translateX(7%) rotate(5deg) scale(0.97, 1.03); }
  26% { transform: translateX(0) rotate(0); }
  36% { transform: translateX(3%) scale(1.04, 0.95); }
  44% { transform: translateX(-7%) rotate(-5deg) scale(0.97, 1.03); }
  54% { transform: translateX(0) rotate(0); }
  64% { transform: translateY(-3%) scale(1.05, 0.94); }
  76% { transform: translateY(-10%) rotate(8deg) scale(0.95, 1.07); }
  88% { transform: translateY(0) scale(1.06, 0.93); }
}
.dm-hieb {
  position: absolute; top: 30%; left: 62%; width: 46%; height: 34%; pointer-events: none; z-index: 5; border-radius: 50%;
  border-top: 9px solid #fff; border-right: 4px solid var(--ef); filter: drop-shadow(0 0 14px var(--ef)) drop-shadow(0 0 6px #fff);
  animation: dm-hieb 0.42s ease-out forwards;
}
.dm-hieb.gegen { left: -8%; border-right: 0; border-left: 3px solid var(--ef); }
@keyframes dm-hieb { from { opacity: 1; transform: rotate(-40deg) scale(0.5); } to { opacity: 0; transform: rotate(40deg) scale(1.2); } }
#nexling.dm-pirouette .koerper { animation: dm-pirouette 0.9s cubic-bezier(.4,.1,.3,1); }
@keyframes dm-pirouette {
  0% { transform: scaleX(1); }
  20% { transform: translateY(-6%) scaleX(0.1); }
  45% { transform: translateY(-10%) scaleX(-1); }
  70% { transform: translateY(-5%) scaleX(-0.1); }
  88% { transform: translateY(0) scale(1.05, 0.95); }
  100% { transform: scaleX(1); }
}
#nexling.dm-freude .koerper { animation: dm-freude 1.3s cubic-bezier(.3,.7,.4,1); }
@keyframes dm-freude {
  0% { transform: scale(1.06, 0.92); }
  20% { transform: translateY(-12%) scale(0.95, 1.07) rotate(-6deg); }
  40% { transform: translateY(0) scale(1.07, 0.92); }
  60% { transform: translateY(-15%) scale(0.95, 1.08) rotate(6deg); }
  82% { transform: translateY(0) scale(1.06, 0.93); }
  100% { transform: scale(1, 1); }
}
#nexling.dm-strecken .koerper { animation: dm-strecken 1.8s ease-in-out; }
@keyframes dm-strecken {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(0.94, 1.1) rotate(-2deg); }
  55% { transform: scale(0.95, 1.09) rotate(2deg); }
  75% { transform: scale(1.06, 0.93); }
}
#nexling.dm-schnueffeln .koerper { animation: dm-schnueffeln 1.6s ease-in-out; }
@keyframes dm-schnueffeln {
  0%, 100% { transform: rotate(0) translateY(0); }
  15%, 45%, 75% { transform: rotate(4deg) translateY(2.5%) scale(1.02, 0.97); }
  30%, 60%, 90% { transform: rotate(1deg) translateY(0.8%); }
}
@media (prefers-reduced-motion: reduce) {
  .dm-saeule, .dm-ring, .dm-teil, .dm-hieb { display: none; }
}

/* 25.10.2026: Streicheln mit dem Finger */
#nexling { touch-action: none; }
#nexling.gestreichelt { cursor: grabbing; }
#nexling.gestreichelt .koerper { animation: anschmiegen 0.9s ease-in-out infinite; }
@keyframes anschmiegen { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(1.03, 0.97) rotate(-1.5deg); } 70% { transform: scale(1.02, 0.98) rotate(1.5deg); } }
#nexling.gestreichelt img { filter: drop-shadow(0 0 26px rgba(255, 140, 210, 0.75)) brightness(1.06); }
.effekt.herz.klein { width: 30px; height: 30px; }
#streich-hinweis { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 3000; padding: 9px 16px; border-radius: 999px;
  font-size: 14px; color: #fff; white-space: nowrap; background: linear-gradient(135deg, rgba(255, 110, 180, 0.88), rgba(150, 90, 255, 0.88));
  box-shadow: 0 6px 22px rgba(255, 110, 180, 0.45); animation: streich-tipp 1.6s ease-in-out infinite; pointer-events: none; }
#streich-hinweis[hidden] { display: none; }
@keyframes streich-tipp { 50% { transform: translate(-50%, -5px); } }
@media (prefers-reduced-motion: reduce) { #nexling.gestreichelt .koerper, #streich-hinweis { animation: none; } }

/* 25.10.2026: Chat nachlesen - kleines Symbol unten (Handy), Verlauf bleibt auf dem Geraet gespeichert */
#chat-leiste .verlauf-knopf { background: rgba(255, 255, 255, 0.07); color: var(--akzent); box-shadow: none; }
#verlauf li small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-leise); opacity: 0.8; }
#seite-rechts h2 .verlauf-zu { display: none; }
body.verlauf-offen #seite-rechts {
  display: flex; flex-direction: column; position: fixed; z-index: 70;
  left: 10px; right: 10px; top: calc(12px + env(safe-area-inset-top)); bottom: calc(76px + env(safe-area-inset-bottom));
  padding: 16px 14px; border-radius: 20px; background: var(--glas); border: 1px solid var(--rand);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  animation: verlauf-rein 0.22s ease;
}
body.verlauf-offen #seite-rechts h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px;
  font: 600 15px var(--schrift); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-leise); }
body.verlauf-offen #seite-rechts h2 .verlauf-zu { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--rand); background: rgba(255, 255, 255, 0.07); color: var(--text); font-size: 14px; }
body.verlauf-offen #verlauf { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; }
body.verlauf-offen #verlauf li { padding: 9px 13px; border-radius: 16px; max-width: 88%; background: var(--glas-hell); border: 1px solid var(--rand); }
body.verlauf-offen #verlauf li.ich { align-self: flex-end; background: color-mix(in srgb, var(--akzent) 26%, transparent); }
body.verlauf-offen #verlauf li.leer { color: var(--text-leise); background: none; border: 0; padding: 0; }
body.verlauf-offen #chat-leiste .verlauf-knopf { background: var(--akzent); color: #160a26; }
@keyframes verlauf-rein { from { opacity: 0; transform: translateY(12px); } }
/* am PC steht der Verlauf ohnehin rechts daneben */
@media (min-width: 960px) and (min-aspect-ratio: 1/1) {
  #chat-leiste .verlauf-knopf { display: none; }
  body.verlauf-offen #seite-rechts { position: relative; inset: auto; animation: none; }
}
body.verlauf-offen #streich-hinweis, body.verlauf-offen #titel-hinweis { display: none; }