/* ==========================================================================
   GLOBAL RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Verhindert jegliches Scrollen auf PC und Smartphone */
    background-color: #1a120b; /* Das originale, dunkle Mexiko-Braun */
}

/* ==========================================================================
   DESKTOP BACKGROUND LAYOUT (Standard für PCs und Laptops)
   ========================================================================== */
.fullscreen-bg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; /* Füllt den Monitor komplett aus */
    background-position: center center;
    
    /* Originales Querformat-Bild für Desktop */
    background-image: url('fiesta-mediocana-medienmagneten-de.png');
}

/* ==========================================================================
   MOBILE BACKGROUND LAYOUT (Nur für Smartphones bis 768px Breite)
   ========================================================================== */
@media (max-width: 768px) {
    .fullscreen-bg {
        /* Lädt dein geändertes 3:4 Bild */
        background-image: url('fiesta-mediocana-medienmagneten-de-mobile.jpg');
        
        /* Nutzt die dynamische Viewport-Höhe gegen springende Browserleisten */
        height: 100dvh; 
        
        /* Zwingt den Browser, das Bild komplett anzuzeigen – kein Beschnitt seitlich! */
        background-size: contain; 
        
        /* Zentriert das Bild perfekt im Handydisplay */
        background-position: center center;
    }
}