/* Chat-Zeichen: fuenf Bewegungen (Vorschau, Michael 20.09.2026). Nur Tinte, nur Transform und
   Deckkraft. Ausgeloest per Klasse am html-Element (bot-anim.js), nie ueber :hover am
   Pseudo-Element. Ersetzt den einfachen Ablauf aus chat-glas.css (der hier ausgeschaltet wird).
     cg-willkommen  beim Oeffnen: hereinschwingen, Huepfer, Hallo-Strahlen, Wackeln   (2,0 s)
     cg-idle-a      zwischendurch: kleines Wackeln                                    (1,1 s)
     cg-idle-b      zwischendurch: zweimal huepfen, Antenne zittert                   (1,0 s)
     cg-ratlos      wenn er etwas nicht weiss: klingelt wie ein Telefon (Rezeption)   (1,8 s)
     cg-freut       bei Hover oder Fingertipp: Luftsprung und Strahlen               (1,1 s) */

/* altes Verhalten aus chat-glas.css aus */
html[data-bot] .gc-fenster.offen .gc-kopf::before,
html[data-bot] .gc-fenster.offen .gc-kopf::after,
html[data-bot] .gc-fenster.offen .gc-titel::before{animation:none}
html[data-bot] .gc-kopf::before{transform-origin:50% 90%}

@keyframes b-willkommen{
  0%{transform:translateX(-36px) rotate(-10deg);opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  12%{opacity:1}
  36%{transform:translateX(5px) rotate(4deg);animation-timing-function:ease-in-out}
  44%{transform:translateX(0) rotate(0)}
  52%{transform:translateY(-8px) scale(1.07);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  60%{transform:translateY(0) scale(1.02,.97)}
  64%{transform:scale(1)}
  71%{transform:rotate(-8deg)}
  81%{transform:rotate(6deg)}
  91%{transform:rotate(-2deg)}
  100%{transform:none;opacity:1}}
@keyframes b-spur{0%{opacity:0;transform:scaleX(.3)}14%{opacity:.85}36%{opacity:.5;transform:scaleX(1)}46%,100%{opacity:0;transform:scaleX(1)}}
@keyframes b-strahl{0%,44%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(1.06)}}

@keyframes b-idle-a{0%,100%{transform:none}25%{transform:rotate(-6deg)}55%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}}
@keyframes b-idle-a-strahl{0%,100%{opacity:0}35%,60%{opacity:.7;transform:scale(.8)}}
@keyframes b-idle-b{0%,100%{transform:none}
  22%{transform:translateY(-6px) scale(1.03,1.06)}40%{transform:translateY(0) scale(1.03,.96)}48%{transform:none}
  66%{transform:translateY(-4px) scale(1.02,1.04)}84%{transform:translateY(0)}}

/* ratlos: schuettelt sich wie ein klingelndes Telefon, dabei pulsieren die Strahlen dreimal */
@keyframes b-ratlos{0%,100%{transform:none}
  4%{transform:rotate(-11deg)}8%{transform:rotate(11deg)}12%{transform:rotate(-10deg)}16%{transform:rotate(10deg)}20%{transform:rotate(-7deg)}
  24%{transform:rotate(7deg)}28%{transform:rotate(0)}
  46%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}54%{transform:rotate(-9deg)}58%{transform:rotate(9deg)}62%{transform:rotate(-5deg)}66%{transform:rotate(4deg)}72%{transform:rotate(0)}}
@keyframes b-ratlos-strahl{0%,100%{opacity:0;transform:scale(.7)}
  4%,24%{opacity:1;transform:scale(1)}30%{opacity:0}
  46%,66%{opacity:1;transform:scale(1)}74%{opacity:0}}

/* freut sich: Luftsprung mit kleinem Nachwippen */
@keyframes b-freut{0%,100%{transform:none}
  18%{transform:translateY(2px) scale(1.06,.92)}
  38%{transform:translateY(-10px) rotate(-8deg) scale(.98,1.06)}
  58%{transform:translateY(0) rotate(4deg) scale(1.05,.95)}
  74%{transform:translateY(-3px) rotate(-3deg)}
  88%{transform:none}}
@keyframes b-freut-strahl{0%,20%{opacity:0;transform:scale(.6)}38%{opacity:1;transform:scale(1.1)}68%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(1.08)}}

@media (prefers-reduced-motion:no-preference){
  html.cg-willkommen .gc-fenster.offen .gc-kopf::before{animation:b-willkommen 2s both}
  html.cg-willkommen .gc-fenster.offen .gc-titel::before{animation:b-spur 2s both}
  html.cg-willkommen .gc-fenster.offen .gc-kopf::after{animation:b-strahl 2s both}
  html.cg-idle-a .gc-fenster.offen .gc-kopf::before{animation:b-idle-a 1.1s ease-in-out}
  html.cg-idle-a .gc-fenster.offen .gc-kopf::after{animation:b-idle-a-strahl 1.1s ease-in-out}
  html.cg-idle-b .gc-fenster.offen .gc-kopf::before{animation:b-idle-b 1s ease-in-out}
  html.cg-ratlos .gc-fenster.offen .gc-kopf::before{animation:b-ratlos 1.8s ease-in-out}
  html.cg-ratlos .gc-fenster.offen .gc-kopf::after{animation:b-ratlos-strahl 1.8s ease-in-out}
  html.cg-freut .gc-fenster.offen .gc-kopf::before{animation:b-freut 1.1s ease-in-out}
  html.cg-freut .gc-fenster.offen .gc-kopf::after{animation:b-freut-strahl 1.1s ease-in-out}
}

/* Beruehrungsflaeche ueber dem Zeichen (Hover und Fingertipp) */
html[data-bot] .gc-kopf .cg-hit{position:absolute;z-index:2;cursor:pointer;background:transparent;border:0;padding:0;
  left:calc(var(--pl) - 6px);top:calc((var(--kh) - var(--ik)) / 2 - 12px);width:calc(var(--ik) + 12px);height:calc(var(--ik) + 18px);
  -webkit-tap-highlight-color:transparent}

/* Frage-Feld: Schrift etwas groesser (Michael 20.09.2026) */
html[data-schrift="S2"][data-eingabe="E1"] .gc-feld textarea{font-size:16px;line-height:24px}
html[data-eingabe="E1"] .gc-feld textarea::placeholder{font-size:16px;letter-spacing:.1em}
@media (max-width:809px){
  html[data-schrift="S2"][data-eingabe="E1"] .gc-feld textarea{font-size:16px}   /* 16 verhindert das Zoomen am iPhone */
  html[data-eingabe="E1"] .gc-feld textarea::placeholder{font-size:14px;letter-spacing:.1em;white-space:nowrap}
}