/* ============================================================
   NineConnect Web v51 — Touren & Karte / Navigation
   Reines Design-Upgrade; vorhandene IDs und Funktionen bleiben.
   ============================================================ */

#page-planner{
  --map-cyan:#16d8ff;
  --map-blue:#167bff;
  --map-green:#2ae8a1;
  --map-bg:#03101f;
  --map-panel:linear-gradient(145deg,rgba(6,29,52,.94),rgba(3,15,29,.94));
  --map-line:rgba(27,183,255,.22);
  padding-bottom:34px;
}

/* Combined page switcher */
#page-planner .routes-combined-tabs{
  margin-bottom:16px!important;
  padding:7px!important;
  border-radius:22px!important;
  border:1px solid rgba(28,187,255,.22)!important;
  background:linear-gradient(145deg,rgba(5,27,49,.92),rgba(2,15,29,.90))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.20)!important;
}
#page-planner .routes-combined-tabs button{
  min-height:76px!important;
  border-radius:16px!important;
}
#page-planner .routes-combined-tabs button.active{
  border-color:rgba(23,215,255,.42)!important;
  background:linear-gradient(110deg,rgba(0,189,255,.19),rgba(18,93,220,.16))!important;
  box-shadow:inset 3px 0 0 #17dcff,0 0 28px rgba(0,142,255,.08)!important;
}

/* Main planner shell */
#page-planner .planner-v34-shell{
  grid-template-columns:minmax(360px,410px) minmax(0,1fr)!important;
  min-height:760px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(24,185,255,.28)!important;
  background:#061421!important;
  box-shadow:0 28px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* Left control panel */
#page-planner .planner-v34-panel{
  position:relative;
  padding:22px!important;
  gap:14px!important;
  background:
    radial-gradient(circle at 0 0,rgba(0,183,255,.09),transparent 27%),
    linear-gradient(180deg,#071a2e 0%,#041320 52%,#03101b 100%)!important;
  border-right:1px solid rgba(31,179,255,.18)!important;
}
#page-planner .planner-v34-panel:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:-110px;
  bottom:14%;
  border-radius:50%;
  background:#05bfff;
  filter:blur(100px);
  opacity:.08;
  pointer-events:none;
}

#page-planner .planner-v34-titlebar{
  align-items:center!important;
  padding-bottom:5px;
}
#page-planner .planner-v34-titlebar h2{
  margin:5px 0 0!important;
  font-size:29px!important;
  letter-spacing:-.035em;
}
#page-planner .planner-local-badge{
  border-radius:999px!important;
  color:#7af4c2!important;
  border:1px solid rgba(42,232,161,.24)!important;
  background:rgba(10,73,57,.18)!important;
  font-size:9px!important;
  padding:7px 9px!important;
}

/* Vehicle mode switch */
#page-planner .planner-mode-tabs{
  padding:5px!important;
  border:1px solid rgba(27,167,255,.12);
  border-radius:15px!important;
  background:rgba(0,11,22,.70)!important;
}
#page-planner .planner-mode-tabs button{
  min-height:42px;
  border-radius:11px!important;
}
#page-planner .planner-mode-tabs button.active{
  background:linear-gradient(120deg,rgba(39,227,166,.19),rgba(12,128,210,.15))!important;
  box-shadow:inset 0 0 0 1px rgba(41,229,168,.18)!important;
}

/* Tour name */
#page-planner .planner-tour-name{
  color:#91a9bf!important;
  font-size:11px!important;
}
#page-planner .planner-tour-name input{
  min-height:48px;
  border-radius:14px!important;
  border:1px solid rgba(27,172,255,.23)!important;
  background:rgba(0,14,28,.78)!important;
  padding:0 14px!important;
}

/* Start / destination */
#page-planner .planner-endpoints{
  gap:10px!important;
}
#page-planner .planner-endpoint,
#page-planner .planner-via-row{
  min-height:62px;
  border-radius:16px!important;
  border:1px solid rgba(30,166,255,.20)!important;
  background:linear-gradient(145deg,rgba(4,25,44,.88),rgba(2,15,29,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
#page-planner .planner-endpoint:focus-within,
#page-planner .planner-via-row:focus-within{
  border-color:rgba(24,215,255,.52)!important;
  box-shadow:0 0 0 3px rgba(24,215,255,.07)!important;
}
#page-planner .planner-endpoint small,
#page-planner .planner-via-row small{
  color:#6f92ad!important;
}
#page-planner .planner-endpoint input,
#page-planner .planner-via-row input{
  color:#f2f9ff!important;
}
#page-planner .planner-endpoint input::placeholder,
#page-planner .planner-via-row input::placeholder{
  color:#607c94;
}
#page-planner .planner-point-symbol{
  color:#2ae8a1!important;
  text-shadow:0 0 18px rgba(42,232,161,.22);
}
#page-planner .planner-endpoint.destination .planner-point-symbol{
  color:#ff6c85!important;
  text-shadow:0 0 18px rgba(255,108,133,.18);
}
#page-planner .planner-endpoint button,
#page-planner .planner-via-row button{
  border-radius:11px!important;
  border-color:rgba(29,171,255,.20)!important;
  background:rgba(7,31,52,.76)!important;
  color:#dff6ff!important;
}
#page-planner .planner-swap{
  right:-11px!important;
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(25,185,255,.25)!important;
  background:#08213a!important;
  color:#1bdcff!important;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
#page-planner .planner-add-via{
  color:#1edaff!important;
  padding:6px 4px!important;
}

/* Options */
#page-planner .planner-options-v34{
  padding:9px 0!important;
  border-color:rgba(31,159,219,.12)!important;
}
#page-planner .planner-options-v34 summary{
  color:#dbe9f5!important;
  font-size:12px;
}
#page-planner .planner-options-v34 label{
  color:#83a0b9!important;
}

/* Alternative route cards */
#page-planner .planner-route-head{
  margin-top:2px;
}
#page-planner .planner-route-head small{
  color:#19d6ff!important;
}
#page-planner .planner-route-head b{
  color:#f3f9ff;
}
#page-planner .planner-alternatives{
  gap:9px!important;
}
#page-planner .planner-empty-route{
  padding:17px!important;
  border-radius:15px!important;
  border:1px dashed rgba(26,171,255,.25)!important;
  background:rgba(2,18,33,.48)!important;
  color:#7795af!important;
}
#page-planner .planner-alt{
  border-radius:16px!important;
  border:1px solid rgba(27,160,235,.18)!important;
  background:linear-gradient(145deg,rgba(6,29,49,.90),rgba(3,17,31,.90))!important;
}
#page-planner .planner-alt:hover{
  border-color:rgba(26,210,255,.40)!important;
}
#page-planner .planner-alt.active{
  border-color:rgba(42,232,161,.42)!important;
  background:linear-gradient(135deg,rgba(36,210,159,.13),rgba(11,97,196,.10))!important;
  box-shadow:inset 3px 0 0 #2ae8a1!important;
}

/* Buttons */
#page-planner .planner-v34-actions{
  gap:10px!important;
}
#page-planner .planner-v34-actions button,
#page-planner .planner-import-row button{
  min-height:46px;
  border-radius:14px!important;
  border:1px solid rgba(28,170,255,.22)!important;
  background:rgba(5,29,50,.80)!important;
  color:#e7f6ff!important;
}
#page-planner .planner-v34-actions .primary{
  border:1px solid #29dbff!important;
  background:linear-gradient(90deg,#12c4e5,#147eff)!important;
  color:white!important;
  box-shadow:0 12px 26px rgba(0,139,255,.20);
}
#page-planner .planner-import-row{
  gap:8px!important;
}
#page-planner .planner-privacy-note{
  color:#5d7891!important;
  font-size:9px!important;
}

/* Map pane */
#page-planner .planner-v34-map-pane{
  position:relative;
  min-width:0;
  background:
    radial-gradient(circle at 70% 20%,rgba(0,137,255,.08),transparent 27%),
    #071827!important;
}
#page-planner .route-planner-map-v34{
  min-height:760px!important;
}

/* Top controls on map */
#page-planner .planner-map-topbar{
  top:16px!important;
  left:16px!important;
  right:16px!important;
  align-items:flex-start!important;
}
#page-planner .planner-map-search-hint{
  min-height:46px;
  padding:10px 14px!important;
  border-radius:15px!important;
  background:rgba(2,17,31,.88)!important;
  border:1px solid rgba(25,178,255,.22)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(15px)!important;
}
#page-planner .planner-map-search-hint span:first-child{
  color:#2ae8a1!important;
}
#page-planner .planner-map-top-actions{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

/* Karte / Satellit / Offline intentionally stacked for faster touch use */
#page-planner .planner-layer-switch{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  padding:5px!important;
  min-width:150px;
  border-radius:15px!important;
  border:1px solid rgba(24,176,255,.20)!important;
  background:rgba(2,17,31,.88)!important;
  backdrop-filter:blur(15px);
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
#page-planner .planner-layer-switch button{
  min-height:34px!important;
  padding:7px 10px!important;
  text-align:left!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#819bb2!important;
  white-space:nowrap;
}
#page-planner .planner-layer-switch button.active{
  background:linear-gradient(110deg,rgba(0,189,255,.18),rgba(15,92,214,.16))!important;
  color:#effbff!important;
  box-shadow:inset 2px 0 0 #16d8ff!important;
}
#page-planner .planner-map-chips{
  display:grid!important;
  gap:0!important;
  border-radius:15px!important;
  border:1px solid rgba(23,173,255,.20)!important;
  background:rgba(2,17,31,.88)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(15px);
}
#page-planner .planner-map-chips span{
  min-width:88px;
  padding:8px 11px!important;
  border-left:0!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  text-align:center;
  color:#d9f5ff!important;
}
#page-planner .planner-map-chips span:first-child{
  border-top:0!important;
}

/* Bottom map controls */
#page-planner .planner-map-actions-v34{
  left:16px!important;
  right:16px!important;
  bottom:16px!important;
  gap:7px!important;
}
#page-planner .planner-map-actions-v34 button{
  min-height:40px;
  padding:8px 12px!important;
  border-radius:12px!important;
  border:1px solid rgba(27,170,255,.19)!important;
  background:rgba(2,18,33,.89)!important;
  color:#e4f6ff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.20);
}
#page-planner .planner-map-actions-v34 button:hover{
  border-color:rgba(23,212,255,.40)!important;
}
#page-planner .planner-map-actions-v34>span{
  max-width:47%;
  margin-left:auto!important;
  color:#7290aa!important;
  background:rgba(2,16,30,.82)!important;
  border:1px solid rgba(25,164,230,.12);
  border-radius:11px!important;
}

/* Saved routes under the map */
#page-planner .planner-saved-v34{
  margin-top:17px!important;
  padding:20px!important;
  border-radius:24px!important;
  border:1px solid rgba(25,172,255,.18)!important;
  background:linear-gradient(145deg,rgba(5,27,48,.86),rgba(3,15,29,.90))!important;
  box-shadow:0 20px 55px rgba(0,0,0,.20)!important;
}
#page-planner .planner-saved-v34 .card-head button{
  border:1px solid rgba(25,177,255,.20)!important;
  border-radius:12px!important;
  background:rgba(4,26,45,.76)!important;
  color:#e4f8ff!important;
}

/* Responsive */
@media(max-width:1220px){
  #page-planner .planner-v34-shell{
    grid-template-columns:370px minmax(0,1fr)!important;
  }
  #page-planner .planner-map-top-actions{
    flex-direction:column;
    align-items:flex-end;
  }
  #page-planner .planner-map-chips{
    grid-template-columns:repeat(3,auto)!important;
  }
  #page-planner .planner-map-chips span{
    border-top:0!important;
    border-left:1px solid rgba(255,255,255,.055)!important;
  }
  #page-planner .planner-map-chips span:first-child{
    border-left:0!important;
  }
}

@media(max-width:900px){
  #page-planner .planner-v34-shell{
    grid-template-columns:1fr!important;
  }
  #page-planner .planner-v34-panel{
    border-right:0!important;
    border-bottom:1px solid rgba(31,179,255,.18)!important;
  }
  #page-planner .route-planner-map-v34{
    min-height:560px!important;
  }
}

@media(max-width:640px){
  #page-planner .planner-v34-panel{
    padding:16px!important;
  }
  #page-planner .planner-map-topbar{
    flex-direction:column!important;
  }
  #page-planner .planner-map-top-actions{
    width:100%;
    flex-direction:row;
    align-items:flex-start;
  }
  #page-planner .planner-layer-switch{
    min-width:0;
    flex:1;
  }
  #page-planner .planner-map-chips{
    grid-template-columns:1fr!important;
  }
  #page-planner .planner-map-actions-v34{
    flex-wrap:wrap!important;
  }
  #page-planner .planner-map-actions-v34>span{
    width:100%;
    max-width:none;
    margin-left:0!important;
  }
}