/* PIC-Pixel-Grafiken: Größe und Pixel-Hover für Knöpfe und Kacheln.
   Alle Grafiken haben dieselbe Pixelgröße: 4px pro Feld (64er 256px, 128er 512px),
   unter 600px Breite 2px pro Feld. Kleine Plätze (Schritt-Icons, Kacheln, Karten, Icon-Reihe, Menü)
   setzen --feld: 2px (64er 128px). Nur ganzzahlige Vielfache, nie weichgezeichnet.
   Nur Deckkraft und Verschiebung werden animiert. */
:root { --feld: 4px; }
@media (max-width: 599px) { :root { --feld: 2px; } }
svg.pic-px[viewBox="0 0 64 64"] { width: calc(64 * var(--feld)); height: calc(64 * var(--feld)); }
svg.pic-px[viewBox="0 0 128 128"] { width: calc(128 * var(--feld)); height: calc(128 * var(--feld)); }
.pic-px { display: block; max-width: none; }
/* Abfolge: jedes Schritt-Motiv startet, wenn das vorige fertig ist */
.is-playing .ablauf-bild { --pic-px-start: var(--folge-start, 0ms); }

/* Pixel-Ecke: drei Pixel unten rechts, rasten beim Darüberfahren oder bei Fokus ein */
.knopf, .kachel { position: relative; }
.knopf::after, .kachel::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23394D69' d='M8 0h4v4H8zM8 8h4v4H8zM0 8h4v4H0z'/%3E%3C/svg%3E") no-repeat;
  opacity: 0; transform: translate(-3px, -3px);
  transition: opacity 160ms cubic-bezier(.23, 1, .32, 1), transform 160ms steps(3, end);
}
.knopf::after { right: -7px; bottom: -7px; }
.kachel::after { right: 16px; bottom: 16px; }
/* Rahmen der Kachel wird blau, per Deckkraft einer Überlagerung */
.kachel::before {
  content: ""; position: absolute; inset: -1px; border: 1px solid #394D69; border-radius: inherit;
  opacity: 0; transition: opacity 160ms ease; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .knopf:hover::after, .kachel:hover::after { opacity: 1; transform: translate(0, 0); }
  .kachel:hover::before { opacity: 1; }
}
.knopf:focus-visible::after, .kachel:focus-visible::after { opacity: 1; transform: translate(0, 0); }
.kachel:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .knopf::after, .kachel::after, .kachel::before { transition: none; }
}