body{
     font-size: 16px;
     /* font-family: arial, sans-serif; */
     /* font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;  */
     font-family: 'Roboto', sans-serif;
     background:#ccc;
     position: relative;
}

input {     
     padding: 10px 3px;
     font-size: 1rem;
     border-radius: 0.3rem;
     border: 1px solid #cecece;
     outline: none;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset,
     0 1px 0 rgba(255, 255, 255, 0.2);
     transition: all 250ms ease-in-out;
     -webkit-transition: all 250ms ease-in-out;
}

input:hover {
     border: 1px solid #9d9d9d;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) inset;
}

input:focus {
     border-color: #7096ab;
     box-shadow: 0 1px 5px rgba(115, 150, 171, 0.8) inset;
}

select {
     height: 2rem;
     padding: 3px;
     font-size: 1rem;
     border-radius: 0.3rem;
     border: 1px solid #cecece;
     outline: none;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset,
     0 1px 0 rgba(255, 255, 255, 0.2);
     transition: all 250ms ease-in-out;
     -webkit-transition: all 250ms ease-in-out;
}

label {
     font-size: 1.2rem;
     /* font-weight: bold; */
     color: #333;
     text-shadow: 0.2rem 0.2rem 1rem grey;
}

button {
     padding: 0 0.5em;
     font-size: 0.8em;
     font-weight: bold;
     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
     border: 1px solid #b6b6b6;
     border-radius: 3px;
     color: #4f4f4f;
     cursor: pointer;
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
     background: -webkit-linear-gradient(top, #ededed 30%, #c4c4c4 100%);
     transition: all 150ms ease-in-out;
     -webkit-transition: all 150ms ease-in-out;
}

button:hover {
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.8);
     border: 1px solid #9d9d9d;
     color: #1c4257;
}

button:focus {
     border-color: #7096ab;
     background: -webkit-linear-gradient(top, #88bee8 30%, #0084cb 100%);
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.8);
     outline: none;
}


/* ########################### */
/* #### First Info Box ####### */
/* ########################### */
#overlay_firstInfo{
     display: block;
     opacity: 0.6;
     z-index: 1;
     background: #ccc;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
     backdrop-filter: blur(5px);
}

#firstInfo{
     /* display: block; */
	 opacity: 0;
     z-index: 2;
     position: fixed;
     width: 18rem;
     height: 33rem;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #ddd;
     border: 3px solid #aaa;
     border-radius: 0.8rem ;
     box-shadow: 5px 5px 15px 5px #000000;
     animation-name: zoomIn;
     animation-duration: 1000ms;
     animation-delay: 800ms;
     animation-fill-mode: forwards;    
}


@keyframes zoomIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

#firstInfo_header{
     position: relative;
     width: 16rem;
     height: 3.5rem;
     background: rgb(25, 117, 53);
     background-color: #ddd;
     left: 0.5rem;
     top: 0.5rem;
     border-radius: 0.5rem;
     font-size: 1.4rem;
     padding-left: 0.1rem;
     font-weight: bold;
     color: red;
}

#firstInfo_info{
     position: relative;
     width: 15rem;
     height: 7rem;
     top: 1rem;
     left: 1rem;
     font-size: 1rem;
     text-align: justify;
     color: black;
     
}

/* #firstInfo_icon { */
     /* position: relative; */
     /* top: 1.2rem; */
     /* width: 4rem; */
     /* height: 4rem; */
     /* margin: 0 auto; */
     /* background: salmon; */
     /* border-radius: 50%; */
/* } */

/* #firstInfo_icon img { */
     /* position: absolute; */
     /* margin: auto; */
     /* top: 0; */
     /* left: 0; */
     /* right: 0; */
     /* bottom: 0; */
/* } */

#firstInfo_Ok{
     position: relative;
     width: 3.5rem;
     height: 3rem;
     left: 14rem;
     top: 18.5rem;
     font-size: 1rem;
     /* text-align: center; */
}

/* #firstInfo_Ok:active{ */
     /* animation-name: zoomOut; */

/* } */

@keyframes zoomOut {
     0% { opacity: 1; }
     50% { opacity: 0.1; }
     100% {  left: -20rem; }
}




/* ####################### */
/* #### Checkboxen ####### */
/* ####################### */

/* The container */
.chkCont {
     display: block;
     position: relative;
     padding-left: 20px;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 1.2rem;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
   
   /* Hide the browser's default checkbox */
   .chkCont input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
   }

 /* Create a custom checkbox */
.checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 1.2rem;
     width: 1.2rem;
     background-color: silver;
   }
   
   /* On mouse-over, add a grey background color */
   .chkCont:hover input ~ .checkmark {
     background-color: #ccc;
   }
   
   /* When the checkbox is checked, add a blue background */
   .chkCont input:checked ~ .checkmark {
     background-color: #2196F3;
   }
   
   /* Create the checkmark/indicator (hidden when not checked) */
   .checkmark:after {
     content: "";
     position: absolute;
     display: none;
   }
   
   /* Show the checkmark when checked */
   .chkCont input:checked ~ .checkmark:after {
     display: block;
   }
   
   /* Style the checkmark/indicator */
   .chkCont .checkmark:after {
     left: 6px;
     top: 2px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
   }



/* ####################### */
/* #### Radio Buttons #### */
/* ####################### */


   /* The container */
.radioCont {
     display: block;
     position: relative;
     padding-left: 35px;
     margin-top: 12px;
     cursor: pointer;
     font-size: 22px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
   
   /* Hide the browser's default radio button */
   .radioCont input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
   }
   
   /* Create a custom radio button */
   .radiomark {
     position: absolute;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;
     background-color: silver;
     border-radius: 50%;
   }
   
   /* On mouse-over, add a grey background color */
   .radioCont:hover input ~ .radiomark {
     background-color: #ccc;
   }
   
   /* When the radio button is checked, add a blue background */
   .radioCont input:checked ~ .radiomark {
     background-color: #2196F3;
   }
   
   /* Create the indicator (the dot/circle - hidden when not checked) */
   .radiomark:after {
     content: "";
     position: absolute;
     display: none;
   }
   
   /* Show the indicator (dot/circle) when checked */
   .radioCont input:checked ~ .radiomark:after {
     display: block;
   }
   
   /* Style the indicator (dot/circle) */
   .radioCont .radiomark:after {
         top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
   }


/* ####################### */
/* #### Application #### */
/* ####################### */



    .container{      
     box-sizing: border-box;  
     margin: 0 auto; 
     /* position: absolute; */
     padding-left: 1rem;
     padding-right: 1rem;
     max-width: 400px;
     /* width: 90%;      */
     /* left: 5%; */
     background:#eee;
     border-radius: 3px;
     display: grid;
     justify-self: center;
     align-items: center;
     justify-items: start;
     gap: 1rem;
     grid-template-columns: 1fr;
     grid-template-rows: 7rem 3rem 3rem 5rem 5rem 5rem 5rem 5rem 5rem 7rem 2rem 2rem 11rem 5rem auto 10rem ;
     grid-template-areas:
          "picture"
		  "flags"
          "header"
          "geraet"
          "inventarnummer"
          "seriennummer"          
          "geraetefahrer"
          "betriebsstunden"
          "baustelle"
          "regel1"
          "kalenderwoche"
          "wochentage"
          "maengel"
          "rueckruf"
          "fotos"
          "senden";
     
    }

    #picTeamsWork{
         grid-area: picture;
         margin-top: 1rem;
         width: 100%;         
    }

    #wrapHeader{
          grid-area: header;
          width: 100%;
          align-self: start;  
          display: flex;
          justify-content: center;                   
     }   
     
     #wrapHeader > label{
          font-size: 1.5rem;
          font-weight: bold;
          color: red;             
     }

    #wrapGeraet{
         grid-area: geraet;
         width: 100%;
         /* background: lime; */
    }

    #wrapGeraet > input{
         width: 90%;
    }

    #wrapInventarnummer{
         grid-area: inventarnummer;
         width: 100%;
    }

    #wrapInventarnummer > input{
     width: 90%;
}

    .invnr{
         width: 1.2rem;
    }

    #wrapSeriennummer{
         grid-area: seriennummer;
         width: 100%;
    }

    #wrapSeriennummer > input{
         width: 90%;
    }    

    #wrapGeraetefahrer{
         grid-area: geraetefahrer;
         width: 100%;
    }

    #wrapGeraetefahrer > input{
     width: 90%;
     }

     #wrapBetriebsstunden{
          grid-area: betriebsstunden;
          width: 100%;
     }
 
     #wrapBetriebsstunden > input{
          width: 90%;
     }

     #wrapBaustelle{
          grid-area: baustelle;
          width: 100%;
     }
 
     #wrapBaustelle > input{
      width: 90%;
      }

    #wrapRegel1{
         grid-area: regel1;
         align-self: end;
         width: 95%;
         /* background: #fff; */
         padding: 0.5rem;
         /* box-shadow: 0 10px 10px -5px; */
    }

    #wrapKalenderwoche{
         grid-area: kalenderwoche;
         width: 100%;
         align-self: start;
    }

    #wrapKalenderwoche > select{
     width: 100%;
     height: 2rem;
     font-size: 1.2rem;
     }

    #wrapWochentage{
         grid-area: wochentage;
         width: 100%;
         display: flex;
         justify-content: space-between;
    }
   

    #wrapMaengel{
         grid-area: maengel;
         width: 100%;
    }

    #wrapMaengel > textarea{
         width: 100%;
         height: 7rem;
         font-size: 1.2rem;
         
    }

    #wrapRueckruf{
         grid-area: rueckruf;
         width: 100%;
    }

    #wrap_InputFiles{
     grid-area: fotos;
     width: 100%;
}

    #wrapSenden{
         grid-area: senden;
         width: 100%;
    }

    #wrapSenden > button{
         width: 100%;
         height: 3rem;
         font-size: 1.5rem;
    }
	
	
/* ####################### */
/* #### Warungsplan-Button #### */
/* ####################### */


	#btnShowMaintenance {
		 display: none;
		 position: fixed;
		 bottom: 6.5rem;
		 right: 0.8rem;
		 width: 4rem;
		 height: 4rem;
		 background: white;
		 border: 2px solid grey;
		 border-radius: 50%;
		 box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5);
	}

	#btnShowMaintenance img {
		 position: absolute;
		 margin: auto;
		 top: 0;
		 left: 0;
		 right: 0;
		 bottom: 0;
	}



/* ####################### */
/* #### Foto-Button #### */
/* ####################### */


     #btnTakePhoto {
          position: fixed;
          bottom: 1.5rem;
          right: 0.8rem;
          width: 4rem;
          height: 4rem;
          background: salmon;
		  border: 2px solid grey;
          border-radius: 50%;
          box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5);
     }

     #btnTakePhoto img {
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
     }
	 	 
/* ####################### */
/* #### Maintenance Plan #### */
/* ####################### */

     #overlay_frmMaintenancePlan{
          display: none;
          opacity: 0.6;
          /* z-index: 1; */
          background: #ccc;
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          backdrop-filter: blur(5px);
     }

     #frmMaintenancePlan{
          display:none;
          /* opacity: 0; */
          position: fixed;

          width: 92vw;
          height: 80vh;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #eee;
          border: 3px solid grey;
          border-radius: 0.3rem;
          padding: 0.4rem;
          box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5);
          overflow: auto;
     }

     #maintenancePlan{
          opacity: 0;
     }

     #btnMaintenancePlan_close{
          /* position: absolute; */
          /* right: 1rem; */
          width: 8rem;
          height:2.5rem;
		  float: right;
		  font-size: 1rem;
          font-weight: bold;
          background: salmon;
          
     }
  
  
  
/* ####################### */
/* #### Sending Spinner #### */
/* ####################### */

#overlay_sendingSpinner{
     display: none;
     opacity: 0.6;
     z-index: 0;
     background: #ccc;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
     backdrop-filter: blur(5px);
}

#sendingHeader{
     display: none;
     position: fixed;
     top: 50%;
     margin-top: -170px;
     margin-left: 20px;;
     font-size: 1.1rem;
     font-weight: bold;

}

#sendingSpinner {
     display: none;
     position: fixed;
     /* left: 50%;  */
     /* top: 50%; */
     width: 10rem;
     height: 10rem;
     /* margin-top: -130px; */
     /* margin-left: -70px; */
     left: 25%;
     top: 30%; 
     transform: translate(-50%, -50%);
     border: 16px solid #f3f3f3; /* Light grey */
     border-top: 16px solid blue;
     border-right: 16px solid green;
     border-bottom: 16px solid red;
     border-left: 16px solid pink;
     border-radius: 50%;
     animation: spin 4s linear infinite;
     z-index: 2;
}

@keyframes spin {
     0% {
          transform: rotate(0deg);
     }
     100% {
          transform: rotate(360deg);
     }
}

#sendingStatus{
     display: none;
     position: fixed;
     left: 50%; 
     top: 50%;
     width: 100px;
     height: 40px;
     margin-top: -60px;
     margin-left: -30px;
     text-align: center;
     font-size: 2rem;
     font-weight: bold;    

}




/* NEU: Styling für den Flaggen-Container (angenommen er hat die ID #wrapFlags) */
    #wrapFlags {
        grid-area: flags;
        width: 100%;
        display: flex;
        justify-content: space-between; /* Zentriert die Flaggen horizontal */
        align-items: center;
        gap: 1rem; /* Abstand zwischen den Flaggen */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    /* NEU: Styling für die Flaggenbilder selbst (optional, für gute Darstellung) */
    #wrapFlags img {
        height: 2.2rem; /* Größe der Flaggen */
        width: 3.5rem;
        object-fit: cover;
        cursor: pointer;
        border-radius: 0.25rem;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #ddd;
    }
    
    #wrapFlags img:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }

 /* Grundstil für den Flaggen-Container */
        #language-selector {
            display: flex;
            justify-content: center;
            gap: 10px;
            padding: 10px 0;
            margin-top: 10px; /* Abstand unter dem Bild */
        }
        /* Stil für die Flaggen-Buttons */
        .flag-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            margin: 0;
            width: 32px; 
            height: 24px;
            line-height: 0;
            border-radius: 3px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: transform 0.1s, box-shadow 0.1s;
        }
        .flag-button:hover {
            transform: translateY(-8px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        .flag-button.active {
            border: 2px solid #3b82f6; /* Markierung der aktiven Sprache */
            box-shadow: 0 0 5px #3b82f6;
        }
        /* Inline SVG Flags (vereinfacht) */
        .flag-icon {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 3px;
        }
        /* Beispiel-Stil für Deutsch (Schwarz-Rot-Gold) */
        .flag-de .bar1 { fill: #000000; }
        .flag-de .bar2 { fill: #FF0000; }
        .flag-de .bar3 { fill: #FFCC00; }
        /* Beispiel-Stil für Englisch (Union Jack - hier vereinfacht auf Rot/Weiß/Blau) */
        .flag-en .bar1 { fill: #012169; }
        .flag-en .bar2 { fill: #C8102E; }
        .flag-en .bar3 { fill: #FFFFFF; }
        /* Beispiel-Stil für Polen (Weiß-Rot) */
        .flag-pl .bar1 { fill: #FFFFFF; }
        .flag-pl .bar2 { fill: #DC143C; }
        /* Beispiel-Stil für Tschechien (Weiß-Rot mit blauem Keil) */
        .flag-cz .bar1 { fill: #FFFFFF; }
        .flag-cz .bar2 { fill: #D7141A; }
        .flag-cz .bar3 { fill: #11457E; }
        /* Beispiel-Stil für Rumänien (Blau-Gelb-Rot) */
        .flag-ro .bar1 { fill: #002B7F; }
        .flag-ro .bar2 { fill: #FCD116; }
        .flag-ro .bar3 { fill: #CE1126; }
        /* Beispiel-Stil für Ukraine (Blau-Gelb) */
        .flag-uk .bar1 { fill: #005BBB; }
        .flag-uk .bar2 { fill: #FFD500; }