/* wortschlange.css – Entwurf v1 (06.10.2026). Nur Klassen mit Präfix fm-ws-. Variablen überschreibbar: --fm-text, --fm-flaeche, --fm-linie, --fm-akzent, --fm-akzent-text, --fm-ok, --fm-bad, --fm-ws-zelle,
   --fm-ws-rand (Randbreite der Felder), Weg-Verbindungen (31.10.2026): dünne, nahtlose Brücken in der Lücke zwischen zwei Feldern des Pfads, in der Füllfarbe des jeweiligen Feldzustands (pfad, gut, schlecht), also ohne eigene Farbe; --fm-ws-strich-dicke (Standard: 2 × Randbreite).
   Länge = tatsächliche Lücke + je eine Randbreite (nur die Randlinie des Felds an der Berührungsstelle); abgeleitet aus Spurbreite (--fm-ws-zelle, mind. 44 px), gap und --fm-ws-rand, ohne eigenen Festwert. */
.fm-ws{
  --fm-text:#1d2940; --fm-flaeche:#ffffff; --fm-linie:#c9d1e0; --fm-feld:#f1f4fa; --fm-akzent:#f2c14e; --fm-akzent-rand:#b8860b; --fm-akzent-text:#2c2a38;
  --fm-ok:#1f8a4c; --fm-ok-rand:#1e7a44; --fm-ok-bg:#e3f6ee; --fm-ok-text:#0d6b50; --fm-bad:#d9503f; --fm-bad-rand:#b52828; --fm-bad-bg:#fdeae7; --fm-bad-text:#9a2a20; --fm-info-bg:#e6ecf8;
  --fm-ws-zelle:64px; --fm-ws-rand:3px; --fm-ws-radius:14px; --fm-ws-strich-dicke:calc(2 * var(--fm-ws-rand));
  color:var(--fm-text); font-size:1.05rem; line-height:1.5; box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fm-ws{
    --fm-text:#eef1f7; --fm-flaeche:#1e2538; --fm-linie:#3a4560; --fm-feld:#26324f; --fm-akzent:#e0b13c; --fm-akzent-rand:#f2d27a; --fm-akzent-text:#1b1a24;
    --fm-ok:#2f9e63; --fm-ok-rand:#8fe0bf; --fm-ok-bg:#16382f; --fm-ok-text:#8fe0bf; --fm-bad:#c24a3a; --fm-bad-rand:#ffb3a8; --fm-bad-bg:#4a2320; --fm-bad-text:#ffb3a8; --fm-info-bg:#26324f;
  }
}
:root[data-theme="dark"] .fm-ws{
  --fm-text:#eef1f7; --fm-flaeche:#1e2538; --fm-linie:#3a4560; --fm-feld:#26324f; --fm-akzent:#e0b13c; --fm-akzent-rand:#f2d27a; --fm-akzent-text:#1b1a24;
  --fm-ok:#2f9e63; --fm-ok-rand:#8fe0bf; --fm-ok-bg:#16382f; --fm-ok-text:#8fe0bf; --fm-bad:#c24a3a; --fm-bad-rand:#ffb3a8; --fm-bad-bg:#4a2320; --fm-bad-text:#ffb3a8; --fm-info-bg:#26324f;
}
.fm-ws *{box-sizing:border-box}
@media (max-width:520px){.fm-ws{--fm-ws-zelle:56px}}
.fm-ws-titel{margin:0 0 .3em;font-size:1.25em}
.fm-ws-frage{margin:0 0 .5em;font-weight:600}
.fm-ws-hinweis{margin:0 0 .6em;padding:8px 12px;border-radius:14px;background:var(--fm-info-bg)}
.fm-ws-raster{position:relative;display:grid;gap:8px;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;margin:10px auto}
.fm-ws-zelle{-webkit-appearance:none;appearance:none;width:var(--fm-ws-zelle);height:var(--fm-ws-zelle);min-width:44px;min-height:44px;padding:0;border-radius:var(--fm-ws-radius);border:var(--fm-ws-rand) solid var(--fm-linie);background:var(--fm-feld);color:var(--fm-text);
  font:inherit;font-size:1.5rem;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.fm-ws-zelle:focus-visible{outline:3px solid var(--fm-akzent-rand);outline-offset:2px}
.fm-ws-zelle:disabled{opacity:1;cursor:default}
.fm-ws-zelle.fm-ws-pfad{background:var(--fm-akzent);color:var(--fm-akzent-text);border-color:var(--fm-akzent-rand)}
.fm-ws-zelle.fm-ws-gut{background:var(--fm-ok);color:#fff;border-color:var(--fm-ok-rand)}
.fm-ws-zelle.fm-ws-schlecht{background:var(--fm-bad);color:#fff;border-color:var(--fm-bad-rand);animation:fm-ws-wackeln .4s}
/* Weg-Verbindungen: dünne Brücke als Rasterelement über zwei Spuren (Zeile/Spalte per JS), gleiche Ebene wie die Felder; Farbe je Zustand wie die Feldfüllung */
.fm-ws-strich{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;background:var(--fm-feld)}
.fm-ws-strich-w{width:calc(100% - 2 * max(var(--fm-ws-zelle), 44px) + 2 * var(--fm-ws-rand));height:var(--fm-ws-strich-dicke)}
.fm-ws-strich-s{height:calc(100% - 2 * max(var(--fm-ws-zelle), 44px) + 2 * var(--fm-ws-rand));width:var(--fm-ws-strich-dicke)}
.fm-ws-strich.fm-ws-strich-pfad{background:var(--fm-akzent)}
.fm-ws-strich.fm-ws-strich-gut{background:var(--fm-ok)}
.fm-ws-strich.fm-ws-strich-schlecht{background:var(--fm-bad)}
@keyframes fm-ws-wackeln{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.fm-ws-meldung{margin:8px 0;padding:8px 12px;border-radius:14px}
.fm-ws-meldung[hidden]{display:none}
.fm-ws-ok{background:var(--fm-ok-bg);color:var(--fm-ok-text)}
.fm-ws-bad{background:var(--fm-bad-bg);color:var(--fm-bad-text)}
.fm-ws-info{background:var(--fm-info-bg)}
.fm-ws-erkl{display:block;margin-top:4px;font-size:.95em}
.fm-ws-aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.fm-ws-neu{-webkit-appearance:none;appearance:none;min-height:44px;min-width:44px;padding:8px 18px;border-radius:999px;border:2px solid var(--fm-linie);background:var(--fm-flaeche);color:var(--fm-text);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}
.fm-ws-neu:disabled{opacity:.5;cursor:default}
.fm-ws-neu:focus-visible{outline:3px solid var(--fm-akzent-rand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fm-ws *{animation:none!important;transition:none!important}}