body { background-color: #212121; color: #fff; }
.navbar { background-color: #d32f2f !important; }
.navbar-brand, .nav-link { color: #fff !important; font-weight: bold; }
.card { transition: transform 0.2s; }
.card:hover { transform: scale(1.02); }
.card-title { font-weight: bold; }
.btn-primary, .btn-danger { background-color: #d32f2f; border: none; }
.btn-primary:hover, .btn-danger:hover { background-color: #b71c1c; }
.alert-danger { background-color: #b71c1c; border: none; }
.alert-success { background-color: #388e3c; border: none; }
.form-control, .form-check-input { background-color: #424242; color: #fff; border: 1px solid #555; }
.form-control::placeholder { color: #bbb; }


.status-0 { background-color: #ff0000; animation: blinker 1s linear infinite; }
.status-1 { background-color: #ffeb3b; color: #000; }
.status-2 { background-color: #4caf50; color: #FFF;}
.status-3 { background-color: #ff9800; color: #FFF;}
.status-4 { background-color: #f44336; color: #FFF;}
.status-5 { background-color: #9e9e9e; color: #FFF;}
.status-6 { background-color: #424242; color: #FFF;}
.status-7 { background-color: #ffffff; color: #000;}
.status-8 { background-color: #00FFFF; color: #000;}
.status-9 { background-color: #9e9e9e; color: #fff;}

@keyframes blinker {
  50% { opacity: 0.5; }
}

.btn-status-0 { background-color: #f44336; color: #fff; }
.btn-status-1 { background-color: #ffeb3b; color: #000; }
.btn-status-2 { background-color: #4caf50; color: #fff; }
.btn-status-3 { background-color: #ff9800; color: #fff; }
.btn-status-4 { background-color: #d32f2f; color: #fff; }
.btn-status-5 { background-color: #9e9e9e; color: #fff; }
.btn-status-6 { background-color: #424242; color: #fff; }
.btn-status-7 { background-color: #fff; color: #000; }
.btn-status-8 { background-color: #00FFFF; color: #000; }
.btn-status-9 { background-color: #9e9e9e; color: #fff; }


.btn-status-0:hover { background-color: #f44336 !important; color: #fff; }
.btn-status-1:hover { background-color: #ffeb3b !important; color: #000; }
.btn-status-2:hover { background-color: #4caf50 !important; color: #fff; }
.btn-status-3:hover { background-color: #ff9800 !important; color: #fff; }
.btn-status-4:hover { background-color: #d32f2f !important; color: #fff; }
.btn-status-5:hover { background-color: #9e9e9e !important; color: #fff; }
.btn-status-6:hover { background-color: #424242 !important; color: #fff; }
.btn-status-7:hover { background-color: #fff !important; color: #000; }
.btn-status-8:hover { background-color: #00FFFF !important; color: #000; }
.btn-status-9:hover { background-color: #9e9e9e !important; color: #fff; }

.btn-status-0:hover,
.btn-status-1:hover,
.btn-status-2:hover,
.btn-status-3:hover,
.btn-status-4:hover,
.btn-status-5:hover,
.btn-status-6:hover,
.btn-status-7:hover,
.btn-status-8:hover,
.btn-status-9:hover {
  opacity: 0.85;
}
.vehicle-entry {
  display: flex;
  align-items: center;
  width: 100%;
}

.left-part {
  display: flex;
  align-items: center;
}

.vehicle-number {
  font-size: 1.5rem;
  margin: 0;
}

.divider {
  width: 1px;
  height: 30px;
  background-color: black;
  margin-left: 12px;
}

.right-part {
  flex: 1; /* nimmt restliche Breite */
  display: flex;
  flex-direction: column; /* Name und Wache untereinander */
  justify-content: center; /* vertikal mittig innerhalb eigener Höhe */
  align-items: center; /* horizontal mittig */
}

.vehicle-name {
  font-size: 1.2rem;
  margin: 0;
}

.station-name {
  font-size: 0.9rem;
  margin: 2px 0 0 0; /* kleiner Abstand nach oben */
  color: #444;
}