/* 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);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,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;
}
.hdr {
  display:flex; align-items:center; gap:8px;
  background:none; border:0; padding:8px; margin:-8px;
  border-radius:10px; color:var(--fg); font-weight:560;
  min-height:44px;
}
.hdr:active { background:var(--sunk); }
.hdr.icon { color:var(--dim); }
#hdrDay { font-size:15px; }

/* ---------- 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; }
.veil {
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(10,12,16,.55); backdrop-filter:blur(2px);
}
.start {
  background:var(--accent); color:var(--accent-fg); border:0;
  border-radius:999px; padding:13px 26px; font-size:16px; font-weight:640;
}
.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 ---------- */
.phases {
  list-style:none; display:flex; gap:6px; margin:12px 0 0; padding:0;
  font-size:12.5px; color:var(--dim);
}
.phases li {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 4px; border-radius:9px; background:var(--sunk);
  transition:background .15s, color .15s;
}
.phases li 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);
}
.phases li.on { background:color-mix(in srgb, var(--accent) 14%, var(--surface));
                color:var(--fg); font-weight:600; }
.phases li.on span { background:var(--accent); color:var(--accent-fg); }
.phases li.rec { background:color-mix(in srgb, var(--rec) 14%, var(--surface)); }
.phases li.rec span { background:var(--rec); color:#fff; }
.phases li.off { opacity:.4; }

/* ---------- Satz ---------- */
.sentence {
  margin:16px 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:26px; }
.ctl {
  width:52px; height:52px; border-radius:50%; border:0; background:var(--sunk);
  color:var(--fg); display:grid; place-items:center;
}
.ctl:active { transform:scale(.94); }
.ctl.main {
  width:66px; height:66px; background:var(--accent); color:var(--accent-fg);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.ctl.main svg { width:28px; height:28px; }
.ctl.main.rec { background:var(--rec);
                box-shadow:0 4px 14px color-mix(in srgb, var(--rec) 35%, transparent); }
.ctl:disabled { opacity:.4; }

.minor { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.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; }

/* flex:none, sonst quetscht die scrollende Satzliste die Tagesreiter 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; }

.clips { overflow-y:auto; padding:10px var(--pad)
         calc(env(safe-area-inset-bottom) + 14px); }
.clip {
  display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  background:none; border:0; border-radius:11px; padding:9px 8px;
  color:var(--fg);
}
.clip + .clip { border-top:1px solid var(--line); }
.clip.on { background:color-mix(in srgb, var(--accent) 11%, transparent); }
.clip .thumb {
  display:block; width:64px; height:36px; flex:none; border-radius:6px;
  background:var(--sunk) no-repeat;
  box-shadow:inset 0 0 0 1px var(--line);
}
.clip .body { min-width:0; flex:1; }
.clip .t { font-size:14px; line-height:1.4; display:-webkit-box;
           -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clip .m { margin-top:3px; font-size:11.5px; color:var(--dim);
           display:flex; gap:8px; font-variant-numeric:tabular-nums; }
.clip .m .ok { color:var(--ok); }

/* ---------- 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); }
.reset { margin-top:16px; width:100%; background:var(--sunk); border:0;
         border-radius:11px; padding:13px; color:var(--dim); font-size:14px; }
.foot { color:var(--dim); font-size:11.5px; margin:14px 0 0; line-height:1.6; }

/* 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; }
}