/* Projektsektionen */
.project {
    height: 100vh; /* Jede Sektion füllt den gesamten Bildschirm */
    display: flex;
    justify-content: left;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: white;
    position: relative;
    z-index: 998;
    overflow: hidden;
}


#project1{
    z-index:996; 
}

    .project .content {
        width: 80vw;
        text-align: left;
        background-color: rgba(0, 0, 0, 0); /* Halbdurchsichtiger Hintergrund für bessere Lesbarkeit */
        padding: 25px;
        border-radius: 10px;
    }

   
    .project h1 {
        z-index: 998;
        cursor: pointer;
        font-size: 3em;
        margin: 25px;
        text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
        
    }

    .project h1:hover {
            font-size: 2.99em;
            text-shadow: 4px 4px 10px rgba(0, 0, 0, 3);
        } 


    .project .linkSubTitle { /* unter schrift und erklären und so alles verlinkt zur folge seite */
        font-size: 1em;
        z-index: 998;
        text-decoration: none;
        color: white;
        text-shadow: 4px 4px 10px rgba(0, 0, 4, 3);
        margin: 25px;
        text-indent: 0;
        line-height: 1.2;
        text-align: justify-all;
        
    }

.project .RlinkSubTitle { /* unter schrift und erklären und so alles verlinkt zur folge seite */
    font-size: 1em;
    z-index: 998;
    text-decoration: none;
    color: white;
    text-shadow: 4px 4px 10px rgba(0, 0, 4, 3);
    margin: 25px;
    text-indent: 0;
    line-height: 1.2;
    text-align: justify-all;
    cursor: pointer;
}

       .project .RlinkSubTitle:hover {
            font-size: 1.01em;
            text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
        } 

/* Übergänge zwischen den Projekten */
.project {
    transition: opacity 0.5s ease-in-out;
}

/* Media Query für Bildschirme mit einer Breite von max. 768px (Tablets und Smartphones) */
@media (max-width: 768px) {
    .project {
        background-size: cover; /* Passt das Bild an den Bildschirm an, ohne es zu beschneiden */
        background-position: center;
    }

        .project .content {
            width: 100vw;
        }

    .content {
        text-align: center;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.7); /* Etwas dunkler für bessere Lesbarkeit auf kleineren Bildschirmen */
        border-radius: 10px;
    }

    .project h1 {
        font-size: 1.2em; /* Kleinere Schriftgröße auf mobilen Geräten */
    }

        .project h1:hover {
            font-size: 1.19em;
            text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
        }

    .project .linkSubTitle {
        font-size: 0.7em; /* Kleinere Schrift für den Button */
    }
    .project .RlinkSubTitle {
        font-size: 0.7em; /* Kleinere Schrift für den Button */
    }
    /* .project .linkSubTitle:hover {
        font-size: 1.19em; 
    } */
    scroll-button {
        font-size: 0.5em;
    }
}

#scroll-container {
    display: flex; /* Flexbox zur besseren Kontrolle der Positionierung */
    justify-content: center; /* Zentriert den Button horizontal */

    padding-top: 70vh; /* Verschiebt den Button 50% der Höhe der Seite nach unten */
    padding-bottom: 20px; /* Abstand nach unten */
}


/* scroll button */
.scroll-button {
        justify-content: center;
    padding: 10px 20px;
    background-color: transparent; /* Buttonfarbe */
    color: white; /* Textfarbe */
    border: none; /* Keine Ränder */
    /*   border-radius: ; Abgerundete Ecken */
    cursor: pointer; /* Mauszeiger wird zur Hand */
    font-size: 1em;
    transition: background-color 0.3s ease; /* Weicher Farbwechsel */
    z-index: 997;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

    .scroll-button:hover {
        background-color: transparent; /* Buttonfarbe beim Hover */
        text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
    }

    .scroll-button:active {
        background-color: transparent; /* Buttonfarbe beim Klicken */
    }