/* Deutsch-Repeater — eine Spalte, große Ziele, sonst nichts.
   Mobil zuerst: das Layout ist für ein Telefon in der Hand gebaut und wird auf
   dem Desktop nur zentriert, nicht umgebaut. */

:root {
  --bg:#fbfbfa; --surface:#ffffff; --sunk:#f2f2ef; --line:#e4e4df;
  --fg:#15181d; --dim:#6c727d; --accent:#2f5de0; --accent-fg:#ffffff;
  --rec:#d1493c; --ok:#2f8f5b;
  --radius:14px;
  --pad:16px;
  --shadow:0 1px 2px rgba(20,22,28,.06), 0 8px 24px rgba(20,22,28,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#101215; --surface:#171a1f; --sunk:#1d2027; --line:#282c34;
    --fg:#e9ebef; --dim:#98a0ac; --accent:#7ea0ff; --accent-fg:#0d1119;
    --rec:#ef6a5c; --ok:#63c48d;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }

html, body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  /* Die CJK-Schriften stehen hinter den lateinischen: so kommen Ziffern und
     die deutschen Sätze weiter aus der Systemschrift, und nur die chinesische
     Oberfläche greift auf sie zurück. Ohne diese Namen setzt ein System ohne
     chinesisches Gebietsschema Han-Zeichen gern in japanischen Formen. */
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
       "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",
       "Source Han Sans SC",sans-serif;
  -webkit-text-size-adjust:100%;
  display:grid; grid-template-rows:auto 1fr auto;
  overscroll-behavior:none;
}
button, select, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
svg { width:22px; height:22px; fill:none; stroke:currentColor;
      stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
svg.tiny { width:14px; height:14px; }

/* ---------- Kopf ---------- */
header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(env(safe-area-inset-top) + 8px) var(--pad) 8px;
  max-width:600px; width:100%; margin:0 auto;
}
#hdrDay { font-size:15px; font-weight:560; color:var(--fg); }
/* Der Datumsknopf trägt das Häkchen nach unten: er sieht aus wie eine Auswahl,
   weil er eine ist. */
.hdr.day { background:none; border:0; color:var(--fg); padding:8px; margin:-8px; }
.hdr.day:active { background:var(--sunk); }
.hdr.day svg { width:16px; height:16px; color:var(--dim); }
/* Der Einstellungsknopf trägt seine Beschriftung mit: ein Zahnrad allein sagt
   auf einer Seite, die sonst keine Knöpfe im Kopf hat, zu wenig. */
.hdr {
  display:flex; align-items:center; gap:7px;
  background:var(--sunk); border:1px solid var(--line); color:var(--dim);
  padding:7px 13px; border-radius:999px; font-size:13.5px; font-weight:560;
  min-height:40px;
}
.hdr:active { background:var(--line); }
.hdr svg { width:17px; height:17px; }
/* Nur ein Zeichen, keine Beschriftung: dann ein Kreis und kein Kissen. Das
   Menü im Kopf der Startseite ist der einzige Knopf dieser Art — überall sonst
   trägt ein Kopfknopf sein Wort mit, weil er allein zu wenig sagt. Hier sagen
   drei Striche genug, und daneben stünde »菜单« nur als Wiederholung. */
.hdr.icon { padding:0; width:40px; justify-content:center; }
.hdr.icon svg { width:20px; height:20px; }
/* Rechts im Kopf stehen zwei: das Karaoke und die Einstellungen. Sie gehören
   zusammen, damit `space-between` sie nicht auseinanderzieht. Der Link
   dazwischen ist ein Knopf und trägt deshalb keine Unterstreichung. */
.hdrgrp { display:flex; align-items:center; gap:8px; }
a.hdr { text-decoration:none; }

/* ---------- Bühne ---------- */
main {
  max-width:600px; width:100%; margin:0 auto; padding:0 var(--pad) 10px;
  min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.stage {
  position:relative; background:#000; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9;
}
.stage video { display:block; width:100%; height:100%; object-fit:cover;
               background:#000; cursor:pointer; }
.badge {
  position:absolute; left:10px; top:10px; display:flex; align-items:center;
  gap:6px; padding:5px 11px; border-radius:999px; font-size:12.5px;
  font-weight:620; letter-spacing:.02em; color:#fff;
  background:rgba(10,12,16,.62); backdrop-filter:blur(6px);
}
.badge::before {
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
}
.badge.rec { color:#ff8b7e; }
.badge.rec::before { animation:pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.bar { position:absolute; left:0; right:0; bottom:0; height:3px;
       background:rgba(255,255,255,.18); }
.bar i { display:block; height:100%; width:0; background:var(--accent);
         transition:width .06s linear; }
.bar.rec i { background:var(--rec); }

/* ---------- Takt-Anzeige, zugleich die Steuerung ----------
   Steht im Fuß, direkt über den Blätterknöpfen: die Schritte und das Blättern
   sind dieselbe Handbewegung und gehören unter denselben Daumen. */
.phases {
  display:flex; gap:6px; margin:0 0 10px; padding:0;
  font-size:12.5px; color:var(--dim);
}
.phase {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 4px; border:0; border-radius:9px; background:var(--sunk);
  color:inherit; min-height:40px;
  transition:background .15s, color .15s;
}
.phase:active { transform:scale(.97); }
.phase span {
  width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  font-size:10.5px; font-weight:700; background:var(--line); color:var(--dim);
}
.phase.on { background:color-mix(in srgb, var(--accent) 14%, var(--surface));
            color:var(--fg); font-weight:600; }
.phase.on span { background:var(--accent); color:var(--accent-fg); }
.phase.rec { background:color-mix(in srgb, var(--rec) 14%, var(--surface));
             color:var(--fg); font-weight:600; }
.phase.rec span { background:var(--rec); color:#fff; }
.phase.off { opacity:.4; }

/* ---------- Satz ---------- */
.sentence {
  margin:14px 0 4px; font-size:20px; line-height:1.55; font-weight:450;
  letter-spacing:-.005em; text-wrap:pretty;
}
.sentence .w { border-radius:5px; padding:1px 1px; cursor:pointer;
               transition:color .1s; }
.sentence .w.done { color:var(--dim); }
.sentence .w.now { background:var(--accent); color:var(--accent-fg); }
.sentence.guide .w.now { background:color-mix(in srgb, var(--rec) 85%, transparent);
                         color:#fff; }

/* ---------- Vergleich ---------- */
.compare { margin:16px 0 0; display:grid; gap:8px; }
.wave { position:relative; background:var(--sunk); border-radius:10px;
        padding:6px 8px 4px; }
.wave canvas { display:block; width:100%; height:38px; }
.wlabel {
  display:flex; align-items:center; gap:6px; background:none; border:0;
  padding:2px 0 0; color:var(--dim); font-size:12px; font-weight:560;
}
.wlabel em { font-style:normal; font-variant-numeric:tabular-nums;
             color:var(--dim); font-weight:400; }
.wlabel:disabled { opacity:.45; }

.hint { margin:14px 0 0; padding:10px 12px; border-radius:10px;
        background:var(--sunk); color:var(--dim); font-size:13px; }

/* ---------- Fuß ---------- */
footer {
  max-width:600px; width:100%; margin:0 auto;
  padding:10px var(--pad) calc(env(safe-area-inset-bottom) + 12px);
}
.controls { display:flex; align-items:center; justify-content:center; gap:12px; }
.nav {
  flex:1; max-width:150px; min-height:48px; border:0; border-radius:12px;
  background:var(--sunk); color:var(--fg); font-size:15px; font-weight:560;
}
.nav:active { transform:scale(.97); }
.nav:disabled { opacity:.4; }

/* Beide Sinnbilder liegen in derselben Zelle des Rasters übereinander; sichtbar
   ist immer nur eins. Geschaltet wird das Attribut `hidden`, nicht die
   Eigenschaft — an einem <svg> gibt es die nicht (siehe `attr()`). */
.play {
  flex:none; width:58px; height:58px; border-radius:50%; border:0;
  background:var(--accent); color:var(--accent-fg); display:grid;
  place-items:center;
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.play:active { transform:scale(.94); }
.play svg { grid-area:1/1; width:26px; height:26px; }
.play.rec { background:var(--rec);
            box-shadow:0 4px 14px color-mix(in srgb, var(--rec) 35%, transparent); }

/* Der Satz-Schieber. Eigene Spur und eigener Griff, weil die Voreinstellung
   der Browser je nach Plattform anders hoch baut und das Fußfeld verschiebt. */
.seek {
  display:block; width:100%; margin:14px 0 0; height:22px;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.seek::-webkit-slider-runnable-track {
  height:6px; border-radius:999px; background:var(--sunk);
}
.seek::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:20px; height:20px;
  margin-top:-7px; border-radius:50%; background:var(--accent);
  border:2px solid var(--surface);
  box-shadow:0 1px 3px color-mix(in srgb, var(--fg) 30%, transparent);
}
.seek::-moz-range-track { height:6px; border-radius:999px; background:var(--sunk); }
.seek::-moz-range-thumb {
  width:18px; height:18px; border:2px solid var(--surface); border-radius:50%;
  background:var(--accent);
}
.seek:disabled { opacity:.4; }
.seek:focus-visible { outline:2px solid var(--accent); outline-offset:4px;
                      border-radius:999px; }

/* `.pill` steht hier für die Redaktionsseite, die dieselbe style.css lädt —
   in der App selbst gibt es keine mehr. */
.pill {
  border:1px solid var(--line); background:var(--surface); color:var(--dim);
  border-radius:999px; padding:8px 14px; font-size:13px; min-height:38px;
}
.pill:active { background:var(--sunk); }
.pill:disabled { opacity:.4; }

.status { margin:10px 0 0; text-align:center; color:var(--dim);
          font-size:12.5px; font-variant-numeric:tabular-nums; }

/* ---------- Blätter (Liste, Einstellungen) ---------- */
.sheet { position:fixed; inset:0; z-index:20; display:flex;
         align-items:flex-end; justify-content:center;
         background:rgba(10,12,16,.4); backdrop-filter:blur(2px); }
.sheetbox {
  background:var(--surface); width:100%; max-width:600px;
  border-radius:18px 18px 0 0; max-height:88vh; display:flex;
  flex-direction:column; box-shadow:var(--shadow);
  animation:rise .18s ease-out;
}
@keyframes rise { from { transform:translateY(14px); opacity:.6; } }
@media (min-width:640px) {
  .sheet { align-items:center; }
  .sheetbox { border-radius:18px; max-height:82vh; }
}
.sheethead {
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad) 10px; border-bottom:1px solid var(--line);
}
.sheethead h2 { margin:0; font-size:15px; font-weight:650; }
.close { background:none; border:0; color:var(--dim); font-size:17px;
         padding:6px 8px; margin:-6px -8px; border-radius:8px; }

/* Die Tagesreiter stehen nur noch auf der Redaktionsseite, die dieselbe
   style.css lädt — in der App gibt es seit dem Wegfall der Satzliste kein
   `.days` mehr. `flex:none`, sonst quetscht die scrollende Liste sie zusammen. */
.days { flex:none; display:flex; gap:6px; padding:12px var(--pad) 2px;
        overflow-x:auto; scrollbar-width:none; }
.days::-webkit-scrollbar { display:none; }
.days button {
  border:1px solid var(--line); background:var(--surface); color:var(--dim);
  border-radius:999px; padding:7px 13px; font-size:13px; white-space:nowrap;
  min-height:38px;
}
.days button.on { background:var(--accent); border-color:var(--accent);
                  color:var(--accent-fg); font-weight:600; }

/* ---------- Anmeldung ----------
   Dieselbe Spalte, dieselbe Karte, dieselben Knöpfe wie in der App: die
   Anmeldeseite ist der erste Eindruck und soll nicht aussehen wie ein anderes
   Programm. Sie lädt deshalb nur `style.css` — `edit.css` gehört der Redaktion. */
.brand { font-size:15px; font-weight:620; color:var(--fg); }
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px var(--pad); margin-top:8px;
}
.card form { display:flex; flex-direction:column; gap:6px; }
/* Die Reiter sprechen die Sprache der Takt-Anzeige im Fuß der App. */
.tabs { display:flex; gap:6px; margin-bottom:14px; }
.tab {
  flex:1; min-height:40px; border:0; border-radius:9px; background:var(--sunk);
  color:var(--dim); font-size:14px; font-weight:560;
}
.tab.on { background:color-mix(in srgb, var(--accent) 14%, var(--surface));
          color:var(--fg); font-weight:620;
          box-shadow:inset 0 0 0 1px var(--accent); }
.card label { margin-top:10px; font-size:15px; display:flex;
              align-items:baseline; gap:8px; }
.card label em { font-style:normal; font-size:12.5px; color:var(--dim); }
.card input {
  background:var(--sunk); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; min-height:46px; width:100%;
}
.card input:focus-visible { outline:2px solid var(--accent); outline-offset:-1px; }
.note { margin:0 0 4px; font-size:13px; color:var(--dim); line-height:1.5; }
/* Voll breit und in der Akzentfarbe — dieselbe Rolle wie der Hauptknopf. */
.primary {
  margin-top:18px; min-height:48px; width:100%; border:0; border-radius:12px;
  background:var(--accent); color:var(--accent-fg);
  font-size:15px; font-weight:620;
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.primary:active { transform:scale(.99); }
.primary:disabled { opacity:.55; box-shadow:none; }
.loginmsg { margin:12px 0 0; min-height:1.2em; font-size:13px; color:var(--dim);
            text-align:center; }
.loginmsg.err { color:var(--rec); }
.loginmsg.ok { color:var(--ok); }

/* ---------- Kalender ---------- */
.cal { padding:14px var(--pad) calc(env(safe-area-inset-bottom) + 18px); }
.calbar { display:flex; align-items:center; justify-content:space-between;
          gap:8px; margin-bottom:10px; }
.calhead { font-size:15px; font-weight:620; font-variant-numeric:tabular-nums; }
.calnav {
  width:38px; height:38px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--fg); font-size:18px; line-height:1;
}
.calnav:disabled { opacity:.3; }
.calgrid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.cw { text-align:center; font-size:11.5px; color:var(--dim); padding:2px 0 6px; }
/* Die Tage sind quadratisch: ein Kalender, in dem die Zellen wandern, liest
   sich nicht als Kalender. */
.cd {
  aspect-ratio:1; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--fg); font-size:14px;
  font-variant-numeric:tabular-nums; display:grid; place-items:center;
}
.cd.off { border-color:transparent; background:none; color:var(--dim);
          opacity:.35; }
.cd:not(.off) { border-color:color-mix(in srgb, var(--accent) 45%, transparent);
                font-weight:620; }
.cd.on { background:var(--accent); border-color:var(--accent);
         color:var(--accent-fg); }
.calfoot { margin:14px 0 0; font-size:12px; color:var(--dim); text-align:center; }

/* ---------- Einstellungen ---------- */
.settings { overflow-y:auto; padding:4px var(--pad)
            calc(env(safe-area-inset-bottom) + 18px); }
.row { display:flex; align-items:center; justify-content:space-between;
       gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.row > span { display:flex; flex-direction:column; gap:2px; font-size:15px; }
.row em { font-style:normal; font-size:12.5px; color:var(--dim); }
.row select { background:var(--sunk); border:1px solid var(--line);
              border-radius:9px; padding:9px 10px; min-height:40px; }
.switch { appearance:none; width:46px; height:28px; flex:none; border-radius:999px;
          background:var(--line); position:relative; transition:background .15s; }
.switch::after { content:""; position:absolute; top:3px; left:3px;
                 width:22px; height:22px; border-radius:50%; background:#fff;
                 transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.switch:checked { background:var(--accent); }
.switch:checked::after { transform:translateX(18px); }
/* Konto und Redaktion stehen in denselben Zeilen wie die Einstellungen; die
   Redaktionszeile bleibt `hidden`, solange das Konto kein `is_admin` hat. */
.row.account em, #rowEdit em { font-style:normal; }
#rowEdit { margin:0; }
#rowEdit .pill, .row.account .pill { text-decoration:none; display:inline-flex;
                                     align-items:center; }
.reset { margin-top:16px; width:100%; background:var(--sunk); border:0;
         border-radius:11px; padding:13px; color:var(--dim); font-size:14px; }
/* Der rote Zwilling: derselbe Knopf, aber für etwas, das nichts zurücknimmt
   (ein Wort aus dem Heft werfen, ein Konto löschen). Er stand einmal in
   `woerter.css` und ein zweites Mal in `konto.css` — dieselbe Regel zweimal
   läuft irgendwann auseinander. */
.reset.danger { color:var(--rec); }
.reset.danger:disabled { opacity:.45; }
.foot { color:var(--dim); font-size:11.5px; margin:14px 0 0; line-height:1.6; }

/* ---------- Startseite ----------
   Die Tür zu den Modulen. Dieselbe Spalte und dieselbe Karte wie überall sonst;
   was hier neu ist, ist nur die Kachel. Sie ist ein Link und sieht auch so aus:
   Sinnbild links, Text in der Mitte, Winkel rechts — die Form, die auf einem
   Telefon »hier geht es weiter« heißt. */
.start main { display:flex; flex-direction:column; }
.welcome { margin:10px 0 16px; color:var(--dim); font-size:14px; }
.mods { display:flex; flex-direction:column; gap:10px; }
/* Die Redaktionskacheln stehen abgesetzt darunter: sie gehören nicht zum
   Lernweg, sondern zum Betrieb. */
.mods.admin { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.mod {
  display:flex; align-items:center; gap:14px; text-decoration:none;
  color:inherit; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px var(--pad); min-height:76px;
}
.mod:active { background:var(--sunk); transform:scale(.995); }
.mod.thin { min-height:56px; padding:12px var(--pad); box-shadow:none; }
.modicon {
  flex:none; width:44px; height:44px; border-radius:12px; display:grid;
  place-items:center; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 13%, var(--surface));
}
.modicon svg { width:24px; height:24px; }
.modtext { display:flex; flex-direction:column; gap:3px; min-width:0; }
.modtext b { font-size:16px; font-weight:620; display:flex; align-items:center;
             gap:8px; }
.modtext em { font-style:normal; font-size:12.5px; color:var(--dim);
              line-height:1.5; }
/* Die Zahl steht am Titel und nicht am Rand: sie gehört zum Modul, nicht zur
   Kachel — und am Rand hinge sie in der Luft, sobald der Text zwei Zeilen hat. */
/* Stillgelegt. Grau heißt hier: keine eigene Fläche, kein Schatten, kein
   Druckgefühl — die Kachel liegt flach zwischen den anderen und hebt sich
   nicht. `cursor:default` und das fehlende `href` gehören zusammen; eine
   graue Fläche, die beim Zeigen die Hand ändert, verspricht wieder etwas. */
.mod.aus {
  background:var(--sunk); box-shadow:none; cursor:default;
  border-style:dashed;
}
.mod.aus .modicon, .mod.aus .modtext b { color:var(--dim); }
.mod.aus .modtext em { opacity:.8; }

.modbadge {
  font-style:normal; font-size:11.5px; font-weight:620; letter-spacing:.02em;
  padding:2px 8px; border-radius:999px;
  background:var(--accent); color:var(--accent-fg);
}
/* Die Zahl auf einer offenen Kachel ruft (Akzentfarbe); dieses Wort meldet
   bloß, dass es noch nichts zu rufen gibt. */
.modbadge.bald { background:var(--line); color:var(--dim); }
.modgo { margin-left:auto; flex:none; color:var(--dim); font-size:20px;
         line-height:1; padding-left:6px; }

/* Auf dem Desktop bleibt dasselbe Layout, es wird nur mittig gesetzt statt
   auseinandergezogen — sonst klaffte zwischen Wellen und Knöpfen ein Loch. */
@media (min-width:640px) and (min-height:700px) {
  body { grid-template-rows:auto auto auto; align-content:center;
         overflow-y:auto; }
  main { overflow:visible; }
  .sentence { font-size:22px; }
}

/* ---------- Menü im Blatt (Startseite) ----------
   Die Einträge sehen aus wie die Kacheln darüber, nur schmaler: es sind
   dieselben Dinge — ein Weg oder eine Handlung mit einem Namen und einer
   Zeile Erklärung. */
.menu { display:flex; flex-direction:column;
        padding:8px var(--pad) calc(env(safe-area-inset-bottom) + 16px); }
.menuitem {
  display:flex; align-items:center; gap:13px; width:100%;
  background:none; border:0; color:inherit; text-decoration:none; text-align:left;
  padding:13px 6px; border-radius:10px; min-height:56px;
  border-bottom:1px solid var(--line);
}
.menuitem:last-child { border-bottom:0; }
.menuitem:active { background:var(--sunk); }
.menuitem svg { flex:none; width:22px; height:22px; color:var(--dim); }
.menuitem > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.menuitem b { font-size:15.5px; font-weight:600; }
.menuitem em { font-style:normal; font-size:12.5px; color:var(--dim);
               overflow-wrap:anywhere; }