/* MFC Salzgitter - Universal Mobile & Layout Fix (V 1.8) */

/* 1. GLOBALE BASIS */
html, body {
    position: relative;
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box !important; }

/* 2. NAVIGATION & LOGO FIX (Das eigentliche Problem) */

/* DESKTOP (Logo & Menü flach halten) */
@media (min-width: 1025px) {
    nav {
        height: 80px !important; /* Maximale Gesamthöhe der Leiste */
        display: flex !important;
        align-items: center !important;
    }

    .nav-logo-area {
        padding: 5px 20px !important; /* Weniger Abstand oben/unten */
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-logo-area img {
        height: 60px !important; /* Zwingt das Logo auf eine vernünftige Größe */
        width: auto !important;
    }

    .nav-links-area {
        padding: 0 20px !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-links-area a {
        padding: 10px 15px !important; /* Kompakteres Menü */
    }
}

/* 3. WETTER-HERO (Blauer Balken) - Zurück auf Normalmaß */
@media (min-width: 1025px) {
    .weather-hero {
        padding: 40px 20px !important;
    }
    .weather-badge {
        padding: 15px 25px !important;
    }
}

/* 4. MOBILE OPTIMIERUNG (Handy & Tablet) */
@media (max-width: 1024px) {
    /* Logo auf dem Handy verkleinern, damit es nicht alles wegschiebt */
    .nav-logo-area img {
        height: 50px !important;
        width: auto !important;
    }

    nav { 
        flex-direction: column !important; 
        height: auto !important;
    }
    
    .nav-logo-area, .nav-links-area { 
        width: 100% !important; 
        justify-content: center !important; 
        display: flex !important; 
        padding: 10px !important;
    }

    .nav-links-area a { 
        padding: 6px 10px !important; 
        font-size: 0.8rem !important; 
    }

    .weather-hero {
        padding: 30px 15px !important;
    }

    h1, .weather-hero h1 {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    }
}

/* 5. TABELLEN & BILDER */
img { max-width: 100%; height: auto; }
.table-wrap { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }