/* Grundeinstellungen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Setzt Linkfarben zurück */
a {
    color: white;
    text-decoration: none;
}

body {
    overflow: hidden; /* Verhindert Scrollbalken */
    color: white;
}

/* Hintergrund */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    
    /* Fallback für sehr alte Handys */
    height: 100vh; 
    
    /* Dynamische Höhe für moderne Smartphones */
    height: 100dvh; 
    
    z-index: -1;
}

/* Standardansicht Mobile (Standbild) */
.mobile-bg {
    width: 100%;
    height: calc(100dvh - 53px); /* Nutzt die korrekte, sichtbare Höhe */
    
    background-image: url('Bildzubr1.jpeg'); 
    background-size: cover; 
    background-repeat: no-repeat;
    
    /* Bild wird immer unten verankert */
    background-position: center bottom !important; 
}


.desktop-video {
    display: none; 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header & Navigation */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 10;
}

/* Mobile Header */
.mobile-header {
    position: relative; /* Ankerpunkt für absolute Positionierung */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

/* Mobile Logo Zentrierung */
.logo-mobile {
    position: absolute; 
    left: 50%;          
    transform: translateX(-50%); /* Zentriert das Logo horizontal */
    font-size: 1.8rem; 
    font-weight: 900;
    letter-spacing: 5px;
    z-index: 10;
}

/* Logo Typografie */
.logo-desktop {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Schriftgewicht */
    text-transform: uppercase; /* Versalien */
    letter-spacing: 4px; /* Zeichenabstand */
}

.mobile-right-icons {
    display: flex;
    gap: 15px;
}

.logo-desktop {
    display: none;
}

.desktop-menu {
    display: none;
}

/* Menüpunkte und Button Typografie */
.desktop-menu a, .primary-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Standard Schriftgewicht */
}

/* Hauptinhalt Button (Mobile) */
.content {
    position: fixed;
    bottom: 110px; /* Abstand nach unten */
    left: 50%; 
    transform: translateX(-50%); /* Horizontale Zentrierung */
    z-index: 100;
    width: max-content; /* Breite an Inhalt anpassen */
}

.primary-btn {
    background-color: black; /* Schwarzer Hintergrund */
    color: white;            /* Weiße Schrift */
    border: 2px solid white; /* Weißer Rahmen, damit er nicht unsichtbar wird */
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: 0.3s;        /* Weicher Übergang für Animationen */
}

/*cooler Hover-Effekt, wenn man mit der Maus drüberfährt */
.primary-btn:hover {
    background-color: white;
    color: black;
}

/* Untere Mobile Navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white; 
    display: flex;
    justify-content: space-around;
    padding: 8px 0 12px 0; 
    
    border-radius: 20px 20px 0 0; 
    z-index: 1000; 
    box-shadow: 0px -5px 20px rgba(0,0,0,0.6); 
}

/* Navigationselemente */
.mobile-bottom-nav .nav-item {
    color: black; /* Schrift- und Icon-Farbe */
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
}

/* Abstand Icon zu Text */
.mobile-bottom-nav .nav-item svg {
    margin-bottom: 5px;
}

.nav-item {
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
}

.nav-icon {
    font-size: 1.2rem;
}

/* Mobile Sidebar */
.sidebar {
    height: 100%;
    width: 0; /* Initial versteckt */
    position: fixed;
    z-index: 9999; /* Höchster Z-Index */
    top: 0;
    left: 0;
    background-color: #050505; /* Hintergrundfarbe Sidebar */
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 100px; /* Oberer Innenabstand */
    box-shadow: 10px 0 20px rgba(0,0,0,0.9); /* Schlagschatten Sidebar */
}

/* Sidebar Links */
.sidebar a {
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.3rem; /* Schriftgröße */
    font-weight: 900;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px; /* Unterer Außenabstand */
}

.sidebar a:hover {
    color: white; /* Hover-Status */
}

/* Schließen-Button */
.sidebar .close-btn {
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: 35px;
    color: white;
    cursor: pointer;
    font-weight: 400;
}

/* Desktop / Tablet Ansicht (ab 768px) */
@media (min-width: 768px) {
    /* Hintergrundwechsel */
    .mobile-bg {
        display: none;
    }
    .desktop-video {
        display: block;
    }

    /* Header Desktop */
    .top-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 50px;
    }
    
    /* Mobile-Elemente ausblenden */
    .mobile-header {
        display: none;
    }
    .mobile-bottom-nav {
        display: none;
    }

    /* Desktop-Elemente einblenden */
    .logo-desktop {
        display: block;
    }
    .desktop-menu {
        display: flex;
        gap: 30px;
    }
    .desktop-menu a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: 0.9rem;
    }

   /* Button Position Desktop */
    .content {
        bottom: 80px; /* Etwas tiefer auf dem Laptop, da dort keine Handy-Leiste ist */
        left: 50%;    /* Hält den Button auch auf dem Laptop in der Mitte */
        transform: translateX(-50%); /* Zentriert ihn millimetergenau */
    }
}

/* Unterseiten */

/* Subpage Body */
body.subpage {
    background-color: #050505; /* Hintergrundfarbe */
    overflow-y: auto; 
}

/* Header Subpages */
body.subpage .top-nav {
    background-color: #050505; /* Hintergrundfarbe Header */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999; /* Z-Index Header */
    border-bottom: 1px solid #1a1a1a; /* Untere Rahmenlinie */
}

body.subpage .text-content {
    padding-top: 110px; /* Wert erhöht, damit der Text nicht unter den Header rutscht */
}

.text-content {
    padding: 0px 20px 120px 20px; /* Top-Padding wird vom Befehl oben drüber gesteuert */
    max-width: 800px; /* Maximale Breite */
    margin: 0 auto; /* Zentrierung Textblock */
    font-family: 'Montserrat', sans-serif;
    color: #dddddd; /* Schriftfarbe */
    line-height: 1.6;
}

/* Typografie Überschriften */
.text-content h1 {
    font-weight: 900;
    font-size: 2rem; /* Schriftgröße */
    color: white;
    margin-bottom: 30px;
    text-transform: uppercase;
    
    /* Wortumbruch */
    overflow-wrap: break-word; 
    hyphens: auto; 
}

.text-content h2 {
    font-weight: 900;
    font-size: 1.3rem; /* Schriftgröße */
    color: white;
    margin-top: 40px;
    margin-bottom: 15px;
    text-transform: uppercase;
    overflow-wrap: break-word;
}
/* Gibt den normalen Textabsätzen einheitlich Luft nach unten */
.text-content p {
    margin-bottom: 30px;
}

/* Events Seite (Kachel-Layout) */

.events-container {
    padding: 120px 20px 150px 20px; /* Innenabstände Container */
    max-width: 1000px; /* Maximale Breite Container */
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
}

.events-container h1 {
    text-align: center;
    font-weight: 900;
    font-size: 2.2rem;
    color: white;
    letter-spacing: 5px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.events-grid {
    display: grid;
    /* Grid Setup */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Grid Abstand */
}

.event-card {
    position: relative;
    display: block;
    height: 520px; /* Höhe Eventkarte */
    max-width: 400px; /* Maximale Breite Eventkarte */
    margin: 0 auto; /* Zentrierung Eventkarte */
    border-radius: 15px; 
    overflow: hidden;
    text-decoration: none; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
    transition: transform 0.3s ease; 
}
/* Hellt den oberen Bereich des Flyers leicht auf */
.event-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%; /* Bestimmt, wie weit der helle Verlauf nach unten geht */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    pointer-events: none; /* Wichtig: Verhindert, dass der Filter Klicks blockiert */
    z-index: 1;
}

.event-card:hover {
    transform: scale(1.02);
}

.event-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: top center; /* Bildausrichtung */
}

/* Overlay Verlauf */
.event-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 80px 20px 20px 20px; /* Innenabstände Overlay */
    /* Linear Gradient Overlay */
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.2) 85%, transparent 100%);
    display: flex;
    flex-direction: column;
}

.event-date {
    color: #cccccc;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.event-title {
    color: white;
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.event-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-phase {
    color: white;
    font-size: 0.9rem;
    font-weight: 400;
}

/* Button Pfeil Eventkarte */
.event-arrow {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}