body{
    margin: 0;
    background: #F0F3F5;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;

}

::selection {
    background-color: #00469d;
    color: #f45f0a;
    
}

.mainpage {
    background: #F0F3F5;
    display: flex;
}

.nav {
    background: #282D37  ;
    height: 100vh;
    width: 70px;
    text-align: center;
    position: fixed;
    display: flex;
    align-items: start;
    justify-content: center;
    padding-top: 100px;
}

.nav li {
    margin-bottom: 16px;
    transition: 1s;
    border-radius: 30px;
    padding: 3px;
    
}

.nav li:last-child {
    margin-top: 50px;
    
}

.nav li:hover {
    background: #f45f0a;
    transition: 0.1s;
    
}

.nav li img{
    width: 40px;
    
}

.pagecontent {
    width: 100%;
    margin-left: 70px;
    padding: 0 15px 15px 15px;
    
}

.header {
    position: fixed;    
    background: #F0F3F5;
    width: 100%;
    padding-top: 25px;
    z-index: 10000;
}

.actionbuttons {
    padding:  3px 3px 3px 0;
    display: flex;
    margin-bottom: 3px;
    
}

.actionbutton{
    background: #3C414B  ;
    padding: 5px 13px ;
    margin-right: 13px;
    width: 50px;
    color: white;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    transition: 1s;

}

.actionbutton.redhover:hover{
    background: #EC0016;
    width: 70px;
    transition: 0.3s;

}

.actionbutton:hover{
    background: #00469d;
    width: 70px;
    transition: 0.3s;
}

.header span{
    margin: 0;
    padding: 0;
}

.red {
    background: #EC0016 ;
}

.yellow {
    background: #FFD800;
}

.orange {
    background: #f45f0a;
}

.content{
    margin-top: 115px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}

h1 {
    color: #282D37;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

h2 {
    color: #282D37;
    font-size: 15px;
    font-weight: bold;
}

.null {
    background: #45818E;
}

.one,
.emFrei {
    background: #93C47D;
}

.two {
    background: #6AA84F;
}

.three {
    background: rgb(235, 220, 12);
    color:#000;
}

.four {
    background: #CC0000;
}

.five {
    background: #76A5AF;
}

.six {
    background: #95a5a6;
}

.seven {
    background: #EA9999;
}

.eight {
    background: #B4A7D6;
}

.nine {
    background: #B6D7A8;
}

/*** STARTSEITE ***/
.flexcontainer {
    display: flex;
}

.uebersicht {
    width: 100%;
    padding-right: 10px;
}

.einsatzmittel {
    width: 70%;
    border-left: solid 1px #c1c1c1;
    padding-left: 10px;
    max-width: 650px;
}

.fahrzeuginfo{
    
    width: 100%;
    padding: 0 0 2px 5px;
}

.fahrzeuginfo.dark {
    background:#D7DCE1  ;
}

.fahrzeuginfo.choose{
    border: 3px solid #EC0016;
}

.bezeichnung {
    font-weight: bold;
    font-size: 19px;
}

.status {
    width: 20%;
    display: flex;
    align-items: center;     /* vertikal zentrieren */
    justify-content: center; /* optional: horizontal zentrieren */
    font-size: 30px;
    font-weight: 500;
}

.platzhalter-15{
    margin-bottom: 15px;
}

.platzhalter-50 {
    margin-bottom: 50px;
}

.solid-box {
    border: 1px solid #c1c1c1;
}

table, th, td {
  border: 1px solid #c1c1c1;
  border-collapse: collapse;
}

.einsatzanzeige{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

.einsatzanzeige thead {
    background: #D7DCE1   ;
}

.einsatzanzeige thead tr th{
    padding: 3px 0;
}

.einsatzanzeige tbody tr td{
    padding: 5px 0;
}

.sprechwunschanzeige {
    width: 100%;
    border: none;
}

.sprechwunschanzeige tbody tr td{
    padding: 3px 0;
    border: none;
}

.sprechwunschanzeige .wert {
    font-weight: bold;
}

.breite-100px {
    width: 100px;
}

.breite-200px {
    width: 300px;
}

/*** EINSATZ ***/
.dataeinsatz{
    width: 100%;
    border-left: solid 1px #c1c1c1;
    padding-left: 10px;
}

.buttonfeldEinsatzAdd{
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px  ;
    column-gap: 20px;
    row-gap: 20px;
}

.buttonfeldEinsatzAdd input[type=submit],
.buttonfeldEinsatzAdd button{
    
    padding: 3px 30px;
    border-radius: 5px;
    background: rgb(231, 234, 255);
    letter-spacing: 2px;
    font-size: 18px;
    border: 1px solid;
    cursor: pointer;
    min-height: 40px;
    min-width: 40px;
}

.buttonfeldEinsatzAdd input[type=submit].btnspeicher {
    background: #B6D7A8 url(../../pics/symbole/dark/speichern_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnkoordinaten {
    background: #D7DCE1 url(../../pics/symbole/dark/pin_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnabfrage {
    background: #D7DCE1 url(../../pics/symbole/dark/abfrage_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnaao {
    background: #C2A1C7  url(../../pics/symbole/dark/aao_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnfahrzeugauswahl {
    background: #D7DCE1 url(../../pics/symbole/dark/truck_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnmassnahmenauswahl {
    background: #D7DCE1 url(../../pics/symbole/dark/massnahme_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btneortanzeigen {
    background: #D7DCE1 url(../../pics/symbole/dark/eort_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnalarmieren {
    background: #E06666 url(../../pics/symbole/dark/alarm_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnpdf {
    background: #D7DCE1 url(../../pics/symbole/dark/pdf_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnmaskeleeren {
    background: #D7DCE1 url(../../pics/symbole/dark/leeren_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btneinsatzbeenden {
    background: #D7DCE1 url(../../pics/symbole/dark/beenden_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btneinsatzduplizieren {
    background: #D7DCE1 url(../../pics/symbole/dark/einsatz_doppel_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btneinsatzsenden {
    background: #D7DCE1 url(../../pics/symbole/dark/gezielt_senden_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnfinish {
    background: #D7DCE1 url(../../pics/symbole/dark/finish_dark.svg) no-repeat center;
}

.buttonfeldEinsatzAdd input[type=submit].btnarchiv {
    background: #D7DCE1 url(../../pics/symbole/dark/archiv_dark.svg) no-repeat center;
}


.flexcontainer input,
.flexcontainer select{
    background: mediumturquoise;
    width: 100%; 
    padding: 5px 5px;
    border: solid 1px #3C414B;
    height: 36px;
}

.flexcontainer textarea{
    width: 100%;
    resize: none;
    padding: 5px 5px;
    border: solid 1px #3C414B;
    height: 120px;
}

.platzhalterhorizontal-20 {
    width: 20px;
}



.flexcontainer input.yellow,
.flexcontainer select.yellow, 
.flexcontainer textarea.yellow {
    background: #FFE599;
}

.flexcontainer input.green {
    background: #B6D7A8;
}

.flexcontainer input.orange,
.flexcontainer textarea.orange {
    background: #F9CB9C;
}

.flexcontainer input.violet {
    background: #B4A7D6;
}

.flexcontainer input.blau {
    background: #A2C4C9;
}

.flexcontainer input.white,
.flexcontainer select.white  {
    background: #D7DCE1 ;
}

.flexcontainer input.rot {
    background: #FA9090;
}


.emAusgewaehlt{
    background: #f1f;
}

.emZeitueberschreitung {
    background: #FFE599;
}

.emAlarmiert {
    background: #E06666;
}

.symboleEmAusgewaehlt {
    background:  url(../../pics/symbole/dark/zugeteilt_dark.svg) no-repeat center;
}

.symboleEmAlarmiert {
    background:  url(../../pics/symbole/dark/erfolg_dark.svg) no-repeat center;
}

.symboleEmZeitueberschreitung {
    background:  url(../../pics/symbole/dark/zeitueberschreitung_dark.svg) no-repeat center;
}

.gridFahrzeugUebersicht {
    display: grid;
    grid-template-columns:  auto auto auto auto;
    column-gap: 10px;
    row-gap: 10px;
}

.wachencontainerFahrzeugUebersicht{
    border-right: 1px solid #c1c1c1;
    padding-right: 10px;
}

.wachencontainerFahrzeugUebersicht:last-child {
    border: none;
}

.einsatzinfoconatiner {
    width: 100%;
    height: 40vh;
    border: 1px solid #c1c1c1;
    padding: 5px;
    overflow-y: auto;
}

/** Einstellungen **/
.einstellungsmenue li {
    border-bottom: solid 1px #c1c1c1;
    padding: 5px;
    margin-bottom: 10px;
}

.einstellungsmenue li:hover {
    font-weight: bold;
}

#map{
    width: 100%;
    height: 80vh;
}



/* assets/css/style.css */

.autocomplete-wrapper {
    position: relative;
}

.vorschlaege-liste {
    position:         absolute;
    top:              100%;
    left:             0;
    right:            0;
    background:       white;
    border:           1px solid #ddd;
    border-radius:    6px;
    box-shadow:       0 4px 12px rgba(0,0,0,0.1);
    z-index:          100;
    max-height:       250px;
    overflow-y:       auto;
}

.vorschlag-eintrag {
    padding:          10px 14px;
    cursor:           pointer;
    display:          flex;
    flex-direction:   column;
    gap:              2px;
}

.vorschlag-eintrag:hover {
    background:       #f0f3f5;
}

.vorschlag-eintrag strong {
    font-size:        14px;
    color:            #282D37;
}

.vorschlag-eintrag span {
    font-size:        12px;
    color:            #666;
}


/*** EINSTELLUNGEN ***/
.tab-navigation{
    margin-bottom: 10px;
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 10px;
}

.tab-btn {
    background: #D7DCE1 ;
    border: 1px solid #c1c1c1;
    padding: 5px 10px;
    margin-right: 10px;
}

/* Grid für Wachen */
.gridFahrzeugUebersicht {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 16px;
}

/* Wachen-Container */
.wachencontainerFahrzeugUebersicht {
    background: #F0F3F5 ;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.wachencontainerFahrzeugUebersicht h2 {
    font-size: 15px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #AFB4BB   ;
}

/* Fahrzeug-Karte */
.fahrzeugkarte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    border: 1px solid #AFB4BB   ;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    text-decoration: none;
    color: inherit;
}

.fahrzeugkarte:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.fahrzeuginfo .bezeichnung {
    font-size: 14px;
    font-weight: bold;
}

.fahrzeuginfo .funkkenner {
    font-size: 12px;
    color: #666;
}

/* Status-Box */
.status {
    width: 40px;
    height: 41px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status .fms {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

/* Statusfarben */
.zero  { background: #45818E; }
.one   { background: #93C47D; }
.two   { background: #6AA84F; }
.three { background: rgb(235, 220, 12); }
.four  { background: #CC0000; }
.five  { background: #76A5AF; }
.six   { background: #95a5a6; }
.seven { background: #EA9999; }
.eight { background: #B4A7D6; }
.nine  { background: #B6D7A8; }

/* Modal Info-Blöcke */
.modal-info-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modal-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
}

.modal-wert {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}