:root{
  --bg:#0E1014; --card:#171A21; --card2:#1F232C; --line:#2A2F3A; --line2:#3A404D;
  --text:#F2F4F7; --muted:#A3AAB8; --accent:#C8F04A; --accent-bg:#2A3312; --accent-line:#3A4420;
  --run:#FF9F43; --ride:#5AB0FF; --green:#4ADE80; --green-bg:#173A26; --yellow:#FBBF24; --yellow-bg:#3A2F12;
  --red:#F87171; --red-bg:#3D1F1F; --nav:#13161C;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.4}
a{color:var(--accent)}
a:hover{color:#E0FF8A}
.app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;gap:14px;padding:20px 16px 110px}
.num{font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700}
h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.3px}
h2{margin:0;font-size:20px;font-weight:700}
.sub{font-size:13px;color:var(--muted);font-weight:500}
.muted{color:var(--muted)}
.small{font-size:13px}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.head .titles{display:flex;flex-direction:column;gap:2px}
.card{background:var(--card);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card.accent{border:1px solid var(--accent-line)}
.card-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-title strong{font-size:16px}
.label{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.label.accent{color:var(--accent)} .label.run{color:var(--run)} .label.ride{color:var(--ride)}
.grid2,.grid3,.grid4{display:grid;gap:8px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{background:var(--card2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .k{font-size:12px;color:var(--muted)}
.tile .v{font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:700;white-space:nowrap}
.tile .v small{font-family:Barlow,sans-serif;font-size:13px;color:var(--muted);font-weight:500}
.tile.center{text-align:center}
.t-gruen{color:var(--green)} .t-gelb{color:var(--yellow)} .t-rot{color:var(--red)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:8px;padding:5px 10px;white-space:nowrap}
.badge.gruen{color:var(--green);background:var(--green-bg)}
.badge.gelb{color:var(--yellow);background:var(--yellow-bg)}
.badge.rot{color:var(--red);background:var(--red-bg)}
.badge.grau{color:var(--muted);background:var(--card2)}
.ready{display:flex;align-items:center;gap:12px}
.dot{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dot.gruen{background:var(--green-bg);color:var(--green)} .dot.gelb{background:var(--yellow-bg);color:var(--yellow)}
.dot.rot{background:var(--red-bg);color:var(--red)} .dot.grau{background:var(--card2);color:var(--muted)}
.dot.accent{background:var(--accent-bg);color:var(--accent)}
.btn{min-height:44px;border:0;border-radius:12px;background:var(--accent);color:#0E1014;font:700 15px Barlow,sans-serif;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer}
.btn:hover{color:#0E1014;filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line2);font-weight:600}
.btn.danger{background:transparent;color:var(--red);border:1px solid #5a2a2a;font-weight:600}
.btn.block{width:100%}
.row{display:flex;gap:8px}
.row>*{flex:1}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:14px;padding:12px;text-decoration:none;color:var(--text)}
.item:hover{color:var(--text);background:#1b1f27}
.item .date{width:42px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.item .date span{font-size:12px;color:var(--muted)}
.item .date b{font-family:"Barlow Condensed",sans-serif;font-size:22px}
.item .body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.item .body b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .body span{font-size:13px;color:var(--muted)}
.item.today{border:1.5px solid var(--run)}
.item.rest{background:var(--nav)}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.week .d{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.week .d.now{color:var(--text);font-weight:700}
.week .c{width:30px;height:30px;border-radius:15px;border:1px dashed var(--line2);display:flex;align-items:center;justify-content:center}
.week .c.run{background:#3D2A17;border:0} .week .c.ride{background:#1E3550;border:0} .week .c.other{background:var(--card2);border:0}
.week .c.both{background:linear-gradient(135deg,#3D2A17 50%,#1E3550 50%);border:0}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:5px;margin-right:6px;vertical-align:-1px}
.progress{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;background:var(--accent)}
.zones{display:flex;flex-direction:column;gap:8px;font-size:13px}
.zones .z{display:flex;align-items:center;gap:10px}
.zones .z .n{width:26px;color:var(--muted)}
.zones .z .bar{flex:1;height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.zones .z .bar span{display:block;height:100%;border-radius:5px}
.zones .z .t{width:56px;text-align:right}
table{width:100%;border-collapse:collapse;font-size:14px}
th{color:var(--muted);font-size:12px;font-weight:600;text-align:left;padding:0 6px 8px 0}
td{padding:9px 6px 9px 0;border-top:1px solid var(--line)}
td.r,th.r{text-align:right}
.scroll{overflow-x:auto}
.chart{display:block;height:auto}
.kv{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);gap:8px}
.kv:last-child{border-bottom:0}
.kv .k{font-size:14px;color:var(--muted)}
.kv .v{font-size:15px;font-weight:700;text-align:right}
.delta{font-size:12px;font-weight:600;color:var(--green)}
.flash{border-radius:12px;padding:12px 14px;font-size:14px;background:var(--green-bg);color:#c9f7d8}
.flash.fehler{background:var(--red-bg);color:#ffd2d2}
.empty{color:var(--muted);font-size:14px;line-height:1.5}
.rpe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rpe button{min-height:44px;border:0;border-radius:10px;background:var(--card2);color:var(--text);font:600 16px Barlow,sans-serif;cursor:pointer}
.rpe button:hover,.rpe button.sel{background:var(--accent);color:#0E1014}
.scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
/* Formulare */
form.stack{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span,.field>label{font-size:13px;color:var(--muted);font-weight:600}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=email],select,textarea{
  width:100%;min-height:44px;border:1px solid var(--line2);border-radius:12px;background:var(--card2);color:var(--text);padding:10px 12px;font:15px Barlow,sans-serif}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
input[type=file]{color:var(--muted);font:14px Barlow,sans-serif}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line2);border-radius:20px;font-size:14px;cursor:pointer}
.chips input{accent-color:var(--accent)}
.seg{display:flex;background:var(--card2);border-radius:10px;padding:3px;gap:3px}
.seg label{flex:1;text-align:center;min-height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked+span{color:var(--text)}
.seg label:has(input:checked){background:var(--line2);color:var(--text)}
/* Navigation unten */
.nav{position:fixed;left:0;right:0;bottom:0;background:var(--nav);border-top:1px solid var(--line);padding:8px 4px calc(10px + env(safe-area-inset-bottom))}
.nav ul{list-style:none;margin:0 auto;padding:0;max-width:560px;display:flex;justify-content:space-around}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:60px;min-height:48px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:600;position:relative}
.nav a[aria-current=page]{color:var(--accent);font-weight:700}
.nav .cnt{position:absolute;top:2px;right:12px;min-width:16px;height:16px;border-radius:8px;background:var(--accent);color:#0E1014;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.menu{background:var(--card);border-radius:18px;display:flex;flex-direction:column;overflow:hidden}
.menu a{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 14px;text-decoration:none;color:var(--text);border-top:1px solid var(--line)}
.menu a:first-child{border-top:0}
.menu a .t{flex:1;display:flex;flex-direction:column;gap:1px}
.menu a .t b{font-size:15px;font-weight:600}
.menu a .t span{font-size:13px;color:var(--muted)}
.menu svg{flex-shrink:0}
.sec-label{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:4px 4px 0}
.back{width:44px;height:44px;border-radius:22px;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none}
.back:hover{color:var(--text)}
.pager{display:flex;justify-content:space-between;align-items:center}
.pager a{width:44px;height:44px;border-radius:22px;background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center}
.pager .mid{display:flex;flex-direction:column;align-items:center;gap:1px}
.note{white-space:pre-line}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login .card{width:100%;max-width:380px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
details summary{cursor:pointer;color:var(--muted);font-size:14px}
code{background:var(--card2);padding:2px 6px;border-radius:6px;font-size:13px}