:root{--p:#a300a5;--pd:#6e0070;--pink:#e5348d;--bg:#f6f2f6;--red:#d7263d;--green:#1a9e5c;--ink:#1d1320;--mut:#776a7a}
*{box-sizing:border-box}body{margin:0;font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
header{background:var(--p);color:#fff;display:flex;align-items:center;gap:12px;padding:12px 18px;position:sticky;top:0;z-index:5}
.logo{font-weight:800;font-size:30px;letter-spacing:-1.5px;line-height:1}.logo span{color:#fff}.sub{opacity:.85;font-weight:600}#who{margin-left:auto;font-size:14px}#who button{margin-left:8px}
nav{display:flex;gap:4px;background:var(--pd);padding:0 12px;overflow-x:auto}nav button{background:none;border:0;color:#f3d6f3;padding:12px 14px;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}nav button.on{color:#fff;box-shadow:inset 0 -4px 0 var(--pink)}
main{padding:16px;max-width:1400px;margin:auto}h2{margin:6px 0 12px;font-size:20px}h3{margin:0 0 8px;font-size:16px}
.card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 1px 3px #0001;margin-bottom:14px}
.grid{display:grid;gap:14px}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}@media(max-width:700px){.g3,.g4{grid-template-columns:1fr}main{padding:10px}}
button,.btn{font:inherit;border:0;border-radius:10px;padding:8px 14px;background:var(--p);color:#fff;font-weight:700;cursor:pointer}button.sec{background:#eee;color:var(--ink)}button.danger{background:var(--red)}button:disabled{opacity:.4}
.big{display:block;width:100%;padding:22px;font-size:22px;border-radius:16px;margin-bottom:12px;text-align:left}.big small{display:block;font-size:14px;font-weight:600;opacity:.85}
.b-in{background:#7a4b2a}.b-out{background:var(--green)}.b-clean{background:var(--pink)}
.choice{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.choice button{padding:18px 8px;font-size:18px;background:#fff;color:var(--ink);border:2px solid #e3d3e4}.choice button.on{border-color:var(--p);background:#f6e3f6}
.sizes{grid-template-columns:repeat(3,1fr)}.qty{font-size:44px;font-weight:800;text-align:center;width:100%;border:2px solid #e3d3e4;border-radius:14px;padding:8px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.pad button{padding:16px;font-size:22px;background:#fff;color:var(--ink);border:2px solid #eee}
.presets{display:flex;gap:8px;margin-top:8px}.presets button{flex:1;background:#f6e3f6;color:var(--pd)}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:7px 8px;border-bottom:1px solid #eee;text-align:right}th{background:#faf5fa;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.3px}td:first-child,th:first-child,td.l,th.l{text-align:left}
.neg{color:var(--red);font-weight:700}.short{background:#fde7ea}.ok{color:var(--green);font-weight:700}.warn{display:inline-block;background:#fff3cd;color:#8a5a00;border-radius:6px;padding:1px 6px;font-size:12px;font-weight:700;cursor:help}
.kpi{font-size:30px;font-weight:800}.kpi.neg{color:var(--red)}.lbl{color:var(--mut);font-size:13px;font-weight:600}
.sz{display:inline-block;min-width:22px;text-align:center;border-radius:6px;font-weight:800;font-size:12px;padding:2px 5px;color:#fff}.sz-C{background:#4b5bd6}.sz-M{background:var(--p)}.sz-L{background:#e07a00}
.loc{font-weight:700}.drag{cursor:grab;color:#bbb;font-size:20px;padding:0 6px}tr.dragging{opacity:.4}tr.over td{border-top:3px solid var(--pink)}
input,select{font:inherit;padding:8px;border:1px solid #ddd;border-radius:8px}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;display:none;z-index:9;max-width:90vw}
.login{max-width:360px;margin:40px auto}.live{font-size:12px;color:var(--mut)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:4px}
.mloc{display:flex;justify-content:space-between;align-items:center}.mrow{display:grid;grid-template-columns:30px repeat(4,1fr);gap:4px;font-size:13px;padding:4px 0;border-top:1px solid #f0f0f0;text-align:right}.mrow.h{color:var(--mut);font-size:11px;font-weight:700;border:0}
.storno{text-decoration:line-through;color:#aaa}
td{white-space:nowrap}@media(max-width:700px){header{position:static}.sub{display:none}}
.k4{grid-template-columns:repeat(4,1fr)}@media(max-width:700px){.kpi{font-size:24px}.lbl{font-size:12px}}

/* Farbblock je Standort (dezent, wechselnd) */
tr.lg0 td{background:#f8d7e8}tr.lg1 td{background:#dcebf8}tr.lg2 td{background:#dcf1e0}tr.lg3 td{background:#f6ebcc}
tr.lgs td{border-top:2px solid #c9b3c3}
.card.lg0{background:#f8d7e8}.card.lg1{background:#dcebf8}.card.lg2{background:#dcf1e0}.card.lg3{background:#f6ebcc}
nav#tabs{display:none}
.fnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;margin:4px 0 14px}.fnav button{padding:20px 12px;font-size:20px;font-weight:800;border-radius:14px}
.fnav.back{display:block;margin:0 0 12px}.fnav.back button{padding:10px 16px;font-size:15px;font-weight:700;border-radius:10px}
header .home{cursor:pointer;transition:opacity .15s}header .home:hover,header .home:focus-visible{opacity:.75;text-decoration:underline;text-underline-offset:4px;outline:none}
nav#tabs.vt{display:flex;justify-content:center;background:transparent;padding:12px 12px 0}
.seg{display:inline-flex;background:#fff;border:2px solid var(--p);border-radius:12px;overflow:hidden}.seg button{background:#fff;color:var(--p);border:0;border-radius:0;padding:10px 22px;font-size:16px;font-weight:800;box-shadow:none}.seg button.on{background:var(--p);color:#fff}
nav .seg button.on{box-shadow:none}
.dhl{background:#ffcc00;color:#d40511;font-weight:800;padding:3px 10px;border-radius:6px;font-size:12px;letter-spacing:.5px;margin-left:6px}.dhl:hover{filter:brightness(.95)}
.dk{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.dk .card{margin:0;text-align:center}.dk .kpi{font-size:40px}
.dcols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.dcols .card{margin:0}
.pk{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #eee}.pk:last-child{border-bottom:0}.pkd{font-weight:700}.pk a{font-variant-numeric:tabular-nums}
.dot2{display:inline-block;width:12px;height:12px;border-radius:50%;margin-top:4px;flex:none;vertical-align:-1px}.dot2.ok{background:#1aa260}.dot2.tr{background:#f39c12}.dot2.op{background:#aaa}
@media(max-width:700px){.dk{grid-template-columns:repeat(2,1fr)}.dk .kpi{font-size:30px}.dcols{grid-template-columns:1fr}}
.trk{color:#0a58ca;text-decoration:underline;text-underline-offset:3px;font-weight:700;word-break:break-all}.trk:hover{color:#d40511}
.fnav .fdhl{background:#ffcc00;color:#d40511}
a.btn{display:inline-block;text-decoration:none;padding:12px 18px}
.dk{grid-template-columns:repeat(5,1fr)}.dk .card.kl{background:#fde7ea;border:2px solid #d40511}.dk .card.kl .kpi{color:#d40511}
.dot2.kl{background:#d40511;box-shadow:0 0 0 3px #f8c4cb}.klh{color:#d40511;font-weight:800;font-size:13px}
@media(max-width:700px){.dk{grid-template-columns:repeat(2,1fr)}}
.dsw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}.dsw button.on{background:var(--p);color:#fff}

/* ---- Feinschliff (Vorschau) ---- */
html,body{overflow-x:hidden}body{font-size:16px;line-height:1.45}
.card{overflow-x:auto}.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
button,.btn,a.btn,input,select{min-height:44px}.dhl{min-height:32px;display:inline-flex;align-items:center}
button{transition:transform .08s,filter .15s}button:active{transform:scale(.97)}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.hello{font-size:22px;font-weight:800;margin:4px 0 2px;color:var(--pd)}
.empty{background:#fff;border:2px dashed #e3d3e4;border-radius:14px;padding:22px 14px;text-align:center;color:var(--ink)}.empty .em{font-size:34px;line-height:1;margin-bottom:6px}
/* DHL Variante B: Fortschrittsbalken */
.pb{padding:12px 0;border-bottom:1px solid #eee}.pb:last-child{border-bottom:0}.pbgrid .card .pb{border:0;padding-bottom:0}
.pbh{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.pbs{font-weight:800;font-size:14px;border-radius:999px;padding:2px 10px}.pbs.ok{background:#dcf1e0;color:#127a45}.pbs.tr{background:#fdebc8;color:#8a5a00}.pbs.op{background:#eee;color:#555}.pbs.kl{background:#fde7ea;color:#d40511}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}.steps i{height:10px;border-radius:5px;background:#e6dce6}.steps i.on{background:#1aa260}.steps i.kl{background:#d40511}
.sl{display:grid;grid-template-columns:repeat(3,1fr);font-size:12px;color:var(--mut);font-weight:700;margin:3px 0 4px}.sl span:nth-child(2){text-align:center}.sl span:last-child{text-align:right}
.pb-kl{background:#fff5f6;margin:0 -14px;padding:12px 14px;border-left:4px solid #d40511}
.pbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}.pbgrid .card{margin:0}
/* Buchung erfolgreich */
.okcard{text-align:center;padding:26px 16px}.check{width:84px;height:84px;margin:0 auto 6px;border-radius:50%;background:var(--green);color:#fff;font-size:50px;font-weight:800;line-height:84px;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}.okline{font-size:20px;font-weight:800}.wide{width:100%}
@media (prefers-reduced-motion:reduce){.check{animation:none}button{transition:none}}
.hrow{padding:12px}.hh{display:flex;justify-content:space-between;align-items:center;gap:8px}.hrow button{margin-top:8px}
@media(max-width:700px){
 .lbl{font-size:14px}.sz{font-size:13px}.mrow{font-size:15px}.mrow.h{font-size:12px}
 #who{font-size:15px}.logo{font-size:26px}header{padding:10px 12px;flex-wrap:wrap}
 .seg button{padding:10px 16px}.fnav{grid-template-columns:1fr 1fr}.fnav button{padding:16px 10px;font-size:18px}
 .dsw{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.dsw button{flex:none}
 .dhlbtns a.btn,p a.btn{width:100%;text-align:center}.pbgrid{grid-template-columns:1fr}.pad button{min-height:56px}
 .trk{font-size:15px}
}