/* Netzdisplay: eigenstaendiges dunkles Betriebsbild, kompakt und funktionsgleich. */
:root{
  --nd-bg:#071014;
  --nd-panel:#101a1f;
  --nd-panel-2:#132229;
  --nd-line:#263941;
  --nd-line-soft:#1c2c33;
  --nd-text:#e8f2f4;
  --nd-muted:#8ea4aa;
  --nd-cyan:#2dd4bf;
  --nd-blue:#38bdf8;
  --nd-yellow:#facc15;
  --nd-red:#fb7185;
  --nd-green:#4ade80;
}

html,
body{
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px),
    var(--nd-bg) !important;
  background-size:28px 28px !important;
  color:var(--nd-text) !important;
}

header{
  padding:7px 10px !important;
  gap:8px !important;
  background:#081116 !important;
  color:var(--nd-text) !important;
  border-bottom:2px solid var(--nd-cyan) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.25) !important;
}

h1{
  font-size:18px !important;
  line-height:1 !important;
  color:#ffffff !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
}

.sub{
  display:none !important;
}

.topbar{
  gap:5px !important;
}

button,
select{
  height:28px !important;
  min-height:28px !important;
  padding:4px 9px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

select{
  background:#0f1b20 !important;
  color:var(--nd-text) !important;
  border:1px solid #35505a !important;
}

button,
.secondary,
.app-btn,
.vehicle-card-btn{
  background:#132229 !important;
  color:var(--nd-text) !important;
  border:1px solid #38545d !important;
}

button:hover,
.app-btn:hover,
.vehicle-card-btn:hover{
  filter:none !important;
  background:#1b3038 !important;
  border-color:var(--nd-cyan) !important;
}

button:active,
.app-btn:active,
.vehicle-card-btn:active{
  transform:none !important;
}

.danger,
button.red{
  background:#35151c !important;
  color:#fecdd3 !important;
  border-color:#9f4050 !important;
}

main{
  height:calc(100vh - 44px) !important;
  padding:8px !important;
  gap:8px !important;
  grid-template-columns:minmax(0,1fr) 250px !important;
  background:transparent !important;
}

.board{
  gap:8px !important;
}

.block{
  position:relative !important;
  padding:7px !important;
  border:1px solid var(--nd-line) !important;
  border-radius:2px !important;
  background:rgba(16,26,31,.94) !important;
  box-shadow:inset 4px 0 0 var(--nd-cyan), 0 10px 28px rgba(0,0,0,.25) !important;
}

.block:nth-child(2){
  box-shadow:inset 4px 0 0 var(--nd-blue), 0 10px 28px rgba(0,0,0,.25) !important;
}

.block:nth-child(3){
  box-shadow:inset 4px 0 0 var(--nd-yellow), 0 10px 28px rgba(0,0,0,.25) !important;
}

.block.primary{
  grid-row:1/3 !important;
}

.block-head{
  min-height:24px !important;
  margin:0 0 5px !important;
  padding:0 4px 5px 7px !important;
  border-bottom:1px solid var(--nd-line) !important;
  gap:4px !important;
}

.block h2{
  font-size:14px !important;
  line-height:1 !important;
  color:#ffffff !important;
  text-align:left !important;
  text-shadow:none !important;
  letter-spacing:0 !important;
}

.dir{
  font-size:10px !important;
  color:var(--nd-muted) !important;
}

.summary{
  padding-top:2px !important;
  font-size:10px !important;
  color:var(--nd-muted) !important;
}

.tracks{
  gap:3px !important;
  grid-template-rows:repeat(var(--rows,1),minmax(25px,1fr)) !important;
}

.track{
  grid-template-columns:14px 34px minmax(0,1fr) 50px !important;
  gap:4px !important;
  min-height:0 !important;
}

.track-signal{
  width:12px !important;
  height:30px !important;
}

.signal-head{
  left:1px !important;
  top:2px !important;
  width:10px !important;
  height:25px !important;
  border-radius:3px !important;
  background:#05090b !important;
  border:1px solid #415962 !important;
  box-shadow:none !important;
}

.signal-lamp{
  left:3px !important;
  width:4px !important;
  height:4px !important;
  opacity:.45;
}

.signal-lamp.red{top:4px !important;}
.signal-lamp.yellow{top:10px !important;}
.signal-lamp.green{top:16px !important;}
.track-signal.is-red .red,
.track-signal.is-yellow .yellow,
.track-signal.is-green .green{
  opacity:1;
}
.signal-post,
.signal-foot{
  display:none !important;
}

.track-name{
  height:24px !important;
  min-width:0 !important;
  padding:2px 3px !important;
  border:1px solid #37525a !important;
  border-radius:2px !important;
  background:#0b1519 !important;
  color:#dff7f4 !important;
  font-size:13px !important;
  line-height:18px !important;
  box-shadow:none !important;
}

.track-name.locked{
  color:#fecdd3 !important;
  border-color:var(--nd-red) !important;
  background:#2b1017 !important;
}

.track-len{
  padding:1px 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--nd-muted) !important;
  font-size:7px !important;
  line-height:1.05 !important;
  font-weight:700 !important;
}

.rail{
  height:82% !important;
  min-height:22px !important;
  max-height:32px !important;
  border:1px solid #304851 !important;
  border-radius:2px !important;
  background:
    linear-gradient(90deg,rgba(45,212,191,.12) 1px,transparent 1px),
    #071014 !important;
  background-size:18px 100% !important;
  box-shadow:none !important;
}

.rail::before{
  left:4px !important;
  right:4px !important;
  height:2px !important;
  background:var(--nd-cyan) !important;
  box-shadow:0 0 8px rgba(45,212,191,.65) !important;
}

.rail::after{
  display:none !important;
}

.rail.dragover{
  outline:2px solid var(--nd-yellow) !important;
  outline-offset:1px !important;
}

.lock{
  border:1px solid var(--nd-red) !important;
  background:repeating-linear-gradient(45deg,rgba(251,113,133,.35) 0 6px,rgba(0,0,0,.15) 6px 12px) !important;
}

.walk{
  width:8px !important;
  background:repeating-linear-gradient(45deg,#0a0f11 0 4px,var(--nd-yellow) 4px 8px) !important;
}

.veh{
  height:20px !important;
  min-width:12px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.35) !important;
  font-size:11px !important;
  line-height:1 !important;
}

.veh.selected{
  outline:2px solid var(--nd-yellow) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px rgba(0,0,0,.75),0 0 16px rgba(250,204,21,.4) !important;
}

.dt4,
.dt46,
.dt5{
  background:linear-gradient(180deg,#f8fafc,#cbd5e1) !important;
  color:#081116 !important;
}

.work{
  background:linear-gradient(180deg,#94a3b8,#475569) !important;
}

.couple-tag{
  top:-7px !important;
  right:2px !important;
  padding:0 4px !important;
  border:1px solid #061014 !important;
  background:var(--nd-yellow) !important;
  color:#111827 !important;
  font-size:8px !important;
}

.side{
  padding:8px !important;
  border:1px solid var(--nd-line) !important;
  border-radius:2px !important;
  background:rgba(8,17,22,.96) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
}

.vehicle-card,
.cardbox,
.cardbox.light{
  padding:8px !important;
  margin-bottom:8px !important;
  border:1px solid var(--nd-line) !important;
  border-radius:2px !important;
  background:#101a1f !important;
  color:var(--nd-text) !important;
  box-shadow:none !important;
}

.vehicle-card h2,
.cardbox h2{
  margin:0 0 6px !important;
  padding:0 0 6px !important;
  border-bottom:1px solid var(--nd-line) !important;
  color:#ffffff !important;
  font-size:14px !important;
}

.vehicle-card-row{
  grid-template-columns:74px minmax(0,1fr) !important;
  gap:5px !important;
  padding:4px 0 !important;
  border-bottom:1px solid var(--nd-line-soft) !important;
  font-size:11px !important;
}

.vehicle-card-row span{
  color:var(--nd-muted) !important;
}

.vehicle-card-row b{
  max-width:none !important;
  color:var(--nd-text) !important;
}

.vehicle-card-row:has(#vehicleCardDue){
  align-items:start !important;
}

.vehicle-card-row:has(#vehicleCardNote){
  grid-template-columns:62px minmax(0,1fr) !important;
  gap:3px !important;
  align-items:center !important;
}

.vehicle-card-row:has(#vehicleCardNote) > span{
  display:block !important;
  font-size:10px !important;
}

#vehicleCardNote{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
  align-items:center !important;
  max-width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-align:right !important;
  justify-content:flex-end !important;
}

#vehicleCardDue{
  min-width:0 !important;
  width:100% !important;
  overflow:visible !important;
  text-align:left !important;
}

.vehicle-card-due-list{
  display:grid !important;
  gap:4px !important;
  width:100% !important;
  min-width:0 !important;
}

.vehicle-card-due-item{
  display:grid !important;
  grid-template-columns:minmax(64px,max-content) minmax(0,1fr) !important;
  grid-template-areas:"date kind" "time kind" !important;
  column-gap:8px !important;
  row-gap:1px !important;
  min-width:0 !important;
  padding:5px 7px !important;
  border:1px solid #263941 !important;
  border-left:4px solid var(--nd-blue) !important;
  border-radius:7px !important;
  background:#0b1519 !important;
}

.vehicle-card-due-item.vehicle-card-due-bba{
  border-left-color:var(--nd-yellow) !important;
}

.vehicle-card-due-item.vehicle-card-due-bfa{
  border-left-color:var(--nd-blue) !important;
}

.vehicle-card-due-item.vehicle-card-due-bbi{
  border-left-color:var(--nd-green) !important;
}

.vehicle-card-due-date{
  grid-area:date !important;
  white-space:nowrap !important;
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:950 !important;
  line-height:1.1 !important;
}

.vehicle-card-due-time{
  grid-area:time !important;
  min-height:10px !important;
  color:#9ed9ff !important;
  font-size:10px !important;
  font-weight:850 !important;
  line-height:1.1 !important;
}

.vehicle-card-due-kind{
  grid-area:kind !important;
  min-width:0 !important;
  align-self:center !important;
  justify-self:end !important;
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:950 !important;
  line-height:1.15 !important;
  overflow-wrap:anywhere !important;
  text-align:right !important;
}

.vehicle-card-status{
  padding:2px 6px !important;
  border-radius:999px !important;
  border:1px solid #3f5962 !important;
}

.vehicle-card-status,
.vehicle-card-status:not([class*="status-"]),
.vehicle-card-status.status-bereit{
  background:#e8eef4 !important;
  background-image:none !important;
  color:#0b1216 !important;
  text-shadow:none !important;
  font-weight:900 !important;
}

.vehicle-card-status.status-defekt,
.vehicle-card-status.status-graffiti,
.vehicle-card-status.status-anforderung,
.vehicle-card-status.status-reserve,
.vehicle-card-status.status-defekt_graffiti,
.vehicle-card-status.status-defekt-graffiti{
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}

.vehicle-card-status.status-werkstatt{
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}

.vehicle-card-btn{
  margin-top:5px !important;
  min-height:28px !important;
  height:28px !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  font-size:11px !important;
}

#editorBackdrop.backdrop{
  align-items:center !important;
  justify-content:center !important;
  padding:14px !important;
  background:rgba(2,8,12,.74) !important;
  backdrop-filter:blur(2px) !important;
}

#editorBackdrop .dialog{
  width:min(560px,calc(100vw - 28px)) !important;
  max-height:calc(100vh - 28px) !important;
  overflow:auto !important;
  padding:16px !important;
  border:1px solid #35505a !important;
  border-radius:10px !important;
  background:#101a1f !important;
  color:var(--nd-text) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.55), inset 4px 0 0 var(--nd-blue) !important;
}

#editorBackdrop .dialog h2{
  margin:0 0 12px !important;
  padding:0 0 9px !important;
  border-bottom:1px solid var(--nd-line) !important;
  color:#ffffff !important;
  font-size:20px !important;
  line-height:1.15 !important;
}

#editorBackdrop .form{
  gap:10px !important;
}

#editorBackdrop .form label{
  display:grid !important;
  gap:4px !important;
  color:#d8e6e9 !important;
  font-size:12px !important;
  font-weight:900 !important;
}

#editorBackdrop .form input,
#editorBackdrop .form select,
#editorBackdrop .form textarea,
#editorBackdrop .dialog input{
  width:100% !important;
  border:1px solid #38545d !important;
  border-radius:8px !important;
  background:#0b1519 !important;
  color:var(--nd-text) !important;
  padding:8px 9px !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

#editorBackdrop .form input:focus,
#editorBackdrop .form select:focus,
#editorBackdrop .form textarea:focus{
  outline:2px solid rgba(56,189,248,.55) !important;
  outline-offset:1px !important;
  border-color:var(--nd-blue) !important;
}

#editorBackdrop .form textarea{
  min-height:70px !important;
  resize:vertical !important;
}

#editorBackdrop .row{
  grid-template-columns:1fr 1fr !important;
  gap:9px !important;
}

#editorBackdrop .actions{
  display:grid !important;
  grid-template-columns:auto 1fr auto auto !important;
  gap:8px !important;
  margin-top:4px !important;
}

#editorBackdrop #deleteVehicleBtn{
  background:#35151c !important;
  color:#fecdd3 !important;
  border-color:#9f4050 !important;
}

@media(max-width:620px){
  #editorBackdrop .row,
  #editorBackdrop .actions{
    grid-template-columns:1fr !important;
  }
  #editorBackdrop .actions span{
    display:none !important;
  }
}

.muted,
.list{
  color:var(--nd-muted) !important;
  font-size:11px !important;
}

.notice{
  position:fixed !important;
  top:18px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:99999 !important;
  max-width:min(520px,calc(100vw - 32px)) !important;
  white-space:normal !important;
  text-align:center !important;
  padding:11px 16px !important;
  border-radius:10px !important;
  background:#0b1519 !important;
  color:#ffffff !important;
  border:1px solid #7dd3fc !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  box-shadow:0 16px 44px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.10) inset !important;
}

.notice.in-dialog{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  display:block !important;
  max-width:none !important;
  width:100% !important;
  margin:0 0 12px 0 !important;
  border-radius:8px !important;
  text-align:left !important;
  background:#3a1115 !important;
  border:1px solid #ef4444 !important;
  color:#ffffff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.facility-vf-gh-ot #board{
  gap:8px !important;
}

body.facility-vf-gh-ot .block.gh-bottom{
  min-height:0 !important;
}

body.facility-vf-gh-ot .block.gh-bottom .rail{
  min-height:23px !important;
}

@media(max-width:1450px){
  main{
    grid-template-columns:minmax(0,1fr) 215px !important;
  }
  .board{
    grid-template-columns:1.45fr .75fr !important;
  }
  .track{
    grid-template-columns:12px 30px minmax(0,1fr) 42px !important;
  }
  .track-len{
    font-size:6px !important;
  }
  .vehicle-card-due-item{
    grid-template-columns:1fr !important;
    grid-template-areas:"date" "time" "kind" !important;
  }
  .vehicle-card-due-kind{
    justify-self:start !important;
    text-align:left !important;
  }
}

/* Kontrastkorrekturen fuer helle Fahrzeug- und Kuppelmarker im dunklen Netzdisplay. */
.rail .veh .couple-tag,
.rail .veh .couple-tag.left,
.rail .veh .couple-tag.right,
.couple-tag,
.couple-tag.left,
.couple-tag.right{
  top:-8px !important;
  min-width:24px !important;
  height:12px !important;
  padding:1px 5px !important;
  border:1px solid #0a1115 !important;
  border-radius:999px !important;
  background:#facc15 !important;
  background-image:none !important;
  color:#061014 !important;
  font-size:8px !important;
  font-weight:900 !important;
  line-height:9px !important;
  text-align:center !important;
  text-shadow:none !important;
  box-shadow:0 1px 4px rgba(0,0,0,.45) !important;
}

.couple-tag.left{
  left:2px !important;
  right:auto !important;
}

.couple-tag.right{
  right:2px !important;
  left:auto !important;
}

.veh.dt4,
.veh.dt46,
.veh.dt5{
  color:#061014 !important;
  text-shadow:none !important;
}

.veh.status-werkstatt{
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}

/* Kuppelnummern bleiben innerhalb der Gleiszeile sichtbar. */
.rail .veh .couple-tag,
.rail .veh .couple-tag.left,
.rail .veh .couple-tag.right,
.couple-tag,
.couple-tag.left,
.couple-tag.right{
  top:-1px !important;
  height:10px !important;
  min-width:22px !important;
  padding:0 4px !important;
  line-height:9px !important;
}

/* Fristen heute im festen dunklen Netzdisplay. */
.side .cardbox.light{
  background:#101a1f !important;
  color:var(--nd-text) !important;
  border-color:var(--nd-line) !important;
}

#deadlinesToday{
  color:var(--nd-muted) !important;
}

.side .deadlineTodayRow,
.side .item.warn.deadlineTodayRow{
  display:flex !important;
  align-items:center !important;
  min-height:28px !important;
  margin:4px 0 !important;
  padding:4px 8px !important;
  border:1px solid #263941 !important;
  border-left:5px solid #38bdf8 !important;
  border-radius:7px !important;
  background:#0b1519 !important;
  color:var(--nd-text) !important;
  box-shadow:none !important;
}

.side .deadlineTodayRow.deadlineToday-bfa{
  border-left-color:#38bdf8 !important;
}

.side .deadlineTodayRow.deadlineToday-bba{
  border-left-color:#facc15 !important;
}

.side .deadlineTodayRow.deadlineToday-bbi{
  border-left-color:#4ade80 !important;
}

.side .deadlineTodayRow .deadlineTodayText{
  color:var(--nd-text) !important;
  font-weight:700 !important;
  text-shadow:none !important;
}

.side .deadlineTodayRow .deadlineTodayText b{
  color:#ffffff !important;
}

.side .deadlineTodayRow.showDelete{
  background:#14242b !important;
  border-color:#3f5962 !important;
}

.side .deadlineTodayDelete{
  background:#35151c !important;
  color:#fecdd3 !important;
  border-color:#9f4050 !important;
}

/* Finale Lesbarkeit: Fristen normal, Meterbox gleishoch, Warnungen klar sichtbar. */
.vehicle-card-due-date,
.vehicle-card-due-time,
.vehicle-card-due-kind,
#vehicleCardDue,
#vehicleCardDue *{
  font-weight:400 !important;
}

.track-len{
  align-self:stretch !important;
  height:100% !important;
  min-height:26px !important;
  border-radius:8px !important;
  padding:4px 4px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  font-size:10px !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  text-align:center !important;
  background:#111827 !important;
  border:1px solid #334155 !important;
  color:#cbd5e1 !important;
}

@media(max-width:1100px){
  .track{
    grid-template-columns:12px 30px minmax(0,1fr) 56px !important;
  }
  .track-len{
    font-size:8px !important;
    padding:3px 2px !important;
  }
}

/* Finale Gleiszeile: kompakter Leitstand-Stil, eine optische Linie. */
.tracks{
  gap:5px !important;
  grid-template-rows:repeat(var(--rows,1),minmax(34px,1fr)) !important;
}

.track{
  grid-template-columns:18px 40px minmax(0,1fr) 64px !important;
  gap:6px !important;
  align-items:center !important;
}

.track-signal{
  width:18px !important;
  height:34px !important;
  justify-self:center !important;
  align-self:center !important;
}

.signal-head{
  left:1px !important;
  top:3px !important;
  width:14px !important;
  height:28px !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,#071016,#020609) !important;
  border:1px solid #3b5660 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 3px rgba(0,0,0,.55) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:space-evenly !important;
  padding:3px 0 !important;
  box-sizing:border-box !important;
}

.signal-lamp{
  position:static !important;
  left:auto !important;
  top:auto !important;
  width:5px !important;
  height:5px !important;
  flex:0 0 5px !important;
  margin:0 !important;
}

.signal-lamp.red,
.signal-lamp.yellow,
.signal-lamp.green{top:auto !important;}

.track-signal.is-red .red,
.track-signal.is-yellow .yellow,
.track-signal.is-green .green{
  box-shadow:0 0 7px currentColor !important;
}

.track-name{
  height:30px !important;
  min-width:40px !important;
  padding:0 4px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:7px !important;
  border:1px solid #5a6b7c !important;
  background:linear-gradient(180deg,#111827,#050b12) !important;
  color:#ffffff !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:700 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.65) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 3px rgba(0,0,0,.35) !important;
}

.rail{
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  border-radius:5px !important;
  align-self:center !important;
}

.track-len{
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  align-self:center !important;
  border-radius:6px !important;
  padding:3px 5px !important;
  gap:2px !important;
  font-size:8px !important;
  line-height:1.08 !important;
  font-weight:400 !important;
  background:linear-gradient(180deg,#17263a,#0b1420) !important;
  border:1px solid #415d7c !important;
  color:#dbeafe !important;
}

@media(max-width:1100px){
  .track{
    grid-template-columns:16px 34px minmax(0,1fr) 56px !important;
    gap:4px !important;
  }
  .track-name,
  .rail,
  .track-len{
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
  }
  .track-name{
    min-width:34px !important;
    font-size:13px !important;
  }
  .track-len{
    font-size:7px !important;
    padding:2px 3px !important;
  }
}

/* Handy/Tablet quer: Gleisbloecke einzeln scrollbar machen. */
@media (max-width: 950px), (max-height: 520px){
  html,
  body{
    height:100% !important;
    overflow:hidden !important;
  }

  main{
    height:calc(100dvh - 44px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .board{
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  .block{
    min-height:0 !important;
    overflow:hidden !important;
  }

  .tracks{
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    align-content:start !important;
    grid-auto-rows:minmax(34px,44px) !important;
    grid-template-rows:repeat(var(--rows,1),minmax(34px,44px)) !important;
    padding-right:3px !important;
    touch-action:pan-y !important;
  }

  .track{
    min-height:34px !important;
    touch-action:pan-y !important;
  }

  .rail,
  .veh,
  .track-name,
  .track-len,
  .track-signal{
    touch-action:pan-y !important;
  }
}

/* Fahrzeugkarte: Statusfarben muessen auch rechts sichtbar sein. */
.vehicle-card-status-list{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:4px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  background-image:none !important;
  max-width:150px !important;
  white-space:normal !important;
  overflow:visible !important;
}
.vehicle-card-status-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:18px !important;
  max-width:100% !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.45) !important;
  color:#ffffff !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.vehicle-card-status-chip.status-bereit{
  background:#e8eef4 !important;
  color:#0b1216 !important;
  border-color:#ffffff !important;
  text-shadow:none !important;
}
.vehicle-card-status-chip.status-defekt{
  background:linear-gradient(180deg,#ff7a72,#f01717 48%,#9f0909) !important;
}
.vehicle-card-status-chip.status-graffiti{
  background:linear-gradient(180deg,#b772f0,#7b1fa2 50%,#451061) !important;
}
.vehicle-card-status-chip.status-defekt-graffiti,
.vehicle-card-status-chip.status-defekt_graffiti{
  background:linear-gradient(135deg,#dc2626 0%,#dc2626 49.5%,#7c3aed 50.5%,#7c3aed 100%) !important;
}
.vehicle-card-status-chip.status-anforderung{
  background:linear-gradient(180deg,#69a9f7,#1565c0 50%,#0b376f) !important;
}
.vehicle-card-status-chip.status-werkstatt{
  background:linear-gradient(180deg,#ff9af1 0%,#f064dc 52%,#c13db1 100%) !important;
}
.vehicle-card-status-chip.status-reserve{
  background:linear-gradient(180deg,#929292,#616161 50%,#323232) !important;
}
.vehicle-card-status-chip.frist-bba{
  background:linear-gradient(180deg,#fff7a8,#facc15) !important;
  color:#111827 !important;
  text-shadow:none !important;
}
.vehicle-card-status-chip.frist-bfa{
  background:linear-gradient(180deg,#93c5fd,#2563eb) !important;
}
.vehicle-card-status-chip.frist-bbi{
  background:linear-gradient(180deg,#bbf7d0,#22c55e) !important;
  color:#06210f !important;
  text-shadow:none !important;
}
.vehicle-card-status.status-defekt{
  background:linear-gradient(180deg,#ff7a72,#f01717 48%,#9f0909) !important;
  background-image:linear-gradient(180deg,#ff7a72,#f01717 48%,#9f0909) !important;
  color:#ffffff !important;
  border-color:#fecaca !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}
.vehicle-card-status.status-graffiti{
  background:linear-gradient(180deg,#b772f0,#7b1fa2 50%,#451061) !important;
  background-image:linear-gradient(180deg,#b772f0,#7b1fa2 50%,#451061) !important;
  color:#ffffff !important;
  border-color:#e9d5ff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}
.vehicle-card-status.status-defekt_graffiti,
.vehicle-card-status.status-defekt-graffiti{
  background:linear-gradient(180deg,#ffb15f,#ea580c 50%,#9a3412) !important;
  background-image:linear-gradient(180deg,#ffb15f,#ea580c 50%,#9a3412) !important;
  color:#ffffff !important;
  border-color:#fed7aa !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}
.vehicle-card-status.status-anforderung{
  background:linear-gradient(180deg,#69a9f7,#1565c0 50%,#0b376f) !important;
  background-image:linear-gradient(180deg,#69a9f7,#1565c0 50%,#0b376f) !important;
  color:#ffffff !important;
  border-color:#bfdbfe !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}
.vehicle-card-status.status-reserve{
  background:linear-gradient(180deg,#929292,#616161 50%,#323232) !important;
  background-image:linear-gradient(180deg,#929292,#616161 50%,#323232) !important;
  color:#ffffff !important;
  border-color:#d1d5db !important;
  text-shadow:0 1px 1px rgba(0,0,0,.75) !important;
}

/* Nur eine sichtbare Statusfarbe: keine zweite Grundfarbe unter der Plakette. */
.vehicle-card-status.vehicle-card-status-list,
.vehicle-card-status.vehicle-card-status-list.status-bereit,
.vehicle-card-status.vehicle-card-status-list.status-defekt,
.vehicle-card-status.vehicle-card-status-list.status-graffiti,
.vehicle-card-status.vehicle-card-status-list.status-defekt_graffiti,
.vehicle-card-status.vehicle-card-status-list.status-defekt-graffiti,
.vehicle-card-status.vehicle-card-status-list.status-anforderung,
.vehicle-card-status.vehicle-card-status-list.status-werkstatt,
.vehicle-card-status.vehicle-card-status-list.status-reserve{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

.vehicle-card-status-list .vehicle-card-status-chip{
  min-width:82px !important;
  min-height:20px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 3px rgba(0,0,0,.35) !important;
}

/* Bedingt einsatzfaehig: ehemals Reserve, jetzt hellrot darstellen */
.status-reserve,
.veh.status-reserve,
.rail .veh.status-reserve,
.vehicle-card-status.status-reserve,
.vehicle-card-status-chip.status-reserve,
.vehicleListItem .status-reserve,
.vBadge.status-reserve{
  background:linear-gradient(180deg,#ffc2c2,#ff8f8f 52%,#e35f5f)!important;
  background-image:linear-gradient(180deg,#ffc2c2,#ff8f8f 52%,#e35f5f)!important;
  color:#3a0505!important;
  border-color:rgba(255,210,210,.85)!important;
  text-shadow:none!important;
}

.vehicle-card-note-cleaning{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:3px 7px 4px;
  border-radius:999px;
  border:1px solid rgba(255,226,248,.98);
  background:linear-gradient(180deg,#fff5fd,#ffd0f3 48%,#f09adc);
  color:#000000 !important;
  font-size:10px;
  font-weight:950;
  line-height:1.1;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 4px rgba(0,0,0,.30);
}

#vehicleCardNote .vehicle-card-note-cleaning{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

.conditionCleaningGrid{
  grid-template-columns:repeat(2,1fr) !important;
}

/* Fristfarbe hat auf dem Gleis Vorrang vor Innenreinigung. */
.veh.status-werkstatt.frist-over-cleaning.frist-heute-bfa,
.rail .veh.status-werkstatt.frist-over-cleaning.frist-heute-bfa{
  background:linear-gradient(180deg,#2f7cff 0%,#145ee8 48%,#083f9f 100%) !important;
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.60) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 16px rgba(15,23,42,.24),0 0 15px rgba(37,99,235,.55),0 6px 14px rgba(0,0,0,.34) !important;
}
.veh.status-werkstatt.frist-over-cleaning.frist-heute-bba,
.rail .veh.status-werkstatt.frist-over-cleaning.frist-heute-bba{
  background:linear-gradient(180deg,#ffe34d 0%,#facc15 48%,#b78300 100%) !important;
  color:#111827 !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -10px 16px rgba(120,83,0,.22),0 0 15px rgba(250,204,21,.58),0 6px 14px rgba(0,0,0,.34) !important;
}
.veh.status-werkstatt.frist-over-cleaning.frist-heute-bbi,
.rail .veh.status-werkstatt.frist-over-cleaning.frist-heute-bbi{
  background:linear-gradient(180deg,#31d76a 0%,#16a34a 48%,#08712f 100%) !important;
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.58) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 16px rgba(5,46,22,.22),0 0 15px rgba(22,163,74,.55),0 6px 14px rgba(0,0,0,.34) !important;
}
.veh.status-werkstatt.frist-over-cleaning.frist-heute-bba .vehicle-main-number,
.rail .veh.status-werkstatt.frist-over-cleaning.frist-heute-bba .vehicle-main-number{
  background:rgba(255,255,255,.72) !important;
  color:#020617 !important;
  text-shadow:none !important;
}
.veh.status-werkstatt.frist-over-cleaning.frist-heute-bfa .vehicle-main-number,
.veh.status-werkstatt.frist-over-cleaning.frist-heute-bbi .vehicle-main-number,
.rail .veh.status-werkstatt.frist-over-cleaning.frist-heute-bfa .vehicle-main-number,
.rail .veh.status-werkstatt.frist-over-cleaning.frist-heute-bbi .vehicle-main-number{
  background:rgba(2,6,23,.26) !important;
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.55) !important;
}
.veh.status-werkstatt.frist-over-cleaning.bfa-due-tomorrow,
.rail .veh.status-werkstatt.frist-over-cleaning.bfa-due-tomorrow{
  background:linear-gradient(180deg,#dbeafe 0%,#bfdbfe 55%,#93c5fd 100%) !important;
  color:#0f172a !important;
  text-shadow:none !important;
}
.veh.status-werkstatt.frist-over-cleaning.bba-due,
.rail .veh.status-werkstatt.frist-over-cleaning.bba-due{
  background:linear-gradient(180deg,#fffde7 0%,#fef3c7 55%,#fde68a 100%) !important;
  color:#0f172a !important;
  text-shadow:none !important;
}
.veh.status-werkstatt.frist-over-cleaning.bbi-due,
.rail .veh.status-werkstatt.frist-over-cleaning.bbi-due{
  background:linear-gradient(180deg,#dcfce7 0%,#bbf7d0 55%,#86efac 100%) !important;
  color:#0f172a !important;
  text-shadow:none !important;
}

/* Grosshansdorf: graue Bahnsteig-/Betriebsflaechen mit Abstand zu Gleis 21/22. */
body.facility-vf-gh-ot .block.gh-bottom .tracks{
  min-height:clamp(250px,34vh,390px) !important;
  grid-template-rows:58px 58px !important;
  gap:clamp(76px,11vh,145px) !important;
  align-content:center !important;
  padding:clamp(18px,3.5vh,38px) 0 !important;
  overflow:visible !important;
}

body.facility-vf-gh-ot .block.gh-bottom .tracks::before{
  background-position:
    46% 16%,46% 16%,46% 16%,
    93% 16%,93% 16%,93% 16%,
    0% 50%,0% 50%,0% 50%,
    46% 84%,46% 84%,46% 84%,
    93% 84%,93% 84%,93% 84% !important;
}

@media(max-width:1450px){
  body.facility-vf-gh-ot .block.gh-bottom .tracks{
    min-height:clamp(270px,42vh,410px) !important;
    gap:clamp(88px,14vh,160px) !important;
    padding:clamp(22px,4vh,44px) 0 !important;
  }

  body.facility-vf-gh-ot .block.gh-bottom .tracks::before{
    background-position:
      46% 13%,46% 13%,46% 13%,
      93% 13%,93% 13%,93% 13%,
      0% 50%,0% 50%,0% 50%,
      46% 87%,46% 87%,46% 87%,
    93% 87%,93% 87%,93% 87% !important;
  }
}

/* PC bleibt kompakter, Tablet/Touch behaelt den groesseren Abstand. */
@media (hover:hover) and (pointer:fine){
  body.facility-vf-gh-ot .block.gh-bottom .tracks{
    min-height:clamp(190px,26vh,285px) !important;
    grid-template-rows:52px 52px !important;
    gap:clamp(38px,5.5vh,74px) !important;
    padding:clamp(10px,2vh,22px) 0 !important;
  }

  body.facility-vf-gh-ot .block.gh-bottom .tracks::before{
    background-position:
      46% 24%,46% 24%,46% 24%,
      93% 24%,93% 24%,93% 24%,
      0% 50%,0% 50%,0% 50%,
      46% 76%,46% 76%,46% 76%,
      93% 76%,93% 76%,93% 76% !important;
  }
}

@media (hover:none) and (pointer:coarse){
  body.facility-vf-gh-ot .block.gh-bottom .tracks{
    min-height:clamp(270px,42vh,410px) !important;
    grid-template-rows:58px 58px !important;
    gap:clamp(88px,14vh,160px) !important;
    padding:clamp(22px,4vh,44px) 0 !important;
  }

  body.facility-vf-gh-ot .block.gh-bottom .tracks::before{
    background-position:
      46% 13%,46% 13%,46% 13%,
      93% 13%,93% 13%,93% 13%,
      0% 50%,0% 50%,0% 50%,
      46% 87%,46% 87%,46% 87%,
      93% 87%,93% 87%,93% 87% !important;
  }
}

/* Grosshansdorf: kleine Felder und grosse Flaeche getrennt positionieren. */
body.facility-vf-gh-ot .block.gh-bottom .tracks::before{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(128,137,148,.70),rgba(128,137,148,.70)),

    repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(128,137,148,.70),rgba(128,137,148,.70)),

    repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(128,137,148,.70),rgba(128,137,148,.70)),

    repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(128,137,148,.70),rgba(128,137,148,.70)) !important;
  background-size:
    30% 18px,30% 18px,30% 18px,
    32% 18px,32% 18px,32% 18px,
    30% 18px,30% 18px,30% 18px,
    32% 18px,32% 18px,32% 18px !important;
  background-position:
    46% 30%,46% 30%,46% 30%,
    93% 30%,93% 30%,93% 30%,
    46% 70%,46% 70%,46% 70%,
    93% 70%,93% 70%,93% 70% !important;
  background-repeat:no-repeat !important;
}

body.facility-vf-gh-ot .block.gh-bottom .tracks::after{
  content:"" !important;
  position:absolute !important;
  left:8.5% !important;
  top:50% !important;
  width:29.5% !important;
  height:36px !important;
  transform:translateY(-50%) !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.74 !important;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(128,137,148,.70),rgba(128,137,148,.70)) !important;
  background-size:100% 100%,100% 100%,100% 100% !important;
  background-position:0 0,0 0,0 0 !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.38)) !important;
}

@media (hover:hover) and (pointer:fine){
  body.facility-vf-gh-ot .block.gh-bottom .tracks::before{
    background-position:
      46% 31%,46% 31%,46% 31%,
      93% 31%,93% 31%,93% 31%,
      46% 69%,46% 69%,46% 69%,
      93% 69%,93% 69%,93% 69% !important;
  }

  body.facility-vf-gh-ot .block.gh-bottom .tracks::after{
    left:8.5% !important;
    top:50% !important;
    width:29.5% !important;
    height:36px !important;
  }
}

@media (hover:none) and (pointer:coarse){
  body.facility-vf-gh-ot .block.gh-bottom .tracks::before{
    background-position:
      46% 13%,46% 13%,46% 13%,
      93% 13%,93% 13%,93% 13%,
      46% 87%,46% 87%,46% 87%,
      93% 87%,93% 87%,93% 87% !important;
  }

  body.facility-vf-gh-ot .block.gh-bottom .tracks::after{
    left:7.5% !important;
    top:50% !important;
    width:30% !important;
    height:36px !important;
  }
}

/* Grosshansdorf: die Abschnitte werden aus der echten Gleisbreite berechnet. */
body.facility-vf-gh-ot .block.gh-bottom .tracks::before,
body.facility-vf-gh-ot .block.gh-bottom .tracks::after{
  display:none !important;
}

body.facility-vf-gh-ot .block.gh-bottom .gh-gray-segment{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:.74;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(128,137,148,.70),rgba(128,137,148,.70));
  background-size:100% 100%,100% 100%,100% 100%;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.38));
}

body.facility-vf-gh-ot .rail[data-track="Gleis 21 GH"],
body.facility-vf-gh-ot .rail[data-track="Gleis 22 GH"]{
  background-image:linear-gradient(180deg,#111827,#172033) !important;
  background-size:100% 100% !important;
  background-position:0 0 !important;
  background-repeat:no-repeat !important;
}

body.facility-vf-gh-ot .rail[data-track="Gleis 21 GH"] .walk,
body.facility-vf-gh-ot .rail[data-track="Gleis 22 GH"] .walk{
  display:none !important;
}


/* Fix 28.06.2026: Gleis- und Statusauswahl im Eingabefenster wieder lesbar
   Ursache: globale Select-Regeln aus der Netzdisplay-/Kompaktoptik machten die
   Auswahlfelder zu niedrig. Diese Regel gilt nur im Fahrzeug-Eingabedialog. */
#editorBackdrop .form select,
#editorModal select,
#editorBackdrop select,
.dialog select{
  height:38px !important;
  min-height:38px !important;
  line-height:20px !important;
  padding:7px 34px 7px 10px !important;
  border-radius:8px !important;
  background-color:#0b1519 !important;
  color:#f8fafc !important;
  border:1px solid #38545d !important;
  font-size:14px !important;
  font-weight:800 !important;
  text-shadow:none !important;
  box-shadow:none !important;
  vertical-align:middle !important;
}

#editorBackdrop .form select option,
#editorModal select option,
.dialog select option{
  background:#0b1519 !important;
  color:#f8fafc !important;
  font-size:14px !important;
  font-weight:700 !important;
}

#editorBackdrop .form input,
#editorBackdrop .form textarea,
#editorModal input,
#editorModal textarea,
.dialog input,
.dialog textarea{
  color:#f8fafc !important;
}