#projektebutton{ 
    display: flex;
    justify-content: center; /* Zentriert den Button horizontal */
    text-decoration: none;
}

/* titel  */
body {
    background-image: none;
  }
/* Stellt sicher, dass der Header und die Überschrift oben zentriert erscheinen */
.überschrift {
    display: flex;          /* Verwenden von Flexbox */
    flex-direction: column; /* Vertikale Anordnung der Elemente */
    justify-content: flex-start; /* Inhalt am Anfang der Seite (relativ oben) ausrichten */
    align-items: center;    /* Horizontal zentrieren */
    height: 30vh;           /* 50% der Bildschirmhöhe für den Bereich */
    padding-top: 60px;      /* Etwas Abstand oben */
}



.überschrift p {
    font-size: 1rem;        /* Schriftgröße für den Text */
    text-align: center;     /* Text zentrieren */
    max-width: 800px;
    padding: 10px;       

}
#howto {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung */
    justify-content: center; /* Zentriert den Text vertikal */
    align-items: center;     /* Zentriert den Text horizontal */
    text-align: center;      /* Zentriert den Text im Paragraphen */
    margin-top: 10px;        /* Etwas Abstand zum oberen Inhalt */
    
    padding: 20px;           /* Etwas Polsterung für den Abschnitt */
    border-radius: 10px;     /* Abgerundete Ecken */
    width: 80%;              /* Maximale Breite des Abschnitts */
    max-width: 600px;        /* Maximale Breite */
    margin-left: auto;
    margin-right: auto;      /* Zentriert den Container auf der Seite */
}

/* Optional: Styling für den Text im #howto-Abschnitt */
#howto p {
    font-size: 1.2rem;
    margin: 0; /* Entfernt den Standardabstand */
    line-height: 1.6; /* Bessere Lesbarkeit */
    
}


/* videoeinbettung*/

/* Stellt sicher, dass die Galerie zentriert ist */
.video-gallery {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Videos horizontal */
    gap: 30px; /* Abstand zwischen den Reihen */
    margin-bottom: 3rem;

    
}


.video-row {
    display: grid; /* Verwenden von CSS Grid für das Layout */
    grid-template-columns: repeat(3, 1fr); /* Drei Videos in einer Reihe */
    gap: 20px; /* Abstand zwischen den Videos */
    width: 80%; /* Maximale Breite der Galerie */
    justify-items: center; /* Zentriert jedes Video in der Reihe */
}



video {
    width: 100%; /* Maximiert die Größe des Videos in seiner Zelle */
    max-width: 400px; /* Maximale Breite jedes Videos */
    border-radius: 8px; /* Abgerundete Ecken */
}

.video-wrapper {
    overflow: hidden; /* Verhindert, dass das Bild aus dem Container herausragt */
    border-radius: 8px; /* Beibehaltung der abgerundeten Ecken */
    transition: transform 0.3s ease-in-out; /* Sanfter Übergang beim Hover */
}

.video-wrapper:hover {
    transform: scale(1.05); /* Leichte Vergrößerung beim Hover */
}

/* Stellt sicher, dass das Video selbst nicht aus dem Container springt */
.video-wrapper video {
    width: 100%; /* Maximale Breite */
    max-width: 400px; /* Begrenzung der Größe */
    border-radius: 8px; /* Gleiche Ecken wie beim Container */
    display: block;
}

/*responives design*/

@media (max-width: 1024px) {
    .video-row {
        grid-template-columns: repeat(2, 1fr); /* Zwei Videos pro Reihe bei mittlerer Bildschirmgröße */
    }
}

@media (max-width: 768px) {
    .video-row {
        grid-template-columns: repeat(1, 1fr); /* Ein Video pro Reihe bei kleinen Bildschirmen */
    }
}