/* Leiste der Effekt-Werkstatt: auf jeder Effektseite unten links und auf den
   Karten der Übersicht. Weg zurück, Name, fünf Sterne. Farben wie ma-ki.io:
   Schwarz, Weiß, Goldgelb. Eckig, flach, keine Schatten außer einem
   schmalen Rand, damit sie auf hellen wie dunklen Effekten lesbar bleibt. */
.fx-leiste{
  position:fixed;left:12px;bottom:12px;z-index:2147483000;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  max-width:calc(100vw - 24px);padding:8px 14px;
  background:#111;color:#fff;border:1px solid #3a3a3a;
  font:500 14px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;
}
.fx-leiste a.fx-zurueck{color:#fff;text-decoration:none;border-bottom:2px solid #E8C547;padding:2px 0}
.fx-leiste a.fx-zurueck:hover{color:#E8C547}
.fx-leiste .fx-name{color:#CFCFCB;font-weight:400}
.fx-bewerten{display:inline-flex;gap:2px}
.fx-stern{
  appearance:none;border:0;background:none;margin:0;cursor:pointer;
  width:30px;height:30px;padding:0;font-size:20px;line-height:30px;text-align:center;
  color:#6b6b6b;transition:color .12s ease,transform .12s ease;
}
/* Beim Überfahren leuchten die Sterne bis zum Zeiger, die hinteren bleiben grau */
.fx-bewerten:hover .fx-stern{color:#E8C547}
.fx-bewerten .fx-stern:hover ~ .fx-stern{color:#6b6b6b}
.fx-stern.an{color:#E8C547}
.fx-stern:focus-visible{outline:2px solid #E8C547;outline-offset:1px}
.fx-stern:active{transform:scale(.9)}
.fx-bewerten[data-fertig] .fx-stern{cursor:default}
.fx-bewerten[data-fertig]:hover .fx-stern:not(.an){color:#6b6b6b}
.fx-danke{color:#E8C547;font-size:13px}
.fx-danke:empty{display:none}
@media (max-width:600px){
  .fx-leiste{left:8px;right:8px;bottom:8px;max-width:none;padding:6px 10px;font-size:13px}
  .fx-leiste .fx-name{display:none}
  .fx-stern{width:36px;height:36px;line-height:36px}
}
@media (prefers-reduced-motion:reduce){.fx-stern{transition:none}}
@media print{.fx-leiste{display:none}}