/* Nur heller Modus: color-scheme hält auch Datums-/Zeitfelder hell */
:root{
  color-scheme: light;
  --bg:#f3f5f8; --surface:#fff; --ink:#18212d; --mute:#5b6676; --line:#dce1e8; --line-strong:#c3cad4;
  --acc:#0b5cab; --acc-ink:#fff; --acc-soft:#e7f0fa;
  --ok:#17703f; --ok-soft:#e5f4ea; --warn:#9a4d00; --warn-soft:#fdf0e2; --bad:#b3261e;
  --hl-bg:#ffd54a; --hl-ink:#18212d;
  --wart:#e5f4ea; --wart-ink:#17663b; --stoer:#fdf0e2; --stoer-ink:#8a4600;
  --r:8px; --r-lg:12px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;--top-h:calc(56px + env(safe-area-inset-top));--side:max(var(--s4),env(safe-area-inset-left),env(safe-area-inset-right))}
/* App-Gefühl: kein Gummiband-Federn der ganzen Seite, kein Doppeltipp-Zoom, kein Markieren von Knöpfen */
body{margin:0;overscroll-behavior-y:none;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,"Segoe UI",system-ui,sans-serif}
[hidden]{display:none!important}
h1,h2,h3{margin:0;line-height:1.25}
h2{font-size:18px;font-weight:650}
h3{font-size:13px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin-bottom:var(--s3)}
.muted{color:var(--mute)}
p{margin:0 0 var(--s3)}

/* ---------- Bedienelemente ---------- */
label{display:block;font-size:13px;font-weight:550;color:var(--mute);margin-bottom:var(--s1)}
input{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:10px 12px;width:100%;min-height:44px}
input:focus-visible{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
input[type=search]::-webkit-search-cancel-button{display:none}
button,a,input,label{touch-action:manipulation}
button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font:inherit;font-size:15px;font-weight:550;cursor:pointer;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}
button:hover{background:var(--acc-soft)}
button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button.primary{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
button.primary:hover{background:#0a4f93}
button.danger{color:var(--bad)}
button.icon{border:none;background:none;padding:0;min-width:44px;color:var(--ink)}
button.icon:hover{background:var(--acc-soft)}
button.block{width:100%}
.field{margin-bottom:var(--s3)}
.row{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.row > .grow{flex:1 1 200px}
.row > .field{margin-bottom:var(--s3)}
.row > button,.row > .chk{margin-bottom:var(--s3)}
.hours{flex:0 0 120px}
.btns{display:flex;gap:var(--s2);flex-wrap:wrap}
label.chk{display:flex;gap:var(--s2);align-items:center;font-size:15px;color:var(--ink);min-height:44px;margin:0 0 var(--s3)}
label.chk input{width:20px;min-height:20px;height:20px}
.cnt{font-weight:400}
.cnt.over{color:var(--bad);font-weight:700}
.err{color:var(--bad);font-size:14px;min-height:1.4em}

/* ---------- Gerüst ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--s3);padding:env(safe-area-inset-top) var(--side) 0;height:var(--top-h);background:var(--surface);border-bottom:1px solid var(--line)}
.top h1{font-size:17px;font-weight:700;flex:1;white-space:nowrap}
.top h1 span{color:var(--acc)}
#sync{font-size:13px;color:var(--mute)}
#sync.warn{color:var(--warn);font-weight:600}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s3)}
.panel h2{margin-bottom:var(--s3)}
main{max-width:760px;margin:0 auto;padding:var(--s3) var(--s3) var(--s5)}
.auth{max-width:400px;padding-top:var(--s5)}

/* ---------- Woche + Kalender ---------- */
.week{position:sticky;top:var(--top-h);z-index:30;background:var(--surface);border-bottom:1px solid var(--line);padding:var(--s2) var(--s3) var(--s3)}
.weeknav{max-width:760px;margin:0 auto var(--s2);display:flex;align-items:center;gap:var(--s2)}
.wlabel{flex:1;border:none;background:none;gap:var(--s2);font-size:16px;white-space:nowrap;padding:8px}
.wlabel #wRange{color:var(--mute);font-weight:400}
.strip{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1)}
.strip button{flex-direction:column;gap:2px;padding:6px 0;min-height:64px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-weight:500}
.strip .wd{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.strip .dn{font-size:17px;font-weight:650}
.strip .dh{font-size:12px;font-variant-numeric:tabular-nums;color:var(--mute);min-height:16px}
.strip .we{background:var(--bg)}
.strip .today .dn{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.strip .ok{border-color:var(--ok)} .strip .ok .dh{color:var(--ok);font-weight:650}
.strip .warn{border-color:var(--warn)} .strip .warn .dh{color:var(--warn);font-weight:650}
.strip [aria-selected=true]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.strip [aria-selected=true] .wd,.strip [aria-selected=true] .dh,.strip [aria-selected=true] .dn{color:var(--acc-ink)}

.cal{position:fixed;z-index:60;left:50%;top:120px;transform:translateX(-50%);width:min(360px,calc(100% - 24px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 32px rgba(16,24,40,.18);padding:var(--s3)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.calgrid{display:grid;grid-template-columns:32px repeat(7,1fr);gap:2px;text-align:center}
.calgrid .h{font-size:12px;color:var(--mute);padding:var(--s1) 0}
.calgrid .kw{font-size:11px;color:var(--mute);display:flex;align-items:center;justify-content:center}
.calgrid button{min-height:40px;padding:0;border:none;font-weight:500}
.calgrid button.out{color:var(--line-strong)}
.calgrid button.inweek{background:var(--acc-soft)}
.calgrid button.today{outline:2px solid var(--acc);outline-offset:-2px}
.calfoot{display:flex;justify-content:space-between;margin-top:var(--s2)}

/* ---------- Tag ---------- */
.dayhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.dayhead h2{margin:0}
.pill{font-size:14px;font-weight:650;padding:4px 12px;border-radius:99px;background:var(--bg);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.stamp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:var(--s3)}
.stamp .field{margin:0;min-width:0}
.stamp input{height:44px}
/* iOS: native Zeitfelder haben Mindestbreite, zentrierten Text und fallen leer zusammen -> wie normale Felder darstellen */
input[type=time]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;height:44px;text-align:left;background:var(--surface)}
input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.45em}
.info{margin:var(--s3) 0 0;font-size:14px;color:var(--mute)}
.info.ok{color:var(--ok)} .info.warn{color:var(--warn);font-weight:600}

.elist{list-style:none;margin:0 calc(-1 * var(--s4));padding:0}
.erow{border-top:1px solid var(--line)}
.erow:first-child{border-top:none}
.eview{width:100%;display:grid;grid-template-columns:64px 1fr 20px;gap:var(--s3);align-items:center;text-align:left;border:none;border-radius:0;background:none;padding:var(--s3) var(--s4);min-height:64px;font-weight:400}
.eview:hover{background:var(--bg)}
.eh{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;align-self:start}
.eh small{font-size:13px;font-weight:500;color:var(--mute)}
.ebody{display:flex;flex-direction:column;gap:2px;min-width:0}
.et{font-weight:600;line-height:1.3}
.em{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.etx{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etx::before{content:"„"}.etx::after{content:"“"}
.ego{color:var(--line-strong)}
.erow.editing{background:var(--acc-soft);padding:var(--s3) var(--s4)}
.erow.editing .em{margin:0 0 var(--s3)}
.erow .bad{color:var(--bad)}
.eh.bad small{color:var(--bad)}
.empty{color:var(--mute);text-align:center;padding:var(--s4) 0;margin:0}

/* ---------- Auftragssuche ---------- */
.pick{position:relative}
.list{position:absolute;z-index:20;left:0;right:0;top:72px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:0 12px 28px rgba(16,24,40,.16);max-height:min(360px,45vh);overflow:auto;display:none}
.list.open{display:block}
.opt{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.opt:last-child{border:none}
.opt.sel{background:var(--acc-soft)}
.opt .l1{display:flex;gap:4px 8px;align-items:baseline;flex-wrap:wrap}
.opt .nr{font-variant-numeric:tabular-nums;font-weight:650}
.opt .l2{font-size:13px;color:var(--mute)}
.opt .grp{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.badge{font-size:12px;padding:1px 8px;border-radius:99px;white-space:nowrap}
.badge.w{background:var(--wart);color:var(--wart-ink)}
.badge.s{background:var(--stoer);color:var(--stoer-ink)}
.badge.x{background:var(--acc-soft);color:var(--acc)}
mark{background:var(--hl-bg);color:var(--hl-ink);border-radius:3px;padding:0 2px;font-weight:700}
.chosen{font-size:14px;color:var(--mute);margin:var(--s2) 0 0;min-height:1.45em}
.chosen.on{color:var(--ok)}
#fAuf{scroll-margin-top:calc(var(--top-h) + 124px)}

/* ---------- Wochenleiste unten ---------- */
.weekbar{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--side);padding-bottom:max(var(--s2),env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
.weekbar b{font-size:20px;font-variant-numeric:tabular-nums}

/* ---------- Menü ---------- */
.users{list-style:none;padding:0;margin:0 0 var(--s5)}
.users li{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.users li > span{flex:1 1 160px}
#linkBox{background:var(--acc-soft);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s3)}
#linkBox .row{flex-wrap:nowrap}
#listState{font-size:14px}

#iosHint{position:relative;background:var(--acc-soft);border-bottom:1px solid var(--line);padding:var(--s3) 52px var(--s3) var(--side);font-size:15px}
#iosHint button{position:absolute;right:4px;top:4px}
#toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r);opacity:0;transition:opacity .2s;pointer-events:none;z-index:70;max-width:calc(100% - 32px)}
#toast.on{opacity:1}

/* ---------- Anmeldung / 2FA ---------- */
.center{text-align:center;margin:var(--s3) 0 0}
a{color:var(--acc)}
button.link{border:none;background:none;color:var(--acc);text-decoration:underline;padding:0 var(--s2)}
.rules{list-style:none;padding:0;margin:calc(-1 * var(--s2)) 0 var(--s3);font-size:13px;color:var(--mute)}
.rules li::before{content:"○ "}
.rules li.ok{color:var(--ok)}
.rules li.ok::before{content:"✓ "}
input.code{font-size:24px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.choice{display:grid;gap:var(--s2);margin-bottom:var(--s3)}
.choice button{flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:var(--s3) var(--s4)}
.choice button span{font-weight:400;font-size:14px;color:var(--mute)}
.choice button[aria-pressed=true]{border-color:var(--acc);background:var(--acc-soft)}
.steps{padding-left:20px;margin:0 0 var(--s3);font-size:15px}
.steps li{margin-bottom:var(--s1)}
.qr{width:200px;height:200px;margin:0 auto var(--s2);background:#fff}
.qr svg{width:100%;height:100%;display:block}
code{font-family:ui-monospace,Consolas,monospace;font-size:15px;word-break:break-all;user-select:all}
.users .em2{display:block;font-size:13px;color:var(--mute)}

@media(max-width:380px){
  .top{gap:var(--s2);padding-left:var(--s3);padding-right:var(--s2)}
  .top h1{font-size:16px}
  #sync{font-size:12px}
  .wlabel #wRange{font-size:13px}
  .stamp input[type=time]{padding:8px}
  .stamp input[type=time]::-webkit-calendar-picker-indicator{display:none}
  .hours{flex-basis:80px}
  .strip{gap:2px}
  .strip .dn{font-size:16px}
  .stamp{gap:var(--s2)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.err.okmsg{color:var(--ok)}

/* ---------- Datenschutzseite ---------- */
.small{font-size:14px}
.top .back{font-size:15px}
.legal h3{margin:var(--s5) 0 var(--s2)}
.legal ul{padding-left:20px;margin:0 0 var(--s3)}
.legal li{margin-bottom:var(--s2)}
.legal p,.legal li{max-width:68ch}

/* Logo im Anmeldefenster */
.logo{display:block;width:88px;height:88px;margin:var(--s2) auto var(--s2)}
.unofficial{text-align:center;font-size:13px;color:var(--mute);margin:0 0 var(--s4)}
#formLogin h2{text-align:center}

/* Menü-Knopf mit Text */
button.menubtn{border:1px solid var(--line-strong);padding:6px 12px;gap:6px;font-size:15px}
button.menubtn[aria-expanded=true]{background:var(--acc-soft);border-color:var(--acc)}

/* ---------- Benutzerverwaltung ---------- */
#adminBox h3{margin-top:var(--s5)}
#adminBox h3:first-of-type{margin-top:var(--s2)}
.umsg{background:var(--ok-soft);color:var(--ok);border-radius:var(--r);padding:var(--s2) var(--s3);font-size:14px}
.users li.ucard{display:block;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s2)}
.ucard.off{background:var(--bg)}
.uhead{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s2)}
.avatar{flex:0 0 40px;height:40px;border-radius:50%;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;font-weight:700;font-size:17px}
.uname{min-width:0}
.uname .em2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge.you{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.umeta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3);margin:0 0 var(--s3)}
.umeta dt{font-size:12px;color:var(--mute)}
.umeta dd{margin:0;font-size:14px}
.st::before{content:"● "}
.st.ok{color:var(--ok)} .st.warn{color:var(--warn)} .st.bad{color:var(--bad)}
details.more{margin-top:var(--s2)}
details.more summary{cursor:pointer;color:var(--acc);font-size:14px;min-height:36px;display:inline-flex;align-items:center}
details.more .btns{margin-top:var(--s2)}
.uempty{color:var(--mute);font-size:14px;padding:var(--s3);border:1px dashed var(--line-strong);border-radius:var(--r);list-style:none}

/* Wochensoll 39 h */
.wsum{flex:1;min-width:0}
.wrest{font-size:13px;margin-top:2px}
#weekRest.ok{color:var(--ok);font-weight:650}
#weekRest.warn{color:var(--warn);font-weight:650}
.wbar{height:4px;background:var(--line);border-radius:2px;margin-top:6px;max-width:220px;overflow:hidden}
.wbar span{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
.wbar span.ok{background:var(--ok)} .wbar span.warn{background:var(--warn)}

/* Tagesart und Schnellwahl */
.kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s3)}
.kinds button{min-height:38px;padding:6px 14px;font-size:14px;border-radius:99px}
.kinds button[aria-checked=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.chips:empty{display:none}
.chips button{min-height:40px;padding:6px 12px;font-size:14px;border-radius:99px;max-width:100%;gap:6px}
.chips .cn{font-weight:700;font-variant-numeric:tabular-nums}
.chips .cb{font-weight:400;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.chips button.rest{border-color:var(--acc);color:var(--acc);font-weight:650}
#hourChips{margin:calc(-1 * var(--s1)) 0 var(--s3)}
.strip .abs{background:var(--acc-soft);border-color:var(--acc-soft)}
.strip .abs .dh{color:var(--acc);font-weight:650;font-size:11px}
.pill.abs{background:var(--acc-soft);color:var(--acc)}
.info.abs{color:var(--acc)}

/* gewählter Tag immer klar erkennbar, auch bei Abwesenheit */
.strip button[aria-selected=true]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.strip button[aria-selected=true] .wd,.strip button[aria-selected=true] .dn,.strip button[aria-selected=true] .dh{color:var(--acc-ink)}
#recentChips{display:grid;grid-template-columns:1fr 1fr}
#recentChips button{justify-content:flex-start;min-width:0}
#recentChips .cb{max-width:none;min-width:0}

/* Mail- und Excel-Knopf unten */
.wbtns{display:flex;gap:var(--s2);flex-shrink:0}
.wbtns button{padding:10px 14px}
#btnMail[disabled]{opacity:.6}
@media(max-width:380px){.wbtns button{padding:10px}}
@media(max-width:380px){.wsum .wkw,.wsum #count{display:none}}