/* ------------------------------------------------ Wortflüssigkeit (App-Optik)
   Buchstabenfeld wie WortfluessigkeitScreen.tsx: Leiste mit vier Anordnungen
   und „Mischen", darunter die Karte mit den Buchstaben. Ohne JavaScript ist
   die Leiste ausgeblendet und das Feld eine Reihe (landing/wortfluessigkeit.js). */

/* Aufgabe frei auf dem Grund wie in der App — ohne den alten Quiz-Kasten
   (.aufgabe in stil.css: Rahmen, Fläche, rot/grün getönter Rand). Die
   Trennlinie zwischen den Aufgaben (ohne JS, Auswertung) bleibt: Sie ist spezifischer. */
.trainer .aufgabe:has(.wf) { margin: 0; border: 0; border-radius: 0; background: none; }

/* Auswertung: Nummern weiß auf Grün/Rot (sonst färbt `.r-band a:not([class])` sie dunkel). */
.trainer:has(.wf) .e-liste a { color: #fff; text-decoration: none; }

.wf { margin: 14px 0 0; }
.wf-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wf-leiste[hidden] { display: none; }
.wf-modi { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--t-flaeche2); }
.wf-modus { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--t-muted); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.wf-modus svg, .wf-mischen svg { display: block; flex: none; }
.wf-modus svg { width: 16px; height: 16px; }
.wf-modus[aria-pressed="true"] { background: var(--t-flaeche); color: var(--akzent); box-shadow: 0 1px 2px rgba(74, 60, 44, 0.08), 0 6px 14px -8px rgba(74, 60, 44, 0.3); }
.wf-modus:focus-visible, .wf-mischen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.wf-mischen { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 14px; background: var(--t-flaeche); color: var(--akzent); box-shadow: 0 1px 2px rgba(74, 60, 44, 0.05), 0 10px 26px -16px rgba(74, 60, 44, 0.18); font: 600 12.5px/1.375 "Work Sans", sans-serif; cursor: pointer; transition: transform 0.15s; }
.wf-mischen:active { transform: scale(0.98); }
.wf-mischen svg { width: 14px; height: 14px; }

.wf-feld { position: relative; display: flex; min-height: 248px; margin-top: 10px; padding: 12px; border-radius: 20px; background: var(--t-flaeche); box-shadow: 0 1px 2px rgba(74, 60, 44, 0.05), 0 10px 26px -16px rgba(74, 60, 44, 0.18); overflow: hidden; }
.wf-buchstaben { flex: 1; min-width: 0; min-height: 224px; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; white-space: nowrap; font: 700 clamp(20px, 5.4vw, 28px)/1 "Work Sans", sans-serif; text-transform: uppercase; color: var(--t-ink); user-select: none; -webkit-user-select: none; }
.wf-b { flex: none; margin: 0 0.07em; line-height: 1; }
.wf-trenner { display: none; }

/* Getrennt: Selbstlaute oben, Mitlaute unten — Reihenfolge innerhalb bleibt. */
.wf-feld[data-anordnung="getrennt"] .wf-buchstaben { flex-wrap: wrap; align-content: center; row-gap: 12px; }
.wf-feld[data-anordnung="getrennt"] .wf-b.sl { order: 1; }
.wf-feld[data-anordnung="getrennt"] .wf-trenner { display: block; order: 2; flex-basis: 100%; height: 0; }
.wf-feld[data-anordnung="getrennt"] .wf-b:not(.sl) { order: 3; }

/* Kreis und Wolke: Lage kommt aus dem Skript (left/top). */
.wf-feld[data-anordnung="kreis"] .wf-buchstaben,
.wf-feld[data-anordnung="wolke"] .wf-buchstaben { position: relative; display: block; height: 224px; }
.wf-feld[data-anordnung="kreis"] .wf-b,
.wf-feld[data-anordnung="wolke"] .wf-b { position: absolute; }
.wf-feld[data-anordnung="wolke"] .wf-b { cursor: grab; touch-action: none; transition: transform 0.12s; }
.wf-feld[data-anordnung="wolke"] .wf-b.zieht { cursor: grabbing; transition: none; }

/* Das Lösungswort: groß, gesperrt, Anfangsbuchstabe in der Akzentfarbe. */
.trainer .wf-wort { margin: 12px 0 0; font: 700 26px/1.25 "Work Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-ink); overflow-wrap: anywhere; }
.trainer .a-weg-inhalt .wf-wort { margin: 0 0 4px; }
.trainer .wf-anfang { color: var(--akzent); }
.trainer .a-weg-inhalt .wf-wort + .a-erklaerung { margin-top: 8px !important; }

@media (prefers-color-scheme: dark) {
  .wf-modus[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 14px -8px rgba(0, 0, 0, 0.7); }
  .wf-mischen, .wf-feld { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -14px rgba(0, 0, 0, 0.65); }
}