:root{
  --bg:#f3f4f6;--card:#fff;--ink:#1f2a33;--muted:#6b7680;--line:#e2e6ea;
  --brand:#1f2a33;--accent:#c8102e;--go:#1e8e4e;--stop:#c0392b;--pause:#d68910;
  --pos:#1e7a46;--neg:#b03a2e;--radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:#1c5fa8}
h1{font-size:1.45rem;margin:.1rem 0 .3rem}h2{font-size:1.2rem;margin:.2rem 0}h3{font-size:1.02rem;margin:.2rem 0 .6rem}
.muted{color:var(--muted)}.small{font-size:.85em}.r{text-align:right}.neg{color:var(--neg)}.pos{color:var(--pos)}
code.pw{font-size:1.25rem;background:#fff;padding:.1rem .5rem;border-radius:6px;user-select:all}
pre{margin:0;white-space:pre-wrap;font:inherit}

/* Kopfzeile */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;background:var(--brand);color:#fff;padding:.55rem 1rem;
  padding-top:max(.55rem,env(safe-area-inset-top));position:sticky;top:0;z-index:10}
.top a{color:#dfe6ec;text-decoration:none}
.brand{font-weight:700;color:#fff!important;border-left:4px solid var(--accent);padding-left:.5rem}
.top nav{display:flex;flex-wrap:wrap;gap:.15rem;flex:1}
.top nav a{padding:.3rem .6rem;border-radius:6px}
.top nav a.on,.top nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.me{display:flex;gap:.7rem;align-items:center;font-size:.9rem}
.link{background:none;border:0;color:#dfe6ec;cursor:pointer;font:inherit;padding:0;text-decoration:underline}

main{max-width:1150px;margin:0 auto;padding:1rem;padding-bottom:max(2rem,env(safe-area-inset-bottom))}
main.narrow{max-width:620px}
.card{background:var(--card);border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:1rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card-head,.page-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.page-head{margin-bottom:.8rem}
.head-actions{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cols>.card{margin:0}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1rem}
.grid4 .card{margin:0}
.kpi b{display:block;font-size:1.5rem;margin:.1rem 0}
.kpi span{font-size:.82rem}

/* Formulare */
label{display:block;margin:.45rem 0;font-size:.9rem;color:#38444e}
input,select,textarea{display:block;width:100%;margin-top:.2rem;padding:.55rem .6rem;border:1px solid #cdd3d9;border-radius:7px;
  font:inherit;background:#fff;color:var(--ink);min-height:42px}
textarea{min-height:auto}
input:focus,select:focus,textarea:focus{outline:2px solid #8db7e6;border-color:#5b8fd0}
label.check{display:flex;align-items:center;gap:.45rem}
label.check input{width:auto;min-height:auto;margin:0}
.row{display:flex;flex-wrap:wrap;gap:0 .8rem}
.row>label{flex:1 1 150px}
.row>label.grow{flex:2 1 200px}
.row>label.check{flex:0 0 auto;align-self:flex-end;margin-bottom:.8rem}
.weekdays{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:.3rem 0 .6rem}
fieldset{border:0;padding:0;margin:0}
form.inline{display:inline}
details>summary{cursor:pointer;padding:.15rem 0;list-style:none}
details>summary::-webkit-details-marker{display:none}
details[open]>summary{margin-bottom:.5rem}
details details{margin-top:.6rem}
details details>summary,section details>summary{color:#1c5fa8;font-size:.9rem;margin:.4rem 0 .8rem}
section details>summary::before,details details>summary::before{content:"▸ "}
section details[open]>summary::before{content:"▾ "}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.5rem .9rem;border-radius:7px;border:1px solid #c6ccd2;
  background:#fff;color:var(--ink);font:inherit;cursor:pointer;text-decoration:none;min-height:40px;white-space:nowrap}
.btn:hover{background:#f2f4f6}
.btn.on{background:#e4e9ee}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{color:var(--stop);border-color:#e3b4ae}
.btn.go{background:var(--go);border-color:var(--go);color:#fff}
.btn.stop{background:var(--stop);border-color:var(--stop);color:#fff}
.btn.pause{background:var(--pause);border-color:var(--pause);color:#fff}
.btn.small{padding:.2rem .55rem;min-height:30px;font-size:.85rem}
.btn.wide{width:100%;margin-top:.6rem}
.btn.big{font-size:1.25rem;font-weight:600;padding:.9rem 1.2rem;flex:1;min-height:64px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}

.flash{padding:.65rem .9rem;border-radius:8px;margin-bottom:1rem;white-space:pre-line;background:#e5f4ea;color:#1b5e36;border:1px solid #bfe3cb}
.flash.err{background:#fbe9e7;color:#8c2c22;border-color:#f0c1bb}
.flash.warn{background:#fff6e0;color:#7a5600;border-color:#f1dca0}
.flash.big{font-size:1.05rem}

.tag{display:inline-block;font-size:.78rem;padding:.08rem .45rem;border-radius:20px;background:#e9edf1;color:#3c4852;margin:.1rem .15rem .1rem 0}
.tag.abs{background:#e3effb;color:#1d4f86}.tag.pend{background:#fff2cc;color:#7a5600}
.tag.lock{background:#ece3f7;color:#55307e}.tag.live{background:#d9f2e3;color:#1b6b3d}
.tag.warn{background:#fde2c8;color:#8a4b08;text-decoration:none}
.tag.st-genehmigt{background:#d9f2e3;color:#1b6b3d}.tag.st-beantragt{background:#fff2cc;color:#7a5600}
.tag.st-abgelehnt,.tag.st-storniert{background:#f1f1f1;color:#888}
tr.st-abgelehnt td,tr.st-storniert td{color:#999}
.tag.ev-gebucht{background:#d9f2e3;color:#1b6b3d}.tag.ev-unbekannt{background:#fde2c8;color:#8a4b08}

/* Status / Stempeln */
.status{border-top:5px solid #9aa5ae}
.status-work{border-top-color:var(--go)}.status-break{border-top-color:var(--pause)}
.status-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.big-time{font-size:2.2rem;font-weight:700;text-align:right;line-height:1}
.big-time small{display:block;font-size:.8rem;font-weight:400;color:var(--muted)}
.stamp{margin-top:.6rem}

/* Listen */
table.list{width:100%;border-collapse:collapse}
table.list th{text-align:left;font-weight:600;color:var(--muted);font-size:.82rem;border-bottom:1px solid var(--line);padding:.35rem .4rem}
table.list td{border-bottom:1px solid var(--line);padding:.45rem .4rem;vertical-align:top}
table.list td.t{font-variant-numeric:tabular-nums;font-weight:600;width:4rem}
table.list th.r{text-align:right}
tr.ignored td{text-decoration:line-through;color:#999}
tr.inactive td{color:#999}
.warn-line{color:#8a4b08;margin:.25rem 0;font-size:.92rem}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:#c4cbd1;margin-right:.4rem}
.dot.on{background:var(--go)}.dot.pause{background:var(--pause)}.dot.abs{background:#5b8fd0}

/* Monatsansicht */
.days{background:var(--card);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.day{display:grid;grid-template-columns:7.2rem 1fr 4.2rem 4.2rem 4.6rem;gap:.5rem;align-items:start;padding:.45rem .8rem;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;scroll-margin-top:5rem}
.day.head{font-size:.8rem;color:var(--muted);font-weight:600;background:#fafbfc}
.day.we{background:#f7f8f9}.day.today{box-shadow:inset 4px 0 0 var(--accent)}.day.future{color:#9aa5ae}
.day:target{background:#fff8dc}
.date{display:flex;align-items:center;gap:.35rem}
.plus{border:1px solid #cdd3d9;background:#fff;border-radius:50%;width:24px;height:24px;line-height:20px;padding:0;cursor:pointer;color:#555;font-size:16px}
.chip{display:inline-block;font-size:.82rem;padding:.12rem .45rem;border-radius:6px;margin:.08rem .2rem .08rem 0;text-decoration:none;color:var(--ink);background:#eef1f4;border-left:3px solid #9aa5ae}
.chip.k-in{border-left-color:var(--go)}.chip.k-out{border-left-color:var(--stop)}
.chip.k-break_start,.chip.k-break_end{border-left-color:var(--pause)}
.chip.ignored{text-decoration:line-through;opacity:.55}
.warn-inline{display:inline-block;font-size:.8rem;color:#8a4b08;margin-right:.4rem}
.cats .tag{font-size:.85rem}
.tabs{display:flex;gap:.3rem;margin-bottom:.4rem}
.tab{border:1px solid #cdd3d9;background:#fff;border-radius:6px;padding:.3rem .7rem;cursor:pointer;font:inherit}
.tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.hidden{display:none}
.login{margin-top:12vh}

@media (max-width:820px){
  .grid4{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
  .top nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap}
  .top nav a{white-space:nowrap}
  .day{grid-template-columns:1fr auto auto auto;grid-template-areas:"date ist soll diff" "bk bk bk bk"}
  .day>.date{grid-area:date}.day>.bk{grid-area:bk}
  .day>span:nth-child(3){grid-area:ist}.day>span:nth-child(4){grid-area:soll}.day>span:nth-child(5){grid-area:diff}
  .day.head{display:none}
  table.list{font-size:.88rem}
  main{padding:.7rem}
}
@media (max-width:480px){
  .kpi b{font-size:1.25rem}
  .big-time{font-size:1.8rem}
  .btn.big{min-height:72px}
}