/* _responsive.css: Alle Media Queries und mobile Anpassungen */

/* Responsive Anpassung für Gründungsmitglieder */
@media (max-width: 992px) {
    /* Bei mittelgroßen Bildschirmen (Tablets) 2 Spalten */
    .member-founders-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    /* Bei kleinen Bildschirmen (Handy) 1 Spalte */
    .member-founders-grid {
        grid-template-columns: 1fr;
    }
    
}

@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 0; 
    }
    
    /* Logo-Ausrichtung im Mobilmenü wieder normal (linksbündig) */
    .logo {
        align-items: flex-start; 
    }
    .logo a.logo-title {
        text-align: left;
        font-size: 1.8em;
    }
    .logo-slogan {
        text-align: left;
    }


    /* --- LAYOUT ANPASSUNGEN NEU & WICHTIG --- */
    
    .hero-title {
        font-size: 2.5em;
    }

    /* WICHTIG: Nutze Flexbox, um das Stapeln und die Reihenfolge zu garantieren */
    .layout-grid {
        display: flex !important; /* Erzwingt Flexbox statt Grid */
        grid-template-columns: 1fr; /* Bleibt als Fallback/Zur Klarheit */
        flex-direction: column; /* Stapelt die Elemente vertikal */
        gap: 20px; /* Einheitlicher Abstand zwischen den Elementen */
    }
    
    /* Bild über Text anordnen */
    .layout-grid.reverse .image-content {
        order: -1; /* Zieht das Bild im Stapel nach oben */
    }
    
    /* Stellt sicher, dass alle Inhaltselemente 100% Breite einnehmen */
    .layout-grid .text-content { /* HIER: Komma entfernt, um Syntaxfehler zu vermeiden */
        margin-bottom: 0 !important; /* Entfernt Container-Margin */
    }
    .layout-grid .image-content {
        width: 100% !important; 
        min-width: unset !important; 
        
        /* NEUE KORREKTUR: Entfernt alle Ränder (Margins) des Bild-Containers, */
        /* da diese im Flexbox-Kontext den Abstand zusätzlich zum gap erzeugen können. */
        margin: 0 !important; 
        padding: 0 !important;
    }
    
    /* NEUE KORREKTUR 2: Stellt sicher, dass auch das innere Bild keinen Margin hat */
    .layout-grid .image-content img {
        margin: 0 !important;
    }
    
    /* --- ENDE LAYOUT ANPASSUNGEN NEU & WICHTIG --- */


    /* --- BURGER-BUTTON (.nav-toggle) ANPASSUNG --- */
    .nav-toggle {
        display: block; 
        position: absolute;
        right: 20px;
        top: 35px;
        /* Stil: */
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.8em; 
        color: #0310FF;
    }

    /* --- SCHLIESSEN BUTTON (.nav-close-btn) --- */
    /* Dies ist der Button mit dem 'X', der in die nav-list eingefügt wurde */
    .nav-close-btn {
        position: absolute; 
        top: 20px;
        right: 20px;
        font-size: 2em; 
        color: #0310FF; 
        background: none;
        border: none;
        cursor: pointer;
        line-height: 1;
        display: block; 
        width: auto;
        padding: 0;
        z-index: 1001; /* Stellt sicher, dass das X über allem liegt */
    }
    
    /* Der umgebende Listeneintrag, der das 'X' hält */
    .nav-close-btn-li {
        /* Wichtig: Muss immer angezeigt werden, um das 'X' zu zeigen */
        display: block !important;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(2, 2, 207, 0.1); /* Linie wieder drin, falls sie gefehlt hat */
        padding: 0;
    }

    /* --- MOBILE MENÜ (UL.NAV-LIST) ANPASSUNG: OFF-CANVAS --- */
    .main-nav .nav-list {
        flex-direction: column;
        /* WICHTIG: Positionierung */
        position: fixed; 
        top: 0; 
        right: 0; 
        height: 100vh; /* Volle Höhe */
        width: 70%; 
        max-width: 300px; 
        
        /* Layout und Stil */
        display: flex; 
        background-color: #FFFFFF;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); 
        z-index: 1000; 
        padding: 60px 20px 20px 20px; /* Platz für das 'X' oben */
        
        /* SIDE-SLIDE ANIMATION */
        transform: translateX(100%); /* Außerhalb des Bildschirms */
        transition: transform 0.4s ease-out; 
    }

    /* Zustand: Geöffnet (rutscht herein) */
    .main-nav .nav-list.active {
        transform: translateX(0); /* Rutscht auf Position */
    }

    /* Listenelemente */
    .main-nav .nav-list li {
        margin: 0;
        width: 100%;
        text-align: left; 
        border-bottom: 1px solid rgba(2, 2, 207, 0.1);
    }
    
    /* Der letzte Link soll keine Trennlinie haben */
    .main-nav .nav-list li:last-of-type {
        border-bottom: none;
    }

    /* Links im Menü */
    .main-nav .nav-list a {
        padding: 18px 0;
        display: block;
        color: #0310FF;
        font-weight: 700;
        text-transform: uppercase;
        padding-left: 10px;
    }
    
    .hero-title {
        font-size: 2.5em;
    }
}

/* Zusätzliche responsive Anpassungen (z.B. für Galerien und Konzerte) */
@media (max-width: 600px) {
    
/* Bei kleinen Bildschirmen (Handy) 1 Spalte */
    .member-founders-grid {
        grid-template-columns: 1fr;
    }
    
    /* NEUE KORREKTUR: Reduziert den Abstand (Weißraum) zwischen dem Text- und dem Bildinhalt 
       auf der Startseite (index.html), wenn sie gestapelt sind. */
    .layout-grid {
        grid-template-columns: 1fr; /* Stapeln der Inhalte (bereits vorhanden) */
        gap: 30px; /* Reduziert von 40px auf 20px */
    }

    .hero-title {
        font-size: 2.5em;
    }

    /* Mitgliederseite */
    .member-grid {
        grid-template-columns: 1fr; 
    }

    /* Galerien-Seite */
    .image-gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    }
    .gallery-item img {
        height: 180px;
    }

    /* Konzertseite */
    .concert-card {
        flex-direction: column; 
    }
    .date-box {
        width: 100%;
        padding: 10px 0;
        flex-direction: row;
        gap: 10px;
        font-size: 0.9em;
    }
    .date-box .day {
        font-size: 2em;
    }
    .concert-details {
        text-align: center;
    }
    .past-concert-list li {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 0;
    }
    .past-concert-list strong {
        margin-right: 0;
        margin-bottom: 5px;
    }
    .link-to-gallery {
        margin-top: 5px;
    }
}