.gridMain {    
    display: grid;
    gap: 10px;
    grid-template-areas: 
                        "box1 box1 box1 box1"
                        "box2 box2 box3 box3"
                        "box6 box6 box6 box6"
                        "box4 box4 box5 box5"
                        "box7 box7 box8 box8";   
}
.gridMainKunde {    
    display: grid;
    gap: 10px;
    grid-template-areas: 
                        "box1 box1"
                        "box2 box2"
                        "box4 box4"
                        "box10 box10"
                        "box3 box3"
                        "box5 box5"
                        "box6 box7"
                        "box9 box8";   
}

.layoutMain {    
    display: grid;
    grid-template-columns:  1fr 4fr;
    justify-content: space-evenly;
    gap: 20px;
    
}

.logingrid {
    padding: 0.5rem;
    margin: 0.5rem;
}

.buttonLogIn {
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
}


.gridBox1 {
    grid-area: box1;
    }
.gridBox2 {
    grid-area: box2;
    }
.gridBox3 {
    grid-area: box3;
    }
.gridBox4 {
    grid-area: box4;
    }
.gridBox5 {
    grid-area: box5;
    }
.gridBox6 {
    grid-area: box6;
    }
.gridBox7 {
    grid-area: box7;
    }
.gridBox8 {
    grid-area: box8;
    }
.gridBox9 {
    grid-area: box9;
    }
.gridBox10 {
    grid-area: box10;
    }
/* headIntern - Logo positionieren und Head als Flex definnieren */
.topbar {
    display: flex;
    justify-content: space-between;
    gap: 20%;
    background-color: #DDC7B0;
    border-radius: 0.5rem;
}
.topbar h2 {
    margin-top: 0.5em;
    font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1600 - 320)));
}

.topbar .logo {
    margin: 0.3rem 0 0.1rem 0.3rem;
}

/* Table Contect seitlich scrollbar machen */
.tableContent {
    height: 70vh;
    width: 95%;
    overflow: scroll;
}

td {
    border-bottom: 0.05rem solid black;
}
/* Kundenkarte Stylen */
.kundenkarte {
    border: 2px solid rgba(238, 231, 231, 0.949);
    border-radius: 1rem;
    padding: 10px;
    margin-top: 0.5rem;
}

.kundenkarte p {
    padding: 0.8rem;
    border-radius: 10px;
}
/* mit nth-of-type(odd) wird jedes ungerade Kindelement angesprochen 1tes 3tes usw */
.kundenkarte p:nth-of-type(odd) {
    background: lightgray;
  }
/* mit nth-of-type(even) wird jedes ungerade Kindelement angesprochen 2tes 4tes usw */
.kundenkarte p:nth-of-type(even) {
    background: rgb(213, 217, 223);
  }

/* Responisve Screen modification */


@media screen and (max-width: 850px) {
    .layoutMain {     
        display: grid;
        grid-template-columns:  30% 70%;
        justify-content: space-evenly;
        gap: 5px;        
    }
    .buttonLogIn {
        display: block        
    }
    .gridMain {
        display: block;
    }
}

@media screen and (max-width: 430px) {
    .layoutMain {     
        display: flex;
        flex-wrap: wrap;
        
        gap: 5px;        
    }
    .buttonLogIn {
        display: block        
    }
    .gridMain {
        display: block;
    }
    .logingrid {
        width: 100%;
    }
    .auswahlBox {
        width: 100%;
    }
    .topbar {
        justify-content: initial;
        gap: 10%;
    }
    .block1 {
        width: 100%;
    }
    .formbox:has(button) {
        display: flex;
        justify-content: space-evenly;
    }
}