body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: rgb(18, 18, 20);
}

/* Setzt das Hintergrundbild mit einem Transparent Effekt fuer die erste Seite */
#page_1 {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}


#starterfahremehr1 {
    position: absolute;
    margin-top: 15vh;
    color: white;
    font-size: 2vw;
    padding: 0.3vw;
}
@media (orientation: portrait) {
    #starterfahremehr1 {
        text-align: center;
        width: 100vw;
        font-size: 2.5vh;
    }
    #starterfahremehr2 {
        text-align: center;
        width: 100vw;
        font-size: 2.5vh;
    }
    .starterfahremehr {
        margin-left: 20vw;
        width: 60vw;
        margin-top: 22vh;
        font-size: 2.5vh;
    }
    #slogan2{
        display: none;
    }
}

.starterfahremehr {
    position: absolute;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border: 0.1vw solid white;
    border-radius: 30vh;
}
@media (orientation: landscape) {
    #starterfahremehr1 {
        margin-left: 65vw;
        font-size:1.8vw;
    }

    .starterfahremehr {
        margin-top: 25vh;
        margin-left:78vw;
        font-size:1.5vw;
        padding-left:3vw;
        padding-right:3vw;
    }
    #starterfahremehr2 {
        margin-left: 65vw;
        font-size:1.8vw;
        font-size: 2vw;
        z-index:100;
    }

}
#starterfahremehr2 {
    position: absolute;
    margin-top: 15vh;
    color: white;
    padding: 0.3vw;
}





#slideshowbild1info {
    text-decoration: none;
}

#startseite {
    font-weight: 700;
}

/* ende #header #iconbar */

#headerslogan {
    color: rgb(255, 255, 255);
    font-size: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 110px;
}




#slogan-container {
    top: 0;
    padding: 10px;
    /* Innenabstand für Slogan-Container (optional) */
    z-index: 100;
    /* Falls erforderlich, um sicherzustellen, dass der Slogan über anderen Inhalten liegt */

}




#slogan2 {
    color: #cccccc;
    font-size: 0.9vw;
    margin-left: 3vw;
    margin-right: 3vw;
    margin-top:-6vw;
}

#slogan3 {
    padding-left: 3vw;
    margin-top: -6.5vw;
    font-size: 1.8vw;
    color: #cccccc;
    background: none;
    font-weight: bold;
}


.linkno2{
    text-decoration: none;
    color: white;
}


#start_logo {
    width: 100%;
}




#indexwarumlocallineviews{
    padding-top:20vh;
}

#indexwarumstrich{
    margin-top:20vh;
}



.comingsoon{
    color:grey;
    margin-left:5vw;
    font-size:1.2vw;
}

@media (orientation:portrait){
    #indexwarumstrich{
        margin-top:0;
    }
    .comingsoon{
        text-align: center;
        font-size:4vw;
        margin-bottom:5vh;
    }
    #hochzeitsbox{
        display: none;
    }
    #hochzeitsboxhandy{
        margin-top:10vw;
    }

    .referenzen {
        left: 50%; /* Position für Referenzen */
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.05); /* Dunkler beim Hover */
        font-family: 'Playfair Display', 'Times New Roman', serif;
    }
    .text-overlay {
        font-size: 8vw;
        bottom: 28%;
    }
    .fotografie {
        left:50%; /* Position für Fotografie */
        transform: translateX(-50%);
        bottom: 16%;
        background-color: rgba(0, 0, 0, 0.05); /* Dunkler beim Hover */
        font-family: 'Cormorant Garamond', serif;
    }


      }






@media (orientation: landscape) {
    #hochzeitsbox{
        width:100%;
        position: relative;
    }
    #hochzeitsbild{
        width:90%;
        position:relative;
        margin-left:5%;
        margin-top:8vw;
    }
    #hochzeitsboxhandy{
        display: none;
    }

    .referenzen {
        left: 34%; /* Position für Referenzen */
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.05); /* Dunkler beim Hover */
        font-family: 'Playfair Display', 'Times New Roman', serif;
    }


    .text-overlay {
        font-size: 3vw;
        bottom: 23%;
    }


    .fotografie {
        left:66%; /* Position für Fotografie */
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.05); /* Dunkler beim Hover */
        font-family: 'Playfair Display', 'Times New Roman', serif;
    }
}



#hochzeitsbox {
    width: 100%;
    position: relative;
}
#hochzeitsbild {
    width: 100%;
    position: relative;
    margin-left: 0;
    margin-top: 6vw;
}
.image-container {
    position: relative;
    width: 90%;
    margin: auto;
}
.text-overlay {
    position: absolute;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 1vw;
    transition: background-color 0.3s ease;
    color: black;
    background-color: rgba(0, 0, 0, 0.05); /* Halbtransparenter Hintergrund */
    font-family: 'Cormorant Garamond', serif;
}
.text-overlay:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Dunkler beim Hover */
    color:white;
}
.mehr{
    left:50%;
    transform: translateX(-50%);
    font-size:1.5vw;
    bottom: 5.5%;
    background-color: rgba(0, 0, 0, 0.05); /* Dunkler beim Hover */
    padding-right:10%;
    padding-left:10%;
    font-family: 'Playfair Display', 'Times New Roman', serif;
}