/* Ausdauer und Abgleich in Mein Training (ausdauer.js, AUFTRAG 1.3 Abschnitt 7). Baut auf tracker.css auf
   (tl-erow, tl-kachel, tl-phasen, tl-blatt, tl-pille); Klassen wie im Prototyp tracker_live.js. */

/* ---------- Kopf: Schalter Kraft | Ausdauer ersetzt „Woche 2 · Push / Pull / Beine“ ---------- */
.tl-modus { display:inline-flex; background:rgba(255,255,255,.16); border-radius:999px; padding:3px; margin:6px 0 2px; }
.tl-modus[hidden] { display:none; }
.tl-modus button { border:0; background:none; color:#fff; font:inherit; font-size:13px; font-weight:800; padding:6px 16px; border-radius:999px; cursor:pointer; opacity:.85; }
.tl-modus button.an { background:#fff; color:var(--navy); opacity:1; }
html.hj-modus-an .tr-kopf-woche { display:none; }
html.hj-aus-an [data-hj="tr-verlauf-punkt"] { display:none !important; }

/* ---------- Seiten: bei Ausdauer stehen die Ausdauer-Tafeln statt der Kraft-Inhalte ---------- */
.tl-auspanel[hidden] { display:none; }
html.hj-aus-an [data-hj="training-body"],
html.hj-aus-an [data-hj="trainingplaene-body"],
html.hj-aus-an [data-hj="trainingverlauf-body"] { display:none; }
.tl-aus { gap:0; }

/* ---------- Einheiten, Hinweise, Knöpfe ---------- */
.tl-erow--knopf { width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); font:inherit; color:inherit; cursor:pointer; }
.tl-erow--knopf:last-child { border-bottom:0; }
.tl-aushinweis { font-size:12px; color:var(--muted); margin:10px 0 0; line-height:1.45; }
.tl-aushinweis--eng { margin:0; }
.tl-mitte { text-align:center; margin-top:16px; }
.tl-ausknopf { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 0 4px; }
.tl-ausknopf .hji { width:18px; height:18px; }
.tl-leise2 { background:var(--card); color:var(--navy); border:1.5px solid var(--line); box-shadow:none; }
.tl-leise2 .hji { --ic-acc:var(--navy); }
.tl-start { margin-left:auto; border:0; background:var(--navy); color:#fff; font:inherit; font-size:12.5px; font-weight:800; padding:7px 14px; border-radius:999px; cursor:pointer; flex:none; }
.tl-leise { background:none; color:var(--navy); border:1.5px solid var(--line); }
.tl-link { border:0; background:none; padding:0; font:inherit; font-weight:800; color:#2E7299; cursor:pointer; text-decoration:underline; }
.tl-warte { font-size:12px; font-weight:800; color:#2E7299; background:#62C3DC33; padding:3px 9px; border-radius:8px; }
.tl-breit { width:100%; margin-top:8px; }

/* ---------- Heute geplant, Schon gemacht, Krafttraining erkannt ---------- */
.tl-geplant { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.tl-geplant .tl-kachel, .tl-erkannt .tl-kachel, .tl-ziele2 .tl-kachel { width:40px; height:40px; border-radius:12px; background:color-mix(in srgb, var(--sf) 30%, var(--card, #fff)); }
.tl-geplant .tl-kachel .hji, .tl-erkannt .tl-kachel .hji, .tl-ziele2 .tl-kachel .hji { --ic-acc:var(--sf); }
.tl-geplant .tl-etitel small { display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.tl-schon { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 4px 4px; font-size:12.5px; font-weight:600; color:var(--muted); }
.tl-schon b { color:var(--navy); }
.tl-schon .tl-start { margin:0; }
.tl-erkannt { display:flex; flex-direction:column; gap:10px; margin-top:10px; border:1.5px dashed #C3B4FF; }
.tl-erkannt__knoepfe { display:flex; gap:8px; align-items:center; }

/* ---------- Plan ---------- */
.tl-ziele2 { padding:8px 16px; }
.tl-zielzeile { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.tl-zielzeile:last-of-type { border-bottom:0; }
.tl-zielhinweis { font-size:11.5px; color:var(--muted); margin:6px 0 8px; }
.tl-vbalken { height:10px; }

/* ---------- Verlauf ---------- */
.tl-vpunkte { width:84px; flex:none; margin:0; }
.tl-vspur { position:relative; display:flex; gap:2px; height:8px; border-radius:4px; background:var(--line); }
.tl-vspur span { height:100%; border-radius:4px; }
.tl-vspur i { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--navy); opacity:.5; }

/* ---------- Blatt „Ausdauer eintragen“ ---------- */
.tl-stepper { display:inline-flex; align-items:center; background:var(--tl-fl, #EEF1F6); border-radius:999px; padding:3px; margin-top:6px; }
.tl-stepper button { width:30px; height:30px; border-radius:50%; border:0; background:var(--card); color:var(--navy); font-size:17px; font-weight:800; cursor:pointer; box-shadow:0 1px 3px rgba(16,21,95,.12); }
.tl-stepper span { min-width:78px; padding:0 4px; text-align:center; font-size:14px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.tl-stufen { display:grid; gap:8px; margin-top:6px; }
.tl-stufe { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; text-align:left; border:1.5px solid var(--line); background:var(--card); border-radius:16px; padding:10px 14px; font:inherit; color:var(--navy); cursor:pointer; }
.tl-stufe b { grid-row:span 2; align-self:center; font-size:15px; min-width:56px; }
.tl-stufe span { font-size:13px; font-weight:700; }
.tl-blatt__ring .tl-stufe small { font-size:11.5px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }
.tl-stufe.an { border-color:#62C3DC; background:color-mix(in srgb, #62C3DC 22%, var(--card)); }

/* ---------- Timer im Vollbild (Verlauf des Training-Moduls) ---------- */
.tl-timer { position:fixed; inset:0; z-index:10000; background:linear-gradient(160deg,#10155F,#2E7299); color:#fff; display:flex; flex-direction:column; gap:18px;
  padding:calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)); box-sizing:border-box; }
.tl-timer__kopf { display:flex; justify-content:space-between; font-size:14px; }
.tl-timer__kopf span { opacity:.8; font-weight:700; }
.tl-timer__mitte { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.tl-timer__mitte small { font-size:22px; font-weight:800; color:var(--tf); }
.tl-timer__mitte b { font-size:88px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.tl-timer__mitte span { font-size:14px; opacity:.8; }
.tl-timer__fort { height:4px; border-radius:2px; background:rgba(255,255,255,.2); }
.tl-timer__fort span { display:block; height:100%; border-radius:2px; background:#fff; }
.tl-zone2start { margin:0; }
/* J40 (0l): beide Balken beschriftet, Hinweis im lockeren Abschnitt. */
.tl-timer__hinweis { margin:10px 0 0; font-size:15px; font-weight:700; opacity:.92; text-align:center; }
.tl-timer__balken { display:flex; flex-direction:column; gap:6px; }
.tl-timer__lb { display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; opacity:.85; }
/* B4 (0l): Zone-2-Timer mit dem Kursmotiv Ausdauer (Thumbnail-Paket, /assets/thumbs/ausdauer.jpg) unter
   einem dunklen Schleier, damit Uhr und Knoepfe lesbar bleiben. */
.tl-timer--zone2 { background:linear-gradient(160deg, rgba(16,21,95,.82), rgba(46,114,153,.62)), url('/assets/thumbs/ausdauer.jpg') center / cover no-repeat, #10155F; }
.tl-timer__knoepfe { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tl-timer__knoepfe button { border:0; border-radius:999px; padding:14px; font:inherit; font-size:15px; font-weight:800; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; }
.tl-timer__knoepfe button:last-child { background:#fff; color:#10155F; }