body {
    font-family:            Arial, sans-serif;
    font-size:              16px;
/*    display:                flex; */
    justify-content:        center;
    align-items:            center;
    height:                 100vh;
    margin:                 0;
    background:             no-repeat url("../img/UKJ_Logo_klein.png");
    background-position:    center top 10px;
    background-color:      #f4f4f9;

    display:                grid;
    grid-template-rows:     repeat(4, auto);
    grid-template-columns:  1fr 20rem 1fr;
    grid-template-areas:
                            "header header header"
                            "subheader subheader subheader"
                            "side1 main side2"
                            "footer footer footer";    
}

.header {
    grid-area:              header;
    min-height:             180px;
    text-align:             center;
    padding:                1rem;     
}

.subheader {         
    grid-area:              subheader;
    color:                  coral;
    text-align:             center;
    font-size:              2rem;
    padding:                1rem;     
}

.side1 {
    grid-area:              side1;
    padding:                1rem;
}

.main {
    grid-area:              main;
/*    padding:                1rem; */
    text-align:             center;     
}

.side2 {
    grid-area:              side2;
    padding:                1rem; 
}   

.footer {
    grid-area:              footer;
    text-align:             center;
    padding:                1rem;
}

.form-container {
    align-items:            center;
    width:                  20rem;
}

.username-input {
    width:                  19rem; 
    height:                 40px;
    margin-bottom:          20px; 
    padding:                5px;
    font-size:              1.5rem; 
    border:                 2px solid #ccc;
    border-radius:          5px; 
    outline:                none;
    transition:             border-color 0.3s;
}

.username-input:focus {
    border-color:           #007bff;
}

.textfield {
    margin:        	    10px;
    font-size:              1.0em;
    color:                  darkslateblue;
}

.hinweis {
    margin-top:             0px; 
    margin-bottom:          30px; 
    font-size:              x-large; 
    color:                  brown;    
}

.otp-container {
    width:                  20rem; 
}

.otp-input {
    width:                  2.5rem;
    height:                 3rem;
    text-align:             center;
    font-size:              1.5rem;
    border:                 2px solid #ccc;
    border-radius:          5px;
    outline:                none;
    transition:             border-color 0.3s;
}

.otp-input:focus {
    border-color:       #007bff;
}

/* Für Chrome, Edge und Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance:     none;
    margin:                 0;
}

/* Für Firefox */
input[type="number"] {
    -moz-appearance:        textfield;
}

.submit-button {
    margin-top:             30px;
    padding:                10px 20px;
    font-size:              1rem;
    color:                  #fff;
    background-color:       #007bff;
    border:                 none;
    border-radius:          5px;
    cursor:                 pointer;
    transition:             background-color 0.3s;
    width:                  19rem;
}

.submit-button:hover {
    background-color:   #0056b3;
}

/* für mobile Geräte (maximale Breite von 768px) */
@media screen and (max-width: 768px) {
    body {
        font-size:              14px;
        height:                 80vh;
    }

    .header {
        padding:                0.2rem;     
    }

    .subheader {         
        font-size:              1.5rem;
        padding:                0.2rem;
   	margin-top: 		2rem;	
    }
    
    .textfield {
        margin-top:             0px;
    }
}