/* Aufbau: feste Kopfzeile mit Umschalter (Fahren · Fahrten · Bestwerte), darunter je eine Ansicht. Fahren: Live-Zahl groß, Geräte und Zielleistung daneben. */
:root{
  --bg:#F6F6F8; --surface:#FFFFFF; --surface-2:#EFEFF3; --surface-3:#E6E6EC;
  --fg:#0B0B0F; --fg-2:#45454F; --fg-3:#6B6B76; --on-accent:#FFFFFF;
  --line:#E4E4EA; --line-2:#D2D2DA;
  --accent:#7F5FE8; --accent-ink:#6445CF; --accent-soft:rgba(127,95,232,.14); --accent-line:rgba(127,95,232,.42);
  --gap:#E5484D; --gap-ink:#C8353B; --gap-soft:rgba(229,72,77,.13);
  --ok:#26925F; --ok-ink:#1E7A4E; --ok-soft:rgba(38,146,95,.12);
  --z1:#D6D6DE; --z2:#D6CCF8; --z3:#B9A7F4; --z4:#9A80EF; --z5:#7F5FE8; --z6:#5F41C6; --z7:#3E2595;
  --glass:rgba(246,246,248,.8); --edge:rgba(12,12,20,.06);
  --shadow:0 1px 2px rgba(12,12,20,.05),0 8px 24px rgba(12,12,20,.06);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:18px; --r-s:10px; --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0c0a16; --surface:#16121f; --surface-2:#1e1929; --surface-3:#28223a;
  --fg:#F1EEFF; --fg-2:#C9C2DD; --fg-3:#958DAD; --on-accent:#0B0B0F;
  --line:#2a2438; --line-2:#3a3350;
  --accent:#A78BFA; --accent-ink:#C4B5FD; --accent-soft:rgba(167,139,250,.15); --accent-line:rgba(167,139,250,.48);
  --gap:#F2555A; --gap-ink:#F2555A; --gap-soft:rgba(242,85,90,.15);
  --ok:#3DB67A; --ok-ink:#3DB67A; --ok-soft:rgba(61,182,122,.14);
  --z1:#3a3550; --z2:#41385F; --z3:#56478E; --z4:#7259BF; --z5:#A78BFA; --z6:#C4B5FD; --z7:#E6DEFF;
  --glass:rgba(12,10,22,.66); --edge:rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0a16; --surface:#16121f; --surface-2:#1e1929; --surface-3:#28223a;
  --fg:#F1EEFF; --fg-2:#C9C2DD; --fg-3:#958DAD; --on-accent:#0B0B0F;
  --line:#2a2438; --line-2:#3a3350;
  --accent:#A78BFA; --accent-ink:#C4B5FD; --accent-soft:rgba(167,139,250,.15); --accent-line:rgba(167,139,250,.48);
  --gap:#F2555A; --gap-ink:#F2555A; --gap-soft:rgba(242,85,90,.15);
  --ok:#3DB67A; --ok-ink:#3DB67A; --ok-soft:rgba(61,182,122,.14);
  --z1:#3a3550; --z2:#41385F; --z3:#56478E; --z4:#7259BF; --z5:#A78BFA; --z6:#C4B5FD; --z7:#E6DEFF;
  --glass:rgba(12,10,22,.66); --edge:rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}

/* Grundlagen */
*{box-sizing:border-box}
html{scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h3{font-size:15px}
.lbl{font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:20;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top-in{display:flex;align-items:center;gap:16px;height:60px}
/* Kein Logo mit Namen oben links (11.10.2026) – der Platzhalter hält die Ansicht-Wahl in der Mitte */
.top-in::before{content:"";flex:1;min-width:0}
.top-r{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:10px}
.icon-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--fg-2);transition:border-color .2s}
.icon-btn:hover{border-color:var(--line-2)}
.recpill{color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:500 12.5px var(--mono)}
.recpill i{width:7px;height:7px;border-radius:50%;background:var(--gap);animation:breathe 2.4s var(--ease) infinite}
.recpill.paused i{animation:none;background:var(--fg-3)}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* Umschalter */
.seg{position:relative;display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px;flex:none}
.seg button{position:relative;z-index:1;border:0;background:none;height:32px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--fg-3);transition:color .3s}
.seg button.on{color:var(--fg)}
.seg .thumb{position:absolute;top:3px;left:0;height:32px;border-radius:999px;background:var(--surface);box-shadow:0 1px 2px rgba(12,12,20,.08),0 2px 8px rgba(12,12,20,.06);transition:transform .4s var(--ease),width .4s var(--ease)}
.seg.sm button{height:26px;padding:0 11px;font-size:12.5px}
.seg.sm .thumb{height:26px}

/* Ansichten */
main{padding-block:24px 64px}
.view{display:none}
.view.active{display:block;transition:opacity .33s var(--ease),transform .33s var(--ease)}
.view.entering{opacity:0;transform:translateX(var(--dx,24px))}
.view.leaving{opacity:0;transform:translateX(var(--dx,-24px));transition-duration:.17s}

.card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:14px;font-weight:500;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.btn:hover{border-color:var(--fg-3)}
.btn:active{transform:scale(.98)}
.btn.sm{height:32px;padding:0 13px;font-size:13px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.dark{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:600}
.btn.big{height:52px;padding:0 30px;font-size:16px}
.btn.ghost{border-color:transparent;background:none;color:var(--fg-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.warn{color:var(--gap-ink)}
.btn.warn.armed{background:var(--gap-soft);border-color:transparent}
.lnk{border:0;background:none;padding:0;color:var(--fg-2);font-weight:500}
.lnk:hover{color:var(--fg)}

/* Fahren */
.live-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.main-col{display:grid;gap:20px;min-width:0}
.side{display:grid;gap:20px;min-width:0}
/* Vor der Fahrt nur die Startkarte, während der Fahrt nur die Live-Karte */
body:not(.riding) .card.live,.riding #startCard{display:none}

/* Startkarte: Strecke, Geräte, Start */
.start{padding:28px;display:grid;gap:26px}
.start .route-live{margin:0;border:0;padding:0}
.start .rl-head{margin-bottom:18px;align-items:flex-start}
.rl-t{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.start .rl-name{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.035em;line-height:1.08;white-space:normal}
.rl-meta{font-size:14px;color:var(--fg-2)}
.live .rl-meta{display:none}
.start .rl-grade,.start .rl-bar{display:none}
.start .rl-body{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
.start .cv.prof,.start .cv.map{height:190px}
.start .cv.map{background:none}
.st-flat{display:block;width:100%;height:120px;margin-top:4px}
.start .rt-opts{margin:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;padding:14px 16px;border-radius:14px;background:var(--surface-2)}
.start .rt-row{gap:14px}
.start .chk.sm{border:0;height:32px;padding:0}
.start .chk.sm.on{background:none}
.devs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot t t" "v v b";align-items:center;gap:14px 10px;padding:14px 14px 14px 16px;border-radius:14px;background:color-mix(in srgb,var(--surface-2) 80%,transparent);border:1px solid var(--edge);transition:border-color .4s,background .4s}
.dev .dot{grid-area:dot}.dev .dev-t{grid-area:t}.dev .btn{grid-area:b}
.dev-v{grid-area:v;white-space:nowrap;font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1}
.dev-v:empty::before{content:"–";color:var(--line-2)}
.rl-t .rl-name{flex:none}
.dev:has(.dot.on){border-color:color-mix(in srgb,var(--ok) 32%,transparent);background:color-mix(in srgb,var(--ok) 6%,var(--surface-2))}
.devs+.lnk,.devs~.note{margin-top:-14px}
.sm-lnk{font-size:13px;justify-self:start}
.start-go{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.start-go .btn.primary{min-width:220px}
.btn.primary[aria-disabled="true"]{opacity:.42;cursor:default}
.btn.primary[aria-disabled="true"]:hover{background:var(--accent);border-color:var(--accent)}
.go-hint{font-size:14px;color:var(--fg-3)}
/* FTP-Test als kompakte Zeile */
.ftp-c{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t tag" "t b";gap:8px 12px;align-items:center}
.ftp-c-t{grid-area:t;display:flex;flex-direction:column;gap:4px}
.ftp-c .ftp-note{margin:0}
.ftp-c .tag{grid-area:tag;justify-self:end;margin:0}
.ftp-c .btn{grid-area:b;justify-self:end}
.live{padding:26px 26px 22px}
.live-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.zone{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--surface-2);font-size:13px;font-weight:500;color:var(--fg-2);white-space:nowrap}
.zone i{width:8px;height:8px;border-radius:50%;background:var(--zc,var(--line-2));transition:background .5s var(--ease)}
.bignum{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.bignum b{font-size:clamp(96px,19vw,172px);font-weight:600;letter-spacing:-.055em;line-height:.95}
.bignum .unit{font-size:28px;font-weight:500;color:var(--fg-3);letter-spacing:-.02em}
.wkg{font-size:15px;color:var(--fg-2);margin-top:2px}
.zbar{margin:22px 0 4px}
.zbar-track{position:relative;display:flex;gap:2px;height:6px}
.zbar-track span{border-radius:3px;background:var(--zc);opacity:.85}
.zbar-mark{position:absolute;top:-5px;width:4px;height:16px;border-radius:2px;background:var(--fg);left:0;transform:translateX(-2px);transition:left .6s var(--ease),opacity .4s;box-shadow:0 0 0 2px var(--surface)}
.zbar-lbl{display:flex;gap:2px;margin-top:7px}
.zbar-lbl span{font:500 10.5px var(--mono);color:var(--fg-3);letter-spacing:.04em}
.stats6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:22px}
.st{padding:14px 0 14px;border-bottom:1px solid var(--line)}
.st:not(:nth-child(3n+1)){padding-left:16px;border-left:1px solid var(--line)}
.st .v{font-size:24px;font-weight:600;letter-spacing:-.03em;margin-top:5px;white-space:nowrap}
.st .v small{font-size:13px;font-weight:500;color:var(--fg-3);letter-spacing:0;margin-left:3px}
.cv{display:block;width:100%;height:170px;touch-action:pan-y}
.cv.tall{height:240px}
.chart-live{margin-top:22px;display:grid;gap:8px}

/* Strecke live */
.route-live{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.rl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:4px 12px;margin-bottom:10px;flex-wrap:wrap}
.rl-name{font-weight:600;font-size:15px;min-width:0;flex:1 1 150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-grade{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.rl-grade b{font-size:26px;font-weight:600;letter-spacing:-.03em}
.rl-grade small{font-size:12px;color:var(--fg-3)}
.rl-body{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:14px;align-items:stretch}
.cv.prof{height:150px}
.cv.map{height:150px;border-radius:12px;background:var(--surface-2)}
.rl-bar{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:13px;color:var(--fg-2);white-space:nowrap}
.rl-track{flex:1;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.rl-track i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .6s var(--ease)}

/* Strecken-Auswahl */
.rlist{display:grid;gap:6px}
.rrow{display:grid;grid-template-columns:18px minmax(0,1fr) 64px;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 12px;transition:border-color .25s,background .25s}
.rrow:hover{border-color:var(--line-2)}
.rrow .rd{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:border-color .25s}
.rrow .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .25s var(--ease)}
.rrow.on{border-color:var(--accent-line);background:var(--accent-soft)}
.rrow.on .rd{border-color:var(--accent)}
.rrow.on .rd::after{transform:scale(1)}
.rrow .rn{min-width:0}
.rrow .rn b{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .rn span{font-size:12.5px;color:var(--fg-3)}
.rrow svg{width:64px;height:24px;display:block}
.rrow[disabled]{opacity:.55;cursor:default}
.rt-opts{display:grid;gap:10px;margin-top:14px}
.rt-opts[hidden]{display:none}
.rt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.chk.sm{height:38px;margin-top:0;font-size:13.5px}
.rt-empty{font-size:13.5px;color:var(--fg-3);margin:4px 0 0}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;min-height:52px}
.controls .q{font-weight:600;margin-right:6px}
.controls .spacer{flex:1}

.dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);flex:none;transition:background .4s}
.dot.on{background:var(--ok)}
.dot.wait{background:var(--accent);animation:breathe 1.6s var(--ease) infinite}
.dev-t{flex:1;min-width:0;display:flex;flex-direction:column}
.dev-t b{font-weight:600;font-size:14.5px}
.dev-t span{font-size:13px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chk{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;margin-top:14px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;font-weight:500;cursor:pointer;user-select:none;transition:border-color .25s,background .25s}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:background .25s,border-color .25s}
.chk .box::after{content:"";width:9px;height:5px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .25s var(--ease)}
.chk.on{border-color:var(--accent-line);background:var(--accent-soft)}
.chk.on .box{background:var(--accent);border-color:var(--accent)}
.chk.on .box::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.chk:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.note{font-size:13px;color:var(--gap-ink);margin:12px 0 0}
.note.soft{color:var(--fg-3)}

.erg-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.switch{position:relative;width:40px;height:24px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--surface-3);transition:background .3s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .35s var(--ease)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(16px)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.field{display:flex;align-items:center;height:44px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);transition:border-color .2s,box-shadow .2s;overflow:hidden}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input{flex:1;min-width:0;border:0;background:none;height:100%;padding:0 12px;font-size:17px;font-weight:600;outline:none;text-align:center}
.field .u{color:var(--fg-3);font-size:14px;padding-right:12px}
.field .pm{width:44px;height:100%;border:0;background:none;color:var(--fg-2);font-size:20px;line-height:1}
.field .pm:hover{background:var(--surface-2)}
.field.left input{text-align:left}
.erg.off .field,.erg.off .quick{opacity:.5}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;transition:opacity .3s}
.qb{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:12.5px;color:var(--fg-2);transition:border-color .2s}
.qb b{color:var(--fg);font-weight:600;margin-left:4px}
.qb:hover{border-color:var(--line-2)}

/* Fahrten */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-h h1{font-size:30px;letter-spacing:-.035em}
.week{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:stretch;padding:24px 26px}
.week-l{display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.week-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.big3 .v{font-size:30px;font-weight:600;letter-spacing:-.035em;margin-top:6px;line-height:1.1}
.big3 .v small{font-size:14px;color:var(--fg-3);font-weight:500;margin-left:3px;letter-spacing:0}
.wbars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;height:130px;align-items:end}
.wb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0}
.wb .bar{width:100%;max-width:34px;border-radius:6px 6px 3px 3px;background:var(--z2);height:var(--h);transform-origin:bottom;transform:scaleY(0);transition:transform .8s var(--ease)}
.wb.cur .bar{background:var(--accent)}
.wb .val{font:500 10.5px var(--mono);color:var(--fg-3);white-space:nowrap}
.wb .kw{font:500 10.5px var(--mono);color:var(--fg-3)}
.wb.cur .kw{color:var(--accent-ink)}
.grow .wb .bar{transform:scaleY(1)}
.wb:nth-child(2) .bar{transition-delay:.04s}.wb:nth-child(3) .bar{transition-delay:.08s}.wb:nth-child(4) .bar{transition-delay:.12s}.wb:nth-child(5) .bar{transition-delay:.16s}.wb:nth-child(6) .bar{transition-delay:.2s}.wb:nth-child(7) .bar{transition-delay:.24s}.wb:nth-child(8) .bar{transition-delay:.28s}
.list{display:grid;gap:10px;margin-top:20px}
.row,.row-h{display:grid;grid-template-columns:96px minmax(0,1fr) repeat(4,76px) 120px;align-items:center;gap:14px}
.row{width:100%;text-align:left;border:0;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:14px 18px;transition:background .2s}
/* Monatsgruppen: eine Karte je Monat, Spaltenköpfe statt Beschriftung in jeder Zeile */
.list-g{margin-top:20px;padding:10px 10px 8px}
.list-gh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 14px 14px}
.list-gh h3{font-size:17px}
.list-gh span{font-size:13px;color:var(--fg-3)}
.row-h{padding:0 14px 9px;border-bottom:1px solid var(--line);margin-bottom:4px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.list-g .list{gap:2px;margin:0}
.list-g .row{background:none;box-shadow:none;border-radius:12px;padding:11px 14px}
.list-g .row:hover{background:var(--surface-2)}
.list-g .row .m .lbl{display:none}
.list-g .row .m b{margin:0}
.row .d b{display:block;font-weight:600;font-size:14.5px}
.row .d span{font-size:12.5px;color:var(--fg-3)}
.row .nm{min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .m .lbl{font-size:10px}
.row .m b{display:block;font-weight:600;font-size:15px;margin-top:2px}
.row .nm{font-size:14.5px}
.row .m,.row-h span:nth-child(n+3):not(:last-child){text-align:right}
.row svg{width:100%;height:34px;display:block}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--surface-2);font:500 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);margin-left:8px;vertical-align:2px}
.tag.acc{background:var(--accent-soft);color:var(--accent-ink)}
.empty{text-align:center;padding:48px 22px;color:var(--fg-3)}
.empty b{display:block;color:var(--fg);font-size:17px;margin-bottom:6px}

/* Detail */
.crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fg-3);margin-bottom:6px}
.title-in{width:100%;border:1px solid transparent;border-radius:var(--r-s);background:none;font-size:30px;font-weight:600;letter-spacing:-.035em;padding:2px 8px;margin:0 0 16px -9px;outline:none;transition:border-color .2s,background .2s}
.title-in:hover{border-color:var(--line)}
.title-in:focus{border-color:var(--accent);background:var(--surface)}
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:28px;align-items:center}
.hero-num{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.hero-num b{font-size:64px;font-weight:600;letter-spacing:-.05em;line-height:1}
.hero-num .unit{font-size:20px;color:var(--fg-3);font-weight:500}
.hero .sub{font-size:14px;color:var(--fg-2)}
.hero-z{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;margin-top:18px;max-width:280px}
.hero-z i{background:var(--zc);transform-origin:left;animation:grow 1s var(--ease) both .15s}
.hero{padding:26px}
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--line)}
.kv .st{padding:12px 0 12px 18px;border-left:0}
.kv .st:not(:nth-child(4n+1)){border-left:0}
.kv .st:nth-last-child(-n+4){border-bottom:0}
.kv .st .v{font-size:21px}
.stack{display:grid;gap:20px;margin-top:20px}
.two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}
.btab{display:grid;margin-top:12px}
.btab .r{display:grid;grid-template-columns:70px 1fr auto auto;gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.btab .r .w{font-weight:600;text-align:right}
.btab .r .k{color:var(--fg-3);text-align:right;min-width:70px}
.btab .r button{justify-self:start}
.zb{display:grid;grid-template-columns:118px minmax(0,1fr) 56px 42px;gap:12px;align-items:center;padding:7px 0;font-size:13.5px}
.zb .zn{display:flex;align-items:center;gap:8px;white-space:nowrap}
.zb .zn i{width:8px;height:8px;border-radius:50%;background:var(--zc);flex:none}
.zb .zn small{color:var(--fg-3);font-size:12px}
.zb .tr{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.zb .tr span{display:block;height:100%;width:var(--w);border-radius:5px;background:var(--zc);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.grow .zb .tr span{transform:scaleX(1)}
.zb .t{text-align:right;font-weight:500}
.zb .p{text-align:right;color:var(--fg-3);font-size:12.5px}
.zw{font:500 11.5px var(--mono);color:var(--fg-3);display:block}
.acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.acts .spacer{flex:1}

/* Bestwerte */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kpi{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.kpi .v{font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:1.05;margin-top:4px}
.kpi .v small{font-size:16px;color:var(--fg-3);font-weight:500;margin-left:4px;letter-spacing:0}
.kpi .sub{font-size:13.5px;color:var(--fg-2)}
.kpi .sub .lnk{font-size:inherit;color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.kpi .btn{margin-top:6px}
.btab.two-c{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin-top:4px}
.btab.two-c .r:nth-child(-n+2){border-top:0}
.btab .r .lnk{font-size:13.5px;color:var(--fg-3)}
.btab .r .lnk:hover{color:var(--fg)}

.legend-in{display:flex;gap:16px;font-size:12.5px;color:var(--fg-3)}
.legend-in span{display:inline-flex;align-items:center;gap:6px}
.legend-in i{width:14px;height:2px;border-radius:1px;background:var(--accent)}
.legend-in i.g{background:var(--fg-3)}

/* Dialog, Meldung */
dialog{border:1px solid var(--edge);border-radius:22px;padding:0;background:var(--surface);color:var(--fg);box-shadow:0 30px 80px rgba(0,0,0,.5);width:min(440px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(6,4,14,.55);backdrop-filter:blur(6px)}
dialog[open]{animation:dlgIn .3s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(8px) scale(.985)}}
/* Einstellungen: Kopf, Abschnitte, Fuß; der Inhalt scrollt, Kopf und Fuß bleiben */
#dlgSet{width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 48px)}
.dlg.set{padding:0;gap:0;max-height:calc(100dvh - 50px);grid-template-rows:auto minmax(0,1fr) auto}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 16px 26px;border-bottom:1px solid var(--line)}
.dlg-h h2{font-size:19px}
.set-body{overflow-y:auto;overscroll-behavior:contain;padding:4px 26px}
.sv{padding:20px 0;display:grid;gap:12px}
.set-body .sv{border-top:1px solid var(--line)}
.set-body>.sv:first-child{border-top:0}
dialog:focus{outline:none}
.sv h3{margin:0;font-size:13px;font-weight:600;color:var(--fg-2);letter-spacing:0}
.sv .ftp-note,.sv .sv-ok{margin:0}
.sv .chk.sm{margin:0}
.sv-line{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sv-line .ftp-note{flex:1;min-width:0}
.sv-line .btn{flex:none}
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vf{display:grid;gap:7px}
.vf .field{height:46px}
.vf .field input{padding:0 4px 0 14px;font-size:18px}
#ftpEst{justify-self:start}
#ftpEst:disabled{height:auto;padding:0;border:0;background:none;text-align:left;color:var(--fg-3);cursor:default}
.set .dlg-foot{padding:14px 22px 18px;border-top:1px solid var(--line)}
.handy .vals{grid-template-columns:repeat(2,minmax(0,1fr))}
.dlg{padding:24px;display:grid;gap:16px}
.dlg h2{font-size:20px}
.sep{height:1px;background:var(--line);margin:4px 0}
.dlg-row{display:flex;flex-wrap:wrap;gap:10px}
.dlg-foot{display:flex;justify-content:flex-end}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:500;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:50;max-width:calc(100vw - 32px);text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Handy */
@media (max-width:900px){
  .live-grid{display:flex;flex-direction:column}
  .main-col,.side{width:100%}
  .devs{grid-template-columns:1fr}
  .row,.row-h{grid-template-columns:70px minmax(0,1fr) repeat(3,64px)}
  .row .m.np,.row svg,.row-h .np,.row-h span:last-child{display:none}
  .week-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr}
  .kv{border-left:0;border-top:1px solid var(--line)}
  .kv .st{padding-left:0}
  .kv .st:not(:nth-child(4n+1)){padding-left:14px;border-left:1px solid var(--line)}
  .two,.week{grid-template-columns:1fr}
  .kpis,.btab.two-c{grid-template-columns:1fr}
  .btab.two-c .r:nth-child(2){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  body{font-size:14.5px}
  main{padding-block:16px 48px}
  .top-in{gap:10px}
  .seg button{padding:0 12px;font-size:13px}
  .card{padding:18px}
  .live{padding:20px 18px}
  .st .v{font-size:20px}
  .st:not(:nth-child(3n+1)){padding-left:12px}
  .controls .btn{flex:1}
  .rl-body{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px}
  .cv.prof,.cv.map{height:120px}
  .rl-grade b{font-size:22px}
  .controls .q{flex-basis:100%}
  .controls .spacer{display:none}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv .st:not(:nth-child(4n+1)){padding-left:0;border-left:0}
  .kv .st:nth-child(2n){padding-left:14px;border-left:1px solid var(--line)}
  .kv .st:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .kv .st:nth-last-child(-n+2){border-bottom:0}
  .row{grid-template-columns:66px minmax(0,1fr) 58px 44px;padding:12px 14px;gap:10px}
  .row-h{display:none}
  .list-g .row .m .lbl{display:block}
  .list-g{padding:6px 4px}
  .row .d span{font-size:12px;white-space:nowrap}
  .row .nm .tag{display:none}
  .row .m.kj{display:none}
  .page-h h1,.title-in{font-size:24px}
  .hero-num b{font-size:52px}
  .week-nums .v{font-size:24px}
  .zb{grid-template-columns:100px minmax(0,1fr) 48px}
  .zb .p{display:none}
  .cv.tall{height:200px}
  .field input{font-size:17px}
}

/* ---------- Fahrt-Erlebnis ---------- */
@property --amb{syntax:'<color>';inherits:true;initial-value:transparent}
.card-a{display:flex;gap:14px}

/* Live-Karte: Zonenfarbe als ruhiges Leuchten, wird weich überblendet */
.card.live{position:relative;overflow:hidden;isolation:isolate;transition:--amb 1.2s var(--ease)}
.card.live::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 70% at 18% 0%,color-mix(in srgb,var(--amb) 34%,transparent),transparent 70%);opacity:0;transition:opacity .8s var(--ease)}
.riding .card.live::before{opacity:1}
.card.live.idle .bignum b{color:transparent;position:relative;min-width:.66em}
.card.live.idle .bignum b::after{content:"0";position:absolute;left:0;bottom:0;color:var(--line-2)}
.bignum b{transition:color .4s}

/* Fahrt-Modus: Geräte und Streckenwahl treten zurück, die Zahlen werden größer */
.riding #routeCard{display:none}
.riding .bignum b{font-size:clamp(110px,22vw,210px)}
.riding .st .v{font-size:28px}
.riding .live-grid{grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:640px){.riding .st .v{font-size:22px}}

/* Moment-Banner */
.moment{position:absolute;left:50%;top:18px;z-index:2;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:10px 18px 10px 10px;border-radius:999px;background:var(--fg);color:var(--bg);box-shadow:0 12px 32px rgba(12,12,20,.22);transform:translate(-50%,-140%) scale(.96);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .35s}
.moment.show{transform:translate(-50%,0) scale(1);opacity:1}
.moment .mi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);flex:none}
.moment.gold .mi{background:#F5C451;color:#2A1F00}
.moment .mi svg{width:18px;height:18px}
.moment .mt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.moment .mt b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moment .mt span{font-size:12.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Countdown */
.countdown{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
.countdown b{font-size:min(42vw,280px);font-weight:600;letter-spacing:-.06em;line-height:1;color:var(--fg);animation:cd .85s var(--ease) both}
.countdown b.go{color:var(--accent);font-size:min(26vw,180px)}
@keyframes cd{0%{transform:scale(1.5);opacity:0}25%{opacity:1}100%{transform:scale(.85);opacity:.15}}

/* Zusammenfassung */
#dlgSum{width:min(520px,calc(100vw - 32px));overflow:hidden}
.sum{position:relative;padding:28px;display:grid;gap:22px}
.sum-h{display:grid;gap:6px}
.sum-h h2{font-size:34px;letter-spacing:-.04em;animation:up .6s var(--ease) both}
.sum-t{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:14px 10px}
.sum-t b{display:block;font-size:26px;font-weight:600;letter-spacing:-.035em;margin-top:4px;line-height:1.1}
.sum-t small{font-size:13px;color:var(--fg-3);font-weight:500;margin-left:2px}
.sum-t>div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:2px}
.sum-t>div .lbl{flex-basis:100%}
.sum-z{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.sum-z i{background:var(--zc);transform-origin:left;animation:grow 1s var(--ease) both .2s}
.sum-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sum-l li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--surface-2);animation:up .5s var(--ease) both;animation-delay:calc(.35s + var(--i)*.08s)}
.sum-l li.gold{background:color-mix(in srgb,#F5C451 9%,var(--surface-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,#F5C451 38%,transparent)}
.sum-l .mi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}
.sum-l li.gold .mi{background:#F5C451;color:#2A1F00}
.sum-l .mi svg{width:17px;height:17px}
.sum-l b{display:block;font-size:14.5px;font-weight:600}
.sum-l span span{font-size:13px;color:var(--fg-3)}
.sum-f{display:flex;gap:10px;flex-wrap:wrap}
.sum-f .spacer{flex:1}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.countdown b,.sum-h h2,.sum-l li,.sum-z i{animation:none}.moment{transition:opacity .2s}}
@media (max-width:640px){.sum{padding:22px}.sum-h h2{font-size:28px}.sum-f{flex-direction:column-reverse}.sum-f .btn{width:100%}.sum-f .spacer{display:none}}

/* ---------- Szene und Vollbild ---------- */
.cv.scene{display:none;height:230px;margin-top:20px;border-radius:14px;background:#0b0a14}
.riding .cv.scene{display:block}
.full-b{margin-left:auto}
.full{position:fixed;inset:0;z-index:55;background:#0b0a14;color:#F1EEFF;overflow:hidden;--fz:#646a7c;font-variant-numeric:tabular-nums}
.full canvas#cvFull{position:absolute;inset:0;width:100%;height:100%;display:block}
.full.still{cursor:none}
.full .lbl{color:rgba(241,238,255,.6)}
.f-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:16px;padding:calc(20px + env(safe-area-inset-top,0px)) 28px 0;z-index:1}
.f-route{flex:1;min-width:0;display:flex;flex-direction:column;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.f-route b{font-size:20px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-route span{font-size:14px;color:rgba(241,238,255,.7)}
.f-r{display:flex;align-items:center;gap:12px}
.f-time{font:600 22px var(--mono);letter-spacing:-.02em}
.f-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,8,20,.45);color:inherit;display:grid;place-items:center;backdrop-filter:blur(8px)}
.f-x:hover{background:rgba(255,255,255,.12)}
.f-ghost{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(10,8,20,.5);border:1px solid rgba(230,222,255,.22);backdrop-filter:blur(8px);font-size:13.5px;font-weight:500;white-space:nowrap;align-self:center}
.f-ghost i{width:8px;height:8px;border-radius:50%;background:#E6DEFF;box-shadow:0 0 10px #C4B5FD}
.f-ghost.behind i{background:#F5C451;box-shadow:0 0 10px #F5C451}
.f-hud{position:absolute;left:0;right:0;bottom:calc(150px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;padding:0 40px;z-index:1;pointer-events:none}
.f-main{display:flex;flex-direction:column;align-items:center;text-align:center}
.f-zone{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:color-mix(in srgb,var(--fz) 32%,rgba(10,8,20,.55));border:1px solid color-mix(in srgb,var(--fz) 70%,transparent);font-size:14px;font-weight:600;transition:background .6s,border-color .6s;backdrop-filter:blur(8px)}
.f-pow{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.f-pow b{font-size:clamp(110px,17vw,230px);font-weight:600;letter-spacing:-.06em;line-height:.92;text-shadow:0 0 60px color-mix(in srgb,var(--fz) 70%,transparent),0 2px 24px rgba(0,0,0,.45);transition:text-shadow .6s}
.f-pow span{font-size:30px;font-weight:500;color:rgba(241,238,255,.7)}
.f-wkg{font-size:17px;color:rgba(241,238,255,.75);margin-top:2px}
.f-side{display:flex;gap:28px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.f-side.r{justify-content:flex-end}
.f-side>div{display:flex;flex-direction:column;min-width:90px}
.f-side b{font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-top:4px}
.f-side small{font-size:13px;color:rgba(241,238,255,.6)}
.f-bot{position:absolute;left:0;right:0;bottom:0;padding:0 28px calc(14px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr auto;grid-template-areas:"prof prof" "keys ctrl";gap:10px 16px;align-items:center;z-index:1}
.f-prof{grid-area:prof;width:100%;height:64px;display:block}
.f-ctrl{grid-area:ctrl;display:flex;gap:10px;align-items:center}
.f-ctrl .btn{height:44px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#F1EEFF;backdrop-filter:blur(8px)}
.f-ctrl .btn.primary{background:#A78BFA;border-color:#A78BFA;color:#0B0B0F}
.f-ctrl .btn.dark{background:#F1EEFF;color:#0B0B0F}
.f-ctrl .note,.f-ctrl .q{color:rgba(241,238,255,.8)}
.f-ctrl .spacer{display:none}
.full .moment{top:84px;background:rgba(241,238,255,.95);color:#0B0B0F}
.fullon{overflow:hidden}
@media (max-width:900px){
  .f-hud{grid-template-columns:1fr 1fr;grid-template-areas:"main main" "l r";bottom:calc(140px + env(safe-area-inset-bottom,0px));padding:0 20px;gap:12px}
  .f-main{grid-area:main}.f-side:not(.r){grid-area:l}.f-side.r{grid-area:r}
  .f-side{gap:18px}.f-side b{font-size:32px}.f-side>div{min-width:0}
  .f-top{padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0;flex-wrap:wrap}
  .f-ghost{order:3;flex-basis:100%;justify-content:center;align-self:auto;width:max-content;margin:0 auto}
  .f-bot{grid-template-columns:1fr;grid-template-areas:"prof" "ctrl";padding:0 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .f-ctrl{justify-content:center}.f-ctrl .btn{flex:1}
  .cv.scene{height:180px}
}
@media (prefers-reduced-motion:reduce){.f-zone,.f-pow b{transition:none}}

/* Streckenliste: Löschen pro Zeile, Liste scrollt ab einer gewissen Länge */
.rlist{max-height:min(420px,52vh);overflow-y:auto;overscroll-behavior:contain;margin-inline:-4px;padding:0 4px 2px}
.rwrap{position:relative}
.rwrap .rrow{padding-right:40px}
.rdel{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-width:28px;height:28px;padding:0 6px;border-radius:999px;border:0;background:var(--surface-2);color:var(--fg-3);display:grid;place-items:center;font-size:12px;font-weight:600;opacity:0;transition:opacity .2s,background .2s,color .2s}
.rwrap:hover .rdel,.rdel:focus-visible{opacity:1}
.rdel:hover{color:var(--gap-ink)}
.rdel.armed{opacity:1;background:var(--gap-soft);color:var(--gap-ink);padding:0 10px}
.rrow svg{width:64px}
@media (hover:none){.rdel{opacity:.85}}

/* ---------- Breite Bildschirme ---------- */
/* Live-Karte: Gruppen links/rechts lösen sich normal auf, Reihenfolge wie gehabt (Knöpfe nach den Werten) */
.card.live{display:flex;flex-direction:column}
.live-l,.live-r{display:contents}
.card.live .controls{order:5}
.card.live .chart-live{order:6}
@media (min-width:1400px){
  .wrap{max-width:min(1640px,calc(100vw - 80px))}
  .live-grid{grid-template-columns:minmax(0,1fr) 360px}
}
/* Während der Fahrt deckt die Ansicht das ganze Fenster ab */
.riding .wrap{max-width:none;padding-inline:clamp(16px,2.4vw,48px)}
@media (min-width:1280px){
  .riding .card.live{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(28px,3vw,64px);align-items:start}
  .riding .live-l,.riding .live-r{display:flex;flex-direction:column;min-width:0}
  .riding .live-r .route-live{margin-top:0;border-top:0;padding-top:4px}
  .riding .live-r .stats6{margin-top:18px}
  .riding .live-r>:first-child{margin-top:0}
  .riding .live-r .stats6:first-child{margin-top:0;border-top:0}
  .riding .cv.scene{height:clamp(240px,34vh,460px)}
  .riding .bignum b{font-size:clamp(150px,13vw,260px)}
  .riding .st .v{font-size:clamp(28px,2.1vw,40px)}
  .riding .cv.prof,.riding .cv.map{height:clamp(150px,18vh,240px)}
  .riding .live-grid{grid-template-columns:minmax(0,1fr) 320px}
  .riding .live-l .chart-live{margin-top:34px}
  .riding #cvLive{height:clamp(170px,30vh,340px)}
}

/* Vollbild wächst mit dem Bildschirm */
@media (min-width:901px){
  .f-top{padding:clamp(20px,2.2vh,36px) clamp(28px,2.4vw,56px) 0}
  .f-route b{font-size:clamp(20px,1.5vw,32px)}
  .f-route span{font-size:clamp(14px,1vw,19px)}
  .f-time{font-size:clamp(22px,1.8vw,38px)}
  .f-x{width:clamp(40px,2.6vw,52px);height:clamp(40px,2.6vw,52px)}
  .f-ghost{height:auto;padding:clamp(7px,.6vw,11px) clamp(14px,1vw,20px);font-size:clamp(13.5px,.95vw,18px)}
  .f-hud{padding:0 clamp(40px,3.4vw,80px);bottom:calc(clamp(64px,10vh,130px) + clamp(80px,9vh,110px))}
  .f-pow b{font-size:clamp(120px,min(16vw,25vh),340px)}
  .f-pow span{font-size:clamp(30px,2.4vw,52px)}
  .f-wkg{font-size:clamp(17px,1.3vw,26px)}
  .f-zone{height:auto;padding:clamp(5px,.5vw,9px) clamp(14px,1vw,22px);font-size:clamp(14px,1.05vw,21px)}
  .f-side{gap:clamp(28px,3.2vw,72px)}
  .f-side>div{min-width:clamp(90px,7vw,170px)}
  .f-side b{font-size:clamp(46px,4.6vw,104px)}
  .f-side small{font-size:clamp(13px,.95vw,19px)}
  .full .lbl{font-size:clamp(11px,.8vw,15px)}
  .f-bot{padding:0 clamp(28px,2.4vw,56px) clamp(14px,1.6vh,28px);gap:clamp(10px,1.2vh,18px) 16px}
  .f-prof{height:clamp(64px,10vh,130px)}
  .f-ctrl .btn{height:clamp(44px,3.2vw,58px);padding:0 clamp(18px,1.6vw,32px);font-size:clamp(14px,1vw,18px)}
  .full .moment{top:clamp(84px,9vh,120px);padding:clamp(10px,.8vw,14px) clamp(18px,1.4vw,26px) clamp(10px,.8vw,14px) clamp(10px,.8vw,14px)}
  .full .moment .mi{width:clamp(34px,2.4vw,46px);height:clamp(34px,2.4vw,46px)}
  .full .moment .mt b{font-size:clamp(14.5px,1.1vw,21px)}
  .full .moment .mt span{font-size:clamp(12.5px,.9vw,17px)}
}

/* ---------- Dämmerung: die ganze App im Look der Fahrt ---------- */
body{background:radial-gradient(120% 70% at 50% -10%,#2a1740 0%,var(--bg) 60%) fixed,var(--bg)}
/* Auf „Fahren“ rollt die Straße schon vor dem Start im Hintergrund, Karten liegen wie Glas darüber */
.backdrop{position:fixed;inset:0;z-index:-1;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
body[data-view="live"] .backdrop{opacity:1}
/* Ohne Weichzeichner: der müsste sonst 60-mal pro Sekunde über dem bewegten Hintergrund neu gerechnet werden */
body[data-view="live"] .card{background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 48px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
body[data-view="live"] .rrow{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
body[data-view="live"] .rrow.on{background:var(--accent-soft)}
.top{background:var(--glass)}
.card.live::before{background:radial-gradient(90% 70% at 18% 0%,color-mix(in srgb,var(--amb) 30%,transparent),transparent 70%)}

/* Zielleistung in der Fahrt-Ansicht */
.f-bot{grid-template-columns:auto 1fr auto;grid-template-areas:"prof prof prof" "erg keys ctrl"}
.f-erg{grid-area:erg;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(10,8,20,.5);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.f-erg .lbl{padding:0 8px 0 10px}
.f-erg button{height:36px;min-width:36px;border-radius:999px;border:0;background:transparent;color:#F1EEFF;font-size:18px;font-weight:500}
.f-erg button:hover{background:rgba(255,255,255,.1)}
.f-erg .f-erg-v{min-width:76px;font-size:15px;font-weight:600;color:rgba(241,238,255,.6)}
.f-erg.on .f-erg-v{background:#A78BFA;color:#0B0B0F}
@media (min-width:901px){.f-erg button{height:clamp(36px,2.6vw,48px);min-width:clamp(36px,2.6vw,48px)}.f-erg .f-erg-v{font-size:clamp(15px,1vw,19px);min-width:clamp(76px,5.5vw,104px)}}
@media (max-width:900px){.f-bot{grid-template-columns:1fr;grid-template-areas:"prof" "erg" "ctrl"}.f-erg{justify-self:center}}

/* ---------- Fahrt-Ansicht: Werte neu geordnet ---------- */
/* Oben links Name und Karte, unten links Distanz, rechts Steigung (farbig), Nebenwerte in ruhigen Pillen */
.f-tl{display:flex;flex-direction:column;gap:12px;min-width:0;flex:1}
.f-tr{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.f-tr .f-ghost{align-self:flex-end}
.f-map{width:clamp(170px,14vw,260px);aspect-ratio:1.4;border-radius:16px;background:rgba(10,8,20,.48);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.f-map canvas{display:block;width:100%;height:100%}
.f-hud{grid-template-columns:1fr auto 1fr;align-items:end}
.f-col{display:flex;flex-direction:column;gap:12px;text-shadow:0 1px 12px rgba(0,0,0,.55);min-width:0}
.f-col.r{align-items:flex-end;text-align:right}
.f-big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.f-big .lbl{flex-basis:100%}
.f-big b{font-size:clamp(52px,5.4vw,120px);font-weight:600;letter-spacing:-.045em;line-height:1;margin-top:4px}
.f-big small{font-size:clamp(16px,1.3vw,26px);color:rgba(241,238,255,.65);font-weight:500}
.f-col.r .f-big{justify-content:flex-end}
.f-prog{display:flex;align-items:center;gap:10px}
.f-bar{width:clamp(130px,12vw,240px);height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.f-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#7F5FE8,#C4B5FD)}
.f-of{font-size:clamp(13px,.95vw,18px);color:rgba(241,238,255,.7);white-space:nowrap}
.f-pills{display:flex;gap:8px;flex-wrap:wrap}
.f-col.r .f-pills{justify-content:flex-end}
.f-pill{display:inline-flex;align-items:baseline;gap:7px;padding:clamp(6px,.5vw,9px) clamp(12px,1vw,18px);border-radius:999px;background:rgba(10,8,20,.46);border:1px solid rgba(255,255,255,.12);text-shadow:none;white-space:nowrap}
.f-pill small{font:500 clamp(10.5px,.72vw,13px) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(241,238,255,.55)}
.f-pill b{font-size:clamp(17px,1.35vw,26px);font-weight:600;letter-spacing:-.02em}
.f-pill em{font-style:normal;font-size:clamp(12px,.85vw,16px);color:rgba(241,238,255,.55)}
/* Steigung: Farbe nach Steilheit, weich überblendet */
.f-grade{--gc:#6EE7B7}
.f-grade b,.f-grade small{color:var(--gc);transition:color .8s var(--ease)}
.f-grade b{text-shadow:0 0 34px color-mix(in srgb,var(--gc) 45%,transparent),0 2px 18px rgba(0,0,0,.5)}
.f-gword{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;font-size:clamp(13px,.95vw,17px);font-weight:600;color:var(--gc,#6EE7B7);background:color-mix(in srgb,var(--gc,#6EE7B7) 14%,rgba(10,8,20,.5));border:1px solid color-mix(in srgb,var(--gc,#6EE7B7) 40%,transparent);transition:color .8s,background .8s,border-color .8s}
@media (max-width:900px){
  .f-hud{grid-template-columns:1fr 1fr;grid-template-areas:"main main" "l r";gap:12px 10px}
  .f-col.l{grid-area:l}.f-col.r{grid-area:r}
  .f-big b{font-size:clamp(34px,9vw,48px)}
  .f-pill{padding:5px 10px}.f-pill b{font-size:16px}
  .f-bar{width:min(120px,28vw)}
  .f-map{width:min(150px,36vw)}
  .f-tr .f-ghost{flex-basis:auto;margin:0}
}
@media (max-width:640px){.f-map{display:none}.f-of{display:none}}
@media (max-width:640px){
  .f-route b{white-space:normal;font-size:18px;line-height:1.2}
  .f-tr .f-ghost{font-size:12px;padding:5px 10px;height:auto}
  .full .moment{top:118px;bottom:auto}
  .f-hud{bottom:calc(196px + env(safe-area-inset-bottom,0px))}
  .f-prof{height:44px}
}

/* FTP-Test */
.ftp-note{font-size:13px;color:var(--fg-3);margin:0 0 12px;line-height:1.45}
.riding #ftpCard{display:none}
.f-ramp{display:flex;flex-direction:column;gap:6px;padding:9px 16px;border-radius:16px;background:rgba(10,8,20,.55);border:1px solid rgba(245,196,81,.45);font-size:clamp(13.5px,.95vw,18px);font-weight:600;color:#F5C451;white-space:nowrap}
.f-ramp-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.f-ramp-bar i{display:block;height:100%;width:0;background:#F5C451;border-radius:2px;transition:width .9s linear}

/* Coach: deutliche Karte rechts oben, Zielleistung groß, Pfeil sagt mehr oder weniger */
.coach-opts{flex-direction:column;align-items:stretch!important;gap:6px!important}
.coach-opts .ftp-note{margin:0}
.coach-opts .seg button:disabled{opacity:.45;cursor:default}
.f-coach{--cc:#A78BFA;display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:clamp(220px,17vw,320px);max-width:min(360px,42vw);padding:12px 18px 13px;border-radius:18px;background:linear-gradient(160deg,rgba(127,95,232,.34),rgba(10,8,20,.62) 60%);border:1px solid color-mix(in srgb,var(--cc) 65%,transparent);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 8px 34px color-mix(in srgb,var(--cc) 28%,transparent);backdrop-filter:blur(12px);text-align:right;animation:tvIn .3s var(--ease);transition:border-color .5s,box-shadow .5s}
.f-coach[data-st="lo"]{--cc:#7DB8FF}
.f-coach[data-st="hi"]{--cc:#FDBA74}
.f-coach[data-st="ok"]{--cc:#6EE7B7}
.f-coach-k{display:flex;align-items:center;gap:7px;font:600 clamp(10.5px,.72vw,13px) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#C4B5FD}
.f-coach-k i{width:7px;height:7px;border-radius:50%;background:var(--cc);box-shadow:0 0 10px var(--cc);transition:background .5s}
.f-coach-m{display:flex;align-items:baseline;gap:5px;line-height:1}
.f-coach-m b{font-size:clamp(40px,3.4vw,68px);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.f-coach-m small{font-size:clamp(15px,1.1vw,22px);color:rgba(241,238,255,.65);font-weight:500}
.f-coach-i{font-style:normal;font:600 clamp(12.5px,.88vw,16px) var(--mono);color:var(--cc);min-height:1.2em;transition:color .5s}
.f-coach-t{font-size:clamp(16px,1.2vw,23px);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-top:2px}
.f-coach-s{font-size:clamp(12.5px,.88vw,16px);color:rgba(241,238,255,.7)}
.f-coach-v{display:block;align-self:stretch;width:100%;height:42px;margin-top:8px;border-radius:8px;background:rgba(255,255,255,.04)}
.f-coach-v[hidden]{display:none}
.f-coach-skip{margin-top:8px;height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#F1EEFF;font-size:12.5px;font-weight:500}
.f-coach-skip:hover{background:rgba(255,255,255,.14)}
.f-coach-skip[hidden]{display:none}
.f-coach-bar{align-self:stretch;height:3px;margin-top:7px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.f-coach-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7F5FE8,#C4B5FD);transition:width .9s linear}
@media (max-width:640px){.f-coach{min-width:0;max-width:62vw;padding:8px 12px}.f-coach-m b{font-size:30px}.f-coach-t{font-size:14px}.f-coach-s{font-size:12px}}

/* Strava */
.sv-ok{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
.sv-ok i{width:8px;height:8px;border-radius:50%;background:#FC4C02}
.btn.strava{border-color:#FC4C02;color:#FC4C02;text-decoration:none}
.btn.strava:hover{background:rgba(252,76,2,.1)}
a.btn.strava{display:inline-flex}
.sv-wait{display:inline-flex;align-items:center;gap:10px;color:#FF8A5C;font-weight:500}
.tag.strava{background:rgba(252,76,2,.15);color:#FF8A5C}

/* ---------- Handy: nur Verwaltung, Umschalter als Leiste unten ---------- */
html:not(.handy) .handy-only{display:none}
.handy #nav [data-v="live"],.handy .no-handy{display:none}
.handy #nav{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;padding:4px;background:var(--glass);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border:1px solid var(--line-2);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.handy #nav button{height:42px;padding:0 18px;font-size:14px}
.handy #nav .thumb{top:4px;height:42px;background:var(--surface-3);box-shadow:none}
.handy main.wrap{max-width:720px;padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.handy .top .wrap{max-width:720px}
/* Handy: keine leere Kopfzeile, Einstellungen schweben neben dem Seitentitel */
.handy .top{position:absolute;left:0;right:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.handy .top .icon-btn{pointer-events:auto;width:40px;height:40px}
.handy .top-in{height:56px}
.handy main.wrap{padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
.handy .page-h{min-height:32px;padding-right:52px}
.handy #toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
.sub-h{margin:4px 0 0;color:var(--fg-3);font-size:14px}
.home{display:grid;gap:16px}
.home .list{margin-top:0}
.home .row{box-shadow:none;background:var(--surface-2)}
.empty-a{margin-top:16px}
.empty code,.hd code{font:500 12.5px var(--mono);color:var(--fg-2)}
.hv-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hv-f .lbl{display:block;margin-bottom:7px}
.hv-f .field .pm{width:34px;flex:none}
.hv-f .field input{padding:0 2px}
.hv-f .field .u{padding-right:2px;font-size:13px}
.hv-est{margin-top:12px}
.hf svg{width:100%;height:90px;display:block}
.hf-ax{display:flex;justify-content:space-between;font:500 10.5px var(--mono);color:var(--fg-3);margin-top:6px}
.hd .dlg-row{margin-bottom:12px}
.hd-how{margin:0}
.hd-tip{text-align:center;margin:4px 8px 0}
.tag.warn{background:var(--gap-soft);color:var(--gap-ink)}
@media (max-width:640px){
  .handy #nav button{padding:0 16px}
  .home .row{grid-template-columns:62px minmax(0,1fr) 56px 40px;padding:11px 12px}
}

/* Konto */
.k-form{display:grid;gap:10px}
.k-form .ftp-note{margin:0}
.k-in{height:42px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);padding:0 12px;font-size:16px;outline:none;width:100%;transition:border-color .2s,box-shadow .2s}
.k-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.k-msg{margin:0}
.k-msg.soft{color:var(--fg-2)}
.k-ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.k-me{display:flex;align-items:center;gap:14px;min-width:0}
.k-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;font-size:17px;color:var(--on-accent);background:linear-gradient(150deg,var(--accent-ink),var(--accent) 55%,#7F5FE8)}
.k-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.k-ok{font-size:13px;color:var(--fg-3);overflow-wrap:anywhere}
.k-ok b{display:block;color:var(--fg);font-size:15px;font-weight:600}
.k-st{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg-3)}
.k-st i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.k-st.warn i{background:var(--gap)}
.empty-k{max-width:340px;margin:18px auto 0;text-align:left}

/* ---------- Handy-Dashboard: Grafiken ---------- */
.hp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hp-big{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.hp-big b{font-size:48px;font-weight:600;letter-spacing:-.05em;line-height:1}
.hp-big small{font-size:16px;color:var(--fg-3);font-weight:500}
.hp-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-bottom:4px}
.hp-n{font-size:14px;color:var(--fg-2);font-weight:500}
.hp-d{font:600 12px var(--mono);padding:3px 8px;border-radius:999px}
.hp-d.up,.hk3 em.up{color:var(--ok-ink);background:var(--ok-soft)}
.hp-d.dn,.hk3 em.dn{color:var(--gap-ink);background:var(--gap-soft)}
.hbars{display:block;width:100%;height:auto;margin-top:16px;overflow:visible}
.hbars text{font:500 9.5px var(--mono);fill:var(--fg-3)}
.hbars text.cur{fill:var(--accent-ink)}
.hbars rect.b{fill:var(--z3);transform-box:fill-box;transform-origin:bottom;animation:barup .8s var(--ease) both;animation-delay:calc(var(--i)*22ms)}
.hbars rect.b.cur{fill:var(--accent)}
.hbars g{cursor:pointer}
.hbars g.sel rect.b{fill:var(--accent-ink)}
@keyframes barup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hp-cap{margin:8px 0 0;font-size:13px;color:var(--fg-3);text-align:center;min-height:20px}
.hp-cap b{color:var(--fg-2);font-weight:500}
.hp-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.hp-g>div{background:var(--surface-2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.hp-g b{font-size:19px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.hp-g b small{font-size:11.5px;font-weight:500;color:var(--fg-3);letter-spacing:0;margin-left:3px}
.hp-g .lbl{font-size:10px}
.hzd{margin-top:16px}
.hzd-bar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden}
.hzd-bar i{background:var(--zc);transform-origin:left;animation:grow 1s var(--ease) both .15s}
.hzd-l{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:12.5px;color:var(--fg-3)}
.hzd-l span{display:inline-flex;align-items:center;gap:6px}
.hzd-l i{width:8px;height:8px;border-radius:2px;background:var(--zc)}
.hzd-l b{color:var(--fg-2);font-weight:600}
/* Form */
.hk3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.hk3>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.hk3 b{font-size:34px;font-weight:600;letter-spacing:-.045em;line-height:1}
.hk3 b.pos{color:var(--ok-ink)}
.hk3 b.neg{color:var(--accent-ink)}
.hk3 em{font:600 11.5px var(--mono);font-style:normal;padding:2px 7px;border-radius:999px;align-self:flex-start}
.hform-s{display:block;width:100%;height:96px}
.hform-s .ln{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.4s var(--ease) forwards .1s}
@keyframes draw{to{stroke-dashoffset:0}}
.hform .hf-ax{align-items:center}
.hform .legend-in{font-size:10.5px}
.tag.ok{background:var(--ok-soft);color:var(--ok-ink)}
/* Rekorde */
.hrec-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hrec-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:0;border-radius:14px;padding:12px 14px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 16%,var(--surface-2)),var(--surface-2) 70%);transition:transform .2s var(--ease)}
.hrec-t:active{transform:scale(.97)}
.hrec-t b{font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.hrec-t b small{font-size:13px;color:var(--fg-3);font-weight:500;margin-left:3px;letter-spacing:0}
.hrec-t .wk{font:500 12px var(--mono);color:var(--fg-2)}
.hrec-t .new{position:absolute;top:10px;right:10px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;font-style:normal;color:#2A1F00;background:#F5C451;border-radius:999px;padding:2px 7px}
.hrec-t.off{opacity:.45;background:var(--surface-2)}
/* Kalender */
.hcal-s{display:block;width:100%;height:auto}
.hcal-s text{font:500 9px var(--mono);fill:var(--fg-3)}
.hcal-s rect.today{stroke:var(--fg);stroke-width:1.4}
/* Werte */
.hv-top{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.hv-big{display:flex;align-items:baseline;gap:4px;margin-top:4px}
.hv-big b{font-size:40px;font-weight:600;letter-spacing:-.05em;line-height:1}
.hv-big small{font-size:15px;color:var(--fg-3);font-weight:500}
.hv-lv{margin-left:auto;margin-bottom:6px}
.hzb{margin:18px 0 20px}
.hzb-bar{display:flex;gap:2px;height:22px;border-radius:7px;overflow:hidden}
.hzb-bar span{background:var(--zc);display:grid;place-items:center;min-width:0}
.hzb-bar em{font:600 9.5px var(--mono);font-style:normal;color:var(--bg);opacity:.85}
.hzb-bar span:nth-child(-n+2) em{color:var(--fg-2)}
.hzb-w{position:relative;height:14px;margin-top:5px}
.hzb-w span{position:absolute;transform:translateX(-50%);font:500 10px var(--mono);color:var(--fg-3)}
@media (prefers-reduced-motion:reduce){.hbars rect.b,.hzd-bar i,.hform-s .ln{animation:none;stroke-dashoffset:0}}
@media (max-width:640px){
  .hk3 b{font-size:30px}
  .hp-big b{font-size:44px}
  .hv-big b{font-size:36px}
}
.st-avg{display:block;font:500 12px var(--mono);color:var(--fg-3);margin-top:2px;min-height:16px}

/* ---------- Apple TV als Fernbedienung (Mac-App) ---------- */
.f-tvb.pw{color:rgba(241,238,255,.7)}
.f-tvb.pw:hover{color:#F1EEFF}
.f-tvb.wait{animation:breathe 1.4s var(--ease) infinite;pointer-events:none}
.f-tv-x{display:grid;place-items:center}
#fTvOff:hover{color:#F2555A;border-color:rgba(242,85,90,.5)}
.f-tv{width:176px;padding:10px 12px;border-radius:18px;background:rgba(10,8,20,.42);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:8px;animation:tvIn .25s var(--ease);transition:opacity .8s var(--ease)}
/* Nach ein paar Sekunden ohne Bedienung tritt sie zurück, Maus oder Taste holen sie wieder */
.f-tv.idle{opacity:.28}
.f-tv.idle:hover{opacity:1;transition-duration:.2s}
.f-tvb{width:34px!important;height:34px!important;opacity:.55;transition:opacity .2s}
.f-tvb:hover{opacity:1}
@keyframes tvIn{from{opacity:0;transform:translateY(-6px)}}
.f-tv-head{display:flex;align-items:center;gap:8px;min-width:0}
.f-tv-head i{width:7px;height:7px;border-radius:50%;background:rgba(241,238,255,.3);flex:none;transition:background .3s}
.f-tv.live .f-tv-head i{background:#6EE7B7}
.f-tv-head b{flex:1;min-width:0;font-size:12.5px;font-weight:500;color:rgba(241,238,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-tv-x{width:22px;height:22px;border-radius:7px;border:1px solid transparent;background:transparent;color:rgba(241,238,255,.7);font:600 11px var(--mono)}
.f-tv-x:hover{background:rgba(255,255,255,.1)}
.f-tv-now{font-size:11.5px;color:rgba(241,238,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px;margin-top:-4px}
.f-tv-pad{position:relative;width:118px;height:118px;margin:0 auto;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr)}
.f-tv-pad button{border:0;background:transparent;color:rgba(241,238,255,.8);display:grid;place-items:center;border-radius:50%;transition:background .12s,color .12s,transform .12s}
.f-tv-pad .u{grid-area:1/2}.f-tv-pad .l{grid-area:2/1}.f-tv-pad .r{grid-area:2/3}.f-tv-pad .d{grid-area:3/2}
.f-tv-pad .ok{grid-area:2/2;margin:2px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font:600 13px var(--mono);letter-spacing:.04em;color:#F1EEFF}
.f-tv button:hover{background:rgba(255,255,255,.12);color:#F1EEFF}
.f-tv button.hit{background:#A78BFA;color:#0B0B0F;transform:scale(.94)}
.f-tv-row{display:flex;justify-content:space-between;gap:4px}
.f-tv-row button{flex:1;height:30px;border-radius:10px;border:0;background:rgba(255,255,255,.05);color:rgba(241,238,255,.75);display:grid;place-items:center;font-size:16px;font-weight:500}
.f-tv.playing .pp{color:#A78BFA}
@media (max-width:900px){.f-tv{width:160px}.f-tv-pad{width:104px;height:104px}}
.sv-ok.tv i{background:var(--fg-3)}
.sv-ok.tv.on i{background:#6EE7B7}
.tv-list{display:grid;gap:6px;margin-bottom:10px}
.tv-list .btn{justify-content:space-between;width:100%}
.tv-list small{color:var(--fg-3);font-weight:400;margin-left:8px}
.tv-pinrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tv-pin{width:96px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg);font:600 18px var(--mono);letter-spacing:.3em;text-align:center}
.tv-pin:focus{outline:2px solid var(--accent);outline-offset:1px}
.ftp-note.warn{color:var(--gap-ink)}
@media (max-width:640px){.k-ins{grid-template-columns:1fr}.vals{grid-template-columns:repeat(2,minmax(0,1fr))}.set-body{padding:4px 20px}.dlg-h{padding:18px 18px 14px 20px}}
@media (max-width:640px){
  .kv .st:nth-child(odd){padding-left:0;border-left:0}
  /* Bestwerte am Handy: drei kleine Kacheln nebeneinander */
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .kpi{padding:14px 12px;gap:4px}
  .kpi .lbl{font-size:9.5px;letter-spacing:.04em}
  .kpi .v{font-size:26px}
  .kpi .v small{font-size:12px;margin-left:2px}
  .kpi .sub{font-size:11.5px;line-height:1.35}
  .kpi .btn{height:28px;padding:0 10px;font-size:12px}
}

/* ---------- Download-Seite (Webseite am Computer) ---------- */
body.landing>*:not(#landing):not(#toast):not(#cvBack){display:none!important}
.landing{min-height:100vh;display:grid;place-items:center;padding:56px 16px;position:relative;z-index:1}
.ld-in{width:min(720px,100%);display:flex;flex-direction:column;gap:14px}
.landing h1{margin:0;font-size:clamp(44px,7vw,72px);line-height:1;letter-spacing:-.05em;font-weight:600}
.ld-lead{margin:0 0 18px;max-width:560px;font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:var(--fg-2)}
.ld-ok{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding:16px 18px;border-radius:16px;background:color-mix(in srgb,#6EE7B7 10%,var(--surface));border:1px solid color-mix(in srgb,#6EE7B7 45%,transparent)}
.ld-ok.warn{background:var(--surface);border-color:var(--line-2)}
.ld-ok-i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#6EE7B7;color:#0B0B0F}
.ld-ok.warn .ld-ok-i{background:var(--fg-3)}
.ld-ok div{display:flex;flex-direction:column;gap:2px}
.ld-ok b{font-size:17px}
.ld-ok div span{font-size:14px;color:var(--fg-2);line-height:1.45}
.ld-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ld-col{display:flex;flex-direction:column;gap:14px}
.ld-btn{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);text-decoration:none;transition:transform .2s var(--ease),border-color .2s,background .2s}
.ld-btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.ld-btn span{display:flex;flex-direction:column;gap:2px}
.ld-btn b{font-size:17px;font-weight:600}
.ld-btn small{font-size:13px;color:var(--fg-3)}
.ld-btn.primary{background:var(--accent);border-color:var(--accent);color:#0B0B0F}
.ld-btn.primary small{color:rgba(11,11,15,.7)}
.ld-col ol{margin:0;padding:0 4px 0 22px;display:grid;gap:6px;font-size:13.5px;line-height:1.5;color:var(--fg-3)}
@media (max-width:640px){.ld-dl{grid-template-columns:1fr;gap:28px}}

/* ---------- Einrichten beim ersten Start ---------- */
#dlgStart{width:min(520px,calc(100vw - 32px))}
.dlg.ob{display:flex;flex-direction:column;gap:0;padding:0}
.ob-dots{display:flex;gap:6px;padding:22px 26px 0}
.ob-dots i{width:22px;height:4px;border-radius:2px;background:var(--line-2);transition:background .3s}
.ob-dots i.done{background:color-mix(in srgb,var(--accent) 50%,var(--line-2))}
.ob-dots i.on{background:var(--accent)}
.ob-body{padding:16px 26px 8px;display:flex;flex-direction:column;gap:10px;min-height:230px}
.ob-body h2{font-size:22px;letter-spacing:-.02em;margin:0}
.ob-body h2 small{font-size:13px;font-weight:500;color:var(--fg-3);margin-left:6px}
.ob-body .ftp-note{margin:0}
.ob-body .konto{margin-top:6px}
.ob-vals{margin-top:6px}
.ob-tip{font-size:12.5px!important}
.ob-foot{display:flex;align-items:center;gap:10px;padding:16px 22px 20px 26px;border-top:1px solid var(--line)}
@media (max-width:520px){.ob-vals{grid-template-columns:repeat(2,minmax(0,1fr))}}