#sonja{position:fixed;right:22px;bottom:22px;z-index:99990;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#sonja *{box-sizing:border-box} .sj-kugel{
position:relative;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;padding:0;
background:radial-gradient(circle at 50% 42%,
rgba(240,248,252,.98) 0%, rgba(160,205,225,.95) 22%,
rgba(53,128,155,.92) 48%, rgba(17,76,95,.98) 74%, rgba(10,44,58,1) 100%);
box-shadow:0 6px 24px rgba(17,76,95,.35), 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 40px rgba(53,128,155,.25);
transition:transform .2s ease, box-shadow .2s ease;overflow:hidden;
animation:sj-atmen 4.6s ease-in-out infinite;
}
.sj-kugel:hover{transform:scale(1.06)}
.sj-kugel.auf{box-shadow:0 6px 24px rgba(17,76,95,.45), 0 0 0 2px #D99A2B, 0 0 40px rgba(217,154,43,.3)}
.sj-kugel.denkt .sj-wirbel{animation-duration:1.2s}
.sj-kern{position:absolute;inset:0;border-radius:50%}
.sj-wirbel{position:absolute;inset:6px;border-radius:50%;mix-blend-mode:screen;
background:conic-gradient(from 0deg, transparent 0 40deg, rgba(246,217,160,.55) 70deg, transparent 120deg,
transparent 200deg, rgba(200,235,250,.45) 240deg, transparent 300deg);
animation:sj-dreh 7s linear infinite}
.sj-glanz{position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle at 40% 30%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 28%)}
.sj-punkt{display:none;position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;
background:#D99A2B;box-shadow:0 0 0 2px #fff, 0 0 10px rgba(217,154,43,.8)}
@keyframes sj-atmen{50%{transform:scale(1.035)}}
@keyframes sj-dreh{to{transform:rotate(360deg)}} .sj-schild{
position:absolute;right:76px;bottom:12px;white-space:nowrap;pointer-events:none;
background:#fff;color:#1B2830;border:1px solid rgba(125,138,150,.25);
border-radius:14px 14px 4px 14px;padding:8px 14px;line-height:1.25;
box-shadow:0 10px 30px rgba(17,76,95,.16), 0 2px 6px rgba(0,0,0,.06);
opacity:0;transform:translateX(10px);
animation:sj-schild-auf .5s ease 1.2s forwards;
}
.sj-schild b{display:block;font-size:13.5px;letter-spacing:.01em}
.sj-schild span{display:block;font-size:11px;color:#5F6E7A;letter-spacing:.04em}
.sj-schild.sj-weg{animation:sj-schild-zu .35s ease forwards}
@keyframes sj-schild-auf{to{opacity:1;transform:translateX(0)}}
@keyframes sj-schild-zu{to{opacity:0;transform:translateX(10px)}} .sj-menue,.sj-fenster,.sj-sprechen{
position:absolute;right:0;bottom:80px;width:min(380px, calc(100vw - 32px));
display:none;flex-direction:column;border-radius:16px;overflow:hidden;
background:#fff;color:#1B2830;border:1px solid rgba(125,138,150,.25);
box-shadow:0 18px 60px rgba(17,76,95,.22), 0 2px 8px rgba(0,0,0,.08);
transform-origin:100% 100%;
}
.sj-menue.auf,.sj-fenster.auf,.sj-sprechen.auf{display:flex;animation:sj-auf .22s ease}
.sj-fenster{max-height:min(560px, calc(100vh - 120px))}
@keyframes sj-auf{from{opacity:0;transform:scale(.96) translateY(8px)}} .sj-mkopf{display:flex;align-items:center;gap:10px;padding:14px 16px;
background:linear-gradient(135deg,#114C5F,#35809B);color:#fff}
.sj-wahl{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
background:#fff;border:0;border-bottom:1px solid rgba(125,138,150,.16);padding:16px;
font:inherit;color:#1B2830;transition:background .15s ease}
.sj-wahl:hover{background:#F4F7F9}
.sj-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
background:linear-gradient(135deg,rgba(17,76,95,.08),rgba(53,128,155,.16));color:#114C5F}
.sj-icon svg{width:22px;height:22px}
.sj-wahl:last-of-type .sj-icon{background:linear-gradient(135deg,rgba(217,154,43,.12),rgba(217,154,43,.24));color:#9c6d12}
.sj-wtext b{display:block;font-size:15px;letter-spacing:.01em}
.sj-wtext small{display:block;font-size:11.5px;color:#5F6E7A;margin-top:1px}
.sj-hinweis{font-size:10.5px;color:#5F6E7A;padding:10px 14px 12px;background:#F4F7F9;line-height:1.5}
.sj-hinweis a{color:#35809B}
.sj-ki{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.1em;
background:#114C5F;color:#fff;border-radius:4px;padding:1px 5px;margin-right:5px;vertical-align:1px} .sj-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px;
background:linear-gradient(135deg,#114C5F,#35809B);color:#fff}
.sj-zurueck{background:transparent;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;
opacity:.8;padding:0 4px 3px;margin-right:-4px}
.sj-zurueck:hover{opacity:1}
.sj-minikugel{width:28px;height:28px;border-radius:50%;flex-shrink:0;
background:radial-gradient(circle at 45% 35%, #fff 0%, #A9CFE0 30%, #35809B 70%, #114C5F 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.4) inset}
.sj-titel{line-height:1.1;flex:1}
.sj-titel b{display:block;font-size:15px;letter-spacing:.02em}
.sj-titel small{display:block;font-size:10.5px;opacity:.85;margin-top:2px;letter-spacing:.06em}
.sj-zu{background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.85;padding:2px 6px}
.sj-zu:hover{opacity:1} .sj-verlauf{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:#F4F7F9;min-height:180px}
.sj-z{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-line;word-wrap:break-word}
.sj-sonja{align-self:flex-start;background:#fff;border:1px solid rgba(125,138,150,.22);border-bottom-left-radius:4px}
.sj-du{align-self:flex-end;background:#114C5F;color:#fff;border-bottom-right-radius:4px}
.sj-ok{background:#ecf7f2;border-color:rgba(47,158,119,.4);color:#1f6f52;font-size:13px}
.sj-tippt i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#7D8A96;animation:sj-tipp 1.2s infinite}
.sj-tippt i:nth-child(2){animation-delay:.2s}.sj-tippt i:nth-child(3){animation-delay:.4s}
@keyframes sj-tipp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.sj-eingabe{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(125,138,150,.2);background:#fff}
.sj-eingabe input{flex:1;font:inherit;font-size:14px;padding:10px 12px;border-radius:10px;border:1px solid rgba(125,138,150,.35);outline:none}
.sj-eingabe input:focus{border-color:#35809B;box-shadow:0 0 0 3px rgba(53,128,155,.15)}
.sj-eingabe button{width:42px;border-radius:10px;border:0;background:#D99A2B;color:#fff;font-size:16px;cursor:pointer}
.sj-eingabe button:hover{background:#c48a22}
.sj-fuss{font-size:10.5px;color:#5F6E7A;padding:6px 12px 10px;background:#fff;text-align:center;line-height:1.5}
.sj-fuss a{color:#35809B} .sj-buehne{background:linear-gradient(180deg,#0d2632,#0a1c26);padding:30px 18px 24px;text-align:center}
.sj-orbfeld{position:relative;width:min(264px, calc(100vw - 90px));aspect-ratio:1;
margin:0 auto 12px;display:grid;place-items:center}
.sj-orbring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
pointer-events:none;z-index:0}
.sj-grosskugel{position:relative;z-index:1;width:120px;height:120px;margin:0;border-radius:50%;
background:radial-gradient(circle at 50% 42%,
rgba(240,248,252,.98) 0%, rgba(160,205,225,.95) 22%,
rgba(53,128,155,.92) 48%, rgba(17,76,95,.98) 74%, rgba(10,44,58,1) 100%);
box-shadow:0 0 40px rgba(53,128,155,.4), 0 0 0 1px rgba(255,255,255,.3) inset;
animation:sj-atmen 4.6s ease-in-out infinite}
.sj-grosskugel span{position:absolute;inset:0;border-radius:50%}
.sj-grosskugel span:nth-child(1){inset:8px;mix-blend-mode:screen;
background:conic-gradient(from 0deg, transparent 0 40deg, rgba(246,217,160,.5) 70deg, transparent 120deg,
transparent 200deg, rgba(200,235,250,.45) 240deg, transparent 300deg);
animation:sj-dreh 7s linear infinite}
.sj-grosskugel span:nth-child(2){background:radial-gradient(circle at 40% 30%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 30%)}
.sj-grosskugel span:nth-child(3){border:1px solid rgba(150,220,255,.25);animation:sj-ring 2.8s ease-out infinite;opacity:0}
@keyframes sj-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.sj-grosskugel.verbindet{animation:sj-atmen 1.6s ease-in-out infinite}
.sj-grosskugel.hoert{box-shadow:0 0 50px rgba(105,205,248,.55), 0 0 0 2px rgba(150,220,255,.5) inset}
.sj-grosskugel.spricht{animation:sj-sprechen .6s ease-in-out infinite;
box-shadow:0 0 60px rgba(217,154,43,.5), 0 0 0 2px rgba(246,217,160,.6) inset}
@keyframes sj-sprechen{0%,100%{transform:scale(1)}35%{transform:scale(1.07)}65%{transform:scale(1.02)}}
.sj-status{color:#dcecf5;font-size:14.5px;letter-spacing:.02em;min-height:20px}
.sj-kontrolle{margin-top:14px;padding:10px 14px;border-radius:12px;
background:rgba(105,205,248,.12);border:1px solid rgba(120,210,255,.35);
display:flex;flex-direction:column;gap:3px;align-items:center;animation:sj-auf .25s ease}
.sj-kt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8fc9e8}
.sj-kw{font-size:17px;font-weight:600;color:#eaf6ff;letter-spacing:.03em;
word-break:break-all;text-align:center;line-height:1.35}
@keyframes sj-auf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sj-sfuss{background:#fff;padding:12px 12px 8px}
.sj-auflegen{width:100%;padding:12px;border:0;border-radius:11px;cursor:pointer;font:inherit;font-size:14.5px;
background:#B3382C;color:#fff;transition:background .15s ease}
.sj-auflegen:hover{background:#9c2f24} @media (max-width:640px){
#sonja{right:16px;bottom:16px}
.sj-kugel{width:56px;height:56px}
.sj-menue,.sj-fenster,.sj-sprechen{bottom:70px}
.sj-schild{display:none} .sj-buehne{padding:24px 14px 20px}
.sj-grosskugel{width:100px;height:100px}
} .scroll-top{display:none !important}
@media (prefers-reduced-motion:reduce){.sj-kugel,.sj-wirbel,.sj-grosskugel,.sj-schild{animation:none}
.sj-schild{opacity:1;transform:none}}