:root{
  --blue:#1a73e8;--blue-d:#1557b0;--red:#d93025;--green:#188038;--orange:#e37400;
  --bg:#fff;--bg2:#f1f3f4;--bd:#dadce0;--tx:#202124;--tx2:#5f6368;
  --sh:0 2px 6px rgba(60,64,67,.3),0 1px 2px rgba(60,64,67,.2);--sh2:0 4px 16px rgba(60,64,67,.35);
  --side:408px;
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;color:var(--tx);font-size:14px;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.grow{flex:1;min-width:0}
.muted{color:var(--tx2)}.small{font-size:12px}
.ic{flex:none;vertical-align:middle}
#map{position:fixed;inset:0;z-index:0;background:#e5e3df}
#map.crosshair,#map.crosshair .leaflet-interactive{cursor:crosshair}
.hn-canvas{pointer-events:none}
.pin,.depot,.me,.navm{background:none;border:none}
.pin svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.depot div{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;border:2px solid #fff;box-shadow:var(--sh)}
.me-dot{width:18px;height:18px;border-radius:50%;background:#1a73e8;border:3px solid #fff;box-shadow:0 0 0 2px rgba(26,115,232,.35)}
.mtip{background:#fff;border:1px solid var(--blue);color:var(--blue);font-weight:600;padding:1px 6px}
.leaflet-popup-content{margin:12px 14px}

/* Suchleiste */
#searchbox{position:fixed;z-index:1100;top:12px;left:12px;width:calc(var(--side) - 0px);display:flex;align-items:center;gap:2px;background:var(--bg);border-radius:10px;box-shadow:var(--sh);padding:4px 6px}
#searchbox input{width:100%;border:0;outline:0;background:transparent;padding:10px 6px;font-size:15px}
.q-icon{color:var(--tx2);display:flex}
.icon-btn{border:0;background:transparent;border-radius:50%;width:36px;height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);padding:0}
.icon-btn:hover{background:var(--bg2)}
.icon-btn.dir{color:#fff;background:var(--blue)}.icon-btn.dir:hover{background:var(--blue-d)}

/* Seitenleiste */
#sidebar{position:fixed;z-index:1000;top:68px;left:12px;bottom:12px;width:var(--side);background:var(--bg);border-radius:12px;box-shadow:var(--sh);display:flex;flex-direction:column;overflow:hidden}
body.side-closed #sidebar{display:none}
#sheet-handle{display:none;justify-content:center;padding:8px 0 2px;cursor:pointer}
#sheet-handle i{width:40px;height:4px;border-radius:2px;background:#bdc1c6}
#tabs{display:flex;border-bottom:1px solid var(--bd);flex:none}
#tabs button{flex:1;border:0;background:none;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:var(--tx2);cursor:pointer;border-bottom:3px solid transparent}
#tabs button.active{color:var(--blue);border-bottom-color:var(--blue)}
#panels{flex:1;overflow-y:auto;overscroll-behavior:contain;background:#f8f9fa}
.tabpane{padding:10px;display:block}
.subtabs{display:flex;gap:6px;margin-bottom:10px;position:sticky;top:-10px;z-index:5;background:#f8f9fa;padding:10px 0 6px}
.subtabs button{flex:1;border:1px solid var(--bd);background:#fff;border-radius:18px;padding:7px 8px;cursor:pointer;font-weight:500}
.subtabs button.active{background:#e8f0fe;color:var(--blue);border-color:#aecbfa}
.cnt{display:inline-block;min-width:20px;padding:0 5px;border-radius:10px;background:var(--bg2);font-size:11px;line-height:18px;color:var(--tx2)}

/* Basis-Komponenten */
.card{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:10px;margin-bottom:10px}
.card h3{margin:0 0 8px;font-size:15px}
.row{display:flex;gap:8px;align-items:center;margin-top:8px}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between;margin-top:0}
.btn{border:1px solid var(--bd);background:#fff;border-radius:18px;padding:7px 12px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--blue);line-height:1.2}
.btn:hover{background:#f1f6fe}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-d)}
.btn.danger{color:var(--red)}.btn.danger:hover{background:#fce8e6}
.btn.active{background:#e8f0fe;border-color:var(--blue)}
.btn.sm{padding:5px 10px;font-size:13px}.btn.big{padding:10px 18px;font-size:15px;width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:default}
.seg{display:flex;gap:4px;margin-bottom:8px}
.seg button{flex:1;border:1px solid var(--bd);background:#fff;border-radius:18px;padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--tx2)}
.seg button.active{background:#e8f0fe;color:var(--blue);border-color:#aecbfa}
input[type=text],input[type=search],input[type=number],input[type=time],input[type=tel],input:not([type]),select,textarea{border:1px solid var(--bd);border-radius:8px;padding:8px 10px;background:#fff;width:100%;outline:0;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(26,115,232,.2)}
input[type=checkbox],input[type=radio]{width:auto}
.fld{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}.fld>span{font-size:12px;color:var(--tx2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.chk{display:flex;gap:8px;align-items:center;margin:6px 0;cursor:pointer}.chk.sm{margin:0;font-size:12px}
.empty{padding:20px;text-align:center;color:var(--tx2)}
.warnbox{background:#fef7e0;border-color:#f9d57a}.warnbox ul{margin:6px 0 0;padding-left:18px}
.err{color:var(--red)}.warn{color:var(--orange)}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block;flex:none}
.badge{width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.chip{background:var(--bg2);border-radius:10px;padding:1px 8px;font-size:11px;color:var(--tx2)}
.chip.eta{background:#e6f4ea;color:var(--green);font-weight:600}.chip.bad{background:#fce8e6;color:var(--red);font-weight:600}
.progress{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px}
.progress .bar{flex:1;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;min-width:60px}.progress .bar i{display:block;height:100%;background:var(--blue);width:0;transition:width .3s}
.busy{margin-top:8px;padding:8px;background:#e8f0fe;border-radius:8px;color:var(--blue-d);font-weight:500}
#tab-tour.busy .btn.big{opacity:.6;pointer-events:none}
.sw{margin-left:auto;position:relative;width:34px;height:18px;flex:none}.sw input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;background:#bdc1c6;border-radius:9px;transition:.2s}.sw i:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s}
.sw input:checked+i{background:var(--blue)}.sw input:checked+i:before{transform:translateX(16px)}

/* Autocomplete */
.ac-host{position:relative}
.ac-box{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:var(--sh2);z-index:2000;overflow:hidden;max-height:320px;overflow-y:auto;min-width:240px}
.ac-item{display:flex;gap:10px;padding:9px 12px;cursor:pointer;align-items:flex-start}.ac-item:hover,.ac-item.sel{background:#f1f3f4}
.ac-item small{display:block;color:var(--tx2);font-size:12px}.ac-pin{color:var(--tx2);margin-top:1px}.ac-empty{padding:12px;color:var(--tx2)}

/* Karten-Steuerung */
#mapctl{position:fixed;z-index:900;right:12px;bottom:56px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ctl{width:42px;height:42px;border:0;border-radius:10px;background:#fff;box-shadow:var(--sh);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#5f6368;font-weight:700}
.ctl:hover{background:#f1f3f4}.ctl.active{color:var(--blue);background:#e8f0fe}
.ctl-group{display:flex;flex-direction:column;border-radius:10px;box-shadow:var(--sh);overflow:hidden}.ctl-group .ctl{border-radius:0;box-shadow:none}.ctl-group .ctl+.ctl{border-top:1px solid var(--bd)}
#layerpanel{position:fixed;z-index:950;right:64px;bottom:56px;background:#fff;border-radius:10px;box-shadow:var(--sh2);padding:10px 14px;width:250px}
.lp-h{font-weight:600;margin:6px 0 4px}.lp-row{display:flex;gap:8px;align-items:center;padding:4px 0;cursor:pointer}.lp-note{font-size:11px;color:var(--tx2);margin-top:8px}
#measurebar{position:fixed;z-index:950;left:50%;transform:translateX(-50%);bottom:56px;background:#fff;border-radius:22px;box-shadow:var(--sh2);padding:8px 14px;display:flex;gap:10px;align-items:center;max-width:94vw;flex-wrap:wrap}
#ctxmenu{position:fixed;z-index:3000;background:#fff;border-radius:8px;box-shadow:var(--sh2);padding:6px 0;min-width:200px}
.ctx-item{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;padding:9px 16px;cursor:pointer;text-align:left}.ctx-item:hover{background:#f1f3f4}
.place-pop b{font-size:15px}.place-pop .sub{color:var(--tx2);margin-top:2px}.place-pop .coords{font-size:11px;color:var(--tx2);margin:4px 0 8px}
.pop-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* Route */
#wp-list{margin-bottom:4px}
.wp-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;border-radius:8px}
.wp-row.over{outline:2px dashed var(--blue)}.wp-row.dragging{opacity:.5}
.wp-handle{cursor:grab;color:#9aa0a6;display:flex}
.wp-badge{width:24px;height:24px;border-radius:50%;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
.alts{display:flex;gap:6px;overflow-x:auto;margin-bottom:6px}
.alt{flex:1;min-width:100px;border:1px solid var(--bd);background:#fff;border-radius:10px;padding:8px;text-align:left;cursor:pointer;display:flex;flex-direction:column}
.alt.active{border-color:var(--blue);background:#e8f0fe}.alt small{color:var(--tx2)}
.steps-h{font-weight:600;font-size:15px;margin-bottom:6px}
.step{display:flex;gap:10px;align-items:center;padding:8px 2px;border-top:1px solid var(--bg2);cursor:pointer}.step:hover{background:#f8f9fa}
.step-ic{color:var(--tx2);width:28px;display:flex;justify-content:center}.step-t{flex:1}.step-d{color:var(--tx2);font-size:12px;white-space:nowrap}

/* Stopps */
.list-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 2px 8px;font-size:12px;color:var(--tx2)}.list-h input{max-width:150px;padding:5px 10px;border-radius:14px}
.stop{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--bd);border-radius:10px;padding:8px;margin-bottom:6px}
.stop.done .stop-main b{text-decoration:line-through;color:var(--tx2)}.stop.fail{border-color:#f28b82;background:#fef7f6}
.stop-main{flex:1;min-width:0;cursor:pointer}.stop-main b,.tmain b{display:block;overflow:hidden;text-overflow:ellipsis}.stop-main small,.tmain small{display:block;color:var(--tx2);font-size:12px}
.stop-act{display:flex;flex-direction:column}.stop-act .icon-btn{width:30px;height:30px;min-width:30px}
.failrow{display:flex;gap:6px;align-items:center;margin-top:6px}.failrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard{background:#fff;border:1px solid var(--bd);border-radius:10px;margin-bottom:8px;overflow:hidden}
.vcard summary{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer;list-style:none}.vcard summary::-webkit-details-marker{display:none}
.vcard .form{padding:0 10px 10px}
.swatches{display:flex;gap:6px;flex-wrap:wrap}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--bd);cursor:pointer}.swatch.sel{box-shadow:0 0 0 2px var(--tx)}

/* Touren */
.sum,.tour-sum{display:flex;justify-content:space-around;text-align:center;gap:6px}
.sum small,.tour-sum small{display:block;color:var(--tx2);font-size:11px}.sum b{font-size:16px}.tour-sum b{font-size:13px}
.unas{display:flex;gap:8px;align-items:center;margin-top:8px}.unas>div{flex:1;min-width:0}.unas small{display:block;color:var(--tx2)}.unas select{width:140px}
.tour{background:#fff;border:1px solid var(--bd);border-top:4px solid var(--c);border-radius:10px;padding:10px;margin-bottom:12px}
.tour-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}.tour-h b{font-size:15px}
.tour-btns{margin:8px 0}
.tour-stops{border-top:1px solid var(--bg2);padding-top:6px}.tour-stops.over-end{outline:2px dashed var(--blue)}
.tdepot{display:flex;gap:6px;align-items:center;padding:6px 4px;color:var(--tx2);font-size:12px;background:#f8f9fa;border-radius:6px;margin:3px 0}
.trow{margin:2px 0;border-radius:8px}.trow.over{outline:2px dashed var(--blue)}.trow.dragging{opacity:.4}
.trow .leg{font-size:11px;color:var(--tx2);padding:2px 0 2px 38px}
.trow-in{display:flex;gap:8px;align-items:flex-start;padding:6px;border:1px solid var(--bg2);border-radius:8px}.trow.late .trow-in{border-color:#f28b82;background:#fef7f6}.trow.done .tmain b{text-decoration:line-through;color:var(--tx2)}
.handle{cursor:grab;color:#9aa0a6;display:flex;margin-top:3px}
.tmain{flex:1;min-width:0;cursor:pointer}
.tact{display:flex;flex-wrap:wrap;width:104px;justify-content:flex-end;gap:0}.tact .icon-btn{width:26px;height:26px;min-width:26px}
.tact .mv{width:50px;padding:2px;font-size:12px;height:26px}
.planrow{display:flex;gap:8px;align-items:center;margin-top:8px}.planrow span{flex:1;min-width:0}.planrow small{display:block;color:var(--tx2);font-size:11px}

/* Modal / Toast */
.modal-back{position:fixed;inset:0;z-index:5000;background:rgba(32,33,36,.5);display:flex;align-items:center;justify-content:center;padding:12px}
.modal{background:#fff;border-radius:14px;box-shadow:var(--sh2);width:min(440px,100%);max-height:92vh;display:flex;flex-direction:column}.modal.wide{width:min(560px,100%)}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bd);font-size:16px}
.modal-b{padding:14px 16px;overflow-y:auto}.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--bd)}
.form .fld{margin-bottom:8px}
.links-modal .link-block{margin-bottom:12px}.link-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.qr{display:inline-block;padding:6px;background:#fff;border:1px solid var(--bd);border-radius:8px}.qr:empty{display:none}
#toasts{position:fixed;z-index:6000;left:50%;transform:translateX(-50%);bottom:18px;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(560px,94vw)}
.toast{background:#323232;color:#fff;border-radius:8px;padding:10px 16px;box-shadow:var(--sh2);transition:.3s;max-width:100%}.toast.err{background:#b3261e}.toast.ok{background:#0b6a2e}.toast.out{opacity:0;transform:translateY(10px)}

/* Navigation */
#map.nav-rot{inset:auto;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;transform:rotate(var(--rot,0deg));transition:transform .5s linear}
body.navigating #searchbox,body.navigating #sidebar,body.navigating #mapctl,body.navigating #layerpanel,body.navigating #measurebar{display:none!important}
#nav{position:fixed;inset:0;z-index:1200;pointer-events:none}
#nav>*{pointer-events:auto}
.nav-top{position:absolute;top:0;left:0;right:0;background:#0b57d0;color:#fff;display:flex;gap:14px;align-items:center;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));box-shadow:var(--sh2)}
.nav-ic{flex:none;display:flex;color:#fff}
.nav-dist{font-size:30px;font-weight:700;line-height:1.1}.nav-text{font-size:18px;font-weight:500}.nav-sub{font-size:13px;opacity:.85;margin-top:2px}
.nav-banner{position:absolute;top:110px;left:50%;transform:translateX(-50%);background:#fff;color:var(--tx);padding:8px 16px;border-radius:20px;box-shadow:var(--sh2);font-weight:500;max-width:92vw;text-align:center}
.nav-stop{position:absolute;left:10px;right:10px;bottom:84px;background:#fff;border-radius:12px;box-shadow:var(--sh2);padding:10px;display:flex;gap:10px;align-items:center;max-width:560px;margin:0 auto}
.ns-n{width:34px;height:34px;border-radius:50%;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.ns-t{flex:1;min-width:0}.ns-t small{display:block;color:var(--tx2);font-size:11px}.ns-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-t span{display:block;font-size:12px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-t .ns-note{color:var(--orange)}
.nav-side{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.nav-bottom{position:absolute;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.2);padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px}
.nav-stats{display:flex;gap:22px}.nav-stats b{font-size:18px;display:block}.nav-stats small{color:var(--tx2);font-size:11px}
.navarrow{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#1a73e8;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));transition:transform .4s linear}
.navarrow svg{fill:#1a73e8;stroke:#fff;stroke-width:1.2px}

/* Mobil: Bottom-Sheet */
@media (max-width:700px){
  #searchbox{left:8px;right:8px;top:8px;width:auto}
  #sidebar{left:0;right:0;bottom:0;top:auto;width:100%;height:66vh;border-radius:16px 16px 0 0;transition:height .25s}
  #sheet-handle{display:flex}
  body.sheet-min #sidebar{height:92px}
  body.sheet-min #panels{display:none}
  #mapctl{bottom:calc(66vh + 10px)}
  body.sheet-min #mapctl{bottom:104px}
  #layerpanel{right:60px;bottom:calc(66vh + 10px)}
  body.sheet-min #layerpanel{bottom:104px}
  #measurebar{bottom:calc(66vh + 10px)}body.sheet-min #measurebar{bottom:104px}
  body.side-closed #sidebar{display:none}
  .tact{width:auto}
  .nav-dist{font-size:26px}.nav-text{font-size:16px}
  #toasts{bottom:100px}
}
@media print{#sidebar,#searchbox,#mapctl{display:none}}

/* ===== Benutzerleiste (angemeldeter Benutzer) ===== */
.livem{background:none;border:none}
#userbar{position:fixed;z-index:1150;top:12px;right:12px}
.ub-btn{display:flex;align-items:center;gap:8px;background:var(--bg);border:0;border-radius:22px;box-shadow:var(--sh);padding:6px 14px 6px 8px;cursor:pointer;max-width:300px}
.ub-ic{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.ub-txt{display:flex;flex-direction:column;text-align:left;line-height:1.2;min-width:0}
.ub-txt b,.ub-txt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-txt small{color:var(--tx2);font-size:11px}
.ub-menu{position:absolute;right:0;top:48px;background:var(--bg);border-radius:12px;box-shadow:var(--sh2);padding:10px 14px;width:250px;display:flex;flex-direction:column;gap:4px}
.ub-head{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.ub-head small{flex-basis:100%;color:var(--tx2)}
.ub-role{background:#e8f0fe;color:var(--blue);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:600}
.ub-link{display:block;text-align:left;border:0;background:none;padding:8px 2px;cursor:pointer;color:var(--blue);font-weight:500;text-decoration:none;border-radius:6px}
.ub-link:hover{background:var(--bg2)}
.toast.info .tbtn{margin-left:10px}

/* ===== Fahrer-Modus (index.html?tour=...) ===== */
#drvbar{position:fixed;z-index:1100;top:12px;left:12px;right:12px;max-width:440px;background:var(--bg);border-radius:12px;box-shadow:var(--sh);padding:12px;display:flex;flex-direction:column;gap:8px}
.drv-info{font-size:13px;color:var(--tx2)}
.drv-info b{color:var(--tx)}
.drv-info .err{color:var(--red)}
body.driver-mode #searchbox,body.driver-mode #sidebar,body.driver-mode #userbar,body.driver-mode #layerpanel{display:none!important}
body.driver-mode #mapctl{bottom:56px!important}
body.navigating #drvbar,body.navigating #userbar{display:none!important}
@media(max-width:700px){
  #searchbox{right:58px!important}
  .ub-txt{display:none}.ub-btn{padding:4px;border-radius:50%}
  #userbar{top:8px;right:8px}
  .ub-menu{right:0;width:240px}
}

/* Route <-> Tourenplanung */
.optinfo{margin-top:8px;padding:8px 10px;border-radius:8px;background:#e6f4ea;border:1px solid #b7dfc2;font-size:13px;display:flex;flex-direction:column;gap:2px}
.nextbox{border-color:var(--blue);background:#f4f8fe}
.modal select{max-width:100%}