body {
    font-family: Arial, sans-serif;
}


.page {
    display: none;
}

.active {
    display: block;
}

nav, .initial-page {
    display: block;
}

.hidden {
    display: none;
}

.background {
    position: relative;

}

.navigation {
    display: inline-block;
    border: 3px solid black;
    color: black;
    background-color: skyblue;
    border-radius: 18px;
    font-size: 26px;
    margin-left: 10px;
    margin-bottom: 10px;
}

#page5-homepage {
    margin-bottom: 50px;
}

.text {
    color: black;
    font-size: 20px;
    margin-left: 10px;
    font-family: Helvetica;
    padding-right: 5px;
}

.impressum-text {
    color: black;
    font-size: 11px;
    margin-left: 10px;
    font-family: Helvetica;
    padding-right: 5px;
    border: 2px solid black;
    padding: 15px;
}

.impressum-title {
    color: black;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 15px;
}

.impressum-text-link {
    text-decoration: none; 
    color: black !important;
}

.stricktreff {
    border: 5px solid black; 
    border-radius: 15px; 
    text-align: center; 
    margin: 0 auto; 
    display: block; 
    max-width: 80%; 
    height: 50%;
    width: 50%;
}

.stricktreff img {
    max-width: 100%; 
    height: auto; 
    border-radius: 15px; 
}

.workshop-container {
    display: flex;             /* Verwende Flexbox für eine Reihe */
    flex-wrap: wrap;           /* Zeilenumbruch erlauben, falls der Platz nicht reicht */
    justify-content: center;    /* Zentriert den Inhalt horizontal */
    gap: 10px;                  /* Abstand zwischen den Bildern */
}

.workshop {
    border: 5px solid black; 
    border-radius: 15px; 
    text-align: center; 
    margin: 0 auto; 
    display: block; 
    max-width: 80%; 
    height: 25%;
    width: 25%;
}

.video-container {
    display: flex;             /* Flexbox, um die Videos nebeneinander anzuordnen */
    justify-content: center;    /* Zentriert die Videos im Container */
    gap: 10px;                  /* Abstand zwischen den Videos */
}

.small-video {
    width: 300px;                 /* Skaliert die Videos auf 50% der Containerbreite */
    border: 5px solid black; 
    border-radius: 15px;
}



/* Entfernt auch bei Hover und Besuch den Unterstrich und behält die schwarze Farbe */
.impressum-text-link:visited,
.impressum-text-link:hover,
.impressum-text-link:active {
    text-decoration: none;
    color: black !important;
}

.header {
    position: relative;
    width: 100%;
    height: 260px;
}

.header::after {
    content: "";
    display: table;
    clear: both;
}


.button {
    background-color: skyblue; /* Setzt die Hintergrundfarbe auf Blau */
    color: black;              /* Textfarbe auf Schwarz */
    border: 3px solid black;   /* Schwarz umrandet */
    border-radius: 5px;       /* Leicht abgerundete Ecken */
    font-size: 15px;           /* Erhöht die Schriftgröße um 10% */
    padding: 5px 15px;        /* Polsterung für einen größeren Button */
    cursor: pointer;           /* Zeiger-Cursor beim Überfahren */
    transition: background-color 0.3s; /* Sanfter Übergang für die Hintergrundfarbe */
}

.button:hover {
    background-color: deepskyblue; /* Ändert die Hintergrundfarbe beim Hover */
}

textarea {
    width: 100%;           /* Volle Breite */
    padding: 10px;        /* Innenabstand für die Textarea */
    border: 1px solid #ccc; /* Rahmen für die Textarea */
    border-radius: 5px;   /* Abgerundete Ecken */
    font-size: 16px;      /* Schriftgröße */
    line-height: 1.5;     /* Zeilenhöhe */
    height: 100px;        /* Höhe der Textarea (3 Zeilen) */
    resize: none;         /* Verhindert das Verändern der Größe */
}

/* Stellt sicher, dass keine anderen CSS-Regeln die Textarea beeinflussen */
#registrationForm textarea {
    height: auto;         /* Höhe zurücksetzen für spezifische Regeln */
}




.button-container {
    display: flex;               /* Flexbox für die zentrierte Ausrichtung */
    justify-content: center;     /* Zentriert den Button */
    margin-top: 20px;           /* Abstand zum vorherigen Inhalt */
    margin-bottom: 20px;        /* Abstand nach unten */
}

.open-button {
    padding: 10px 20px;
    background-color: #007bff;  /* Blaue Farbe */
    color: white;
    border: 2px solid black;
    cursor: pointer;
    border-radius: 5px;         /* Leicht abgerundet */
    font-size: 18px;            /* Größere Schriftart für den Button */
}

.open-button:hover {
    background-color: #0056b3;  /* Dunklerer Blauton beim Hover */
}


.overlay {
    display: none; /* Standardmäßig versteckt */
    position: fixed; /* Fixiert im Ansichtsbereich */
    top: 0; /* An der Oberseite des Bildschirms */
    left: 0; /* An der linken Seite des Bildschirms */
    width: 100%; /* 100% der Breite */
    height: 100%; /* 100% der Höhe */
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparent */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    z-index: 999; /* Stellt sicher, dass es über anderen Inhalten liegt */
}



.form-container {
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    position: relative;
    max-width: 500px; /* Maximale Breite des Formulars */
    width: 90%; /* Breite auf 90% des Bildschirms */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    overflow-y: auto; /* Ermöglicht das Scrollen bei Überlauf */
}


.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: black;
}

.close-btn:hover {
    color: red;
}

.required {
    color: red;
}



@media only screen and (max-width: 768px) {

    #strick, #schoepfle {
        display: none !important;
    }


    .background {
        display: flex;
        justify-content: center; 
        height: auto;
        padding: 20px 0;
    }

    .logo {
        transform: translateY(-20mm); 
    }

    .logo img {
        width: 90%;           
        max-width: 260px;
        height: 90%;
    }

    
}






.logo {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -15%);
    z-index: 2;
}

#strick {
    position: absolute;
    top: 0%;
    left: 0%; 
    transform: translateY(-50%, -50%);
    z-index: 1;
}

#schoepfle {
    position: absolute;
    top: 0%;
    right: 0%;
    transform: translateY(-50%, -50%);
    z-index: 1;
}