/* ============================================
   MAIN.CSS - REFACTORED VERSION
   
   Zweck: Globale Body-Styles, Hintergrundbild, Site-Wrapper
   Änderungen:
   - Doppelte @media-Regeln entfernt (jetzt in layout.css)
   - Performance-Optimierung für Mobile hinzugefügt
   - Backdrop-Filter Fallback hinzugefügt
   ============================================ */

/* ============================================
   GLOBAL BODY BACKGROUND
   ============================================ */

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #0b1120; /* dunkler Fallback */

    /* Globales Foodblog-Hintergrundbild */
    background-image: url('/assets/images/gv-food-banner-hp.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #e5e7eb;
}

/* Halbtransparenter Layer für den gesamten Inhalt */
.site-wrapper {
    min-height: 100vh;
    background: rgba(15, 23, 42, 0.83);  /* dunkles Overlay */
    backdrop-filter: blur(2px);          /* leichter Weichzeichner */
}

/* Fallback für Browser ohne backdrop-filter Support */
@supports not (backdrop-filter: blur(2px)) {
    .site-wrapper {
        background: rgba(15, 23, 42, 0.95);  /* Mehr Deckkraft als Fallback */
    }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIERUNG
   ============================================ */
@media (max-width: 767px) {
    /* Fixed Background kann auf Mobile ruckeln - auf scroll ändern */
    body {
        background-attachment: scroll;
    }
    
    /* Backdrop-Filter ist performance-intensiv auf Mobile - deaktivieren */
    .site-wrapper {
        backdrop-filter: none;
        background: rgba(15, 23, 42, 0.95);  /* Mehr Deckkraft statt Blur */
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .site-wrapper {
        background: white;
        backdrop-filter: none;
    }
    
    .site-header,
    .site-footer,
    .mobile-menu-toggle,
    .hero-actions {
        display: none;
    }
}