/* Block-Puzzle – eigene Farben (über Tokens, Hell/Dunkel) */
:root {
  --akzent: #7a5cff;
  --bp-feld: #0f1b31;
  --bp-rand: rgba(255, 255, 255, .08);
  --bp-leer: rgba(255, 255, 255, .055);
  --bp-ablage: rgba(255, 255, 255, .035);
  --bp-auswahl: rgba(122, 92, 255, .35);
  --bp-f1: #ff6b6b;
  --bp-f2: #ff9f43;
  --bp-f3: #ffd54a;
  --bp-f4: #39d98a;
  --bp-f5: #38c7e1;
  --bp-f6: #4f8cff;
  --bp-f7: #b57bff;
  --bp-text: #ffffff;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bp-feld: #d9e1f0;
    --bp-rand: rgba(20, 40, 80, .1);
    --bp-leer: rgba(20, 40, 80, .07);
    --bp-ablage: rgba(20, 40, 80, .04);
    --bp-auswahl: rgba(122, 92, 255, .25);
    --bp-text: #15223a;
  }
}
.kl-kopf-knoepfe { flex-wrap: nowrap; }
@media (max-width: 420px) { .kl-kopf .kl-knopf.klein { padding: 7px 9px; } .kl-kopf { padding: 8px 8px; } }
html, body { height: 100%; overflow: hidden; }
body { min-height: 0; height: 100%; }
.bp-leiste { padding: 6px 10px; gap: 16px; font-size: 14px; }
.bp-leiste b { font-size: 18px; display: inline-block; min-width: 2ch; transition: transform .15s; }
.bp-leiste b.hoch { transform: scale(1.25); color: var(--kl-gold); }
.bp-modus { color: var(--akzent2); }
#buehne { flex: 1; min-height: 0; position: relative; }
#feld { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; cursor: default; }
#feld.greifbar { cursor: grab; }
#feld.zieht { cursor: grabbing; }