/* luecken.css – Entwurf v1 (04.10.2026). Nur Klassen mit Präfix fm-lu-. Variablen überschreibbar: --fm-ok, --fm-bad, --fm-text, --fm-flaeche, --fm-linie, --fm-akzent. */
.fm-lu{
  --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-lu{
    --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-lu{
  --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-lu-titel{margin:0 0 .3em;font-size:1.25em}
.fm-lu-hinweis{margin:0 0 .8em}
.fm-lu-feld{margin:0 0 18px}
.fm-lu-prompt{margin:0 0 8px;font-weight:600}
.fm-lu-feld>.fm-lu-hinweis{margin:0 0 8px;font-weight:400}
.fm-lu-kontext{margin:8px 0;opacity:.85}
.fm-lu-wort{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;margin:10px 0 14px;font-size:2rem;font-weight:800;letter-spacing:.04em;overflow-wrap:anywhere}
.fm-lu-luecke{display:inline-block;min-width:1.2em;margin:0 .1em;padding:0 .2em;border-bottom:4px solid var(--fm-akzent);color:var(--fm-akzent);text-align:center}
.fm-lu-kacheln{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0 14px}
.fm-lu-kachel{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:48px;padding:4px 8px;border-radius:12px;border:3px solid var(--fm-linie);background:var(--fm-flaeche);font-weight:800;font-size:1.3em}
.fm-lu-kachel.is-fest{border-color:var(--fm-akzent);background:var(--fm-akzent-bg);color:var(--fm-akzent)}
/* antippbare Kacheln (opt antippen, Variante salat) */
button.fm-lu-kachel{-webkit-appearance:none;appearance:none;margin:0;font-family:inherit;color:var(--fm-text);line-height:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
button.fm-lu-kachel.is-fest{color:var(--fm-akzent)}
button.fm-lu-kachel:focus-visible{outline:3px solid var(--fm-akzent);outline-offset:2px}
button.fm-lu-kachel.is-benutzt{opacity:.35;cursor:default}
button.fm-lu-kachel[disabled]{cursor:default}
.fm-lu-loeschen,.fm-lu-tipp{-webkit-appearance:none;appearance:none;min-height:48px;min-width:44px;padding:0 18px;border-radius:24px;border:3px solid var(--fm-linie);background:transparent;color:var(--fm-text);font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fm-lu-loeschen{border-color:var(--fm-bad);color:var(--fm-bad)}
/* ✕ = letzten Buchstaben löschen (opt loeschenEinzeln, Variante salat seit 03.11.2026): klein, Tippfläche 48 × 48 px */
.fm-lu-loeschen.is-x{width:48px;min-width:48px;padding:0;border-radius:12px;font-size:1.15rem;line-height:1}
.fm-lu-tipp{border-color:var(--fm-akzent);color:var(--fm-akzent)}
.fm-lu-loeschen:focus-visible,.fm-lu-tipp:focus-visible{outline:3px solid var(--fm-akzent);outline-offset:2px}
.fm-lu-loeschen[disabled],.fm-lu-tipp[disabled]{opacity:.5;cursor:default}
.fm-lu-feld.is-tipp.is-richtig .fm-lu-eingabe{border-color:var(--fm-akzent);background:var(--fm-akzent-bg)}
.fm-lu-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Hinweis hinter „?“ (opt hinweisKnopf, Variante salat seit 01.11.2026): kleiner runder Knopf rechts neben den Kacheln, Hinweis erscheint darunter */
.fm-lu-kopf{display:flex;align-items:flex-start;gap:10px}
.fm-lu-kopf>.fm-lu-kacheln{flex:1 1 auto;min-width:0}
.fm-lu-kopf>.fm-lu-hinweisknopf{margin-top:10px}
.fm-lu-hinweisknopf{-webkit-appearance:none;appearance:none;width:44px;height:44px;flex:none;border-radius:50%;border:3px solid var(--fm-linie);background:transparent;color:var(--fm-text);font:inherit;font-size:1.15rem;font-weight:800;line-height:1;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fm-lu-hinweisknopf[aria-expanded="true"]{border-color:var(--fm-akzent);background:var(--fm-akzent-bg);color:var(--fm-akzent)}
.fm-lu-hinweisknopf:focus-visible{outline:3px solid var(--fm-akzent);outline-offset:2px}
.fm-lu-feld>.fm-lu-hinweis.is-knopf{margin:0 0 12px}
.fm-lu-eingabe{-webkit-appearance:none;appearance:none;box-sizing:border-box;flex:1 1 180px;min-width:0;min-height:48px;padding:8px 14px;border-radius:14px;border:3px solid var(--fm-linie);background:var(--fm-flaeche);color:var(--fm-text);font:inherit;font-size:1.1em;-webkit-tap-highlight-color:transparent}
.fm-lu-eingabe.is-gross{text-transform:uppercase;letter-spacing:.08em}
.fm-lu-eingabe:focus-visible{outline:3px solid var(--fm-akzent);outline-offset:2px;border-color:var(--fm-akzent)}
.fm-lu-eingabe[readonly]{opacity:1}
.fm-lu-pruefen,.fm-lu-loesen{-webkit-appearance:none;appearance:none;min-height:48px;min-width:44px;padding:0 22px;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;-webkit-tap-highlight-color:transparent}
.fm-lu-loesen{background:transparent;color:var(--fm-akzent)}
.fm-lu-pruefen:focus-visible,.fm-lu-loesen:focus-visible{outline:3px solid var(--fm-akzent);outline-offset:2px}
.fm-lu-pruefen[disabled],.fm-lu-loesen[disabled]{opacity:.5;cursor:default}
.fm-lu-gesamt{margin-top:4px}
.fm-lu-ergebnis{margin:.6em 0 0;font-weight:700}
.fm-lu-meldung{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:8px 12px;border-radius:12px;border:2px solid var(--fm-linie);font-weight:600}
.fm-lu-meldung[hidden]{display:none}
.fm-lu-meldung.is-ok{border-color:var(--fm-ok);background:var(--fm-ok-bg)}
.fm-lu-meldung.is-fehler{border-color:var(--fm-bad);background:var(--fm-bad-bg)}
.fm-lu-meldung.is-info{border-color:var(--fm-akzent);background:var(--fm-akzent-bg)}
.fm-lu-erkl{font-weight:400}
.fm-lu-markiert mark{background:#ffe08a;color:#000;border-radius:4px;padding:0 3px}
.fm-lu-feld.is-richtig .fm-lu-eingabe{border-color:var(--fm-ok);background:var(--fm-ok-bg)}
.fm-lu-feld.is-falsch .fm-lu-eingabe{border-color:var(--fm-bad);background:var(--fm-bad-bg)}
.fm-lu-feld.is-aufgeloest .fm-lu-eingabe{border-color:var(--fm-akzent);background:var(--fm-akzent-bg)}
.fm-lu-feld.is-leer .fm-lu-eingabe{border-color:var(--fm-bad)}
.fm-lu-feld.is-falsch .fm-lu-luecke{color:var(--fm-bad);border-color:var(--fm-bad)}
.fm-lu-feld.is-richtig .fm-lu-luecke{color:var(--fm-ok);border-color:var(--fm-ok)}
@media (prefers-reduced-motion:reduce){.fm-lu *{animation:none!important;transition:none!important}}