:root{--bg:#eef2f6;--card:#fff;--line:#cbd5e1;--text:#17202a;--muted:#64748b;--blue:#1769e0;--green:#188a42;--red:#dc2626;--yellow:#facc15;--dark:#102033}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
header{background:linear-gradient(135deg,#0b1627,#162a45);color:white;padding:8px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}h1{margin:0;font-size:20px}.sub{font-size:12px;color:#cbd5e1;margin-top:2px}.topbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
button,select{border:0;border-radius:9px;padding:7px 10px;font-weight:800;font-size:13px}button{cursor:pointer;background:var(--blue);color:white}.secondary{background:#334155}.danger{background:var(--red)}select{background:white;color:#17202a;border:1px solid #cbd5e1}
main{padding:10px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;height:calc(100vh - 58px);overflow:hidden}.board{display:grid;grid-template-columns:1.35fr .85fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px;min-height:0}.block{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,.08);padding:8px;min-height:0;display:flex;flex-direction:column;overflow:hidden}.block.primary{grid-row:1/3}.block-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #e2e8f0;margin-bottom:3px;padding:2px 6px 4px;gap:6px}.block h2{margin:0;font-size:18px;color:#0f2742;text-align:center;text-shadow:0 1px 0 #fff}.dir{font-weight:400;font-size:11px;color:#9ca3af}.dir.right{text-align:right}.summary{font-size:12px;color:var(--muted);text-align:right;padding-top:4px}
.tracks{display:grid;gap:6px;overflow:hidden;align-content:stretch;flex:1;grid-template-rows:repeat(var(--rows,1),minmax(34px,1fr))}.track{display:grid;grid-template-columns:24px 42px minmax(0,1fr) 74px;gap:5px;align-items:center;min-height:0}.track-name{font-weight:900;text-align:center;font-size:17px;background:#f8fafc;border:1px solid #d8e2ef;border-radius:8px;padding:4px;cursor:pointer}.track-name.locked{color:var(--red);border-color:var(--red)}.track-len{font-size:10px;color:var(--muted);font-weight:800;text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:3px}.rail{position:relative;height:72%;min-height:30px;max-height:42px;border:1px solid #c9d6e6;border-radius:9px;background:linear-gradient(180deg,#fff,#eef4fb);overflow:hidden}.rail:before{content:"";position:absolute;left:0;right:0;top:50%;height:5px;background:linear-gradient(180deg,#7f8ea4,#a8b4c4,#6f7f95);transform:translateY(-50%);border-radius:999px}.rail.dragover{outline:3px dashed var(--blue);outline-offset:2px}.lock{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(255,0,0,.22) 0,rgba(255,0,0,.22) 9px,rgba(255,255,255,.12) 9px,rgba(255,255,255,.12) 18px);border:2px solid #ff0000;z-index:2;pointer-events:none}
.side{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,.08);padding:8px;overflow:auto}.cardbox{background:#102033;color:white;border-radius:12px;padding:10px;margin-bottom:10px}.cardbox.light{background:white;color:var(--text);border:1px solid var(--line)}.cardbox h2{margin:0 0 8px;font-size:16px}.muted{color:var(--muted);font-size:13px}.sideActions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.list{display:grid;gap:5px}.notice{position:fixed;left:50%;top:22px;transform:translateX(-50%);background:#111827;color:white;padding:10px 16px;border-radius:999px;display:none;z-index:12000;font-weight:900}.notice.show{display:block}.notice.ok{background:#14532d}.notice.bad{background:#b00000}
.track-signal{width:20px;height:52px;position:relative;justify-self:center}.signal-head{position:absolute;left:2px;top:0;width:16px;height:35px;border-radius:10px;background:linear-gradient(180deg,#1f2937,#020617);border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 6px rgba(0,0,0,.6)}.signal-lamp{position:absolute;left:4px;width:8px;height:8px;border-radius:999px;background:#1f2937}.signal-lamp.red{top:4px}.signal-lamp.yellow{top:13px}.signal-lamp.green{top:22px}.track-signal.is-red .red{background:#ef4444;box-shadow:0 0 10px #ef4444}.track-signal.is-yellow .yellow{background:#facc15;box-shadow:0 0 10px #facc15}.track-signal.is-green .green{background:#22c55e;box-shadow:0 0 10px #22c55e}.signal-post{position:absolute;left:9px;top:35px;width:2px;height:12px;background:#94a3b8}.signal-foot{position:absolute;left:4px;top:47px;width:12px;height:4px;background:#64748b;border-radius:2px}
@media(max-width:1050px){main{grid-template-columns:1fr;height:auto;overflow:auto}.board{grid-template-columns:1fr;grid-template-rows:auto}.block.primary{grid-row:auto}.side{min-height:220px}}


/* Browser-Auswahlmenü/Copilot-Einblendungen im Gleisplan möglichst verhindern */
.board, .board *:not(input):not(textarea):not(select),
.track, .track *, .rail, .rail *, .veh, .veh *{
  user-select:none !important;
  -webkit-user-select:none !important;
  -ms-user-select:none !important;
  -webkit-touch-callout:none !important;
}
.rail, .veh{touch-action:none;}

/* Browser-Auswahl/Einblendungen im Gleisplan möglichst verhindern */
.board,.block,.tracks,.track,.track-name,.rail,.veh,.track-signal{user-select:none!important;-webkit-user-select:none!important;-ms-user-select:none!important;-webkit-touch-callout:none!important;}
.rail,.veh{touch-action:none;}

/* Mehr Darstellungsbreite für die Gleise:
   Die Wagen werden dadurch nicht mehr so stark gestaucht.
   Gekuppelte Wagen bleiben direkt aneinander, nicht gekuppelte Wagen bekommen mehr sichtbaren Raum. */
.track{
  grid-template-columns:22px 38px minmax(0,1fr) 58px !important;
  gap:3px !important;
}
.track-len{
  font-size:8px !important;
  padding:2px 3px !important;
}
.track-name{
  min-width:34px !important;
  padding-left:3px !important;
  padding-right:3px !important;
}


/* Abstand jetzt über echte Fahrzeugpositionen:
   Nicht gekuppelte Wagen haben 2 m Mindestabstand.
   Gekuppelte Wagen bleiben ohne Zwischenraum. */
.rail .veh.uncoupled-neighbour::before{
  content:none !important;
}


/* Fahrzeugkarte rechts */
.vehicle-card{
  background:linear-gradient(180deg,#111b2d 0%,#07111f 100%);
  border:1px solid rgba(148,163,184,.35);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.22);
}
.vehicle-card h2{
  margin:0 0 8px;
  font-size:17px;
  color:#fff;
  border-bottom:1px solid rgba(148,163,184,.35);
  padding-bottom:8px;
}
.vehicle-card-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(148,163,184,.22);
  padding:6px 0;
  font-size:13px;
}
.vehicle-card-row span{
  color:#dbeafe;
}
.vehicle-card-row b{
  color:#fff;
  text-align:right;
  max-width:145px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vehicle-card-status{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  background:#e5e7eb;
  color:#111827!important;
  border:1px solid rgba(255,255,255,.8);
}
.vehicle-card-status.status-defekt,
.vehicle-card-status.status-graffiti,
.vehicle-card-status.status-anforderung,
.vehicle-card-status.status-reserve{
  color:#fff!important;
}
.vehicle-card-btn{
  width:100%;
  margin-top:9px;
  border-radius:9px;
  padding:9px 10px;
  font-weight:900;
}
.vehicle-card-btn.primary{
  background:linear-gradient(180deg,#60a5fa,#1769e0)!important;
}
.vehicle-card-btn.secondary{
  background:linear-gradient(180deg,#64748b,#334155)!important;
}
.vehicle-card.empty .vehicle-card-btn.primary{
  opacity:.55;
}
body:not(.darkMode) .vehicle-card{
  background:linear-gradient(180deg,#102033,#07111f);
}

button:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.25);
}


/* Einheitlicher Leitstand-Button-Stil */
button,
.app-btn,
.vehicle-card-btn,
.actions button,
.card-actions button,
.searchActions button,
.vehicle-search-actions button{
  border-radius:9px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#ffffff !important;
  font-weight:900 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.65) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 32%,rgba(0,0,0,.18)),
    linear-gradient(180deg,#64748b,#334155) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 3px 8px rgba(0,0,0,.28) !important;
  min-height:32px;
}
button:hover,
.app-btn:hover,
.vehicle-card-btn:hover{
  filter:brightness(1.08);
}
button:active,
.app-btn:active,
.vehicle-card-btn:active{
  transform:translateY(1px);
}
button.green,
.app-btn.primary,
.vehicle-card-btn.primary,
.vehicle-search-actions .primary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.10) 32%,rgba(0,0,0,.16)),
    linear-gradient(180deg,#60a5fa,#1769e0) !important;
}
button.red,
.app-btn.danger{
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 32%,rgba(0,0,0,.20)),
    linear-gradient(180deg,#ef4444,#b91c1c) !important;
}
button.secondary,
.app-btn.secondary,
.vehicle-card-btn.secondary,
.vehicle-search-actions .secondary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.08) 32%,rgba(0,0,0,.18)),
    linear-gradient(180deg,#64748b,#334155) !important;
}

/* Neues Suchfenster wie im Beispiel */
.searchModalBackdrop{
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
}
.vehicle-search-dialog{
  width:min(360px,calc(100vw - 24px)) !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background:#111b2d !important;
  color:#ffffff !important;
  border:1px solid rgba(148,163,184,.40) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.55) !important;
}
.vehicle-search-dialog h2{
  margin:0 !important;
  padding:14px 14px 12px !important;
  font-size:16px !important;
  color:#ffffff !important;
  border-bottom:1px solid rgba(148,163,184,.30) !important;
}
.vehicle-search-input{
  display:block;
  width:calc(100% - 28px) !important;
  margin:14px 14px 8px !important;
  height:46px !important;
  border-radius:9px !important;
  border:1px solid rgba(255,255,255,.85) !important;
  background:#0f172a !important;
  color:#ffffff !important;
  padding:0 10px !important;
  font-size:16px !important;
  font-weight:800 !important;
  outline:none !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35) !important;
}
.vehicle-search-input::placeholder{
  color:#a3a3a3 !important;
  font-weight:900 !important;
}
.vehicle-search-input:focus{
  border-color:#ffffff !important;
  box-shadow:0 0 0 2px rgba(96,165,250,.25), inset 0 2px 6px rgba(0,0,0,.35) !important;
}
.vehicle-search-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 14px 14px;
}
.vehicle-search-actions button{
  width:100% !important;
}


/* Suchfenster fest über dem Gleisplan positionieren:
   Es nimmt keinen Platz im Layout ein und schiebt keine Gleise mehr hoch. */
#vehicleSearchModal.searchModalBackdrop,
#vehicleSearchModal.dialogBackdrop{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:80px !important;
  background:transparent !important;
  z-index:99999 !important;
  pointer-events:none !important;
}

#vehicleSearchModal.searchModalBackdrop.show,
#vehicleSearchModal.dialogBackdrop.show{
  display:flex !important;
}

#vehicleSearchModal .vehicle-search-dialog{
  position:relative !important;
  margin:0 auto !important;
  pointer-events:auto !important;
  z-index:100000 !important;
}


/* Einheitlicher Glanz-Effekt für alle Buttons wie im Suchfenster */
button,
.app-btn,
.vehicle-card-btn,
.actions button,
.card-actions button,
.searchActions button,
.vehicle-search-actions button,
.top-actions button{
  position:relative !important;
  overflow:hidden !important;
  border-radius:9px !important;
  border:1px solid rgba(255,255,255,.32) !important;
  color:#ffffff !important;
  font-weight:900 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.75) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.18) 26%,rgba(255,255,255,.04) 48%,rgba(0,0,0,.20) 100%),
    linear-gradient(180deg,#64748b 0%,#334155 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 3px 8px rgba(0,0,0,.35) !important;
}

button::before,
.app-btn::before,
.vehicle-card-btn::before,
.actions button::before,
.card-actions button::before,
.searchActions button::before,
.vehicle-search-actions button::before,
.top-actions button::before{
  content:"" !important;
  position:absolute !important;
  left:10% !important;
  right:10% !important;
  top:7% !important;
  height:34% !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.10) 70%,rgba(255,255,255,0)) !important;
  pointer-events:none !important;
}

button.green,
button.primary,
.app-btn.primary,
.vehicle-card-btn.primary,
.vehicle-search-actions .primary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.18) 26%,rgba(255,255,255,.04) 48%,rgba(0,0,0,.20) 100%),
    linear-gradient(180deg,#60a5fa 0%,#1769e0 100%) !important;
}

button.red,
button.danger,
.app-btn.danger{
  background:
    linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.14) 26%,rgba(255,255,255,.04) 48%,rgba(0,0,0,.24) 100%),
    linear-gradient(180deg,#ef4444 0%,#b91c1c 100%) !important;
}

button.secondary,
.app-btn.secondary,
.vehicle-card-btn.secondary,
.vehicle-search-actions .secondary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.16) 26%,rgba(255,255,255,.04) 48%,rgba(0,0,0,.22) 100%),
    linear-gradient(180deg,#64748b 0%,#334155 100%) !important;
}

button:hover,
.app-btn:hover,
.vehicle-card-btn:hover{
  filter:brightness(1.08) !important;
}

button:active,
.app-btn:active,
.vehicle-card-btn:active{
  transform:translateY(1px) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.35),
    0 1px 3px rgba(0,0,0,.30) !important;
}


/* Beim Kuppeln/Schieben kein Schattenfahrzeug anzeigen */
.drag-ghost,
.vehicle-ghost,
.veh-ghost,
.coupling-ghost,
.drop-ghost,
.ghost,
.clone,
.dragging-clone{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.veh.dragging{
  opacity:1 !important;
}


/* Editor-Fenster im kompakten Leitstandstil */
#editorModal.dialogBackdrop,
#editorModal{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.42) !important;
  padding:14px !important;
}
#editorModal.show,
#editorModal.dialogBackdrop.show{
  display:flex !important;
}
#editorModal .dialog,
#editorModal .editorDialog,
#editorModal .simpleEditor{
  width:min(420px,calc(100vw - 20px)) !important;
  max-height:calc(100vh - 24px) !important;
  overflow:auto !important;
  padding:0 !important;
  border-radius:12px !important;
  background:#111827 !important;
  color:#ffffff !important;
  border:1px solid rgba(148,163,184,.45) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.65) !important;
}
#editorModal .editorHeader,
#editorModal .simpleHeader{
  background:linear-gradient(180deg,#1e293b,#111827) !important;
  border-bottom:1px solid rgba(148,163,184,.35) !important;
  color:#ffffff !important;
  padding:10px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}
#editorModal .editorHeader h2,
#editorModal .simpleHeader h2{
  margin:0 !important;
  font-size:16px !important;
  line-height:1.15 !important;
  color:#ffffff !important;
}
#editorModal .editorHeader p,
#editorModal .simpleHeader p{
  display:none !important;
}
#editorModal .closeMini{
  min-height:26px !important;
  padding:4px 10px !important;
  font-size:12px !important;
  border-radius:8px !important;
}
#editorModal .editorForm,
#editorModal .simpleForm{
  padding:10px !important;
  gap:8px !important;
  display:grid !important;
}
#editorModal .quickEntryBox{
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:8px !important;
  background:#111827 !important;
  padding:10px !important;
  display:grid !important;
  gap:8px !important;
}
#editorModal label{
  color:#ffffff !important;
  font-size:12px !important;
  font-weight:900 !important;
}
#editorModal input,
#editorModal select,
#editorModal textarea{
  background:#111827 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.82) !important;
  border-radius:8px !important;
  padding:8px !important;
  font-weight:800 !important;
}
#editorModal input:focus,
#editorModal select:focus,
#editorModal textarea:focus{
  outline:none !important;
  border-color:#ffffff !important;
  box-shadow:0 0 0 2px rgba(96,165,250,.25) !important;
}
#editorModal .quickGrid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
#editorModal .optionalEditor{
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:8px !important;
  background:#111827 !important;
  overflow:hidden !important;
}
#editorModal .optionalEditor summary{
  padding:8px 10px !important;
  background:#1e293b !important;
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
#editorModal .optionalBlock{
  padding:8px 10px !important;
  border-top:1px solid rgba(148,163,184,.28) !important;
  display:grid !important;
  gap:7px !important;
  background:#111827 !important;
}
#editorModal .simpleActions,
#editorModal .editorActions,
#editorModal .actions{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  gap:10px !important;
  padding:4px 0 8px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
}
#editorModal .simpleActions button,
#editorModal .editorActions button,
#editorModal .actions button{
  width:100% !important;
  min-height:46px !important;
  font-size:14px !important;
}


/* FINAL: Kompaktes Fahrzeugfenster exakt im gewünschten Stil */
#editorModal.dialogBackdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.35) !important;
  padding:10px !important;
}
#editorModal.dialogBackdrop.show{
  display:flex !important;
}
#editorModal .dialog.editorDialog.simpleEditor{
  width:420px !important;
  max-width:calc(100vw - 20px) !important;
  max-height:calc(100vh - 20px) !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:11px !important;
  background:#111827 !important;
  border:1px solid rgba(148,163,184,.45) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.62) !important;
  color:#ffffff !important;
}
#editorModal .editorHeader.simpleHeader{
  height:45px !important;
  padding:8px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:#111827 !important;
  border-bottom:1px solid rgba(148,163,184,.38) !important;
}
#editorModal .editorHeader.simpleHeader h2{
  margin:0 !important;
  font-size:17px !important;
  line-height:1 !important;
  color:#ffffff !important;
}
#editorModal .closeMini{
  height:28px !important;
  min-height:28px !important;
  padding:4px 10px !important;
  font-size:12px !important;
  border-radius:8px !important;
}
#editorModal .editorForm.simpleForm{
  padding:10px !important;
  display:grid !important;
  gap:10px !important;
  background:#111827 !important;
}
#editorModal .quickEntryBox{
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:8px !important;
  background:#111827 !important;
  padding:10px !important;
  display:grid !important;
  gap:8px !important;
}
#editorModal label{
  display:grid !important;
  gap:3px !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
#editorModal input,
#editorModal select,
#editorModal textarea{
  width:100% !important;
  background:#111827 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.88) !important;
  border-radius:8px !important;
  padding:8px !important;
  font-size:14px !important;
  font-weight:800 !important;
}
#editorModal .numberFocus input{
  font-size:18px !important;
  padding:8px !important;
}
#editorModal .quickGrid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
#editorModal .optionalEditor{
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:8px !important;
  background:#111827 !important;
  overflow:hidden !important;
}
#editorModal .optionalEditor summary{
  list-style:none !important;
  cursor:pointer !important;
  padding:8px 10px !important;
  background:#1e293b !important;
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:900 !important;
}
#editorModal .optionalEditor summary::-webkit-details-marker{
  display:none !important;
}
#editorModal .optionalEditor summary::before{
  content:"› " !important;
}
#editorModal .optionalEditor[open] summary::before{
  content:"⌄ " !important;
}
#editorModal .optionalBlock{
  padding:8px 10px !important;
  display:grid !important;
  gap:7px !important;
  border-top:1px solid rgba(148,163,184,.25) !important;
  background:#111827 !important;
}
#editorModal .optionalBlock h3{
  margin:0 !important;
  font-size:13px !important;
  color:#ffffff !important;
}
#editorModal textarea{
  min-height:54px !important;
  resize:vertical !important;
}
#editorModal .simpleActions{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  gap:10px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
}
#editorModal .simpleActions button{
  width:100% !important;
  height:47px !important;
  min-height:47px !important;
  font-size:14px !important;
  border-radius:9px !important;
}
@media(max-width:460px){
  #editorModal .dialog.editorDialog.simpleEditor{
    width:calc(100vw - 20px) !important;
  }
  #editorModal .quickGrid,
  #editorModal .simpleActions{
    grid-template-columns:1fr !important;
  }
}


/* FINAL: Editor exakt wie Referenzdatei */
#editorModal.dialogBackdrop{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px !important;
  background:rgba(0,0,0,.45) !important;
  z-index:100000 !important;
}
#editorModal.dialogBackdrop.show{display:flex !important;}

#editorModal .dialog.editorDialog.simpleEditor{
  width:min(420px,calc(100vw - 18px)) !important;
  max-height:calc(100vh - 18px) !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:12px !important;
  background:#111827 !important;
  color:#ffffff !important;
  border:1px solid rgba(148,163,184,.45) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.62) !important;
}

#editorModal .editorHeader.simpleHeader{
  height:45px !important;
  padding:8px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  background:#111827 !important;
  border-bottom:1px solid rgba(148,163,184,.38) !important;
  border-radius:12px 12px 0 0 !important;
}
#editorModal .editorHeader.simpleHeader h2{
  margin:0 !important;
  font-size:17px !important;
  line-height:1.1 !important;
  color:#ffffff !important;
}
#editorModal .editorHeader.simpleHeader p{display:none !important;}
#editorModal .closeMini{
  height:28px !important;
  min-height:28px !important;
  padding:4px 10px !important;
  font-size:12px !important;
  border-radius:8px !important;
}

#editorModal .editorForm.simpleForm{
  padding:10px !important;
  gap:10px !important;
  display:grid !important;
  max-height:calc(100vh - 70px) !important;
  overflow:auto !important;
  background:#111827 !important;
}

#editorModal .quickEntryBox{
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:8px !important;
  background:#111827 !important;
  padding:10px !important;
  display:grid !important;
  gap:8px !important;
}
#editorModal label{
  display:grid !important;
  gap:3px !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
#editorModal input,
#editorModal select,
#editorModal textarea{
  width:100% !important;
  background:#111827 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.85) !important;
  border-radius:8px !important;
  padding:8px !important;
  font-size:14px !important;
  font-weight:800 !important;
}
#editorModal .numberFocus input{
  font-size:18px !important;
  padding:8px !important;
}
#editorModal .quickGrid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}

#editorModal .optionalEditor{
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:8px !important;
  background:#111827 !important;
  overflow:hidden !important;
}
#editorModal .optionalEditor summary{
  cursor:pointer !important;
  padding:8px 10px !important;
  font-size:13px !important;
  font-weight:900 !important;
  color:#ffffff !important;
  background:#1e293b !important;
}
#editorModal .optionalBlock{
  padding:8px 10px !important;
  display:grid !important;
  gap:7px !important;
  background:#111827 !important;
  border-top:1px solid rgba(148,163,184,.25) !important;
}
#editorModal .optionalBlock h3{
  margin:0 !important;
  font-size:13px !important;
  color:#ffffff !important;
}
#editorModal .compactTwo{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
#editorModal .statusList,
#editorModal .compactList,
#editorModal .fristBox{
  background:#111827 !important;
  color:#cbd5e1 !important;
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:8px !important;
  padding:6px !important;
  min-height:28px !important;
}
#editorModal textarea{
  min-height:44px !important;
  resize:vertical !important;
}

#editorModal .simpleActions{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  gap:10px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
}
#editorModal .simpleActions button{
  width:100% !important;
  min-height:47px !important;
  height:47px !important;
  font-size:14px !important;
  border-radius:9px !important;
}
@media(max-width:460px){
  #editorModal .dialog.editorDialog.simpleEditor{width:calc(100vw - 18px) !important;}
  #editorModal .quickGrid,
  #editorModal .compactTwo,
  #editorModal .simpleActions{grid-template-columns:1fr !important;}
}


/* FINAL FIX: Nur kompaktes Editorfenster anzeigen */
#editorModal.dialogBackdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.45) !important;
  padding:10px !important;
}
#editorModal.dialogBackdrop.show{display:flex !important;}
#editorModal .dialog.editorDialog.simpleEditor{
  width:420px !important;
  max-width:calc(100vw - 18px) !important;
  max-height:calc(100vh - 18px) !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:12px !important;
  background:#111827 !important;
  color:#fff !important;
  border:1px solid rgba(148,163,184,.45) !important;
}
#editorModal .editorHeader.simpleHeader{
  height:45px !important;
  padding:8px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:#111827 !important;
  border-bottom:1px solid rgba(148,163,184,.38) !important;
}
#editorModal .editorHeader h2{font-size:17px !important;margin:0 !important;color:#fff !important;}
#editorModal .editorHeader p{display:none !important;}
#editorModal .editorForm.simpleForm{
  padding:10px !important;
  display:grid !important;
  gap:10px !important;
  background:#111827 !important;
  max-height:calc(100vh - 63px) !important;
  overflow:auto !important;
}
#editorModal .quickEntryBox{
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:8px !important;
  background:#111827 !important;
  padding:10px !important;
  display:grid !important;
  gap:8px !important;
}
#editorModal label{display:grid !important;gap:3px !important;font-size:12px !important;font-weight:900 !important;color:#fff !important;}
#editorModal input,#editorModal select,#editorModal textarea{
  background:#111827 !important;color:#fff !important;border:1px solid rgba(255,255,255,.85) !important;border-radius:8px !important;padding:8px !important;font-size:14px !important;font-weight:800 !important;width:100% !important;
}
#editorModal .numberFocus input{font-size:18px !important;}
#editorModal .quickGrid,#editorModal .compactTwo{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;}
#editorModal .optionalEditor{border:1px solid rgba(148,163,184,.45) !important;border-radius:8px !important;background:#111827 !important;overflow:hidden !important;}
#editorModal .optionalEditor summary{padding:8px 10px !important;background:#1e293b !important;color:#fff !important;font-size:13px !important;font-weight:900 !important;cursor:pointer !important;}
#editorModal .optionalBlock{padding:8px 10px !important;display:grid !important;gap:7px !important;background:#111827 !important;border-top:1px solid rgba(148,163,184,.25) !important;}
#editorModal .optionalBlock h3{margin:0 !important;font-size:13px !important;color:#fff !important;}
#editorModal .statusList,#editorModal .compactList,#editorModal .fristBox{background:#111827 !important;color:#cbd5e1 !important;border:1px solid rgba(148,163,184,.45) !important;border-radius:8px !important;padding:6px !important;}
#editorModal .simpleActions{display:grid !important;grid-template-columns:1fr 1fr 1fr !important;gap:10px !important;padding:0 !important;margin:0 !important;background:transparent !important;border:0 !important;}
#editorModal .simpleActions button{height:47px !important;min-height:47px !important;width:100% !important;font-size:14px !important;border-radius:9px !important;}


/* FINAL: Gleis- und Fahrzeugdarstellung wie in der Farmsen/Ochsenzoll-Referenz */
.tracks{
  display:grid !important;
  gap:3px !important;
  overflow:hidden !important;
  padding-right:0 !important;
  align-content:stretch !important;
  flex:1 !important;
  grid-template-rows:repeat(var(--rows,1),minmax(24px,1fr)) !important;
}
.track{
  min-height:0 !important;
  align-items:center !important;
}
.rail{
  position:relative !important;
  height:78% !important;
  min-height:26px !important;
  max-height:44px !important;
  overflow:hidden !important;
}
.rail:before{
  top:50% !important;
  transform:translateY(-50%) !important;
}
.veh{
  position:absolute !important;
  top:50% !important;
  height:78% !important;
  min-height:20px !important;
  max-height:34px !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:14px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
.track-len{
  font-size:9px !important;
  line-height:1.05 !important;
}
.railScaleWrap{
  width:100%;
  min-width:0;
}
.railScaleWrap .rail{
  width:var(--display-width,100%) !important;
}


/* Farmsen/Ochsenzoll Optik */
.trackNo,
.track-no,
.trackLabel,
.tracknum{
  border:1px solid #6f84aa !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#132648 0%,#0a152b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 0 10px rgba(120,160,255,.18) !important;
}

.rail{
  border:1px solid #7f91af !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#0b1426 0%,#09111f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 8px rgba(255,255,255,.05) !important;
}

.rail::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:4px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.75),
    rgba(255,255,255,.18)
  ) !important;
}

.signal,
.sig{
  filter:drop-shadow(0 0 4px rgba(255,255,255,.15));
}

.signal .lamp,
.sig .lamp{
  transform:scale(1.08);
}

.trackNo,
.track-no,
.trackLabel,
.tracknum,
.rail{
  transition:all .15s ease;
}


/* FINAL: Laufweg und Gleissperren wie Farmsen/Ochsenzoll */
.walk{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:6px !important;
  background:repeating-linear-gradient(
    45deg,
    #111827 0,
    #111827 2px,
    #facc15 2px,
    #facc15 4px
  ) !important;
  z-index:25 !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
  border-left:1px solid #111827 !important;
  border-right:1px solid #111827 !important;
  box-shadow:0 0 0 2px rgba(250,204,21,.14) !important;
}

.lock{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  background:repeating-linear-gradient(
    45deg,
    rgba(255,0,0,.22) 0,
    rgba(255,0,0,.22) 9px,
    rgba(255,255,255,.12) 9px,
    rgba(255,255,255,.12) 18px
  ) !important;
  border:2px solid #ff0000 !important;
  z-index:22 !important;
  pointer-events:none !important;
}

.track-name.locked{
  color:#ef4444 !important;
  border-color:#ef4444 !important;
  box-shadow:0 0 0 2px rgba(239,68,68,.16), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.lock-menu{
  position:fixed;
  z-index:100001;
  background:#111827;
  color:#e5e7eb;
  border:1px solid #334155;
  border-radius:12px;
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  padding:8px;
  min-width:240px;
}
.lock-menu-title{
  font-weight:900;
  padding:6px 8px 8px;
  border-bottom:1px solid #334155;
  margin-bottom:6px;
}
.lock-menu button{
  width:100%;
  display:block;
  text-align:left;
  border-radius:8px !important;
  padding:9px 10px !important;
  margin:3px 0;
  font-weight:900 !important;
}


/* FINAL FIX: Sperrflächen und Laufweg wie in Farmsen/Ochsenzoll */
.rail{
  position:relative !important;
  overflow:hidden !important;
}

.rail .lock,
.lock{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  height:auto !important;
  background:repeating-linear-gradient(
    45deg,
    rgba(255,0,0,.22) 0,
    rgba(255,0,0,.22) 9px,
    rgba(255,255,255,.12) 9px,
    rgba(255,255,255,.12) 18px
  ) !important;
  border:2px solid #ff0000 !important;
  z-index:20 !important;
  pointer-events:none !important;
  border-radius:8px !important;
}

.rail .walk,
.walk{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:6px !important;
  background:repeating-linear-gradient(
    45deg,
    #111827 0,
    #111827 2px,
    #facc15 2px,
    #facc15 4px
  ) !important;
  z-index:60 !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
  border-left:1px solid #111827 !important;
  border-right:1px solid #111827 !important;
  box-shadow:0 0 0 2px rgba(250,204,21,.14) !important;
}

.track-name.locked{
  color:#ef4444 !important;
  border-color:#ef4444 !important;
  box-shadow:0 0 0 2px rgba(239,68,68,.18), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.lock-menu{
  position:fixed !important;
  z-index:100001 !important;
  background:#111827 !important;
  color:#ffffff !important;
  border:1px solid #334155 !important;
  border-radius:12px !important;
  box-shadow:0 18px 45px rgba(0,0,0,.55) !important;
  padding:8px !important;
  min-width:270px !important;
}
.lock-menu-title{
  font-weight:900 !important;
  padding:6px 8px 8px !important;
  border-bottom:1px solid #334155 !important;
  margin-bottom:6px !important;
}
.lock-menu button{
  width:100% !important;
  display:block !important;
  text-align:left !important;
  border-radius:8px !important;
  padding:9px 10px !important;
  margin:4px 0 !important;
  font-weight:900 !important;
}


/* FINAL: Ochsenzoll Blöcke untereinander und Gleisoptik wie Referenz */
body.facility-ochsenzoll .board{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:10px !important;
  overflow:hidden !important;
}

body.facility-ochsenzoll .topblocks{
  display:block !important;
  grid-column:1 !important;
  grid-row:1 !important;
  min-height:0 !important;
}

body.facility-ochsenzoll .topblocks .block:first-child{
  display:flex !important;
  grid-column:auto !important;
  grid-row:auto !important;
  min-height:210px !important;
  height:auto !important;
}

body.facility-ochsenzoll .topblocks .block:nth-child(2){
  display:none !important;
}

body.facility-ochsenzoll .block.bottom{
  display:flex !important;
  grid-column:1 !important;
  grid-row:2 !important;
  min-height:0 !important;
}

body.facility-ochsenzoll .block,
body.facility-ochsenzoll .block.bottom{
  background:linear-gradient(180deg,#111827 0%,#0b1220 100%) !important;
  border:1px solid rgba(148,163,184,.28) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(0,0,0,.22) !important;
}

body.facility-ochsenzoll .block h2{
  background:transparent !important;
  border-bottom:1px solid rgba(148,163,184,.25) !important;
  color:#ffffff !important;
  padding:10px 20px 14px !important;
  margin:0 0 8px !important;
  font-size:15px !important;
}

body.facility-ochsenzoll .tracks{
  display:grid !important;
  gap:14px !important;
  align-content:stretch !important;
  padding:8px 8px 12px !important;
}

/* Gleiszeile wie im Beispiel: Signal | Nummer | langes Gleis | Meterbox */
.track{
  grid-template-columns:20px 42px minmax(0,1fr) 72px !important;
  gap:5px !important;
  min-height:45px !important;
  align-items:center !important;
}

.track-name{
  min-width:38px !important;
  height:36px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:20px !important;
  font-weight:950 !important;
  color:#ffffff !important;
  border:1px solid #6f84aa !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#132648 0%,#0a152b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 0 10px rgba(120,160,255,.18) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.85) !important;
  padding:0 !important;
}

.track-len{
  min-width:64px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  border-radius:8px !important;
  background:#0f172a !important;
  color:#ffffff !important;
  font-size:9px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
  padding:4px 3px !important;
  text-align:center !important;
}

/* Schöne Gleisdarstellung: dunkler Innenkörper, heller Rand und Lichtkante */
.rail{
  position:relative !important;
  height:78% !important;
  min-height:30px !important;
  max-height:40px !important;
  border:1px solid #7f91af !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#111a2d 0%,#07101f 100%) !important;
  overflow:hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 8px rgba(255,255,255,.05) !important;
}

.rail::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  height:5px !important;
  border-radius:999px !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(180deg,#d8e4f6 0%,#91a4bf 45%,#4b5870 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.35) !important;
}

.rail::after{
  content:"" !important;
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  top:4px !important;
  height:3px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.18)) !important;
  pointer-events:none !important;
}

/* Fahrzeuge bleiben groß und gut lesbar */
.veh{
  height:78% !important;
  min-height:22px !important;
  max-height:34px !important;
  font-size:15px !important;
  font-weight:950 !important;
  border-radius:8px !important;
}

/* Signale etwas näher am Beispiel */
.track-signal{
  width:20px !important;
  height:52px !important;
  justify-self:center !important;
}
.signal-head{
  width:16px !important;
  height:35px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#263448 0%,#050b14 100%) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.65) !important;
}
.signal-lamp{
  width:8px !important;
  height:8px !important;
}


/* ORIGINAL FA/OZ FINAL: Ochsenzoll 11–13 über 21–30 und originale Gleiszeile */
body.facility-ochsenzoll .board{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:minmax(105px,.38fr) minmax(0,1fr) !important;
  gap:10px !important;
  overflow:hidden !important;
}
body.facility-ochsenzoll .block.primary{
  grid-column:1 !important;
  grid-row:1 !important;
  min-height:0 !important;
  height:100% !important;
}
body.facility-ochsenzoll .block:not(.primary){
  grid-column:1 !important;
  grid-row:auto !important;
  min-height:0 !important;
}
body.facility-ochsenzoll .block.primary + .block{
  grid-row:2 !important;
}
body.facility-ochsenzoll .tracks{
  overflow:hidden !important;
  align-content:stretch !important;
}

/* Originale Track-Zeile */
.track{
  display:grid !important;
  grid-template-columns:24px 42px minmax(0,1fr) 72px !important;
  gap:5px !important;
  align-items:center !important;
  min-height:0 !important;
  padding-left:0 !important;
  position:relative !important;
}
.tracks{
  display:grid !important;
  gap:6px !important;
  overflow:hidden !important;
  align-content:stretch !important;
  flex:1 !important;
  grid-template-rows:repeat(var(--rows,1),minmax(34px,1fr)) !important;
}

/* Originale Gleisnummern */
.track-name{
  font-size:18px !important;
  font-weight:900 !important;
  min-width:38px !important;
  padding:5px 4px !important;
  text-align:center !important;
  color:#ffffff !important;
  background:#172131 !important;
  border:1px solid #334155 !important;
  border-radius:8px !important;
  cursor:pointer !important;
  text-shadow:0 1px 3px rgba(0,0,0,.8) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 1px 3px rgba(0,0,0,.22) !important;
}
.track-name.locked{
  color:#ef4444 !important;
  border-color:#ef4444 !important;
}

/* Originale Meterbox */
.track-len{
  font-size:9px !important;
  color:#cbd5e1 !important;
  font-weight:700 !important;
  line-height:1.05 !important;
  text-align:center !important;
  background:#111827 !important;
  border:1px solid #334155 !important;
  border-radius:6px !important;
  padding:2px 3px !important;
  align-self:center !important;
  height:auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
}

/* Originale Schiene */
.rail{
  position:relative !important;
  height:78% !important;
  min-height:26px !important;
  max-height:44px !important;
  border:1px solid #475569 !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#1e293b 0%,#111827 52%,#0f172a 100%) !important;
  overflow:hidden !important;
  width:100% !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 4px rgba(15,23,42,.08),
    0 1px 3px rgba(15,23,42,.08) !important;
}
.rail:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  height:5px !important;
  background:linear-gradient(180deg,#cbd5e1,#64748b,#334155) !important;
  transform:translateY(-50%) !important;
  border-radius:999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(15,23,42,.22) !important;
}
.rail:after{
  background:transparent !important;
}

/* Originale Signale */
.track-signal{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:20px !important;
  height:52px !important;
  z-index:50 !important;
  pointer-events:none !important;
  justify-self:center !important;
  align-self:center !important;
}
.signal-head{
  position:absolute !important;
  left:2px !important;
  top:0 !important;
  width:16px !important;
  height:35px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#1f2937 0%,#020617 100%) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 2px 6px rgba(0,0,0,.60) !important;
}
.signal-lamp{
  position:absolute !important;
  left:4px !important;
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:#1f2937 !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85) !important;
}
.signal-lamp.red{top:4px !important}
.signal-lamp.yellow{top:13px !important}
.signal-lamp.green{top:22px !important}
.track-signal.is-green .signal-lamp.green{
  background:#22c55e !important;
  box-shadow:0 0 8px #22c55e,0 0 15px rgba(34,197,94,.60),inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.track-signal.is-yellow .signal-lamp.yellow{
  background:#facc15 !important;
  box-shadow:0 0 8px #facc15,0 0 15px rgba(250,204,21,.60),inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.track-signal.is-red .signal-lamp.red{
  background:#ef4444 !important;
  box-shadow:0 0 8px #ef4444,0 0 15px rgba(239,68,68,.60),inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.signal-post{
  position:absolute !important;
  left:9px !important;
  top:35px !important;
  width:2px !important;
  height:12px !important;
  background:linear-gradient(180deg,#94a3b8,#475569) !important;
}
.signal-foot{
  position:absolute !important;
  left:4px !important;
  top:47px !important;
  width:12px !important;
  height:4px !important;
  border-radius:2px !important;
  background:linear-gradient(180deg,#94a3b8,#334155) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.55) !important;
}

/* Originale Laufweg- und Sperrdarstellung */
.walk{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:6px !important;
  background:repeating-linear-gradient(45deg,#111827 0,#111827 2px,#facc15 2px,#facc15 4px) !important;
  z-index:60 !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
  border-left:1px solid #111827 !important;
  border-right:1px solid #111827 !important;
  box-shadow:0 0 0 2px rgba(250,204,21,.14) !important;
}
.lock{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  background:repeating-linear-gradient(45deg,rgba(255,0,0,.22) 0,rgba(255,0,0,.22) 9px,rgba(255,255,255,.12) 9px,rgba(255,255,255,.12) 18px) !important;
  border:2px solid #ff0000 !important;
  z-index:8 !important;
  pointer-events:none !important;
}

/* Originales Sperrmenü */
.lock-menu{
  position:fixed !important;
  z-index:100001 !important;
  background:#111827 !important;
  color:#e5e7eb !important;
  border:1px solid #334155 !important;
  border-radius:12px !important;
  box-shadow:0 18px 45px rgba(0,0,0,.55) !important;
  padding:8px !important;
  min-width:240px !important;
}
.lock-menu-title{
  font-weight:900 !important;
  padding:6px 8px 8px !important;
  border-bottom:1px solid #334155 !important;
  margin-bottom:6px !important;
}
.lock-menu button{
  width:100% !important;
  display:block !important;
  text-align:left !important;
  border-radius:8px !important;
  padding:9px 10px !important;
  margin:3px 0 !important;
  font-weight:900 !important;
}

/* Wrapper aus Zwischenversionen deaktivieren */
.railScaleWrap{display:contents !important;}


.deadlineTodayRow.showDelete{
 outline:2px solid #3b82f6;
 outline-offset:1px;
}

.frist-badge{display:inline-block;margin-left:4px;background:#0057d8;color:#fff;font-size:10px;font-weight:700;padding:1px 4px;border-radius:3px;vertical-align:middle;}

/* BFA-Frist morgen: Fahrzeug hellblau, Fristart direkt neben der Fahrzeugnummer */
.veh.bfa-due-tomorrow{
  background:linear-gradient(180deg,#bfe3ff 0%,#70b7f4 52%,#4da1e8 100%) !important;
  color:#041a33 !important;
  text-shadow:none !important;
  border-color:#1d5f99 !important;
}
.veh.bfa-due-tomorrow .frist-badge{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:6px !important;
  padding:1px 5px !important;
  min-width:24px !important;
  height:18px !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,#1e7bff,#004fc7) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.85) !important;
  font-size:11px !important;
  font-weight:950 !important;
  line-height:1 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.55) !important;
  z-index:35 !important;
  pointer-events:none !important;
}

.veh.bba-due{
 background:linear-gradient(180deg,#fff8a8 0%,#f3eb6a 52%,#e2d94a 100%) !important;
 color:#222 !important;
 text-shadow:none !important;
}


/* Heute fällige Fristen nach Ortfarbe der Plakette */
.veh.frist-heute-bfa{
  background:linear-gradient(180deg,#1e7bff,#004fc7)!important;
  color:#fff!important;
}
.veh.frist-heute-bba{
  background:linear-gradient(180deg,#ffd400 0%,#d4a900 100%)!important;
  color:#000!important;
  text-shadow:none!important;
}
.veh.frist-heute-bbi{
  background:linear-gradient(180deg,#34d399,#16a34a)!important;
  color:#fff!important;
}


/* Fristen heute: farbige Hinterlegung nach Ort (BBA/BFA/BBI) */
.deadlineTodayRow.deadlineToday-bba{
  border-left-color:#facc15 !important;
  background:linear-gradient(90deg,rgba(250,204,21,.46),rgba(250,204,21,.17)) !important;
  color:#ffffff !important;
}
.deadlineTodayRow.deadlineToday-bfa{
  border-left-color:#3b82f6 !important;
  background:linear-gradient(90deg,rgba(59,130,246,.55),rgba(59,130,246,.18)) !important;
  color:#ffffff !important;
}
.deadlineTodayRow.deadlineToday-bbi{
  border-left-color:#22c55e !important;
  background:linear-gradient(90deg,rgba(34,197,94,.48),rgba(34,197,94,.16)) !important;
  color:#ffffff !important;
}
.deadlineTodayRow.deadlineToday-bba .deadlineTodayText,
.deadlineTodayRow.deadlineToday-bfa .deadlineTodayText,
.deadlineTodayRow.deadlineToday-bbi .deadlineTodayText{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
}
.deadlineTodayRow.deadlineToday-bba.showDelete,
.deadlineTodayRow.deadlineToday-bfa.showDelete,
.deadlineTodayRow.deadlineToday-bbi.showDelete{
  outline:2px solid rgba(255,255,255,.75) !important;
  outline-offset:1px !important;
}


/* VF / GH / OT: Volksdorf und Ohlstedt oben nebeneinander, Großhansdorf darunter über volle Breite */
body.facility-vf-gh-ot #board{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "vf ot"
    "gh gh";
  gap:12px;
}
body.facility-vf-gh-ot .block.vf-top{grid-area:vf;}
body.facility-vf-gh-ot .block.ot-top{grid-area:ot;}
body.facility-vf-gh-ot .block.gh-bottom{grid-area:gh;}
body.facility-vf-gh-ot .block.gh-bottom .rail{
  min-height:34px;
}

/* Großhansdorf: graue Betriebs-/Bahnsteigflächen hinter den Gleisen */
body.facility-vf-gh-ot .block.gh-bottom{
  position:relative;
  isolation:isolate;
}
body.facility-vf-gh-ot .block.gh-bottom .tracks{
  position:relative;
  isolation:isolate;
}
body.facility-vf-gh-ot .block.gh-bottom .tracks::before{
  content:"";
  position:absolute;
  inset:0 3.5% 0 7.5%;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(156,163,175,.76),rgba(107,114,128,.62)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(156,163,175,.76),rgba(107,114,128,.62)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(156,163,175,.76),rgba(107,114,128,.62)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(156,163,175,.76),rgba(107,114,128,.62)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,rgba(156,163,175,.76),rgba(107,114,128,.62));
  background-size:
    18% 12px,18% 12px,18% 12px,
    27% 11px,27% 11px,27% 11px,
    30% 36px,30% 36px,30% 36px,
    18% 12px,18% 12px,18% 12px,
    27% 13px,27% 13px,27% 13px;
  background-position:
    42% 8%,42% 8%,42% 8%,
    73% 8%,73% 8%,73% 8%,
    7% 20%,7% 20%,7% 20%,
    42% 72%,42% 72%,42% 72%,
    73% 72%,73% 72%,73% 72%;
  background-repeat:no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.38));
}
body.facility-vf-gh-ot .block.gh-bottom .tracks::after{
  content:"";
  position:absolute;
  left:16%;
  right:20%;
  top:15%;
  height:12%;
  z-index:0;
  pointer-events:none;
  opacity:1;
  background:red;
  box-shadow:0 0 18px rgba(15,23,42,.28) inset;
}
body.facility-vf-gh-ot .block.gh-bottom .track{
  position:relative;
  z-index:1;
}


/* GH walkway markers like Farmsen */
.walk{
  width:10px !important;
  background:repeating-linear-gradient(
    45deg,
    #f5d000 0px,
    #f5d000 6px,
    #111 6px,
    #111 12px
  ) !important;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
}


/* Großhansdorf: Laufwege bei 123 m und 246 m immer sichtbar darstellen */
body.facility-vf-gh-ot .rail[data-track="Gleis 21 GH"],
body.facility-vf-gh-ot .rail[data-track="Gleis 22 GH"]{
  background-image:
    repeating-linear-gradient(45deg,#111 0 4px,#facc15 4px 8px),
    repeating-linear-gradient(45deg,#111 0 4px,#facc15 4px 8px),
    linear-gradient(180deg,#111827,#172033) !important;
  background-size:10px 100%,10px 100%,100% 100% !important;
  background-position:calc(33.333% - 5px) 0,calc(66.666% - 5px) 0,0 0 !important;
  background-repeat:no-repeat,no-repeat,no-repeat !important;
}

/* JS-Laufwegmarker ebenfalls deutlich wie Farmsen darstellen */
body.facility-vf-gh-ot .rail[data-track="Gleis 21 GH"] .walk,
body.facility-vf-gh-ot .rail[data-track="Gleis 22 GH"] .walk{
  width:10px !important;
  background:repeating-linear-gradient(45deg,#111 0 4px,#facc15 4px 8px) !important;
  border-left:1px solid #fff !important;
  border-right:1px solid #fff !important;
  z-index:40 !important;
  opacity:1 !important;
}

/* 22-Zoll-Bueroansicht: mehr Gleisplan, weniger Rand, alle Funktionen bleiben sichtbar. */
@media (max-width:1700px), (max-height:1050px){
  header{
    padding:6px 8px !important;
    gap:6px !important;
  }
  h1{
    font-size:18px !important;
    line-height:1.05 !important;
  }
  .sub{
    display:none !important;
  }
  .topbar{
    gap:4px !important;
  }
  button,
  select{
    min-height:28px !important;
    padding:5px 8px !important;
    border-radius:7px !important;
    font-size:12px !important;
    line-height:1.05 !important;
  }
  main{
    height:calc(100vh - 44px) !important;
    grid-template-columns:minmax(0,1fr) 248px !important;
    gap:6px !important;
    padding:6px !important;
  }
  .board{
    gap:6px !important;
  }
  .block{
    padding:5px !important;
    border-radius:8px !important;
    box-shadow:0 3px 10px rgba(15,23,42,.08) !important;
  }
  .block-head{
    margin-bottom:1px !important;
    padding:1px 4px 2px !important;
    gap:4px !important;
  }
  .block h2{
    font-size:15px !important;
    line-height:1.05 !important;
  }
  .dir{
    font-size:10px !important;
  }
  .summary{
    font-size:10px !important;
    padding-top:1px !important;
  }
  .tracks{
    gap:3px !important;
    grid-template-rows:repeat(var(--rows,1),minmax(24px,1fr)) !important;
  }
  .track{
    grid-template-columns:18px 34px minmax(0,1fr) 54px !important;
    gap:3px !important;
    min-height:0 !important;
  }
  .track-name{
    height:28px !important;
    min-width:30px !important;
    padding:2px 3px !important;
    border-radius:6px !important;
    font-size:14px !important;
    line-height:1.1 !important;
  }
  .track-len{
    padding:2px !important;
    border-radius:6px !important;
    font-size:8px !important;
    line-height:1.05 !important;
  }
  .track-signal{
    width:16px !important;
    height:40px !important;
  }
  .signal-head{
    left:1px !important;
    width:14px !important;
    height:30px !important;
  }
  .signal-lamp{
    left:3px !important;
    width:8px !important;
    height:8px !important;
  }
  .signal-lamp.red{top:3px !important;}
  .signal-lamp.yellow{top:11px !important;}
  .signal-lamp.green{top:19px !important;}
  .signal-post{
    left:7px !important;
    top:30px !important;
    height:8px !important;
  }
  .signal-foot{
    left:3px !important;
    top:38px !important;
    width:10px !important;
    height:3px !important;
  }
  .rail{
    height:82% !important;
    min-height:22px !important;
    max-height:34px !important;
    border-radius:7px !important;
  }
  .rail::before{
    height:3px !important;
  }
  .rail::after{
    height:1px !important;
  }
  .side{
    padding:6px !important;
    border-radius:8px !important;
  }
  .vehicle-card{
    padding:8px !important;
    margin-bottom:6px !important;
    border-radius:8px !important;
  }
  .vehicle-card h2,
  .cardbox h2{
    margin-bottom:5px !important;
    padding-bottom:5px !important;
    font-size:14px !important;
  }
  .vehicle-card-row{
    gap:6px !important;
    padding:4px 0 !important;
    font-size:11px !important;
  }
  .vehicle-card-row b{
    max-width:112px !important;
  }
  .vehicle-card-status{
    padding:3px 6px !important;
  }
  .vehicle-card-btn{
    margin-top:6px !important;
    min-height:30px !important;
    padding:6px 7px !important;
    border-radius:7px !important;
    font-size:12px !important;
  }
  .cardbox{
    padding:7px !important;
    margin-bottom:6px !important;
    border-radius:8px !important;
  }
  .muted,
  .list{
    font-size:11px !important;
  }
}

@media (max-width:1450px){
  main{
    grid-template-columns:minmax(0,1fr) 220px !important;
  }
  .board{
    grid-template-columns:1.42fr .78fr !important;
  }
  .track{
    grid-template-columns:16px 32px minmax(0,1fr) 48px !important;
  }
  .track-len{
    font-size:7px !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;
}