/* ════════════════════════════════════════════════════════════════════
   🌸 <oni-chippi> — Aussehen. Farben über Variablen, damit jede Seite
   (Onimai rosa, DarkBot karmesin, Server-Panel) ihren Ton setzt:
     --chippi-akzent  --chippi-glow  --chippi-blase  --chippi-text  --chippi-rand
   Bewegung: sanftes Schweben + weiches Glühen. Nichts hüpft wild; bei
   prefers-reduced-motion steht Chippi still.
   ════════════════════════════════════════════════════════════════════ */
oni-chippi { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; vertical-align: middle;
  --chippi-akzent: #ff5fa2; --chippi-glow: rgba(255, 95, 162, .35); --chippi-blase: rgba(255, 255, 255, .92); --chippi-text: #3f2847; --chippi-rand: rgba(255, 95, 162, .28);
  --chippi-groesse: 104px; }
oni-chippi[groesse="s"] { --chippi-groesse: 64px; gap: 8px; }
oni-chippi[groesse="l"] { --chippi-groesse: 150px; }
oni-chippi[figur="darkbot"] { --chippi-akzent: #e11d48; --chippi-glow: rgba(225, 29, 72, .38); --chippi-blase: rgba(20, 10, 18, .92); --chippi-text: #fde6ee; --chippi-rand: rgba(255, 90, 116, .38); }
oni-chippi[richtung="unten"] { flex-direction: column; text-align: center; }

.oni-chippi__buehne { position: relative; flex: none; width: var(--chippi-groesse); aspect-ratio: 16 / 15; display: grid; place-items: end center; }
/* Weicher Lichthof hinter der Figur (kein Neon). */
.oni-chippi__buehne::before { content: ''; position: absolute; inset: 12% 8% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--chippi-glow), transparent 72%); filter: blur(6px); animation: oni-chippi-atmen 4.8s ease-in-out infinite; }
.oni-chippi__bild { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 14px rgba(40, 10, 40, .22)); animation: oni-chippi-schweben 5.2s ease-in-out infinite; transition: opacity .3s ease, transform .3s ease; }
.oni-chippi--wechsel .oni-chippi__bild { opacity: .35; transform: scale(.96); }
.oni-chippi--ohne-bild .oni-chippi__bild { visibility: hidden; }
.oni-chippi--ohne-bild .oni-chippi__buehne::after { content: '🌸'; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--chippi-groesse) * .42); }

/* Funken nur in „happy"/„success" — drei kleine Punkte, ruhig. */
.oni-chippi__funken { position: absolute; inset: 0; pointer-events: none; }
.oni-chippi__funken i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--chippi-akzent); opacity: 0; box-shadow: 0 0 10px var(--chippi-glow); }
.oni-chippi__funken i:nth-child(1) { left: 6%; top: 28%; } .oni-chippi__funken i:nth-child(2) { right: 4%; top: 12%; } .oni-chippi__funken i:nth-child(3) { right: 12%; top: 58%; }
oni-chippi[data-zustand="success"] .oni-chippi__funken i, oni-chippi[data-zustand="happy"] .oni-chippi__funken i { animation: oni-chippi-funke 2.8s ease-in-out infinite; }
.oni-chippi__funken i:nth-child(2) { animation-delay: -.9s !important; } .oni-chippi__funken i:nth-child(3) { animation-delay: -1.8s !important; }

/* Sprechblase */
.oni-chippi__blase { position: relative; min-width: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--chippi-blase); color: var(--chippi-text); border: 1.5px solid var(--chippi-rand);
  box-shadow: 0 10px 26px -14px var(--chippi-glow), inset 0 1px 0 rgba(255, 255, 255, .5); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.oni-chippi__blase[hidden] { display: none; }
oni-chippi[richtung="unten"] .oni-chippi__blase { border-radius: 18px; }
oni-chippi[data-zustand="error"] .oni-chippi__blase { border-color: rgba(255, 90, 116, .55); }
oni-chippi[data-zustand="warning"] .oni-chippi__blase { border-color: rgba(255, 196, 61, .6); }
oni-chippi[data-zustand="sleeping"] .oni-chippi__bild { animation-duration: 8s; filter: drop-shadow(0 8px 14px rgba(40, 10, 40, .18)) saturate(.9); }
oni-chippi[data-zustand="loading"] .oni-chippi__buehne::before { animation-duration: 1.8s; }

@keyframes oni-chippi-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes oni-chippi-atmen { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes oni-chippi-funke { 0%, 100% { opacity: 0; transform: translateY(4px) scale(.6); } 40% { opacity: 1; transform: translateY(-4px) scale(1); } 70% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .oni-chippi__bild, .oni-chippi__buehne::before, .oni-chippi__funken i { animation: none !important; }
  .oni-chippi__bild { transition: none; }
}
@media (max-width: 480px) { oni-chippi:not([groesse="s"]) { --chippi-groesse: 84px; } }

/* onimai.eu 404 (28.09.2026): Chippi statt des alten Motivs — gross, Blase
   darunter. `oni-chippi.k-404-chippi` schlägt die Handy-Regel oben. */
oni-chippi.k-404-chippi { --chippi-groesse: clamp(140px, 22vw, 230px); }
.k-404-chippi .oni-chippi__blase { font-size: 1.02rem; max-width: 28ch; }
html:not(.light) .k-404-chippi { --chippi-blase: rgba(40, 20, 44, .9); --chippi-text: #fdf0f8; }

/* Kontext-Zubehör (29.09.2026): ⌨️ Server · ✨ AI · 🎧 Radio · 💬 Support · 🎙️ Studio */
.oni-chippi__zubehoer { position: absolute; left: -2px; bottom: 2px; font-size: 1.35em; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .22)); animation: oni-chippi-zubehoer 4.4s ease-in-out -1s infinite; pointer-events: none; }
.oni-chippi__zubehoer[hidden] { display: none; }
.oni-chippi[data-zubehoer="kopfhoerer"] .oni-chippi__zubehoer, .oni-chippi[data-zubehoer="mikro"] .oni-chippi__zubehoer { left: auto; right: -2px; }
@keyframes oni-chippi-zubehoer { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .oni-chippi__zubehoer { animation: none; } }