/* Close button style */
        .close-btn {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 15px;
            background-color: #388e3c;
            color: white;
            text-align: center;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            width: 100%;
        }        

        /* Button to open the popup */
        .button {
            margin: 10px 10px 10px 0px; /* Abstand hinzufügen */
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }









		/* Popup container style */
        #registrationPopup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            max-width: 400px;
            width: 90%;
        }

        /* Overlay */
        #registrationOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        /* Button style */
        .btn {
            margin: 10px 0;
            padding: 10px 15px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn-close {
            background-color: #ff5722;
            width: 100%;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        input {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }










        /* Teilnehmerliste Container */
        #participantList {
            margin-top: 40px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Titel der Teilnehmerliste */
        #participantList h3 {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        /* Beschreibung der Teilnehmerliste */
        .participant-description {
            color: #666;
            margin-bottom: 20px;
        }

        /* Teilnehmerliste (ul) */
        .participant-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* Teilnehmerliste Elemente (li) */
        .participant-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eaeaea;
        }

        /* Nummerierung */
        .participant-number {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #4caf50;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            margin-right: 15px;
            font-weight: bold;
            font-size: 1rem;
        }

        /* Teilnehmername */
        .participant-name {
            font-size: 1rem;
            color: #333;
        }

        /* Hinweis, wenn keine Teilnehmer registriert sind */
        .no-participants {
            color: #666;
            font-style: italic;
            margin-top: 10px;
        }


        /* Infobox Styling */
        .event-info-box {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin-top: 20px;
            font-family: Arial, sans-serif;
        }

        .event-info-box h3 {
            font-size: 1.5rem;
            color: #333;
            margin-bottom: 10px;
        }

        .event-info-box p {
            font-size: 1rem;
            color: #555;
            margin: 5px 0;
        }

        .event-info-box .event-highlight {
            font-weight: bold;
            color: #4caf50;
        }

        .event-info-box a {
            text-decoration: none;
            color: #4caf50;
            font-weight: bold;
        }

        .event-info-box a:hover {
            text-decoration: underline;
        }

 

        #openPopupBtn, #registerBtn {
            margin: 10px 10px 10px 0px; /* Abstand hinzufügen */
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }










        /* Popup Styling */
    #popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        max-width: 500px;
        width: 90%;
        height: auto;
        overflow: hidden;
    }

    /* Tab Navigation Styling */
    .tab-header {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
    }

    .tab-link {
        background: none;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        border-bottom: 2px solid transparent;
        transition: all 0.3s ease;
    }

    .tab-link.active {
        border-bottom: 2px solid #4caf50;
        color: #4caf50;
    }

    /* Tab Content Styling */
    .tab-content {
        display: flex;
        flex-direction: column;
    }

    .tab-pane {
        display: none;
    }

    .tab-pane.active {
        display: block;
    }

    ul {
        list-style: none;
        padding: 0;
    }

    ul li {
        margin: 5px 0;
        font-size: 16px;
    }

    /* Close Button Styling */
    .close-btn {
        display: inline-block;
        width: 100%;
        margin-top: 10px;
        padding: 10px 15px;
        background-color: #388e3c;
        color: white;
        text-align: center;
        cursor: pointer;
        border: none;
        border-radius: 5px;
    }







    /* Styling für Regeln-Liste */
    .rules-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .rules-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eaeaea;
    }

    .rule-number {
        display: inline-block;
        width: 30px; /* Einheitliche Breite */
        height: 30px; /* Einheitliche Höhe */
        background-color: #4caf50;
        color: white;
        text-align: center;
        line-height: 30px; /* Vertikale Zentrierung */
        border-radius: 50%;
        margin-right: 15px;
        font-weight: bold;
        font-size: 1rem; /* Einheitliche Schriftgröße */
        flex-shrink: 0; /* Verhindert, dass die Größe durch flexbox geändert wird */
    }

    .rule-text {
        font-size: 1rem;
        color: #333;
    }

    /* Optionale Überschrift für die Regeln */
    h3 {
        font-size: 1.5rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

    .rules-description {
        color: #666;
        margin-bottom: 20px;
    }




    /* Popup Styling */
    #popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        max-width: 500px;
        width: 90%;
        height: auto; /* Begrenze die Höhe */
        overflow-y: auto; /* Scrollen erlauben, wenn Inhalt zu groß ist */
    }

    #overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    /* Verhindere Scrollen des Hintergrunds */
    body.no-scroll {
        overflow: hidden;
    }


/* Footer Styling */
.footer {
    background-color: #4caf50; /* Gleiche grüne Farbe wie die Buttons */
    color: white;
    text-align: center;
    padding: 10px 0; /* Abstand oben und unten */
    font-size: 14px; /* Dezente Schriftgröße */
    font-family: Arial, sans-serif; /* Einheitliche Schrift */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten oben */
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer p {
    margin: 0;
    padding: 0;
}






/* Styling für den Schließen-Button im Popup */
.popup-close-btn,
.register-btn {
    display: block; /* Block-Element, damit der Button die gesamte Breite einnimmt */
    width: 100%;
    padding: 15px; /* Innenabstand */
    margin-top: 15px; /* Abstand nach oben */
    background-color: #4caf50; /* Grüne Farbe für den Button */
    color: white; /* Weißer Text */
    font-size: 16px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger ändern beim Hover */
    text-align: center; /* Text zentrieren */
    transition: background-color 0.3s ease; /* Sanfte Farbübergänge */
}

/* Hover-Effekt für die Buttons */
.popup-close-btn:hover,
.register-btn:hover {
    background-color: #388e3c; /* Dunkleres Grün beim Hover */
    width: 100%;
}



/* Styling für den Mailto-Link im Footer */
.footer a {
    color: white; /* Gleiche Farbe wie der Text des Footers */
    text-decoration: underline; /* Unterstrichen, um als Link erkennbar zu sein */
    transition: color 0.3s ease; /* Sanfter Übergang beim Hover */
}

.footer a:hover {
    color: #ffcc00; /* Gelbe Farbe beim Hover */
}