@media (max-width: 655px){ /* Grösse: Smartphone */
  body {
    background-color: #55555b;
    }

    .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, 89%);
    gap: 0.3%; /* Abstand zwischen den Kästchen */
    width: 100vw; /* Breite des Containers */
    height:auto; /* Höhe des Containers */
    }

    .image-box {

        grid-column: 1;
        grid-row: 1;
        min-height: 100px;
    }

    .box { 
        grid-column: 2;
    }

    .text-box5, .text-box6{
        font-size: 15px;
    }

     .hover-box {
       
        width: 51%;
        min-height: 100px;
   
     }

     .box2 {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    }
     .box3 {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    }
     .box4 {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    }
     .box5 {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    }
        .hover-box:hover ~.box {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
    }
    .hover-box:hover ~.box2 {
    transform: translateY(177%); /* Schiebe die Boxen nach unten */
    }
    .hover-box:hover ~.box3 {
    transform: translateY(254%); /* Schiebe die Boxen nach unten */
    }
    .hover-box:hover ~.box4 {
    transform: translateY(331%); /* Schiebe die Boxen nach unten */
    }
    .hover-box:hover ~.box5 {
    transform: translateY(408%); /* Schiebe die Boxen nach unten */
    }

    h4{
        font-size: 13px;
    }

    h3{
        font-size: 22px;
    }

    h1{
        font-size: 26px;
    }

    h2{
        font-size: 34px;
    }
}  




                         /* Ende media Smartphone*/












@media (min-width: 655px) and (max-width: 1000px) { /* Grösse: Tablet */
  body {
    background-color: #55555b;
    }

    .container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0.3%; /* Abstand zwischen den Kästchen */
    width: 100vw; /* Breite des Containers */
    height:auto; /* Höhe des Containers */
    }

    .hover-box{
        width: 84%;
      
    }

    .text-box5, .text-box6{
        font-size: 20px;
    }

         .box2 {
    position: relative;
    }
     .box3 {
    position: relative;
    }
     .box4 {
    position: relative;
    }
     .box5 {
    position: relative;
    }


    h1{
    font-size: 29px;
    }

    h4{
        font-size: 17px;
    }

    h3{
        font-size: 33px;
    }

    h2{
        font-size: 39px;
    }

        .hover-box:hover ~.box {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
    }
    .hover-box:hover ~.box2 {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
    }
    .hover-box:hover ~.box3 {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
    }
    .hover-box:hover ~.box4 {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
    }
    .hover-box:hover ~.box5 {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
    }


}       /* Ende media Tablet */












@media (min-width: 1001px){ /* Grösse: Laptop L */
  body {
    background-color: #55555b;
    }

    .container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0.3%; /* Abstand zwischen den Kästchen */
    width: 100vw; /* Breite des Containers */
    height:auto; /* Höhe des Containers */
    }

    .hover-box{
        width: 84%;
        
    }

    .text-box5, .text-box6{
        font-size: 25px;
    }

    h1{
    font-size: 38px;
    }

    h4{
        font-size: 20px;
    }

    h3{
        font-size: 36px;
    }

    h2{
        font-size: 48px;
    }

    .box2 {
    position: relative;
    }
     .box3 {
    position: relative;
    }
     .box4 {
    position: relative;
    }
     .box5 {
    position: relative;
    }

    .hover-box:hover ~.box {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
.hover-box:hover ~.box2 {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
.hover-box:hover ~.box3 {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
.hover-box:hover ~.box4 {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
.hover-box:hover ~.box5 {
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
}     /* ende media Laptop */












a {
    font-family:"Open Sans", sans-serif;
    color: white;
}

h2 {
    font-family:"Open Sans", sans-serif;
    color: white;
}

h1{
font-family: "Open Sans", sans-serif;
color: white;
}

p{
font-family:"Open Sans", sans-serif;
font-size: 44px;
color: yellowgreen;
}

h4{
    font-family: "Open Sans", sans-serif;
        padding: 15px;
        color: white;
}

h3{
    font-family:"Open Sans", sans-serif;
    color: white;
}












           /* Dropdown Menü */

.main-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: auto; /* 11% vom Viewport */
    position: relative;
    width: 100vw;
}
.box {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: #232323;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.5em;
    transition: background-color 0.3s;
    height: 100%;
    transition: transform 0.5s ease;
    font-family: "Open Sans", sans-serif;
}
.box2, .box3, .box4, .box5 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #232323;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.5em;
    transition: background-color 0.3s;
    height: 100%;
    transition: transform 0.5s ease;
    font-family: "Open Sans", sans-serif;
}

.image {
    width: 100%;
    height: 100%;
    border: none;
}
.image-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    text-decoration: none;
    color: #333;
    font-size: 1.5em;
    transition: background-color 0.3s;
    height: 103%;
}
.hover-box {
    position: absolute;
    top: 0;
    right: 0; 
    background: linear-gradient(to bottom, #373737, #232323); /* Hintergrundfarbe */
    text-align: center; /* Text zentrieren */
    justify-content: center;
    transition: transform 0.3s; /* Übergangsgeschwindigkeit */
    z-index: 1; /* Höherer Z-Index als die anderen Boxen */
    height: 9.22vw;
}













                   /* Hovereffekte */

.box:hover {
    background-color: #292929; /* Farbe beim Hover */
}
.box2:hover {
    background-color: #292929; /* Farbe beim Hover */
}
.box3:hover {
    background-color: #292929; /* Farbe beim Hover */
}
.box4:hover {
    background-color: #292929; /* Farbe beim Hover */
}
.box5:hover {
    background-color: #292929; /* Farbe beim Hover */
}

.box:hover{
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
.box2:hover{
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
.box3:hover{
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
.box4:hover{
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}
.box5:hover{
    transform: translateY(100%); /* Schiebe die Boxen nach unten */
}




footer {
    background-color: #232323; /* Hintergrundfarbe */
    color: white;            /* Textfarbe */
    text-align: center;      /* Text zentrieren */
    padding: 15px;          /* Innenabstand */
    position: fixed;         /* Fixierte Position */
    bottom: 0;               /* am unteren Rand */
    left:   0;
    width: 100%;             /* Breite */
    height: 5%;             /* height */
}










          /* Inhaltabschnitt */

.text_and_images{
    display: flex;
    margin-top: 19vh;
    margin-bottom: 60px;
}

.inhalt {
    position: absolute;
    top: 23vh;
    bottom: 17vh;
    background-color: #55555b;
    left: 7px;
    right: 7px;
    display: flex;
    justify-content: center;
    z-index: -1;

}

.titel-box {
    position: relative;
    height: 15%;
    width: 60%;
    display: flex;
    justify-content: center;
    background-color: #55555b;
    align-items: center;
}

/*Bild Startseite*/
.index_image img{ 
    
    height: auto;
    width: auto;
    max-width: 30vw;
    max-height: 400px;
    padding: 5px;
    border-radius: 15px;
    overflow: hidden;
    margin-left: 2vw;
}   

.index_text{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3vw;
    margin-right: 2vw;
}

.steckbrief_text{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8vw;
    margin-right: 12vw;
}

.steckbrief_images img{
    height: auto;
    width: auto;
    max-width: 30vw;
    padding: 5px;
    border-radius: 15px;
    overflow: hidden;
    margin-left: 12vw;
}
  

.hobbys_images{
    display: block;
    align-items: center;
    justify-content: center;
}

.hobby1 img{
    display: flex;
    justify-self: center;
    align-self: center;
}

.hobbys_images img{
    height: auto;
    width: auto;
    max-width: 25vw;
    max-height: 195px;
    padding: 5px;
    border-radius: 15px;
    overflow: hidden;
    margin-left: 2vw;
    justify-content: center;
    align-items: center;
}

.hobbys_text{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3vw;
    margin-right: 2vw;

}

.background{
    background-color: #767676;
    border-radius: 15px;
}
  

.interessen_text{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3vw;
    margin-right: 2vw;

} 

.interessen_images_row1{
    display: block;
    
}

.interessen_images_row2{
    display: flex;
    align-items: center;
    justify-content: center;
}

.interessen_images_row1 img:first-child{
    padding-bottom: 5vh;
}

.interessen_images_row1 img{
    height: auto;
    width: auto;
    max-width: 25vw;
    max-height: 195px;
    padding: 5px;
    border-radius: 15px;
    overflow: hidden;
    margin-left: 2vw;

}   

.interessen_images_row2 img{
    height: auto;
    width: auto;
    max-width: 25vw;
    max-height: 195px;
    padding: 5px;
    border-radius: 15px;
    overflow: hidden;
    margin-left: 2vw;
} 

.feld_kontakt1{
    display: flex;
    margin-top: 19vh;
    margin-bottom: 60px;
    justify-content: center;
}

.feld_kontakt2{
    display: flex;
}  

.kontakt_row1{
    display: block;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0;
    text-align: center;
    
}

.kontakt_row2{
    display: block;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 0;
    text-align: center;
}

.kontakt_row1 img{
    height: auto;
    width: auto;
    max-width: 30vw;
    max-height: 195px;
    padding: 5px;
    border-radius: 40px;
    overflow: hidden;

}

.kontakt_row2 img{
    height: auto;
    width: auto;
    max-width: 30vw;
    max-height: 195px;
    padding: 5px;
    border-radius: 15px;
    overflow: hidden;
}