/* Layout: ein Arbeitsstreifen. Oben der laufende Timer, darunter große Projekt-Tasten
   (ein Tap = Wechsel), unten Tab-Leiste. Systemschriften, keine externen Ressourcen. */
:root{
  color-scheme:light dark;
  --bg:#EEF1EF; --surface:#FAFBFA; --ink:#15201B; --muted:#5E6B65; --line:#D3DAD6;
  --accent:#D93F22; --accent-ink:#FFFFFF; --field:#FFFFFF; --ok:#2F7D4F;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-num:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1412; --surface:#171F1B; --ink:#E7EDE9; --muted:#97A59D; --line:#29342E;
    --accent:#FF6B4D; --accent-ink:#1A0C08; --field:#0F1412; --ok:#5CC48A;
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 var(--font-body);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  padding-bottom:calc(92px + env(safe-area-inset-bottom,0px));
}
.wrap{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:18px; min-width:0}
h1{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0}
h2{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 10px; background:var(--surface); white-space:nowrap}
.pill i{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.pill.off i{background:var(--muted)}
.pill.bad{color:var(--accent); border-color:var(--accent)}
.pill.bad i{background:var(--accent)}

.now{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:12px}
.now.on{border:2px solid var(--pc); padding:15px}
.now-head{display:flex; align-items:center; gap:8px; min-width:0}
.dot{width:10px; height:10px; border-radius:50%; background:var(--pc,var(--muted)); flex:none}
.on .dot{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.on .dot{animation:none}}
.now-name{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.clock{font-size:clamp(38px,12vw,56px); font-weight:600; line-height:1; letter-spacing:-.02em}
.now-row{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap}
.btn{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:10px 14px; min-height:44px; font-weight:500}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}
.btn.danger{color:var(--accent); border-color:var(--accent)}
.btn.small{min-height:34px; padding:6px 10px; font-size:13px}
.chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.chips .lbl{font-size:12px; color:var(--muted); margin-right:2px}
.notice{border:1px dashed var(--accent); border-radius:8px; padding:10px 12px; font-size:13px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.pbtn{
  text-align:left; background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--pc);
  border-radius:8px; padding:12px; min-height:84px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-width:0;
}
.pbtn.run{background:color-mix(in srgb,var(--pc) 16%,var(--surface)); border-color:var(--pc)}
.pbtn .pn{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pbtn .pt{font-size:13px; color:var(--muted)}
.pbtn.run .pt::before{content:"läuft · "; color:var(--ink)}

.list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden}
.row{display:flex; align-items:center; gap:10px; padding:11px 12px; border-top:1px solid var(--line); min-width:0; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left; width:100%}
.row:first-child{border-top:0}
.row .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .sub{display:block; font-size:12px; color:var(--muted)}
.dayhead{display:flex; justify-content:space-between; align-items:baseline; margin:4px 0 8px}
.dayhead b{font-size:14px}
.group{display:flex; flex-direction:column}

.seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface)}
.seg button{flex:1; border:0; background:none; padding:9px 6px; min-height:40px}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg); font-weight:700}
.nav2{display:flex; align-items:center; justify-content:space-between; gap:8px}
.nav2 .lab{font-weight:700; text-align:center; flex:1; min-width:0}
.big{font-size:34px; font-weight:600; line-height:1.1}
.stack{display:flex; height:14px; border-radius:4px; overflow:hidden; background:var(--line); gap:1px}
.stack i{display:block; background:var(--pc); min-width:2px}
.pr{display:grid; grid-template-columns:1fr auto auto; gap:4px 12px; align-items:center; padding:10px 12px; border-top:1px solid var(--line)}
.pr:first-child{border-top:0}
.pr .nm{display:flex; align-items:center; gap:8px; min-width:0}
.pr .nm span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pr .bar{grid-column:1/-1; height:5px; background:var(--line); border-radius:3px; overflow:hidden}
.pr .bar i{display:block; height:100%; background:var(--pc)}
.dr{display:grid; grid-template-columns:5.5rem 1fr auto; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--line)}
.dr:first-child{border-top:0}
.empty{padding:18px 14px; color:var(--muted); font-size:14px}

.field{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted)}
input[type=text],input[type=password],input[type=datetime-local],select,textarea{
  background:var(--field); border:1px solid var(--line); border-radius:8px; padding:9px 10px; min-height:44px; width:100%; color:var(--ink);
  font-size:16px; /* verhindert das automatische Zoomen auf dem iPhone */
}
textarea{font-family:var(--font-num); font-size:13px; min-height:150px; resize:vertical}
.prow{display:flex; gap:8px; align-items:center; padding:8px 12px; border-top:1px solid var(--line)}
.prow:first-child{border-top:0}
.sw{width:34px; height:34px; border-radius:6px; border:1px solid var(--line); background:var(--pc); flex:none}
.prow input{flex:1; min-width:0}
.prow.arch input{opacity:.5}
.cluster{display:flex; gap:8px; flex-wrap:wrap}

nav.tabs{position:fixed; left:0; right:0; bottom:0; z-index:5; background:var(--surface); border-top:1px solid var(--line);
  padding:6px max(16px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
nav.tabs div{max-width:640px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
nav.tabs button{border:0; background:none; padding:10px 2px; min-height:46px; border-radius:8px; font-size:13px; font-weight:500; color:var(--muted)}
nav.tabs button[aria-current="page"]{color:var(--ink); font-weight:700; box-shadow:inset 0 3px 0 var(--accent)}
nav.tabs[hidden]{display:none}

.scrim{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20; display:flex; align-items:flex-end; justify-content:center;
  padding:0 max(0px,env(safe-area-inset-left,0px)) 0 max(0px,env(safe-area-inset-right,0px))}
.sheet{background:var(--surface); width:100%; max-width:560px; border-radius:14px 14px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:12px; max-height:92%; overflow:auto}
.err{color:var(--accent); font-size:13px; min-height:1em}
.login{margin-top:12vh; display:flex; flex-direction:column; gap:14px; max-width:360px; width:100%; align-self:center}
.login h1{font-size:22px; letter-spacing:0; text-transform:none; color:var(--ink)}

.recent{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 14px; min-height:42px; max-width:100%}
.chip .dot{width:8px; height:8px}
.chip .n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pbtn .pn{display:flex; justify-content:space-between; gap:6px}
.pbtn .pn .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chev{color:var(--muted); flex:none}
.back{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.back b{font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pr.sub{padding-left:32px; border-top:0; padding-top:3px; padding-bottom:7px}
.pr.sub .nm{color:var(--muted)}
.prow.sub{padding-left:32px}
.prow2{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:0 12px 10px; font-size:12px; color:var(--muted)}
.prow2 select{width:auto; min-height:34px; font-size:14px; padding:4px 8px; max-width:100%}

.prow2 [data-act=pdel]{margin-left:auto}