@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family:sans-serif;
    
    
}

    /*----------------------------------------------
    |              Bild ganz oben                  |
    ----------------------------------------------*/
    .aussen{
        width: 100%;
        height: auto;
    }

    /*----------------------------------------------
    |                  icons                       |
    ----------------------------------------------*/
    .apfel, .pizza, .steak, .cocktail, .drink{
        height: 8%;
        position: absolute;
        
    }
    .apfel{
        margin-top: 4%;
        margin-left: 2%;
        transform: rotate(10deg);
    }
    .pizza{
        margin-top: 16%;
        margin-left: 12%;
    }
    .cocktail{ 
        margin-top: 30%;
        margin-left: 7%;
        transform: rotate(20deg);
    }
    .steak{
        margin-top: 43%;
        margin-left: 12%;
    }
    .drink{
        margin-top: 53%;
        margin-left: 2%;
        transform: rotate(18deg);
    }

    




    button{
        font-size: 18px !important;
        font-weight: bold;
    }
    .button2{
        
        border: 4px solid black;
        color: #000;
        cursor: pointer;
        transition: all 0.3s ease 0s;
        
        left: 20px;
        background-color: white;
        margin-left: 5%;
        margin-top: 80px;
        padding: 9px 10%;
        font-weight: 600;
        
    }

    .button4, .button5{
        position: absolute;
        border: 4px solid black;
        cursor: pointer;
        
        
        background-color: white;
        
        font-weight: 600;
        
        text-align: center;
        padding: 0 5%;
    }
    .button4{
        padding-right: 5%;
        width: 300px;
        height: 40px;
        bottom: 20px;
    }
    
    .button5{
        text-align: center;
        padding-left: 5%;
        
        padding: 1% 5%;
        
    }

    button:hover{
        background-color: grey;
    }


    .aus1{
        height: 1200px;
        display: flex;
        background-color: rgb(249, 243, 225);
        
        
    }
    .ausBil{
        flex: 0.4;
        height: 100%;
    }

    .innBil{
        margin-top: 15%;
        height: 50%;
        flex: 1.1;
        background-size: cover; 
        background-repeat: no-repeat;
        display: flex; 
    }

    .n1, .n2{
        flex: 1;
    }
    
    .n1{
        
        background-color: white;
    }
    .n2{
        background-image: url('VitImage/Startseite/start_about_rossi.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }



    .ue1, .ue18{
        padding-top: 35px;
        font-weight: 300;
        font-size: 18px;
    }

    .ue1::after{
        content: "";
        display: block;
        width: 160px;
        height: 1px;
        background-color: #000;
        margin-top: 5px;
    }
    .ue18{
        background-color: white;
        padding-left: 40px;
    }
    .ue18::after{
        content: "";
        display: block;
        width: 190px;
        height: 1px;
        background-color: #000;
        margin-top: 5px;
    }

    .ue2{
        padding-top: 80px;
        font-size: 40px;
        font-weight: 400;
    }

    .ue3{
        font-size: 40px;
        font-weight: 800;
    }

    .ue4{
        padding-top: 100px;
        font-size: 18px;
        font-weight: 400;
        word-wrap: break-word;
        padding-right: 60px;
        max-width: 60%;
        word-spacing: 0.2em;
    }
    .ue1,.ue2,.ue3,.ue4{
        padding-left: 40px;
        background-color: white;
    }

    .aus2{
        width: 100%;
        height: 900px;
        display: flex;
        position: relative;
    }
    


    .section {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .bil1, .bil2, .bil3{
        flex: 1;
    }
    .dreierKastenNeu{
        display: none;
    }
    .tex1{
        background-color: white;
        flex: 0.7;
    }
    
    .bil1{
        background-image: url('VitImage/Startseite/3links.jpg');
    }

    .bil2{
        background-image: url('VitImage/Startseite/3mitte.jpg');
    }

    .bil3{
        background-image: url('VitImage/Startseite/3rechts.jpg');
    }
    .p2, .p3{
        padding-left: 40px;
        background-color: white;
        
        font-weight: 800;
    }
    .p2{
        padding-top: 80px;
        font-size: 50px;
        font-weight: bold;
    }

    .p3{
        padding-top: 80px;
        font-size: 18px;
        font-weight: bold;
        word-wrap: break-word;
        padding-right: 60px;
        max-width: 80%;
        word-spacing: 0.3em;
    }




    
    .blockP{
        width: 100%;
        display: flex;
        padding-top: 130px;
        position: relative;
        align-items: center;
        justify-content: space-between;
        
    }
    .button10{
        position: absolute;
        border: 4px solid black;
        background-color: white;
        cursor: pointer;
        width: 200px;
        height: 40px;
        border-width: 4px;
        font-weight: 600;
        bottom: 20px;
        text-align: center;
        padding: 0 40px;
        font-size: 16px;
    }
    .block{
        flex: 1;
        height: 450px;
        background-color: white;
        
        
    }
    .block1{
        margin-left: 10%;
    }




    .pblockU, .lowRight1{
        font-size: 40px; 
        background-color: white;
        
    }

    .pblockU{
        padding-top: 30px;
    }

    .pblockT{
        background-color: white;
        font-size: 20px;
        font-weight: 500;
        padding-top: 30px;
    }


    .lowRight2{
        padding-top: 90px;
        background-color: white;
        font-size: 18px;
        font-weight: 650;
        padding-bottom: 50px;   
    }

    .mainOne{
        display: flex; 
        flex-direction: column;
        width: 100%;
        height: 1300px;
        
        position: relative;
    }
    .inner1{
        flex: 0.4;
    }
    .inner2{
        flex: auto;
    }
    .blocks{
        height: 50%; 
        width: 70%;
        margin-left: auto;
    }


    .lowerBlock{
        background-color: transparent;
        display: flex; 
        height: 500px;
    }

    .upperBlock{
        background-color: transparent;
        display: flex; 
        height: 600px;

    }
    .upper{
        
        margin-top: 10%;
        margin-bottom: 2.5%; 
        width: 100%;
        flex: 1;
        margin-right: 80px;
    }

    .upper:last-child{
        margin-right: 0;
    }

    .lower{
        
        margin-top: 2.5%;
        margin-bottom: 5%; 
        width: 100%;
        flex: 1;
        margin-right: 80px;
    }
    .lower:last-child{
        margin-right: 0;
    }

    .upperleft, .upperright, .lowerleft, .lowermiddle{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center; 
    }

    .upperleft{
        background-image: url('VitImage/Startseite/Einblicke-oben-links.webp');
    }
    .upperright{
        background-image: url('VitImage/Startseite/einblicke-oben-rechts.webp');
        
    }

    .lowerright{
        background-color: white;
    }
    .lowerleft{
        background-image: url('VitImage/Startseite/B-Einblicke\ unten\ links.jpg');
    }

    .lowermiddle{
        background-image: url('VitImage/Startseite/einblicke\ unten\ rechts.jpg');
    }

    .lowRight1{
        background-color: white;
        padding-top: 40px;
        font-size: 40px;
        font-weight: 500;
    }
    
    

    .abstand{
        height: 50px;
    }

    
    .whiteBackground{
        background-color: white;
    }
    .handyVers{
        display: none;
    }
 .aussenHandy{
    width: 100%;
 }
 .show2{
    display: none;
 }
 .dreierKastenHH{
    display: none;
 }
 
 .header2{
    display: none;
 }
 .footerMobil{
    display: none;
 }
 .ausaus2{
    display: none;
 }
 .aussenHandy{
    display: none;
 }
 .aus4{
    display: none;
 }

 .grid3x3{
    padding-top: 200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px; /* Adjust the gap as needed */
    width: 80%; /* Adjust the width as needed */
    height: 100%; /* Adjust the height as needed */
    margin: 0 auto; /* Center horizontally */
    
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}
.grid-item {
    
    padding-top: 100%;
    background-size: cover; /* Ensure the image covers the grid item */
    background-repeat: no-repeat;
    background-position: center center;
  }
  .grid-container {
    display: none;
  }
.g1{
    background-image: url('../css/images/instaBilder/Bild1.jpg');
}
.g2{
    background-image: url('../css/images/instaBilder/Bild2.jpg');
}
.g3{
    background-image: url('../css/images/instaBilder/Bild3.jpg');
}
.g4{
    background-image: url('../css/images/instaBilder/Bild4.jpg');
}
.g5{
    background-image: url('../css/images/instaBilder/Bild5.jpg');
}
.g6{
    background-image: url('../css/images/instaBilder/Bild6.jpg');
}

@media(max-width: 900px){
    .grid3x3{
        display: none;
    }
    .abstand{
        display: none;
    }
    .abstand2{
        display: none;
    }
}

@media(max-width: 900px){
    .abstand99 {
        display: none;
    }
    .home-about-section {
        margin-top: 50px;
    }
    .home-about-section p.z1 {
        padding-bottom: 5px;
        text-decoration: none;
    }
    .home-about-section p.z2 {
        font-size: 32px;
    }
    .home-about-section p.z3 {
        padding-bottom: 20px;
        font-size: 32px;
    }
    .home-about-section p.z4 {
        padding-bottom: 25px;
        font-size: 17px;
        margin-right: 50px;
        line-height: 1.4;
    }
    .home-about-section .insertPic {
        transform: translateY(-60px);
    }
    .more-section {
        margin-top: -100px;
    }
    .more-section .z1 {
        padding-bottom: 10px;
        text-decoration: none;
    }
    .more-section .z6 {
        padding-bottom: 20px;
        font-size: 32px;
    }
    .more-section .z4 {
        font-size: 17px;
        margin-right: 70px;
        line-height: 1.4;
    }
    .home-about-section button.z5 {
        transition: all 0.2s;
    }

    .dreierKastenNeu p.texte0002 {
        margin-top: 15px;
        line-height: 1.4;
    }
    .dreierKastenNeu button.button11 {
        margin-top: 20px;
        text-transform: uppercase;
    }

    .mobile-blackbox {
        margin-top: 30px;
    }
    .mobile-blackbox p.ue22 {
        text-decoration: none;
        font-size: 32px;
        margin: 0 5%;
        line-height: 1.4;
    }
    .mobile-blackbox p.p22 {
        line-height: 1.5;
        font-size: 17px;
    }
}