html, body, #map { height: 100%; margin: 0; }
  .topbar { position:absolute; top:8px; left:50px; right:8px; display:flex; gap:8px; z-index:1000; flex-wrap:wrap; align-items:center;}
  .topbar select, .topbar button { padding:8px; font-size:14px; border-radius:6px; }
  .stats { position:absolute; bottom:8px; left:8px; width: 115px; background:#ffffffcc; padding:8px; border-radius:6px; font-family:sans-serif; z-index:1000; }
  .chip { padding:6px 8px; background:#016932aa; border-radius:2px; margin-right:8px; display:inline-block; font-size: 12px; color:#000; width: 100px; font-weight: 900; }
  .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { background:#016932; color:#fff; }
  #customerSel { background:#016932; font-size:19px; height:65px; width:180px; color:#fff; }
  option{ background:#016932; font-size:19px; color:#fff; }
  #locateBtn, #saveParcelBtn { background:#3e219d; font-size:19px; height:65px; color:#fff; }
  #locateBtn { width:140px; } #saveParcelBtn{ width:180px; }
  .btn { padding:6px 10px; border-radius:6px; border:1px solid #bbb; background:#016932; cursor:pointer; width: 117px;}
  .btn.ghost { background:#016932; color:#ffffff;}
  .btn.on { outline:2px solid #016932;background: #016932; }
  .pop-title { font-weight:800; font-size:18px; margin-bottom:6px; }
  .pop-muted { font-size:12px; opacity:.7; }
  .cust-badge { display:inline-block; border-radius:999px; padding:2px 6px; font:700 11px/1 system-ui,sans-serif; box-shadow:0 1px 4px rgba(0,0,0,.25); border:1px solid #fff; }
  .leaflet-container .leaflet-control-attribution{ visibility:hidden; }
  .env-badge { display:inline-block; margin-left:8px; padding:6px 10px; border-radius:8px; font-weight:800; letter-spacing:.3px; background:#C62828; color:#fff; border:1px solid #b71c1c; box-shadow:0 1px 3px rgba(0,0,0,.2); }

  /* Login-Modal (nicht schließbar ohne Erfolg) */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; z-index: 2000; }
  .modal { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); background: #fff; color:#222; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); overflow: hidden; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
  .modal header { padding: 14px 18px; background: #016932; color: #fff; font-weight: 800; letter-spacing: .2px; }
  .modal .content { padding: 16px 18px; }
  .modal .row { display:flex; gap:10px; align-items:center; margin-top:10px; }
  .modal input[type="text"], .modal input[type="password"] { flex:1; padding:10px 12px; border:1px solid #c9c9c9; border-radius:8px; font-size:16px; }
  .modal .actions { padding: 14px 18px; display:flex; gap:10px; justify-content:flex-end; background:#fafafa; border-top:1px solid #eee; }
  .modal .btn-primary { background:#016932; color:#fff; border:1px solid #016932; border-radius:8px; padding:10px 14px; cursor:pointer; font-weight:700; }
  .modal .hint { font-size:12px; opacity:.75; margin-top:6px; }
  .hidden { display: none !important; }
  /* VERSION ANZEIGEN */
  .ver-badge {
    position: absolute; top: 80px; right: 15px; font-size: 8px;
    padding: 6px 10px; border-radius: 8px; font-weight: 400; letter-spacing: .3px;
    background: #1b5e20; color: #fff; border:1px solid #144a19; box-shadow:0 1px 3px rgba(0,0,0,.2);
    z-index: 1200; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
  .ver-badge.dev { background:#C62828; border-color:#b71c1c; }
.env-badge-fixed {
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12px;
    z-index: 99999;
    backdrop-filter: blur(4px);
    font-family: "Inter", sans-serif;
    line-height: 1.3;
    
}
.env-badge-fixed.dev {
    background: rgba(200,40,40,0.85);
}
#systemBadge {
    position: fixed;
    text-align: center;
    width: 145px;
    right: 10px;
    bottom: 10px;
    z-index: 999999;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-family: sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    line-height: 1.3;
   
}
#systemBadge.dev {
    background: rgba(200,40,40,0.85);
}


  /* Blink-Effekt für "Wo bin ich?"-Button */
@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
/* id oder class des zu animierenden Elements blinken die marker*/
.fehler-blinken {
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
  display:inline-block; border-radius:999px; padding:2px 6px; font:700 11px/1 system-ui,sans-serif; box-shadow:0 1px 4px rgba(0,0,0,.25); border:1px solid #fff;
}
/* Einheitlicher Stil für Workstep-Eingabefelder */
.workstep-input {
  margin-left:10px;
  width: 110px;
  background: #d9f3e5aa;
  height: 23px;
  font-size: 16px;              /* verhindert iOS-Zoom */
  color: rgb(208, 22, 22);
  border-radius: 6px;
  border:1px solid #fff;
  text-align: center;
  outline: none;
  -webkit-text-size-adjust: 100%;
  transition: all 0.15s ease-in-out;
}
.workstepedit{
  padding-top:6px;
}
.workstep-input:focus {
  background: #d9f3e5aa;
  box-shadow: 0 0 4px rgb(208, 22, 22);
}
#HAaendern{
  margin-left:10px;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid #bbb;
  height: 28px;
  font-size: 16px;             /* verhindert iOS-Zoom */
  background:rgb(208, 22, 22);
  color:#fff;
  cursor:pointer;
}