/* Tracker-Schnittstelle (Whoop), Reiter HealthHub › Tracker und Kopf-Ringe (tracker.js).
   Aussehen aus Fabios Prototyp tracker_live.js (Bauauftrag Fassung 1.1, Abschnitt 7), Karten, Schrift
   und Icons aus dem Redesign. Farben der Werte, Phasen und Pulszonen wie im Bauauftrag. Flaechen über
   --tl-fl, damit der Dunkelmodus lesbar bleibt. */
.tl, .tl-blatt { --tl-fl:#EEF1F6; --tl-fl2:#F2F4F7; }
html[data-theme="dark"] .tl, html[data-theme="dark"] .tl-blatt { --tl-fl:var(--card2); --tl-fl2:var(--card2); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .tl, html:not([data-theme="light"]) .tl-blatt { --tl-fl:var(--card2); --tl-fl2:var(--card2); }
}

/* ---------- Kopf: Ringe und Regler ---------- */
.hj-kopf--hub .hj-kopf__inhalt { position:relative; }
.hj-kopf--hub .tl-ring .v1-ring__val { font-size:26px; line-height:1.05; }
.hj-kopf--hub .tl-ring .v1-ring__unit { font-size:11.5px; }
.tl-zahnrad { position:absolute; top:4px; right:0; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.16);
  color:#fff; display:grid; place-items:center; cursor:pointer; z-index:3; }
.tl-zahnrad[hidden] { display:none; }
.tl-zahnrad .hji { width:20px; height:20px; --ic-acc:#fff; }
[data-hj="hub-ringe-tracker"][hidden], [data-hj="hub-ringe-standard"][hidden], [data-hj="hub-tracker-live"][hidden] { display:none; }

/* ---------- Blatt (Ring-Auswahl, Einwilligung) ---------- */
.tl-blatt { position:fixed; inset:0; z-index:9999; background:rgba(11,14,38,.45); display:flex; align-items:flex-end; justify-content:center; }
.tl-blatt__karte { width:100%; max-width:520px; background:var(--card); border-radius:28px 28px 0 0; padding:12px 20px calc(20px + env(safe-area-inset-bottom));
  box-sizing:border-box; max-height:85dvh; overflow:auto; display:flex; flex-direction:column; gap:0; }
.tl-blatt__griff { width:40px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 14px; flex:none; }
.tl-blatt__titel { display:block; font-size:19px; font-weight:800; color:var(--navy); }
.tl-blatt__text { font-size:13px; color:var(--muted); margin:4px 0 14px; line-height:1.45; }
.tl-blatt__text a { color:var(--teal); font-weight:700; }
.tl-einw { color:var(--ink); font-size:14px; }
.tl-blatt__ring { margin-bottom:14px; }
.tl-blatt__ring small { font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.tl-wahl { border:1.5px solid var(--line); background:var(--card); color:var(--navy); font:inherit; font-size:13px; font-weight:700; padding:7px 12px;
  border-radius:999px; cursor:pointer; min-height:36px; }
.tl-wahl.an { background:color-mix(in srgb, var(--mf) 40%, var(--card)); border-color:var(--mf); }
.tl-abbrechen { margin-top:8px; }

/* ---------- gemeinsame Teile ---------- */
.tl { display:flex; flex-direction:column; gap:12px; }
.tl .card { margin:0; }
.tl-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tl-kopf { display:flex; align-items:center; gap:12px; }
.tl-kopf > div { flex:1; min-width:0; }
.tl-kopf small { display:block; color:var(--muted); font-size:12px; font-weight:600; }
.tl-neu { flex:none; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:var(--card); color:var(--navy); font-size:18px;
  line-height:1; cursor:pointer; display:grid; place-items:center; }
.tl-neu.dreht { animation:tl-dreh 1s linear infinite; }
@keyframes tl-dreh { to { transform:rotate(360deg); } }
.tl-trennen { border:0; background:none; padding:0; font:inherit; font-size:12px; font-weight:700; color:var(--muted); text-decoration:underline; cursor:pointer; }
.tl-verbinden { margin-top:12px; }
.tl-meldung { font-size:12.5px; color:var(--muted); margin:0 2px; }
.tl-titelzeile { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 4px -2px; }
.tl-titelzeile .sec-title { margin:0 auto 0 0; color:var(--muted); letter-spacing:.06em; }
.tl-meta { font-size:12px; font-weight:800; color:var(--muted); }
.tl-schalter { display:flex; background:var(--tint); border-radius:999px; padding:3px; flex:none; }
.tl-schalter button { border:0; background:none; font:inherit; font-size:11px; font-weight:800; color:var(--muted); padding:5px 9px; border-radius:999px; cursor:pointer; min-height:32px; }
.tl-schalter button.an { background:var(--card); color:var(--navy); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.tl-zeile { display:flex; align-items:center; gap:14px; }
.tl-kachel { flex:none; width:44px; height:44px; border-radius:14px; background:var(--tl-fl); display:grid; place-items:center; color:var(--navy); }
.tl-kachel .hji { width:22px; height:22px; }
.tl-etitel { flex:1; min-width:0; }
.tl-etitel b { display:block; font-size:15px; color:var(--navy); }
.tl-etitel small { font-size:12px; font-weight:600; color:var(--muted); }
.tl-edauer { text-align:right; }
.tl-edauer b { display:block; font-size:26px; font-weight:800; color:var(--navy); line-height:1; }
.tl-edauer small { font-size:11px; font-weight:800; color:var(--muted); }
.tl-phasen { display:flex; height:14px; border-radius:999px; overflow:hidden; gap:2px; }
.tl-phasen span { min-width:2px; }
.tl-legende { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; font-weight:600; color:var(--muted); }
.tl-legende b { color:var(--navy); }
.tl-legende i, .tl-rlegende i, .tl-bzahlen i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:0; }
.tl-szchips { display:flex; flex-wrap:wrap; gap:8px; }
.tl-szchips span { font-size:12px; font-weight:700; color:var(--muted); background:var(--tl-fl); padding:6px 11px; border-radius:999px; }
.tl-szchips b { color:var(--navy); font-weight:800; }

/* ---------- Schlafenszeiten ---------- */
.tl-heute { display:flex; flex-direction:column; gap:12px; }
.tl-tl { display:flex; flex-direction:column; gap:6px; margin-top:2px; }
.tl-tl__spur { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:8px; }
.tl-tl__spur small { font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.tl-tl__bahn { position:relative; height:30px; border-radius:999px; background:var(--tl-fl); }
.tl-tl__bahn i { position:absolute; top:0; bottom:0; border-radius:999px; display:flex; align-items:center; justify-content:space-between; padding:0 9px;
  min-width:84px; box-sizing:border-box; }
.tl-tl__bahn i b { font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.tl-tl__bahn i.plan { border:1.5px dashed #9AA2C8; background:rgba(255,255,255,.7); }
.tl-tl__bahn i.plan b { color:#5A6275; }
.tl-tl__bahn i.ist { background:linear-gradient(150deg,#1C2436 0%,#62748F 100%); box-shadow:0 6px 14px rgba(28,36,54,.25); }
.tl-tl__bahn i.ist b { color:#fff; }
.tl-tl__achse { position:relative; height:16px; margin-left:80px; }
.tl-tl__achse span { position:absolute; transform:translateX(-50%); font-size:10px; font-weight:700; color:var(--muted); }
.tl-bedarf { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:10px; }
.tl-bedarf small { font-size:12.5px; font-weight:700; color:var(--muted); }
.tl-bedarf b { font-size:19px; font-weight:800; color:var(--navy); }
.tl-heute .tl-legende { margin-top:-4px; }

/* ---------- Schlaf ---------- */
.tl-nacht { display:flex; flex-direction:column; gap:16px; }
.tl-zeit { margin-left:auto; text-align:right; }
.tl-zeit b { display:block; font-size:24px; font-weight:800; color:var(--navy); }
.tl-zeit span { display:block; font-size:13px; font-weight:700; color:var(--muted); }
.tl-zeit .tl-datum { font-size:11.5px; }
.tl-sring { --p:0; flex:none; width:112px; height:112px; border-radius:50%;
  background:conic-gradient(from -90deg, #2F3C99, #62C3DC calc(var(--p) * 1%), var(--tl-fl) 0); display:grid; place-items:center; }
.tl-sring__in { width:92px; height:92px; border-radius:50%; background:var(--card); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tl-sring__in b { font-size:34px; font-weight:800; color:var(--navy); line-height:1; font-variant-numeric:tabular-nums; }
.tl-sring__in b em { font-style:normal; font-size:15px; margin-left:1px; }
.tl-sring__in small { font-size:9.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; text-align:center; line-height:1.2; max-width:80px; }
.tl-teile { display:flex; flex-direction:column; gap:8px; }
.tl-teil { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px; align-items:center; gap:10px; font-size:12.5px; font-weight:700; color:var(--muted); }
.tl-teil b { text-align:right; color:var(--navy); font-variant-numeric:tabular-nums; }
.tl-spur { height:8px; border-radius:999px; background:var(--tl-fl); overflow:hidden; }
.tl-spur i { display:block; height:100%; border-radius:999px; background:#62C3DC; }
.tl-woche { display:flex; gap:8px; }
.tl-woche.eng { gap:2px; }
.tl-zielinfo { display:flex; justify-content:space-between; font-size:10.5px; font-weight:800; color:var(--muted); margin-bottom:-8px; }
.tl-bm-i { display:inline-block; width:12px; height:3px; border-radius:2px; background:#7454C9; margin-right:5px; vertical-align:middle; }
.tl-flaeche { position:relative; height:110px; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.tl-zl { position:absolute; left:-4px; right:-4px; border-top:1.5px dashed var(--muted); opacity:.6; }
.tl-bm { position:absolute; left:12%; right:12%; height:3px; border-radius:2px; background:#7454C9; z-index:1; }
.tl-woche.eng .tl-bm { left:0; right:0; height:2px; }
.tl-saeule { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.tl-saeule span { width:100%; max-width:30px; border-radius:8px 8px 4px 4px; background:#BFE6F0; }
.tl-saeule.jetzt span { background:#10155F; }
.tl-woche.eng .tl-saeule span { border-radius:4px 4px 2px 2px; }
.tl-saeule em { font-style:normal; font-size:10.5px; font-weight:800; color:var(--muted); min-height:13px; }
.tl-saeule small { font-size:11px; font-weight:800; color:var(--muted); min-height:14px; }
.tl-woche.eng small { font-size:9.5px; }

/* ---------- Körperwerte ---------- */
.tl-kwliste { padding:6px 16px; }
.tl-kwz2 { padding:14px 0; border-bottom:1px solid var(--line); }
.tl-kwz2:last-of-type { border-bottom:0; }
.tl-kwz2__kopf { display:flex; align-items:center; gap:12px; }
.tl-kw__ic { flex:none; width:36px; height:36px; border-radius:12px; background:var(--tl-fl); display:grid; place-items:center; }
.tl-kw__ic .hji { width:18px; height:18px; }
.tl-kwz2__name { flex:1; min-width:0; }
.tl-kwz2__name b { display:block; font-size:15px; font-weight:800; color:var(--navy); }
.tl-kwz2__name span { font-size:12px; font-weight:700; color:var(--muted); }
.tl-kwz2__name span.raus { color:var(--navy); font-weight:800; }
.tl-kwz2__wert { font-size:24px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tl-kwz2__wert em { font-style:normal; font-size:12px; color:var(--muted); margin-left:3px; }
.tl-bspur { position:relative; height:10px; border-radius:5px; background:var(--tl-fl2); margin:16px 6px 0; }
.tl-bspur .band { position:absolute; top:0; bottom:0; border-radius:5px; opacity:.38; }
.tl-bspur .mitte { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:1px; background:#8A91A3; }
.tl-bspur .mark { position:absolute; top:-6px; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:var(--card); border:5px solid;
  box-sizing:border-box; box-shadow:0 2px 6px rgba(16,21,95,.18); }
.tl-bzahlen { display:flex; justify-content:space-between; gap:10px; margin:10px 6px 0; font-size:11px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.tl-bzahlen span { display:flex; align-items:center; gap:6px; }
.tl-bzahlen i { width:12px; height:6px; border-radius:3px; opacity:.5; margin:0; }
.tl-kwfuss { font-size:11.5px; color:var(--muted); margin:4px 0 10px; }

/* ---------- Bausteine ---------- */
.tl-raster { padding:14px 12px; }
.tl-rzeile { display:grid; grid-template-columns:118px repeat(14, minmax(0,1fr)) 34px; align-items:center; gap:2px; padding:5px 0; }
.tl-rzeile span { font-size:12px; font-weight:700; color:var(--navy); line-height:1.2; overflow-wrap:anywhere; }
.tl-rzeile span small { display:block; font-size:10.5px; font-weight:700; color:var(--muted); }
.tl-rzeile b { font-size:11px; font-weight:800; color:var(--muted); text-align:right; }
.tl-rzeile i { justify-self:center; width:12px; height:12px; border-radius:50%; }
.tl-rkopf i { width:auto; height:auto; font-style:normal; font-size:10px; font-weight:800; color:var(--muted); }
.tl i.ja { background:var(--navy); }
.tl i.nein { border:1.5px dashed #62C3DC; box-sizing:border-box; background:none; }
.tl i.leer { background:var(--line); transform:scale(.4); }
.tl-rlegende { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:11.5px; font-weight:600; color:var(--muted); }
.tl-rlegende i { width:10px; height:10px; }
@media (max-width:380px) { .tl-rzeile { grid-template-columns:98px repeat(14, minmax(0,1fr)) 30px; } .tl-rzeile i { width:10px; height:10px; } }

/* ---------- Bewegung ---------- */
.tl-einheit { display:flex; flex-direction:column; gap:12px; background:linear-gradient(115deg,#10155F 0%,#2E7299 100%); color:#fff;
  box-shadow:0 14px 30px rgba(16,21,95,.18); border:0; }
.tl-einheit .tl-etitel b, .tl-einheit .tl-edauer b { color:#fff; }
.tl-einheit .tl-etitel small, .tl-einheit .tl-edauer small { color:rgba(255,255,255,.75); }
.tl-einheit .tl-kachel { background:rgba(255,255,255,.16); color:#fff; }
.tl-einheit .tl-kachel .hji { --ic-acc:#9EE3F1; }
.tl-einheit .tl-legende { color:rgba(255,255,255,.75); }
.tl-einheit .tl-legende b { color:#fff; }
.tl-einheit .tl-phasen { background:rgba(255,255,255,.12); }
.tl-zonen { height:10px; }
.tl-wozahlen { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.tl-wozahlen small { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.75); }
.tl-wozahlen b { display:block; font-size:26px; font-weight:800; color:#fff; }
.tl-wozahlen em { font-style:normal; font-size:12px; margin-left:3px; opacity:.75; }
.tl-pille { display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; color:#fff; padding:4px 10px; border-radius:8px;
  background:linear-gradient(115deg,#10155F,#2E7299); }
.tl-pille.hell { background:rgba(255,255,255,.2); color:#fff; }