/* Laufrudel – Entwurf 1 „Startnummer“: Papierweiß, Marineblau, Startnummer-Rot, schmale fette Ziffern */
@font-face{font-family:"Mona Sans";src:url(fonts/mona-sans.woff2) format("woff2");font-weight:400 900;font-stretch:75% 125%;font-display:swap}
:root{
  --bg:#f3f4f6;--card:#fff;--ink:#131c34;--muted:#5f6880;--line:#e2e5ec;--chip:#e8ebf1;
  --accent:#e3262b;--accent-ink:#c41d22;--on-accent:#fff;--blue:#1d4ed8;--ok:#1f7a4d;
  --z1:#c9cfdb;--z2:#9fb2d9;--z3:#1d4ed8;--z4:#f08a3c;--z5:#e3262b;
  --r:6px;--sans:"Mona Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nav-h:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45}
[hidden]{display:none!important}
.defs{position:absolute}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Schrift: Überschriften schmal, fett, Großbuchstaben wie Startnummern */
.h{font-weight:900;font-stretch:75%;text-transform:uppercase;line-height:.95;letter-spacing:.005em;margin:0}
.title{font-size:40px;text-wrap:balance}
.sub-title{font-size:26px}
.hello{font-size:44px;margin-bottom:6px}
.lbl{font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.sub{font-size:13px;color:var(--muted);margin:0}
.num{font-variant-numeric:tabular-nums}
.error{color:var(--accent-ink);font-size:13.5px;margin:0;min-height:0}
.error:empty{display:none}

/* Grundlayout */
#app{max-width:600px;margin:0 auto;min-height:100vh}
main{padding:0 max(16px,env(safe-area-inset-right)) calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.view{display:flex;flex-direction:column;gap:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
.logo{font-size:22px;background:none;border:0;padding:4px 0;cursor:pointer}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:750;font-size:14px;background:var(--chip);color:var(--ink);flex:none;border:0;padding:0}
.av.me{background:var(--accent);color:var(--on-accent);cursor:pointer}
.bar{display:flex;justify-content:space-between;align-items:center;margin:0 -8px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:50%;cursor:pointer;color:var(--ink)}
.icon-btn:hover{background:var(--chip)}
.ic{width:22px;height:22px;flex:none}

/* Karten, Knöpfe, Felder */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:4px;border:0;background:var(--ink);color:#fff;font-weight:750;font-size:14.5px;cursor:pointer;text-decoration:none}
.btn:hover{background:#1f2a4a}
.btn:disabled{opacity:.55;cursor:default}
.btn.wide{width:100%}
.btn.small{min-height:36px;padding:6px 12px;font-size:13px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--chip)}
.btn.red{background:var(--accent)}
.btn.red:hover{background:var(--accent-ink)}
.btn.danger{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn.danger:hover{background:#fdeceb}
.btn.on{background:var(--accent)}
.link{background:none;border:0;padding:0;color:var(--blue);text-decoration:underline;cursor:pointer;font-size:14px}
.field{font-size:12.5px;font-weight:650;color:var(--muted)}
input:not([type=checkbox]):not([type=file]),textarea{width:100%;min-height:44px;padding:10px 12px;border:1.5px solid var(--line);border-radius:4px;background:#fff;font-size:16px}
input:focus,textarea:focus{border-color:var(--ink);outline:none}
textarea{resize:vertical}
.check{display:flex;gap:10px;align-items:center;font-weight:600;min-height:44px}
.check input{width:22px;height:22px;accent-color:var(--accent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.form-grid .full{grid-column:1/-1}
.form-grid > div{display:flex;flex-direction:column;gap:4px;min-width:0}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
details > summary{cursor:pointer;list-style:none}
details > summary::-webkit-details-marker{display:none}
details > summary::after{content:" +";color:var(--muted)}
details[open] > summary::after{content:" –"}

/* Chips */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-height:36px;padding:7px 13px;border-radius:4px;background:var(--chip);border:0;font-size:13px;font-weight:650;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.chip.day{min-width:46px}

/* Startnummer: weiße Karte, rotes Band, vier Nadellöcher */
.bib{position:relative;background:
  radial-gradient(circle at 13px 36px,var(--bg) 0 3.5px,var(--line) 3.5px 4.5px,transparent 5px),
  radial-gradient(circle at calc(100% - 13px) 36px,var(--bg) 0 3.5px,var(--line) 3.5px 4.5px,transparent 5px),
  radial-gradient(circle at 13px calc(100% - 13px),var(--bg) 0 3.5px,var(--line) 3.5px 4.5px,transparent 5px),
  radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),var(--bg) 0 3.5px,var(--line) 3.5px 4.5px,transparent 5px),var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:38px 16px 16px;overflow:hidden}
.bib-band{position:absolute;inset:0 0 auto;height:24px;margin:0;background:var(--accent);color:#fff;font-size:10px;letter-spacing:.24em;font-weight:800;text-transform:uppercase;display:flex;align-items:center;justify-content:center}

/* Login */
.login{max-width:440px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:calc(24px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.login-bib{padding:44px 22px 24px}
.login-title{font-size:clamp(64px,22vw,96px);line-height:.82}
.login-sub{margin:14px 0 0;color:var(--muted);max-width:32ch}
.foot{font-size:13.5px;color:var(--muted);text-align:center;margin:0}

/* Start */
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:74px;margin-top:12px}
.wk div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-width:0}
.wk em{font-style:normal;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:13px}
.wk i{width:100%;max-width:30px;border-radius:3px;height:3px;background:var(--chip)}
.wk i.r{background:var(--ink)}
.wk i.today{outline:2px solid var(--accent);outline-offset:2px}
.wk span{font-size:10.5px;color:var(--muted);font-weight:650}
.today{background:var(--ink);color:#fff;border-radius:var(--r);padding:16px}
.today .lbl{color:#aab3cc}
.today .big{font-size:46px;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.today p{margin:0;font-size:13.5px;opacity:.9}
.today .btn{margin-top:12px;background:#fff;color:var(--ink)}
.prog{height:5px;border-radius:3px;background:var(--chip);margin-top:12px;overflow:hidden}
.today .prog{background:rgba(255,255,255,.18)}
.prog i{display:block;height:100%;background:var(--accent);width:var(--w,0%)}

/* Feed */
.post{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.post:hover{border-color:#c9cfdb}
.who{display:flex;gap:10px;align-items:center;min-width:0}
.who b{display:block;font-size:14px}
.who .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who > div{min-width:0}
.pbody{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;margin-top:10px}
.pnum{font-size:66px;font-weight:900;font-stretch:75%;line-height:.85;font-variant-numeric:tabular-nums}
.pnum small{font-size:14px;font-weight:650;font-stretch:100%;margin-left:4px;color:var(--muted)}
.ps{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.ps b{color:var(--ink);font-size:14px;margin-right:3px;font-variant-numeric:tabular-nums}
.thumb{width:120px;height:86px;border-radius:4px;background:#e9ecf1;flex:none}
.thumb path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.react{display:flex;gap:6px;margin-top:10px;align-items:center;flex-wrap:wrap}
.react button,.react span{display:inline-flex;gap:6px;align-items:center;min-height:36px;padding:4px 10px;border-radius:4px;border:0;background:transparent;font-size:13px;color:var(--muted);font-weight:600}
.react button{cursor:pointer}
.react button:hover{background:var(--chip)}
.react .on{color:var(--accent-ink)}
.react .ic{width:18px;height:18px}
.empty{color:var(--muted);text-align:center;padding:18px 8px;margin:0}

/* Lauftreff */
.treff{display:flex;gap:12px;align-items:flex-start}
.date{width:52px;height:58px;border-radius:4px;background:var(--accent);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1;flex:none}
.date span{font-size:10px;text-transform:uppercase;font-weight:750;letter-spacing:.08em;color:#ffd5d6}
.date b{font-size:24px;font-weight:900;font-stretch:75%}
.treff .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.treff .t b{font-size:15px}
.treff .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:2px 6px;vertical-align:2px;margin-left:6px}
.notes{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 0;font-size:13.5px}

/* Kacheln und Diagramme */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tiles > .tile:last-child:nth-child(odd){grid-column:1/-1}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-width:0}
.tile b{display:block;font-size:32px;font-weight:900;font-stretch:75%;line-height:1.05;font-variant-numeric:tabular-nums}
.tile b small{font-size:12.5px;font-weight:650;font-stretch:100%;margin-left:3px;color:var(--muted)}
.tile span{font-size:11.5px;color:var(--muted)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--sans);font-size:10px;fill:var(--muted)}
.chart .bar-r{fill:var(--ink)}
.chart .bar-now{fill:var(--accent)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.chart .hrline{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
.chart .pt{fill:var(--card);stroke:var(--accent);stroke-width:2}
.chart .val{fill:var(--ink);font-weight:700}
.records{list-style:none;margin:8px 0 0;padding:0}
.records li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.records li:last-child{border-bottom:0}
.records b{font-size:22px;font-weight:900;font-stretch:75%;font-variant-numeric:tabular-nums}
.records button{grid-column:1/-1;justify-self:start}
.runlist{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.runrow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.runrow:last-child{border-bottom:0}
.runrow:hover{background:#f8f9fb}
.runrow b{font-variant-numeric:tabular-nums}
.runrow .sub{grid-column:1/-1}

/* Lauf im Detail */
.run-title{font-size:38px;margin-bottom:6px;overflow-wrap:anywhere}
.map-wrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.map{height:260px;background:#e9ecf1}
.leaflet-container{font-family:var(--sans)}
.pb{display:inline-flex;align-self:flex-start;gap:6px;align-items:center;padding:5px 11px;border-radius:4px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:750}
.besties{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.besties span{font-size:13px;color:var(--muted)}
.besties b{color:var(--ink);font-size:15px;margin-left:4px;font-variant-numeric:tabular-nums}
.besties .pr b{color:var(--accent-ink)}
.zones{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;margin-top:10px}
.zones i{flex:var(--f);background:var(--c)}
.zl{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px;font-size:10.5px;color:var(--muted)}
.zl span{display:flex;flex-direction:column;min-width:0}
.zl span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);margin-bottom:4px}
.zl b{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.spls{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.spl{display:grid;grid-template-columns:62px 1fr 42px;gap:8px;align-items:center;font-size:12px;min-height:18px;font-variant-numeric:tabular-nums;color:var(--muted)}
.spl i{height:8px;border-radius:4px;width:var(--w);background:var(--ink)}
.spl b{color:var(--ink);text-align:right}
.spl.best i{background:var(--accent)}
.spl.best b{color:var(--accent-ink)}
.kudos-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.kudos-row .sub{flex:1;min-width:0}
.comments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.comments li.sub{display:block}
.comments li{display:grid;grid-template-columns:32px 1fr auto;gap:2px 10px;align-items:start}
.comments .av{width:32px;height:32px;font-size:12px;grid-row:span 2}
.comments p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;grid-column:2/4}
.comment-form{display:flex;gap:8px;align-items:flex-end}
.comment-form textarea{min-height:44px}

/* Rangliste */
.lb{list-style:none;margin:0;padding:4px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.lb li{display:grid;grid-template-columns:30px 34px minmax(0,1fr) auto;grid-template-areas:"rk av nm val" "rk av lane lane";column-gap:10px;row-gap:6px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.lb li:last-child{border-bottom:0}
.rk{grid-area:rk;font-weight:900;font-stretch:75%;font-size:30px;text-align:center;color:var(--accent);font-variant-numeric:tabular-nums}
.lb .av{grid-area:av}
.nm{grid-area:nm;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm em{font-style:normal;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:#fff;border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.val{grid-area:val;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.lane{grid-area:lane;height:5px;border-radius:3px;background:var(--chip);overflow:hidden}
.lane i{display:block;height:100%;width:var(--p);background:var(--ink);border-radius:inherit}
.lb .me .lane i{background:var(--accent)}

/* Pläne */
.plan-card h2{font-size:28px}
.plan-meta{font-size:13px;color:var(--muted);margin:4px 0 10px}
.week{border-top:1px solid var(--line);padding-top:8px}
.week:first-child{border-top:0}
.week summary{font-weight:750;font-size:14px;padding:6px 0}
.sess{display:grid;grid-template-columns:62px 1fr 26px;gap:2px 10px;padding:8px 0;align-items:start;font-size:13.5px}
.sess .d{font-weight:750;font-variant-numeric:tabular-nums}
.sess .ty{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block}
.sess .st{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;background:var(--chip);color:var(--muted)}
.sess.erledigt .st{background:var(--ok);color:#fff}
.sess.heute{background:#fdeceb;margin:0 -8px;padding:8px;border-radius:4px}
.sess.heute .st{background:var(--accent);color:#fff}
.sess.verpasst .st{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.sess.vorher{opacity:.55}

/* Hinzufügen */
.drop.over{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.howto ul{margin:8px 0 0;padding-left:18px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.results li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:4px;padding:10px 12px;font-size:13.5px;overflow-wrap:anywhere}
.results li.warn{border-left-color:#f0a33c}
.results li.err{border-left-color:var(--accent)}
.results li button{margin-top:6px}
#manualBox summary{padding:2px 0}
#manualBox[open] summary{margin-bottom:12px}
.danger-zone{border-color:#f3c6c4}

/* Navigation unten */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:grid;grid-template-columns:repeat(5,1fr);align-items:start;max-width:600px;margin:0 auto;
  min-height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:8px max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));
  background:#fff;border-top:1px solid var(--line)}
.nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;padding:4px 0;border:0;background:none;font-size:11px;font-weight:650;color:#7a8299;cursor:pointer}
.nav button.on{color:var(--ink)}
.nav button.on::after{content:"";position:absolute;bottom:0;width:18px;height:3px;border-radius:2px;background:var(--accent)}
.nav .plus{width:54px;height:54px;justify-self:center;justify-content:center;border-radius:6px;background:var(--accent);color:#fff;margin-top:-6px;min-height:0}
.nav .plus.on{color:#fff}
.nav .plus.on::after{display:none}
.nav .plus .ic{width:26px;height:26px}
.dot{position:absolute;top:2px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff}

/* Dialoge und Meldungen */
dialog{border:0;border-radius:8px;padding:18px;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;color:var(--ink);background:var(--card)}
dialog::backdrop{background:rgba(19,28,52,.45)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:2000;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:4px;font-size:14px;font-weight:600;max-width:calc(100vw - 32px);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* Datenschutzseite */
.legal{max-width:680px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
.legal h2{font-size:18px;margin:26px 0 6px}
.legal li{margin-bottom:6px}

@media (max-width:380px){.title{font-size:34px}.pnum{font-size:56px}.thumb{width:96px;height:72px}.tile b{font-size:28px}}