/*
 * DAS STILBLATT DES MODULS.
 *
 * Hier stehen die Farben, die diese Anwendung von anderen unterscheidet,
 * und die Stile ihrer eigenen Ansichten. pruefe_kontrast.py misst die
 * Grundfarbe gegen Weiss und gegen den Hintergrund, hell und dunkel.
 */

:root {
  --primaer: #202A44;
  --primaer-tief: #141B2E;
  --akzent: #C98A1B;
}

/* Farben der Wortschmiede: Tinte und Glut. Dunkel: die Glut, damit sie auf dunklem Grund lesbar bleibt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-farbe="hell"]) { --primaer: #E0A33A; --primaer-tief: #F0C070; }
}
:root[data-farbe="dunkel"] { --primaer: #E0A33A; --primaer-tief: #F0C070; }

/* Ergänzungen zur Oberfläche aus Fassung 22 (von Hand, Etappe 4). Sie stehen vor dem
   erzeugten Teil und gewinnen über die höhere Spezifität. */

/* Fassung 22 gab zwei Kacheln feste helle Farben; im dunklen Erscheinungsbild stand
   dort helle Schrift auf hellem Grund (A-07: was ein Kind trifft, wird behoben). */
.ws[data-theme="dark"] .tile.weg-train { background: #3B3320; border-color: #5A4A28; }
.ws[data-theme="dark"] .tile.weg-cards { background: #2E2838; border-color: #463C55; }
@media (prefers-color-scheme: dark) {
  .ws[data-theme="auto"] .tile.weg-train { background: #3B3320; border-color: #5A4A28; }
  .ws[data-theme="auto"] .tile.weg-cards { background: #2E2838; border-color: #463C55; }
}
/* Auf dem Handy reicht die Werkstatt bis an den Rand, wie in Fassung 22; sonst
   fehlten ihr die 34 Punkte Rand des Kerns, und Titel und Kacheln brächen um. */
@media (max-width: 540px) {
  .inhalt-lernende .ws { margin-left: -1rem; margin-right: -1rem; }
}
.ws .ws-laden { color: var(--ink-soft); text-align: center; padding: 40px 0; }

/* Aufgabe melden (F-12): leise unter der Aufgabe, nie im Weg. */
.ws .ws-melden { margin: 18px 0 4px; text-align: center; }
.ws .ws-melden-knopf { font: inherit; font-size: 14px; background: none; border: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 10px 8px; min-height: 44px; }
.ws .ws-melden-frage { color: var(--ink-soft); font-size: 15px; margin-bottom: 8px; }
.ws .ws-melden-wahl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Anweisung vorlesen (Etappe 4b): klein neben der Anweisung, gross genug für Kinderfinger. */
.ws .ws-vorlesen { font: inherit; font-size: 14px; margin-left: 10px; padding: 6px 12px; min-height: 40px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; vertical-align: middle; }
.ws .ws-vorlesen:hover { border-color: var(--ink-soft); }

/* ------------------------------ Seite der Lehrperson (Etappe 5) ------------------------------ */
.ws-lp-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 1rem; }
.ws-lp-kopf h2 { margin: 0; }
.ws-lp-kopf .knopf { margin-left: auto; }
.ws-lp-wahl { display: flex; align-items: center; gap: 0.5rem; }
.ws-lp-wahl select { width: auto; }
.ws-lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-lp-meldung:focus { outline: 3px solid var(--fokus); outline-offset: 2px; }
.ws-lp-zahl { display: inline-block; margin-left: 0.4rem; min-width: 1.4rem; padding: 0 0.35rem; border-radius: 1rem; background: var(--warnung-grund); color: var(--warnung); font-size: 0.85rem; font-weight: 700; text-align: center; }
.ws-lp-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; }
.ws-lp-zahlen > div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.7rem 0.9rem; display: flex; flex-direction: column-reverse; gap: 0.15rem; }
.ws-lp-zahlen dt { color: var(--leise); font-size: 0.9rem; font-weight: 400; }
.ws-lp-zahlen dd { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-lp-balken { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.45rem; }
.ws-lp-balken li { display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(4rem, 1fr) 12rem; gap: 0.75rem; align-items: center; }
.ws-lp-balken-spur { display: block; height: 0.7rem; background: var(--flaeche-2); border-radius: 1rem; overflow: hidden; }
.ws-lp-balken-wert { display: block; height: 100%; background: var(--primaer); border-radius: 1rem; }
.ws-lp-balken-wert.warn { background: var(--akzent); }
.ws-lp-balken-zahl { color: var(--leise); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.ws-lp-bericht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; }
.ws-lp-bericht-kopf h3 { margin: 0; }
.ws-lp-bericht h4 { margin: 1.75rem 0 0.5rem; }
.ws-lp-bericht h5 { margin: 1rem 0 0.35rem; font-size: 1rem; }
.ws-lp-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ws-lp-tage { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 3px; align-items: end; height: 7rem; padding: 0.5rem; margin: 0.5rem 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); }
.ws-lp-tag { display: flex; align-items: flex-end; height: 100%; }
.ws-lp-tag-n { display: flex; align-items: flex-end; width: 100%; min-height: 2px; background: var(--flaeche-2); border-radius: 3px 3px 0 0; overflow: hidden; }
.ws-lp-tag-ok { display: block; width: 100%; background: var(--primaer); }
.ws-lp-liste { padding-left: 1.4rem; margin: 0; }
.ws-lp-lehrgang { padding-left: 1.6rem; margin: 0; columns: 2 18rem; column-gap: 2rem; }
.ws-lp-lehrgang li { break-inside: avoid; padding: 0.15rem 0; }
.ws-lp-lehrgang li.geschafft > span:first-child { font-weight: 700; }
.ws-lp-marke { margin-left: 0.5rem; padding: 0 0.4rem; border-radius: 0.3rem; background: var(--gut-grund); color: var(--gut); font-size: 0.85rem; }
.ws-lp-faehigkeiten { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.ws-lp-faehigkeiten li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; border-bottom: 1px solid var(--linie); padding: 0.25rem 0; }
.ws-lp-stufe { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--leise); font-size: 0.92rem; }
.ws-lp-punkte { display: inline-flex; gap: 3px; }
.ws-lp-punkt { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1px solid var(--primaer); }
.ws-lp-punkt.an { background: var(--primaer); }
.ws-lp-meldungsliste { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }
.ws-lp-meldung { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.8rem 1rem; }
.ws-lp-meldung p { margin: 0 0 0.4rem; }
.ws-lp-meldung-text { overflow-wrap: anywhere; }
.ws-lp-kennung { font-size: 0.85rem; color: var(--leise); overflow-wrap: anywhere; }
.ws-lp-themen { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.ws-lp-themen legend { padding: 0 0.25rem; }
.ws-lp-vorgaben label.wahl, .ws-lp-themen label.wahl { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; min-height: 2.75rem; }
/* Übernahme aus der alten Wortschmiede (Etappe 7) */
.ws-lp-uebernahme { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
/* Etappe 10 (LS-02): Auf dem Handy passt der Titel ganz in die Kopfzeile. Das Wort «Serie» ist nur
   noch für Bildschirmleser da; sichtbar bleibt die Zahl der Tage. */
@media (max-width: 460px) {
  .ws .streak > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ws-lp-start { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border: 1px solid var(--linie); border-radius: 8px; }
.ws-lp-start summary { cursor: pointer; font-weight: 600; }
.ws-lp-start ol { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.ws-lp-start li + li { margin-top: 0.5rem; }
.ws-lp-staende-teil { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.ws-lp-staende { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.ws-lp-staende li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--linie); }
.ws-lp-staende li > span:first-child { flex: 1 1 14rem; }
.ws-lp-uebernahme input[type=file] { max-width: 100%; }
.ws-lp-uebernahme-ergebnis > * + * { margin-top: 0.75rem; }
@media (max-width: 640px) {
  .ws-lp-kopf .knopf { margin-left: 0; }
  .ws-lp-balken li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .ws-lp-tage { gap: 1px; }
}
@media print {
  .ws-lp-nicht-drucken, .reiter, .ws-lp-kopf .knopf, .ws-lp-wahl, .raumwahl { display: none !important; }
  .ws-lp-tage, .ws-lp-meldung, .ws-lp-zahlen > div { break-inside: avoid; }
  /* Säulen und Stufenpunkte sind Hintergründe; ohne das druckt der Browser sie nicht. */
  .ws-lp-tage, .ws-lp-tag-n, .ws-lp-tag-ok, .ws-lp-punkt, .ws-lp-balken-wert, .ws-lp-balken-spur, .ws-lp-marke { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Etappe 17: die Leiter der Stufen unter der Stufenkarte im Fortschritt. */
.ws .rankleiter{ margin-top:10px; font-size:13px; line-height:1.5; color:var(--ink-faint); }
.ws .rankleiter b{ color:var(--ink); }

/* ===== UMZUG FASSUNG 22: ab hier erzeugt von 01_bauplan/umzug/umzug_fassung22.py, nicht von Hand ändern ===== */
  .ws{
    --paper:#F6F5F1;
    --card:#FCFBF8;
    --ink:#202A44;
    --ink-soft:#5A6478;
    --ink-faint:#8B92A3;
    --gold:#C98A1B;
    --gold-soft:#F0E2C4;
    --coral:#C4553B;
    --coral-soft:#F2DAD2;
    --sage:#3E7D6B;
    --sage-soft:#D7E7E0;
    --line:#E4E1D8;
    --line-strong:#CFCBBE;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --shadow:0 1px 2px rgba(32,42,68,.06),0 8px 24px rgba(32,42,68,.05);
  }
  .ws *{box-sizing:border-box;margin:0;padding:0}
  .ws, .ws{height:100%}
  .ws{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    display:flex;
    flex-direction:column;
    
  }
  .ws button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
  .ws input{font-family:inherit;font-size:inherit}

  .ws header{
    border-bottom:1px solid var(--line);
    background:var(--card);
    padding:14px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .ws .brand{display:flex;align-items:baseline;gap:10px}
  .ws .brand h1{
    font-family:var(--serif);
    font-size:23px;
    font-weight:600;
    letter-spacing:-.01em;
  }
  .ws .brand .tag{color:var(--ink-faint);font-size:13px}
  .ws .streak{
    display:flex;align-items:center;gap:7px;
    font-size:14px;color:var(--ink-soft);
    background:var(--gold-soft);
    padding:5px 12px;border-radius:999px;
    font-variant-numeric:tabular-nums;
  }
  .ws .streak b{color:var(--gold);font-weight:700}

  .ws .ws-haupt{
    flex:1;
    width:100%;
    max-width:680px;
    margin:0 auto;
    padding:26px 22px 40px;
    display:flex;
    flex-direction:column;
  }

  .ws .daybar{
    display:flex;align-items:center;gap:14px;
    margin-bottom:22px;
  }
  .ws .daybar .track{
    flex:1;height:8px;border-radius:999px;background:var(--line);overflow:hidden;
  }
  .ws .daybar .fill{
    height:100%;background:var(--gold);width:0%;
    transition:width .5s cubic-bezier(.2,.7,.2,1);
    border-radius:999px;
  }
  .ws .daybar .label{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}

  .ws .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:30px 30px 26px;
  }
  .ws .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:18px;
  }
  .ws .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
  .ws .eyebrow.area-laut .dot{background:var(--sage)}
  .ws .eyebrow.area-gross .dot{background:var(--gold)}
  .ws .eyebrow.area-verwechslung .dot{background:var(--coral)}
  .ws .eyebrow.area-merkwort .dot{background:var(--ink)}

  .ws .prompt{font-size:16px;color:var(--ink-soft);margin-bottom:16px}

  .ws .sentence{
    font-family:var(--serif);
    font-size:25px;
    line-height:1.55;
    color:var(--ink);
    margin:6px 0 24px;
  }
  .ws .gap{
    display:inline-block;
    min-width:74px;
    border-bottom:2px solid var(--line-strong);
    text-align:center;
    color:var(--ink-faint);
    padding:0 4px;
  }
  .ws .gap.filled{color:var(--ink);border-bottom-color:var(--gold)}

  .ws .word-display{
    font-family:var(--serif);
    font-size:44px;
    letter-spacing:.01em;
    text-align:center;
    margin:14px 0 20px;
    color:var(--ink);
  }
  .ws .word-display.masked{ color:var(--ink-faint); letter-spacing:6px; }
  .ws .word-display .hot{color:var(--gold);font-weight:600}
  .ws .syll{
    text-align:center;color:var(--ink-faint);font-size:15px;letter-spacing:.14em;margin-top:-8px;margin-bottom:18px;
  }
  .ws .merk-card{text-align:center;padding:6px 0 2px}
  .ws .syllables{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:2px 0 18px}
  .ws .syl-block{font-family:var(--serif);font-size:20px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:6px 13px}
  .ws .merk-tip{display:flex;align-items:flex-start;gap:10px;text-align:left;background:var(--gold-soft);border:1px solid #E6D4A8;border-radius:11px;padding:12px 15px;font-size:14.5px;color:var(--ink);line-height:1.5;margin-top:6px}
  .ws .merk-tip svg{width:19px;height:19px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.7;margin-top:1px}
  .ws .merk-word-inline{font-family:var(--serif);font-size:24px;text-align:center;margin:8px 0}

  .ws .options{display:flex;flex-direction:column;gap:11px;margin-top:4px}
  .ws .opt{
    border:1.5px solid var(--line-strong);
    background:var(--card);
    border-radius:11px;
    padding:15px 18px;
    text-align:left;
    font-family:var(--serif);
    font-size:20px;
    color:var(--ink);
    transition:border-color .12s,background .12s,transform .05s;
  }
  .ws .opt:hover:not(:disabled){border-color:var(--ink-soft)}
  .ws .opt:active:not(:disabled){transform:translateY(1px)}
  .ws .opt.correct{border-color:var(--sage);background:var(--sage-soft)}
  .ws .opt.wrong{border-color:var(--coral);background:var(--coral-soft)}
  .ws .opt.dim{opacity:.5}
  .ws .opt:disabled{cursor:default}

  .ws .answer-row{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
  .ws .answer-row input{
    flex:1 1 140px;
    min-width:0;
    border:1.5px solid var(--line-strong);
    border-radius:11px;
    padding:14px 16px;
    font-family:var(--serif);
    font-size:22px;
    color:var(--ink);
    background:var(--card);
    outline:none;
  }
  .ws .answer-row input:focus{border-color:var(--gold)}
  .ws .answer-row .btn{flex:0 0 auto}

  .ws .findline{font-family:var(--serif);font-size:23px;line-height:1.7;margin:8px 0 22px}
  .ws .gap{ display:inline-block; min-width:1.4em; text-align:center; color:var(--gold); font-weight:700; border-bottom:2px solid var(--gold); margin:0 2px; }
  .ws .sortgrid{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 20px; }
  .ws .sort-hinweis{ font-size:13px; color:var(--ink-soft); margin:-6px 0 12px; }
  .ws .sortword{ font-family:var(--serif); font-size:19px; padding:8px 16px; border-radius:10px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); cursor:pointer; }
  .ws .sortword.sel{ background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }
  .ws .sortword.sok{ background:var(--sage-soft); border-color:var(--sage); color:var(--sage); }
  .ws .sortword.smiss{ background:var(--sage-soft); border-color:var(--sage); color:var(--sage); text-decoration:underline; }
  .ws .sortword.swrong{ background:var(--coral-soft); border-color:var(--coral); color:var(--coral); }
  /* Fassung 22: zwei Lücken, Wortbausteine, eigener Fehler */
  .ws .dl-hints{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 14px; font-size:14px; color:var(--ink-soft); }
  .ws .dl-hint b{ color:var(--gold); margin-right:4px; }
  .ws .dl-row{ align-items:center; margin-bottom:10px; }
  .ws .dl-nr{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--gold-soft); color:var(--gold); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
  .ws .bau-zeile{ min-height:52px; display:flex; flex-wrap:wrap; gap:2px; align-items:center; padding:10px 12px; margin:6px 0 16px; border:1px dashed var(--line-strong); border-radius:12px; background:var(--card); }
  .ws .bau-stueck{ font-family:var(--serif); font-size:23px; color:var(--ink); border-bottom:2px solid var(--gold); }
  .ws .bau-leer{ font-size:14px; color:var(--ink-soft); }
  .ws .bau-teil.sel{ opacity:.45; }
  .ws .ef-falsch{ color:var(--coral); text-decoration:line-through; text-decoration-thickness:2px; }
  .ws .tok{padding:1px 3px;border-radius:5px;transition:background .1s}
  .ws .tok.click{cursor:pointer}
  .ws .tok.click:hover{background:var(--gold-soft)}
  .ws .tok.hit{background:var(--sage-soft);box-shadow:inset 0 -2px 0 var(--sage)}
  .ws .tok.miss{background:var(--coral-soft);box-shadow:inset 0 -2px 0 var(--coral)}

  .ws .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--ink);color:#fff;
    border-radius:11px;padding:14px 22px;
    font-size:16px;font-weight:600;
    transition:background .12s,transform .05s;
  }
  .ws .btn:hover{background:#2c3960}
  .ws .btn:active{transform:translateY(1px)}
  .ws .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
  .ws .btn.ghost:hover{background:var(--paper);border-color:var(--ink-soft)}
  .ws .btn.wide{width:100%}
  .ws .btn:disabled{opacity:.4;cursor:default}

  .ws .actions{display:flex;gap:10px;margin-top:22px}

  .ws .fb{
    margin-top:20px;border-radius:12px;padding:16px 18px;font-size:15.5px;line-height:1.55;
    border:1px solid var(--line);
  }
  .ws .fb.ok{background:var(--sage-soft);border-color:#BFD9CF}
  .ws .fb.no{background:var(--coral-soft);border-color:#E6C6BC}
  .ws .fb.hint{background:var(--gold-soft);border-color:#E6D4A8}
  .ws .fb .head{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
  .ws .fb .strat{margin-top:8px;color:var(--ink)}
  .ws .fb .strat b{color:var(--ink)}
  .ws .fb code{
    font-family:var(--serif);font-size:1.08em;background:rgba(32,42,68,.06);
    padding:1px 7px;border-radius:5px;
  }

  .ws .conf{margin-top:18px}
  .ws .conf p{font-size:14px;color:var(--ink-soft);margin-bottom:9px}
  .ws .conf .row{display:flex;gap:10px}
  .ws .conf button{
    flex:1;border:1.5px solid var(--line-strong);border-radius:10px;padding:11px;
    font-size:15px;color:var(--ink);background:var(--card);transition:border-color .12s,background .12s;
  }
  .ws .conf button:hover{border-color:var(--ink-soft);background:var(--paper)}

  .ws .discover{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 18px}
  .ws .discover .w{
    font-family:var(--serif);font-size:22px;text-align:center;
    background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px;
  }
  .ws .discover .w .hot{color:var(--gold);font-weight:600}
  .ws .rule-box{
    background:var(--paper);border-left:3px solid var(--gold);
    border-radius:0 10px 10px 0;padding:14px 18px;margin:4px 0 8px;
    font-size:16px;line-height:1.6;
  }
  .ws .rule-box b{color:var(--ink)}

  .ws .view-title{font-family:var(--serif);font-size:26px;font-weight:600;margin-bottom:6px}
  .ws .view-sub{color:var(--ink-soft);font-size:15px;margin-bottom:24px}

  .ws .boxes{display:flex;gap:8px;margin-bottom:26px}
  .ws .box{
    flex:1;text-align:center;background:var(--card);border:1px solid var(--line);
    border-radius:10px;padding:12px 4px;
  }
  .ws .box .n{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink)}
  .ws .box .l{font-size:11px;color:var(--ink-faint);margin-top:2px}
  .ws .box.hot{border-color:var(--gold);background:var(--gold-soft)}
  .ws .box.done{border-color:var(--sage);background:var(--sage-soft)}

  .ws .cardword{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 4px;border-bottom:1px solid var(--line);
  }
  .ws .cardword:last-child{border-bottom:none}
  .ws .cardword .w{font-family:var(--serif);font-size:19px}
  .ws .cardword .w .hot{color:var(--gold);font-weight:600}
  .ws .cardword .meta{font-size:12.5px;color:var(--ink-faint);text-align:right;white-space:nowrap}
  .ws .pill{
    display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;
    background:var(--paper);border:1px solid var(--line-strong);color:var(--ink-soft);
  }
  .ws .pill.due{background:var(--gold-soft);border-color:#E6D4A8;color:var(--gold)}

  .ws .skillrow{margin-bottom:16px}
  .ws .skillrow .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
  .ws .skillrow .name{font-size:15px;font-weight:600}
  .ws .skillrow .val{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .ws .skillrow .val.faint{color:var(--ink-faint);font-style:italic}
  .ws .meter{height:9px;border-radius:999px;background:var(--line);overflow:hidden;position:relative}
  .ws .meter .m{height:100%;border-radius:999px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
  .ws .meter .m.low{background:var(--coral)}
  .ws .meter .m.mid{background:var(--gold)}
  .ws .meter .m.high{background:var(--sage)}
  .ws .meter.unsure{opacity:.45}

  .ws .head-right{display:flex;align-items:center;gap:12px}
  .ws .help-btn, .ws .settings-btn{
    width:38px;height:38px;border-radius:50%;flex:none;
    border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .12s,color .12s,background .12s;
  }
  .ws .help-btn svg, .ws .settings-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
  .ws .help-btn:hover, .ws .settings-btn:hover{border-color:var(--ink-soft);color:var(--ink)}
  .ws .help-btn.on, .ws .settings-btn.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
  .ws .set-group{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px}
  .ws .set-group.danger{border-color:#E6C6BC}
  .ws .set-label{font-size:16px;font-weight:600;color:var(--ink)}
  /* overflow-wrap: eine lange Adresse ohne Leerzeichen wuerde die Spalte sonst
     auf schmalen Geraeten breiter machen als das Fenster. */
  .ws .set-hint{font-size:13.5px;color:var(--ink-soft);margin:3px 0 12px;line-height:1.5;overflow-wrap:anywhere}
  .ws .set-group{min-width:0}
  .ws .set-group input{max-width:100%}
  .ws .set-input{width:100%;border:1.5px solid var(--line-strong);border-radius:10px;padding:11px 14px;font-family:var(--serif);font-size:18px;color:var(--ink);background:var(--paper);outline:none}
  .ws .set-input:focus{border-color:var(--gold)}
  .ws .set-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .ws .stepper{display:flex;align-items:center;gap:16px}
  .ws .stepper button{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--paper);font-size:22px;color:var(--ink);line-height:1;display:flex;align-items:center;justify-content:center}
  .ws .stepper button:hover{border-color:var(--ink-soft)}
  .ws .stepper .val{font-family:var(--serif);font-size:24px;font-weight:600;min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
  .ws .toggle{width:52px;height:30px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;transition:background .15s;border:none;padding:0;cursor:pointer}
  .ws .toggle.on{background:var(--sage)}
  .ws .toggle .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(32,42,68,.25)}
  .ws .toggle.on .knob{left:25px}
  .ws .modebar{display:flex;gap:8px;margin-bottom:14px}
  .ws .modebtn{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .ws .modebtn:hover{border-color:var(--line-strong)}
  .ws .modebtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .ws .formbar{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
  .ws .formbtn{padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-family:var(--sans);font-size:13px;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .ws .formbtn:hover{border-color:var(--line-strong)}
  .ws .formbtn.on{background:var(--gold);color:#fff;border-color:var(--gold)}
  .ws .danger-btn{color:var(--coral);border-color:#E6C6BC}
  .ws .danger-btn:hover{border-color:var(--coral);background:var(--coral-soft)}
  .ws .danger-solid{background:var(--coral);color:#fff}
  .ws .danger-solid:hover{background:#a8452f}
  .ws .confirm p{font-size:15px;color:var(--ink);margin-bottom:10px}
  .ws .confirm-row{display:flex;gap:10px}
  /* flex-wrap und min-width: auf 320 Pixel lag der Knopf Schliessen sonst neun
     Pixel neben dem Bildschirm. Altlast seit Fassung 9. */
  .ws .help-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
  .ws .help-top > div:first-child{min-width:0;flex:1 1 180px}
  .ws .help-top .btn{flex:0 0 auto}
  .ws .help-top .view-title{margin-bottom:2px}
  .ws .help-top .view-sub{margin-bottom:0}
  .ws .help-lead{
    font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink);margin-bottom:22px;
  }
  .ws .faq{
    border:1px solid var(--line);border-radius:12px;background:var(--card);
    margin-bottom:10px;overflow:hidden;
  }
  .ws .faq summary{
    list-style:none;cursor:pointer;padding:15px 18px;
    font-size:16px;font-weight:600;color:var(--ink);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .ws .faq summary::-webkit-details-marker{display:none}
  .ws .faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink-faint);line-height:1}
  .ws .faq[open] summary::after{content:"–"}
  .ws .faq summary:hover{background:var(--paper)}
  .ws .faq-body{padding:2px 18px 18px;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
  .ws .faq-body b{color:var(--ink)}
  .ws .note{
    background:var(--paper);border:1px dashed var(--line-strong);border-radius:10px;
    padding:14px 16px;font-size:14px;color:var(--ink-soft);line-height:1.55;margin-top:8px;
  }
  .ws .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 24px}
  .ws .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
  .ws .stat .big{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1}
  .ws .stat .cap{font-size:13px;color:var(--ink-soft);margin-top:5px}

  .ws .welcome{text-align:center;padding:28px 8px 8px}
  .ws .welcome .lead{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.3;margin-bottom:14px}
  .ws .welcome p{color:var(--ink-soft);font-size:16px;max-width:440px;margin:0 auto 10px}

  /* Einstiegsseite */
  .ws .home{ padding:18px 2px 8px; max-width:540px; margin:0 auto; }
  .ws .home-hi{ font-family:var(--serif); font-size:28px; font-weight:600; margin:4px 2px 18px; }
  .ws .home-go{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left;
    background:var(--sage); color:#fff; border-radius:16px; padding:20px 22px; box-shadow:var(--shadow);
    transition:transform .05s, filter .12s; }
  .ws .home-go:hover{ filter:brightness(1.06); }
  .ws .home-go:active{ transform:translateY(1px); }
  .ws .hg-label{ font-size:23px; font-weight:700; letter-spacing:-.01em; }
  .ws .hg-sub{ font-size:14px; opacity:.92; }
  .ws .home-today{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 18px; margin-top:16px; box-shadow:var(--shadow); }
  .ws .ht-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--ink-soft); margin-bottom:9px; }
  .ws .ht-count{ font-weight:700; color:var(--ink); font-size:16px; }
  .ws .ht-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
  .ws .home-sec{ font-size:14px; color:var(--ink-soft); margin:22px 2px 11px; }
  /* minmax(0,1fr) statt 1fr: sonst ist die kleinste Breite der Kacheln ihr Inhalt,
     und die Startseite wird auf schmalen Geräten breiter als das Fenster. */
  .ws .home-tiles{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
  .ws .home{ min-width:0; }

  /* =====================================================================
     DIE WERKSTATT  (neu in Fassung 19)
     Die Anwendung heisst Wortschmiede, und bis Fassung 18 war davon nichts zu
     sehen. Die Bildwelt kommt aus der Sache selbst: die Esse, der Amboss, das
     glühende Eisen als Tagesziel, der Funke als Zeichen der Stufe.
     Zwei Lautstärken über S.settings.schau: ruhig und lebendig. Dieselben
     Bausteine, nur Grösse, Farbmenge und Textlänge unterscheiden sich. Ein
     Vierzehnjähriger und eine Drittklässlerin brauchen nicht dieselbe Fassung.
     ===================================================================== */
  .ws .werk-go{
    /* Fassung 22: rechts bleibt Platz fuer den Amboss, damit der Text nicht darunter
       durchlaeuft. Vorher stand «Dein Tagesziel hast du schon geschafft» im Umriss. */
    position:relative; overflow:hidden; width:100%; text-align:left; border:none;
    border-radius:16px; padding:20px 96px 22px 22px; cursor:pointer;
    background:linear-gradient(150deg,#33383F 0%,#22262C 62%);
    color:#F6F1E7; box-shadow:0 6px 20px rgba(34,38,44,.26);
    transition:transform .05s, filter .12s;
  }
  .ws .werk-go:hover{ filter:brightness(1.09); }
  .ws .werk-go:active{ transform:translateY(1px); }
  .ws .werk-go .amboss{ position:absolute; right:14px; top:50%; transform:translateY(-50%); opacity:.20; pointer-events:none; }
  .ws .werk-go .amboss svg{ width:74px; height:74px; fill:none; stroke:#F6F1E7; stroke-width:1.2; stroke-linejoin:round; stroke-linecap:round; }
  .ws .werk-go .wg-eyebrow{
    font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#F5B65C;
    font-weight:700; display:block; margin-bottom:5px; position:relative;
  }
  .ws .werk-go .wg-label{ display:block; font-family:var(--serif); font-size:25px; font-weight:600; letter-spacing:-.01em; position:relative; }
  .ws .werk-go .wg-sub{ display:block; font-size:14px; color:#D8D2C6; position:relative; }

  .ws .esse{ background:var(--card); border:1px solid var(--line); border-radius:15px; padding:15px 17px 16px; margin-top:16px; box-shadow:var(--shadow); }
  .ws .esse-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--ink-soft); margin-bottom:10px; }
  .ws .esse-top b{ font-weight:700; color:var(--ink); font-size:16px; font-variant-numeric:tabular-nums; }
  .ws .eisen{ position:relative; height:16px; border-radius:99px; background:var(--line); overflow:hidden; }
  .ws .eisen .glut{
    position:absolute; left:0; top:0; bottom:0; border-radius:99px;
    background:var(--gold);
    transition:width .5s cubic-bezier(.3,.9,.4,1);
  }
  .ws .eisen .funke{ position:absolute; top:50%; width:3px; height:3px; border-radius:50%; background:#F5D08C; transform:translateY(-50%); }
  .ws .esse-fuss{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
  /* Ohne die laute Stufe bleibt neben dem Symbol wenig Platz für den Kachelnamen. */
  .ws .home:not(.laut) .tile{ gap:11px; }
  .ws .home:not(.laut) .tile-ic{ width:36px; height:36px; }
  .ws .home:not(.laut) .tile-ic svg{ width:20px; height:20px; }
  .ws .stufe{ display:flex; align-items:center; gap:9px; min-width:0; }
  .ws .stufe .zeichen{
    width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center;
    background:linear-gradient(160deg,var(--gold-soft),#E3CF9F); border:1px solid #DCC79A;
  }
  .ws .stufe .zeichen svg{ width:17px; height:17px; fill:#8A5A12; stroke:none; }
  .ws .stufe .tx{ min-width:0; }
  .ws .stufe .tx b{ display:block; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
  .ws .stufe .tx span{ display:block; font-size:11px; color:var(--ink-soft); overflow-wrap:anywhere; }
  .ws .stufe-ring{ width:36px; height:36px; flex:none; }

  .ws .funkenband{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
  .ws .funkenband i{ display:block; width:10px; height:10px; border-radius:50%; background:var(--line); }
  .ws .funkenband i.voll{ background:var(--gold); }

  /* Die vier Wege bekommen eigene Farben, damit sie sich am Ort erkennen lassen
     und nicht erst am Wort. */
  .ws .tile.weg-course{ background:var(--sage-soft); border-color:#CBDDD1; }
  .ws .tile.weg-course .tile-ic{ background:var(--sage); } .ws .tile.weg-course .tile-ic svg{ stroke:#fff; }
  .ws .tile.weg-train{ background:#F4E7D2; border-color:#E4D0AC; }
  .ws .tile.weg-train .tile-ic{ background:var(--gold); } .ws .tile.weg-train .tile-ic svg{ stroke:#fff; }
  .ws .tile.weg-cards{ background:#EDE8F0; border-color:#DCD3E2; }
  .ws .tile.weg-cards .tile-ic{ background:#6B5A7D; } .ws .tile.weg-cards .tile-ic svg{ stroke:#fff; }
  .ws .tile.weg-progress{ background:var(--coral-soft); border-color:#E8CABF; }
  .ws .tile.weg-progress .tile-ic{ background:var(--coral); } .ws .tile.weg-progress .tile-ic svg{ stroke:#fff; }

  /* ---- Einstufung ---- */
  .ws .einst-bar{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 14px 12px; margin-bottom:14px; }
  .ws .einst-kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13px; color:var(--ink-soft); }
  .ws .einst-kopf b{ color:var(--ink); }
  .ws .einst-track{ height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:8px; }
  .ws .einst-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#D2521C,#F5B65C); transition:width .4s ease; }
  .ws .einst-was{ font-size:12px; color:var(--ink-soft); margin-top:6px; }

  .ws .einst-angebot{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    background:var(--gold-soft); border:1px solid #DCC79A; border-radius:14px; padding:14px 16px; margin-top:14px;
  }
  .ws .einst-angebot-tx{ min-width:0; flex:1 1 200px; }
  .ws .einst-angebot-tx b{ display:block; font-size:15px; }
  .ws .einst-angebot-tx span{ display:block; font-size:13px; color:var(--ink-soft); line-height:1.45; margin-top:3px; }
  .ws .einst-klein{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:10px; }
  .ws .einst-titel{ font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:-.01em; margin:6px 0 8px; }

  .ws .einst-liste{ display:flex; flex-direction:column; gap:6px; margin-top:18px; }
  .ws .einst-zeile{
    display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:11px;
    background:var(--card); border:1px solid var(--line); font-size:14px;
  }
  .ws .einst-zeile.offen{ border-color:#E8CABF; background:var(--coral-soft); }
  .ws .einst-nr{
    width:23px; height:23px; flex:none; border-radius:50%; display:grid; place-items:center;
    font-size:11.5px; font-weight:700; background:var(--paper); border:1px solid var(--line-strong); color:var(--ink-soft);
  }
  .ws .einst-zeile.offen .einst-nr{ background:var(--coral); border-color:var(--coral); color:#fff; }
  .ws .einst-name{ flex:1; min-width:0; overflow-wrap:break-word; }
  .ws .einst-mark{ font-size:11.5px; color:var(--ink-soft); flex:none; }

  /* ---- die laute Stufe ---- */
  .ws .laut .home-hi{ font-size:31px; }
  .ws .laut .home-hi .dazu{ display:block; font-family:var(--sans); font-size:14px; font-weight:400; color:var(--ink-soft); letter-spacing:0; margin-top:5px; }
  .ws .laut .werk-go{ padding:23px 96px 25px 22px; }
  .ws .laut .werk-go .wg-label{ font-size:29px; }
  .ws .laut .eisen{ height:20px; }
  .ws .laut .home-tiles{ gap:13px; }
  .ws .laut .tile{ flex-direction:column; align-items:flex-start; gap:10px; padding:16px 15px; }
  .ws .laut .tile-ic{ width:46px; height:46px; border-radius:13px; }
  .ws .laut .tile-ic svg{ width:26px; height:26px; }
  .ws .laut .tile-nm{ font-size:17px; }
  .ws .laut .tile-if{ font-size:12.5px; }
  .ws .laut .home-sec{ display:none; }

  @media (prefers-reduced-motion: no-preference){
  }

  .ws .tile{ display:flex; align-items:center; gap:13px; text-align:left; background:var(--card); border:1px solid var(--line);
    border-radius:14px; padding:15px 14px; box-shadow:var(--shadow); transition:transform .05s, border-color .12s; }
  .ws .tile:hover{ border-color:var(--line-strong); }
  .ws .tile:active{ transform:translateY(1px); }
  .ws .tile-ic{ flex-shrink:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--gold-soft); border-radius:11px; }
  .ws .tile-ic svg{ width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ws .tile-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .ws .tile-nm{ font-weight:600; font-size:16px; overflow-wrap:break-word; hyphens:auto; }
  .ws .tile-if{ font-size:12px; color:var(--ink-soft); line-height:1.3; overflow-wrap:break-word; hyphens:auto; }
  /* Auf 320 Pixel bleibt neben dem Symbol zu wenig Platz für den Text. Dort steht
     das Symbol darum über dem Text statt daneben. */
  @media (max-width:359px){
    .ws .tile{ flex-direction:column; align-items:flex-start; gap:9px; }
  }

  .ws nav{
    border-top:1px solid var(--line);
    background:var(--card);
    display:flex;
    justify-content:center;
    gap:4px;
    padding:8px 6px;
    position:sticky;bottom:0;
  }
  .ws nav button{
    flex:1 1 0; min-width:0;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 4px;border-radius:10px;color:var(--ink-faint);font-size:12px;font-weight:600;
    transition:color .12s,background .12s;
  }
  .ws nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
  .ws nav button.on{color:var(--ink);background:var(--paper)}

  .ws .celebrate{text-align:center;padding:36px 10px}
  .ws .celebrate .big{font-family:var(--serif);font-size:32px;font-weight:600;margin-bottom:10px}
  .ws .celebrate p{color:var(--ink-soft);margin-bottom:4px}

  @media (max-width:540px){
    .ws{font-size:16px}
    .ws .card{padding:24px 20px 22px}
    .ws .sentence{font-size:22px}
    .ws .word-display{font-size:36px}
    .ws .discover{grid-template-columns:1fr 1fr}
    .ws nav button{padding:8px 14px}
  }
  @media (prefers-reduced-motion:reduce){
    .ws *{transition:none!important;animation:none!important}
  }
  /* Gamification */
  .ws .status{ display:flex; align-items:center; gap:10px; margin:2px 0 12px; flex-wrap:wrap; }
  .ws .status .rank{ font-family:var(--serif); font-size:18px; color:var(--ink); }
  .ws .status .sparks{ color:var(--gold); font-weight:600; font-size:14px; }
  .ws .chip{ font-size:12px; padding:2px 10px; border-radius:20px; background:var(--paper); border:1px solid var(--line-strong); color:var(--ink-soft); }
  .ws .chip.streak{ color:var(--coral); border-color:var(--coral-soft); }
  .ws .rankcard{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:6px 0 16px; }
  .ws .rankcard-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
  .ws .rankcard-name{ font-family:var(--serif); font-size:24px; color:var(--ink); }
  .ws .rankcard-sub{ font-size:13px; color:var(--ink-faint); margin-top:3px; }
  .ws .rankcard-xp{ font-size:20px; color:var(--gold); font-weight:600; white-space:nowrap; }
  .ws .ranktrack{ height:8px; background:var(--paper); border-radius:6px; overflow:hidden; border:1px solid var(--line); }
  .ws .rankfill{ height:100%; background:linear-gradient(90deg, var(--gold), var(--coral)); border-radius:6px; transition:width .4s ease; }
  .ws .badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:4px; }
  .ws .badge{ display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--card); }
  .ws .badge.off{ opacity:.5; }
  .ws .badge-mark{ font-size:18px; line-height:1.2; }
  .ws .badge.on .badge-mark{ color:var(--gold); }
  .ws .badge.off .badge-mark{ color:var(--ink-faint); }
  .ws .badge-name{ font-size:14px; font-weight:600; color:var(--ink); }
  .ws .badge-desc{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .ws .reward{ margin-top:10px; padding:8px 12px; border-radius:10px; background:var(--gold-soft); border:1px solid var(--gold); color:var(--ink); font-size:13px; }
  .ws .csentence{ font-family:var(--serif); font-size:23px; line-height:2.2; color:var(--ink); text-align:center; margin:18px 0 8px; }
  .ws .csentence .ctoken{ white-space:nowrap; }
  .ws .cperiod{ margin-left:-3px; }
  .ws .cslot{ display:inline-flex; align-items:flex-end; justify-content:center; min-width:20px; height:30px; padding:0 2px; border:none; background:none; cursor:pointer; border-radius:6px; vertical-align:bottom; transition:background .12s; }
  .ws .cslot .ck{ font-family:var(--serif); font-size:25px; font-weight:700; line-height:1; color:var(--coral); min-width:6px; }
  .ws .cslot .ck:empty::before{ content:"·"; color:var(--ink-faint); font-weight:400; }
  .ws .cslot:hover:not([disabled]) .ck:empty::before{ color:var(--gold); }
  .ws .cslot.cok{ background:var(--sage-soft); }
  .ws .cslot.cok .ck{ color:var(--sage); }
  .ws .cslot.cmiss{ background:var(--coral-soft); }
  .ws .cslot.cmiss .ck{ color:var(--coral); }
  .ws .cslot.cwrong .ck{ color:var(--ink-faint); text-decoration:line-through; }
  .ws .cpalette{ display:flex; justify-content:center; gap:12px; margin:16px 0 6px; }
  .ws .cpal-btn{ font-family:var(--serif); font-size:26px; font-weight:700; min-width:52px; height:48px; border:2px solid var(--line-strong); border-radius:12px; background:var(--card); color:var(--ink-soft); cursor:pointer; transition:all .12s; line-height:1; padding:0; }
  .ws .cpal-btn.on{ border-color:var(--gold); background:var(--gold-soft); color:var(--ink); }
  .ws .cpal-btn:not(.on):not([disabled]):hover{ border-color:var(--gold-soft); color:var(--ink); }
  .ws .cpal-btn:disabled{ opacity:0.5; cursor:default; }
  .ws .skill-details{ margin:6px 0 2px; }
  .ws .skill-details summary{ font-size:13px; color:var(--gold); cursor:pointer; list-style:none; padding:4px 0; user-select:none; }
  .ws .skill-details summary::-webkit-details-marker{ display:none; }
  .ws .skill-details summary::before{ content:"＋ "; font-weight:700; }
  .ws .skill-details[open] summary::before{ content:"－ "; }
  .ws .skill-list{ padding:2px 0 4px 12px; border-left:2px solid var(--line); margin-left:2px; margin-top:2px; }
  .ws .skill-row{ padding:6px 0; }
  .ws .toggle.small{ transform:scale(0.82); transform-origin:right center; }
  .ws .topic-block.area-off .skill-details{ opacity:0.4; pointer-events:none; }
  .ws .topic-block.area-off .set-hint{ opacity:0.7; }
  .ws .selfcorrect{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-strong); }
  .ws .sc-line{ font-weight:600; color:var(--ink); margin-bottom:8px; font-size:15px; }
  .ws .sc-ok{ margin-top:8px; color:var(--sage); font-weight:600; }
  .ws .sc-again{ margin-top:8px; color:var(--coral); font-size:14px; line-height:1.5; }
  .ws .sc-gapword{ font-family:var(--serif); font-size:30px; margin:10px 0 12px; letter-spacing:.01em; }
  .ws .sc-gap{ color:var(--gold); font-weight:700; padding:0 2px; }
  .ws .dw.dmiss{ text-decoration:line-through; color:var(--ink-faint); opacity:.7; }
  .ws .dextra{ margin-top:8px; font-size:13px; color:var(--coral); }
  .ws .disc-ok{ color:var(--sage); font-weight:600; margin-top:12px; }
  .ws .disc-no{ color:var(--coral); font-weight:600; margin-top:12px; }
  .ws .stagerow{ display:flex; align-items:center; gap:8px; margin-top:6px; }
  .ws .sdots{ display:inline-flex; gap:4px; }
  .ws .sdot{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
  .ws .sdot.on{ background:var(--gold); }
  .ws .slabel{ font-size:12px; color:var(--ink-soft); }
  .ws .course{ max-width:640px; margin:0 auto; }
  .ws .course-head{ margin-bottom:20px; }
  .ws .course-kicker{ font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); margin-bottom:6px; }
  .ws .course-lead{ font-size:16px; line-height:1.5; color:var(--ink); margin:0 0 16px; }
  .ws .course-bar{ height:10px; background:var(--line); border-radius:6px; overflow:hidden; }
  .ws .course-fill{ height:100%; background:var(--gold); border-radius:6px; transition:width .45s ease; }
  .ws .course-meta{ margin-top:8px; font-size:13px; color:var(--ink-soft); }
  .ws .stations{ display:flex; flex-direction:column; gap:8px; }
  .ws .station{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
  .ws .station:hover{ border-color:var(--line-strong); }
  .ws .station .st-mark{ width:34px; height:34px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; background:var(--paper); color:var(--ink-soft); border:1px solid var(--line-strong); }
  .ws .station .st-mark svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .ws .station .st-body{ display:flex; flex-direction:column; }
  .ws .station .st-label{ display:block; font-weight:600; color:var(--ink); }
  .ws .station .st-status{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
  .ws .station.done{ border-color:var(--sage); }
  .ws .station.done .st-mark{ background:var(--sage); color:var(--card); border-color:var(--sage); }
  .ws .station.current{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
  .ws .station.current .st-mark{ background:var(--gold); color:var(--card); border-color:var(--gold); }
  .ws .st-here{ margin-left:auto; font-size:11px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
  .ws .st-go{ margin-left:auto; font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
  .ws .chip.course-chip{ cursor:pointer; border:none; font-family:inherit; font-size:inherit; background:var(--gold-soft); color:var(--gold); }
  .ws .lessonbar{ margin:6px 0 18px; }
  .ws .lessonbar .lb-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .ws .lessonbar .lb-station{ font-weight:600; color:var(--ink); }
  .ws .lessonbar .lb-ph{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--gold); font-weight:600; }
  .ws .lessonbar .lb-exit{ margin-left:auto; border:none; background:none; font:inherit; font-size:12px; color:var(--ink-faint); cursor:pointer; text-decoration:underline; }
  .ws .lessonbar .lb-dots{ display:flex; gap:6px; margin-bottom:8px; }
  .ws .lessonbar .lp-dot{ width:22px; height:4px; border-radius:2px; background:var(--line); }
  .ws .lessonbar .lp-dot.done{ background:var(--sage); }
  .ws .lessonbar .lp-dot.on{ background:var(--gold); }
  .ws .lessonbar .beadrow{ display:flex; gap:8px; margin:2px 0 6px; }
  .ws .lessonbar .bead{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); background:transparent; transition:background .15s, border-color .15s; }
  .ws .lessonbar .bead.on{ background:var(--sage); border-color:var(--sage); }
  .ws .bead.part{ background:var(--gold); opacity:.45; }
  .ws .lessonbar .lb-hint{ font-size:12px; color:var(--ink-soft); }
  .ws .lessonbar .lb-reset{ font-size:12px; color:var(--coral); font-weight:600; }
  .ws .lessonbar .track{ height:8px; background:var(--line); border-radius:5px; overflow:hidden; }
  .ws .lessonbar .fill{ height:100%; background:var(--gold); border-radius:5px; transition:width .35s; }
  .ws .lesson-bridge{ max-width:520px; margin:8vh auto 0; text-align:center; }
  .ws .lesson-bridge .lb-kicker{ font-size:13px; color:var(--ink-soft); margin-bottom:4px; }
  .ws .lesson-bridge .lb-phase{ font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--gold); font-weight:600; margin-bottom:14px; }
  .ws .lesson-bridge .lb-head{ font-family:var(--serif); font-size:24px; color:var(--ink); margin-bottom:10px; }
  .ws .lesson-bridge .lb-body{ font-size:16px; line-height:1.5; color:var(--ink-soft); margin:0 0 24px; }
  .ws .fsentence{ font-size:20px; line-height:2.1; color:var(--ink); margin:16px 0 8px; text-align:center; }
  .ws .ftoken{ font-family:var(--serif); font-size:20px; padding:2px 7px; margin:1px; border:1px solid transparent; border-radius:8px; background:none; color:var(--ink); cursor:pointer; transition:all .12s; }
  .ws .ftoken:hover:not([disabled]){ background:var(--paper); }
  .ws .ftoken.marked{ background:var(--gold-soft); border-color:var(--gold); }
  .ws .ftoken.fok{ background:var(--sage-soft); color:var(--sage); border-color:var(--sage); }
  .ws .ftoken.fmiss{ background:var(--coral-soft); color:var(--coral); border-color:var(--coral); }
  .ws .ftoken.fwrong{ color:var(--ink-faint); text-decoration:line-through; }

  /* ---------- Erscheinungsbild: dunkle Fassung ----------
     Alle Farben laufen über Variablen, darum genügt hier ein zweiter Satz Werte. */
  .ws[data-theme="dark"]{
    --paper:#1B1F2A;
    --card:#232837;
    --ink:#EDEBE4;
    --ink-soft:#B7BDCB;
    --ink-faint:#8C93A4;
    --gold:#E0A33A;
    --gold-soft:#3B3320;
    --coral:#E58A72;
    --coral-soft:#452B26;
    --sage:#6CB9A1;
    --sage-soft:#22392F;
    --line:#333A4B;
    --line-strong:#4A5266;
    --shadow:0 1px 2px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.24);
  }
  @media (prefers-color-scheme: dark){
    .ws[data-theme="auto"]{
      --paper:#1B1F2A;
      --card:#232837;
      --ink:#EDEBE4;
      --ink-soft:#B7BDCB;
      --ink-faint:#8C93A4;
      --gold:#E0A33A;
      --gold-soft:#3B3320;
      --coral:#E58A72;
      --coral-soft:#452B26;
      --sage:#6CB9A1;
      --sage-soft:#22392F;
      --line:#333A4B;
      --line-strong:#4A5266;
      --shadow:0 1px 2px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.24);
    }
  }

  /* Satzdiktat */
  .ws .sentence-input{
    width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:12px;
    background:var(--card); color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.6;
    resize:vertical; min-height:84px;
  }
  .ws .sentence-input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
  .ws .dsent{ font-family:var(--serif); font-size:19px; line-height:1.9; margin-top:6px; }
  .ws .dw{ padding:1px 4px; border-radius:6px; }
  .ws .dw.dok{ color:var(--sage); }
  .ws .dw.dno{ color:var(--coral); background:var(--coral-soft); font-weight:600; }
  .ws .dw.dmask{ color:var(--ink-faint); letter-spacing:2px; }

  /* Wörtliche Rede: Anfang und Ende markieren */
  .ws .qsentence{ font-family:var(--serif); font-size:21px; line-height:2.1; text-align:center; margin:18px 0 10px; }
  .ws .qtoken{ font-family:var(--serif); font-size:21px; padding:2px 7px; margin:1px; border:1px solid transparent; border-radius:8px; background:none; color:var(--ink); cursor:pointer; transition:all .12s; }
  .ws .qtoken:hover:not([disabled]){ background:var(--paper); }
  .ws .qtoken.qin{ background:var(--gold-soft); }
  .ws .qtoken.qstart{ background:var(--gold-soft); border-color:var(--gold); }
  .ws .qtoken.qstart::before{ content:"«"; color:var(--gold); font-weight:700; margin-right:2px; }
  .ws .qtoken.qend{ background:var(--gold-soft); border-color:var(--gold); }
  .ws .qtoken.qend::after{ content:"»"; color:var(--gold); font-weight:700; margin-left:2px; }

  /* Repetitionsmodus */
  .ws .repbar{ margin:2px 0 14px; padding:9px 12px; border-radius:10px; background:var(--gold-soft); border:1px solid var(--gold); color:var(--ink); font-size:13px; }

  /* Segmentierte Wahl (Erscheinungsbild) */
  .ws .segmented{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .ws .segbtn{ padding:8px 14px; border:1px solid var(--line-strong); border-radius:10px; background:var(--card); color:var(--ink-soft); font-size:14px; }
  .ws .segbtn.on{ border-color:var(--gold); background:var(--gold-soft); color:var(--ink); font-weight:600; }

  /* Abgleich: ein stiller Punkt im Kopf, der den Stand des letzten Abgleichs zeigt */
  .ws .sync-dot{ background:none; border:0; padding:4px; line-height:0; cursor:pointer; }
  .ws .sync-dot span{ display:block; width:9px; height:9px; border-radius:50%; background:var(--line-strong); transition:background .25s ease, opacity .25s ease; }
  .ws .sync-dot.ok span{ background:#3E8E5A; }
  .ws .sync-dot.laeuft span{ background:var(--gold); animation:syncPuls 1s ease-in-out infinite; }
  .ws .sync-dot.fehler span{ background:#B4553F; }
  @keyframes syncPuls{ 0%,100%{opacity:1} 50%{opacity:.3} }
  @media (prefers-reduced-motion:reduce){ .ws .sync-dot.laeuft span{ animation:none; opacity:.6; } }

  /* Profile */
  .ws .profile-chip{ font-size:12px; padding:3px 11px; border-radius:20px; background:var(--paper); border:1px solid var(--line-strong); color:var(--ink-soft); }
  .ws .profile-row{ gap:10px; align-items:center; padding:7px 0; }
  .ws .profile-row.active .prof-name{ font-weight:600; }
  .ws .profile-actions{ display:flex; gap:6px; align-items:center; flex-shrink:0; }
  .ws .btn.small{ padding:6px 10px; font-size:13px; }
  .ws .prof-name{ margin:0; }

  /* Verlauf */
  .ws .spark{ display:flex; align-items:flex-end; gap:3px; height:68px; padding:4px 0; }
  .ws .sparkcol{ flex:1; display:flex; align-items:flex-end; justify-content:center; }
  .ws .sparkbar{ width:100%; max-width:16px; border-radius:3px 3px 0 0; background:var(--ink-faint); }
  .ws .sparkbar.high{ background:var(--sage); }
  .ws .sparkbar.mid{ background:var(--gold); }
  .ws .sparkbar.low{ background:var(--coral); }
  .ws .sparkbar.none{ background:var(--line-strong); }
  .ws .spark-legend{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-faint); margin-top:2px; }
  .ws .errlist{ margin-top:6px; }
  .ws .errrow{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .ws .errrow b{ color:var(--coral); }

  /* Lernbericht */
  .ws .report{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; }
  .ws .rep-head{ border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px; }
  .ws .rep-title{ font-family:var(--serif); font-size:24px; }
  .ws .rep-sub{ color:var(--ink-faint); font-size:13px; margin-top:3px; }
  .ws .rep-section{ margin-top:20px; }
  .ws .rep-section h3{ font-family:var(--serif); font-size:18px; font-weight:600; margin-bottom:8px; }
  /* Die Tabellen des Lernberichts sind breiter als ein schmales Handy. Sie rollen
     darum in ihrem eigenen Rahmen, statt die ganze Seite zu verschieben. */
  .ws .rep-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ws .rep-table{ width:100%; min-width:300px; border-collapse:collapse; font-size:14px; margin-top:4px; }
  .ws .rep-table th{ text-align:left; font-weight:600; color:var(--ink-soft); border-bottom:1px solid var(--line-strong); padding:6px 4px; }
  .ws .rep-table td{ padding:6px 4px; border-bottom:1px solid var(--line); }
  .ws .rep-table .num{ text-align:right; white-space:nowrap; }
  .ws .rep-foot{ margin-top:22px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); line-height:1.6; }

  @media print{
    .ws header, .ws nav, .ws .no-print, .ws .daybar, .ws .modebar{ display:none !important; }
    .ws{ background:#fff; color:#000; font-size:11pt; }
    .ws .ws-haupt{ padding:0 !important; max-width:none !important; }
    .ws .report{ border:none; padding:0; background:#fff; }
    .ws .rep-table td, .ws .rep-table th{ border-color:#bbb; }
    .ws .sparkbar{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  }
  /* Kopfzeile auf schmalen Geräten: der Titel darf schrumpfen, die Serie bleibt lesbar */
  @media (max-width:460px){
    .ws nav button{ padding:8px 6px; font-size:11px; }
    .ws nav button svg{ width:20px; height:20px; }
    .ws header{ padding:11px 14px; gap:8px; }
    .ws .brand .tag{ display:none; }
    .ws .brand h1{ font-size:20px; }
    .ws .head-right{ gap:6px; flex:0 0 auto; }
    /* Auf sehr schmalen Geräten (320 Pixel) sprengte die Kopfzeile bisher die Breite
       und schob damit die ganze Seite auseinander. Der Titel darf jetzt schrumpfen. */
    .ws .brand{ min-width:0; }
    .ws .brand h1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ws header{ gap:6px; }
    .ws .streak{ font-size:12px; padding:4px 9px; gap:5px; }
    .ws .profile-chip{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  }
  @media (max-width:540px){
    .ws .qsentence, .ws .qtoken{ font-size:19px; }
    .ws .rep-table{ font-size:13px; }
    .ws .profile-row{ flex-wrap:wrap; }
    .ws .modebar{ flex-wrap:wrap; }
  }

  /* Trennstrich selbst setzen */
  .ws .tword{ font-family:var(--serif); font-size:34px; text-align:center; margin:20px 0 14px; line-height:1.5; }
  .ws .tchar{ letter-spacing:.5px; }
  .ws .tslot{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:34px; padding:0; border:none; background:none; cursor:pointer; vertical-align:middle; border-radius:5px; }
  /* Im Ruhezustand nur ein feiner Punkt, damit das Wort nicht schon getrennt aussieht */
  .ws .tslot .tmark{ display:block; width:4px; height:4px; border-radius:50%; background:var(--line-strong); opacity:.55; transition:all .12s; }
  .ws .tslot:hover:not([disabled]) .tmark{ width:11px; height:3px; border-radius:2px; background:var(--gold); opacity:1; }
  .ws .tslot.on .tmark{ width:13px; height:4px; border-radius:2px; background:var(--gold); opacity:1; }
  .ws .tslot.tok .tmark{ width:13px; height:4px; border-radius:2px; background:var(--sage); opacity:1; }
  .ws .tslot.tmiss .tmark{ width:13px; height:4px; border-radius:2px; background:var(--coral); opacity:1; }
  .ws .tslot.twrong .tmark{ width:13px; height:4px; border-radius:2px; background:var(--coral); opacity:.55; }
  @media (max-width:540px){ .ws .tword{ font-size:28px; } .ws .tslot{ width:14px; height:28px; } }
  .ws .strat-sentence{ font-size:22px; line-height:1.5; display:inline-block; }