/* Basis-Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #163f5c;
    color: white;
    font-family: "xenera", sans-serif;
    font-size: 20px;
    line-height: 1.6;
}

header {

    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, padding 0.3s ease;
    display: flex;
    flex-direction: column;
}

header .social.desktop-social {
    background-color: #1b5076; /* Schwarz */
    color: #ffffff; /* Weiß */
    display: flex;
    justify-content: flex-end; /* Icons am rechten Rand ausrichten */
    padding: 10px 20px;
}

header .social.desktop-social a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 15px;
    font-size: 20px; /* Größere Icons */
    transition: color 0.3s ease;
}

header .social.desktop-social a:hover {
    color: #dddddd;
}

header .header-content {
    background-color: #163f5c; /* Hintergrundfarbe */
    color: #ffffff; /* Textfarbe */
    padding: 20px; /* Gesamt-Padding */
    transition: background-color 0.3s ease, padding 0.3s ease;
    text-align: center; /* Zentrieren des Inhalts */
    position: relative;
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikale Ausrichtung */
    justify-content: space-between; /* Platz zwischen den Elementen */
}

header .header-content img {
    width: 100px; /* Feste Breite für das Bild */
    height: 100px; /* Feste Höhe für das Bild */
    object-fit: cover; /* Bild anpassen */
}


header .hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 20px;
    transition: transform 0.3s ease;
}

/* Hamburger-Icon */
.hamburger::before {
    content: '\f0c9'; /* Unicode für Hamburger-Icon (Font Awesome) */
    font-family: "Font Awesome 5 Free"; /* Hier den Font Awesome Family verwenden */
    font-weight: 900; /* Fette Version */
}

/* X-Icon */
.header-content .hamburger.active::before {
    content: '\f00d'; /* Unicode für X-Icon (Font Awesome) */
    transition: transform 0.3s ease; /* Animation für das X-Icon */
    transform: rotate(45deg); /* Optional: Drehung für bessere Darstellung */
}





nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

/* Menü Items */
nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #555555;
}



main {
    padding-top: 140px; /* Platz für den fixierten Header (social + header-content) */
}






nav ul li.social-mobile {
    display: none;
}


/* Hauptbereich (Main) */
main {
    position: relative;
    height: 100vh; /* Volle Höhe des Viewports */
    width: 100%;
    overflow: hidden; /* Verhindert das Scrollen bei übergroßen Bildern */
}

/* Hintergrundbild */
main .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild passt sich an den Container an, ohne das Seitenverhältnis zu verändern */
    z-index: -2; /* Bild hinter dem Overlay und Inhalt */
}

/* Overlay mit Farbverlauf */
main .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Overlay zwischen Bild und Inhalt */
    background: linear-gradient(to right, #163f5c,  #163f5c, rgba(57, 85, 105, 0)); /* Dunkler Verlauf von links nach rechts */
}




.content {
    font-family: "bungee", sans-serif;
    font-size: 40px;
    color: white; /* Textfarbe */
    text-align: center; /* Text zentrieren */
    
    position: absolute; /* Absolut positioniert relativ zum Hauptbereich */
    top: 35%; /* 20% vom oberen Rand */
    left: 20%; /* 20% vom linken Rand */
    right: 20%; /* 20% vom rechten Rand */
    bottom: 20%; /* Optional: 20% vom unteren Rand, wenn du vertikalen Abstand möchtest */
    transform: none; /* Entferne vorherige Zentrierung */
}

.button {

    font-size: 25px;
    display: inline-block; /* Damit der Button die Größe des Inhalts hat */
    padding: 10px 20px; /* Innenabstand */
    margin-top: 20px; /* Abstand zum Text */
    background-color: #395569; /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe des Buttons */
    text-decoration: none; /* Unterstreichung entfernen */
    border-radius: 5px; /* Runde Ecken */
    transition: background-color 0.3s; /* Übergangseffekt für den Hover-Zustand */
}

.button:hover {
    background-color: #0f2230; /* Dunklere Farbe beim Hover */
    transform: scale(1.05); /* Vergrößert den Button leicht beim Hover */
}




#angebot {
    padding: 60px 20px;
    text-align: center;
}

#angebot h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.angebot-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.angebot-box {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    width: 250px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.angebot-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.angebot-box i {
    font-size: 40px;
    color: #163f5c;
    margin-bottom: 15px;
}

.angebot-box h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #163f5c;
}

.angebot-box p {
    font-size: 16px;
    line-height: 1.5;
    color: #333333;

}

/* Sektion: Statistik */
#statistik {
    padding: 60px 20px;
    background-color: #163f5c;
    color: #ffffff;
    text-align: center;
}

#statistik h2 {
    font-size: 36px;
    margin-bottom: 40px;
}

.statistik-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.statistik-box {
    background-color: #1b5076;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    width: 200px;

}

.statistik-box h3 {
    font-size: 32px;
    margin-bottom: 10px;
    color: #ffffff;
}

.statistik-box p {
    font-size: 23px;
    color: rgba(255, 255, 255, 0.8);
}



/* FAQ Section */
#faq {
    padding: 60px 20px;
    color: #ffffff;
    text-align: center;
}

#faq h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #ffffff;
}

.faq-container {
    display: flex;
    justify-content: center;
    gap: 40px; /* Mehr Abstand zwischen den Spalten */
    max-width: 1200px;
    margin: 0 auto;
    
}

.faq-column {
    flex: 1; /* Jede Spalte nimmt gleichen Raum ein */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Abstand zwischen den FAQ-Items innerhalb der Spalte */
    
}

.faq-item {
    border-radius: 10px;
    overflow: hidden;
    background-color: #1b5076;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover-Effekt bleibt gleich */
.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.faq-question {
    width: 100%;
    padding: 15px 20px;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    background-color: #1b5076;
    color: #ffffff;
    border: none;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #1b5076;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: #f9f9f9;
    padding: 0 20px;
}

.faq-answer p {
    padding: 15px 0;
    font-size: 18px;
    color: #333333;
}

/* Aktive FAQ-Item */
.faq-item.active .faq-answer {
    max-height: 500px; /* Ausreichend groß, um den Inhalt aufzunehmen */
    padding: 15px 20px;
}

#partner {
    padding: 60px 20px;
    text-align: center;
    background-image: url('bilder/pol_bg_jahn.png'); /* Hier den Pfad zu deinem Bild einfügen */
    background-size: cover; /* Bild auf die gesamte Fläche skalieren */
    background-position: center; /* Bild zentrieren */
    background-repeat: no-repeat; /* Verhindern, dass das Bild wiederholt wird */
    color: white; /* Textfarbe auf Weiß ändern, um Kontrast zu schaffen */
}


#partner h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #ffffff;
}

.partner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.partner-box {
    position: relative; /* Für die absolute Positionierung des Buttons */
    width: 300px; /* Feste Breite */
    overflow: hidden; /* Überlaufende Inhalte ausblenden */
    border-radius: 10px; /* Runde Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: linear-gradient(to bottom, #10101015, #101010a1, #10101054, #101010e0); /* Farbverlauf von oben nach unten */

}

.partner-box img {
    width: 100%; /* Bild passt sich an den Container an */
    height: auto; /* Höhe automatisch */
    transition: transform 0.3s ease; /* Animationseffekt für das Bild */
}

.partner-box:hover {
    box-shadow: 0 6px 30px rgba(0, 102, 255, 0.745); /* Verstärkter Schatten beim Hover */
    border: 5px solid #007bff; /* Kräftiger blauer Rand beim Hover */
}

.partner-box:hover img {
    transform: scale(1.1); /* Bild beim Hover leicht vergrößern */
}

.partner-text {
    position: absolute; /* Position des Textes */
    bottom: 60px; /* Abstand vom unteren Rand */
    left: 5px;

}

.partner-box:hover .partner-text {
    transform: translateY(-15px); /* Text um 10px nach oben verschieben */
    opacity: 1; /* Text sichtbar beim Hover */
}

.visit-button {
    position: absolute;
    bottom: 20px; /* Position des Buttons */
    left: 50%;
    transform: translateX(-50%); /* Button zentrieren */
    padding: 10px 20px; /* Innenabstand */
    background-color: #395569; /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe */
    text-decoration: none; /* Unterstreichung entfernen */
    border-radius: 5px; /* Runde Ecken */
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease; /* Übergangseffekt für den Hover */
}

.partner-box:hover .visit-button {
    opacity: 1; /* Button sichtbar beim Hover */
}


#main-footer {
    background-color: #333; /* Dunkler Hintergrund */
    color: #fff; /* Weiße Schriftfarbe */
    padding: 20px 0; /* Vertikaler Abstand */
    text-align: center; /* Zentriert den Text */
}

.footer-content {
    display: flex; /* Flexbox für die Abschnitte */
    justify-content: space-around; /* Gleichmäßige Verteilung der Abschnitte */
    margin-bottom: 20px; /* Abstand zum unteren Text */
}

.footer-img {
    width: 100px; /* Feste Breite für das Bild */
    height: 100px; /* Feste Höhe für das Bild */
    object-fit: cover; /* Bild anpassen */


}

.footer-section {
    flex: 1; /* Gleiche Breite für alle Abschnitte */
    margin: 0 10px; /* Abstand zwischen den Abschnitten */
}


.footer-bottom {
    font-size: 16px; /* Kleinere Schriftgröße */
}



#ankündigungen {
    padding: 60px 20px;
    margin-top: 200px; /* Fügt mehr Abstand nach oben hinzu */
    color: #ffffff;
    text-align: center;
}

#ankündigungen h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #ffffff;
}

.ankündigungen-container {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung */
    align-items: center; /* Zentriert die Ankündigungen */
    gap: 20px;
}

.ankündigung-box {
    background-color: #1b5076;
    border-radius: 10px;
    padding: 20px;
    width: 90%; /* Breite anpassen, um auf kleineren Bildschirmen gut zu wirken */
    max-width: 800px; /* Maximale Breite festlegen */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Inhalt vertikal anordnen */
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
}

.f8 {
    background-color: #333;
}

.f8:hover {
    background-color: #7f7e7e;
}

.regelwerk-link {
    color: inherit; /* Vererbt die Farbe des Elternelements, z.B. die Textfarbe des <li> */

}

.regelwerk-link:hover {
    color: #0088ff; /* Ändere die Farbe beim Hover, wenn gewünscht */
    text-decoration: underline; /* Optional: Unterstreichung bei Hover */
}

.ankündigung-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.ankündigung-img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.ankündigung-content h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #ffffff;
}

.ankündigung-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #dddddd;
}

.ankündigung-content .datum {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    color: #aaaaaa;
}


#join {
    padding: 225px 20px;
    color: #ffffff;
    text-align: center;
}

#join h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

#join p {
    font-size: 20px;
    margin-bottom: 40px;
}

.join-container {
    max-width: 1200px;
    margin: 0 auto;
}

.join-step {
    background-color: #1b5076;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.join-step h3 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.join-step h3 i {
    margin-right: 10px;
    color: #ffffff;
}

.join-step p {
    font-size: 18px;
    margin-bottom: 10px;
}

.join-step ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.join-step ul {
    list-style-type: disc;
    margin-left: 40px;
}


/* Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin-top: 40px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


#team {
    padding: 250px 20px;
    color: #ffffff; /* Textfarbe */
}

#team h2 {
    font-size: 36px;
    margin-bottom: 40px;
    text-align: center;
}

.team-container {
    max-width: 1200px;
    margin: 0 auto 60px auto;
}

.team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.team-member {
    background-color: #1b5076;
    border-radius: 10px;
    padding: 20px;
    width: 350px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.team-member img {
    width: 275px;
    height: 275px;
    object-fit: cover;
    border-radius: 10%;
    margin-bottom: 15px;
}

.team-member h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #ffffff;
}

.team-member p {
    font-size: 16px;
    margin-bottom: 5px;
    color: #dddddd;
}


.dev {
    font-family: "bungee", sans-serif;
    font-size: 100px;
    color: white; /* Textfarbe */
    text-align: center; /* Text zentrieren */
}






/* Mobile Styles */
@media (max-width: 1024px) {
    /* Verstecke die Desktop-Social-Icons auf mobilen Geräten */
    header .social.desktop-social {
        display: none;
    }

    #join h2 {
        font-size: 28px;
    }

    .join-container {
        padding: 0 10px;
    }

    .join-step {
        padding: 15px;
    }

    .video-container {
        margin-top: 30px;
    }

    nav ul {
        display: none; /* Versteckt standardmäßig */
        flex-direction: column;
        font-size: 30px;
        text-align: center;
        background-color: #163f5c;
        position: absolute; /* Ändere von fixed zu absolute */
        top: 100%; /* Das Menü direkt unter dem Header positionieren */
        left: 0; /* Start innerhalb des Bildschirms */
        width: 100%; /* Breite des Menüs einstellen */
        min-height: 87vh; /* Mindesthöhe des Menüs */
        padding: 20px 0;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
        transition: left 0.3s ease; /* Animation bei Bewegung */
        z-index: 999; /* Sicherstellen, dass das Menü über dem Hintergrund bleibt */
    }
    
    nav ul li {
        flex-grow: 1; /* Jedes Element nimmt den verfügbaren Platz ein */
        color: white; /* Schriftfarbe */
    }

    nav ul.show {
        display: flex; /* Zeigt das Menü */
    }

    header .header-content .hamburger {
        display: block;
    }

    /* Style für die Social-Icons im mobilen Menü */
    nav ul li.social-mobile {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        border-top: 1px solid #e0e0e0; /* Optional: Trenne die Social-Icons optisch */
        padding-top: 20px;
    }

    nav ul li.social-mobile a {
        color: #ffffff;
        margin: 0 10px;
        font-size: 20px;
        transition: color 0.3s ease;
    }

    nav ul li.social-mobile a:hover {
        color: #555555;
    }

    .content {
        font-size: 25px; /* Kleinere Schriftgröße auf Tablets */
        top: 28%; /* Weniger Abstand oben */
        left: 10%; /* Weniger Abstand links */
        right: 10%; /* Weniger Abstand rechts */
        bottom: auto; /* Kein Abstand unten */
    }


    .angebot-container, .statistik-container {
        flex-direction: column;
        align-items: center;
    }
    
    .angebot-box, .statistik-box {
        width: 80%;
    }
    
    .faq-container {
        flex-direction: column;
        gap: 20px;
    }

    .faq-column {
        width: 100%;
    }



}