.page {
    position: relative;
    display: flex;
    flex-direction: column;
     /* background-image: linear-gradient(180deg, rgb(77, 77, 77) 0%, #ff0000 70%); */
     background-color: #00000085;
     color: white;
     border-color: #d30000;
     user-select: none;
 

}
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 0.75fr;  /* Oben 3 Spalten */
        grid-template-rows: 3fr 2fr 2fr;        /* Unten 2 Reihen */
        grid-gap: 5px;
        grid-template-areas:
            "logo time-date vehicles"
            "appointments weather vehicles"
            "appointments footer vehicles";
        padding: 20px;
        border-style: solid;
        border-color: black;
       background-color: rgb(12, 12, 123);
       color:white;
       height: 100vh;
       width: 100%;
         border: solid;
    border-color: #000000;
        user-select: none;

    }
.fullscreen{
    z-index: auto;
    margin-top: 0px;
    height: 25px;
    width: 105px;
    text-align: center;
}
    .logo {
        grid-area: logo;
    border-radius: 15px;
    margin-top: -250px;
    overflow: hidden;
    }

    .time-date {
        grid-area: time-date;
        width: auto;
        text-align: center;
          border: solid;
    border-color: #000000;
    border-radius: 15px;
      /* nur vertikales Scrollen erlauben */
  overflow-y: auto;
  overflow-x: hidden;
    scroll-behavior: smooth;
    }

    .stations {
        grid-area: station;
        text-align: center;
          border: solid;
    border-color: #000000;
    border-radius: 15px;

        
    }

    .appointments {
        grid-area: appointments;
            color: rgb(255, 255, 255)!important; 
    background-color: rgb(12, 12, 123) !important; 
    border: solid;
    border-color: #d30000;
    border-radius: 15px;
    border-style: solid;
    text-align: center;
     overflow: hidden;
    margin-top: -185px;
    }

.weather {
    grid-area: weather; /* Sicherstellen, dass es im richtigen Bereich ist */
    display: flex; /* Flexbox für die Anordnung von Bild und Text */
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    background-color: transparent;
   margin-top: -30px;
    height: 250px; /* Höhe des Wetterbereichs */
    font-size: 1rem; /* Schriftgröße */
    color: white;
    text-align: left;
    margin-left: 200px;
}

.weather-info {
    display: flex;
    align-items: center;
    gap: 20px; /* Abstand zwischen Bild und Text */
    width: 100%;
}

.weather-icon {
    width: 150px; /* Setzt die Größe des Wetter-Icons */
    height: 150px;
    margin-left: -50px;
}

.weather-details {
    font-size: 18px;
    color: #fff;
}

.weather-details p {
    margin: 5px 0;
}
        .Wappen{
        height: 80%;
        width: 80%;
        overflow: hidden;
        margin-left: 10%;
        margin-top: 18%;

     
    }
       .WappenHOK{
        height: 200px;
        margin-top: 20px;
          overflow: hidden;

     
    }

 /* Styling für die Fahrzeugliste */
.vehicles {
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Schattierung für die Liste */
    color: rgba(255, 255, 255, 0.289)!important;
    background-color: rgb(12, 12, 123) !important;
    text-align: center;

     height: 355%;
     overflow: hidden;
     scrollbar-color: red;
     margin-top: 0px;
}

/* Stil für die Überschrift der Fahrzeugliste */
.vehicles h5 {
    margin-bottom: 15px;
    color: rgb(255, 255, 255);
    text-align: center;
}

.vehicles ul {
    list-style: none;
    padding: 0;
    background-color: transparent;
}

.vehicles li {
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    margin-bottom: 8px;  /* Kleineren Abstand zwischen den Einträgen */
    padding: 8px 12px;  /* Weniger Polsterung für schmalere Listeneinträge */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Leichte Schatten für jede Zeile */
    color: #0f0000; /* Schwarze Schrift */
    width: 100%; /* Die Listeneinträge sollen die gesamte verfügbare Breite nutzen */
    max-width: 400px; /* Maximalbreite für eine schmalere Anzeige */
   
    margin-left: auto;
    margin-right: auto; /* Zentriert die Liste auf der Seite */
}

/* Flexbox-Eigenschaft für die Spalten */
.vehicles li span {
    flex: 1;
    padding: 0 10px;
}

/* Trenner zwischen den Feldern */
.vehicles li span:not(:last-child) {
    border-right: 2px solid #030303; /* Grafische Trennung der Felder */
}

/* Styling für einzelne "Felder" */
.status, .funkrufname, .kennzeichen, .fahrzeugtyp {
    font-weight: bold;
}

/* Styling für den Status */
.status {
    color: rgb(186, 12, 47); /* Grün für Fahrzeugstatus */
}

/* Styling für den Funkrufnamen */
.funkrufname {
    color: rgb(186, 12, 47); /* Blau für den Funkrufnamen */
}

/* Styling für das Kennzeichen */
.kennzeichen {
    color: rgb(186, 12, 47); /* Orange für das Kennzeichen */
}

/* Styling für den Fahrzeugtyp */
.fahrzeugtyp {
    color: rgb(186, 12, 47); /* Grau für Fahrzeugtyp */
}

.priority-low {
        background-color: lightgreen; /* Grün */
        color: darkgreen;
           font-weight: bold;
           border-radius: 15px;
     border: #059b00;
     border-style: solid;
    }

    .priority-medium {
        background-color: lightyellow; /* Gelb */
        color: darkorange;
           font-weight: bold;
         border-radius: 15px;
     border: #a54e03;
     border-style: solid;
    }

    .priority-high {
       background-color: white;
    color: red;
    font-weight: bold;
     border-radius: 15px;
     border: #000000;
     border-style: solid;
    }

    .footer {
        grid-area: footer;
        text-align: center;
                  border: solid;
    border-color: transparent;
    overflow: auto;
    margin-top: -200px;
    height: 228px;
    width: 800px;
    margin-left: 350px;
    margin-top: -250px;
    }
.Dienstbuch-Button{
    color: black;
    z-index: 1000;
    margin-top: -200px;
    overflow: auto;
    background-color: white;
    border: Black;
    border-style: solid;
    border-radius: 15px;
}

    .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: rgb(0, 0, 0);
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: rgb(255, 0, 0);
}

.form-group {
    margin-bottom: 15px;
}

.bg-dark {
  background-color:  rgba(12, 12, 123, 0.641) !important;
  border: solid;
  border-color: black;
}


.text-white {
  color: #f2f2f2 !important;
}

/* Für WebKit-Browser (Chrome, Edge, Safari, Opera) */
.time-date::-webkit-scrollbar {
  width: 8px;               /* Dicke der Scrollleiste */
  height: 8px;              /* Höhe (für horizontal scrollende Elemente) */
}

.time-date::-webkit-scrollbar-track {
  background: #2e2e2e;      /* Farbe der „Schiene“ */
  border-radius: 4px;
}

.time-date::-webkit-scrollbar-thumb {
  background-color: #6c757d; /* Farbe des „Daumens“ */
  border-radius: 4px;
  border: 2px solid #2e2e2e; /* Abstand um den Daumen herum */
}

.time-date::-webkit-scrollbar-thumb:hover {
  background-color: #5a6268; /* Daumen-Hover-Farbe */
}

/* Für Firefox */
.time-date {
  scrollbar-width: thin;            /* Optionen: auto, thin, none */
  scrollbar-color: #6c757d #2e2e2e; /* Daumen-Farbe, Schiene-Farbe */
}
.card-title{
color: White;
font-style: bold;
font-size:large;
font-weight: bolder;
}

.btn_date{
    color:black;
    border: Black;
    border-radius: 10px;
    border-style: solid;
}
.btn_datehover{
    color:rgb(255, 0, 0) !important;
    border: Black;
    border-radius: 10px;
    border-style: solid;
}