.hero {
    position: relative; 
    text-align: center; 
    min-height: 100vh
}

.hero img {
    width: 100vw;
    height: auto;
    object-fit: cover;
    
}

.hero div {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: white; 
}

.hero h1, .hero h2 {
    margin: 0;
    padding: 0;
}

.hero h1 {
    font-family: 'Italiana', serif; 
    font-size: 7vw;
    color: rgb(32, 32, 32);
}

.hero h2 {
    font-size: 2vw;
    font-weight: 400;
    color: rgb(32, 32, 32);
}
.italiana-regular {
    font-family: "Italiana", serif;
    font-weight: 400;
    font-style:normal;
    
  }
/*schrift responisv*/

@media (max-width: 768px) {
    .hero h1 {
        font-size: 10vw; /* Größer auf kleinen Bildschirmen */
        line-height: 1;
    }

    .hero h2 {
        margin-top: 10px;
        font-size: 20px;
    }
}


@media (max-width: 1024px) {
    .hero img {
        height: 100vh; /* Auf Tablets etwas kleiner */
    }
}

@media (max-width: 768px) {
    .hero img {
        margin-top: 100px;
        height: 70vh; /* Auf Smartphones noch kleiner */
        object-fit: cover; /* Sorgt dafür, dass das Bild vollständig sichtbar bleibt */
    }
}

  
#platzhalter{

height: 100px;

}


/* Vorstellungsbereich - Container für Bild und Text */
.vorstellung-container {
    position:relative;
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: space-between; 
    gap: 4rem;
    margin-top: 2rem; 
}


.mypicture img {
    padding-left: 7rem;
    width: 20vw; 
    height: auto;
    object-fit: cover; 
    transition: transform 0.3s ease-in-out;
    
}

.mypicture img:hover {
    
    transform: scale(1.05); 
}


.indexText  {
    flex: 1;
    font-size: 1.3vw;
    padding-right: 7rem;
    transition: transform 0.3s ease-in-out;
}


@media (max-width: 768px) {
    .vorstellung-container {
        flex-direction: column; /* Ändert das Layout auf Spaltenanordnung */
        align-items: center; /* Zentriert die Elemente */
        text-align: center; /* Sorgt dafür, dass der Text mittig bleibt */
    }

    .mypicture img {
        width: 60%; /* Macht das Bild kleiner auf Handys */
        padding-left: 0; /* Entfernt das Padding */
        margin-bottom: 10px; /* Fügt etwas Abstand zwischen Bild und Text hinzu */
    }

    .indexText {
        padding-left: 20px; 
        padding-right: 20px;/* Entfernt das Padding auf der rechten Seite */
        font-size: 1rem; 
        
    }
    .indexText p {
        text-align: justify;
        text-align-last: center;
    }
}




/* Scroll Down Pfeil*/
.scroll-down {
    position: absolute;
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    animation: bounce 1.5s infinite; 
}

.arrow {
    width: 20px; 
    height: 20px; 
    border-left: 2px solid #fe82f0; 
    border-bottom: 2px solid #fe82f0; 
    transform: rotate(-45deg);
}


@keyframes bounce {
    0% {
        transform: translateY(0) rotate(-45deg);
    }
    50% {
        transform: translateY(10px) rotate(-45deg);
    }
    100% {
        transform: translateY(0) rotate(-45deg);
    }
}





/* button */


 
.button-container {
    width: 100%; /* Der Container nimmt die gesamte Breite ein */
    text-align: center; /* Zentriert den Button im Container */
    margin-top: 2rem; /* Abstand nach oben, damit der Button nicht direkt am Inhalt klebt */
    margin-bottom: 60px; /* Abstand zum Footer */
}



@keyframes parallax {
    to {
        transform: translateY(200px);
    }
}