/* =========================================
   MEDIA QUERIES (RESPONSIVE DESIGN)
   ========================================= */
@media only screen and (max-width: 768px) {
    /* ... deine bereits bestehenden Regeln für 768px ... */
    
    .construction-video {
        margin-bottom: 1rem;
        height: 50px; /* Auf dem Smartphone minimal kleiner */
    }
}

/* --- 1. Kleine Laptops & Tablets Landscape (iPad Pro, kleine MacBooks) --- 
   Breite: 1024px bis 1366px */
@media only screen and (max-width: 1366px) {
    main { padding: 1rem; }
    
    /* Home Layout etwas kompakter */
    .home-container { gap: 30px; padding: 30px; }
    .intro-text h1 { font-size: 2.5rem; }
    .profile-image { max-width: 350px; }
}

/* --- 2. Tablets Portrait (iPad, Galaxy Tab A9) --- 
   Breite: 769px bis 1023px */
@media only screen and (max-width: 1024px) {
    /* Home: Text und Bild untereinander statt nebeneinander */
    .home-container {
        flex-direction: column-reverse; /* Bild oben, Text unten (oder umgekehrt nach Wahl) */
        text-align: center;
    }

    .intro-text { text-align: center; }
    .intro-image-wrapper { margin-bottom: 30px; }
    
    /* Gallerie: 3 Spalten */
    .galerie-section { justify-content: center; }
    .galerie-item { width: 220px; height: 220px; }
}

/* --- 3. Smartphones Landscape & Große Phones (Galaxy S23+, iPhone Pro Max) --- 
   Breite: 481px bis 768px */
@media only screen and (max-width: 768px) {
    
    /* Header: Logo und Navi untereinander */
    header {
        flex-direction: column;
        padding: 1rem 0.5rem;
    }
    .logo { margin-bottom: 1rem; width: 120px; }
    nav ul { gap: 15px; flex-wrap: wrap; justify-content: center; }
    nav ul li a { font-size: 1rem; }

    /* Home: Stapeln */
    .home-container {
        flex-direction: column; /* Text oben, Bild unten */
        padding: 20px;
    }
    .intro-text h1 { font-size: 2rem; }
    .profile-image { max-width: 250px; }

    /* Gallerie: 2 Spalten für gute Übersicht */
    .galerie-item {
        width: 45%; /* Dynamische Breite statt fix 200px */
        height: auto;
        aspect-ratio: 1 / 1;
    }
    
    /* Logo Grid: 1-2 Spalten */
    .logo-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
    
    /* Footer */
    footer { flex-direction: column; gap: 15px; }
}

/* --- 4. Kleine Smartphones (iPhone SE, ältere Androids) --- 
   Breite: bis 480px */
@media only screen and (max-width: 480px) {
    /* Navigation kompakter */
    nav ul { gap: 10px; }
    nav ul li a { font-size: 0.9rem; padding: 5px; }
    
    /* Container Padding reduzieren */
    .logo-container, .galerie-container, .home-container, .impressum-box {
        padding: 20px;
        margin: 10px auto;
    }
    
    /* Lightbox Buttons anpassen */
    .nav-btn { font-size: 3rem; padding: 10px; }
    #prev-btn { left: 5px; }
    #next-btn { right: 5px; }
    #close-btn { right: 10px; top: 10px; font-size: 3rem; }
    
    .intro-text h1 { font-size: 1.8rem; }
}