/* Horror-Frage (v144, v148 dezent) - Verhalten in grusel.js.
   Marcelo: "zu penetrant - soll als EE funktionieren". Jetzt eine kleine,
   schiefe Zeile neben einer Stelle der Seite, leicht flackernd wie eine
   kaputte Lampe. v158: kein Gesicht mehr dahinter - nur der Kasten.
   Bewegt werden nur transform und opacity. */
.grusel{position:fixed;left:0;top:0;z-index:35;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:7px 12px 7px;pointer-events:none;opacity:0;visibility:hidden;will-change:transform,opacity;
  font-family:'Special Elite','Courier New',ui-monospace,monospace;color:#ddd6cb;
  background:rgba(4,3,3,.82);border:1px solid rgba(150,20,26,.28);border-radius:3px;
  box-shadow:0 0 18px rgba(0,0,0,.75);
  transition:opacity .6s ease,visibility 0s .6s}
.grusel.an{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s steps(2),visibility 0s;
  animation:gAuftauchen 1.1s steps(1) both}
.grusel.weg{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s steps(4),visibility 0s .5s}
@keyframes gAuftauchen{0%{opacity:0}18%{opacity:.6}24%{opacity:0}40%{opacity:.85}48%{opacity:.25}62%,100%{opacity:1}}
.grusel .g-frage{margin:0;font-size:13px;line-height:1.1;letter-spacing:.04em;white-space:nowrap;
  text-shadow:1px 0 rgba(190,16,24,.7),-1px 0 rgba(0,170,190,.22);
  animation:gFlackern 5.3s steps(1) infinite}
.grusel .g-frage .g-zeile{display:block}
.grusel .g-frage .g-zeile span{display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0));white-space:pre}
/* Unregelmaessig wie eine sterbende Neonroehre - kein gleichmaessiges Blinken. */
@keyframes gFlackern{0%,100%{opacity:1}7%{opacity:.55}8%{opacity:1}41%{opacity:1}42%{opacity:.25}43%{opacity:.9}44%{opacity:.4}45%{opacity:1}
  77%{opacity:1}78%{opacity:.7}80%{opacity:1}}
.grusel .g-wahl{display:flex;gap:14px;padding-left:1px}
.grusel button{appearance:none;background:none;border:0;padding:2px 1px;cursor:pointer;font:inherit;font-size:12px;
  letter-spacing:.12em;color:#9c9287;text-decoration:underline;text-decoration-color:rgba(190,16,24,.65);text-underline-offset:3px;
  transition:color .2s}
.grusel button:hover,.grusel button:focus-visible{color:#fff;text-shadow:0 0 10px rgba(190,16,24,.9);outline:none}
.grusel button:focus-visible{outline:1px dashed rgba(190,16,24,.8);outline-offset:3px}
.grusel.g-zuck .g-frage{animation:gZuck .45s steps(1) both,gFlackern 5.3s steps(1) infinite}
@keyframes gZuck{0%{transform:translate(0,0)}15%{transform:translate(-4px,1px) skewX(8deg)}30%{transform:translate(3px,-2px)}
  45%{transform:translate(-2px,2px) skewX(-6deg)}60%{transform:translate(2px,0)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .grusel,.grusel .g-frage,.grusel.an{animation:none!important}
}