:root{
  --bg:#F3F6F5; --surface:#FFFFFF; --surface-2:#E9EFED; --line:#DBE3E0;
  --text:#111B19; --muted:#5C6C68;
  --accent:#0E6F66; --accent-ink:#FFFFFF; --accent-soft:#D5E9E5;
  --run:#A85E10; --run-soft:#FAE9D3;
  --admin:#3B4A6B; --admin-soft:#DFE5F0;
  --ok:#2C7A4B; --warn:#A85E10; --bad:#A93A31;
  --shadow:0 1px 2px rgba(17,27,25,.06), 0 8px 24px -16px rgba(17,27,25,.28);
  --r:10px;
  --f-ui:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1413; --surface:#151E1C; --surface-2:#1C2624; --line:#293533;
    --text:#E6EDEB; --muted:#93A4A0;
    --accent:#3FB3A4; --accent-ink:#08211E; --accent-soft:#12352F;
    --run:#E0973F; --run-soft:#372711;
    --admin:#A9B8DA; --admin-soft:#1E2537;
    --ok:#57B47C; --warn:#E0973F; --bad:#E1776D;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#0D1413; --surface:#151E1C; --surface-2:#1C2624; --line:#293533;
  --text:#E6EDEB; --muted:#93A4A0;
  --accent:#3FB3A4; --accent-ink:#08211E; --accent-soft:#12352F;
  --run:#E0973F; --run-soft:#372711;
  --admin:#A9B8DA; --admin-soft:#1E2537;
  --ok:#57B47C; --warn:#E0973F; --bad:#E1776D;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em}
button{font:inherit; color:inherit}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent)}

.topbar{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:9px; margin-right:auto}
.brand b{font-size:17px; font-weight:700; letter-spacing:-.02em}
.brand span{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}
.tabs{max-width:1180px; margin:0 auto; padding:0 20px; display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tab{border:0; background:none; padding:9px 13px 11px; cursor:pointer; font-size:14px; font-weight:500;
  color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text); border-bottom-color:var(--accent); font-weight:600}
.tab.adm[aria-selected="true"]{border-bottom-color:var(--admin)}

main{max-width:1180px; margin:0 auto; padding:22px 20px 72px; display:flex; flex-direction:column; gap:20px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 16px; border-bottom:1px solid var(--line)}
.card-head h2{font-size:14px}
.card-body{padding:16px}
.eyebrow{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}
.spacer{margin-left:auto}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.btn{border:1px solid var(--line); background:var(--surface); color:var(--text); padding:8px 14px;
  border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:7px}
.btn:hover{background:var(--surface-2)}
.btn:focus-visible,.tab:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn.primary:hover{filter:brightness(1.07)}
.btn.stop{background:var(--run); border-color:var(--run); color:#fff; font-weight:600}
.btn.stop:hover{filter:brightness(1.07)}
.btn.ghost{border-color:transparent; background:none; color:var(--muted); padding:6px 8px}
.btn.ghost:hover{background:var(--surface-2); color:var(--text)}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.42; cursor:not-allowed}
.btn.sm{padding:5px 10px; font-size:13px}

select,input[type=text],input[type=email],input[type=password],input[type=date],
input[type=time],input[type=number],input[type=month],input[type=datetime-local]{
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  padding:8px 10px; border-radius:8px; min-width:0; max-width:100%}
input[type=time],input[type=date],input[type=number],input[type=month]{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--surface-2); color:var(--muted); white-space:nowrap}
.pill.run{background:var(--run-soft); color:var(--run)}
.pill.acc{background:var(--accent-soft); color:var(--accent)}
.pill.bad{background:#f6dedc; color:var(--bad)}
:root[data-theme="dark"] .pill.bad{background:#3a1f1d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pill.bad{background:#3a1f1d}}
.pill.dot::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.pill.live::before{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pill.live::before{animation:none}}

.timer{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; padding:18px 20px}
.timer.running{border-color:var(--run)}
.timer-read{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:clamp(38px,9vw,56px);
  font-weight:500; line-height:1; letter-spacing:-.02em; display:block}
.timer.running .timer-read{color:var(--run)}
.timer-meta{margin-top:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.timer-controls{display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width:250px}
.timer-controls .btn{justify-content:center; padding:13px 18px; font-size:15px}
@media (max-width:680px){.timer{grid-template-columns:1fr}.timer-controls{min-width:0}}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px; background:var(--line)}
.stat{background:var(--surface); padding:13px 16px}
.stat .k{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.stat .v{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:500; margin-top:3px}
.pos{color:var(--ok)} .neg{color:var(--bad)}

.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
th{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--muted); font-weight:500; white-space:nowrap}
td.num,th.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tr.sum td{font-weight:600; background:var(--surface-2)}
tr.today td{box-shadow:inset 3px 0 0 var(--accent)}
.swatch{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:baseline}

.empty{padding:40px 20px; text-align:center; color:var(--muted)}
.empty h3{font-size:16px; color:var(--text); margin-bottom:6px}
.empty p{max-width:54ch; margin:0 auto 16px}
.banner{padding:11px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface-2);
  font-size:13.5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.banner.warn{border-color:var(--run); background:var(--run-soft); color:var(--run)}
.banner.adm{border-color:var(--admin); background:var(--admin-soft); color:var(--admin)}
.banner.good{border-color:var(--ok); color:var(--ok)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.editrow td{background:var(--surface-2)}
.editgrid{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:4px 0}
.subnav{display:flex; gap:2px; flex-wrap:wrap; padding:4px; background:var(--surface-2); border-radius:10px}
.subnav button{border:0; background:none; padding:7px 12px; border-radius:7px; cursor:pointer;
  font-size:13.5px; font-weight:500; color:var(--muted)}
.subnav button:hover{color:var(--text)}
.subnav button[aria-selected="true"]{background:var(--surface); color:var(--text); font-weight:600; box-shadow:var(--shadow)}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{border:0; background:var(--surface); padding:7px 12px; cursor:pointer; font-size:13px; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); font-weight:600}
.days{display:inline-flex; gap:3px}
.days button{width:32px; height:30px; border:1px solid var(--line); background:var(--surface);
  border-radius:6px; cursor:pointer; font-size:12px; color:var(--muted)}
.days button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700}

.sheetwrap{overflow:auto; background:var(--surface-2); padding:18px; border-radius:0 0 var(--r) var(--r)}
.sheet{background:#fff; color:#111; width:760px; margin:0 auto; padding:34px 38px;
  box-shadow:0 2px 14px rgba(0,0,0,.16); font-size:11px}
.sheet h3{font-size:17px; color:#111; margin-bottom:2px}
.sheet .sub{color:#777; font-size:9.5px; margin-bottom:16px}
.sheet .head{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-bottom:18px}
.sheet .head .lb{font-size:8.5px; color:#888}
.sheet .head .vl{font-weight:700; font-size:12px; border-bottom:1px solid #bbb; padding-bottom:3px; min-height:18px}
.sheet table{border-collapse:collapse; width:100%; font-size:9.5px; border:1px solid #333}
.sheet th,.sheet td{border:0; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:3px 5px;
  color:#111; font-family:var(--f-ui); text-transform:none; letter-spacing:0; font-size:9.5px}
.sheet thead th{background:#e6e6e6; font-weight:700; border-bottom:1px solid #333; text-align:center; color:#111}
.sheet thead th:first-child,.sheet tbody td:first-child{text-align:left}
.sheet tbody td{text-align:center}
.sheet tbody td:last-child{text-align:left}
.sheet tbody tr:hover{background:transparent}
.sheet tr.we td{background:#f6f6f6}
.sheet tr.tot td{background:#e6e6e6; font-weight:700; border-top:1px solid #333}
.sheet .legend{margin-top:14px; font-size:8.5px; color:#555; line-height:1.7}
.sheet .legend b{color:#111}
.sheet .sigs{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; font-size:8.5px; color:#777}
.sheet .sigs div{border-top:1px solid #999; padding-top:4px; display:flex; justify-content:space-between}

footer{max-width:1180px; margin:0 auto; padding:0 20px 40px; font-size:12.5px; color:var(--muted); line-height:1.6}

#chip{position:fixed; right:16px; bottom:16px; z-index:40; padding:9px 15px; border-radius:999px;
  font-size:13px; font-weight:500; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow); opacity:0; transform:translateY(6px);
  transition:opacity .18s, transform .18s; pointer-events:none; max-width:min(70vw,420px)}
#chip.show{opacity:1; transform:none}
#chip.err{border-color:var(--bad); color:var(--bad)}
#chip.good{border-color:var(--ok); color:var(--ok)}

/* Anmeldeseite */
.login{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px}
.login .box{width:100%; max-width:400px}
.login h1{font-size:26px; letter-spacing:-.02em; margin-bottom:4px}
.login .sub{color:var(--muted); margin:0 0 22px}
.login label{display:block; font-size:13px; color:var(--muted); margin:14px 0 5px}
.login input{width:100%}
.login .btn{width:100%; justify-content:center; margin-top:20px; padding:12px}
.err{color:var(--bad); font-size:13.5px; margin-top:14px}
.modal{position:fixed; inset:0; background:rgba(10,16,15,.55); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:50}
.modal .card{width:100%; max-width:440px}