/* Toni der Tonkrug – KI-Assistent */
#toni{--t-ton:#c8693a;--t-ton-d:#9c4a24;--t-creme:#fff6e6;--t-ink:#2b2a26;--t-blase:#fffdf8;position:fixed;right:18px;bottom:18px;z-index:9000;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--t-ink);touch-action:none}
#toni[hidden]{display:none}
#toni.frei{right:auto;bottom:auto}
/* Figur */
.toni-figur{display:block;width:96px;height:118px;padding:0;border:0;background:none;cursor:grab;position:relative;filter:drop-shadow(0 8px 14px rgba(60,30,10,.28));-webkit-tap-highlight-color:transparent}
.toni-figur:focus-visible{outline:3px solid var(--t-ton);outline-offset:4px;border-radius:20px}
.toni-figur svg{width:100%;height:100%;overflow:visible}
#toni.zieht .toni-figur{cursor:grabbing}
.toni-koerper{transform-origin:60px 140px;animation:toni-wippen 3.2s ease-in-out infinite}
.toni-figur:hover .toni-koerper{animation:toni-wackeln .6s ease-in-out}
#toni.zieht .toni-koerper{animation:none;transform:scale(1.08,.92) rotate(-6deg)}
#toni.huepft .toni-koerper{animation:toni-huepfen .7s cubic-bezier(.3,1.6,.5,1)}
#toni.dreht .toni-koerper{animation:toni-drehen 1s ease-in-out}
@keyframes toni-wippen{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes toni-wackeln{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
@keyframes toni-huepfen{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(0) scale(1.1,.88)}60%{transform:translateY(-22px) scale(.95,1.06)}100%{transform:translateY(0) scale(1,1)}}
@keyframes toni-drehen{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.toni-lid{transform-box:fill-box;transform-origin:center top;transform:scaleY(0);animation:toni-blinzeln 4.6s infinite}
@keyframes toni-blinzeln{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.toni-pupille{transition:transform .12s ease-out}
.toni-mund-auf{opacity:0}
#toni.redet .toni-mund-zu{opacity:0}#toni.redet .toni-mund-auf{opacity:1;transform-box:fill-box;transform-origin:center;animation:toni-reden .22s ease-in-out infinite alternate}
@keyframes toni-reden{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.toni-zweig{transform-origin:62px 22px;animation:toni-zweig 2.6s ease-in-out infinite}
@keyframes toni-zweig{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
.toni-arm{transform-origin:16px 96px}
#toni.winkt .toni-arm{animation:toni-winken .45s ease-in-out 4 alternate}
@keyframes toni-winken{from{transform:rotate(0)}to{transform:rotate(70deg)}}
.toni-dampf circle{opacity:0}
#toni.denkt .toni-dampf circle{animation:toni-dampf 1.6s ease-out infinite}
#toni.denkt .toni-dampf circle:nth-child(2){animation-delay:.5s}#toni.denkt .toni-dampf circle:nth-child(3){animation-delay:1s}
@keyframes toni-dampf{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.85}100%{opacity:0;transform:translate(6px,-34px) scale(1.6)}}
#toni.denkt .toni-braue{transform:translateY(-3px)}
.toni-braue{transition:transform .3s}
/* Sprechblase (Begrüßung) */
.toni-blase{position:absolute;bottom:118px;right:6px;width:max-content;max-width:240px;padding:10px 14px;background:var(--t-blase);border:2px solid var(--t-ink);border-radius:16px 16px 4px 16px;box-shadow:3px 4px 0 rgba(43,42,38,.85);font-size:.9rem;cursor:pointer;animation:toni-blase-ein .45s cubic-bezier(.3,1.6,.5,1)}
.toni-blase[hidden]{display:none}
.toni-blase::after{content:"";position:absolute;right:26px;bottom:-11px;border:10px solid transparent;border-top-color:var(--t-ink);border-bottom:0}
@keyframes toni-blase-ein{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}
#toni.links .toni-blase{right:auto;left:6px;border-radius:16px 16px 16px 4px}#toni.links .toni-blase::after{right:auto;left:26px}
#toni.oben .toni-blase{bottom:auto;top:118px;border-radius:4px 16px 16px 16px}#toni.oben .toni-blase::after{bottom:auto;top:-11px;border:10px solid transparent;border-bottom-color:var(--t-ink);border-top:0}
/* Chatfenster */
.toni-fenster{position:absolute;bottom:126px;right:0;width:min(360px,calc(100vw - 24px));max-height:min(540px,calc(100vh - 160px));display:flex;flex-direction:column;background:var(--t-blase);border:2.5px solid var(--t-ink);border-radius:22px;box-shadow:5px 6px 0 rgba(43,42,38,.9);overflow:hidden;animation:toni-fenster-ein .35s cubic-bezier(.3,1.4,.5,1)}
.toni-fenster[hidden]{display:none}
@keyframes toni-fenster-ein{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
#toni.links .toni-fenster{right:auto;left:0}#toni.oben .toni-fenster{bottom:auto;top:126px}
.toni-kopf{display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(135deg,var(--t-ton),var(--t-ton-d));color:#fff}
.toni-kopf b{flex:1;font:800 1.02rem/1.15 system-ui,sans-serif;letter-spacing:.01em}.toni-kopf small{display:block;font-weight:500;opacity:.9;font-size:.75rem}
.toni-kopf button{width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:1rem;cursor:pointer;display:grid;place-items:center}
.toni-kopf button:hover,.toni-kopf button:focus-visible{background:rgba(255,255,255,.35);outline:none}
.toni-verlauf{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:repeating-linear-gradient(135deg,#fffaf0 0 14px,#fdf3e2 14px 28px)}
.toni-msg{max-width:88%;padding:9px 12px;border-radius:16px;border:2px solid var(--t-ink);background:#fff;box-shadow:2px 3px 0 rgba(43,42,38,.7);animation:toni-msg-ein .3s ease-out;word-wrap:break-word}
@keyframes toni-msg-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.toni-msg.toni{align-self:flex-start;border-bottom-left-radius:4px}.toni-msg.ich{align-self:flex-end;background:#fde2c8;border-bottom-right-radius:4px}
.toni-msg p{margin:0 0 .5em}.toni-msg p:last-child,.toni-msg ul:last-child{margin-bottom:0}.toni-msg ul,.toni-msg ol{margin:.2em 0 .5em;padding-left:1.2em}
.toni-msg a{color:#9c3f12;font-weight:600}
.toni-quellen{margin-top:6px;padding-top:6px;border-top:1px dashed #d8c7ae;font-size:.78rem;color:#6b6152}.toni-quellen a{color:#6b6152;font-weight:400;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toni-tippt{display:inline-flex;gap:4px;align-items:center}.toni-tippt i{width:7px;height:7px;border-radius:50%;background:var(--t-ton);animation:toni-punkt 1s infinite}
.toni-tippt i:nth-child(2){animation-delay:.15s}.toni-tippt i:nth-child(3){animation-delay:.3s}
@keyframes toni-punkt{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
.toni-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0;background:var(--t-blase)}
.toni-chips button{border:2px solid var(--t-ink);background:#fff;border-radius:999px;padding:5px 11px;font:600 .8rem system-ui,sans-serif;cursor:pointer;box-shadow:2px 2px 0 rgba(43,42,38,.7);transition:transform .15s}
.toni-chips button:hover{transform:translateY(-2px) rotate(-1deg);background:#fff3e3}
.toni-eingabe{display:flex;gap:8px;padding:10px 12px;background:var(--t-blase)}
.toni-eingabe textarea{flex:1;resize:none;height:42px;max-height:96px;padding:9px 12px;border:2px solid var(--t-ink);border-radius:14px;font:inherit;background:#fff;color:var(--t-ink)}
.toni-eingabe textarea:focus{outline:3px solid #f0b27f;outline-offset:1px}
.toni-eingabe button{width:44px;height:44px;flex:none;border:2px solid var(--t-ink);border-radius:50%;background:var(--t-ton);color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:2px 3px 0 rgba(43,42,38,.85);transition:transform .15s}
.toni-eingabe button:hover{transform:rotate(-12deg) scale(1.06)}.toni-eingabe button:disabled{opacity:.5;cursor:wait;transform:none}
.toni-fuss{padding:0 12px 9px;font-size:.7rem;color:#7a7060;background:var(--t-blase)}.toni-fuss a{color:inherit}
/* ausgeblendet */
#toni.weg .toni-figur,#toni.weg .toni-blase,#toni.weg .toni-fenster{display:none}
.toni-zurueck{display:none;border:2px solid var(--t-ink);border-radius:999px;background:var(--t-blase);padding:6px 12px 6px 8px;font:700 .82rem system-ui,sans-serif;cursor:pointer;box-shadow:2px 3px 0 rgba(43,42,38,.8);align-items:center;gap:6px;color:var(--t-ink)}
#toni.weg .toni-zurueck{display:inline-flex;animation:toni-blase-ein .4s ease-out}
.toni-zurueck svg{width:24px;height:30px}
@media(max-width:560px){
  .toni-figur{width:74px;height:92px}
  .toni-blase{bottom:94px;max-width:200px}#toni.oben .toni-blase{top:94px}
  .toni-fenster{position:fixed;left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;width:auto;max-height:78vh}
  #toni.offen .toni-figur,#toni.offen .toni-blase{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){#toni *{animation:none!important;transition:none!important}}
@media print{#toni,.toni-oel{display:none!important}}
/* Aufmerksam machen: anklopfen, gucken, wackeln */
#toni.klopft .toni-koerper{animation:toni-klopfen .8s ease-in-out 2}
#toni.guckt .toni-koerper{animation:toni-gucken 1.6s ease-in-out}
#toni.wackelt .toni-koerper{animation:toni-wackeln .5s ease-in-out 3}
@keyframes toni-klopfen{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-9deg) translateY(-3px)}45%{transform:rotate(-4deg)}60%{transform:rotate(-9deg) translateY(-3px)}}
@keyframes toni-gucken{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-8px) rotate(-6deg)}60%{transform:translateX(6px) rotate(5deg)}}
.toni-bart{transform-box:fill-box;transform-origin:center;transition:transform .2s}
#toni.redet .toni-bart{animation:toni-bart .22s ease-in-out infinite alternate}
@keyframes toni-bart{from{transform:translateY(0)}to{transform:translateY(-1.6px) scaleX(1.04)}}


/* Zu wild gezogen: Toni wird schlecht und verliert Olivenöl (toni.js) */
#toni.uebel .toni-gruen,#toni.uebel .toni-uebel{visibility:visible}
#toni.uebel .toni-pupille,#toni.uebel .toni-lid,#toni.uebel .toni-mund-zu,#toni.uebel .toni-mund-auf{visibility:hidden}
#toni.uebel .toni-spirale{transform-box:fill-box;transform-origin:center;animation:toni-spirale 1.1s linear infinite}
#toni.uebel .toni-spirale+.toni-spirale{animation-direction:reverse}
#toni.uebel .toni-schweiss{animation:toni-schweiss 1.4s ease-in infinite}
#toni.uebel:not(.zieht) .toni-koerper{transform-origin:60px 140px;animation:toni-taumeln 1.6s ease-in-out infinite}
#toni.uebel.zieht .toni-koerper{transform:scale(1.04,.96) rotate(-14deg)}
#toni.schwindelig .toni-koerper{animation:toni-wackeln .35s ease-in-out 3}
#toni.uebel .toni-blase{background:#f4f9e8;border-color:#3f5a1d}
#toni.schreit .toni-blase{font-weight:700;animation:toni-schreien .12s linear 6}
@keyframes toni-spirale{to{transform:rotate(360deg)}}
@keyframes toni-schweiss{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}
@keyframes toni-taumeln{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg) translateY(1px)}}
@keyframes toni-schreien{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}
.toni-oel{position:fixed;inset:0;pointer-events:none;z-index:8999;overflow:hidden}
.toni-tropfen{position:absolute;left:-5px;top:-7px;width:10px;height:13px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 38% 32%,#fff6b0 0 12%,#e2c537 30%,#a8901a 70%,#7a6a0c);box-shadow:0 1px 2px rgba(60,50,0,.35);will-change:transform}
.toni-pfuetze{position:absolute;height:7px;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#fbeb8a,#d1b52c 45%,#9a840f);opacity:.92;box-shadow:0 0 3px rgba(150,130,20,.5);transition:width .25s,left .25s,opacity 1.5s;animation:toni-pfuetze-ein .3s ease-out}
.toni-pfuetze.weg{opacity:0}
@keyframes toni-pfuetze-ein{from{transform:scaleX(.2)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.toni-pfuetze{animation:none;transition:opacity 1.5s}}

/* Festkostüme (Weihnachten & Ostern, Backend → Marketing → Weihnachten & Ostern) */
.kostuem-weihnachten .toni-k-weihnachten,.kostuem-ostern .toni-k-ostern{visibility:visible}
.kostuem-weihnachten .toni-zweig,.kostuem-weihnachten .toni-dampf,.kostuem-weihnachten .toni-bart,.kostuem-ostern .toni-zweig,.kostuem-ostern .toni-dampf,.kostuem-ostern .toni-bart{visibility:hidden}
.kostuem-ostern .toni-mund-zu path+path{visibility:hidden}
.kostuem-weihnachten .toni-figur,.kostuem-ostern .toni-figur{overflow:visible}