:root{
  --ink:#1b1d22; --ink-2:#3a3f48; --muted:#6b7280; --faint:#9aa1ab;
  --paper:#f3f1ec; --card:#ffffff; --line:#e3e1da; --line-2:#d4d2c9;
  --housing:#23262d; --housing-2:#15171c;
  --green:#1f9d57; --green-glow:#37d27e;
  --amber:#e0a012; --amber-glow:#ffc23d;
  --red:#cf3a32; --red-glow:#ff5b4f;
  --violet:#5b3fb0;
  --shadow:0 1px 2px rgba(20,23,28,.06),0 8px 24px rgba(20,23,28,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.45;}
.wrap{max-width:1040px;margin:0 auto;padding:24px 16px 80px}

header.top{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:6px}
.brand{display:flex;align-items:center;gap:13px}
.mini-ampel{width:22px;height:48px;border-radius:6px;background:linear-gradient(180deg,var(--housing),var(--housing-2));
  display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:4px 0;box-shadow:var(--shadow)}
.mini-ampel span{width:11px;height:11px;border-radius:50%}
.h1{font-size:20px;font-weight:760;letter-spacing:-.01em;margin:0}
.sub{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.topright{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.clock{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;box-shadow:var(--shadow)}
.clock b{font-weight:680;color:var(--ink)}
.userchip{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 13px;box-shadow:var(--shadow)}
.userchip b{font-weight:700;color:var(--ink)}
.userchip button{appearance:none;border:1px solid var(--line-2);background:var(--paper);color:var(--muted);
  font:inherit;font-size:11px;padding:4px 10px;border-radius:999px;cursor:pointer}
.userchip button:hover{color:var(--ink)}

.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.search{font:inherit;font-size:13px;border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;
  background:var(--card);color:var(--ink);min-width:220px;flex:1 1 220px}
.search:focus{outline:2px solid var(--ink);outline-offset:-1px}
.datef{font:inherit;font-size:12.5px;border:1px solid var(--line-2);border-radius:999px;padding:7px 12px;background:var(--card);color:var(--ink-2)}
.toggle{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);
  font:inherit;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer}
.toggle[aria-pressed="true"]{background:#fff7e6;border-color:#eccb74;color:#b07d00;font-weight:640}
.fhint{font-size:12px;color:var(--faint);width:100%}

.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px}
.legend .li{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 12px;box-shadow:var(--shadow)}
.legend .lt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:760;letter-spacing:.05em}
.legend .ld{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35}
.swatch{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.s-green{background:var(--green);box-shadow:0 0 0 3px rgba(31,157,87,.16)}
.s-amber{background:var(--amber);box-shadow:0 0 0 3px rgba(224,160,18,.16)}
.s-red{background:var(--red);box-shadow:0 0 0 3px rgba(207,58,50,.16)}

.board{display:flex;flex-direction:column;gap:12px}
.title{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.thead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}
.tname{font-size:16px;font-weight:760;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tmeta{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.7}
.tmeta b{color:var(--ink-2);font-weight:640}
.kmin{width:52px;font:inherit;font-size:12px;border:1px solid var(--line-2);border-radius:7px;padding:2px 6px;text-align:center;color:var(--ink)}
.ksel{font:inherit;font-size:12px;border:1px solid var(--line-2);border-radius:7px;padding:2px 6px;background:#fff;color:var(--ink);max-width:240px}
.ksel[disabled]{opacity:.55;cursor:not-allowed}
.pin{appearance:none;border:1px solid var(--line-2);background:var(--card);border-radius:999px;width:34px;height:34px;
  cursor:pointer;font-size:15px;line-height:1;color:var(--faint);flex:0 0 auto;transition:.12s}
.pin:active{transform:scale(.95)}
.pin.on{background:#fff7e6;border-color:#eccb74;color:#b07d00}

.lanes{display:flex;flex-direction:column;gap:8px}
.lane{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
  border:1px solid var(--line);border-left-width:4px;border-radius:11px;padding:10px 12px;background:#fcfbf8}
.lane.is-offen{border-left-color:var(--green)}
.lane.is-kulanz{border-left-color:var(--amber)}
.lane.is-gesperrt,.lane.is-nach_export{border-left-color:var(--red)}
.lane.intern{background:#f7f5fd}

.mini3{display:inline-flex;gap:5px;align-items:center;padding:7px 8px;border-radius:9px;position:relative;
  background:linear-gradient(180deg,var(--housing),var(--housing-2));box-shadow:var(--shadow)}
.lamp{width:15px;height:15px;border-radius:50%;background:#0d0e11;transition:.25s}
.lamp.on.red{background:var(--red);box-shadow:0 0 9px 1px var(--red-glow),inset 0 0 4px rgba(255,255,255,.35)}
.lamp.on.amber{background:var(--amber);box-shadow:0 0 9px 1px var(--amber-glow),inset 0 0 4px rgba(255,255,255,.35)}
.lamp.on.green{background:var(--green);box-shadow:0 0 9px 1px var(--green-glow),inset 0 0 4px rgba(255,255,255,.35)}
.mlock{position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:9px;border:2px solid var(--card)}

.lane-mid{min-width:0}
.lane-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lane-name{font-size:13px;font-weight:720}
.klartext{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:780;letter-spacing:.07em;
  padding:2px 8px;border-radius:6px;text-transform:uppercase}
.kt-offen{background:#e7f5ed;color:#11623a}
.kt-kulanz{background:#fdf2d8;color:#8a5e00}
.kt-gesperrt,.kt-nach_export{background:#fbe6e4;color:#9c2b25}
.badge{font-size:9.5px;font-weight:740;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:#eef0f3;color:var(--ink-2)}
.badge.intern{background:#ece7fb;color:var(--violet)}
.badge.typ{background:#e8eef7;color:#2c4f7c}
.lane-meta{font-size:11.5px;color:var(--muted);margin-top:4px}
.lane-meta b{color:var(--ink-2);font-weight:640}
.tslot:empty{display:none}
.tslot{margin-top:5px}
.timer{font-variant-numeric:tabular-nums;font-weight:680;font-size:12px}
.timer.warn{color:#8a5e00}
.timer.danger{color:#9c2b25}
.stamp{font-size:11px;color:var(--faint);margin-top:5px}
.stamp .grund{color:var(--ink-2);font-style:italic}

.lane-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:152px}
.btn{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--ink);
  font:inherit;font-size:12px;font-weight:620;padding:8px 11px;border-radius:9px;cursor:pointer;transition:.12s;text-align:left;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn.amber{border-color:#eccb74;background:#fdf6e3;color:#7a5300}
.btn.red{border-color:#e7b0ab;background:#fdecea;color:#8f2620}
.btn.dark{border-color:var(--ink);background:var(--ink);color:#fff}
.btn.ghost{border-style:dashed;color:var(--muted)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.owner-hint{font-size:11.5px;color:var(--faint);text-align:right;line-height:1.4}

.escbox{margin-top:7px;background:#fdecea;border:1px solid #e7b0ab;border-radius:9px;padding:8px 10px;font-size:12px;color:#8f2620;line-height:1.5}
.escbox .row{margin-top:7px;display:flex;gap:7px;flex-wrap:wrap}
.wishbox{margin-top:9px;background:#fff7e6;border:1px solid #eccb74;border-radius:9px;padding:8px 11px;font-size:12px;color:#7a5300}
.wishbox b{font-weight:720}
.wishbox ul{margin:4px 0 0;padding:0;list-style:none}
.wishbox li{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:5px 0;border-top:1px dashed #eccb74}
.wishbox .wmeta{color:#a07200;font-size:11px}
.wishbox .btn{padding:4px 9px;font-size:11px;flex:0 0 auto}

.orderbox{margin-top:9px;background:#eef3fb;border:1px solid #b9cdea;border-radius:9px;padding:8px 11px;font-size:12px;color:#2c4f7c}
.orderbox b{font-weight:720}
.orderbox ul{margin:4px 0 0;padding:0;list-style:none}
.orderbox li{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:6px 0;border-top:1px dashed #b9cdea}
.orderbox .ometa{color:#5a7aa6;font-size:11px;margin-top:2px}
.orderbox .btn{padding:4px 9px;font-size:11px;flex:0 0 auto}
.orderbox .obtns{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.ob-leer{background:#fdf2d8;color:#8a5e00}
.ob-voll{background:#e7f5ed;color:#11623a}
.ob-neu{background:#fbe6e4;color:#9c2b25}
.ob-ueb{background:#eef0f3;color:var(--ink-2)}
.ob-late{color:#9c2b25;font-weight:700}

.exc-row{margin-top:9px;text-align:right;display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}
.exc-link{appearance:none;background:none;border:none;color:var(--faint);font:inherit;font-size:11px;
  text-decoration:underline;text-underline-offset:2px;text-decoration-style:dotted;cursor:pointer;padding:2px 0}
.exc-link:hover{color:var(--ink-2)}
.exc-chip{appearance:none;border:1px solid var(--line-2);background:var(--card);color:var(--muted);
  font:inherit;font-size:12px;padding:7px 12px;border-radius:999px;cursor:pointer}
.exc-chip b{color:var(--ink-2);font-weight:700}

.empty{background:var(--card);border:1px dashed var(--line-2);border-radius:14px;padding:28px 18px;text-align:center;color:var(--muted);font-size:13px}

.overlay{position:fixed;inset:0;background:rgba(20,23,28,.42);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal{background:var(--card);border-radius:16px;max-width:460px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:92vh;overflow:auto}
.modal h3{margin:0 0 6px;font-size:16px;font-weight:740}
.modal p{margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.modal textarea{width:100%;font:inherit;font-size:13.5px;border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;resize:vertical}
.modal .row{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
.modal label{display:block;font-size:12px;font-weight:680;color:var(--ink-2);margin:12px 0 5px}
.modal input[type=text],.modal input[type=password]{width:100%;font:inherit;font-size:13.5px;border:1px solid var(--line-2);border-radius:9px;padding:9px 11px}
.modal .frow{display:flex;gap:10px}
.modal .frow>div{flex:1}
.modal select,.modal input[type=number],.modal input[type=time],.modal input[type=datetime-local]{
  width:100%;font:inherit;font-size:13.5px;border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;background:#fff}
.modal .radio{display:flex;gap:8px;margin-top:4px}
.modal .radio label{flex:1;display:flex;align-items:center;gap:7px;margin:0;border:1px solid var(--line-2);border-radius:9px;padding:9px 10px;cursor:pointer;font-weight:600;font-size:12.5px}
.modal .radio label.sel{border-color:var(--ink);background:#f4f3ef}

.log{margin:4px 0 0;padding:0;list-style:none;max-height:300px;overflow:auto}
.log li{padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.log li:last-child{border-bottom:none}
.log .lh{display:flex;justify-content:space-between;gap:10px;font-weight:680}
.log .lh .when{color:var(--faint);font-weight:500;white-space:nowrap}
.log .lb{color:var(--ink-2);margin-top:3px}
.log .lk{color:var(--muted);margin-top:2px}
.st-offen{color:#8a5e00;font-weight:700}
.st-freigegeben{color:#11623a;font-weight:700}
.st-abgesagt{color:#9c2b25;font-weight:700}
.st-erledigt{color:#11623a;font-weight:700}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:12.5px;padding:11px 16px;border-radius:11px;box-shadow:0 12px 36px rgba(0,0,0,.3);z-index:60;max-width:90%}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 28px;max-width:360px;width:100%;box-shadow:var(--shadow)}
.login-card .brand{margin-bottom:18px}
.login-card label{display:block;font-size:12px;font-weight:680;color:var(--ink-2);margin:12px 0 5px}
.login-card input{width:100%;font:inherit;font-size:14px;border:1px solid var(--line-2);border-radius:9px;padding:10px 12px}
.login-card input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.login-card .btn.dark{width:100%;margin-top:16px;text-align:center;padding:11px;font-size:13.5px}
.login-error{margin-top:12px;background:#fbe6e4;color:#9c2b25;border:1px solid #e7b0ab;border-radius:9px;padding:9px 12px;font-size:12.5px}
.login-hint{margin-top:14px;font-size:11.5px;color:var(--faint);line-height:1.5}

.hidden{display:none !important}

@media(max-width:720px){
  .legend{grid-template-columns:repeat(2,1fr)}
  .lane{grid-template-columns:auto 1fr;gap:11px}
  .lane-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;min-width:0;margin-top:2px}
  .lane-actions .btn{flex:1 1 auto;text-align:center}
  .owner-hint{text-align:left;width:100%}
}