/* Global Reset & Box-Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
}

body {
    background-color: #f2f2f2;
    background-image: url('../img/FFwappen-g.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    min-height: 100vh;
    /* padding-top: 50px; /* Platz für den Balken, die Höhe des Balkens beträgt 50px */
}

.logowrapper {
    width: 100%;            /* statt 100vw */
    height: 100vh;
    overflow: hidden;       /* versteckt Überlauf */
    background-color: #000;
    background-image: url('../img/FFwappen.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Abstand für das Missions-Panel */
.mission {
    margin: 20px;
}

@media (min-width: 768px) {
    .logowrapper .mission {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
}

.vehicle {
    margin-top: 1vh;
}

.vehicle, .station .content, .member {
    border: 1px solid #000;
    background-color: #ffffffed;
}

.station .content {
    border-top: 0;
}

.station .col-md-12 {
    border: 1px solid #000;
    border-bottom: 0;
}

.vehicle .name, .station .name, .member .name {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background-color: red;
    padding-bottom: 3px;
    color: #fff;
}

.vehicle .name select {
    background: transparent;
    border: none;
    color: #fff;
    font-weight: bold;
}

.vehicle .name select option {
    background-color: red;
    color: #fff;
}

.station .name {
    background-color: yellow;
    color: #000;
}

#OnStationContainer .name {
    background-color: green;
    color: #fff;
}

.vehicle .name p, .station .name p, .member .name p, .namecard p {
    margin-bottom: 0;
}

.vehicle .row, .station .row, .member .row {
    margin-left: 0;
    margin-right: 0;
}

.function {
    border-right: 1px solid;
    text-align: center;
    border-bottom: 1px solid;
    padding-bottom: 3px;
}

.function .ficon {
    height: 26px;
    margin-top: 6px;
}

.pname {
    border-bottom: 1px solid;
    min-height: 39px;
}

.stationrow, .memberrow {
    margin-top: 2vh;
}

.stationrow .col-md-12 {
    padding: 0;
}

.station .content {
    min-height: 70px;
}

.station .col-md-6 {
    min-height: 10vh;
}

.station .col-md-12.name {
    height: fit-content;
}

.namecard {
    margin-top: 5px;
    margin-bottom: 1px;
    width: 200px;
}

.namecard-inner {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    background-color: #fff;
    padding-left: 5px;
}

.rookie {
    background-color: yellow;
}

.ficon-wrapper {
    float: right;
    position: relative;
    margin-top: -25px;
    margin-bottom: -20px;
}

.ficon {
    height: 20px;
}

.missiontime {
    font-size: 11px;
    line-height: 14px;
}

.ui-state-hover {
    background: green;
}

.pname.ui-state-active {
    background: orange;
}

.pname.dropped.ui-state-active {
    background: none;
}

.highlighted-row {
    background-color: #d9d7d7; /* Leichtes Grau */
}

/* Modal-Header in Orange/Schwarz */
.modal-header {
  background-color: orange !important;
  color: black !important;
  border-bottom: 2px solid black !important;
}

/* Modal-Größe und Schrift etwas vergrößern */
.modal-dialog {
  max-width: 600px;  /* etwas breiter */
}
.modal-content {
  font-size: 1.1em;  /* Text insgesamt größer */
}

/* Buttons im Modal */
.btn-signal-yes {
  background-color: orange !important;
  color: black !important;
  border: 2px solid black !important;
  font-weight: bold;
}
.btn-signal-no {
  background-color: black !important;
  color: orange !important;
  border: 2px solid orange !important;
  font-weight: bold;
}
.btn-signal-yes:hover,
.btn-signal-no:hover {
  opacity: 0.8;
}