/* zuordnen.css – Entwurf v1 (04.10.2026). Nur Klassen mit Präfix fm-zu-. Variablen überschreibbar: --fm-ok, --fm-bad, --fm-text, --fm-flaeche, --fm-linie, --fm-akzent. */
.fm-zu{
  --fm-ok:#1f9d74; --fm-ok-bg:#e3f6ee; --fm-bad:#d9503f; --fm-bad-bg:#fdeae7;
  --fm-text:#1d2940; --fm-flaeche:#ffffff; --fm-linie:#d5dbe6; --fm-akzent:#2d4a8a; --fm-akzent-bg:#e6ecf8;
  color:var(--fm-text); font-size:1.1rem; line-height:1.4; position:relative;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fm-zu{
    --fm-ok:#46c79a; --fm-ok-bg:#16372d; --fm-bad:#ff7d6b; --fm-bad-bg:#40201b;
    --fm-text:#eef1f7; --fm-flaeche:#1e2538; --fm-linie:#3a4560; --fm-akzent:#9db7f0; --fm-akzent-bg:#26324f;
  }
}
:root[data-theme="dark"] .fm-zu{
  --fm-ok:#46c79a; --fm-ok-bg:#16372d; --fm-bad:#ff7d6b; --fm-bad-bg:#40201b;
  --fm-text:#eef1f7; --fm-flaeche:#1e2538; --fm-linie:#3a4560; --fm-akzent:#9db7f0; --fm-akzent-bg:#26324f;
}
.fm-zu-titel{margin:0 0 .3em;font-size:1.25em}
.fm-zu-hinweis{margin:0 0 .8em}
.fm-zu-status{margin:.6em 0 0;font-weight:600;color:var(--fm-akzent)}
.fm-zu-zaehler,.fm-zu-ergebnis{margin:.6em 0 0;font-weight:600}

/* ----- Paare ----- */
.fm-zu-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
@media (max-width:520px){.fm-zu-raster{grid-template-columns:1fr}}
.fm-zu-spalte{display:flex;flex-direction:column;gap:10px;min-width:0}
.fm-zu-karte{-webkit-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;width:100%;min-height:52px;min-width:44px;padding:8px 14px;
  border-radius:16px;border:3px solid var(--fm-linie);background:var(--fm-flaeche);color:var(--fm-text);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fm-zu-karte:focus-visible,.fm-zu-chip:focus-visible,.fm-zu-zonenkopf:focus-visible,.fm-zu-pruefen:focus-visible,.fm-zu-poolknopf:focus-visible{outline:3px solid var(--fm-akzent);outline-offset:2px}
.fm-zu-text{overflow-wrap:anywhere}
.fm-zu-zusatz{opacity:.75;font-size:.8em}
.fm-zu-karte.is-gewaehlt{border-color:var(--fm-akzent);background:var(--fm-akzent-bg)}
.fm-zu-karte.is-geloest{border-color:var(--fm-ok);background:var(--fm-ok-bg);color:var(--fm-ok);cursor:default;opacity:1}
.fm-zu-karte.is-falsch{border-color:var(--fm-bad);background:var(--fm-bad-bg)}
.fm-zu-karte.is-schuettelt,.fm-zu-spalte.is-schuettelt{animation:fm-zu-wackeln .5s ease}

/* ----- Einordnen ----- */
.fm-zu-pool{display:flex;flex-wrap:wrap;gap:10px;min-height:60px;padding:8px;margin:0 0 14px;border:3px dashed var(--fm-linie);border-radius:18px}
.fm-zu-pool.is-ziel{border-color:var(--fm-akzent);background:var(--fm-akzent-bg)}
.fm-zu-pool.is-leer{opacity:.6}
.fm-zu-zonen{display:grid;gap:12px}
.fm-zu-zone{--fm-zu-farbe:var(--fm-akzent);--fm-zu-grund:var(--fm-flaeche);display:flex;flex-direction:column;min-width:0;border:3px solid var(--fm-zu-farbe);border-radius:18px;background:var(--fm-zu-grund);overflow:hidden}
.fm-zu-zone.is-ziel{box-shadow:0 0 0 4px var(--fm-akzent-bg),0 0 0 7px var(--fm-zu-farbe)}
.fm-zu-zonenkopf{-webkit-appearance:none;appearance:none;min-height:44px;min-width:44px;padding:6px 10px;border:0;background:transparent;color:var(--fm-zu-farbe);font:inherit;font-weight:800;text-align:left;cursor:pointer;touch-action:manipulation}
.fm-zu-zonenkoerper{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;flex:1;min-height:84px;padding:8px}
.fm-zu-chip{-webkit-appearance:none;appearance:none;min-height:46px;min-width:44px;padding:8px 16px;border-radius:999px;border:3px solid var(--fm-linie);background:var(--fm-flaeche);color:var(--fm-text);font:inherit;font-weight:700;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.fm-zu-chip.is-gewaehlt{border-color:var(--fm-akzent);background:var(--fm-akzent-bg)}
.fm-zu-chip.is-zieht{opacity:.35}
.fm-zu-chip.is-richtig{border-color:var(--fm-ok);background:var(--fm-ok-bg)}
.fm-zu-chip.is-falsch{border-color:var(--fm-bad);background:var(--fm-bad-bg)}
.fm-zu-chip.is-fehlt{border-color:var(--fm-bad);animation:fm-zu-puls 1s ease 2}
.fm-zu-chip[disabled]{cursor:default}
.fm-zu-geist{position:fixed;z-index:999;pointer-events:none;box-sizing:border-box;padding:8px 16px;border-radius:999px;border:3px solid var(--fm-akzent);background:var(--fm-flaeche);color:var(--fm-text);font-weight:700;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.fm-zu-pruefen,.fm-zu-poolknopf{-webkit-appearance:none;appearance:none;min-height:48px;min-width:44px;padding:0 24px;border-radius:24px;border:3px solid var(--fm-akzent);background:var(--fm-akzent);color:var(--fm-flaeche);font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;margin-top:12px}
.fm-zu-poolknopf{background:transparent;color:var(--fm-akzent);margin:0 0 12px}
.fm-zu-pruefen[disabled]{opacity:.5;cursor:default}
@keyframes fm-zu-wackeln{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes fm-zu-puls{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px var(--fm-bad-bg)}}
@media (prefers-reduced-motion:reduce){.fm-zu-karte.is-schuettelt,.fm-zu-spalte.is-schuettelt,.fm-zu-chip.is-fehlt{animation:none}}