/* Freeletics Trainer - mobil zuerst, dunkel. Farbwelt aus der alten trainer.html. */
:root{
  --bg:#14161a; --panel:#1c1f25; --panel2:#22262e; --line:#2e333d;
  --fg:#e8eaed; --muted:#9aa3b0;
  --warm:#f0a136; --main:#4db6e2; --cool:#7ec87e; --accent:#f0a136;
  --danger:#e2685f;
  --bar:56px;
}
*{box-sizing:border-box}
/* Muss vor allen display-Regeln stehen: .overlay/.sheet setzen display und wuerden
   das hidden-Attribut sonst aushebeln (der Dialog war dadurch immer sichtbar). */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none;
       -webkit-tap-highlight-color:transparent}
/* 16px ist Pflicht: darunter zoomt iOS Safari beim Antippen ins Feld hinein. */
input,select,textarea{font:inherit; font-size:16px; color:inherit}
svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round}

/* ---------- Kopfleiste ---------- */
/* height + padding-top wuerde bei border-box den Inhalt zusammendruecken,
   sobald oben eine Safe Area dazukommt (iPhone mit Dynamic Island). */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:6px;
  min-height:var(--bar); height:auto; padding:0 6px;
  padding-top:env(safe-area-inset-top);
  background:var(--panel); border-bottom:1px solid var(--line);
}
.bar h1{flex:1; margin:0; font-size:17px; font-weight:600; letter-spacing:.2px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:10px;
  color:var(--fg); flex:none;
}
.icon:active{background:var(--panel2)}

/* ---------- Schublade ---------- */
.drawer{position:fixed; inset:0; z-index:50}
.drawer-bg{position:absolute; inset:0; background:#000a; animation:fade .15s ease}
.drawer-panel{
  position:absolute; top:0; left:0; bottom:0; width:min(280px,80vw);
  background:var(--panel); border-right:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 12px) 0 12px;
  display:flex; flex-direction:column;
  animation:slide .18s ease;
}
.drawer-panel a{padding:14px 20px; border-bottom:1px solid var(--line)}
.drawer-panel a:active{background:var(--panel2)}
.drawer-panel a.danger{color:var(--danger); border-bottom:0; margin-top:auto; border-top:1px solid var(--line)}
.who{padding:8px 20px 16px}
.who-name{font-weight:600}
.who-mail{font-size:12px; color:var(--muted); word-break:break-all}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(-100%)}}

/* ---------- Startseite: Workout-Kacheln ---------- */
main{padding:12px 12px calc(24px + env(safe-area-inset-bottom))}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.tile{
  position:relative; display:flex; flex-direction:column;
  aspect-ratio:3/4; max-height:300px; padding:12px 12px 12px 16px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line); overflow:hidden;
}
.tile:active{background:var(--panel2)}
.tile .kind{
  position:absolute; inset:0 auto 0 0; width:4px; background:var(--main);
}
.tile.warm .kind{background:var(--warm)}
.tile.cool .kind{background:var(--cool)}
.tile .big{font-size:30px; font-weight:700; color:var(--accent); letter-spacing:-.5px; line-height:1}
.tile .big small{display:block; margin-top:2px; font-size:11px; font-weight:500;
                 color:var(--muted); letter-spacing:.4px; text-transform:uppercase}
/* Bloecke fuellen die Mitte - sonst steht die Kachel innen leer */
.tile .blocks{
  flex:1; min-height:0; margin:12px 0 10px; overflow:hidden;
  display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted);
}
.tile .blocks span{display:flex; gap:6px; align-items:center}
.tile .blocks i{width:7px; height:7px; border-radius:50%; background:var(--main); flex:none}
.tile .blocks span.warmup i{background:var(--warm)}
.tile .blocks span.cooldown i{background:var(--cool)}
.tile .blocks b{
  font-weight:600; color:var(--fg); flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tile .nm{font-weight:600; font-size:16px; line-height:1.25; margin-bottom:4px}
.tile .meta{font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 10px}
.empty{padding:40px 10px; text-align:center; color:var(--muted)}

/* ---------- Verlauf ---------- */
.hlist{display:flex; flex-direction:column; gap:8px}
.hrow{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
.hrow .hd{flex:1; min-width:0}
.hrow .hn{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hrow .hm{font-size:12px; color:var(--muted)}
.hrow .ht{font-variant-numeric:tabular-nums; color:var(--accent); font-weight:600}
.hgroup{margin:18px 0 8px; font-size:12px; text-transform:uppercase;
        letter-spacing:.6px; color:var(--muted)}

/* ---------- Formulare / Login ---------- */
.auth{min-height:100%; display:grid; place-items:center; padding:24px 16px}
.auth-box{width:min(380px,100%)}
.brand{font-size:20px; font-weight:600; text-align:center; margin-bottom:22px}
.brand::first-letter{color:var(--accent)}
label{display:block; margin:14px 0 6px; font-size:13px; color:var(--muted)}
input[type=text],input[type=email],input[type=password]{
  width:100%; padding:12px 14px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); color:var(--fg);
}
input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:10px; background:var(--panel2);
  border:1px solid var(--line); white-space:nowrap;
}
.btn.block{display:flex; width:100%; margin-top:18px}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#1a1207; font-weight:600}
.btn.danger{color:var(--danger)}
.btn:active{filter:brightness(1.15)}
.links{margin-top:16px; display:flex; justify-content:space-between; font-size:13px}
.links a{color:var(--muted); text-decoration:underline}
.msg{padding:11px 14px; border-radius:10px; margin-bottom:4px; font-size:14px}
.msg.err{background:#3a1f1f; border:1px solid #5a2c2c; color:#f3b6b0}
.msg.ok{background:#1f3324; border:1px solid #2f5138; color:#a9dcb8}
.hint{font-size:12px; color:var(--muted); margin-top:10px}

/* ---------- Dialog / Toast ---------- */
.overlay{position:fixed; inset:0; z-index:60; display:grid; place-items:center;
         background:#000b; padding:20px}
.overlay .card{width:min(360px,100%); background:var(--panel);
               border:1px solid var(--line); border-radius:14px; padding:18px}
.overlay h3{margin:0 0 8px; font-size:16px}
.overlay p{margin:0 0 12px; color:var(--muted); font-size:14px}
.overlay .acts{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}
.toast{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translate(-50%,20px); z-index:70;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:10px 16px; font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ---------- Workout-Uebersicht ---------- */
main.detail{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.sum{
  display:flex; gap:8px; margin-bottom:14px;
}
.sum span{
  flex:1; text-align:center; padding:10px 4px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line);
  font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;
}
.sum b{display:block; font-size:20px; color:var(--fg); letter-spacing:-.3px; text-transform:none}
.phase{
  font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:#1a1207; background:var(--main); border-radius:5px; padding:3px 7px; flex:none;
}
.phase.warmup{background:var(--warm)}
.phase.cooldown{background:var(--cool)}
.startbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 60%, transparent);
}
.startbar .btn{margin-top:0}

/* ---------- Editor ---------- */
.ed-top{display:flex; gap:8px; align-items:center; margin-bottom:14px}
.sel{
  flex:1; padding:11px 12px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); color:var(--fg);
}
.blk{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  margin-bottom:12px; overflow:hidden;
}
.blk.target{border-color:var(--accent)}
.blk header{display:flex; align-items:center; gap:8px; padding:10px 12px;
            border-bottom:1px solid var(--line)}
.blk header .dot{width:9px; height:9px; border-radius:50%; background:var(--main); flex:none}
.blk.b-warmup header .dot{background:var(--warm)}
.blk.b-cooldown header .dot{background:var(--cool)}
.blk header .t{flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk header .meta{font-size:12px; color:var(--muted)}
.blk ul{list-style:none; margin:0; padding:0}
.blk li{display:flex; align-items:center; gap:8px; padding:9px 12px;
        border-bottom:1px solid var(--line); font-size:14px}
.blk li.hintrow{color:var(--muted); font-size:13px; justify-content:center}
.blk li .ix{width:22px; color:var(--muted); font-size:12px; flex:none;
            font-variant-numeric:tabular-nums}
.blk li .nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk li .du{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.mini{width:32px; height:32px; border-radius:8px; flex:none; color:var(--muted)}
.mini:active{background:var(--panel2)}
.addex{width:100%; padding:11px; color:var(--accent); font-weight:600; font-size:14px}
.addex:active{background:var(--panel2)}
.ed-total{margin-top:14px; text-align:center; color:var(--muted); font-size:13px}

/* Uebungsauswahl von unten */
.sheet{position:fixed; inset:0; z-index:55}
.sheet-bg{position:absolute; inset:0; background:#000a}
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0; max-height:82vh;
  display:flex; flex-direction:column;
  background:var(--panel); border-top:1px solid var(--line);
  border-radius:16px 16px 0 0; animation:up .2s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
@keyframes up{from{transform:translateY(100%)}}
.sheet-head{display:flex; gap:8px; padding:12px; border-bottom:1px solid var(--line)}
.sheet-head input{
  flex:1; padding:11px 12px; border-radius:10px;
  background:var(--bg); border:1px solid var(--line); color:var(--fg);
}
.sheet-body{overflow-y:auto; -webkit-overflow-scrolling:touch}
.librow{
  display:flex; width:100%; align-items:center; gap:10px; text-align:left;
  padding:13px 16px; border-bottom:1px solid var(--line);
}
.librow:active{background:var(--panel2)}
.librow .nm{flex:1}
.librow .du{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}

/* ---------- Player ---------- */
body.playing{overflow:hidden; background:#000}
.player{position:fixed; inset:0; display:flex; flex-direction:column; background:#000}
.ptop{
  display:flex; align-items:center; gap:8px; padding:calc(env(safe-area-inset-top) + 10px) 12px 8px;
  background:var(--panel); flex-wrap:wrap;
}
.ptop .phase{
  font-size:11px; letter-spacing:.8px; font-weight:700; color:#1a1207;
  background:var(--main); border-radius:5px; padding:3px 7px;
}
.ptop .phase.warmup{background:var(--warm)}
.ptop .phase.cooldown{background:var(--cool)}
.ptop .pname{flex:1; min-width:0; font-weight:600;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ptop .ppos{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.ptop .ptime{font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent)}
.pline{height:3px; background:var(--line)}
.pline div{height:100%; width:0; background:var(--accent); transition:width .2s linear}
.player video{flex:1; min-height:0; width:100%; object-fit:contain; background:#000}
.pfoot{
  display:flex; gap:8px; padding:10px 12px; background:var(--panel);
  border-top:1px solid var(--line);
}
.pfoot .btn{flex:1}
.pnext{
  background:var(--panel); color:var(--muted); font-size:12px;
  padding:0 12px calc(10px + env(safe-area-inset-bottom));
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- ab Tablet: Kacheln bleiben handlich ---------- */
@media (min-width:640px){
  main{max-width:720px; margin:0 auto}
  .grid{grid-template-columns:repeat(3,1fr)}
}