:root{
  --bg:#03101e; --panel:#082a47; --panel2:#0a3a64;
  --accent:#7cc7ff; --accent2:#3f9fe8; --line:#1163a8;
  --text:#e8f4ff; --muted:#8fb4d6;
  --c-auto:#ffb454; --c-flugzeug:#c792ea; --c-bahn:#6fe3a0; --c-schiff:#5aa9e8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
#app{display:flex;height:100vh}
#infopanel{width:25%;min-width:260px;max-width:380px;background:linear-gradient(180deg,var(--bg),var(--panel));border-right:1px solid var(--line);overflow-y:auto;padding:22px 20px;font-size:13px;line-height:1.55}
#infopanel h2{font-size:17px;line-height:1.3;margin-bottom:10px;color:var(--accent)}
#infopanel h3{font-size:13.5px;margin:16px 0 6px;color:var(--accent)}
#infopanel h4{font-size:12.5px;margin:10px 0 3px;color:var(--text)}
#infopanel p{color:var(--muted);margin-bottom:6px}
#infopanel ol{color:var(--muted);padding-left:18px;display:flex;flex-direction:column;gap:4px}
#infopanel .faq p{margin-bottom:8px}
#infopanel .backlink{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
#infopanel .backlink a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(124,199,255,.4)}
#infopanel .backlink a:hover{text-decoration-color:var(--accent)}
#infopanel::-webkit-scrollbar{width:8px}
#infopanel::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
#map{flex:1;background:#04182c}
.leaflet-container{background:#04182c}
.leaflet-tile{filter:brightness(0.7) saturate(0.85) hue-rotate(180deg) invert(0.92) contrast(0.9)}
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.leaflet-popup-tip{background:var(--panel)}
.leaflet-popup-content{margin:12px 14px;font-size:13px;line-height:1.5}
.distance-tooltip{background:var(--panel2);color:var(--accent);border:1px solid var(--line);font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.distance-tooltip::before{border-top-color:var(--panel2)}
.leaflet-control-zoom a{background:var(--panel);color:var(--accent);border:none}
.leaflet-control-zoom a:hover{background:var(--panel2)}

#side{width:360px;background:linear-gradient(180deg,var(--panel),var(--bg));display:flex;flex-direction:column;border-left:1px solid var(--line);overflow:hidden}
header{padding:16px 18px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
header h1{font-size:16px;font-weight:700}
header .logout{font-size:11px;color:var(--muted);text-decoration:none}
header .logout:hover{color:var(--accent)}
header .headerlinks{display:flex;gap:12px}

.tripbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center}
.tripbar select{flex:1;min-width:80px;background:#04182c;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px}
.tripbar button{flex-shrink:0;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;width:30px;cursor:pointer;font-size:13px}
.tripbar button:hover{background:var(--line)}
.tripbar .demoname{flex:1;font-size:12.5px;color:var(--muted)}
.tripbar #demoReset{width:auto;padding:0 10px;font-size:11.5px;white-space:nowrap}
.tripbar #gmapsBtn{flex:1;width:auto;padding:7px 10px;font-size:11.5px;white-space:nowrap}
.tripbar .filebtn{flex:1;display:flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:11.5px;cursor:pointer;white-space:nowrap}
.tripbar .filebtn:hover{background:var(--line)}
.demobanner{padding:8px 14px;font-size:11px;color:#ffd166;background:rgba(255,209,102,.08);border-bottom:1px solid var(--line);line-height:1.4}

.sharebar{gap:6px;padding:8px 14px;border-bottom:1px solid var(--line);background:rgba(124,199,255,.06)}
.sharebar input{flex:1;background:#04182c;color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:11px}
.sharebar button{background:var(--accent2);color:#02101d;border:none;border-radius:8px;padding:0 10px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}

.playbar{padding:8px 14px;border-bottom:1px solid var(--line)}
.playbar button{width:100%;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-weight:600;font-size:12.5px;cursor:pointer}
.playbar button:hover{background:var(--line)}

.list{flex:1;overflow-y:auto;padding:10px 12px}
.list::-webkit-scrollbar{width:8px}
.list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.stop{position:relative;padding:10px 12px 10px 34px;margin:6px 0;background:rgba(10,58,100,.4);border-radius:10px;border-left:3px solid var(--accent2);cursor:grab;transition:opacity .15s,box-shadow .15s}
.stop:active{cursor:grabbing}
.stop.dragging{opacity:.4}
.stop.drag-over{box-shadow:0 -3px 0 0 var(--accent)}
.stop .num{position:absolute;left:8px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--accent2);color:#02101d;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stop .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.stop .ort{font-weight:600;font-size:13px}
.stop .ort a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(124,199,255,.4)}
.stop .ort a:hover{text-decoration-color:var(--accent)}
.stop .time{font-size:11px;color:var(--accent);white-space:nowrap}
.stop .meta{font-size:11px;color:var(--muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.stop .mode{display:inline-block;padding:1px 7px;border-radius:6px;font-size:10px;font-weight:600;color:#02101d;white-space:nowrap}
.stop .dist{font-size:10.5px;color:var(--muted);white-space:nowrap}
.stop .notiz{font-size:11px;color:var(--muted);margin-top:4px;font-style:italic}
.stop .kosten{font-size:11.5px;color:#a8e6b8;margin-top:4px;font-weight:600}
.stop .actions{margin-left:auto;display:flex;gap:4px}
.stop .actions button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 4px}
.stop .actions button:hover{color:var(--accent)}

.total{padding:8px 14px;font-size:12.5px;font-weight:700;color:#a8e6b8;text-align:right;border-top:1px solid var(--line)}

.addform{padding:12px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.addform input,.addform select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#04182c;color:var(--text);font-size:12.5px}
.addform .row{display:flex;gap:8px}
.addform .row input{flex:1.4}
.addform .row select{flex:1}
.addform .row button{flex:1}
.addform button{padding:9px;border-radius:8px;border:none;background:var(--accent);color:#02101d;font-weight:700;cursor:pointer;font-size:12.5px}
.addform button:hover{filter:brightness(1.08)}
.addform #addFormCancel{background:var(--panel2);color:var(--text)}

.autocomplete-wrap{position:relative}
.suggest{position:absolute;top:100%;left:0;right:0;background:var(--panel2);border:1px solid var(--line);border-radius:8px;margin-top:4px;max-height:180px;overflow-y:auto;z-index:1000;display:none}
.suggest div{padding:8px 10px;font-size:12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06)}
.suggest div:last-child{border-bottom:none}
.suggest div:hover{background:var(--line)}

footer{padding:8px 14px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);line-height:1.4}

@media(max-width:760px){#app{flex-direction:column}#infopanel{width:100%;max-width:none;max-height:32vh;order:3;border-right:none;border-top:1px solid var(--line)}#side{width:100%;height:56%}#map{height:44%}}